diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 9320aa74bdcd78..87b3cedebd6f1b 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
+        uses: github/codeql-action/init@2cb752a87e96af96708ab57187ab6372ee1973ab # v2.22.0
         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@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
+        uses: github/codeql-action/analyze@2cb752a87e96af96708ab57187ab6372ee1973ab # v2.22.0
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
index 6b823e1e92cdfe..e08b3779c80662 100644
--- a/.github/workflows/scorecards.yml
+++ b/.github/workflows/scorecards.yml
@@ -27,7 +27,7 @@ jobs:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@08b4669551908b1024bb425080c797723083c031 # v2.2.0
+        uses: ossf/scorecard-action@483ef80eb98fb506c348f7d62e28055e49fe2398 # v2.3.0
         with:
           results_file: results.sarif
           results_format: sarif
@@ -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@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
+        uses: github/codeql-action/upload-sarif@2cb752a87e96af96708ab57187ab6372ee1973ab # v2.22.0
         with:
           sarif_file: results.sarif
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5553d992e3a64..0426cc1fede820 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,87 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.12
+
+<!-- generated comparing v5.14.11..master -->
+
+_Oct 3, 2023_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Introduced color inversion utilities to Joy UI (#38916) @siriwatknp
+- 🚀 Added Chip and related TextField components to Material You @DiegoAndai, @mj12albert
+- 🏗️ Improve the Select's component a11y by adding the combobox role and aria-controls attribute (#38785) @xulingzhihou. If your tests require selecting the trigger element by the "button" role, then you'll have to change it to use the "combobox" role instead
+
+### `@mui/material@5.14.12`
+
+- [DialogActions] Apply margin-left when children is not of `button` type (#39189) @sai6855
+- [Select] Improve a11y by adding combobox role and aria-controls attribute (#38785) @xulingzhihou
+- [Select] Fix MenuProps slotProps forwarding (#39177) @DiegoAndai
+- [TextField] Polish types in Textfield demo (#39140) @sai6855
+- [ButtonGroup] Fix rendering with conditional elements (#38989) @ZeeshanTamboli
+
+### `@mui/system@5.14.12`
+
+- [system] Add support for `variants` in the styled() util (#39073) @mnajdova
+- [Box] Add missing logical spacing property types (#39169) @Semigradsky
+
+### `@mui/base@5.0.0-beta.18`
+
+- [useSlider] Align externalProps handling (#38854) @mj12albert
+- [useTabs] Align external props handling for useTab/useTabPanel/useTabsList (#39037) @mj12albert
+- [test] Fix import paths in useTab tests (#39291) @mj12albert
+
+### `@mui/material-next@6.0.0-alpha.104`
+
+- [Chip] Add Material You Chip component (#38927) @DiegoAndai
+- [Divider] Copy v5 Divider (#39197) @mj12albert
+- [FilledInput] Copy v5 FilledInput (#39040) @mj12albert
+- [FormControl] Add FormControl component (#39032) @mj12albert
+- [Select] Copy Select files from v5 (#39188) @DiegoAndai
+- [TextField] Copy v5 TextField's inner components (#39166) @mj12albert
+
+### `@mui/joy@5.0.0-beta.9`
+
+- Introduce color inversion utilities (#38916) @siriwatknp
+- Replace margin with `gap` property (#39147) @siriwatknp
+- [CssBaseline] use Joy `GlobalStyles` (#39278) @siriwatknp
+- [Drawer] Apply content styles from theme to content slot (#39199) @sai6855
+- [List] Add gap and missing active styles (#39146) @siriwatknp
+- [Switch] Slight adjustments to the design (#39276) @danilo-leal
+
+### Docs
+
+- [docs] Update Autocomplete demo for React 18 (#39162) @oliviertassinari
+- [docs-infra] Tweak feedback footer section design (#36556) @danilo-leal
+- [docs-infra] Improve code syntax highlight (#39181) @oliviertassinari
+- [docs][base] Add Tailwind CSS + plain CSS demo on the TextArea page (#39046) @alisasanib
+- [docs][base-ui] Fix style for root div of multiline input (#39182) @ttlpta
+- [docs][base-ui] Improve Select's country select demo (#38983) @oliviertassinari
+- [docs][joy-ui] Add scrollable tabs example (#39260) @siriwatknp
+- [docs][joy-ui] Match `Autocomplete` github label demo to actual github label dropdown (#39228) @sai6855
+- [docs][joy-ui] Refine the Rental dashboard template (#39059) @zanivan
+- [docs][joy-ui] Removed incomplete sentence in the Aspect Ratio page (#39227) @Erik-McKelvey
+- [docs][joy-ui] Fix typo in the Accordion page (#39226) @Erik-McKelvey
+- [docs][joy-ui] Update and standardize template Sidemenus (#39271) @zanivan
+- [docs][joy-ui] Add a roadmap page (#39163) @danilo-leal
+- [docs][material-ui] Replace `Box` with `Stack` in applicable demos (#39174) @sai6855
+- [docs][material-ui] Add small polish to the Templates page (#39224) @danilo-leal
+- [docs][material-ui] Small revision to the Icons page (#38840) @danilo-leal
+
+### Core
+
+- Add next lint config to eslint (#39183) @Janpot
+- [core] Update eslint rules (#39178) @romgrk
+- [core] Fix Greg GitHub slug @oliviertassinari
+- [core] Priority Support casing normalization @oliviertassinari
+- [website] Add Heat map in pricing page (#39269) @oliviertassinari
+- [website] Update `React Engineer - xCharts` Ashby link (#39172) @DanailH
+- [website] Add Charts to the pricing table (#38680) @alexfauquette
+- [website] Polish career experience @oliviertassinari
+- [website] Simplify the Core products file (#39194) @danilo-leal
+
+All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @DanailH, @danilo-leal, @DiegoAndai, @Erik-McKelvey, @Janpot, @mj12albert, @mnajdova, @oliviertassinari, @romgrk, @sai6855, @Semigradsky, @siriwatknp, @xulingzhihou, @zanivan, @ZeeshanTamboli
+
 ## 5.14.11
 
 <!-- generated comparing v5.14.10..master -->
diff --git a/apps/zero-runtime-next-app/package.json b/apps/zero-runtime-next-app/package.json
index 1be509a23265e5..2856aa0dda08e4 100644
--- a/apps/zero-runtime-next-app/package.json
+++ b/apps/zero-runtime-next-app/package.json
@@ -22,7 +22,7 @@
     "@mui/zero-next-plugin": "file:../../packages/zero-next-plugin/build",
     "@types/node": "20.5.7",
     "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "18.2.11",
     "typescript": "5.1.6"
   },
   "resolutions": {
diff --git a/benchmark/package.json b/benchmark/package.json
index 270d4b9776dec8..b3232997e9ca25 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -15,9 +15,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.11",
-    "@mui/styles": "^5.14.11",
-    "@mui/system": "^5.14.11",
+    "@mui/material": "^5.14.12",
+    "@mui/styles": "^5.14.12",
+    "@mui/system": "^5.14.12",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "docs": "^5.0.0",
diff --git a/docs/data/base/components/input/InputMultiline.js b/docs/data/base/components/input/InputMultiline.js
index ee6e92fad87c95..795b273cb0e71e 100644
--- a/docs/data/base/components/input/InputMultiline.js
+++ b/docs/data/base/components/input/InputMultiline.js
@@ -5,7 +5,11 @@ import { styled } from '@mui/system';
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
   return (
     <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      slots={{
+        root: StyledRootDiv,
+        input: StyledInputElement,
+        textarea: StyledTextareaElement,
+      }}
       {...props}
       ref={ref}
     />
@@ -39,6 +43,11 @@ const grey = {
   900: '#1A2027',
 };
 
+const StyledRootDiv = styled('div')`
+  display: flex;
+  max-width: 100%;
+`;
+
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
diff --git a/docs/data/base/components/input/InputMultiline.tsx b/docs/data/base/components/input/InputMultiline.tsx
index f0f32e173784a9..d5fc2121ee61e7 100644
--- a/docs/data/base/components/input/InputMultiline.tsx
+++ b/docs/data/base/components/input/InputMultiline.tsx
@@ -8,7 +8,11 @@ const CustomInput = React.forwardRef(function CustomInput(
 ) {
   return (
     <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      slots={{
+        root: StyledRootDiv,
+        input: StyledInputElement,
+        textarea: StyledTextareaElement,
+      }}
       {...props}
       ref={ref}
     />
@@ -42,6 +46,11 @@ const grey = {
   900: '#1A2027',
 };
 
+const StyledRootDiv = styled('div')`
+  display: flex;
+  max-width: 100%;
+`;
+
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
diff --git a/docs/data/base/components/input/InputMultilineAutosize.js b/docs/data/base/components/input/InputMultilineAutosize.js
index 68334fb0cc9e09..03a5abe991a7e0 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.js
+++ b/docs/data/base/components/input/InputMultilineAutosize.js
@@ -6,7 +6,11 @@ import { styled } from '@mui/system';
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
   return (
     <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      slots={{
+        root: StyledRootDiv,
+        input: StyledInputElement,
+        textarea: StyledTextareaElement,
+      }}
       {...props}
       ref={ref}
     />
@@ -40,6 +44,11 @@ const grey = {
   900: '#1A2027',
 };
 
+const StyledRootDiv = styled('div')`
+  display: flex;
+  max-width: 100%;
+`;
+
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
diff --git a/docs/data/base/components/input/InputMultilineAutosize.tsx b/docs/data/base/components/input/InputMultilineAutosize.tsx
index 712aa421366615..756d6ad00f4afc 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.tsx
+++ b/docs/data/base/components/input/InputMultilineAutosize.tsx
@@ -9,7 +9,11 @@ const CustomInput = React.forwardRef(function CustomInput(
 ) {
   return (
     <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      slots={{
+        root: StyledRootDiv,
+        input: StyledInputElement,
+        textarea: StyledTextareaElement,
+      }}
       {...props}
       ref={ref}
     />
@@ -43,6 +47,11 @@ const grey = {
   900: '#1A2027',
 };
 
+const StyledRootDiv = styled('div')`
+  display: flex;
+  max-width: 100%;
+`;
+
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
index 3a46d2d98d539b..74be4dada66cff 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
@@ -8,7 +8,16 @@ import { styled } from '@mui/system';
 
 export default function UnstyledSelectCustomRenderValue() {
   return (
-    <CustomSelect renderValue={renderValue} placeholder="Select an option…">
+    <CustomSelect
+      defaultValue={10}
+      renderValue={(option) => {
+        if (option == null || option.value === null) {
+          return 'Select an option…';
+        }
+        return `${option.label} (${option.value})`;
+      }}
+    >
+      <StyledOption value={null}>None</StyledOption>
       <StyledOption value={10}>Ten</StyledOption>
       <StyledOption value={20}>Twenty</StyledOption>
       <StyledOption value={30}>Thirty</StyledOption>
@@ -40,18 +49,6 @@ CustomSelect.propTypes = {
   }),
 };
 
-function renderValue(option) {
-  if (option == null) {
-    return null;
-  }
-
-  return (
-    <span>
-      {option.label} ({option.value})
-    </span>
-  );
-}
-
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
index 7724dc7d197fa4..b3dad17f69e50d 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
@@ -7,7 +7,16 @@ import { styled } from '@mui/system';
 
 export default function UnstyledSelectCustomRenderValue() {
   return (
-    <CustomSelect renderValue={renderValue} placeholder="Select an option…">
+    <CustomSelect
+      defaultValue={10}
+      renderValue={(option: SelectOption<number> | null) => {
+        if (option == null || option.value === null) {
+          return 'Select an option…';
+        }
+        return `${option.label} (${option.value})`;
+      }}
+    >
+      <StyledOption value={null}>None</StyledOption>
       <StyledOption value={10}>Ten</StyledOption>
       <StyledOption value={20}>Twenty</StyledOption>
       <StyledOption value={30}>Thirty</StyledOption>
@@ -26,18 +35,6 @@ function CustomSelect(props: SelectProps<number, false>) {
   return <Select {...props} slots={slots} />;
 }
 
-function renderValue(option: SelectOption<number> | null) {
-  if (option == null) {
-    return null;
-  }
-
-  return (
-    <span>
-      {option.label} ({option.value})
-    </span>
-  );
-}
-
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx.preview b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx.preview
index f76c392d4b0ef8..531fd70a9ca314 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx.preview
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx.preview
@@ -1,4 +1,13 @@
-<CustomSelect renderValue={renderValue} placeholder="Select an option…">
+<CustomSelect
+  defaultValue={10}
+  renderValue={(option: SelectOption<number> | null) => {
+    if (option == null || option.value === null) {
+      return 'Select an option…';
+    }
+    return `${option.label} (${option.value})`;
+  }}
+>
+  <StyledOption value={null}>None</StyledOption>
   <StyledOption value={10}>Ten</StyledOption>
   <StyledOption value={20}>Twenty</StyledOption>
   <StyledOption value={30}>Thirty</StyledOption>
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js
index f173c87b95c265..076f6471f34b50 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.js
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.js
@@ -3,21 +3,22 @@ import PropTypes from 'prop-types';
 import { Select, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
-import { Popper } from '@mui/base';
+import { Popper } from '@mui/base/Popper';
 
 export default function UnstyledSelectRichOptions() {
   return (
     <CustomSelect placeholder="Select country…">
-      {countries.map((c) => (
-        <StyledOption key={c.code} value={c.code} label={c.label}>
+      {countries.map((country) => (
+        <StyledOption key={country.code} value={country.code} label={country.label}>
           <img
             loading="lazy"
-            width="20"
-            srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
-            alt={`Flag of ${c.label}`}
+            width={20}
+            height={14}
+            srcSet={`https://flagcdn.com/w40/${country.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${country.code.toLowerCase()}.png`}
+            alt={`Flag of ${country.label}`}
           />
-          {c.label} ({c.code}) +{c.phone}
+          {country.label} ({country.code}) +{country.phone}
         </StyledOption>
       ))}
     </CustomSelect>
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
index cd73f9736d7309..11447955695494 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -2,21 +2,22 @@ import * as React from 'react';
 import { Select, SelectProps, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
-import { Popper } from '@mui/base';
+import { Popper } from '@mui/base/Popper';
 
 export default function UnstyledSelectRichOptions() {
   return (
     <CustomSelect placeholder="Select country…">
-      {countries.map((c) => (
-        <StyledOption key={c.code} value={c.code} label={c.label}>
+      {countries.map((country) => (
+        <StyledOption key={country.code} value={country.code} label={country.label}>
           <img
             loading="lazy"
-            width="20"
-            srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
-            alt={`Flag of ${c.label}`}
+            width={20}
+            height={14}
+            srcSet={`https://flagcdn.com/w40/${country.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${country.code.toLowerCase()}.png`}
+            alt={`Flag of ${country.label}`}
           />
-          {c.label} ({c.code}) +{c.phone}
+          {country.label} ({country.code}) +{country.phone}
         </StyledOption>
       ))}
     </CustomSelect>
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview
index 19c7b7cfab2da4..c89d7bb4b51df3 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview
@@ -1,14 +1,15 @@
 <CustomSelect placeholder="Select country…">
-  {countries.map((c) => (
-    <StyledOption key={c.code} value={c.code} label={c.label}>
+  {countries.map((country) => (
+    <StyledOption key={country.code} value={country.code} label={country.label}>
       <img
         loading="lazy"
-        width="20"
-        srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
-        src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
-        alt={`Flag of ${c.label}`}
+        width={20}
+        height={14}
+        srcSet={`https://flagcdn.com/w40/${country.code.toLowerCase()}.png 2x`}
+        src={`https://flagcdn.com/w20/${country.code.toLowerCase()}.png`}
+        alt={`Flag of ${country.label}`}
       />
-      {c.label} ({c.code}) +{c.phone}
+      {country.label} ({country.code}) +{country.phone}
     </StyledOption>
   ))}
 </CustomSelect>
\ No newline at end of file
diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md
index bc5bc93cea020d..43ad580b86b710 100644
--- a/docs/data/base/components/select/select.md
+++ b/docs/data/base/components/select/select.md
@@ -219,11 +219,11 @@ For the sake of simplicity, demos and code snippets primarily feature components
 You can customize the appearance of the selected value display by providing a function to the `renderValue` prop.
 The element returned by this function will be rendered inside the Select's button.
 
-{{"demo": "UnstyledSelectCustomRenderValue.js", "defaultCodeOpen": false}}
+{{"demo": "UnstyledSelectCustomRenderValue.js"}}
 
 ### Option appearance
 
 Options don't have to be plain strings.
 You can include custom elements to be rendered inside the listbox.
 
-{{"demo": "UnstyledSelectRichOptions.js", "defaultCodeOpen": false}}
+{{"demo": "UnstyledSelectRichOptions.js"}}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
new file mode 100644
index 00000000000000..026f4eb6015c81
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+export default function UnstyledTextareaIntroduction() {
+  return (
+    <React.Fragment>
+      <TextareaAutosize
+        className="CustomTextareaIntrocudtion"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+      <Styles />
+    </React.Fragment>
+  );
+}
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .CustomTextareaIntrocudtion {
+        width: 320px;
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.5;
+        padding: 12px;
+        border-radius: 12px 12px 0 12px;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
+      }
+
+     .CustomTextareaIntrocudtion:hover {
+        border-color: ${cyan[400]};
+      }
+
+     .CustomTextareaIntrocudtion:focus {
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
+        outline: none;
+      }
+
+      // firefox
+      .CustomTextareaIntrocudtion:focus-visible {
+        outline: 0;
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
new file mode 100644
index 00000000000000..026f4eb6015c81
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+export default function UnstyledTextareaIntroduction() {
+  return (
+    <React.Fragment>
+      <TextareaAutosize
+        className="CustomTextareaIntrocudtion"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+      <Styles />
+    </React.Fragment>
+  );
+}
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .CustomTextareaIntrocudtion {
+        width: 320px;
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.5;
+        padding: 12px;
+        border-radius: 12px 12px 0 12px;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
+      }
+
+     .CustomTextareaIntrocudtion:hover {
+        border-color: ${cyan[400]};
+      }
+
+     .CustomTextareaIntrocudtion:focus {
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
+        outline: none;
+      }
+
+      // firefox
+      .CustomTextareaIntrocudtion:focus-visible {
+        outline: 0;
+      }
+    `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview
new file mode 100644
index 00000000000000..cfe1b2d8d5f6d1
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview
@@ -0,0 +1,8 @@
+<React.Fragment>
+  <TextareaAutosize
+    className="CustomTextareaIntrocudtion"
+    aria-label="empty textarea"
+    placeholder="Empty"
+  />
+  <Styles />
+</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
similarity index 100%
rename from docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.js
rename to docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
similarity index 100%
rename from docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.tsx
rename to docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx.preview
similarity index 100%
rename from docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.tsx.preview
rename to docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx.preview
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
new file mode 100644
index 00000000000000..faa57d8d4e344b
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledTextareaIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
+      <TextareaAutosize
+        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+    </div>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
new file mode 100644
index 00000000000000..faa57d8d4e344b
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledTextareaIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
+      <TextareaAutosize
+        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        aria-label="empty textarea"
+        placeholder="Empty"
+      />
+    </div>
+  );
+}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
new file mode 100644
index 00000000000000..7507ca10f8168e
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
@@ -0,0 +1,5 @@
+<TextareaAutosize
+  className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+  aria-label="empty textarea"
+  placeholder="Empty"
+/>
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
index a4117b450c61bc..cc8f6e7908272d 100644
--- a/docs/data/base/components/textarea-autosize/textarea-autosize.md
+++ b/docs/data/base/components/textarea-autosize/textarea-autosize.md
@@ -19,7 +19,7 @@ Textarea Autosize is a utility component that replaces the native `<textarea>` H
 
 The height of the Textarea Autosize component automatically adjusts as a response to keyboard inputs and window resizing events.
 
-{{"demo": "UnstyledTextareaIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
+{{"demo": "UnstyledTextareaIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
 ## Component
 
diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.js b/docs/data/joy/components/autocomplete/GitHubLabel.js
index 231af0f613e560..0ed612fc2b8a97 100644
--- a/docs/data/joy/components/autocomplete/GitHubLabel.js
+++ b/docs/data/joy/components/autocomplete/GitHubLabel.js
@@ -13,6 +13,7 @@ import Sheet from '@mui/joy/Sheet';
 import SettingsIcon from '@mui/icons-material/Settings';
 import CloseIcon from '@mui/icons-material/Close';
 import DoneIcon from '@mui/icons-material/Done';
+import colors from '@mui/joy/colors';
 
 const Listbox = React.forwardRef((props, ref) => (
   <AutocompleteListbox
@@ -106,18 +107,26 @@ export default function GitHubLabel() {
         <ClickAwayListener onClickAway={handleClose}>
           <Sheet
             variant="outlined"
-            sx={{
+            sx={(theme) => ({
               width: 300,
               boxShadow: 'md',
               borderRadius: '6px',
               overflow: 'hidden',
-            }}
+              '--joy-palette-neutral-plainBg': '#fff',
+              '--joy-palette-background-surface': '#fff',
+              [theme.getColorSchemeSelector('dark')]: {
+                '--joy-palette-neutral-plainBg': '#000',
+                '--joy-palette-background-surface': '#000',
+              },
+            })}
           >
             <Typography
               fontSize="sm"
               fontWeight={600}
               sx={{
                 padding: '8px 10px',
+                borderBottom: '1px solid',
+                borderColor: 'divider',
               }}
             >
               Apply labels to this pull request
@@ -154,14 +163,25 @@ export default function GitHubLabel() {
                 <AutocompleteOption
                   {...props}
                   color="neutral"
-                  sx={{
+                  sx={(theme) => ({
                     alignItems: 'flex-start',
+                    border: 'none',
                     borderBottom: '1px solid',
                     borderColor: 'divider',
+                    '--joy-palette-neutral-plainHoverBg': 'rgba(0, 0, 0, 0.03)',
+                    '--joy-palette-neutral-plainActiveBg': 'rgba(0, 0, 0, 0.03)',
+                    [theme.getColorSchemeSelector('dark')]: {
+                      '--joy-palette-neutral-plainHoverBg': colors.grey[800],
+                      '--joy-palette-neutral-plainActiveBg': colors.grey[800],
+                    },
                     '&[aria-selected="true"]': {
                       fontWeight: 'normal',
                     },
-                  }}
+                    '&:first-of-type': {
+                      borderTop: '1px solid',
+                      borderColor: 'divider',
+                    },
+                  })}
                 >
                   <DoneIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
                   <Box
@@ -194,11 +214,12 @@ export default function GitHubLabel() {
               })}
               getOptionLabel={(option) => option.name}
               sx={{
-                p: '10px',
+                p: '4px 2px',
                 borderTop: '1px solid',
                 borderBottom: '1px solid',
                 borderColor: 'divider',
                 '--Input-radius': '4px',
+                m: '0.75rem 0.5rem',
               }}
             />
           </Sheet>
diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.tsx b/docs/data/joy/components/autocomplete/GitHubLabel.tsx
index 94e9591c81d235..e304604c8ed55f 100644
--- a/docs/data/joy/components/autocomplete/GitHubLabel.tsx
+++ b/docs/data/joy/components/autocomplete/GitHubLabel.tsx
@@ -13,6 +13,7 @@ import Sheet from '@mui/joy/Sheet';
 import SettingsIcon from '@mui/icons-material/Settings';
 import CloseIcon from '@mui/icons-material/Close';
 import DoneIcon from '@mui/icons-material/Done';
+import colors from '@mui/joy/colors';
 
 const Listbox = React.forwardRef<HTMLUListElement, any>((props, ref) => (
   <AutocompleteListbox
@@ -106,18 +107,26 @@ export default function GitHubLabel() {
         <ClickAwayListener onClickAway={handleClose}>
           <Sheet
             variant="outlined"
-            sx={{
+            sx={(theme) => ({
               width: 300,
               boxShadow: 'md',
               borderRadius: '6px',
               overflow: 'hidden',
-            }}
+              '--joy-palette-neutral-plainBg': '#fff',
+              '--joy-palette-background-surface': '#fff',
+              [theme.getColorSchemeSelector('dark')]: {
+                '--joy-palette-neutral-plainBg': '#000',
+                '--joy-palette-background-surface': '#000',
+              },
+            })}
           >
             <Typography
               fontSize="sm"
               fontWeight={600}
               sx={{
                 padding: '8px 10px',
+                borderBottom: '1px solid',
+                borderColor: 'divider',
               }}
             >
               Apply labels to this pull request
@@ -154,14 +163,25 @@ export default function GitHubLabel() {
                 <AutocompleteOption
                   {...props}
                   color="neutral"
-                  sx={{
+                  sx={(theme) => ({
                     alignItems: 'flex-start',
+                    border: 'none',
                     borderBottom: '1px solid',
                     borderColor: 'divider',
+                    '--joy-palette-neutral-plainHoverBg': 'rgba(0, 0, 0, 0.03)',
+                    '--joy-palette-neutral-plainActiveBg': 'rgba(0, 0, 0, 0.03)',
+                    [theme.getColorSchemeSelector('dark')]: {
+                      '--joy-palette-neutral-plainHoverBg': colors.grey[800],
+                      '--joy-palette-neutral-plainActiveBg': colors.grey[800],
+                    },
                     '&[aria-selected="true"]': {
                       fontWeight: 'normal',
                     },
-                  }}
+                    '&:first-of-type': {
+                      borderTop: '1px solid',
+                      borderColor: 'divider',
+                    },
+                  })}
                 >
                   <DoneIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
                   <Box
@@ -194,11 +214,12 @@ export default function GitHubLabel() {
               })}
               getOptionLabel={(option) => option.name}
               sx={{
-                p: '10px',
+                p: '4px 2px',
                 borderTop: '1px solid',
                 borderBottom: '1px solid',
                 borderColor: 'divider',
                 '--Input-radius': '4px',
+                m: '0.75rem 0.5rem',
               }}
             />
           </Sheet>
diff --git a/docs/data/joy/components/input/InputValidation.js b/docs/data/joy/components/input/InputValidation.js
index 1ec7d7f4047161..d9f49b478f9ae5 100644
--- a/docs/data/joy/components/input/InputValidation.js
+++ b/docs/data/joy/components/input/InputValidation.js
@@ -12,11 +12,7 @@ export default function InputValidation() {
       <Input placeholder="Type in here…" error defaultValue="Oh no, error found!" />
       <FormControl error>
         <FormLabel>Label</FormLabel>
-        <Input
-          placeholder="Type in here…"
-          error
-          defaultValue="Oh no, error found!"
-        />
+        <Input placeholder="Type in here…" defaultValue="Oh no, error found!" />
         <FormHelperText>
           <InfoOutlined />
           Opps! something is wrong.
diff --git a/docs/data/joy/components/input/InputValidation.tsx b/docs/data/joy/components/input/InputValidation.tsx
index 1ec7d7f4047161..d9f49b478f9ae5 100644
--- a/docs/data/joy/components/input/InputValidation.tsx
+++ b/docs/data/joy/components/input/InputValidation.tsx
@@ -12,11 +12,7 @@ export default function InputValidation() {
       <Input placeholder="Type in here…" error defaultValue="Oh no, error found!" />
       <FormControl error>
         <FormLabel>Label</FormLabel>
-        <Input
-          placeholder="Type in here…"
-          error
-          defaultValue="Oh no, error found!"
-        />
+        <Input placeholder="Type in here…" defaultValue="Oh no, error found!" />
         <FormHelperText>
           <InfoOutlined />
           Opps! something is wrong.
diff --git a/docs/data/joy/components/input/InputValidation.tsx.preview b/docs/data/joy/components/input/InputValidation.tsx.preview
index e97fcad5d4c178..69f14112e61517 100644
--- a/docs/data/joy/components/input/InputValidation.tsx.preview
+++ b/docs/data/joy/components/input/InputValidation.tsx.preview
@@ -1,11 +1,7 @@
 <Input placeholder="Type in here…" error defaultValue="Oh no, error found!" />
 <FormControl error>
   <FormLabel>Label</FormLabel>
-  <Input
-    placeholder="Type in here…"
-    error
-    defaultValue="Oh no, error found!"
-  />
+  <Input placeholder="Type in here…" defaultValue="Oh no, error found!" />
   <FormHelperText>
     <InfoOutlined />
     Opps! something is wrong.
diff --git a/docs/data/joy/components/switch/ExampleMaterialSwitch.js b/docs/data/joy/components/switch/ExampleMaterialSwitch.js
deleted file mode 100644
index aa1773f03e7db6..00000000000000
--- a/docs/data/joy/components/switch/ExampleMaterialSwitch.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import Switch, { switchClasses } from '@mui/joy/Switch';
-
-export default function ExampleMaterialSwitch() {
-  const [checked, setChecked] = React.useState(false);
-  return (
-    <Switch
-      variant={checked ? 'soft' : 'solid'}
-      checked={checked}
-      onChange={(event) => setChecked(event.target.checked)}
-      sx={(theme) => ({
-        display: 'inherit',
-        '--Switch-thumbShadow':
-          'rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px',
-        '--Switch-thumbSize': '20px',
-        '--Switch-trackWidth': '34px',
-        '--Switch-trackHeight': '14px',
-        '--Switch-trackBackground': 'rgb(0, 0, 0, 0.38)',
-        '&:hover': {
-          '--Switch-trackBackground': 'rgb(0, 0, 0, 0.38)',
-        },
-        [`&.${switchClasses.checked}`]: {
-          '--Switch-thumbBackground': 'rgb(25, 118, 210)',
-          '--Switch-trackBackground': 'rgba(25, 118, 210, 0.5)',
-          '&:hover': {
-            '--Switch-trackBackground': 'rgba(25, 118, 210, 0.5)',
-          },
-        },
-        [`&.${switchClasses.disabled}`]: {
-          '--Switch-trackBackground': 'rgb(0, 0, 0, 0.12)',
-          '--Switch-thumbColor': 'rgb(245, 245, 245)',
-        },
-        [`&.${switchClasses.checked}.${switchClasses.disabled}`]: {
-          '--Switch-trackBackground': 'rgba(25, 118, 210, 0.12)',
-          '--Switch-thumbColor': 'rgb(167, 202, 237)',
-        },
-        [theme.getColorSchemeSelector('dark')]: {
-          '--Switch-thumbBackground': '#fff',
-          '--Switch-trackBackground': 'rgba(255, 255, 255, 0.3)',
-          [`&.${switchClasses.checked}`]: {
-            '--Switch-thumbBackground': 'rgb(144, 202, 249)',
-            '--Switch-trackBackground': 'rgba(144, 202, 249, 0.5)',
-          },
-        },
-      })}
-    />
-  );
-}
diff --git a/docs/data/joy/components/switch/ExampleMaterialSwitch.tsx b/docs/data/joy/components/switch/ExampleMaterialSwitch.tsx
deleted file mode 100644
index 3feb62e218f0ad..00000000000000
--- a/docs/data/joy/components/switch/ExampleMaterialSwitch.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import Switch, { switchClasses } from '@mui/joy/Switch';
-import { Theme } from '@mui/joy';
-
-export default function ExampleMaterialSwitch() {
-  const [checked, setChecked] = React.useState<boolean>(false);
-  return (
-    <Switch
-      variant={checked ? 'soft' : 'solid'}
-      checked={checked}
-      onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-        setChecked(event.target.checked)
-      }
-      sx={(theme: Theme) => ({
-        display: 'inherit',
-        '--Switch-thumbShadow':
-          'rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px',
-        '--Switch-thumbSize': '20px',
-        '--Switch-trackWidth': '34px',
-        '--Switch-trackHeight': '14px',
-        '--Switch-trackBackground': 'rgb(0, 0, 0, 0.38)',
-        '&:hover': {
-          '--Switch-trackBackground': 'rgb(0, 0, 0, 0.38)',
-        },
-        [`&.${switchClasses.checked}`]: {
-          '--Switch-thumbBackground': 'rgb(25, 118, 210)',
-          '--Switch-trackBackground': 'rgba(25, 118, 210, 0.5)',
-          '&:hover': {
-            '--Switch-trackBackground': 'rgba(25, 118, 210, 0.5)',
-          },
-        },
-        [`&.${switchClasses.disabled}`]: {
-          '--Switch-trackBackground': 'rgb(0, 0, 0, 0.12)',
-          '--Switch-thumbColor': 'rgb(245, 245, 245)',
-        },
-        [`&.${switchClasses.checked}.${switchClasses.disabled}`]: {
-          '--Switch-trackBackground': 'rgba(25, 118, 210, 0.12)',
-          '--Switch-thumbColor': 'rgb(167, 202, 237)',
-        },
-        [theme.getColorSchemeSelector('dark')]: {
-          '--Switch-thumbBackground': '#fff',
-          '--Switch-trackBackground': 'rgba(255, 255, 255, 0.3)',
-          [`&.${switchClasses.checked}`]: {
-            '--Switch-thumbBackground': 'rgb(144, 202, 249)',
-            '--Switch-trackBackground': 'rgba(144, 202, 249, 0.5)',
-          },
-        },
-      })}
-    />
-  );
-}
diff --git a/docs/data/joy/components/switch/ExampleThumbChild.js b/docs/data/joy/components/switch/ExampleThumbChild.js
index 401e8e02048fef..37a88bd60e0e74 100644
--- a/docs/data/joy/components/switch/ExampleThumbChild.js
+++ b/docs/data/joy/components/switch/ExampleThumbChild.js
@@ -5,6 +5,7 @@ import DarkMode from '@mui/icons-material/DarkMode';
 export default function ExampleThumbChild() {
   return (
     <Switch
+      size="lg"
       slotProps={{
         input: { 'aria-label': 'Dark mode' },
         thumb: {
@@ -12,7 +13,7 @@ export default function ExampleThumbChild() {
         },
       }}
       sx={{
-        '--Switch-thumbSize': '28px',
+        '--Switch-thumbSize': '16px',
       }}
     />
   );
diff --git a/docs/data/joy/components/switch/ExampleThumbChild.tsx b/docs/data/joy/components/switch/ExampleThumbChild.tsx
index 401e8e02048fef..37a88bd60e0e74 100644
--- a/docs/data/joy/components/switch/ExampleThumbChild.tsx
+++ b/docs/data/joy/components/switch/ExampleThumbChild.tsx
@@ -5,6 +5,7 @@ import DarkMode from '@mui/icons-material/DarkMode';
 export default function ExampleThumbChild() {
   return (
     <Switch
+      size="lg"
       slotProps={{
         input: { 'aria-label': 'Dark mode' },
         thumb: {
@@ -12,7 +13,7 @@ export default function ExampleThumbChild() {
         },
       }}
       sx={{
-        '--Switch-thumbSize': '28px',
+        '--Switch-thumbSize': '16px',
       }}
     />
   );
diff --git a/docs/data/joy/components/switch/ExampleThumbChild.tsx.preview b/docs/data/joy/components/switch/ExampleThumbChild.tsx.preview
index 2c1754d3ac3fa2..583800c0d187df 100644
--- a/docs/data/joy/components/switch/ExampleThumbChild.tsx.preview
+++ b/docs/data/joy/components/switch/ExampleThumbChild.tsx.preview
@@ -1,4 +1,5 @@
 <Switch
+  size="lg"
   slotProps={{
     input: { 'aria-label': 'Dark mode' },
     thumb: {
@@ -6,6 +7,6 @@
     },
   }}
   sx={{
-    '--Switch-thumbSize': '28px',
+    '--Switch-thumbSize': '16px',
   }}
 />
\ No newline at end of file
diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
index 2f4f058c6e7d40..eb59edab5ec6c6 100644
--- a/docs/data/joy/components/switch/switch.md
+++ b/docs/data/joy/components/switch/switch.md
@@ -92,15 +92,9 @@ You can use those to customize the component on both the `sx` prop and the theme
 
 ## Common examples
 
-### Material Design
-
-You can also find the Material Design switch design, out of the box, in [Material UI's documentation](/material-ui/react-switch/).
-
-{{"demo": "ExampleMaterialSwitch.js"}}
-
 ### Fluent UI
 
-Here's how you'd customize Joy UI's switch to make it look like [Microsoft's Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle):
+Here's how you'd customize Joy UI's Switch to make it look like [Microsoft's Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle):
 
 - Unchecked state: `outlined` variant and `neutral` color.
 - Checked state: `solid` variant and `primary` color.
diff --git a/docs/data/joy/components/tabs/TabsBottomNavExample.js b/docs/data/joy/components/tabs/TabsBottomNavExample.js
index 2267777076214a..dfba30950d38ca 100644
--- a/docs/data/joy/components/tabs/TabsBottomNavExample.js
+++ b/docs/data/joy/components/tabs/TabsBottomNavExample.js
@@ -4,7 +4,7 @@ import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Tabs from '@mui/joy/Tabs';
 import TabList from '@mui/joy/TabList';
 import Tab, { tabClasses } from '@mui/joy/Tab';
-import HomeOutlined from '@mui/icons-material/HomeOutlined';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 import Search from '@mui/icons-material/Search';
 import Person from '@mui/icons-material/Person';
@@ -17,8 +17,7 @@ export default function TabsBottomNavExample() {
       sx={{
         flexGrow: 1,
         m: -3,
-        p: 3,
-        py: 5,
+        p: 4,
         borderTopLeftRadius: '12px',
         borderTopRightRadius: '12px',
         bgcolor: `${colors[index]}.500`,
@@ -31,30 +30,36 @@ export default function TabsBottomNavExample() {
         onChange={(event, value) => setIndex(value)}
         sx={(theme) => ({
           p: 1,
-          borderRadius: '24px',
+          borderRadius: 16,
           maxWidth: 400,
           mx: 'auto',
           boxShadow: theme.shadow.sm,
           '--joy-shadowChannel': theme.vars.palette[colors[index]].darkChannel,
           [`& .${tabClasses.root}`]: {
-            whiteSpace: 'nowrap',
+            py: 1,
+            flex: 1,
             transition: '0.3s',
             fontWeight: 'md',
-            flex: 1,
+            fontSize: 'md',
             [`&:not(.${tabClasses.selected}):not(:hover)`]: {
-              opacity: 0.72,
+              opacity: 0.7,
             },
           },
         })}
       >
-        <TabList variant="plain" disableUnderline sx={{ borderRadius: 'xl', p: 0 }}>
+        <TabList
+          variant="plain"
+          size="sm"
+          disableUnderline
+          sx={{ borderRadius: 'lg', p: 0 }}
+        >
           <Tab
             disableIndicator
             orientation="vertical"
             {...(index === 0 && { color: colors[0] })}
           >
             <ListItemDecorator>
-              <HomeOutlined />
+              <HomeRoundedIcon />
             </ListItemDecorator>
             Home
           </Tab>
diff --git a/docs/data/joy/components/tabs/TabsBottomNavExample.tsx b/docs/data/joy/components/tabs/TabsBottomNavExample.tsx
index 6ade044bb8a479..aa59d760955eba 100644
--- a/docs/data/joy/components/tabs/TabsBottomNavExample.tsx
+++ b/docs/data/joy/components/tabs/TabsBottomNavExample.tsx
@@ -4,7 +4,7 @@ import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Tabs from '@mui/joy/Tabs';
 import TabList from '@mui/joy/TabList';
 import Tab, { tabClasses } from '@mui/joy/Tab';
-import HomeOutlined from '@mui/icons-material/HomeOutlined';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 import Search from '@mui/icons-material/Search';
 import Person from '@mui/icons-material/Person';
@@ -17,8 +17,7 @@ export default function TabsBottomNavExample() {
       sx={{
         flexGrow: 1,
         m: -3,
-        p: 3,
-        py: 5,
+        p: 4,
         borderTopLeftRadius: '12px',
         borderTopRightRadius: '12px',
         bgcolor: `${colors[index]}.500`,
@@ -31,30 +30,36 @@ export default function TabsBottomNavExample() {
         onChange={(event, value) => setIndex(value as number)}
         sx={(theme) => ({
           p: 1,
-          borderRadius: '24px',
+          borderRadius: 16,
           maxWidth: 400,
           mx: 'auto',
           boxShadow: theme.shadow.sm,
           '--joy-shadowChannel': theme.vars.palette[colors[index]].darkChannel,
           [`& .${tabClasses.root}`]: {
-            whiteSpace: 'nowrap',
+            py: 1,
+            flex: 1,
             transition: '0.3s',
             fontWeight: 'md',
-            flex: 1,
+            fontSize: 'md',
             [`&:not(.${tabClasses.selected}):not(:hover)`]: {
-              opacity: 0.72,
+              opacity: 0.7,
             },
           },
         })}
       >
-        <TabList variant="plain" disableUnderline sx={{ borderRadius: 'xl', p: 0 }}>
+        <TabList
+          variant="plain"
+          size="sm"
+          disableUnderline
+          sx={{ borderRadius: 'lg', p: 0 }}
+        >
           <Tab
             disableIndicator
             orientation="vertical"
             {...(index === 0 && { color: colors[0] })}
           >
             <ListItemDecorator>
-              <HomeOutlined />
+              <HomeRoundedIcon />
             </ListItemDecorator>
             Home
           </Tab>
diff --git a/docs/data/joy/components/tabs/TabsPageExample.js b/docs/data/joy/components/tabs/TabsPageExample.js
index 9b7ce8f211878c..bd5867ea4b1de5 100644
--- a/docs/data/joy/components/tabs/TabsPageExample.js
+++ b/docs/data/joy/components/tabs/TabsPageExample.js
@@ -5,9 +5,6 @@ import Tabs from '@mui/joy/Tabs';
 import TabList from '@mui/joy/TabList';
 import Tab, { tabClasses } from '@mui/joy/Tab';
 import TabPanel from '@mui/joy/TabPanel';
-import Typography from '@mui/joy/Typography';
-import Input from '@mui/joy/Input';
-import SearchRounded from '@mui/icons-material/SearchRounded';
 
 export default function TabsPageExample() {
   const [index, setIndex] = React.useState(0);
@@ -15,9 +12,8 @@ export default function TabsPageExample() {
     <Box
       sx={{
         flexGrow: 1,
-        m: -3,
+        m: -2,
         overflowX: 'hidden',
-        borderRadius: 'md',
       }}
     >
       <Tabs
@@ -27,7 +23,7 @@ export default function TabsPageExample() {
       >
         <TabList
           sx={{
-            pt: 2,
+            pt: 1,
             justifyContent: 'center',
             [`&& .${tabClasses.root}`]: {
               flex: 'initial',
@@ -38,9 +34,9 @@ export default function TabsPageExample() {
               [`&.${tabClasses.selected}`]: {
                 color: 'primary.plainColor',
                 '&::after': {
-                  height: '3px',
-                  borderTopLeftRadius: '3px',
-                  borderTopRightRadius: '3px',
+                  height: 2,
+                  borderTopLeftRadius: 3,
+                  borderTopRightRadius: 3,
                   bgcolor: 'primary.500',
                 },
               },
@@ -64,10 +60,19 @@ export default function TabsPageExample() {
               variant="soft"
               color={index === 1 ? 'primary' : 'neutral'}
             >
-              24
+              20
+            </Chip>
+          </Tab>
+          <Tab indicatorInset>
+            Products{' '}
+            <Chip
+              size="sm"
+              variant="soft"
+              color={index === 2 ? 'primary' : 'neutral'}
+            >
+              8
             </Chip>
           </Tab>
-          <Tab indicatorInset>Search library</Tab>
         </TabList>
         <Box
           sx={(theme) => ({
@@ -77,33 +82,9 @@ export default function TabsPageExample() {
             clipPath: 'inset(0 -100vmax)',
           })}
         >
-          <TabPanel value={0}>
-            <Typography
-              level="h2"
-              component="div"
-              fontSize="lg"
-              textColor="text.primary"
-            >
-              Deals panel
-            </Typography>
-          </TabPanel>
-          <TabPanel value={1}>
-            <Typography
-              level="h2"
-              component="div"
-              fontSize="lg"
-              textColor="text.primary"
-            >
-              Library panel
-            </Typography>
-          </TabPanel>
-          <TabPanel value={2}>
-            <Input
-              autoFocus
-              placeholder="Type in third panel..."
-              startDecorator={<SearchRounded />}
-            />
-          </TabPanel>
+          <TabPanel value={0}>Deals</TabPanel>
+          <TabPanel value={1}>Library</TabPanel>
+          <TabPanel value={2}>Products</TabPanel>
         </Box>
       </Tabs>
     </Box>
diff --git a/docs/data/joy/components/tabs/TabsPageExample.tsx b/docs/data/joy/components/tabs/TabsPageExample.tsx
index 1be4afa2777d97..c6b9012c86e25d 100644
--- a/docs/data/joy/components/tabs/TabsPageExample.tsx
+++ b/docs/data/joy/components/tabs/TabsPageExample.tsx
@@ -5,9 +5,6 @@ import Tabs from '@mui/joy/Tabs';
 import TabList from '@mui/joy/TabList';
 import Tab, { tabClasses } from '@mui/joy/Tab';
 import TabPanel from '@mui/joy/TabPanel';
-import Typography from '@mui/joy/Typography';
-import Input from '@mui/joy/Input';
-import SearchRounded from '@mui/icons-material/SearchRounded';
 
 export default function TabsPageExample() {
   const [index, setIndex] = React.useState(0);
@@ -15,9 +12,8 @@ export default function TabsPageExample() {
     <Box
       sx={{
         flexGrow: 1,
-        m: -3,
+        m: -2,
         overflowX: 'hidden',
-        borderRadius: 'md',
       }}
     >
       <Tabs
@@ -27,7 +23,7 @@ export default function TabsPageExample() {
       >
         <TabList
           sx={{
-            pt: 2,
+            pt: 1,
             justifyContent: 'center',
             [`&& .${tabClasses.root}`]: {
               flex: 'initial',
@@ -38,9 +34,9 @@ export default function TabsPageExample() {
               [`&.${tabClasses.selected}`]: {
                 color: 'primary.plainColor',
                 '&::after': {
-                  height: '3px',
-                  borderTopLeftRadius: '3px',
-                  borderTopRightRadius: '3px',
+                  height: 2,
+                  borderTopLeftRadius: 3,
+                  borderTopRightRadius: 3,
                   bgcolor: 'primary.500',
                 },
               },
@@ -64,10 +60,19 @@ export default function TabsPageExample() {
               variant="soft"
               color={index === 1 ? 'primary' : 'neutral'}
             >
-              24
+              20
+            </Chip>
+          </Tab>
+          <Tab indicatorInset>
+            Products{' '}
+            <Chip
+              size="sm"
+              variant="soft"
+              color={index === 2 ? 'primary' : 'neutral'}
+            >
+              8
             </Chip>
           </Tab>
-          <Tab indicatorInset>Search library</Tab>
         </TabList>
         <Box
           sx={(theme) => ({
@@ -77,33 +82,9 @@ export default function TabsPageExample() {
             clipPath: 'inset(0 -100vmax)',
           })}
         >
-          <TabPanel value={0}>
-            <Typography
-              level="h2"
-              component="div"
-              fontSize="lg"
-              textColor="text.primary"
-            >
-              Deals panel
-            </Typography>
-          </TabPanel>
-          <TabPanel value={1}>
-            <Typography
-              level="h2"
-              component="div"
-              fontSize="lg"
-              textColor="text.primary"
-            >
-              Library panel
-            </Typography>
-          </TabPanel>
-          <TabPanel value={2}>
-            <Input
-              autoFocus
-              placeholder="Type in third panel..."
-              startDecorator={<SearchRounded />}
-            />
-          </TabPanel>
+          <TabPanel value={0}>Deals</TabPanel>
+          <TabPanel value={1}>Library</TabPanel>
+          <TabPanel value={2}>Products</TabPanel>
         </Box>
       </Tabs>
     </Box>
diff --git a/docs/data/joy/components/tabs/TabsScrollable.js b/docs/data/joy/components/tabs/TabsScrollable.js
new file mode 100644
index 00000000000000..dcbde11e12df18
--- /dev/null
+++ b/docs/data/joy/components/tabs/TabsScrollable.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Tabs from '@mui/joy/Tabs';
+import TabList from '@mui/joy/TabList';
+import Tab from '@mui/joy/Tab';
+
+export default function TabsScrollable() {
+  return (
+    <Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
+      <TabList
+        sx={{
+          overflow: 'auto',
+          scrollSnapType: 'x mandatory',
+          '&::-webkit-scrollbar': { display: 'none' },
+        }}
+      >
+        {[...Array(20)].map((_, index) => (
+          <Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
+            Tab #{index + 1}
+          </Tab>
+        ))}
+      </TabList>
+    </Tabs>
+  );
+}
diff --git a/docs/data/joy/components/tabs/TabsScrollable.tsx b/docs/data/joy/components/tabs/TabsScrollable.tsx
new file mode 100644
index 00000000000000..dcbde11e12df18
--- /dev/null
+++ b/docs/data/joy/components/tabs/TabsScrollable.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Tabs from '@mui/joy/Tabs';
+import TabList from '@mui/joy/TabList';
+import Tab from '@mui/joy/Tab';
+
+export default function TabsScrollable() {
+  return (
+    <Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
+      <TabList
+        sx={{
+          overflow: 'auto',
+          scrollSnapType: 'x mandatory',
+          '&::-webkit-scrollbar': { display: 'none' },
+        }}
+      >
+        {[...Array(20)].map((_, index) => (
+          <Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
+            Tab #{index + 1}
+          </Tab>
+        ))}
+      </TabList>
+    </Tabs>
+  );
+}
diff --git a/docs/data/joy/components/tabs/TabsScrollable.tsx.preview b/docs/data/joy/components/tabs/TabsScrollable.tsx.preview
new file mode 100644
index 00000000000000..0c9dd0e2f1335f
--- /dev/null
+++ b/docs/data/joy/components/tabs/TabsScrollable.tsx.preview
@@ -0,0 +1,15 @@
+<Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
+  <TabList
+    sx={{
+      overflow: 'auto',
+      scrollSnapType: 'x mandatory',
+      '&::-webkit-scrollbar': { display: 'none' },
+    }}
+  >
+    {[...Array(20)].map((_, index) => (
+      <Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
+        Tab #{index + 1}
+      </Tab>
+    ))}
+  </TabList>
+</Tabs>
\ No newline at end of file
diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md
index 7a2f73cc8d003c..ff54a004b041c0 100644
--- a/docs/data/joy/components/tabs/tabs.md
+++ b/docs/data/joy/components/tabs/tabs.md
@@ -24,130 +24,98 @@ Joy UI provides four tabs-related components:
 
 {{"demo": "TabsUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
-## Component
-
-After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
+## Basics
 
 ```jsx
 import Tabs from '@mui/joy/Tabs';
 import TabList from '@mui/joy/TabList';
 import Tab from '@mui/joy/Tab';
-
-export default function MyApp() {
-  return (
-    <Tabs defaultValue={1}>
-      <TabList>
-        <Tab value={1}>Tab A</Tab>
-        <Tab value={2}>Tab B</Tab>
-        <Tab value={3}>Tab C</Tab>
-      </TabList>
-    </Tabs>
-  );
-}
 ```
 
-### Basic usage
+The Joy UI set of Tabs components follows the [WAI ARIA design pattern guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
 
-The tabs structure follows [WAI ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
-To target the initially selected tab, specify the `value` prop to the `TabPanel` and use `Tabs`'s `defaultValue`.
+Use the `value` prop on the Tab Panel and the `defaultValue` prop on the Tabs component to target the selected tab.
 
 {{"demo": "TabsBasic.js"}}
 
+### Disabled tab
+
+Use the `disabled` prop to disable interaction and focus.
+
+{{"demo": "TabDisabled.js"}}
+
+## Customization
+
 ### Variants
 
-Both `TabList` and `Tab` accept [global variant](/joy-ui/main-features/global-variants/) values, so you can mix and match to get the desired result.
+The `<TabList />` and `<Tab />` components accept the global `variant` prop values.
 
 :::info
-A selected `Tab` does not apply `:hover` and `:active` global variant styles.
+When a Tab is selected, it _won't_ apply globally defined `:hover` and `:active` styles.
 :::
 
 {{"demo": "TabsVariants.js"}}
 
-:::info
+:::warning
 To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
 :::
 
-### Disabled tab
-
-To disable a tab, use the `disabled` prop on the `Tab` component.
-
-{{"demo": "TabDisabled.js"}}
-
 ### Vertical
 
-To set the tabs orientation to vertical, use the `orientation="vertical"` on the `Tabs` component.
-Keyboard navigation (e.g. arrow keys) will adapt automatically to the used orientation.
+Use the `orientation="vertical"` prop on the `<Tabs />` component to make it vertical.
+Keyboard navigation using arrow keys adapts automatically.
 
 {{"demo": "TabsVertical.js"}}
 
-### Placement
+### Indicator placement
 
-To change the placement, you should provide the value of `top`, `bottom`, `left` or `right`.
-
-This prop can be applied on the TabList component to change the `underlinePlacement` as in the example:
+Use the `underlinePlacement` prop on the Tab List component to change the placement of the underline border on the Tabs.
 
 {{"demo": "TabsUnderlinePlacement.js"}}
 
-Or, it can be applied on the Tab component to change the `indicatorPlacement`:
+Control the selected Tab indicator independently using the `indicatorPlacement` prop.
 
 {{"demo": "TabsIndicatorPlacement.js"}}
 
-The flex direction of the Tabs component will need to be changed based on each placement.
+Depending on the placement of the underline and the selected indicator, you may need to change the flex direction of the Tabs component.
 
 {{"demo": "TabsFlexPlacement.js"}}
 
 ### Sticky
 
-For long content, you can use the `sticky="top"` prop on the TabList component to keep the tabs visible while scrolling.
-
-To stick the TabList at the bottom, use `sticky="bottom"` and render the TabList at the end of the Tabs component.
+Use the `sticky` prop to anchor the Tab List component at the top or bottom.
+This is ideal for use cases that involve longer content.
 
 {{"demo": "TabsSticky.js"}}
 
 ### Tab flex
 
-Use the `tabFlex` prop on the TabList component to make the Tab elements fill the available space as shown in the example below.
-
-The first demo, `tabFlex={1}`, the Tab elements will fill the available space equally.
+Use the `tabFlex` prop on the Tab List component to make the Tab elements fill the available space, as shown in the example below.
 
-The second demo, `tabFlex="auto`, the Tab elements will fill the available space equally, but the width of each Tab element will be based on the content.
+- In the first demo, the Tab elements fill the available space using `tabFlex={1}`.
+- In the second demo, the Tab elements fill the available space equally using `tabFlex="auto"`, but the width of each respective element is based on its content.
 
 {{"demo": "TabsFlex.js"}}
 
-:::success
-The value of the `tabFlex` can be any valid [CSS flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) value.
+:::info
+The value of the `tabFlex` prop can be any [valid CSS flex value](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
 :::
 
 ### Icon
 
-Since `TabList` uses the same style as the [`List`](/joy-ui/react-list/) component, you can use the icon directly as a child or use `ListItemDecorator` with a text.
+Since the Tab List component uses the same style as the [List](/joy-ui/react-list/) component, you can use the icon directly as a child, or use List Item Decorator with text.
 
 {{"demo": "TabsIcon.js"}}
 
 {{"demo": "TabsIconWithText.js"}}
 
-### Accessibility
-
-For ensuring proper accessibility, it's recommended by [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-aria-roles-states-and-properties-22) to associate a label to the Tabs component.
-To do that, there are two options:
-
-#### Option one
-
-Render a text element with an `id` and provide `aria-labelledby="$is"`to the Tabs component.
-
-```js
-<Typography id="tabs-accessibility-label">Meaningful label</Typography>
-<Tabs aria-labelledby="tabs-accessibility-label">...</Tabs>
-```
+### Scrollable tabs
 
-#### Option two
+Add the `overflow: auto` property to the Tab List component to make the tabs scrollable.
 
-When not displaying a text element on the screen, use `aria-label` directly on the Tabs component.
-Screen readers will then properly announce the label.
+Polish it further by hiding the scrollbar with `'&::-webkit-scrollbar': { display: 'none' }`, and snapping the scroll to the edge of the Tab List component with [CSS scroll snap properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap).
 
-```js
-<Tabs aria-label="Meaningful label">...</Tabs>
-```
+{{"demo": "TabsScrollable.js"}}
 
 ## CSS variables playground
 
@@ -161,30 +129,56 @@ You can use those to customize the component on both the `sx` prop and the theme
 
 ### Segmented controls
 
-To mimic the iOS segmented controls, add the border-radius to the `sx` prop of the TabList and set the selected Tab's background to `background.surface`.
+To mimic the segmented controls of iOS, add a border-radius to the Tab List component and set the selected Tab background to `background.surface`.
 
 {{"demo": "TabsSegmentedControls.js"}}
 
 ### Browser tabs
 
-In this example, the Tab's variant is set to `outlined` and the indicator is moved to the top via `indicatorPlacement="top"`. The borders of the Tab are set to `transparent` based on the selected state.
+In this example, the Tab's variant prop is set to `outlined` and the indicator is moved to the top via `indicatorPlacement="top"`.
+The borders are then set to `transparent` based on the selected state.
 
 {{"demo": "TabsBrowserExample.js"}}
 
 ### Pricing tabs
 
-This example removes the background of the selected Tab by targeting `[aria-selected="true"]` on the `sx` prop.
+This example removes the background of the selected Tab by targeting the `aria-selected="true"` attribute.
 
 {{"demo": "TabsPricingExample.js"}}
 
-### With counter chips
+### Centered tabs
 
-To render tab items at the center of the TabList, use `justifyContent: 'center'` on the `sx` prop of the TabList and set `flex: initial` to each of the Tab to override the default `flex-grow`.
+To center the Tab components in the Tab List, add the `flex: initial` property to override the default `flex-grow` behavior.
+Then, on the list, add `justifyContent: center`.
 
 {{"demo": "TabsPageExample.js"}}
 
 ### Mobile bottom navigation
 
-In this example, each Tab's is applied with one of the theme's color palette when it is selected.
+In this example, each Tab is painted with a color from the theme when selected.
 
 {{"demo": "TabsBottomNavExample.js"}}
+
+## Accessibility
+
+To ensure proper accessibility, the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-aria-roles-states-and-properties-22) recommends associating a label with the Tabs component.
+There are two options to accomplish this:
+
+### Using the id attribute
+
+Add a text element close to the tabs with the `id` attribute.
+Then add the `aria-labelledby` attribute to the Tabs component.
+Make sure to use meaningful labels for both.
+
+```js
+<Typography id="tabs-accessibility-label">Meaningful label</Typography>
+<Tabs aria-labelledby="tabs-accessibility-label">...</Tabs>
+```
+
+### Using aria-label
+
+If a text element does not accompany your Tabs component, use the `aria-label` attribute directly to make it readable by screen readers.
+
+```js
+<Tabs aria-label="Meaningful label">...</Tabs>
+```
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx
index 6c1305214209e3..23200b104b3231 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx
@@ -55,14 +55,13 @@ export default extendTheme({
     JoyInput: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
-          ...(ownerState.variant === 'outlined' &&
-            ownerState.color !== 'context' && {
-              [`&:not(.${inputClasses.focused}):hover::before`]: {
-                boxShadow: `inset 0 0 0 2px ${
-                  theme.vars.palette?.[ownerState.color!]?.outlinedBorder
-                }`,
-              },
-            }),
+          ...(ownerState.variant === 'outlined' && {
+            [`&:not(.${inputClasses.focused}):hover::before`]: {
+              boxShadow: `inset 0 0 0 2px ${
+                theme.vars.palette?.[ownerState.color!]?.outlinedBorder
+              }`,
+            },
+          }),
         }),
         input: {
           caretColor: 'var(--Input-focusedHighlight)',
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js
new file mode 100644
index 00000000000000..360d2c8d2c581a
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { applySolidInversion } from '@mui/joy/colorInversion';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+
+function Stat({ description, value, sx, ...props }) {
+  return (
+    <Box
+      {...props}
+      sx={[
+        { borderLeft: 3, borderColor: 'divider', px: 2, py: 0.5 },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Typography level="h3" component="div">
+        {value}
+      </Typography>
+      <Typography level="title-sm" textColor="text.secondary">
+        {description}
+      </Typography>
+    </Box>
+  );
+}
+
+Stat.propTypes = {
+  description: PropTypes.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
+    ),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  value: PropTypes.node,
+};
+
+export default function ColorInversionAnyParent() {
+  return (
+    <Box
+      sx={[
+        {
+          display: 'grid',
+          gridTemplateColumns: { sm: '1fr 1fr' },
+          alignItems: 'center',
+          rowGap: 2,
+          columnGap: 8,
+          p: 2,
+          background: (theme) =>
+            `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`,
+          borderRadius: 'sm',
+        },
+        applySolidInversion('neutral'),
+      ]}
+    >
+      <div>
+        <Typography sx={{ my: 2 }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+          commodo consequat.
+        </Typography>
+        <Button variant="soft" sx={{ mt: 1 }}>
+          Learn more
+        </Button>
+      </div>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: {
+            xs: 'repeat(auto-fill, minmax(min(100%, 180px), 1fr))',
+            sm: '1fr 1fr',
+          },
+          gap: 3,
+        }}
+      >
+        <Stat value="4M" description="Weekly download on NPM" />
+        <Stat value="87k" description="Stars on Github" />
+        <Stat value="2.7k" description="Open source contributors" />
+        <Stat value="18.4k" description="Followers on Twitter" />
+      </Box>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx
new file mode 100644
index 00000000000000..7d07e8c37aa1e7
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { applySolidInversion } from '@mui/joy/colorInversion';
+import Box, { BoxProps } from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+
+function Stat({
+  description,
+  value,
+  sx,
+  ...props
+}: {
+  description: React.ReactNode;
+  value: React.ReactNode;
+} & BoxProps) {
+  return (
+    <Box
+      {...props}
+      sx={[
+        { borderLeft: 3, borderColor: 'divider', px: 2, py: 0.5 },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Typography level="h3" component="div">
+        {value}
+      </Typography>
+      <Typography level="title-sm" textColor="text.secondary">
+        {description}
+      </Typography>
+    </Box>
+  );
+}
+
+export default function ColorInversionAnyParent() {
+  return (
+    <Box
+      sx={[
+        {
+          display: 'grid',
+          gridTemplateColumns: { sm: '1fr 1fr' },
+          alignItems: 'center',
+          rowGap: 2,
+          columnGap: 8,
+          p: 2,
+          background: (theme) =>
+            `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`,
+          borderRadius: 'sm',
+        },
+        applySolidInversion('neutral'),
+      ]}
+    >
+      <div>
+        <Typography sx={{ my: 2 }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+          commodo consequat.
+        </Typography>
+        <Button variant="soft" sx={{ mt: 1 }}>
+          Learn more
+        </Button>
+      </div>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: {
+            xs: 'repeat(auto-fill, minmax(min(100%, 180px), 1fr))',
+            sm: '1fr 1fr',
+          },
+          gap: 3,
+        }}
+      >
+        <Stat value="4M" description="Weekly download on NPM" />
+        <Stat value="87k" description="Stars on Github" />
+        <Stat value="2.7k" description="Open source contributors" />
+        <Stat value="18.4k" description="Followers on Twitter" />
+      </Box>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js
index 135ee4f88b092a..57596bd9a5438d 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js
@@ -86,7 +86,13 @@ export default function ColorInversionNavigation() {
               <SmsIcon />
             </ListItemDecorator>
             Chat
-            <Chip size="sm" color="warning" variant="soft" sx={{ ml: 'auto' }}>
+            <Chip
+              data-skip-inverted-colors
+              size="sm"
+              color="warning"
+              variant="soft"
+              sx={{ ml: 'auto' }}
+            >
               5
             </Chip>
           </ListItemButton>
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx
index a12eb37f9881a6..9bbfc84c38a28d 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx
@@ -86,7 +86,13 @@ export default function ColorInversionNavigation() {
               <SmsIcon />
             </ListItemDecorator>
             Chat
-            <Chip size="sm" color="warning" variant="soft" sx={{ ml: 'auto' }}>
+            <Chip
+              data-skip-inverted-colors
+              size="sm"
+              color="warning"
+              variant="soft"
+              sx={{ ml: 'auto' }}
+            >
               5
             </Chip>
           </ListItemButton>
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionOverview.js b/docs/data/joy/main-features/color-inversion/ColorInversionOverview.js
index e13b479c70d6ed..bce6170d920826 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionOverview.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionOverview.js
@@ -29,9 +29,7 @@ export default function ColorInversionOverview() {
       >
         <BookmarkOutlinedIcon />
       </IconButton>
-      <Typography fontSize="xl2" fontWeight="lg">
-        Learn how to build super fast websites.
-      </Typography>
+      <Typography level="h3">Learn how to build super fast websites.</Typography>
       <Button variant="solid" endDecorator={<KeyboardArrowRightIcon />}>
         Read more
       </Button>
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionOverview.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionOverview.tsx
index e13b479c70d6ed..bce6170d920826 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionOverview.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionOverview.tsx
@@ -29,9 +29,7 @@ export default function ColorInversionOverview() {
       >
         <BookmarkOutlinedIcon />
       </IconButton>
-      <Typography fontSize="xl2" fontWeight="lg">
-        Learn how to build super fast websites.
-      </Typography>
+      <Typography level="h3">Learn how to build super fast websites.</Typography>
       <Button variant="solid" endDecorator={<KeyboardArrowRightIcon />}>
         Read more
       </Button>
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionSkip.js b/docs/data/joy/main-features/color-inversion/ColorInversionSkip.js
new file mode 100644
index 00000000000000..cad9a69a1b9556
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionSkip.js
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Card from '@mui/joy/Card';
+import SvgIcon from '@mui/joy/SvgIcon';
+import IconButton from '@mui/joy/IconButton';
+import Typography from '@mui/joy/Typography';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+
+export default function ColorInversionSkip() {
+  return (
+    <Card
+      size="lg"
+      variant="solid"
+      color="neutral"
+      invertedColors
+      sx={{ maxWidth: 300, boxShadow: 'lg', borderRadius: 'xl' }}
+    >
+      <AspectRatio
+        data-skip-inverted-colors
+        variant="soft"
+        color="success"
+        ratio="1"
+        sx={{ width: 48 }}
+      >
+        <div>
+          <SvgIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="3" y="8" width="18" height="4" rx="1" />
+              <path d="M12 8v13" />
+              <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" />
+              <path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" />
+            </svg>
+          </SvgIcon>
+        </div>
+      </AspectRatio>
+
+      <Typography level="h3">Design Thinking</Typography>
+      <Typography level="body-sm">
+        How to apply design thinking to your problem in order to generate innovative
+        and user-centric solutions.
+      </Typography>
+
+      <IconButton
+        variant="plain"
+        size="lg"
+        sx={{ alignSelf: 'flex-end', borderRadius: '50%', mr: -1, my: -1 }}
+      >
+        <ArrowForward />
+      </IconButton>
+    </Card>
+  );
+}
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionSkip.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionSkip.tsx
new file mode 100644
index 00000000000000..cad9a69a1b9556
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionSkip.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Card from '@mui/joy/Card';
+import SvgIcon from '@mui/joy/SvgIcon';
+import IconButton from '@mui/joy/IconButton';
+import Typography from '@mui/joy/Typography';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+
+export default function ColorInversionSkip() {
+  return (
+    <Card
+      size="lg"
+      variant="solid"
+      color="neutral"
+      invertedColors
+      sx={{ maxWidth: 300, boxShadow: 'lg', borderRadius: 'xl' }}
+    >
+      <AspectRatio
+        data-skip-inverted-colors
+        variant="soft"
+        color="success"
+        ratio="1"
+        sx={{ width: 48 }}
+      >
+        <div>
+          <SvgIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="3" y="8" width="18" height="4" rx="1" />
+              <path d="M12 8v13" />
+              <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" />
+              <path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" />
+            </svg>
+          </SvgIcon>
+        </div>
+      </AspectRatio>
+
+      <Typography level="h3">Design Thinking</Typography>
+      <Typography level="body-sm">
+        How to apply design thinking to your problem in order to generate innovative
+        and user-centric solutions.
+      </Typography>
+
+      <IconButton
+        variant="plain"
+        size="lg"
+        sx={{ alignSelf: 'flex-end', borderRadius: '50%', mr: -1, my: -1 }}
+      >
+        <ArrowForward />
+      </IconButton>
+    </Card>
+  );
+}
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionSurface.js b/docs/data/joy/main-features/color-inversion/ColorInversionSurface.js
new file mode 100644
index 00000000000000..b7e0b94a246de4
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionSurface.js
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import Typography from '@mui/joy/Typography';
+import SvgIcon from '@mui/joy/SvgIcon';
+
+export default function ColorInversionSurface() {
+  const creditCard = (
+    <Card
+      size="lg"
+      variant="solid"
+      color="warning"
+      invertedColors
+      sx={{ gap: 2, minWidth: 300, boxShadow: 'md' }}
+    >
+      <CardContent orientation="horizontal">
+        <div>
+          <Typography level="title-lg">$4,236</Typography>
+          <Typography fontSize="xs" fontFamily="code">
+            CREDIT
+          </Typography>
+        </div>
+        <SvgIcon sx={{ ml: 'auto' }}>
+          <svg
+            width="50"
+            height="39"
+            viewBox="0 0 50 39"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16.4992 2H37.5808L22.0816 24.9729H1L16.4992 2Z"
+              fill="currentColor"
+            />
+            <path
+              d="M17.4224 27.102L11.4192 36H33.5008L49 13.0271H32.7024L23.2064 27.102H17.4224Z"
+              fill="#312ECB"
+            />
+          </svg>
+        </SvgIcon>
+      </CardContent>
+      <Typography level="title-lg" fontFamily="code">
+        •••• •••• •••• 1212
+      </Typography>
+      <CardContent orientation="horizontal" sx={{ justifyContent: 'space-between' }}>
+        <div>
+          <Typography fontSize="xs" fontFamily="code">
+            CARD NAME
+          </Typography>
+          <Typography level="title-sm" fontSize="sm">
+            JOHN DOE
+          </Typography>
+        </div>
+        <div>
+          <Typography fontSize="xs" textAlign="right" fontFamily="code">
+            EXPIRE
+          </Typography>
+          <Typography level="title-sm" fontSize="sm" textAlign="right">
+            07/25
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2 }}>
+      {creditCard}
+      {React.cloneElement(creditCard, { variant: 'soft' })}
+    </Box>
+  );
+}
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionSurface.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionSurface.tsx
new file mode 100644
index 00000000000000..3f49510152aaf3
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionSurface.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import Typography from '@mui/joy/Typography';
+import SvgIcon from '@mui/joy/SvgIcon';
+
+export default function ColorInversionSurface() {
+  const creditCard = (
+    <Card
+      size="lg"
+      variant="solid"
+      color="warning"
+      invertedColors
+      sx={{ gap: 2, minWidth: 300, boxShadow: 'md' }}
+    >
+      <CardContent orientation="horizontal">
+        <div>
+          <Typography level="title-lg">$4,236</Typography>
+          <Typography fontSize="xs" fontFamily="code">
+            CREDIT
+          </Typography>
+        </div>
+        <SvgIcon sx={{ ml: 'auto' }}>
+          <svg
+            width="50"
+            height="39"
+            viewBox="0 0 50 39"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16.4992 2H37.5808L22.0816 24.9729H1L16.4992 2Z"
+              fill="currentColor"
+            />
+            <path
+              d="M17.4224 27.102L11.4192 36H33.5008L49 13.0271H32.7024L23.2064 27.102H17.4224Z"
+              fill="#312ECB"
+            />
+          </svg>
+        </SvgIcon>
+      </CardContent>
+      <Typography level="title-lg" fontFamily="code">
+        •••• •••• •••• 1212
+      </Typography>
+      <CardContent orientation="horizontal" sx={{ justifyContent: 'space-between' }}>
+        <div>
+          <Typography fontSize="xs" fontFamily="code">
+            CARD NAME
+          </Typography>
+          <Typography level="title-sm" fontSize="sm">
+            JOHN DOE
+          </Typography>
+        </div>
+        <div>
+          <Typography fontSize="xs" textAlign="right" fontFamily="code">
+            EXPIRE
+          </Typography>
+          <Typography level="title-sm" fontSize="sm" textAlign="right">
+            07/25
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  );
+  return (
+    <Box sx={{ display: 'flex', gap: 2 }}>
+      {creditCard}
+      {React.cloneElement(creditCard, { variant: 'soft' })}
+    </Box>
+  );
+}
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionSurface.tsx.preview b/docs/data/joy/main-features/color-inversion/ColorInversionSurface.tsx.preview
new file mode 100644
index 00000000000000..f91cb4f688a1e8
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionSurface.tsx.preview
@@ -0,0 +1,2 @@
+{creditCard}
+{React.cloneElement(creditCard, { variant: 'soft' })}
\ No newline at end of file
diff --git a/docs/data/joy/main-features/color-inversion/color-inversion.md b/docs/data/joy/main-features/color-inversion/color-inversion.md
index 7e6bd76d9bb694..835b020e3422a1 100644
--- a/docs/data/joy/main-features/color-inversion/color-inversion.md
+++ b/docs/data/joy/main-features/color-inversion/color-inversion.md
@@ -21,21 +21,13 @@ The color inversion is implemented to solve this issue, keeping the global varia
 
 ## Overview
 
-When color inversion is enabled on the parent component, the children with implicit color will invert their styles to match the parent's background by keeping the same hierarchy of importance based on their variants.
+When color inversion is enabled on the parent component, all of Joy UI children will invert their styles regardless of its color prop to match the parent's background by keeping the same hierarchy of importance based on their variants.
 
 {{"demo": "ColorInversionOverview.js"}}
 
-**Implicit** color refers to components that don't have the `color` prop specified.
-
-Color inversion has no effect on children that have an **explicit** `color` prop.
-
-```js
-// implicit color. The styles change when color inversion is enabled.
-<Chip variant="soft">…</Chip>
-
-// explicit color. Color inversion has no effect.
-<Chip variant="soft" color="primary">…</Chip>
-```
+:::info
+The color inversion feature is only available for `soft` and `solid` variants because the rest of the global variants don't have background by default.
+:::
 
 ### Benefits
 
@@ -45,7 +37,7 @@ Color inversion has no effect on children that have an **explicit** `color` prop
 - It works for both light and dark mode.
 - It can be disabled at any time without impacting the structure of the components.
 - It is an opt-in feature. If you don't use it, the extra CSS variables won't be included in the production style sheet.
-- It doesn't alter the styles of the children if you explicitly specify the `color` prop on them.
+- Some children can be excluded from the color inversion, see ["skip color inversion on a child"](#skip-color-inversion-on-a-child) section.
 
 ### Trade-offs
 
@@ -54,13 +46,11 @@ Color inversion has no effect on children that have an **explicit** `color` prop
 
 ## Usage
 
-To enable color inversion, use the `invertedColors` prop. Note that this prop only works when the components have the `solid` or `soft` global variant applied.
+### Surface components
 
-```js
-<Card variant="solid" invertedColors>…</Card>
+Surface components, including the Alert, Card, Drawer, ModalDialog, Menu, and Sheet, have the `invertedColors` prop to enable color inversion for `solid` and `soft` variants.
 
-<Sheet variant="soft" invertedColors>…</Sheet>
-```
+{{"demo": "ColorInversionSurface.js"}}
 
 ### Portal popup
 
@@ -73,18 +63,71 @@ The popup slot of the Select component has `disablePortal` set to true by defaul
 
 {{"demo": "ColorInversionPopup.js"}}
 
-## How it works
+### Skip color inversion on a child
+
+To skip color inversion on a specific child, set `data-skip-inverted-colors` attribute to the component.
+
+The component with `data-skip-inverted-colors` and its children will be excluded from the color inversion.
+
+{{"demo": "ColorInversionSkip.js"}}
 
-### Parent component
+### Apply color inversion to any parent
 
-When `invertedColors` is set to true on the surface component, a set of CSS variables is applied to it.
-The values of those variables come from `theme.colorInversion[variant][color]`, where `variant` and `color` are the component's props.
-The surface component also creates a React context to tell the children to update their styles.
+Use `applySolidInversion` or `applySoftInversion` utilities to apply color inversion to any parent component.
+
+They are used internally by the surface components, e.g. [Card](/joy-ui/react-card/#inverted-colors), when `invertedColors` prop is set to true.
+
+```js
+import { applySolidInversion, applySoftInversion } from '@mui/joy/colorInversion';
+```
+
+Example usage for `sx` prop and `styled` API:
+
+- `sx` prop
+
+  ```js
+  import { applySolidInversion } from '@mui/joy/colorInversion';
+
+  <Box
+    sx={[
+      (theme) => ({
+        display: 'flex',
+        alignItems: 'center',
+        background: theme.vars.palette.neutral[900],
+      }),
+      applySolidInversion('neutral'),
+    ]}
+  >
+    …
+  </Box>;
+  ```
+
+- `styled` API
+
+  ```js
+  import { styled } from '@mui/joy/styles';
+  import { applySoftInversion } from '@mui/joy/colorInversion';
+
+  const StyledBox = styled(Box)(
+    ({ theme }) => ({
+      display: 'flex',
+      alignItems: 'center',
+      ...theme.variants.soft.primary,
+    }),
+    applySoftInversion('primary'),
+  );
+  ```
+
+{{"demo": "ColorInversionAnyParent.js"}}
+
+## How it works
+
+When `invertedColors` is set to true or the utility is used on the parent component, a set of CSS variables is applied to it. There is no [React context](https://react.dev/learn/passing-data-deeply-with-context) involved in this feature.
 
 ```jsx
 <Sheet invertedColors variant="solid" color="neutral">
 
-// The component style sheet
+// The parent's style sheet
 {
   // the values of these variables depends on the parent's variant and color.
   --variant-softColor: …;
@@ -93,29 +136,26 @@ The surface component also creates a React context to tell the children to updat
   --variant-softHoverBg: …;
   --variant-softActiveBg: …;
   … // other variants
+  --joy-palette-text-primary: …;
+  --joy-palette-text-secondary: …;
+  --joy-palette-text-tertiary: …;
+  --joy-palette-background-surface: …;
+  … // other theme palette tokens
 }
 ```
 
-### Child component
-
-All Joy UI components that support global variants check the React context that contains the color inversion flag.
-If the flag is true and the child has an implicit color, the internal `color` value will switch to `context` and apply the styles from `theme.variants[variant].context`.
-
-The styles will match the `--variant-*` variables that the parent has.
+As a result, the children will use those CSS variables instead of the theme.
 
 ```jsx
-<Chip variant="soft">
-
-// Component style sheet
+// The children style sheet
+// The values of these variables are inherited from the parent.
 {
-  background-color: var(--variant-softBg);
-  color: var(--variant-softColor);
+  color: var(--joy-palette-text-primary);
+  background: var(--joy-palette-background-surface);
+  …
 }
 ```
 
-In summary, the parent creates a React context to tell the children that the feature is enabled, and generates CSS variables that will be used by the children.
-The children with an implicit color switch their default color value to `context` to get the styles from the theme.
-
 ## Common examples
 
 ### Header
diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md
index 48106b6da5a52b..6005af77bdc11f 100644
--- a/docs/data/material/components/chips/chips.md
+++ b/docs/data/material/components/chips/chips.md
@@ -101,14 +101,14 @@ gain depth while clicked or touched.
 
 ### Material You version
 
-The default Chip component follows the Material Design 2 specs.
-For the Material Design 3 ([Material You](https://m3.material.io/)) version, you can use the new experimental `@mui/material-next` package:
+The default Material UI Chip component follows the Material Design 2 specs.
+To get the Material You ([Material Design 3](https://m3.material.io/)) version, use the new experimental `@mui/material-next` package:
 
 ```js
 import Chip from '@mui/material-next/Chip';
 ```
 
-{{"demo": "ChipMaterialYouPlayground.js", "hideToolbar": true}}
+{{"demo": "ChipMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}}
 
 ## Accessibility
 
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.js b/docs/data/material/components/drawers/PersistentDrawerRight.js
index 245fa63fc829d6..b8639977cf60f5 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.js
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.js
@@ -37,6 +37,13 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
       }),
       marginRight: 0,
     }),
+    /**
+     * This is necessary to enable the selection of content. In the DOM, the stacking order is determined
+     * by the order of appearance. Following this rule, elements appearing later in the markup will overlay
+     * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures
+     * proper interaction with the underlying content.
+     */
+    position: 'relative',
   }),
 );
 
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
index f4f300d84f03cd..0935adf39ba2c0 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
@@ -38,6 +38,13 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
     }),
     marginRight: 0,
   }),
+  /**
+   * This is necessary to enable the selection of content. In the DOM, the stacking order is determined
+   * by the order of appearance. Following this rule, elements appearing later in the markup will overlay
+   * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures
+   * proper interaction with the underlying content.
+   */
+  position: 'relative',
 }));
 
 interface AppBarProps extends MuiAppBarProps {
diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md
index c9122a6ffffa06..b324891b5a8305 100644
--- a/docs/data/material/customization/dark-mode/dark-mode.md
+++ b/docs/data/material/customization/dark-mode/dark-mode.md
@@ -16,7 +16,7 @@ const darkTheme = createTheme({
   },
 });
 
-function App() {
+export default function App() {
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
@@ -24,8 +24,6 @@ function App() {
     </ThemeProvider>
   );
 }
-
-export default App;
 ```
 
 Adding `mode: 'dark'` to the `createTheme` helper modifies several palette values, as shown in the following demo:
diff --git a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
index d29f823eb584a0..ed3cd3240909af 100644
--- a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
+++ b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
@@ -203,6 +203,43 @@ The `sx` prop can also receive a callback when you need to get theme values that
 />
 ```
 
+In TypeScript, to use custom theme properties with the `sx` prop callback, extend the `Theme` type from the `@mui/system` library using [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation):
+
+```tsx
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { orange } from '@mui/material/colors';
+
+declare module '@mui/system' {
+  interface Theme {
+    status: {
+      warning: string;
+    };
+  }
+}
+
+const theme = createTheme({
+  status: {
+    warning: orange[500],
+  },
+});
+
+export default function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Box
+        sx={(theme) => ({
+          bgcolor: theme.status.warning,
+        })}
+      >
+        Example
+      </Box>
+    </ThemeProvider>
+  );
+}
+```
+
 ## Array values
 
 Array types are useful when you want to partially override some styles in the former index:
diff --git a/docs/package.json b/docs/package.json
index f216e453a99256..456c5f67b27480 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -32,20 +32,20 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/base": "5.0.0-beta.17",
-    "@mui/docs": "^5.14.11",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/joy": "5.0.0-beta.8",
-    "@mui/lab": "5.0.0-alpha.146",
+    "@mui/base": "5.0.0-beta.18",
+    "@mui/docs": "^5.14.12",
+    "@mui/icons-material": "^5.14.12",
+    "@mui/joy": "5.0.0-beta.9",
+    "@mui/lab": "5.0.0-alpha.147",
     "@mui/markdown": "^5.0.0",
-    "@mui/material": "^5.14.11",
-    "@mui/material-next": "6.0.0-alpha.103",
-    "@mui/styled-engine": "^5.14.11",
-    "@mui/styled-engine-sc": "^5.14.11",
-    "@mui/styles": "^5.14.11",
-    "@mui/system": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
+    "@mui/material": "^5.14.12",
+    "@mui/material-next": "6.0.0-alpha.104",
+    "@mui/styled-engine": "^5.14.12",
+    "@mui/styled-engine-sc": "^5.14.12",
+    "@mui/styles": "^5.14.12",
+    "@mui/system": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
     "@mui/x-charts": "^6.0.0-alpha.12",
     "@mui/x-data-grid": "6.15.0",
     "@mui/x-data-grid-generator": "6.15.0",
@@ -91,7 +91,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.5",
+    "react-draggable": "^4.4.6",
     "react-final-form": "^6.5.9",
     "react-imask": "^7.1.3",
     "react-intersection-observer": "^9.5.2",
@@ -106,7 +106,7 @@
     "react-virtuoso": "^4.6.0",
     "react-window": "^1.8.9",
     "recharts": "2.8.0",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "styled-components": "^6.0.0",
     "stylis": "4.2.0",
     "stylis-plugin-rtl": "^2.1.1",
@@ -123,16 +123,16 @@
     "@types/css-mediaquery": "^0.1.2",
     "@types/json2mq": "^0.2.0",
     "@types/markdown-to-jsx": "^7.0.1",
-    "@types/node": "^18.18.0",
+    "@types/node": "^18.18.4",
     "@types/prop-types": "^15.7.7",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-swipeable-views": "^0.13.2",
-    "@types/react-swipeable-views-utils": "^0.13.4",
-    "@types/react-transition-group": "^4.4.6",
-    "@types/react-window": "^1.8.5",
+    "@types/react-dom": "^18.2.11",
+    "@types/react-swipeable-views": "^0.13.3",
+    "@types/react-swipeable-views-utils": "^0.13.5",
+    "@types/react-transition-group": "^4.4.7",
+    "@types/react-window": "^1.8.6",
     "@types/stylis": "^4.2.0",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "cross-fetch": "^4.0.0",
     "gm": "^1.25.0",
     "marked": "^5.1.2",
diff --git a/docs/pages/base-ui/api/menu.json b/docs/pages/base-ui/api/menu.json
index 8b54d2d00ce194..6c5f41a10def15 100644
--- a/docs/pages/base-ui/api/menu.json
+++ b/docs/pages/base-ui/api/menu.json
@@ -1,6 +1,12 @@
 {
   "props": {
     "actions": { "type": { "name": "custom", "description": "ref" } },
+    "anchor": {
+      "type": {
+        "name": "union",
+        "description": "HTML element<br>&#124;&nbsp;object<br>&#124;&nbsp;func"
+      }
+    },
     "onItemsChange": { "type": { "name": "func" } },
     "slotProps": {
       "type": {
diff --git a/docs/pages/experiments/index.js b/docs/pages/experiments/index.js
index 1d636fe93b3b7a..26c01c3bb60516 100644
--- a/docs/pages/experiments/index.js
+++ b/docs/pages/experiments/index.js
@@ -33,108 +33,113 @@ export default function Experiments({ experiments }) {
   return (
     <React.Fragment>
       <CssBaseline />
-      <Container>
+      <Box sx={{ display: 'flex', flexFlow: 'column nowrap', minHeight: '100vh' }}>
+        <Container>
+          <Box
+            sx={{
+              minHeight: 300,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              maxWidth: 600,
+              mx: 'auto',
+              textAlign: 'center',
+            }}
+          >
+            <Typography variant="body2" color="primary.600" fontWeight="bold">
+              Welcome to
+            </Typography>
+            <Typography component="h1" variant="h2" sx={{ my: 1 }}>
+              MUI <GradientText>Experiments</GradientText>
+            </Typography>
+
+            <Box sx={{ textAlign: 'left' }}>
+              <ul>
+                <Typography component="li">
+                  The files under <code>/experiments/*</code> are committed to git.
+                </Typography>
+                <Typography component="li">
+                  These URLs (start with <code>/experiments/*</code>) are not accessible in
+                  production.
+                </Typography>
+              </ul>
+            </Box>
+          </Box>
+        </Container>
         <Box
           sx={{
-            minHeight: 300,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            maxWidth: 600,
-            mx: 'auto',
-            textAlign: 'center',
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
+            flexGrow: 1,
           }}
         >
-          <Typography variant="body2" color="primary.600" fontWeight="bold">
-            Welcome to
-          </Typography>
-          <Typography component="h1" variant="h2" sx={{ my: 1 }}>
-            MUI <GradientText>Experiments</GradientText>
-          </Typography>
-
-          <Box sx={{ textAlign: 'left' }}>
-            <ul>
-              <Typography component="li">
-                The files under <code>/experiments/*</code> are committed to git.
-              </Typography>
-              <Typography component="li">
-                These URLs (start with <code>/experiments/*</code>) are not accessible in
-                production.
-              </Typography>
-            </ul>
-          </Box>
-        </Box>
-      </Container>
-      <Box
-        sx={{ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50') }}
-      >
-        <Container sx={{ py: { xs: 4, md: 8 } }}>
-          <Typography
-            variant="body2"
-            color="grey.600"
-            fontWeight="bold"
-            textAlign="center"
-            sx={{ mb: 2 }}
-          >
-            All Experiments ({experiments.length})
-          </Typography>
-          {experiments.length > 0 && (
-            <Box
-              sx={{
-                display: 'grid',
-                gap: 2,
-                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-              }}
+          <Container sx={{ py: { xs: 4, md: 8 } }}>
+            <Typography
+              variant="body2"
+              color="grey.600"
+              fontWeight="bold"
+              textAlign="center"
+              sx={{ mb: 2 }}
             >
-              {Object.entries(categories).map(([categoryName, children]) => (
-                <Box key={categoryName} sx={{ pb: 2 }}>
-                  <Typography
-                    component="h2"
-                    variant="body2"
-                    sx={{
-                      fontWeight: 500,
-                      color: 'grey.600',
-                      px: 1,
-                    }}
-                  >
-                    {categoryName}
-                  </Typography>
-                  <List>
-                    {(children || []).map((aPage) => {
-                      return (
-                        <ListItem key={aPage.pathname} disablePadding>
-                          <ListItemButton
-                            component={Link}
-                            noLinkStyle
-                            href={aPage.pathname}
-                            sx={{
-                              px: 1,
-                              py: 0.5,
-                              fontSize: '0.84375rem',
-                              fontWeight: 500,
-                              '&:hover, &:focus': { '& svg': { opacity: 1 } },
-                            }}
-                          >
-                            {aPage.name}
-                            <KeyboardArrowRightRounded
+              All Experiments ({experiments.length})
+            </Typography>
+            {experiments.length > 0 && (
+              <Box
+                sx={{
+                  display: 'grid',
+                  gap: 2,
+                  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                }}
+              >
+                {Object.entries(categories).map(([categoryName, children]) => (
+                  <Box key={categoryName} sx={{ pb: 2 }}>
+                    <Typography
+                      component="h2"
+                      variant="body2"
+                      sx={{
+                        fontWeight: 500,
+                        color: 'grey.600',
+                        px: 1,
+                      }}
+                    >
+                      {categoryName}
+                    </Typography>
+                    <List>
+                      {(children || []).map((aPage) => {
+                        return (
+                          <ListItem key={aPage.pathname} disablePadding>
+                            <ListItemButton
+                              component={Link}
+                              noLinkStyle
+                              href={aPage.pathname}
                               sx={{
-                                ml: 'auto',
-                                fontSize: '1.125rem',
-                                opacity: 0,
-                                color: 'primary.main',
+                                px: 1,
+                                py: 0.5,
+                                fontSize: '0.84375rem',
+                                fontWeight: 500,
+                                '&:hover, &:focus': { '& svg': { opacity: 1 } },
                               }}
-                            />
-                          </ListItemButton>
-                        </ListItem>
-                      );
-                    })}
-                  </List>
-                </Box>
-              ))}
-            </Box>
-          )}
-        </Container>
+                            >
+                              {aPage.name}
+                              <KeyboardArrowRightRounded
+                                sx={{
+                                  ml: 'auto',
+                                  fontSize: '1.125rem',
+                                  opacity: 0,
+                                  color: 'primary.main',
+                                }}
+                              />
+                            </ListItemButton>
+                          </ListItem>
+                        );
+                      })}
+                    </List>
+                  </Box>
+                ))}
+              </Box>
+            )}
+          </Container>
+        </Box>
       </Box>
     </React.Fragment>
   );
diff --git a/docs/pages/experiments/md3/buttons.tsx b/docs/pages/experiments/md3/buttons.tsx
new file mode 100644
index 00000000000000..8128c2de82628e
--- /dev/null
+++ b/docs/pages/experiments/md3/buttons.tsx
@@ -0,0 +1,228 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import MD2Button, { ButtonProps as MD2ButtonProps } from '@mui/material/Button';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SendIcon from '@mui/icons-material/Send';
+import Button, { ButtonProps } from '@mui/material-next/Button';
+import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { customPalette, ModeSwitcher } from '.';
+
+const variants: ButtonProps['variant'][] = [
+  'elevated',
+  'filled',
+  'filledTonal',
+  'outlined',
+  'text',
+];
+const colors: ButtonProps['color'][] = ['primary', 'secondary', 'tertiary'];
+const sizes: ButtonProps['size'][] = ['small', 'medium', 'large'];
+
+const md2Variants: MD2ButtonProps['variant'][] = ['contained', 'outlined', 'text'];
+const md2Colors: MD2ButtonProps['color'][] = [
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'warning',
+];
+
+function DemoComponents() {
+  const [radius, setRadius] = React.useState<string>('10');
+  const [gap, setGap] = React.useState<string>('0.5');
+
+  return (
+    <Stack direction="column" gap={1}>
+      <h4>Enabled</h4>
+      <Stack direction="row" gap={1}>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant}>
+            {capitalize(variant as string)}
+          </Button>
+        ))}
+      </Stack>
+      <h4>Enabled without a ripple effect</h4>
+      <Stack direction="row" gap={1}>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} disableRipple>
+            {capitalize(variant as string)}
+          </Button>
+        ))}
+      </Stack>
+      <h4>Disabled</h4>
+      <Stack direction="row" gap={1}>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} disabled>
+            {capitalize(variant as string)}
+          </Button>
+        ))}
+      </Stack>
+      <h4>Colors</h4>
+      <Stack direction="row" gap={1}>
+        {colors.map((color) => (
+          <Button key={color} variant="filled" color={color}>
+            {capitalize(color as string)}
+          </Button>
+        ))}
+      </Stack>
+      <Stack direction="row" gap={1}>
+        {colors.map((color) => (
+          <Button key={color} variant="outlined" color={color}>
+            {capitalize(color as string)}
+          </Button>
+        ))}
+      </Stack>
+      <Stack direction="row" gap={1}>
+        {colors.map((color) => (
+          <Button key={color} variant="text" color={color}>
+            {capitalize(color as string)}
+          </Button>
+        ))}
+      </Stack>
+      <h4>Extended buttons</h4>
+      <Stack direction="row" gap={1}>
+        {colors.map((color) => (
+          <Button key={color} variant="filled" color={color} endIcon={<SendIcon />}>
+            Send
+          </Button>
+        ))}
+        <Button variant="filled" disabled endIcon={<SendIcon />}>
+          Send
+        </Button>
+      </Stack>
+      <Stack direction="row" gap={1}>
+        {colors.map((color) => (
+          <Button key={color} variant="outlined" color={color} startIcon={<DeleteIcon />}>
+            Delete
+          </Button>
+        ))}
+        <Button variant="outlined" disabled startIcon={<DeleteIcon />}>
+          Delete
+        </Button>
+      </Stack>
+      <h4>Sizes</h4>
+      <Stack direction="row" gap={1} alignItems="end">
+        {sizes.map((size) => (
+          <Button key={size} variant="filled" size={size} endIcon={<SendIcon />}>
+            {capitalize(size as string)}
+          </Button>
+        ))}
+      </Stack>
+      <Stack direction="row" gap={1} alignItems="end">
+        {sizes.map((size) => (
+          <Button key={size} variant="outlined" size={size} startIcon={<DeleteIcon />}>
+            {capitalize(size as string)}
+          </Button>
+        ))}
+      </Stack>
+      <h4>sx prop showcase</h4>
+      <Stack>
+        <Stack direction="row" gap={1} sx={{ py: 1 }}>
+          <Button
+            sx={{
+              color: 'onError',
+              bgcolor: 'error',
+              border: 1,
+              borderColor: 'tertiary',
+              borderRadius: 'medium',
+            }}
+          >
+            Button
+          </Button>
+          <Button
+            sx={{
+              color: 'error.100',
+              bgcolor: 'error.40',
+              border: 1,
+              borderColor: 'tertiary.40',
+              borderRadius: 2,
+            }}
+          >
+            Button
+          </Button>
+          <MD2Button sx={{ borderRadius: 2, color: 'error.main' }}>MD2 Button</MD2Button>
+        </Stack>
+      </Stack>
+      <h4>CSS vars playground</h4>
+      <Stack>
+        <Stack direction="row" gap={1} sx={{ py: 1 }}>
+          <TextField
+            label="--Button-radius"
+            value={radius}
+            type="number"
+            onChange={(e) => {
+              setRadius(e.target.value);
+            }}
+          />
+          <TextField
+            label="--Button-gap"
+            value={gap}
+            type="number"
+            onChange={(e) => {
+              setGap(e.target.value);
+            }}
+          />
+        </Stack>
+        <Stack direction="row" gap={1} alignItems="end">
+          {sizes.map((size) => (
+            <Button
+              sx={{ '--Button-radius': `${radius}px`, '--Button-gap': `${gap}rem` }}
+              key={size}
+              variant="outlined"
+              size={size}
+              startIcon={<DeleteIcon />}
+            >
+              {capitalize(size as string)}
+            </Button>
+          ))}
+        </Stack>
+      </Stack>
+      <h4>Material Design 2 Buttons</h4>
+      <Stack direction="row" gap={1} alignItems="end">
+        {md2Variants.map((variant) => (
+          <MD2Button key={variant} variant={variant}>
+            {capitalize(variant as string)}
+          </MD2Button>
+        ))}
+      </Stack>
+      <Stack direction="row" gap={1} alignItems="end">
+        {md2Colors.map((color) => (
+          <MD2Button key={color} variant="contained" color={color}>
+            {capitalize(color as string)}
+          </MD2Button>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}
+
+// custom MD3 theme
+const cssVarsTheme = extendTheme({
+  colorSchemes: {
+    light: {
+      ref: {
+        palette: customPalette,
+      },
+    },
+    dark: {
+      ref: {
+        palette: customPalette,
+      },
+    },
+  },
+});
+
+export default function App() {
+  return (
+    <CssVarsProvider theme={cssVarsTheme}>
+      <CssBaseline />
+      <Stack sx={{ p: 1 }} alignItems="flex-start">
+        <ModeSwitcher />
+        <DemoComponents />
+      </Stack>
+    </CssVarsProvider>
+  );
+}
diff --git a/docs/pages/experiments/md3/index.tsx b/docs/pages/experiments/md3/index.tsx
index 03a1467d38ac28..c67299fe14ec18 100644
--- a/docs/pages/experiments/md3/index.tsx
+++ b/docs/pages/experiments/md3/index.tsx
@@ -1,237 +1,11 @@
 import * as React from 'react';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
-import TextField from '@mui/material/TextField';
-import Stack from '@mui/material/Stack';
-import MD2Button, { ButtonProps as MD2ButtonProps } from '@mui/material/Button';
-import { unstable_capitalize as capitalize } from '@mui/utils';
-import DeleteIcon from '@mui/icons-material/Delete';
-import SendIcon from '@mui/icons-material/Send';
-import Button, { ButtonProps } from '@mui/material-next/Button';
-import { CssVarsProvider, useColorScheme, extendTheme } from '@mui/material-next/styles';
 import DarkIcon from '@mui/icons-material/DarkModeOutlined';
 import LightIcon from '@mui/icons-material/LightModeOutlined';
-import CssBaseline from '@mui/material/CssBaseline';
+import { useColorScheme } from '@mui/material-next/styles';
 
-function ModeSwitcher() {
-  const { mode, setMode } = useColorScheme();
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <Tooltip title={`Change to ${mode === 'light' ? 'dark' : 'light'} mode`}>
-      <IconButton
-        onClick={() => {
-          if (mode === 'light') {
-            setMode('dark');
-          } else {
-            setMode('light');
-          }
-        }}
-      >
-        {mode === 'light' ? <DarkIcon /> : <LightIcon />}
-      </IconButton>
-    </Tooltip>
-  );
-}
-
-const variants: ButtonProps['variant'][] = [
-  'elevated',
-  'filled',
-  'filledTonal',
-  'outlined',
-  'text',
-];
-const colors: ButtonProps['color'][] = ['primary', 'secondary', 'tertiary'];
-const sizes: ButtonProps['size'][] = ['small', 'medium', 'large'];
-
-const md2Variants: MD2ButtonProps['variant'][] = ['contained', 'outlined', 'text'];
-const md2Colors: MD2ButtonProps['color'][] = [
-  'primary',
-  'secondary',
-  'success',
-  'error',
-  'info',
-  'warning',
-];
-
-function DemoComponents() {
-  const [radius, setRadius] = React.useState<string>('10');
-  const [gap, setGap] = React.useState<string>('0.5');
-
-  return (
-    <Stack direction="column" gap={1}>
-      <h4>Enabled</h4>
-      <Stack direction="row" gap={1}>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {capitalize(variant as string)}
-          </Button>
-        ))}
-      </Stack>
-      <h4>Enabled without a ripple effect</h4>
-      <Stack direction="row" gap={1}>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} disableRipple>
-            {capitalize(variant as string)}
-          </Button>
-        ))}
-      </Stack>
-      <h4>Disabled</h4>
-      <Stack direction="row" gap={1}>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} disabled>
-            {capitalize(variant as string)}
-          </Button>
-        ))}
-      </Stack>
-      <h4>Colors</h4>
-      <Stack direction="row" gap={1}>
-        {colors.map((color) => (
-          <Button key={color} variant="filled" color={color}>
-            {capitalize(color as string)}
-          </Button>
-        ))}
-      </Stack>
-      <Stack direction="row" gap={1}>
-        {colors.map((color) => (
-          <Button key={color} variant="outlined" color={color}>
-            {capitalize(color as string)}
-          </Button>
-        ))}
-      </Stack>
-      <Stack direction="row" gap={1}>
-        {colors.map((color) => (
-          <Button key={color} variant="text" color={color}>
-            {capitalize(color as string)}
-          </Button>
-        ))}
-      </Stack>
-      <h4>Extended buttons</h4>
-      <Stack direction="row" gap={1}>
-        {colors.map((color) => (
-          <Button key={color} variant="filled" color={color} endIcon={<SendIcon />}>
-            Send
-          </Button>
-        ))}
-        <Button variant="filled" disabled endIcon={<SendIcon />}>
-          Send
-        </Button>
-      </Stack>
-      <Stack direction="row" gap={1}>
-        {colors.map((color) => (
-          <Button key={color} variant="outlined" color={color} startIcon={<DeleteIcon />}>
-            Delete
-          </Button>
-        ))}
-        <Button variant="outlined" disabled startIcon={<DeleteIcon />}>
-          Delete
-        </Button>
-      </Stack>
-      <h4>Sizes</h4>
-      <Stack direction="row" gap={1} alignItems="end">
-        {sizes.map((size) => (
-          <Button key={size} variant="filled" size={size} endIcon={<SendIcon />}>
-            {capitalize(size as string)}
-          </Button>
-        ))}
-      </Stack>
-      <Stack direction="row" gap={1} alignItems="end">
-        {sizes.map((size) => (
-          <Button key={size} variant="outlined" size={size} startIcon={<DeleteIcon />}>
-            {capitalize(size as string)}
-          </Button>
-        ))}
-      </Stack>
-      <h4>sx prop showcase</h4>
-      <Stack>
-        <Stack direction="row" gap={1} sx={{ py: 1 }}>
-          <Button
-            sx={{
-              color: 'onError',
-              bgcolor: 'error',
-              border: 1,
-              borderColor: 'tertiary',
-              borderRadius: 'medium',
-            }}
-          >
-            Button
-          </Button>
-          <Button
-            sx={{
-              color: 'error.100',
-              bgcolor: 'error.40',
-              border: 1,
-              borderColor: 'tertiary.40',
-              borderRadius: 2,
-            }}
-          >
-            Button
-          </Button>
-          <MD2Button sx={{ borderRadius: 2, color: 'error.main' }}>MD2 Button</MD2Button>
-        </Stack>
-      </Stack>
-      <h4>CSS vars playground</h4>
-      <Stack>
-        <Stack direction="row" gap={1} sx={{ py: 1 }}>
-          <TextField
-            label="--Button-radius"
-            value={radius}
-            type="number"
-            onChange={(e) => {
-              setRadius(e.target.value);
-            }}
-          />
-          <TextField
-            label="--Button-gap"
-            value={gap}
-            type="number"
-            onChange={(e) => {
-              setGap(e.target.value);
-            }}
-          />
-        </Stack>
-        <Stack direction="row" gap={1} alignItems="end">
-          {sizes.map((size) => (
-            <Button
-              sx={{ '--Button-radius': `${radius}px`, '--Button-gap': `${gap}rem` }}
-              key={size}
-              variant="outlined"
-              size={size}
-              startIcon={<DeleteIcon />}
-            >
-              {capitalize(size as string)}
-            </Button>
-          ))}
-        </Stack>
-      </Stack>
-      <h4>Material Design 2 Buttons</h4>
-      <Stack direction="row" gap={1} alignItems="end">
-        {md2Variants.map((variant) => (
-          <MD2Button key={variant} variant={variant}>
-            {capitalize(variant as string)}
-          </MD2Button>
-        ))}
-      </Stack>
-      <Stack direction="row" gap={1} alignItems="end">
-        {md2Colors.map((color) => (
-          <MD2Button key={color} variant="contained" color={color}>
-            {capitalize(color as string)}
-          </MD2Button>
-        ))}
-      </Stack>
-    </Stack>
-  );
-}
-
-const customPalette = {
+export const customPalette = {
   primary: {
     '0': '#000000',
     '10': '#3e001f',
@@ -328,30 +102,35 @@ const customPalette = {
   },
 };
 
-// custom MD3 theme
-const cssVarsTheme = extendTheme({
-  colorSchemes: {
-    light: {
-      ref: {
-        palette: customPalette,
-      },
-    },
-    dark: {
-      ref: {
-        palette: customPalette,
-      },
-    },
-  },
-});
+export function ModeSwitcher() {
+  const { mode, setMode } = useColorScheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
 
-export default function App() {
   return (
-    <CssVarsProvider theme={cssVarsTheme}>
-      <CssBaseline />
-      <Stack sx={{ p: 1 }} alignItems="flex-start">
-        <ModeSwitcher />
-        <DemoComponents />
-      </Stack>
-    </CssVarsProvider>
+    <Tooltip title={`Change to ${mode === 'light' ? 'dark' : 'light'} mode`}>
+      <IconButton
+        onClick={() => {
+          if (mode === 'light') {
+            setMode('dark');
+          } else {
+            setMode('light');
+          }
+        }}
+      >
+        {mode === 'light' ? <DarkIcon /> : <LightIcon />}
+      </IconButton>
+    </Tooltip>
   );
 }
+
+export default function Page() {
+  return <div>Empty</div>;
+}
diff --git a/docs/pages/experiments/md3/inputs.tsx b/docs/pages/experiments/md3/inputs.tsx
new file mode 100644
index 00000000000000..5a80eb6e60d349
--- /dev/null
+++ b/docs/pages/experiments/md3/inputs.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Md2FilledInput from '@mui/material/FilledInput';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import FilledInput from '@mui/material-next/FilledInput';
+import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import { ModeSwitcher } from '.';
+
+const md2Theme = createTheme();
+
+const md3Theme = extendTheme();
+
+export default function MaterialYouInputs() {
+  return (
+    <Stack spacing={4}>
+      <ThemeProvider theme={md2Theme}>
+        <Stack display="inline-flex" direction="row" gap={4}>
+          <Md2FilledInput defaultValue="Hello" color="primary" />
+          <Md2FilledInput defaultValue="Hello" color="secondary" />
+        </Stack>
+      </ThemeProvider>
+      <CssVarsProvider theme={md3Theme}>
+        <ModeSwitcher />
+        <Stack display="inline-flex" direction="row" gap={4}>
+          <FilledInput defaultValue="Hello" color="primary" />
+          <FilledInput defaultValue="Hello" color="secondary" />
+        </Stack>
+      </CssVarsProvider>
+    </Stack>
+  );
+}
diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json
index b38e867bf88206..01513612d2e08b 100644
--- a/docs/pages/material-ui/api/slider.json
+++ b/docs/pages/material-ui/api/slider.json
@@ -7,7 +7,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'primary'"
     },
@@ -133,6 +133,10 @@
       "root",
       "colorPrimary",
       "colorSecondary",
+      "colorError",
+      "colorInfo",
+      "colorSuccess",
+      "colorWarning",
       "marked",
       "vertical",
       "disabled",
@@ -151,6 +155,10 @@
       "sizeSmall",
       "thumbColorPrimary",
       "thumbColorSecondary",
+      "thumbColorError",
+      "thumbColorInfo",
+      "thumbColorSuccess",
+      "thumbColorWarning",
       "thumbSizeSmall",
       "valueLabel",
       "valueLabelOpen",
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index d54ca1890bdd7c..35666047b34494 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -198,7 +198,6 @@ const DemoRootMaterial = styled('div', {
   shouldForwardProp: (prop) => prop !== 'hideToolbar' && prop !== 'bg',
 })(({ theme, hideToolbar, bg }) => ({
   position: 'relative',
-  outline: 0,
   margin: 'auto',
   display: 'flex',
   justifyContent: 'center',
@@ -241,7 +240,7 @@ const DemoRootMaterial = styled('div', {
     padding: theme.spacing(20, 8),
     border: `1px solid`,
     borderColor: (theme.vars || theme).palette.divider,
-    overflow: 'hidden',
+    overflow: 'auto',
     backgroundColor: alpha(theme.palette.primary[50], 0.5),
     backgroundClip: 'padding-box',
     backgroundImage: `radial-gradient(at 51% 52%, ${alpha(
@@ -276,7 +275,6 @@ const DemoRootJoy = joyStyled('div', {
   shouldForwardProp: (prop) => prop !== 'hideToolbar' && prop !== 'bg',
 })(({ theme, hideToolbar, bg }) => ({
   position: 'relative',
-  outline: 0,
   margin: 'auto',
   display: 'flex',
   justifyContent: 'center',
diff --git a/docs/translations/api-docs-base/menu/menu.json b/docs/translations/api-docs-base/menu/menu.json
index 93852435280cef..54582eecc694f9 100644
--- a/docs/translations/api-docs-base/menu/menu.json
+++ b/docs/translations/api-docs-base/menu/menu.json
@@ -4,6 +4,7 @@
     "actions": {
       "description": "A ref with imperative actions that can be performed on the menu."
     },
+    "anchor": { "description": "The element based on which the menu is positioned." },
     "onItemsChange": {
       "description": "Function called when the items displayed in the menu change."
     },
diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json
index 8d10e7d189691a..fe3cf1cb4a921f 100644
--- a/docs/translations/api-docs/slider/slider.json
+++ b/docs/translations/api-docs/slider/slider.json
@@ -100,6 +100,26 @@
       "nodeName": "the root element",
       "conditions": "<code>color=\"secondary\"</code>"
     },
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"error\"</code>"
+    },
+    "colorInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
     "marked": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -173,6 +193,26 @@
       "nodeName": "the thumb element",
       "conditions": "<code>color=\"secondary\"</code>"
     },
+    "thumbColorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "<code>color=\"error\"</code>"
+    },
+    "thumbColorInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "thumbColorSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "thumbColorWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
     "thumbSizeSmall": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
diff --git a/package.json b/package.json
index 1e45a6472837fb..56a2ba19926beb 100644
--- a/package.json
+++ b/package.json
@@ -91,18 +91,18 @@
     "@googleapis/sheets": "^5.0.4",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@next/eslint-plugin-next": "^13.5.3",
-    "@octokit/rest": "^20.0.1",
+    "@octokit/rest": "^20.0.2",
     "@playwright/test": "1.37.1",
     "@slack/bolt": "^3.14.0",
     "@slack/web-api": "^6.9.0",
     "@types/enzyme": "^3.10.14",
     "@types/fs-extra": "^11.0.2",
     "@types/lodash": "^4.14.199",
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^18.18.0",
+    "@types/mocha": "^10.0.2",
+    "@types/node": "^18.18.4",
     "@types/prettier": "^2.7.3",
     "@types/react": "^18.2.23",
-    "@types/yargs": "^17.0.24",
+    "@types/yargs": "^17.0.28",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
     "babel-loader": "^9.1.3",
@@ -157,7 +157,7 @@
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
     "raw-loader": "4.0.2",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "serve": "^14.2.1",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
@@ -189,7 +189,7 @@
     "**/@definitelytyped/header-parser": "^0.0.178",
     "**/@definitelytyped/typescript-versions": "^0.0.178",
     "**/@definitelytyped/utils": "^0.0.178",
-    "**/@types/node": "^18.18.0",
+    "**/@types/node": "^18.18.4",
     "**/@types/react": "^18.2.23",
     "**/cross-fetch": "^4.0.0"
   },
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
index ac230c2889462c..c15fbbf3bbb84e 100644
--- a/packages/api-docs-builder/package.json
+++ b/packages/api-docs-builder/package.json
@@ -12,7 +12,7 @@
     "@babel/traverse": "^7.23.0",
     "@mui-internal/docs-utilities": "^1.0.0",
     "@mui/markdown": "^5.0.0",
-    "@mui/utils": "^5.14.11",
+    "@mui/utils": "^5.14.12",
     "ast-types": "^0.14.2",
     "docs": "^5.0.0",
     "doctrine": "^3.0.0",
@@ -31,11 +31,11 @@
     "@types/babel__traverse": "^7.20.2",
     "@types/chai": "^4.3.6",
     "@types/doctrine": "^0.0.7",
-    "@types/mdast": "4.0.0",
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^18.18.0",
-    "@types/sinon": "^10.0.16",
-    "chai": "^4.3.8",
+    "@types/mdast": "4.0.1",
+    "@types/mocha": "^10.0.2",
+    "@types/node": "^18.18.4",
+    "@types/sinon": "^10.0.19",
+    "chai": "^4.3.10",
     "sinon": "^15.2.0",
     "typescript": "^5.1.6"
   }
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
index b9a0b31a9bb404..30f25eec6c1019 100644
--- a/packages/markdown/package.json
+++ b/packages/markdown/package.json
@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "@types/chai": "^4.3.6",
-    "chai": "^4.3.8"
+    "chai": "^4.3.10"
   }
 }
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index 2f74e4a6a53869..c654cb957077b5 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/base",
-  "version": "5.0.0-beta.17",
+  "version": "5.0.0-beta.18",
   "private": false,
   "author": "MUI Team",
   "description": "A library of headless ('unstyled') React UI components and low-level hooks.",
@@ -43,23 +43,23 @@
   "dependencies": {
     "@babel/runtime": "^7.23.1",
     "@floating-ui/react-dom": "^2.0.2",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
     "@popperjs/core": "^2.11.8",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@mui-internal/test-utils": "^1.0.0",
-    "@mui/material": "^5.14.11",
+    "@mui/material": "^5.14.12",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/chai": "^4.3.6",
     "@types/prop-types": "^15.7.7",
     "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.7",
-    "@types/sinon": "^10.0.16",
-    "chai": "^4.3.8",
+    "@types/react-dom": "18.2.11",
+    "@types/sinon": "^10.0.19",
+    "chai": "^4.3.10",
     "fast-glob": "^3.3.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
diff --git a/packages/mui-base/src/Menu/Menu.test.tsx b/packages/mui-base/src/Menu/Menu.test.tsx
index 25f520d1569a2a..9651d67098d4bb 100644
--- a/packages/mui-base/src/Menu/Menu.test.tsx
+++ b/packages/mui-base/src/Menu/Menu.test.tsx
@@ -409,4 +409,68 @@ describe('<Menu />', () => {
       expect(handleItemsChange.callCount).to.equal(2);
     });
   });
+
+  describe('prop: anchor', () => {
+    it('should be placed near the specified element', async () => {
+      function TestComponent() {
+        const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);
+
+        return (
+          <div>
+            <DropdownContext.Provider value={testContext}>
+              <Menu
+                anchor={anchor}
+                slotProps={{ root: { 'data-testid': 'popup', placement: 'bottom-start' } }}
+              >
+                <MenuItem>1</MenuItem>
+                <MenuItem>2</MenuItem>
+              </Menu>
+            </DropdownContext.Provider>
+            <div data-testid="anchor" style={{ marginTop: '100px' }} ref={setAnchor} />
+          </div>
+        );
+      }
+
+      const { getByTestId } = render(<TestComponent />);
+
+      const popup = getByTestId('popup');
+      const anchor = getByTestId('anchor');
+
+      const anchorPosition = anchor.getBoundingClientRect();
+
+      expect(popup.style.getPropertyValue('transform')).to.equal(
+        `translate(${anchorPosition.left}px, ${anchorPosition.bottom}px)`,
+      );
+    });
+
+    it('should be placed at the specified position', async () => {
+      const boundingRect = {
+        x: 200,
+        y: 100,
+        top: 100,
+        left: 200,
+        bottom: 100,
+        right: 200,
+        height: 0,
+        width: 0,
+        toJSON: () => {},
+      };
+
+      const virtualElement = { getBoundingClientRect: () => boundingRect };
+
+      const { getByTestId } = render(
+        <DropdownContext.Provider value={testContext}>
+          <Menu
+            anchor={virtualElement}
+            slotProps={{ root: { 'data-testid': 'popup', placement: 'bottom-start' } }}
+          >
+            <MenuItem>1</MenuItem>
+            <MenuItem>2</MenuItem>
+          </Menu>
+        </DropdownContext.Provider>,
+      );
+      const popup = getByTestId('popup');
+      expect(popup.style.getPropertyValue('transform')).to.equal(`translate(200px, 100px)`);
+    });
+  });
 });
diff --git a/packages/mui-base/src/Menu/Menu.tsx b/packages/mui-base/src/Menu/Menu.tsx
index 7dd57dafb3d18f..b5cb6933cebc52 100644
--- a/packages/mui-base/src/Menu/Menu.tsx
+++ b/packages/mui-base/src/Menu/Menu.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { refType } from '@mui/utils';
+import { HTMLElementType, refType } from '@mui/utils';
 import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { MenuOwnerState, MenuProps, MenuRootSlotProps, MenuTypeMap } from './Menu.types';
 import { getMenuUtilityClass } from './menuClasses';
@@ -38,12 +38,22 @@ const Menu = React.forwardRef(function Menu<RootComponentType extends React.Elem
   props: MenuProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
-  const { actions, children, onItemsChange, slotProps = {}, slots = {}, ...other } = props;
+  const {
+    actions,
+    anchor: anchorProp,
+    children,
+    onItemsChange,
+    slotProps = {},
+    slots = {},
+    ...other
+  } = props;
 
   const { contextValue, getListboxProps, dispatch, open, triggerElement } = useMenu({
     onItemsChange,
   });
 
+  const anchor = anchorProp ?? triggerElement;
+
   React.useImperativeHandle(
     actions,
     () => ({
@@ -79,7 +89,7 @@ const Menu = React.forwardRef(function Menu<RootComponentType extends React.Elem
     ownerState,
   });
 
-  if (open === true && triggerElement == null) {
+  if (open === true && anchor == null) {
     return (
       <Root {...rootProps}>
         <Listbox {...listboxProps}>
@@ -90,7 +100,7 @@ const Menu = React.forwardRef(function Menu<RootComponentType extends React.Elem
   }
 
   return (
-    <Popper {...rootProps} open={open} anchorEl={triggerElement} slots={{ root: Root }}>
+    <Popper {...rootProps} open={open} anchorEl={anchor} slots={{ root: Root }}>
       <Listbox {...listboxProps}>
         <MenuProvider value={contextValue}>{children}</MenuProvider>
       </Listbox>
@@ -107,6 +117,14 @@ Menu.propTypes /* remove-proptypes */ = {
    * A ref with imperative actions that can be performed on the menu.
    */
   actions: refType,
+  /**
+   * The element based on which the menu is positioned.
+   */
+  anchor: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    HTMLElementType,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
   /**
    * @ignore
    */
diff --git a/packages/mui-base/src/Menu/Menu.types.ts b/packages/mui-base/src/Menu/Menu.types.ts
index 3881bd781346cd..1d2e85ae657931 100644
--- a/packages/mui-base/src/Menu/Menu.types.ts
+++ b/packages/mui-base/src/Menu/Menu.types.ts
@@ -3,7 +3,7 @@ import { Simplify } from '@mui/types';
 import { PolymorphicProps, SlotComponentProps } from '../utils';
 import { UseMenuListboxSlotProps } from '../useMenu';
 import { ListAction } from '../useList';
-import { Popper } from '../Popper';
+import { Popper, PopperProps } from '../Popper';
 
 export interface MenuRootSlotPropsOverrides {}
 export interface MenuListboxSlotPropsOverrides {}
@@ -24,6 +24,10 @@ export interface MenuOwnProps {
    * A ref with imperative actions that can be performed on the menu.
    */
   actions?: React.Ref<MenuActions>;
+  /**
+   * The element based on which the menu is positioned.
+   */
+  anchor?: PopperProps['anchorEl'];
   children?: React.ReactNode;
   className?: string;
   /**
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
index f81827e684d00f..241fc98f92d444 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
@@ -1132,10 +1132,12 @@ export function useAutocomplete(props) {
     }),
     getClearProps: () => ({
       tabIndex: -1,
+      type: 'button',
       onClick: handleClear,
     }),
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
+      type: 'button',
       onClick: handlePopupIndicator,
     }),
     getTagProps: ({ index }) => ({
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
index ef8acccc7cb5a0..515efe367f36ce 100644
--- a/packages/mui-codemod/package.json
+++ b/packages/mui-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@types/chai": "^4.3.6",
     "@types/jscodeshift": "0.11.5",
-    "chai": "^4.3.8"
+    "chai": "^4.3.10"
   },
   "sideEffects": false,
   "publishConfig": {
diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json
index 369e36af07c99c..c1b778f09e18d9 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.14.11",
+  "version": "5.14.12",
   "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 aec5fbbfc1ca42..bf4042f96fba53 100644
--- a/packages/mui-docs/package.json
+++ b/packages/mui-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -35,8 +35,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/base": "5.0.0-beta.17",
-    "@mui/utils": "^5.14.11",
+    "@mui/base": "5.0.0-beta.18",
+    "@mui/utils": "^5.14.12",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1"
   },
diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json
index a768955412bf7d..b56815da1f0a18 100644
--- a/packages/mui-envinfo/package.json
+++ b/packages/mui-envinfo/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@types/chai": "^4.3.6",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "fs-extra": "^11.1.1"
   },
   "publishConfig": {
diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json
index 47428f9a64f879..293bf6500d4639 100644
--- a/packages/mui-icons-material/package.json
+++ b/packages/mui-icons-material/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/icons-material",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "Material Design icons distributed as SVG React components.",
@@ -52,7 +52,7 @@
     "@mui/internal-waterfall": "^1.0.0",
     "@types/chai": "^4.3.6",
     "@types/react": "^18.2.23",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "chalk": "^5.3.0",
     "cross-fetch": "^4.0.0",
     "fast-glob": "^3.3.1",
@@ -60,7 +60,7 @@
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
     "react": "^18.2.0",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "shx": "^0.3.4",
     "svgo": "^3.0.2",
     "yargs": "^17.7.2"
diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
index 9156f6d0fb2826..e623cdaddf63a3 100644
--- a/packages/mui-joy/package.json
+++ b/packages/mui-joy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/joy",
-  "version": "5.0.0-beta.8",
+  "version": "5.0.0-beta.9",
   "private": false,
   "author": "MUI Team",
   "description": "A library of beautifully designed React UI components.",
@@ -39,23 +39,23 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/base": "5.0.0-beta.17",
-    "@mui/core-downloads-tracker": "^5.14.11",
-    "@mui/system": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
+    "@mui/base": "5.0.0-beta.18",
+    "@mui/core-downloads-tracker": "^5.14.12",
+    "@mui/system": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@mui-internal/test-utils": "^1.0.0",
-    "@mui/material": "^5.14.11",
+    "@mui/material": "^5.14.12",
     "@types/chai": "^4.3.6",
     "@types/prop-types": "^15.7.7",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@types/sinon": "^10.0.16",
-    "chai": "^4.3.8",
+    "@types/react-dom": "^18.2.11",
+    "@types/sinon": "^10.0.19",
+    "chai": "^4.3.10",
     "fast-glob": "^3.3.1",
     "lodash": "^4.17.21",
     "next": "^13.4.19",
diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
index 50dbfbd9de058d..4eec48f22eb501 100644
--- a/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
+++ b/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AccordionGroup, { accordionGroupClasses as classes } from '@mui/joy/AccordionGroup';
 
@@ -77,8 +73,6 @@ describe('<AccordionGroup />', () => {
         expect(getByTestId('root')).to.have.class(colorConfig.class);
       });
     });
-
-    describeJoyColorInversion(<AccordionGroup />, { muiName: 'JoyAccordionGroup', classes });
   });
 
   it('should not warn when using custom color, variant, size', () => {
diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx
index 73df8a92bf487f..8ec72d53de2cc9 100644
--- a/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx
+++ b/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
-import { useColorInversion, useThemeProps } from '../styles';
+import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
 import { getAccordionGroupUtilityClass } from './accordionGroupClasses';
 import {
@@ -84,7 +84,7 @@ const AccordionGroup = React.forwardRef(function AccordionGroup(inProps, ref) {
 
   const {
     component = 'div',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     children,
     disableDivider = false,
     variant = 'plain',
@@ -97,9 +97,6 @@ const AccordionGroup = React.forwardRef(function AccordionGroup(inProps, ref) {
 
   const externalForwardedProps = { ...other, component, slots, slotProps };
 
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
-
   const ownerState = {
     ...props,
     component,
diff --git a/packages/mui-joy/src/Alert/Alert.test.tsx b/packages/mui-joy/src/Alert/Alert.test.tsx
index 58003f6ebe9363..c0249786597255 100644
--- a/packages/mui-joy/src/Alert/Alert.test.tsx
+++ b/packages/mui-joy/src/Alert/Alert.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Alert, { AlertClassKey, alertClasses as classes } from '@mui/joy/Alert';
@@ -30,8 +26,6 @@ describe('<Alert />', () => {
     skip: ['classesRoot', 'componentsProp'],
   }));
 
-  describeJoyColorInversion(<Alert />, { muiName: 'JoyAlert', classes });
-
   describe('prop: variant', () => {
     it('soft by default', () => {
       const { getByRole } = render(<Alert />);
diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx
index ae19e140577ce0..b9aef4756b24b5 100644
--- a/packages/mui-joy/src/Alert/Alert.tsx
+++ b/packages/mui-joy/src/Alert/Alert.tsx
@@ -5,9 +5,9 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
+import { applySolidInversion, applySoftInversion } from '../colorInversion';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { ColorInversionProvider, useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import { getAlertUtilityClass } from './alertClasses';
 import { AlertProps, AlertOwnerState, AlertTypeMap } from './AlertProps';
@@ -76,11 +76,16 @@ const AlertRoot = styled('div', {
       borderRadius: 'var(--Alert-radius)',
       ...theme.typography[`body-${({ sm: 'xs', md: 'sm', lg: 'md' } as const)[ownerState.size!]}`],
       fontWeight: theme.vars.fontWeight.md,
+      ...(ownerState.variant === 'solid' &&
+        ownerState.color &&
+        ownerState.invertedColors &&
+        applySolidInversion(ownerState.color)(theme)),
+      ...(ownerState.variant === 'soft' &&
+        ownerState.color &&
+        ownerState.invertedColors &&
+        applySoftInversion(ownerState.color)(theme)),
       ...theme.variants[ownerState.variant!]?.[ownerState.color!],
     } as const,
-    ownerState.color !== 'context' &&
-      ownerState.invertedColors &&
-      theme.colorInversion[ownerState.variant!]?.[ownerState.color!],
     p !== undefined && { '--Alert-padding': p },
     padding !== undefined && { '--Alert-padding': padding },
     borderRadius !== undefined && { '--Alert-radius': borderRadius },
@@ -124,7 +129,7 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
   const {
     children,
     className,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     invertedColors = false,
     role = 'alert',
     variant = 'soft',
@@ -136,12 +141,11 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
     color,
+    invertedColors,
     variant,
     size,
   };
@@ -174,24 +178,14 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
     ownerState,
   });
 
-  const result = (
-    <React.Fragment>
+  return (
+    <SlotRoot {...rootProps}>
       {startDecorator && (
         <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
       )}
 
       {children}
       {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
-    </React.Fragment>
-  );
-
-  return (
-    <SlotRoot {...rootProps}>
-      {invertedColors ? (
-        <ColorInversionProvider variant={variant}>{result}</ColorInversionProvider>
-      ) : (
-        result
-      )}
     </SlotRoot>
   );
 }) as OverridableComponent<AlertTypeMap>;
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
index 855482a1a59530..5798d0dc8d6c30 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AspectRatio, {
@@ -32,11 +28,6 @@ describe('<AspectRatio />', () => {
     skip: ['classesRoot', 'componentsProp'],
   }));
 
-  describeJoyColorInversion(
-    <AspectRatio slotProps={{ content: { 'data-testid': 'test-element' } }} />,
-    { muiName: 'JoyAlert', classes },
-  );
-
   describe('prop: variant', () => {
     it('plain by default', () => {
       const { getByTestId } = render(<AspectRatio data-testid="root">Hello World</AspectRatio>);
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
index 7d0323b1529abc..75d4d0e9fe9345 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
@@ -7,7 +7,6 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import useThemeProps from '../styles/useThemeProps';
 import useSlot from '../utils/useSlot';
 import styled from '../styles/styled';
-import { useColorInversion } from '../styles/ColorInversion';
 import { getAspectRatioUtilityClass } from './aspectRatioClasses';
 import { AspectRatioProps, AspectRatioOwnerState, AspectRatioTypeMap } from './AspectRatioProps';
 
@@ -111,7 +110,7 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
     minHeight,
     maxHeight,
     objectFit = 'cover',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     variant = 'soft',
     component,
     flex = false,
@@ -119,8 +118,6 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index 4fbe3908ea0834..8701cac0d7c202 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -9,7 +9,6 @@ import {
   act,
   fireEvent,
   strictModeDoubleLoggingSuppressed,
-  describeJoyColorInversion,
 } from '@mui-internal/test-utils';
 import Autocomplete, {
   autocompleteClasses as classes,
@@ -78,12 +77,6 @@ describe('Joy <Autocomplete />', () => {
     },
   }));
 
-  describeJoyColorInversion(<Autocomplete options={[]} open />, {
-    muiName: 'JoyAutocomplete',
-    classes,
-    portalSlot: 'listbox',
-  });
-
   it('should be customizable in the theme', () => {
     render(
       <ThemeProvider
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
index 44035f7b27cf71..8ba17894c7a472 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -46,7 +46,6 @@ import FormControlContext from '../FormControl/FormControlContext';
 import { StyledAutocompleteListbox } from '../AutocompleteListbox/AutocompleteListbox';
 import { StyledAutocompleteOption } from '../AutocompleteOption/AutocompleteOption';
 import useSlot from '../utils/useSlot';
-import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
 
 type OwnerState = Omit<AutocompleteOwnerState<any, any, any, any>, 'onChange' | 'defaultValue'>;
 
@@ -346,12 +345,10 @@ const Autocomplete = React.forwardRef(function Autocomplete(
   } = props;
   const other = excludeUseAutocompleteParams(otherProps);
 
-  const { getColor } = useColorInversion(variant);
   const formControl = React.useContext(FormControlContext);
   const error = inProps.error ?? formControl?.error ?? errorProp;
   const size = inProps.size ?? formControl?.size ?? sizeProp;
-  const rootColor = inProps.color ?? (error ? 'danger' : formControl?.color ?? colorProp);
-  const color = getColor(inProps.color, rootColor);
+  const color = inProps.color ?? (error ? 'danger' : formControl?.color ?? colorProp);
   const disabled = disabledProp ?? formControl?.disabled ?? false;
 
   const {
@@ -386,6 +383,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = {
+    instanceColor: inProps.color,
     ...props,
     value,
     disabled,
@@ -426,7 +424,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
             key={index}
             size={size}
             variant="soft"
-            color={color === 'context' ? undefined : 'neutral'}
+            color="neutral"
             endDecorator={<ChipDelete {...getCustomizedTagProps({ index })} />}
           >
             {getOptionLabel(option)}
@@ -535,9 +533,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     ownerState,
     getSlotOwnerState: (mergedProps) => ({
       size: mergedProps.size || size,
-      variant:
-        mergedProps.variant || getChildVariantAndColor(variant, rootColor).variant || 'plain',
-      color: mergedProps.color || getChildVariantAndColor(variant, rootColor).color || 'neutral',
+      variant: mergedProps.variant || getChildVariantAndColor(variant, color).variant || 'plain',
+      color: mergedProps.color || getChildVariantAndColor(variant, color).color || 'neutral',
       disableColorInversion: !!inProps.color,
     }),
     additionalProps: {
@@ -554,9 +551,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     ownerState,
     getSlotOwnerState: (mergedProps) => ({
       size: mergedProps.size || size,
-      variant:
-        mergedProps.variant || getChildVariantAndColor(variant, rootColor).variant || 'plain',
-      color: mergedProps.color || getChildVariantAndColor(variant, rootColor).color || 'neutral',
+      variant: mergedProps.variant || getChildVariantAndColor(variant, color).variant || 'plain',
+      color: mergedProps.color || getChildVariantAndColor(variant, color).color || 'neutral',
       disableColorInversion: !!inProps.color,
     }),
     additionalProps: {
@@ -576,7 +572,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     getSlotOwnerState: (mergedProps) => ({
       size: mergedProps.size || size,
       variant: mergedProps.variant || variant,
-      color: mergedProps.color || (!mergedProps.disablePortal ? rootColor : color),
+      color: mergedProps.color || color,
       disableColorInversion: !mergedProps.disablePortal,
     }),
     additionalProps: {
@@ -636,9 +632,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     externalForwardedProps,
     ownerState,
     getSlotOwnerState: (mergedProps) => ({
-      variant:
-        mergedProps.variant || getChildVariantAndColor(variant, rootColor).variant || 'plain',
-      color: mergedProps.color || getChildVariantAndColor(variant, rootColor).color || 'neutral',
+      variant: mergedProps.variant || getChildVariantAndColor(variant, color).variant || 'plain',
+      color: mergedProps.color || getChildVariantAndColor(variant, color).color || 'neutral',
       disableColorInversion: !listboxProps.disablePortal,
     }),
     additionalProps: {
@@ -680,14 +675,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(
   let popup = null;
   if (anchorEl) {
     popup = (
-      <VariantColorProvider variant={variant} color={rootColor}>
+      <VariantColorProvider variant={variant} color={color}>
         <ListProvider nested>
           <SlotListbox
             {...listboxProps}
-            className={clsx(
-              listboxProps.className,
-              listboxProps.ownerState?.color === 'context' && autocompleteClasses.colorContext,
-            )}
+            className={clsx(listboxProps.className)}
             // @ts-ignore internal logic (too complex to typed PopperOwnProps to SlotListbox but this should be removed when we have `usePopper`)
             modifiers={modifiers}
             {...(!props.slots?.listbox && {
@@ -718,11 +710,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(
         </ListProvider>
       </VariantColorProvider>
     );
-
-    if (!listboxProps.disablePortal) {
-      // For portal popup, the children should not inherit color inversion from the upper parent.
-      popup = <ColorInversion.Provider value={undefined}>{popup}</ColorInversion.Provider>;
-    }
   }
 
   return (
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.test.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.test.tsx
index d2aa9408bbc062..2cc52aedc4263a 100644
--- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.test.tsx
+++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AutocompleteListbox, {
   autocompleteListboxClasses as classes,
@@ -30,11 +26,6 @@ describe('Joy <AutocompleteListbox />', () => {
     },
   }));
 
-  describeJoyColorInversion(<AutocompleteListbox />, {
-    muiName: 'JoyAutocompleteListbox',
-    classes,
-  });
-
   it('should have ul tag', () => {
     const { container } = render(<AutocompleteListbox />);
     expect(container.firstChild).to.have.tagName('ul');
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
index 4170a446629a1a..ca5381f029b203 100644
--- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
+++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
@@ -16,7 +16,6 @@ import {
 import listItemClasses from '../ListItem/listItemClasses';
 import listClasses from '../List/listClasses';
 import { scopedVariables } from '../List/ListProvider';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState: AutocompleteListboxOwnerState) => {
@@ -107,15 +106,13 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
     children,
     className,
     component,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     variant = 'outlined',
     size = 'md',
     slots = {},
     slotProps = {},
     ...otherProps
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
@@ -144,7 +141,7 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
   });
 
   return (
-    <VariantColorProvider variant={variant} color={colorProp}>
+    <VariantColorProvider variant={variant} color={color}>
       <SlotRoot {...rootProps}>{children}</SlotRoot>
     </VariantColorProvider>
   );
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.test.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.test.tsx
index 2e3cbd1519b956..590d7e2cbb3b6d 100644
--- a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.test.tsx
+++ b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AutocompleteOption, {
   autocompleteOptionClasses as classes,
@@ -30,8 +26,6 @@ describe('Joy <AutocompleteOption />', () => {
     },
   }));
 
-  describeJoyColorInversion(<AutocompleteOption />, { muiName: 'JoyAutocompleteOption', classes });
-
   it('should have li tag', () => {
     const { getByRole } = render(<AutocompleteOption />);
     expect(getByRole('option')).to.have.tagName('li');
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
index 85e4ceba027655..1d2f6562644a49 100644
--- a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
+++ b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
@@ -10,7 +10,6 @@ import { styled, useThemeProps } from '../styles';
 import { useVariantColor } from '../styles/variantColorInheritance';
 import { getAutocompleteOptionUtilityClass } from './autocompleteOptionClasses';
 import { AutocompleteOptionOwnerState, AutocompleteOptionTypeMap } from './AutocompleteOptionProps';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState: AutocompleteOptionOwnerState) => {
@@ -68,12 +67,10 @@ const AutocompleteOption = React.forwardRef(function AutocompleteOption(inProps,
     slotProps = {},
     ...other
   } = props;
-  const { variant = variantProp, color: inheritedColor = colorProp } = useVariantColor(
+  const { variant = variantProp, color = colorProp } = useVariantColor(
     inProps.variant,
     inProps.color,
   );
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, inheritedColor);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/Avatar/Avatar.test.tsx b/packages/mui-joy/src/Avatar/Avatar.test.tsx
index c1d9bf1be2aabf..48ca2a24a8f36a 100644
--- a/packages/mui-joy/src/Avatar/Avatar.test.tsx
+++ b/packages/mui-joy/src/Avatar/Avatar.test.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-  fireEvent,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance, fireEvent } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Avatar, { AvatarClassKey, avatarClasses as classes } from '@mui/joy/Avatar';
@@ -33,8 +28,6 @@ describe('<Avatar />', () => {
     skip: ['classesRoot', 'componentsProp'],
   }));
 
-  describeJoyColorInversion(<Avatar />, { muiName: 'JoyAvatar', classes });
-
   describe('prop: variant', () => {
     it('soft by default', () => {
       const { getByTestId } = render(<Avatar data-testid="root" />);
diff --git a/packages/mui-joy/src/Avatar/Avatar.tsx b/packages/mui-joy/src/Avatar/Avatar.tsx
index fd2eb21fa1e240..aa8f54fe1c9667 100644
--- a/packages/mui-joy/src/Avatar/Avatar.tsx
+++ b/packages/mui-joy/src/Avatar/Avatar.tsx
@@ -7,7 +7,6 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import { useThemeProps } from '../styles';
 import useSlot from '../utils/useSlot';
 import styled from '../styles/styled';
-import { useColorInversion } from '../styles/ColorInversion';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
 import { AvatarProps, AvatarOwnerState, AvatarTypeMap } from './AvatarProps';
@@ -169,9 +168,7 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
     ...other
   } = props;
   const variant = inProps.variant || groupContext?.variant || variantProp;
-  const { getColor } = useColorInversion(variant);
-  const colorFromContext = inProps.color || groupContext?.color;
-  const color = colorFromContext !== 'context' ? getColor(colorFromContext, colorProp) : colorProp;
+  const color = inProps.color || groupContext?.color || colorProp;
   const size = inProps.size || groupContext?.size || sizeProp;
 
   let children = null;
diff --git a/packages/mui-joy/src/Badge/Badge.test.tsx b/packages/mui-joy/src/Badge/Badge.test.tsx
index 672b81c87d3ae2..51d2693b54cb22 100644
--- a/packages/mui-joy/src/Badge/Badge.test.tsx
+++ b/packages/mui-joy/src/Badge/Badge.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Badge, { BadgeClassKey, BadgeOrigin, badgeClasses as classes } from '@mui/joy/Badge';
@@ -46,13 +42,6 @@ describe('<Badge />', () => {
     }),
   );
 
-  describeJoyColorInversion(
-    <Badge badgeContent="1" slotProps={{ badge: { 'data-testid': 'test-element' } }}>
-      <button />
-    </Badge>,
-    { muiName: 'JoyBadge', classes },
-  );
-
   it('renders children and badgeContent', () => {
     const children = <div id="child" data-testid="child" />;
     const badge = <div id="badge" data-testid="badge" />;
diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
index 3bff899460b790..b81f1eed1d3b68 100644
--- a/packages/mui-joy/src/Badge/Badge.tsx
+++ b/packages/mui-joy/src/Badge/Badge.tsx
@@ -6,7 +6,6 @@ import { unstable_capitalize as capitalize, usePreviousProps } from '@mui/utils'
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { BadgeProps, BadgeOwnerState, BadgeTypeMap } from './BadgeProps';
@@ -184,17 +183,22 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
   }
 
   const {
-    color: internalColor = colorProp,
+    color = colorProp,
     size = sizeProp,
     anchorOrigin = anchorOriginProp,
     variant = variantProp,
     badgeInset = badgeInsetProp,
   } = invisible ? prevProps : props;
 
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, internalColor);
-
-  const ownerState = { ...props, anchorOrigin, badgeInset, variant, invisible, color, size };
+  const ownerState = {
+    ...props,
+    anchorOrigin,
+    badgeInset,
+    variant,
+    invisible,
+    color,
+    size,
+  };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = { ...other, component, slots, slotProps };
   let displayValue =
diff --git a/packages/mui-joy/src/Button/Button.test.tsx b/packages/mui-joy/src/Button/Button.test.tsx
index 12f0a16724c096..2ff9cd065d847d 100644
--- a/packages/mui-joy/src/Button/Button.test.tsx
+++ b/packages/mui-joy/src/Button/Button.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer } from '@mui-internal/test-utils';
 import Button, { buttonClasses as classes } from '@mui/joy/Button';
 import { ThemeProvider } from '@mui/joy/styles';
 
@@ -33,8 +29,6 @@ describe('Joy <Button />', () => {
     }),
   );
 
-  describeJoyColorInversion(<Button>Button</Button>, { muiName: 'JoyButton', classes });
-
   it('by default, should render with the root, variantSolid, sizeMd and colorPrimary classes', () => {
     const { getByRole } = render(<Button>Hello World</Button>);
     const button = getByRole('button');
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
index b1077f1186525b..795a3347b50f2b 100644
--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -6,7 +6,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas
 import { Interpolation } from '@mui/system';
 import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled, Theme, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import CircularProgress from '../CircularProgress';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
@@ -108,7 +107,7 @@ export const getButtonStyles = ({
         '--Button-gap': '0.375rem',
         minHeight: 'var(--Button-minHeight, 2rem)',
         fontSize: theme.vars.fontSize.sm,
-        paddingBlock: '2px',
+        paddingBlock: '0.25rem',
         paddingInline: '0.75rem',
       }),
       ...(ownerState.size === 'md' && {
@@ -118,7 +117,7 @@ export const getButtonStyles = ({
         '--Button-gap': '0.5rem',
         minHeight: 'var(--Button-minHeight, 2.25rem)', // use min-height instead of height to make the button resilient to its content
         fontSize: theme.vars.fontSize.sm,
-        paddingBlock: '0.25rem', // the padding-block act as a minimum spacing between content and root element
+        paddingBlock: '0.375rem', // the padding-block act as a minimum spacing between content and root element
         paddingInline: '1rem',
       }),
       ...(ownerState.size === 'lg' && {
@@ -128,10 +127,11 @@ export const getButtonStyles = ({
         '--Button-gap': '0.75rem',
         minHeight: 'var(--Button-minHeight, 2.75rem)',
         fontSize: theme.vars.fontSize.md,
-        paddingBlock: '0.375rem',
+        paddingBlock: '0.5rem',
         paddingInline: '1.5rem',
       }),
       WebkitTapHighlightColor: 'transparent',
+      boxSizing: 'border-box',
       borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input
       margin: `var(--Button-margin)`, // to be controlled by other components, e.g. Input
       border: 'none',
@@ -144,7 +144,7 @@ export const getButtonStyles = ({
       textDecoration: 'none', // prevent user agent underline when used as anchor
       fontFamily: theme.vars.fontFamily.body,
       fontWeight: theme.vars.fontWeight.lg,
-      lineHeight: 1,
+      lineHeight: theme.vars.lineHeight.md,
       ...(ownerState.fullWidth && {
         width: '100%',
       }),
@@ -214,8 +214,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
 
   const variant = inProps.variant || buttonGroup.variant || variantProp;
   const size = inProps.size || buttonGroup.size || sizeProp;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, buttonGroup.color || colorProp);
+  const color = inProps.color || buttonGroup.color || colorProp;
   const disabled =
     (inProps.disabled || inProps.loading) ?? (buttonGroup.disabled || disabledProp || loading);
 
@@ -229,10 +228,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   });
 
   const loadingIndicator = loadingIndicatorProp ?? (
-    <CircularProgress
-      {...(color !== 'context' && { color })}
-      thickness={{ sm: 2, md: 3, lg: 4 }[size] || 3}
-    />
+    <CircularProgress color={color} thickness={{ sm: 2, md: 3, lg: 4 }[size] || 3} />
   );
 
   React.useImperativeHandle(
diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
index 110e772e5089ed..8dfda1b3ae7c8f 100644
--- a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
@@ -64,14 +64,15 @@ export const StyledButtonGroup = styled('div')<{ ownerState: ButtonGroupOwnerSta
         }
       },
     );
+    const outlinedStyle = theme.variants.outlined?.[ownerState.color!];
+    const outlinedDisabledStyle = theme.variants.outlinedDisabled?.[ownerState.color!];
+    const outlinedHoverStyle = theme.variants.outlinedHover?.[ownerState.color!];
 
     return [
       {
         '--ButtonGroup-separatorSize':
           ownerState.variant === 'outlined' ? '1px' : 'calc(var(--ButtonGroup-connected) * 1px)',
-        ...(ownerState.color !== 'context' && {
-          '--ButtonGroup-separatorColor': theme.vars.palette[ownerState.color!]?.outlinedBorder,
-        }),
+        '--ButtonGroup-separatorColor': outlinedStyle?.borderColor,
         '--ButtonGroup-radius': theme.vars.radius.sm,
         '--Divider-inset': '0.5rem',
         '--unstable_childRadius':
@@ -131,19 +132,14 @@ export const StyledButtonGroup = styled('div')<{ ownerState: ButtonGroupOwnerSta
           '&:not(:disabled)': {
             zIndex: 1, // to make borders appear above disabled buttons.
           },
-          ...(ownerState.color !== 'context' && {
-            '&:disabled': {
-              '--ButtonGroup-separatorColor':
-                theme.vars.palette[ownerState.color!]?.outlinedDisabledBorder,
+          '&:disabled': {
+            '--ButtonGroup-separatorColor': outlinedDisabledStyle?.borderColor,
+          },
+          ...(ownerState.variant === 'outlined' && {
+            '&:hover': {
+              '--ButtonGroup-separatorColor': outlinedHoverStyle?.borderColor,
             },
           }),
-          ...(ownerState.variant === 'outlined' &&
-            ownerState.color !== 'context' && {
-              '&:hover': {
-                '--ButtonGroup-separatorColor':
-                  theme.vars.palette[ownerState.color!]?.outlinedHoverBorder,
-              },
-            }),
           [`&:hover, ${theme.focus.selector}`]: {
             zIndex: 2, // to make borders appear above sibling.
           },
diff --git a/packages/mui-joy/src/Card/Card.test.tsx b/packages/mui-joy/src/Card/Card.test.tsx
index 88272f6688a1c5..a95e7f9a6bf134 100644
--- a/packages/mui-joy/src/Card/Card.test.tsx
+++ b/packages/mui-joy/src/Card/Card.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Card, { cardClasses as classes, CardClassKey } from '@mui/joy/Card';
@@ -30,8 +26,6 @@ describe('<Card />', () => {
     },
   }));
 
-  describeJoyColorInversion(<Card />, { muiName: 'JoyCard', classes });
-
   describe('prop: variant', () => {
     it('outlined by default', () => {
       const { getByTestId } = render(<Card data-testid="root">Hello World</Card>);
diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
index 48d3d77fbf904b..c2cf9288631133 100644
--- a/packages/mui-joy/src/Card/Card.tsx
+++ b/packages/mui-joy/src/Card/Card.tsx
@@ -9,8 +9,8 @@ import {
   unstable_isMuiElement as isMuiElement,
 } from '@mui/utils';
 import { useThemeProps } from '../styles';
+import { applySolidInversion, applySoftInversion } from '../colorInversion';
 import styled from '../styles/styled';
-import { ColorInversionProvider, useColorInversion } from '../styles/ColorInversion';
 import { getCardUtilityClass } from './cardClasses';
 import { CardProps, CardOwnerState, CardTypeMap } from './CardProps';
 import { resolveSxValue } from '../styles/styleUtils';
@@ -83,11 +83,16 @@ export const StyledCardRoot = styled('div')<{ ownerState: CardOwnerState }>(
         display: 'flex',
         flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column',
         ...theme.typography[`body-${ownerState.size!}`],
+        ...(ownerState.variant === 'solid' &&
+          ownerState.color &&
+          ownerState.invertedColors &&
+          applySolidInversion(ownerState.color)(theme)),
+        ...(ownerState.variant === 'soft' &&
+          ownerState.color &&
+          ownerState.invertedColors &&
+          applySoftInversion(ownerState.color)(theme)),
         ...theme.variants[ownerState.variant!]?.[ownerState.color!],
       } as const,
-      ownerState.color !== 'context' &&
-        ownerState.invertedColors &&
-        theme.colorInversion[ownerState.variant!]?.[ownerState.color!],
       p !== undefined && { '--Card-padding': p },
       padding !== undefined && { '--Card-padding': padding },
       borderRadius !== undefined && { '--Card-radius': borderRadius },
@@ -99,7 +104,7 @@ const CardRoot = styled(StyledCardRoot, {
   name: 'JoyCard',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})<{ ownerState: CardOwnerState }>({});
 
 /**
  *
@@ -119,7 +124,7 @@ const Card = React.forwardRef(function Card(inProps, ref) {
 
   const {
     className,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     component = 'div',
     invertedColors = false,
     size = 'md',
@@ -130,8 +135,6 @@ const Card = React.forwardRef(function Card(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
@@ -140,6 +143,7 @@ const Card = React.forwardRef(function Card(inProps, ref) {
     orientation,
     size,
     variant,
+    invertedColors,
   };
 
   const classes = useUtilityClasses(ownerState);
@@ -153,7 +157,7 @@ const Card = React.forwardRef(function Card(inProps, ref) {
     ownerState,
   });
 
-  const result = (
+  return (
     <SlotRoot {...rootProps}>
       {React.Children.map(children, (child, index) => {
         if (!React.isValidElement(child)) {
@@ -185,11 +189,6 @@ const Card = React.forwardRef(function Card(inProps, ref) {
       })}
     </SlotRoot>
   );
-
-  if (invertedColors) {
-    return <ColorInversionProvider variant={variant}>{result}</ColorInversionProvider>;
-  }
-  return result;
 }) as OverridableComponent<CardTypeMap>;
 
 Card.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
index 33619311553c68..ca34945d506f57 100644
--- a/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
+++ b/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import CardOverflow, {
@@ -33,8 +29,6 @@ describe('<CardOverflow />', () => {
     },
   }));
 
-  describeJoyColorInversion(<CardOverflow />, { muiName: 'JoyCardOverflow', classes });
-
   describe('prop: variant', () => {
     it('plain by default', () => {
       const { getByTestId } = render(<CardOverflow data-testid="root">Hello World</CardOverflow>);
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
index 17ed565de6d0dd..0303c760586743 100644
--- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
+++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
@@ -7,7 +7,6 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
-import { useColorInversion } from '../styles/ColorInversion';
 import { getCardOverflowUtilityClass } from './cardOverflowClasses';
 import {
   CardOverflowProps,
@@ -128,14 +127,12 @@ const CardOverflow = React.forwardRef(function CardOverflow(inProps, ref) {
     className,
     component = 'div',
     children,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     variant = 'plain',
     slots = {},
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.test.tsx b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
index a52ee390e075a6..5e615272322fd7 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
@@ -1,12 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  act,
-  createRenderer,
-  fireEvent,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils';
 import Checkbox, { checkboxClasses as classes } from '@mui/joy/Checkbox';
 import { ThemeProvider } from '@mui/joy/styles';
 import CloseIcon from '../internal/svg-icons/Close';
@@ -33,8 +27,6 @@ describe('<Checkbox />', () => {
     skip: ['componentProp', 'componentsProp', 'classesRoot', 'propsSpread', 'themeVariants'],
   }));
 
-  describeJoyColorInversion(<Checkbox />, { muiName: 'JoyCheckbox', classes });
-
   it('should have the classes required for Checkbox', () => {
     expect(classes).to.include.all.keys(['root', 'checked', 'disabled']);
   });
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
index 159085a3530a6e..91d0ebad97383b 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -6,7 +6,6 @@ import { unstable_useId as useId, unstable_capitalize as capitalize } from '@mui
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useSwitch } from '@mui/base/useSwitch';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
 import { CheckboxOwnerState, CheckboxTypeMap } from './CheckboxProps';
@@ -270,11 +269,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
   const activeVariant = variantProp || 'solid';
   const inactiveVariant = variantProp || 'outlined';
   const variant = isCheckboxActive ? activeVariant : inactiveVariant;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(
-    inProps.color,
-    formControl?.error ? 'danger' : formControl?.color ?? colorProp,
-  );
+  const color = inProps.color || (formControl?.error ? 'danger' : formControl?.color ?? colorProp);
 
   const activeColor = color || 'primary';
   const inactiveColor = color || 'neutral';
diff --git a/packages/mui-joy/src/Chip/Chip.test.tsx b/packages/mui-joy/src/Chip/Chip.test.tsx
index 952079d7dd80a6..35b1d18dd5147f 100644
--- a/packages/mui-joy/src/Chip/Chip.test.tsx
+++ b/packages/mui-joy/src/Chip/Chip.test.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-  fireEvent,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance, fireEvent } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Chip, { ChipClassKey, chipClasses as classes } from '@mui/joy/Chip';
@@ -39,8 +34,6 @@ describe('<Chip />', () => {
     }),
   );
 
-  describeJoyColorInversion(<Chip />, { muiName: 'JoyChip', classes });
-
   it('renders children', () => {
     const { getByText } = render(
       <Chip>
diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
index 19793643c40d7c..557126e0b5c80f 100644
--- a/packages/mui-joy/src/Chip/Chip.tsx
+++ b/packages/mui-joy/src/Chip/Chip.tsx
@@ -9,7 +9,6 @@ import { unstable_capitalize as capitalize, unstable_useId as useId } from '@mui
 import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
 import { VariantColorProvider } from '../styles/variantColorInheritance';
-import { useColorInversion } from '../styles/ColorInversion';
 import { resolveSxValue } from '../styles/styleUtils';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
 import { ChipProps, ChipOwnerState, ChipTypeMap } from './ChipProps';
@@ -224,7 +223,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const {
     children,
     className,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     onClick,
     disabled = false,
     size = 'md',
@@ -236,8 +235,6 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const clickable = !!onClick || !!slotProps.action;
   const ownerState: ChipOwnerState = {
@@ -313,7 +310,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
 
   return (
     <ChipContext.Provider value={chipContextValue}>
-      <VariantColorProvider variant={variant} color={colorProp}>
+      <VariantColorProvider variant={variant} color={color}>
         <SlotRoot {...rootProps}>
           {clickable && <SlotAction {...actionProps} />}
 
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
index b6ff05e0483838..d10ee7b52b5a70 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
+++ b/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-  act,
-  fireEvent,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance, act, fireEvent } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Chip from '@mui/joy/Chip';
 import ChipDelete, { chipDeleteClasses as classes } from '@mui/joy/ChipDelete';
@@ -33,8 +27,6 @@ describe('<ChipDelete />', () => {
     },
   }));
 
-  describeJoyColorInversion(<ChipDelete />, { muiName: 'JoyChipDelete', classes });
-
   describe('Chip context', () => {
     it('disabled', () => {
       const { getByRole } = render(
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
index 162e729b5e4b7c..e08d729e3e16f2 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
+++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
@@ -8,7 +8,6 @@ import { useButton } from '@mui/base/useButton';
 import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
 import { useVariantColor } from '../styles/variantColorInheritance';
-import { useColorInversion } from '../styles/ColorInversion';
 import Cancel from '../internal/svg-icons/Cancel';
 import { getChipDeleteUtilityClass } from './chipDeleteClasses';
 import { ChipDeleteProps, ChipDeleteOwnerState, ChipDeleteTypeMap } from './ChipDeleteProps';
@@ -83,8 +82,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
     inProps.color,
     true,
   );
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, inheritedColor);
+  const color = inProps.color || inheritedColor;
   const disabled = disabledProp ?? chipContext.disabled;
 
   const buttonRef = React.useRef<HTMLElement>(null);
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
index 8316f1454bb014..bc2b03624d0c32 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import CircularProgress, { circularProgressClasses as classes } from '@mui/joy/CircularProgress';
@@ -38,8 +34,6 @@ describe('<CircularProgress />', () => {
     skip: ['classesRoot', 'componentsProp'],
   }));
 
-  describeJoyColorInversion(<CircularProgress />, { muiName: 'JoyCircularProgress', classes });
-
   describe('prop: determinate', () => {
     it('should render a determinate circular progress', () => {
       const { getByRole } = render(<CircularProgress determinate />);
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
index d53022c549a2a8..7b71e59c98ab72 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -8,7 +8,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { css, keyframes } from '@mui/system';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 import {
@@ -213,7 +212,7 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   const {
     children,
     className,
-    color: colorProp = 'primary',
+    color = 'primary',
     size = 'md',
     variant = 'soft',
     thickness,
@@ -224,8 +223,6 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx
index 9f94fa89bc3b03..d6c1571c3bf112 100644
--- a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx
+++ b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx
@@ -1,10 +1,10 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/system';
+import GlobalStyles from '../GlobalStyles';
+import defaultTheme from '../styles/defaultTheme';
 import { Theme, DefaultColorScheme, ColorSystem } from '../styles/types';
 import { Components } from '../styles/components';
-import defaultTheme from '../styles/defaultTheme';
 import { CssBaselineProps } from './CssBaselineProps';
 
 /**
diff --git a/packages/mui-joy/src/DialogTitle/DialogTitle.tsx b/packages/mui-joy/src/DialogTitle/DialogTitle.tsx
index 45c3a04bba3a40..8fb74285138d3b 100644
--- a/packages/mui-joy/src/DialogTitle/DialogTitle.tsx
+++ b/packages/mui-joy/src/DialogTitle/DialogTitle.tsx
@@ -6,7 +6,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
 import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
-import { useColorInversion } from '../styles/ColorInversion';
 import { getDialogTitleUtilityClass } from './dialogTitleClasses';
 import { DialogTitleProps, DialogTitleOwnerState, DialogTitleTypeMap } from './DialogTitleProps';
 import cardOverflowClasses from '../CardOverflow/cardOverflowClasses';
@@ -89,8 +88,7 @@ const DialogTitle = React.forwardRef(function DialogTitle(inProps, ref) {
     ...other
   } = props;
 
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, variant ? colorProp ?? 'neutral' : colorProp);
+  const color = inProps.color || (variant ? colorProp ?? 'neutral' : colorProp);
 
   const externalForwardedProps = { ...other, component, slots, slotProps };
 
diff --git a/packages/mui-joy/src/Drawer/Drawer.tsx b/packages/mui-joy/src/Drawer/Drawer.tsx
index 80d5570da4faa2..c5b365418f8172 100644
--- a/packages/mui-joy/src/Drawer/Drawer.tsx
+++ b/packages/mui-joy/src/Drawer/Drawer.tsx
@@ -11,7 +11,8 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import { Portal } from '@mui/base/Portal';
 import { FocusTrap } from '@mui/base/FocusTrap';
-import { useThemeProps, styled, ColorInversionProvider, useColorInversion } from '../styles';
+import { useThemeProps, styled } from '../styles';
+import { applySoftInversion, applySolidInversion } from '../colorInversion';
 import { StyledModalBackdrop, StyledModalRoot } from '../Modal/Modal';
 import CloseModalContext from '../Modal/CloseModalContext';
 import useSlot from '../utils/useSlot';
@@ -43,7 +44,7 @@ const DrawerRoot = styled(StyledModalRoot as unknown as 'div', {
   name: 'JoyDrawer',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: DrawerOwnerState }>(({ ownerState }) => ({
+})<{ ownerState: DrawerOwnerState }>(({ ownerState, theme }) => ({
   '--Drawer-transitionDuration': '0.3s',
   '--Drawer-transitionFunction': 'ease',
   '--ModalClose-radius':
@@ -71,6 +72,15 @@ const DrawerRoot = styled(StyledModalRoot as unknown as 'div', {
   ...(!ownerState.open && {
     visibility: 'hidden',
   }),
+  ...(ownerState.variant === 'solid' &&
+    ownerState.color &&
+    ownerState.invertedColors &&
+    applySolidInversion(ownerState.color)(theme)),
+  ...(ownerState.variant === 'soft' &&
+    ownerState.color &&
+    ownerState.invertedColors &&
+    applySoftInversion(ownerState.color)(theme)),
+  ...theme.variants[ownerState.variant!]?.[ownerState.color!],
 }));
 
 const DrawerBackdrop = styled(StyledModalBackdrop as unknown as 'div', {
@@ -155,7 +165,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     disableRestoreFocus = false,
     disableScrollLock = false,
     hideBackdrop = false,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     variant = 'plain',
     invertedColors = false,
     size = 'md',
@@ -168,9 +178,6 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     ...other
   } = props;
 
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
-
   const ownerState = {
     ...props,
     anchor,
@@ -181,6 +188,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     disableRestoreFocus,
     disableScrollLock,
     hideBackdrop,
+    invertedColors,
     color,
     variant,
     size,
@@ -198,7 +206,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   const labelledBy = useId();
   const describedBy = useId();
   const contextValue = React.useMemo(
-    () => ({ variant, color: color === 'context' ? undefined : color, labelledBy, describedBy }),
+    () => ({ variant, color, labelledBy, describedBy }),
     [color, variant, labelledBy, describedBy],
   );
 
@@ -233,7 +241,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     ownerState,
   });
 
-  const result = (
+  return (
     <CloseModalContext.Provider value={onClose}>
       <ModalDialogSizeContext.Provider value={size}>
         <ModalDialogVariantColorContext.Provider value={contextValue}>
@@ -261,11 +269,6 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
       </ModalDialogSizeContext.Provider>
     </CloseModalContext.Provider>
   );
-
-  if (invertedColors) {
-    return <ColorInversionProvider variant={variant}>{result}</ColorInversionProvider>;
-  }
-  return result;
 }) as OverridableComponent<DrawerTypeMap>;
 
 Drawer.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-joy/src/FormControl/FormControl.tsx b/packages/mui-joy/src/FormControl/FormControl.tsx
index 73ac96bb0ff231..e44bfb5e0e0d56 100644
--- a/packages/mui-joy/src/FormControl/FormControl.tsx
+++ b/packages/mui-joy/src/FormControl/FormControl.tsx
@@ -60,20 +60,16 @@ export const FormControlRoot = styled('div', {
     '--FormHelperText-fontSize': theme.vars.fontSize.sm,
     '--FormHelperText-lineHeight': theme.vars.lineHeight.sm,
   }),
-  ...(ownerState.color &&
-    ownerState.color !== 'context' && {
-      '--FormHelperText-color': theme.vars.palette[ownerState.color]?.[500],
-    }),
+  ...(ownerState.color && {
+    '--FormHelperText-color': theme.vars.palette[ownerState.color]?.[500],
+  }),
   '--FormHelperText-margin': '0.375rem 0 0 0',
   [`&.${formControlClasses.error}`]: {
     '--FormHelperText-color': theme.vars.palette.danger[500],
   },
   [`&.${formControlClasses.disabled}`]: {
-    ...(ownerState.color !== 'context' && {
-      '--FormLabel-color': theme.vars.palette[ownerState.color || 'neutral']?.plainDisabledColor,
-      '--FormHelperText-color':
-        theme.vars.palette[ownerState.color || 'neutral']?.plainDisabledColor,
-    }),
+    '--FormLabel-color': theme.variants.plainDisabled?.[ownerState.color || 'neutral']?.color,
+    '--FormHelperText-color': theme.variants.plainDisabled?.[ownerState.color || 'neutral']?.color,
   },
   display: 'flex',
   position: 'relative', // for keeping the control action area, e.g. Switch
diff --git a/packages/mui-joy/src/IconButton/IconButton.test.tsx b/packages/mui-joy/src/IconButton/IconButton.test.tsx
index 358c1fb4e89a80..b7a76e2ad9e583 100644
--- a/packages/mui-joy/src/IconButton/IconButton.test.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer } from '@mui-internal/test-utils';
 import IconButton, { iconButtonClasses as classes } from '@mui/joy/IconButton';
 import { ThemeProvider } from '@mui/joy/styles';
 
@@ -25,8 +21,6 @@ describe('Joy <IconButton />', () => {
     skip: ['propsSpread', 'componentsProp', 'classesRoot'],
   }));
 
-  describeJoyColorInversion(<IconButton />, { muiName: 'JoyIconButton', classes });
-
   it('by default, should render with the root, variantPlain, sizeMd and colorNeutral classes', () => {
     const { getByRole } = render(<IconButton>Hello World</IconButton>);
     const button = getByRole('button');
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 8a169ab2d456c1..3a9513bf260353 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -5,7 +5,6 @@ import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef }
 import { useButton } from '@mui/base/useButton';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import { getIconButtonUtilityClass } from './iconButtonClasses';
 import { IconButtonOwnerState, IconButtonTypeMap, ExtendIconButton } from './IconButtonProps';
@@ -143,8 +142,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
   const buttonGroup = React.useContext(ButtonGroupContext);
   const variant = inProps.variant || buttonGroup.variant || variantProp;
   const size = inProps.size || buttonGroup.size || sizeProp;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, buttonGroup.color || colorProp);
+  const color = inProps.color || buttonGroup.color || colorProp;
   const disabled = inProps.disabled ?? (buttonGroup.disabled || disabledProp);
 
   const buttonRef = React.useRef<HTMLElement>(null);
diff --git a/packages/mui-joy/src/Input/Input.test.tsx b/packages/mui-joy/src/Input/Input.test.tsx
index 839ab09b864861..0cf5aaccba0c4f 100644
--- a/packages/mui-joy/src/Input/Input.test.tsx
+++ b/packages/mui-joy/src/Input/Input.test.tsx
@@ -3,7 +3,6 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import {
   describeConformance,
-  describeJoyColorInversion,
   createRenderer,
   screen,
   act,
@@ -33,8 +32,6 @@ describe('Joy <Input />', () => {
     skip: ['propsSpread', 'componentsProp', 'classesRoot'],
   }));
 
-  describeJoyColorInversion(<Input />, { muiName: 'JoyInput', classes });
-
   it('should have placeholder', () => {
     const { getByPlaceholderText } = render(<Input placeholder="Placeholder" />);
     expect(getByPlaceholderText('Placeholder')).toBeVisible();
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index d925e827bf5496..00789d7dded579 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -5,11 +5,11 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import { InputTypeMap, InputProps, InputOwnerState } from './InputProps';
 import inputClasses, { getInputUtilityClass } from './inputClasses';
 import useForwardedInput from './useForwardedInput';
+import { INVERTED_COLORS_ATTR } from '../colorInversion/colorInversionUtils';
 
 const useUtilityClasses = (ownerState: InputOwnerState) => {
   const { disabled, fullWidth, variant, color, size } = ownerState;
@@ -43,16 +43,17 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
         '--Input-decoratorColor': theme.vars.palette.text.icon,
         '--Input-focused': '0',
         '--Input-focusedThickness': theme.vars.focus.thickness,
-        ...(ownerState.color === 'context'
-          ? {
-              '--Input-focusedHighlight': theme.vars.palette.focusVisible,
-            }
-          : {
-              '--Input-focusedHighlight':
-                theme.vars.palette[
-                  ownerState.color === 'neutral' ? 'primary' : ownerState.color!
-                ]?.[500],
-            }),
+        '--Input-focusedHighlight':
+          theme.vars.palette[ownerState.color === 'neutral' ? 'primary' : ownerState.color!]?.[500],
+        [`&:not([${INVERTED_COLORS_ATTR}])`]: {
+          ...(ownerState.instanceColor && {
+            '--_Input-focusedHighlight':
+              theme.vars.palette[
+                ownerState.instanceColor === 'neutral' ? 'primary' : ownerState.instanceColor
+              ]?.[500],
+          }),
+          '--Input-focusedHighlight': `var(--_Input-focusedHighlight, ${theme.vars.palette.focusVisible})`,
+        },
         ...(ownerState.size === 'sm' && {
           '--Input-minHeight': '2rem',
           '--Input-paddingInline': '0.5rem',
@@ -280,10 +281,10 @@ const Input = React.forwardRef(function Input(inProps, ref) {
 
   const error = inProps.error ?? formControl?.error ?? errorProp;
   const size = inProps.size ?? formControl?.size ?? sizeProp;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, error ? 'danger' : formControl?.color ?? colorProp);
+  const color = inProps.color ?? (error ? 'danger' : formControl?.color ?? colorProp);
 
   const ownerState = {
+    instanceColor: error ? 'danger' : inProps.color,
     ...props,
     fullWidth,
     color,
diff --git a/packages/mui-joy/src/Input/InputProps.ts b/packages/mui-joy/src/Input/InputProps.ts
index e19444406e535f..390029ee5aeea9 100644
--- a/packages/mui-joy/src/Input/InputProps.ts
+++ b/packages/mui-joy/src/Input/InputProps.ts
@@ -124,4 +124,8 @@ export interface InputOwnerState extends ApplyColorInversion<InputProps> {
    * If `true`, the input is focused.
    */
   focused: boolean;
+  /**
+   * @internal
+   */
+  instanceColor?: OverridableStringUnion<ColorPaletteProp, InputPropsColorOverrides>;
 }
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
index 1cdac10d1daab2..5a976b191e5386 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import LinearProgress, { linearProgressClasses as classes } from '@mui/joy/LinearProgress';
@@ -28,8 +24,6 @@ describe('<LinearProgress />', () => {
     },
   }));
 
-  describeJoyColorInversion(<LinearProgress />, { muiName: 'JoyLinearProgress', classes });
-
   describe('prop: determinate', () => {
     it('should render a determinate circular progress', () => {
       const { getByRole } = render(<LinearProgress determinate />);
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
index af9fa127fda8a0..ee7d2d03f8ec9b 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -8,7 +8,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { css, keyframes } from '@mui/system';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { useColorInversion } from '../styles/ColorInversion';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
 import {
   LinearProgressOwnerState,
@@ -167,7 +166,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
     children,
     className,
     component,
-    color: colorProp = 'primary',
+    color = 'primary',
     size = 'md',
     variant = 'soft',
     thickness,
@@ -178,8 +177,6 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/Link/Link.test.tsx b/packages/mui-joy/src/Link/Link.test.tsx
index f5ec486606602e..5271fe9a682422 100644
--- a/packages/mui-joy/src/Link/Link.test.tsx
+++ b/packages/mui-joy/src/Link/Link.test.tsx
@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { SinonSpy, spy } from 'sinon';
-import {
-  act,
-  createRenderer,
-  fireEvent,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import Link, { LinkClassKey, linkClasses as classes } from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
@@ -46,8 +40,6 @@ describe('<Link />', () => {
     }),
   );
 
-  describeJoyColorInversion(<Link href="/" variant="soft" />, { muiName: 'JoyLink', classes });
-
   it('should render children', () => {
     const { queryByText } = render(<Link href="/">Home</Link>);
 
diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index d2dfc19f4c69db..c3f813d60ddac1 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -12,7 +12,6 @@ import {
 import { unstable_extendSxProp as extendSxProp } from '@mui/system';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
 import { LinkProps, LinkOwnerState, LinkTypeMap } from './LinkProps';
@@ -109,11 +108,9 @@ const LinkRoot = styled('a', {
       borderRadius: theme.vars.radius.xs,
       padding: 0, // Remove the padding in Firefox
       cursor: 'pointer',
-      ...(ownerState.color !== 'context' && {
-        textDecorationColor: `rgba(${
-          theme.vars.palette[ownerState.color!]?.mainChannel
-        } / var(--Link-underlineOpacity, 0.72))`,
-      }),
+      textDecorationColor: `var(--variant-outlinedBorder, rgba(${
+        theme.vars.palette[ownerState.color!]?.mainChannel
+      } / var(--Link-underlineOpacity, 0.72)))`,
       ...(ownerState.variant
         ? {
             paddingBlock: 'min(0.1em, 4px)',
@@ -123,14 +120,14 @@ const LinkRoot = styled('a', {
             }),
           }
         : {
-            ...(ownerState.color !== 'context' && {
-              color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 1)`,
-            }),
+            color: `var(--variant-plainColor, rgba(${
+              theme.vars.palette[ownerState.color!]?.mainChannel
+            } / 1))`,
             [`&.${linkClasses.disabled}`]: {
               pointerEvents: 'none',
-              ...(ownerState.color !== 'context' && {
-                color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 0.6)`,
-              }),
+              color: `var(--variant-plainDisabledColor, rgba(${
+                theme.vars.palette[ownerState.color!]?.mainChannel
+              } / 0.6))`,
             },
           }),
       userSelect: 'none',
@@ -183,7 +180,7 @@ const LinkRoot = styled('a', {
  */
 const Link = React.forwardRef(function Link(inProps, ref) {
   const {
-    color: colorProp = 'primary',
+    color = 'primary',
     textColor,
     variant,
     ...themeProps
@@ -192,8 +189,6 @@ const Link = React.forwardRef(function Link(inProps, ref) {
     name: 'JoyLink',
   });
 
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
   const nesting = React.useContext(TypographyNestedContext);
   const inheriting = React.useContext(TypographyInheritContext);
 
diff --git a/packages/mui-joy/src/List/List.test.tsx b/packages/mui-joy/src/List/List.test.tsx
index 5959b877d3619f..8fe2fa12f5b6a2 100644
--- a/packages/mui-joy/src/List/List.test.tsx
+++ b/packages/mui-joy/src/List/List.test.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  screen,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import List, { listClasses as classes } from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
@@ -34,8 +29,6 @@ describe('Joy <List />', () => {
     },
   }));
 
-  describeJoyColorInversion(<List />, { muiName: 'JoyList', classes });
-
   it('should have root className', () => {
     const { container } = render(<List />);
     expect(container.firstChild).to.have.class(classes.root);
diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
index 19eb0bec8922d3..7f411c1f56ea49 100644
--- a/packages/mui-joy/src/List/List.tsx
+++ b/packages/mui-joy/src/List/List.tsx
@@ -7,7 +7,7 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { styled, useThemeProps } from '../styles';
 import { resolveSxValue } from '../styles/styleUtils';
-import { useColorInversion } from '../styles/ColorInversion';
+
 import { ListProps, ListOwnerState, ListTypeMap } from './ListProps';
 import { getListUtilityClass } from './listClasses';
 import NestedListContext from './NestedListContext';
@@ -184,14 +184,12 @@ const List = React.forwardRef(function List(inProps, ref) {
     orientation = 'vertical',
     wrap = false,
     variant = 'plain',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     role: roleProp,
     slots = {},
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
   const size = sizeProp || (inProps.size ?? 'md');
 
   let role;
diff --git a/packages/mui-joy/src/ListItem/ListItem.test.tsx b/packages/mui-joy/src/ListItem/ListItem.test.tsx
index 9275155bcfbd99..e627bc6fa25599 100644
--- a/packages/mui-joy/src/ListItem/ListItem.test.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.test.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  screen,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import MenuList from '@mui/joy/MenuList';
 import List from '@mui/joy/List';
@@ -32,8 +27,6 @@ describe('Joy <ListItem />', () => {
     skip: ['componentsProp', 'classesRoot'],
   }));
 
-  describeJoyColorInversion(<ListItem />, { muiName: 'JoyListItem', classes });
-
   it('should have root className', () => {
     const { container } = render(<ListItem />);
     expect(container.firstChild).to.have.class(classes.root);
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
index 69f0a1ed3e8d0d..9b49c821c9c832 100644
--- a/packages/mui-joy/src/ListItem/ListItem.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -9,7 +9,7 @@ import {
 import { OverridableComponent } from '@mui/types';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
+
 import useSlot from '../utils/useSlot';
 import { ListItemOwnerState, ListItemTypeMap } from './ListItemProps';
 import { getListItemUtilityClass } from './listItemClasses';
@@ -170,7 +170,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
     nested = false,
     sticky = false,
     variant = 'plain',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     startAction,
     endAction,
     role: roleProp,
@@ -178,8 +178,6 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const [subheaderId, setSubheaderId] = React.useState('');
 
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
index 4d84724100881f..22b43ce0f88bef 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
@@ -1,12 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  describeJoyColorInversion,
-  createRenderer,
-  act,
-  fireEvent,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer, act, fireEvent } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ListItemButton, { listItemButtonClasses as classes } from '@mui/joy/ListItemButton';
 
@@ -30,8 +24,6 @@ describe('Joy <ListItemButton />', () => {
     },
   }));
 
-  describeJoyColorInversion(<ListItemButton />, { muiName: 'JoyListItemButton', classes });
-
   it('should render with the selected class', () => {
     const { getByRole } = render(<ListItemButton selected />);
     expect(getByRole('button')).to.have.class(classes.selected);
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
index fce1b49843a663..a9712b5cb8a584 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
@@ -6,7 +6,7 @@ import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef }
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { useButton } from '@mui/base/useButton';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
+
 import {
   ListItemButtonOwnerState,
   ExtendListItemButton,
@@ -146,16 +146,13 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
     orientation = 'horizontal',
     role,
     selected = false,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     variant = 'plain',
     slots = {},
     slotProps = {},
     ...other
   } = props;
 
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
-
   const buttonRef = React.useRef<HTMLElement>(null);
   const handleRef = useForkRef(buttonRef, ref);
 
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
index 0e406e20ed9473..b49ab8229acd86 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  describeConformance,
-  createRenderer,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ListSubheader, { listSubheaderClasses as classes } from '@mui/joy/ListSubheader';
 import ListSubheaderDispatch from './ListSubheaderContext';
@@ -30,11 +26,6 @@ describe('Joy <ListSubheader />', () => {
     },
   }));
 
-  describeJoyColorInversion(<ListSubheader variant="soft" />, {
-    muiName: 'JoyListSubheader',
-    classes,
-  });
-
   it('should have root className', () => {
     const { container } = render(<ListSubheader />);
     expect(container.firstChild).to.have.class(classes.root);
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
index 2994fe22581af7..489946b6bbf73b 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
@@ -6,11 +6,11 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import { ListSubheaderOwnerState, ListSubheaderTypeMap } from './ListSubheaderProps';
 import { getListSubheaderUtilityClass } from './listSubheaderClasses';
 import ListSubheaderDispatch from './ListSubheaderContext';
 import useSlot from '../utils/useSlot';
+import { INVERTED_COLORS_ATTR } from '../colorInversion/colorInversionUtils';
 
 const useUtilityClasses = (ownerState: ListSubheaderOwnerState) => {
   const { variant, color, sticky } = ownerState;
@@ -49,10 +49,14 @@ const ListSubheaderRoot = styled('div', {
     zIndex: 1,
     background: 'var(--ListItem-stickyBackground)',
   }),
-  color:
-    ownerState.color && ownerState.color !== 'context'
-      ? `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 1)`
-      : theme.vars.palette.text.tertiary,
+  color: ownerState.color
+    ? `var(--_Link-color, rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 1))`
+    : theme.vars.palette.text.tertiary,
+  ...(ownerState.instanceColor && {
+    [`&:not([${INVERTED_COLORS_ATTR}])`]: {
+      '--_Link-color': theme.vars.palette.text.secondary,
+    },
+  }),
   ...theme.variants[ownerState.variant!]?.[ownerState.color!],
 }));
 /**
@@ -78,13 +82,11 @@ const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) {
     id: idOverride,
     sticky = false,
     variant,
-    color: colorProp,
+    color,
     slots = {},
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
   const id = useId(idOverride);
   const setSubheaderId = React.useContext(ListSubheaderDispatch);
 
@@ -95,6 +97,7 @@ const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) {
   }, [setSubheaderId, id]);
 
   const ownerState = {
+    instanceColor: inProps.color,
     ...props,
     id,
     sticky,
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheaderProps.ts b/packages/mui-joy/src/ListSubheader/ListSubheaderProps.ts
index c372583eb5d884..9bda3152718767 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheaderProps.ts
+++ b/packages/mui-joy/src/ListSubheader/ListSubheaderProps.ts
@@ -57,4 +57,9 @@ export type ListSubheaderProps<
   },
 > = OverrideProps<ListSubheaderTypeMap<P, D>, D>;
 
-export interface ListSubheaderOwnerState extends ApplyColorInversion<ListSubheaderProps> {}
+export interface ListSubheaderOwnerState extends ApplyColorInversion<ListSubheaderProps> {
+  /**
+   * @internal
+   */
+  instanceColor?: OverridableStringUnion<ColorPaletteProp, ListSubheaderColorOverrides>;
+}
diff --git a/packages/mui-joy/src/Menu/Menu.test.tsx b/packages/mui-joy/src/Menu/Menu.test.tsx
index 143b191faab91e..13221bcafb8d49 100644
--- a/packages/mui-joy/src/Menu/Menu.test.tsx
+++ b/packages/mui-joy/src/Menu/Menu.test.tsx
@@ -7,7 +7,6 @@ import {
   describeConformance,
   screen,
   fireEvent,
-  describeJoyColorInversion,
 } from '@mui-internal/test-utils';
 import { Popper as PopperUnstyled } from '@mui/base/Popper';
 import { DropdownContext, DropdownContextValue } from '@mui/base/useDropdown';
@@ -62,15 +61,6 @@ describe('Joy <Menu />', () => {
   const anchorEl = document.createElement('div');
   anchorEl.setAttribute('aria-controls', 'test');
 
-  describeJoyColorInversion(
-    <Menu open disablePortal anchorEl={() => anchorEl} data-testid="test-element" />,
-    {
-      muiName: 'JoyMenu',
-      classes,
-      portalSlot: 'root',
-    },
-  );
-
   it('should render with `ul` by default', () => {
     render(<Menu anchorEl={anchorEl} open data-testid="popover" />);
     expect(screen.getByTestId('popover')).to.have.tagName('ul');
diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx
index e8f219ed3a4ef3..7cd1f5b16d96dd 100644
--- a/packages/mui-joy/src/Menu/Menu.tsx
+++ b/packages/mui-joy/src/Menu/Menu.tsx
@@ -12,11 +12,8 @@ import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
 import GroupListContext from '../List/GroupListContext';
 import { styled, useThemeProps } from '../styles';
+import { applySolidInversion, applySoftInversion } from '../colorInversion';
 import { VariantColorProvider } from '../styles/variantColorInheritance';
-import ColorInversion, {
-  ColorInversionProvider,
-  useColorInversion,
-} from '../styles/ColorInversion';
 import { MenuTypeMap, MenuOwnerState } from './MenuProps';
 import { getMenuUtilityClass } from './menuClasses';
 import { ListOwnerState } from '../List';
@@ -60,10 +57,16 @@ const MenuRoot = styled(StyledList, {
       ...(!variantStyle?.backgroundColor && {
         backgroundColor: theme.vars.palette.background.popup,
       }),
+      ...(ownerState.variant === 'solid' &&
+        ownerState.color &&
+        ownerState.invertedColors &&
+        applySolidInversion(ownerState.color)(theme)),
+      ...(ownerState.variant === 'soft' &&
+        ownerState.color &&
+        ownerState.invertedColors &&
+        applySoftInversion(ownerState.color)(theme)),
+      ...theme.variants[ownerState.variant!]?.[ownerState.color!],
     },
-    ownerState.color !== 'context' &&
-      ownerState.invertedColors &&
-      theme.colorInversion[ownerState.variant!]?.[ownerState.color!],
   ];
 });
 
@@ -87,7 +90,7 @@ const Menu = React.forwardRef(function Menu(inProps, ref: React.ForwardedRef<HTM
   const {
     actions,
     children,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     component,
     disablePortal = false,
     keepMounted = false,
@@ -101,8 +104,6 @@ const Menu = React.forwardRef(function Menu(inProps, ref: React.ForwardedRef<HTM
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = disablePortal ? getColor(inProps.color, colorProp) : colorProp;
 
   const { contextValue, getListboxProps, dispatch, open, triggerElement } = useMenu({
     onItemsChange,
@@ -163,22 +164,7 @@ const Menu = React.forwardRef(function Menu(inProps, ref: React.ForwardedRef<HTM
     className: classes.root,
   });
 
-  let result = (
-    <MenuProvider value={contextValue}>
-      {/* If `invertedColors` is true, let the children use their default variant */}
-      <VariantColorProvider variant={invertedColors ? undefined : variant} color={colorProp}>
-        <GroupListContext.Provider value="menu">
-          <ListProvider nested>{children}</ListProvider>
-        </GroupListContext.Provider>
-      </VariantColorProvider>
-    </MenuProvider>
-  );
-
-  if (invertedColors) {
-    result = <ColorInversionProvider variant={variant}>{result}</ColorInversionProvider>;
-  }
-
-  result = (
+  return (
     <MenuRoot
       {...rootProps}
       {...(!props.slots?.root && {
@@ -188,16 +174,16 @@ const Menu = React.forwardRef(function Menu(inProps, ref: React.ForwardedRef<HTM
         },
       })}
     >
-      {result}
+      <MenuProvider value={contextValue}>
+        {/* If `invertedColors` is true, let the children use their default variant */}
+        <VariantColorProvider variant={invertedColors ? undefined : variant} color={color}>
+          <GroupListContext.Provider value="menu">
+            <ListProvider nested>{children}</ListProvider>
+          </GroupListContext.Provider>
+        </VariantColorProvider>
+      </MenuProvider>
     </MenuRoot>
   );
-
-  return disablePortal ? (
-    result
-  ) : (
-    // For portal popup, the children should not inherit color inversion from the upper parent.
-    <ColorInversion.Provider value={undefined}>{result}</ColorInversion.Provider>
-  );
 }) as OverridableComponent<MenuTypeMap>;
 
 Menu.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-joy/src/MenuButton/MenuButton.tsx b/packages/mui-joy/src/MenuButton/MenuButton.tsx
index 4b6522d4cba035..b5f5dfae77b7d1 100644
--- a/packages/mui-joy/src/MenuButton/MenuButton.tsx
+++ b/packages/mui-joy/src/MenuButton/MenuButton.tsx
@@ -15,7 +15,7 @@ import useThemeProps from '../styles/useThemeProps';
 import useSlot from '../utils/useSlot';
 import CircularProgress from '../CircularProgress';
 import { getButtonStyles } from '../Button/Button';
-import { styled, useColorInversion } from '../styles';
+import { styled } from '../styles';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 
 const useUtilityClasses = (ownerState: MenuButtonOwnerState) => {
@@ -103,7 +103,7 @@ const MenuButton = React.forwardRef(function MenuButton(
 
   const {
     children,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     component,
     disabled: disabledProp = false,
     endDecorator,
@@ -121,17 +121,12 @@ const MenuButton = React.forwardRef(function MenuButton(
 
   const variant = inProps.variant || buttonGroup.variant || variantProp;
   const size = inProps.size || buttonGroup.size || sizeProp;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, buttonGroup.color || colorProp);
   const disabled = inProps.disabled ?? (buttonGroup.disabled || disabledProp || loading);
 
   const { getRootProps, open, active } = useMenuButton({ rootRef: forwardedRef, disabled });
 
   const loadingIndicator = loadingIndicatorProp ?? (
-    <CircularProgress
-      {...(color !== 'context' && { color })}
-      thickness={{ sm: 2, md: 3, lg: 4 }[size] || 3}
-    />
+    <CircularProgress color={color} thickness={{ sm: 2, md: 3, lg: 4 }[size] || 3} />
   );
 
   const ownerState: MenuButtonOwnerState = {
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
index 3bce808e700b04..c41f510db2c588 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
+++ b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
@@ -7,7 +7,6 @@ import {
   createRenderer,
   fireEvent,
   screen,
-  describeJoyColorInversion,
 } from '@mui-internal/test-utils';
 import { MenuProvider, MenuProviderValue } from '@mui/base/useMenu';
 import { ThemeProvider } from '@mui/joy/styles';
@@ -64,12 +63,6 @@ describe('Joy <MenuItem />', () => {
     },
   }));
 
-  describeJoyColorInversion(<MenuItem />, {
-    muiName: 'JoyMenuItem',
-    classes,
-    wrapper: (node) => <MenuProvider value={testContext}>{node}</MenuProvider>,
-  });
-
   it('should render with the variant class', () => {
     const { getByRole } = render(<MenuItem variant="outlined" />);
     expect(getByRole('menuitem')).to.have.class(classes.variantOutlined);
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.tsx b/packages/mui-joy/src/MenuItem/MenuItem.tsx
index 1eff87a1cbdddc..d1ce24622802f0 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.tsx
+++ b/packages/mui-joy/src/MenuItem/MenuItem.tsx
@@ -6,7 +6,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas
 import { useMenuItem } from '@mui/base/useMenuItem';
 import { StyledListItemButton } from '../ListItemButton/ListItemButton';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import { useVariantColor } from '../styles/variantColorInheritance';
 import { getMenuItemUtilityClass } from './menuItemClasses';
 import { MenuItemOwnerState, ExtendMenuItem, MenuItemTypeMap } from './MenuItemProps';
@@ -68,12 +67,10 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { variant = variantProp, color: inheritedColor = colorProp } = useVariantColor(
+  const { variant = variantProp, color = colorProp } = useVariantColor(
     inProps.variant,
     inProps.color,
   );
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, inheritedColor);
 
   const { getRootProps, disabled, focusVisible } = useMenuItem({
     disabled: disabledProp,
diff --git a/packages/mui-joy/src/MenuList/MenuList.test.tsx b/packages/mui-joy/src/MenuList/MenuList.test.tsx
index a95592b17bc4b3..a34765831c5d4f 100644
--- a/packages/mui-joy/src/MenuList/MenuList.test.tsx
+++ b/packages/mui-joy/src/MenuList/MenuList.test.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  screen,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import MenuList, { menuListClasses as classes } from '@mui/joy/MenuList';
 
@@ -29,8 +24,6 @@ describe('Joy <MenuList />', () => {
     },
   }));
 
-  describeJoyColorInversion(<MenuList />, { muiName: 'JoyMenuList', classes });
-
   it('should have root className', () => {
     const { container } = render(<MenuList />);
     expect(container.firstChild).to.have.class(classes.root);
diff --git a/packages/mui-joy/src/MenuList/MenuList.tsx b/packages/mui-joy/src/MenuList/MenuList.tsx
index 5e0f46e8c0540b..6ea40711086783 100644
--- a/packages/mui-joy/src/MenuList/MenuList.tsx
+++ b/packages/mui-joy/src/MenuList/MenuList.tsx
@@ -7,7 +7,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas
 import { useMenu, MenuProvider } from '@mui/base/useMenu';
 import { ListActionTypes } from '@mui/base/useList';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
 import GroupListContext from '../List/GroupListContext';
@@ -73,14 +72,12 @@ const MenuList = React.forwardRef(function MenuList(inProps, ref) {
     children,
     size = 'md',
     variant = 'outlined',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     onItemsChange,
     slots = {},
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const {
     contextValue: menuContextValue,
diff --git a/packages/mui-joy/src/ModalClose/ModalClose.test.tsx b/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
index 4bd68b15827b79..983515365110b1 100644
--- a/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
+++ b/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-  fireEvent,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance, fireEvent } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Modal from '@mui/joy/Modal';
@@ -32,8 +27,6 @@ describe('<ModalClose />', () => {
     },
   }));
 
-  describeJoyColorInversion(<ModalClose />, { muiName: 'JoyModalClose', classes });
-
   describe('prop: variant', () => {
     it('plain by default', () => {
       const { getByRole } = render(<ModalClose />);
diff --git a/packages/mui-joy/src/ModalClose/ModalClose.tsx b/packages/mui-joy/src/ModalClose/ModalClose.tsx
index 6c17882eb34635..0234a1129def12 100644
--- a/packages/mui-joy/src/ModalClose/ModalClose.tsx
+++ b/packages/mui-joy/src/ModalClose/ModalClose.tsx
@@ -7,7 +7,6 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import { useButton } from '@mui/base/useButton';
 import useSlot from '../utils/useSlot';
 import { useThemeProps, styled } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import { StyledIconButton } from '../IconButton/IconButton';
 import { getModalCloseUtilityClass } from './modalCloseClasses';
 import { ModalCloseProps, ModalCloseOwnerState, ModalCloseTypeMap } from './ModalCloseProps';
@@ -96,8 +95,7 @@ const ModalClose = React.forwardRef(function ModalClose(inProps, ref) {
   const modalDialogVariantColor = React.useContext(ModalDialogVariantColorContext);
   const variant =
     inProps.variant ?? modalDialogVariantMapping[modalDialogVariantColor?.variant!] ?? variantProp;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, modalDialogVariantColor?.color ?? colorProp);
+  const color = inProps.color ?? modalDialogVariantColor?.color ?? colorProp;
 
   const modalDialogSize = React.useContext(ModalDialogSizeContext);
   const size = inProps.size ?? modalDialogSize ?? sizeProp;
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
index c07f4e3e5d84e2..3c9c5ac5f38838 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
+++ b/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ModalDialog, { modalDialogClasses as classes } from '@mui/joy/ModalDialog';
@@ -29,8 +25,6 @@ describe('<ModalDialog />', () => {
     },
   }));
 
-  describeJoyColorInversion(<ModalDialog />, { muiName: 'JoyModalDialog', classes });
-
   describe('prop: variant', () => {
     it('plain by default', () => {
       const { getByRole } = render(<ModalDialog />);
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
index 7f7f05d3e259d1..d90d3e72222f1d 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
+++ b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
@@ -12,7 +12,6 @@ import {
 import { Breakpoint } from '@mui/system';
 import { styled, useThemeProps } from '../styles';
 import { Theme } from '../styles/types/theme';
-import { ColorInversionProvider, useColorInversion } from '../styles/ColorInversion';
 import { getModalDialogUtilityClass } from './modalDialogClasses';
 import { ModalDialogProps, ModalDialogOwnerState, ModalDialogTypeMap } from './ModalDialogProps';
 import ModalDialogSizeContext from './ModalDialogSizeContext';
@@ -137,7 +136,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
     children,
     invertedColors = false,
     orientation = 'vertical',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     component = 'div',
     variant = 'outlined',
     size = 'md',
@@ -148,8 +147,6 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
@@ -160,6 +157,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
     layout,
     size,
     variant,
+    invertedColors,
   };
 
   const classes = useUtilityClasses(ownerState);
@@ -168,7 +166,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
   const labelledBy = useId();
   const describedBy = useId();
   const contextValue = React.useMemo(
-    () => ({ variant, color: color === 'context' ? undefined : color, labelledBy, describedBy }),
+    () => ({ variant, color, labelledBy, describedBy }),
     [color, variant, labelledBy, describedBy],
   );
 
@@ -187,7 +185,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
     },
   });
 
-  const result = (
+  return (
     <ModalDialogSizeContext.Provider value={size}>
       <ModalDialogVariantColorContext.Provider value={contextValue}>
         <SlotRoot {...rootProps}>
@@ -223,11 +221,6 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
       </ModalDialogVariantColorContext.Provider>
     </ModalDialogSizeContext.Provider>
   );
-
-  if (invertedColors) {
-    return <ColorInversionProvider variant={variant}>{result}</ColorInversionProvider>;
-  }
-  return result;
 }) as OverridableComponent<ModalDialogTypeMap>;
 
 ModalDialog.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-joy/src/Option/Option.tsx b/packages/mui-joy/src/Option/Option.tsx
index 2787cf251ed04d..bf7b29f026e3b1 100644
--- a/packages/mui-joy/src/Option/Option.tsx
+++ b/packages/mui-joy/src/Option/Option.tsx
@@ -7,7 +7,6 @@ import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import useSlot from '../utils/useSlot';
 import { StyledListItemButton } from '../ListItemButton/ListItemButton';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import { useVariantColor } from '../styles/variantColorInheritance';
 import { OptionOwnerState, ExtendOption, OptionTypeMap } from './OptionProps';
 import optionClasses, { getOptionUtilityClass } from './optionClasses';
@@ -65,7 +64,7 @@ const Option = React.forwardRef(function Option(inProps, ref: React.ForwardedRef
   } = props;
 
   const row = React.useContext(RowListContext);
-  const { variant = variantProp, color: inheritedColor = colorProp } = useVariantColor(
+  const { variant = variantProp, color = colorProp } = useVariantColor(
     inProps.variant,
     inProps.color,
   );
@@ -82,9 +81,6 @@ const Option = React.forwardRef(function Option(inProps, ref: React.ForwardedRef
     rootRef: combinedRef,
   });
 
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, inheritedColor);
-
   const ownerState: OptionOwnerState = {
     ...props,
     disabled,
diff --git a/packages/mui-joy/src/Radio/Radio.test.tsx b/packages/mui-joy/src/Radio/Radio.test.tsx
index eaf3bf40235e82..cd475f782c6c5f 100644
--- a/packages/mui-joy/src/Radio/Radio.test.tsx
+++ b/packages/mui-joy/src/Radio/Radio.test.tsx
@@ -1,12 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  act,
-  createRenderer,
-  fireEvent,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils';
 import Radio, { radioClasses as classes } from '@mui/joy/Radio';
 import { ThemeProvider } from '@mui/joy/styles';
 
@@ -33,8 +27,6 @@ describe('<Radio />', () => {
     skip: ['componentProp', 'componentsProp', 'classesRoot', 'propsSpread'],
   }));
 
-  describeJoyColorInversion(<Radio />, { muiName: 'JoyRadio', classes });
-
   it('should have the classes required for Radio', () => {
     expect(classes).to.include.all.keys(['root', 'checked', 'disabled']);
   });
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index 0cfb23c5aa0b6d..9249c338b7516f 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -6,7 +6,6 @@ import { unstable_capitalize as capitalize, unstable_useId as useId } from '@mui
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useSwitch } from '@mui/base/useSwitch';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import radioClasses, { getRadioUtilityClass } from './radioClasses';
 import { RadioOwnerState, RadioTypeMap } from './RadioProps';
@@ -266,7 +265,6 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
 
   const formControl = React.useContext(FormControlContext);
 
@@ -311,7 +309,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
 
   const { getInputProps, checked, disabled, focusVisible } = useSwitch(useRadioProps);
 
-  const color = getColor(inProps.color, checked ? activeColor : inactiveColor);
+  const color = inProps.color ?? (checked ? activeColor : inactiveColor);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/Select/Select.test.tsx b/packages/mui-joy/src/Select/Select.test.tsx
index 239871e5a8e49f..06c7060b14c3ba 100644
--- a/packages/mui-joy/src/Select/Select.test.tsx
+++ b/packages/mui-joy/src/Select/Select.test.tsx
@@ -3,7 +3,6 @@ import { expect } from 'chai';
 import { spy, stub } from 'sinon';
 import {
   describeConformance,
-  describeJoyColorInversion,
   act,
   createRenderer,
   fireEvent,
@@ -65,12 +64,6 @@ describe('Joy <Select />', () => {
     ],
   }));
 
-  describeJoyColorInversion(<Select listboxOpen />, {
-    muiName: 'JoySelect',
-    classes,
-    portalSlot: 'listbox',
-  });
-
   it('should be able to mount the component', () => {
     render(
       <Select value={10}>
diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
index 2b3f19a198941f..8d2556846a780c 100644
--- a/packages/mui-joy/src/Select/Select.tsx
+++ b/packages/mui-joy/src/Select/Select.tsx
@@ -13,7 +13,6 @@ import ListProvider, { scopedVariables } from '../List/ListProvider';
 import GroupListContext from '../List/GroupListContext';
 import Unfold from '../internal/svg-icons/Unfold';
 import { styled, useThemeProps } from '../styles';
-import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
 import { SelectOwnProps, SelectOwnerState, SelectTypeMap } from './SelectProps';
 import { resolveSxValue } from '../styles/styleUtils';
 import useSlot from '../utils/useSlot';
@@ -82,16 +81,17 @@ const SelectRoot = styled('div', {
       '--Select-placeholderOpacity': 0.64,
       '--Select-decoratorColor': theme.vars.palette.text.icon,
       '--Select-focusedThickness': theme.vars.focus.thickness,
-      ...(ownerState.color === 'context'
-        ? {
-            '--Select-focusedHighlight': theme.vars.palette.focusVisible,
-          }
-        : {
-            '--Select-focusedHighlight':
-              theme.vars.palette[
-                ownerState.color === 'neutral' ? 'primary' : ownerState.color!
-              ]?.[500],
-          }),
+      '--Select-focusedHighlight':
+        theme.vars.palette[ownerState.color === 'neutral' ? 'primary' : ownerState.color!]?.[500],
+      '&:not([data-inverted-colors="false"])': {
+        ...(ownerState.instanceColor && {
+          '--_Select-focusedHighlight':
+            theme.vars.palette[
+              ownerState.instanceColor === 'neutral' ? 'primary' : ownerState.instanceColor
+            ]?.[500],
+        }),
+        '--Select-focusedHighlight': theme.vars.palette.focusVisible,
+      },
       '--Select-indicatorColor': variantStyle?.backgroundColor
         ? variantStyle?.color
         : theme.vars.palette.text.tertiary,
@@ -219,10 +219,7 @@ const SelectListbox = styled(StyledList, {
   slot: 'Listbox',
   overridesResolver: (props, styles) => styles.listbox,
 })<{ ownerState: SelectOwnerState<any> }>(({ theme, ownerState }) => {
-  const variantStyle =
-    ownerState.color === 'context'
-      ? undefined
-      : theme.variants[ownerState.variant!]?.[ownerState.color!];
+  const variantStyle = theme.variants[ownerState.variant!]?.[ownerState.color!];
   return {
     '--focus-outline-offset': `calc(${theme.vars.focus.thickness} * -1)`, // to prevent the focus outline from being cut by overflow
     '--ListItem-stickyBackground':
@@ -377,11 +374,7 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
 
   const disabledProp = inProps.disabled ?? formControl?.disabled ?? disabledExternalProp;
   const size = inProps.size ?? formControl?.size ?? sizeProp;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(
-    inProps.color,
-    formControl?.error ? 'danger' : formControl?.color ?? colorProp,
-  );
+  const color = inProps.color ?? (formControl?.error ? 'danger' : formControl?.color ?? colorProp);
 
   const renderValue = renderValueProp ?? defaultRenderSingleValue;
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
@@ -548,41 +541,6 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
     [listboxProps.modifiers],
   );
 
-  let result = null;
-  if (anchorEl) {
-    result = (
-      <SlotListbox
-        {...listboxProps}
-        className={clsx(
-          listboxProps.className,
-          listboxProps.ownerState?.color === 'context' && selectClasses.colorContext,
-        )}
-        // @ts-ignore internal logic (too complex to typed PopperOwnProps to SlotListbox but this should be removed when we have `usePopper`)
-        modifiers={modifiers}
-        {...(!props.slots?.listbox && {
-          as: Popper,
-          slots: { root: listboxProps.as || 'ul' },
-        })}
-      >
-        <SelectProvider value={contextValue}>
-          <VariantColorProvider variant={variant} color={colorProp}>
-            <GroupListContext.Provider value="select">
-              {/* for building grouped options */}
-              <ListProvider nested>{children}</ListProvider>
-            </GroupListContext.Provider>
-          </VariantColorProvider>
-        </SelectProvider>
-      </SlotListbox>
-    );
-
-    if (!listboxProps.disablePortal) {
-      result = (
-        // For portal popup, the children should not inherit color inversion from the upper parent.
-        <ColorInversion.Provider value={undefined}>{result}</ColorInversion.Provider>
-      );
-    }
-  }
-
   return (
     <React.Fragment>
       <SlotRoot {...rootProps}>
@@ -598,7 +556,27 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
         {indicator && <SlotIndicator {...indicatorProps}>{indicator}</SlotIndicator>}
         <input {...getHiddenInputProps()} />
       </SlotRoot>
-      {result}
+      {anchorEl && (
+        <SlotListbox
+          {...listboxProps}
+          className={clsx(listboxProps.className)}
+          // @ts-ignore internal logic (too complex to typed PopperOwnProps to SlotListbox but this should be removed when we have `usePopper`)
+          modifiers={modifiers}
+          {...(!props.slots?.listbox && {
+            as: Popper,
+            slots: { root: listboxProps.as || 'ul' },
+          })}
+        >
+          <SelectProvider value={contextValue}>
+            <VariantColorProvider variant={variant} color={colorProp}>
+              <GroupListContext.Provider value="select">
+                {/* for building grouped options */}
+                <ListProvider nested>{children}</ListProvider>
+              </GroupListContext.Provider>
+            </VariantColorProvider>
+          </SelectProvider>
+        </SlotListbox>
+      )}
     </React.Fragment>
   );
 }) as SelectComponent;
diff --git a/packages/mui-joy/src/Select/SelectProps.ts b/packages/mui-joy/src/Select/SelectProps.ts
index 0ab6e0c6822f9b..de93fbe25ae293 100644
--- a/packages/mui-joy/src/Select/SelectProps.ts
+++ b/packages/mui-joy/src/Select/SelectProps.ts
@@ -215,6 +215,10 @@ export interface SelectOwnerState<OptionValue extends {}>
    * If `true`, the select dropdown is open.
    */
   open: boolean;
+  /**
+   * @internal
+   */
+  instanceColor?: OverridableStringUnion<ColorPaletteProp, SelectPropsColorOverrides>;
 }
 
 export interface SelectTypeMap<
diff --git a/packages/mui-joy/src/Sheet/Sheet.test.tsx b/packages/mui-joy/src/Sheet/Sheet.test.tsx
index 6b9c58e3752461..98b0b264b8d67c 100644
--- a/packages/mui-joy/src/Sheet/Sheet.test.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Sheet, { sheetClasses as classes, SheetClassKey } from '@mui/joy/Sheet';
@@ -30,8 +26,6 @@ describe('<Sheet />', () => {
     },
   }));
 
-  describeJoyColorInversion(<Sheet />, { muiName: 'JoySheet', classes });
-
   describe('prop: variant', () => {
     it('plain by default', () => {
       const { getByTestId } = render(<Sheet data-testid="root">Hello World</Sheet>);
diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx
index 98a857b28375d2..b5ccd6d94489be 100644
--- a/packages/mui-joy/src/Sheet/Sheet.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.tsx
@@ -7,11 +7,11 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { getPath } from '@mui/system';
 import { useThemeProps } from '../styles';
+import { applySoftInversion, applySolidInversion } from '../colorInversion';
 import styled from '../styles/styled';
 import { resolveSxValue } from '../styles/styleUtils';
 import { getSheetUtilityClass } from './sheetClasses';
 import { SheetProps, SheetOwnerState, SheetTypeMap } from './SheetProps';
-import { ColorInversionProvider, useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState: SheetOwnerState) => {
@@ -72,11 +72,17 @@ export const SheetRoot = styled('div', {
     } as const,
     {
       ...theme.typography['body-md'],
+      ...(ownerState.variant === 'solid' &&
+        ownerState.color &&
+        ownerState.invertedColors &&
+        applySolidInversion(ownerState.color)(theme)),
+      ...(ownerState.variant === 'soft' &&
+        ownerState.color &&
+        ownerState.invertedColors &&
+        applySoftInversion(ownerState.color)(theme)),
+      ...theme.variants[ownerState.variant!]?.[ownerState.color!],
       ...variantStyle,
     },
-    ownerState.color !== 'context' &&
-      ownerState.invertedColors &&
-      theme.colorInversion[ownerState.variant!]?.[ownerState.color!],
   ];
 });
 /**
@@ -97,7 +103,7 @@ const Sheet = React.forwardRef(function Sheet(inProps, ref) {
 
   const {
     className,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     component = 'div',
     variant = 'plain',
     invertedColors = false,
@@ -105,8 +111,6 @@ const Sheet = React.forwardRef(function Sheet(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
@@ -127,12 +131,7 @@ const Sheet = React.forwardRef(function Sheet(inProps, ref) {
     ownerState,
   });
 
-  const result = <SlotRoot {...rootProps} />;
-
-  if (invertedColors) {
-    return <ColorInversionProvider variant={variant}>{result}</ColorInversionProvider>;
-  }
-  return result;
+  return <SlotRoot {...rootProps} />;
 }) as OverridableComponent<SheetTypeMap>;
 
 Sheet.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-joy/src/Slider/Slider.test.tsx b/packages/mui-joy/src/Slider/Slider.test.tsx
index 8e2a08410db6e6..378a67d41e163b 100644
--- a/packages/mui-joy/src/Slider/Slider.test.tsx
+++ b/packages/mui-joy/src/Slider/Slider.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer } from '@mui-internal/test-utils';
 import Slider, { sliderClasses as classes } from '@mui/joy/Slider';
 import { ThemeProvider } from '@mui/joy/styles';
 
@@ -40,8 +36,6 @@ describe('<Slider />', () => {
     }),
   );
 
-  describeJoyColorInversion(<Slider />, { muiName: 'JoySlider', classes });
-
   it('should render the rail as the first child of the Slider', () => {
     const { container } = render(<Slider />);
 
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index 7bd87f18566460..a6e99e0a156353 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -10,7 +10,6 @@ import { OverridableComponent } from '@mui/types';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { isHostComponent } from '@mui/base/utils';
 import { useThemeProps, styled, Theme } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { SliderTypeMap, SliderOwnerState } from './SliderProps';
@@ -232,9 +231,7 @@ const SliderThumb = styled('span', {
     ...theme.focus.default,
     outlineOffset: 0,
     outlineWidth: 'max(4px, var(--Slider-thumbSize) / 3.6)',
-    ...(ownerState.color !== 'context' && {
-      outlineColor: `rgba(${theme.vars.palette?.[ownerState.color!]?.mainChannel} / 0.32)`,
-    }),
+    outlineColor: `rgba(${theme.vars.palette?.[ownerState.color!]?.mainChannel} / 0.32)`,
   },
   ...(ownerState.orientation === 'horizontal' && {
     top: '50%',
@@ -430,7 +427,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
     valueLabelDisplay = 'off',
     valueLabelFormat = Identity,
     isRtl = false,
-    color: colorProp = 'primary',
+    color = 'primary',
     size = 'md',
     variant = 'solid',
     component,
@@ -438,8 +435,6 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion('solid');
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
index d93f587099e265..bd8921c0a9b3d8 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
@@ -60,7 +60,6 @@ const SvgIconRoot = styled('svg', {
       color: 'inherit',
     }),
     ...(ownerState.color !== 'inherit' &&
-      ownerState.color !== 'context' &&
       theme.vars.palette[ownerState.color!] && {
         color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 1)`,
       }),
diff --git a/packages/mui-joy/src/Switch/Switch.test.tsx b/packages/mui-joy/src/Switch/Switch.test.tsx
index 014c0baf54c62c..7516d4b6fbe5e7 100644
--- a/packages/mui-joy/src/Switch/Switch.test.tsx
+++ b/packages/mui-joy/src/Switch/Switch.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { expect } from 'chai';
 import {
   describeConformance,
-  describeJoyColorInversion,
   act,
   createRenderer,
   fireEvent,
@@ -40,8 +39,6 @@ describe('<Switch />', () => {
     skip: ['componentProp', 'componentsProp', 'classesRoot'],
   }));
 
-  describeJoyColorInversion(<Switch />, { muiName: 'JoySwitch', classes });
-
   it('should pass `slotProps` down to slots', () => {
     const { container } = render(
       <Switch
diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
index 7faa93ceb7b7e5..ad8ad8bb805b17 100644
--- a/packages/mui-joy/src/Switch/Switch.tsx
+++ b/packages/mui-joy/src/Switch/Switch.tsx
@@ -6,14 +6,14 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { useSwitch } from '@mui/base/useSwitch';
 import { styled, useThemeProps, Theme } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
+
 import useSlot from '../utils/useSlot';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
 import { SwitchTypeMap, SwitchOwnerState } from './SwitchProps';
 import FormControlContext from '../FormControl/FormControlContext';
 
 const useUtilityClasses = (ownerState: SwitchOwnerState) => {
-  const { checked, disabled, focusVisible, readOnly, color, variant } = ownerState;
+  const { checked, disabled, focusVisible, readOnly, color, variant, size } = ownerState;
 
   const slots = {
     root: [
@@ -24,6 +24,7 @@ const useUtilityClasses = (ownerState: SwitchOwnerState) => {
       readOnly && 'readOnly',
       variant && `variant${capitalize(variant)}`,
       color && `color${capitalize(color)}`,
+      size && `size${capitalize(size)}`,
     ],
     thumb: ['thumb', checked && 'checked'],
     track: ['track', checked && 'checked'],
@@ -65,23 +66,23 @@ const SwitchRoot = styled('div', {
     '--Switch-thumbShadow':
       ownerState.variant === 'soft' ? 'none' : '0 0 0 1px var(--Switch-trackBackground)', // create border-like if the thumb is bigger than the track
     ...(ownerState.size === 'sm' && {
-      '--Switch-trackWidth': '32px',
+      '--Switch-trackWidth': '26px',
       '--Switch-trackHeight': '16px',
-      '--Switch-thumbSize': '8px',
+      '--Switch-thumbSize': '10px',
       fontSize: theme.vars.fontSize.sm,
       gap: 'var(--Switch-gap, 6px)',
     }),
     ...(ownerState.size === 'md' && {
-      '--Switch-trackWidth': '40px',
+      '--Switch-trackWidth': '32px',
       '--Switch-trackHeight': '20px',
-      '--Switch-thumbSize': '12px',
+      '--Switch-thumbSize': '14px',
       fontSize: theme.vars.fontSize.md,
       gap: 'var(--Switch-gap, 8px)',
     }),
     ...(ownerState.size === 'lg' && {
-      '--Switch-trackWidth': '48px',
+      '--Switch-trackWidth': '40px',
       '--Switch-trackHeight': '24px',
-      '--Switch-thumbSize': '16px',
+      '--Switch-thumbSize': '18px',
       gap: 'var(--Switch-gap, 12px)',
     }),
     '--unstable_paddingBlock': `max((var(--Switch-trackHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Switch-thumbSize)) / 2, 0px)`,
@@ -265,11 +266,7 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
   }
 
   const size = inProps.size ?? formControl?.size ?? sizeProp;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(
-    inProps.color,
-    formControl?.error ? 'danger' : formControl?.color ?? colorProp,
-  );
+  const color = inProps.color ?? (formControl?.error ? 'danger' : formControl?.color ?? colorProp);
 
   const useSwitchProps = {
     disabled: inProps.disabled ?? formControl?.disabled ?? disabledExternalProp,
diff --git a/packages/mui-joy/src/Tab/Tab.test.tsx b/packages/mui-joy/src/Tab/Tab.test.tsx
index 538a9845f194f7..2ec71a128f0ec8 100644
--- a/packages/mui-joy/src/Tab/Tab.test.tsx
+++ b/packages/mui-joy/src/Tab/Tab.test.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  screen,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
 import { TabsProps } from '@mui/base/Tabs';
 import { useTabs, TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
 import { useTabsList, TabsListProvider as BaseTabsListProvider } from '@mui/base/useTabsList';
@@ -50,12 +45,6 @@ describe('Joy <Tab />', () => {
     },
   }));
 
-  describeJoyColorInversion(<Tab />, {
-    muiName: 'JoyTab',
-    classes,
-    wrapper: (node) => <TabsProvider defaultValue={0}>{node}</TabsProvider>,
-  });
-
   it('prop: variant', () => {
     render(
       <TabsProvider>
diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx
index c9d8342d03b361..90ef14d4e92b59 100644
--- a/packages/mui-joy/src/Tab/Tab.tsx
+++ b/packages/mui-joy/src/Tab/Tab.tsx
@@ -8,7 +8,6 @@ import { useTab } from '@mui/base/useTab';
 import { StyledListItemButton } from '../ListItemButton/ListItemButton';
 import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
-import { useColorInversion } from '../styles/ColorInversion';
 import { getTabUtilityClass } from './tabClasses';
 import { TabOwnerState, TabTypeMap } from './TabProps';
 import RowListContext from '../List/RowListContext';
@@ -142,7 +141,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     component = 'button',
     orientation = 'horizontal',
     variant = 'plain',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     disableIndicator = false,
     indicatorPlacement = row ? 'bottom' : 'right',
     indicatorInset = false,
@@ -150,8 +149,6 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>();
   const handleRef = useForkRef(tabRef, ref) as React.RefCallback<Element>;
diff --git a/packages/mui-joy/src/TabList/TabList.test.tsx b/packages/mui-joy/src/TabList/TabList.test.tsx
index 5dbd76080dcacd..5934491c8255f6 100644
--- a/packages/mui-joy/src/TabList/TabList.test.tsx
+++ b/packages/mui-joy/src/TabList/TabList.test.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  screen,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
 import { TabsProps } from '@mui/base/Tabs';
 import { useTabs, TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
 import { ThemeProvider } from '@mui/joy/styles';
@@ -38,12 +33,6 @@ describe('Joy <TabList />', () => {
     },
   }));
 
-  describeJoyColorInversion(<TabList />, {
-    muiName: 'JoyTabList',
-    classes,
-    wrapper: (node) => <TabsProvider defaultValue={0}>{node}</TabsProvider>,
-  });
-
   describe('size', () => {
     it('uses size from Tabs', () => {
       render(
diff --git a/packages/mui-joy/src/TabList/TabList.tsx b/packages/mui-joy/src/TabList/TabList.tsx
index b3617bc2ff7b89..d9987a695d5498 100644
--- a/packages/mui-joy/src/TabList/TabList.tsx
+++ b/packages/mui-joy/src/TabList/TabList.tsx
@@ -7,7 +7,6 @@ import { OverridableComponent } from '@mui/types';
 import { useTabsList, TabsListProvider } from '@mui/base/useTabsList';
 import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
-import { useColorInversion } from '../styles/ColorInversion';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
 import SizeTabsContext from '../Tabs/SizeTabsContext';
@@ -114,7 +113,7 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
     component = 'div',
     children,
     variant = 'plain',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     size: sizeProp,
     disableUnderline = false,
     underlinePlacement = orientation === 'horizontal' ? 'bottom' : 'right',
@@ -124,8 +123,6 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const size = sizeProp ?? tabsSize;
 
diff --git a/packages/mui-joy/src/TabPanel/TabPanel.tsx b/packages/mui-joy/src/TabPanel/TabPanel.tsx
index 8adf06e5966d37..891fb3c9842034 100644
--- a/packages/mui-joy/src/TabPanel/TabPanel.tsx
+++ b/packages/mui-joy/src/TabPanel/TabPanel.tsx
@@ -7,7 +7,7 @@ import { OverridableComponent } from '@mui/types';
 import { useTabPanel } from '@mui/base/useTabPanel';
 import { useTabsContext } from '@mui/base/Tabs';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
+
 import SizeTabsContext from '../Tabs/SizeTabsContext';
 import { getTabPanelUtilityClass } from './tabPanelClasses';
 import { TabPanelOwnerState, TabPanelTypeMap } from './TabPanelProps';
@@ -66,7 +66,7 @@ const TabPanel = React.forwardRef(function TabPanel(inProps, ref) {
     children,
     value = 0,
     component,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     variant = 'plain',
     size: sizeProp,
     slots = {},
@@ -78,8 +78,6 @@ const TabPanel = React.forwardRef(function TabPanel(inProps, ref) {
   const { hidden, getRootProps } = useTabPanel({ ...props, value });
 
   const size = sizeProp ?? tabsSize;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/Table/Table.test.tsx b/packages/mui-joy/src/Table/Table.test.tsx
index 843f73cf9bdf7b..37909e8f400ba6 100644
--- a/packages/mui-joy/src/Table/Table.test.tsx
+++ b/packages/mui-joy/src/Table/Table.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Table, { tableClasses as classes } from '@mui/joy/Table';
@@ -39,8 +35,6 @@ describe('<Table />', () => {
     },
   }));
 
-  describeJoyColorInversion(<Table />, { muiName: 'JoyTable', classes });
-
   describe('prop: variant', () => {
     it('plain by default', () => {
       const { getByRole } = render(<Table />);
diff --git a/packages/mui-joy/src/Table/Table.tsx b/packages/mui-joy/src/Table/Table.tsx
index f194b6536960c8..dc842922b93803 100644
--- a/packages/mui-joy/src/Table/Table.tsx
+++ b/packages/mui-joy/src/Table/Table.tsx
@@ -6,7 +6,7 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
 import { useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
+
 import styled from '../styles/styled';
 import { getTableUtilityClass } from './tableClasses';
 import { TableProps, TableOwnerState, TableTypeMap } from './TableProps';
@@ -305,7 +305,7 @@ const Table = React.forwardRef(function Table(inProps, ref) {
     noWrap = false,
     size = 'md',
     variant = 'plain',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     stripe,
     stickyHeader = false,
     stickyFooter = false,
@@ -313,8 +313,6 @@ const Table = React.forwardRef(function Table(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/Tabs/Tabs.test.tsx b/packages/mui-joy/src/Tabs/Tabs.test.tsx
index 56052e1b00d5bd..b7951b0200d184 100644
--- a/packages/mui-joy/src/Tabs/Tabs.test.tsx
+++ b/packages/mui-joy/src/Tabs/Tabs.test.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  describeConformance,
-  createRenderer,
-  screen,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Tabs, { tabsClasses as classes } from '@mui/joy/Tabs';
 import SizeTabsContext from './SizeTabsContext';
@@ -30,8 +25,6 @@ describe('Joy <Tabs />', () => {
     },
   }));
 
-  describeJoyColorInversion(<Tabs />, { muiName: 'JoyTabs', classes });
-
   it('prop: variant', () => {
     render(<Tabs variant="outlined" aria-label="Tabs" />);
     expect(screen.getByLabelText('Tabs')).to.have.class(classes.variantOutlined);
diff --git a/packages/mui-joy/src/Tabs/Tabs.tsx b/packages/mui-joy/src/Tabs/Tabs.tsx
index dcda739ef89c80..a4e7eecb798b9d 100644
--- a/packages/mui-joy/src/Tabs/Tabs.tsx
+++ b/packages/mui-joy/src/Tabs/Tabs.tsx
@@ -8,7 +8,7 @@ import { useTabs, TabsProvider } from '@mui/base/useTabs';
 import { getPath } from '@mui/system';
 import { styled, useThemeProps } from '../styles';
 import { resolveSxValue } from '../styles/styleUtils';
-import { useColorInversion } from '../styles/ColorInversion';
+
 import SizeTabsContext from './SizeTabsContext';
 import { getTabsUtilityClass } from './tabsClasses';
 import { TabsOwnerState, TabsTypeMap } from './TabsProps';
@@ -104,14 +104,12 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
     onChange,
     selectionFollowsFocus,
     variant = 'plain',
-    color: colorProp = 'neutral',
+    color = 'neutral',
     size = 'md',
     slots = {},
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, colorProp);
   const defaultValue = defaultValueProp || (valueProp === undefined ? 0 : undefined);
   const { contextValue } = useTabs({ ...props, orientation, defaultValue });
 
diff --git a/packages/mui-joy/src/Textarea/Textarea.test.tsx b/packages/mui-joy/src/Textarea/Textarea.test.tsx
index 9df58d9be64752..5edf08bfee175e 100644
--- a/packages/mui-joy/src/Textarea/Textarea.test.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.test.tsx
@@ -3,7 +3,6 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import {
   describeConformance,
-  describeJoyColorInversion,
   createRenderer,
   screen,
   act,
@@ -33,8 +32,6 @@ describe('Joy <Textarea />', () => {
     skip: ['propsSpread', 'componentsProp', 'classesRoot'],
   }));
 
-  describeJoyColorInversion(<Textarea />, { muiName: 'JoyTextarea', classes });
-
   it('should have placeholder', () => {
     const { getByPlaceholderText } = render(<Textarea placeholder="Placeholder" />);
     expect(getByPlaceholderText('Placeholder')).toBeVisible();
diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
index 9c858dbbdefce3..1103387a8537ef 100644
--- a/packages/mui-joy/src/Textarea/Textarea.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -6,7 +6,7 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { TextareaAutosize } from '@mui/base/TextareaAutosize';
 import { styled, useThemeProps } from '../styles';
-import { useColorInversion } from '../styles/ColorInversion';
+
 import useSlot from '../utils/useSlot';
 import { TextareaTypeMap, TextareaProps, TextareaOwnerState } from './TextareaProps';
 import textareaClasses, { getTextareaUtilityClass } from './textareaClasses';
@@ -46,16 +46,17 @@ const TextareaRoot = styled('div', {
       '--Textarea-decoratorColor': theme.vars.palette.text.icon,
       '--Textarea-focused': '0',
       '--Textarea-focusedThickness': theme.vars.focus.thickness,
-      ...(ownerState.color === 'context'
-        ? {
-            '--Textarea-focusedHighlight': theme.vars.palette.focusVisible,
-          }
-        : {
-            '--Textarea-focusedHighlight':
-              theme.vars.palette[
-                ownerState.color === 'neutral' ? 'primary' : ownerState.color!
-              ]?.[500],
-          }),
+      '--Textarea-focusedHighlight':
+        theme.vars.palette[ownerState.color === 'neutral' ? 'primary' : ownerState.color!]?.[500],
+      '&:not([data-inverted-colors="false"])': {
+        ...(ownerState.instanceColor && {
+          '--_Textarea-focusedHighlight':
+            theme.vars.palette[
+              ownerState.instanceColor === 'neutral' ? 'primary' : ownerState.instanceColor
+            ]?.[500],
+        }),
+        '--Textarea-focusedHighlight': `var(--_Textarea-focusedHighlight, ${theme.vars.palette.focusVisible})`,
+      },
       ...(ownerState.size === 'sm' && {
         '--Textarea-minHeight': '2rem',
         '--Textarea-paddingBlock': 'calc(0.375rem - 0.5px - var(--variant-borderWidth, 0px))', // to match Input because <textarea> does not center the text at the middle like <input>
@@ -252,8 +253,7 @@ const Textarea = React.forwardRef(function Textarea(inProps, ref) {
   const disabled = inProps.disabled ?? formControl?.disabled ?? disabledProp;
   const error = inProps.error ?? formControl?.error ?? errorProp;
   const size = inProps.size ?? formControl?.size ?? sizeProp;
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, error ? 'danger' : formControl?.color ?? colorProp);
+  const color = inProps.color ?? (error ? 'danger' : formControl?.color ?? colorProp);
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-joy/src/Textarea/TextareaProps.ts b/packages/mui-joy/src/Textarea/TextareaProps.ts
index 13aaf6ec7eeaa6..145051e8a03b16 100644
--- a/packages/mui-joy/src/Textarea/TextareaProps.ts
+++ b/packages/mui-joy/src/Textarea/TextareaProps.ts
@@ -122,4 +122,8 @@ export interface TextareaOwnerState extends ApplyColorInversion<TextareaProps> {
    * If `true`, the input is focused.
    */
   focused: boolean;
+  /**
+   * @internal
+   */
+  instanceColor?: OverridableStringUnion<ColorPaletteProp, TextareaPropsColorOverrides>;
 }
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
index 92daed9f4dda4f..f195b14b48a39d 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { PopperProps } from '@mui/base';
 import { ThemeProvider } from '@mui/joy/styles';
@@ -58,18 +54,6 @@ describe('<Tooltip />', () => {
     }),
   );
 
-  describeJoyColorInversion(
-    <Tooltip
-      title="Hello world"
-      open
-      disablePortal
-      slotProps={{ root: { 'data-testid': 'test-element' } as any }}
-    >
-      <button>Hello World</button>
-    </Tooltip>,
-    { muiName: 'JoyTooltip', classes, portalSlot: 'root' },
-  );
-
   describe('prop: variant', () => {
     it('solid by default', () => {
       const { getByRole } = render(
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index 5615790bd8a725..5970bbe31b0d13 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -15,7 +15,6 @@ import { OverridableComponent } from '@mui/types';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useSlot from '../utils/useSlot';
-import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
 import { getTooltipUtilityClass } from './tooltipClasses';
 import { TooltipProps, TooltipOwnerState, TooltipTypeMap } from './TooltipProps';
 
@@ -232,15 +231,13 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
     modifiers: modifiersProp,
     placement = 'bottom',
     title,
-    color: colorProp = 'neutral',
+    color = 'neutral',
     variant = 'solid',
     size = 'md',
     slots = {},
     slotProps = {},
     ...other
   } = props;
-  const { getColor } = useColorInversion(variant);
-  const color = disablePortal ? getColor(inProps.color, colorProp) : colorProp;
 
   const [childNode, setChildNode] = React.useState<Element>();
   const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);
@@ -619,30 +616,21 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
     ownerState,
   });
 
-  const result = (
-    <SlotRoot
-      {...rootProps}
-      {...(!props.slots?.root && {
-        as: Popper,
-        slots: {
-          root: component || 'div',
-        },
-      })}
-    >
-      {title}
-      {arrow ? <SlotArrow {...arrowProps} /> : null}
-    </SlotRoot>
-  );
-
   return (
     <React.Fragment>
       {React.isValidElement(children) && React.cloneElement(children, childrenProps)}
-      {disablePortal ? (
-        result
-      ) : (
-        // For portal popup, the children should not inherit color inversion from the upper parent.
-        <ColorInversion.Provider value={undefined}>{result}</ColorInversion.Provider>
-      )}
+      <SlotRoot
+        {...rootProps}
+        {...(!props.slots?.root && {
+          as: Popper,
+          slots: {
+            root: component || 'div',
+          },
+        })}
+      >
+        {title}
+        {arrow ? <SlotArrow {...arrowProps} /> : null}
+      </SlotRoot>
     </React.Fragment>
   );
 }) as OverridableComponent<TooltipTypeMap>;
diff --git a/packages/mui-joy/src/Typography/Typography.test.tsx b/packages/mui-joy/src/Typography/Typography.test.tsx
index b372586094dfe6..88548fe665a28c 100644
--- a/packages/mui-joy/src/Typography/Typography.test.tsx
+++ b/packages/mui-joy/src/Typography/Typography.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import {
-  createRenderer,
-  describeConformance,
-  describeJoyColorInversion,
-} from '@mui-internal/test-utils';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import Typography, { typographyClasses as classes, TypographyProps } from '@mui/joy/Typography';
 import { ThemeProvider } from '@mui/joy/styles';
 
@@ -28,8 +24,6 @@ describe('<Typography />', () => {
     skip: ['componentsProp', 'classesRoot'],
   }));
 
-  describeJoyColorInversion(<Typography variant="soft" />, { muiName: 'JoyTypography', classes });
-
   it('should render the text', () => {
     const { container } = render(<Typography>Hello</Typography>);
     expect(container.firstChild).to.have.text('Hello');
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index e1485cbbbcf4e6..9300356b1b6358 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -11,7 +11,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas
 import { TypographyTypeMap, TypographyProps, TypographyOwnerState } from './TypographyProps';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { useColorInversion } from '../styles/ColorInversion';
 import useSlot from '../utils/useSlot';
 import { getTypographyUtilityClass } from './typographyClasses';
 import { TypographySystem } from '../styles/types';
@@ -115,10 +114,11 @@ const TypographyRoot = styled('span', {
     ...(ownerState.gutterBottom && {
       marginBottom: '0.35em',
     }),
-    ...(ownerState.color &&
-      ownerState.color !== 'context' && {
-        color: `rgba(${theme.vars.palette[ownerState.color]?.mainChannel} / 1)`,
-      }),
+    ...(ownerState.color && {
+      color: `var(--variant-plainColor, rgba(${
+        theme.vars.palette[ownerState.color]?.mainChannel
+      } / 1))`,
+    }),
     ...(ownerState.variant && {
       borderRadius: theme.vars.radius.xs,
       paddingBlock: 'min(0.1em, 4px)',
@@ -186,8 +186,7 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
     ...other
   } = props;
 
-  const { getColor } = useColorInversion(variant);
-  const color = getColor(inProps.color, variant ? colorProp ?? 'neutral' : colorProp);
+  const color = inProps.color ?? (variant ? colorProp ?? 'neutral' : colorProp);
 
   const level = nesting || inheriting ? inProps.level || 'inherit' : levelProp;
 
diff --git a/packages/mui-joy/src/colorInversion/colorInversionUtils.spec.tsx b/packages/mui-joy/src/colorInversion/colorInversionUtils.spec.tsx
new file mode 100644
index 00000000000000..73d3bdb3d8e717
--- /dev/null
+++ b/packages/mui-joy/src/colorInversion/colorInversionUtils.spec.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { styled } from '@mui/joy/styles';
+import { applySoftInversion, applySolidInversion } from '@mui/joy/colorInversion';
+import Box from '@mui/joy/Box';
+
+/**
+ * sx prop type check
+ */
+<Box sx={[(theme) => ({}), applySoftInversion('neutral'), applySoftInversion('primary')]} />;
+
+<Box
+  sx={[
+    (theme) => ({}),
+    // @ts-expect-error no `unknown` color from theme palette
+    applySoftInversion('unknown'),
+    // @ts-expect-error no `unknown` color from theme palette
+    applySoftInversion('unknown'),
+  ]}
+/>;
+
+/**
+ * styled API type check
+ */
+styled('div')(({ theme }) => ({}), applySoftInversion('primary'), applySolidInversion('primary'));
+
+styled('div')(
+  ({ theme }) => ({}),
+  // @ts-expect-error no `unknown` color from theme palette
+  applySoftInversion('unknown'),
+  // @ts-expect-error no `unknown` color from theme palette
+  applySolidInversion('unknown'),
+);
diff --git a/packages/mui-joy/src/colorInversion/colorInversionUtils.test.tsx b/packages/mui-joy/src/colorInversion/colorInversionUtils.test.tsx
new file mode 100644
index 00000000000000..6bb5637509a8f7
--- /dev/null
+++ b/packages/mui-joy/src/colorInversion/colorInversionUtils.test.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui-internal/test-utils';
+import Box from '@mui/joy/Box';
+import { styled } from '@mui/joy/styles';
+import { applySoftInversion, applySolidInversion } from '@mui/joy/colorInversion';
+
+describe('colorInversionUtil', () => {
+  const { render } = createRenderer();
+  it('should not throw error using sx prop', () => {
+    expect(() =>
+      render(<Box sx={[applySoftInversion('primary'), applySolidInversion('primary')]} />),
+    ).not.to.throw();
+  });
+
+  it('should not throw error using styled API', () => {
+    expect(() => {
+      styled(Box)(applySoftInversion('primary'), applySolidInversion('primary'));
+    }).not.to.throw();
+  });
+});
diff --git a/packages/mui-joy/src/colorInversion/colorInversionUtils.ts b/packages/mui-joy/src/colorInversion/colorInversionUtils.ts
new file mode 100644
index 00000000000000..5749377a22ee98
--- /dev/null
+++ b/packages/mui-joy/src/colorInversion/colorInversionUtils.ts
@@ -0,0 +1,386 @@
+'use client';
+import { unstable_createGetCssVar as createGetCssVar } from '@mui/system';
+import { ColorPaletteProp, ColorSystem } from '../styles/types';
+import { DefaultColorScheme, ExtendedColorScheme } from '../styles/types/colorScheme';
+
+interface ThemeFragment {
+  cssVarPrefix?: string;
+  colorSchemes: { [k: string]: ColorSystem | undefined };
+  getCssVar: (...args: any[]) => string;
+  palette: Record<string, any>;
+  getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string;
+}
+
+const createPrefixVar = (cssVarPrefix: string | undefined | null) => {
+  return (cssVar: string) =>
+    `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}${cssVar.replace(/^--/, '')}`;
+};
+
+export const INVERTED_COLORS_ATTR = 'data-skip-inverted-colors';
+
+export const INVERTED_COLORS_SELECTOR = `& :not([${INVERTED_COLORS_ATTR}], [${INVERTED_COLORS_ATTR}] *)`;
+
+// Apply cyclic variables to the component to use fallback values.
+// Color inversion variables from the parent will be neglected.
+export const skipInvertedColors = (theme: ThemeFragment) => {
+  const prefixVar = createPrefixVar(theme.cssVarPrefix);
+  return {
+    '--variant-plainColor': 'var(--variant-plainColor) !important',
+    '--variant-plainHoverColor': 'var(--variant-plainHoverColor) !important',
+    '--variant-plainHoverBg': 'var(--variant-plainHoverBg) !important',
+    '--variant-plainActiveBg': 'var(--variant-plainActiveBg) !important',
+    '--variant-plainDisabledColor': 'var(--variant-plainDisabledColor) !important',
+
+    '--variant-outlinedColor': 'var(--variant-outlinedColor) !important',
+    '--variant-outlinedBorder': 'var(--variant-outlinedBorder) !important',
+    '--variant-outlinedHoverColor': 'var(--variant-outlinedHoverColor) !important',
+    '--variant-outlinedHoverBorder': 'var(--variant-outlinedHoverBorder) !important',
+    '--variant-outlinedHoverBg': 'var(--variant-outlinedHoverBg) !important',
+    '--variant-outlinedActiveBg': 'var(--variant-outlinedActiveBg) !important',
+    '--variant-outlinedDisabledColor': 'var(--variant-outlinedDisabledColor) !important',
+    '--variant-outlinedDisabledBorder': 'var(--variant-outlinedDisabledBorder) !important',
+
+    '--variant-softColor': 'var(--variant-softColor) !important',
+    '--variant-softHoverColor': 'var(--variant-softHoverColor) !important',
+    '--variant-softBg': 'var(--variant-softBg) !important',
+    '--variant-softHoverBg': 'var(--variant-softHoverBg) !important',
+    '--variant-softActiveBg': 'var(--variant-softActiveBg) !important',
+    '--variant-softActiveColor': 'var(--variant-softActiveColor) !important',
+    '--variant-softDisabledColor': 'var(--variant-softDisabledColor) !important',
+    '--variant-softDisabledBg': 'var(--variant-softDisabledBg) !important',
+
+    '--variant-solidColor': 'var(--variant-solidColor) !important',
+    '--variant-solidBg': 'var(--variant-solidBg) !important',
+    '--variant-solidHoverBg': 'var(--variant-solidHoverBg) !important',
+    '--variant-solidActiveBg': 'var(--variant-solidActiveBg) !important',
+    '--variant-solidDisabledColor': 'var(--variant-solidDisabledColor) !important',
+    '--variant-solidDisabledBg': 'var(--variant-solidDisabledBg) !important',
+
+    '--Badge-ringColor': 'var(--Badge-ringColor) !important',
+    colorScheme: 'unset',
+    [theme.getColorSchemeSelector('light')]: {
+      [prefixVar(
+        '--palette-focusVisible',
+      )]: `${theme.colorSchemes.light?.palette.focusVisible} !important`,
+      [prefixVar(
+        '--palette-background-body',
+      )]: `${theme.colorSchemes.light?.palette.background.body} !important`,
+      [prefixVar(
+        '--palette-background-surface',
+      )]: `${theme.colorSchemes.light?.palette.background.surface} !important`,
+      [prefixVar(
+        '--palette-background-popup',
+      )]: `${theme.colorSchemes.light?.palette.background.popup} !important`,
+      [prefixVar(
+        '--palette-background-level1',
+      )]: `${theme.colorSchemes.light?.palette.background.level1} !important`,
+      [prefixVar(
+        '--palette-background-level2',
+      )]: `${theme.colorSchemes.light?.palette.background.level2} !important`,
+      [prefixVar(
+        '--palette-background-level3',
+      )]: `${theme.colorSchemes.light?.palette.background.level3} !important`,
+      [prefixVar(
+        '--palette-text-primary',
+      )]: `${theme.colorSchemes.light?.palette.text.primary} !important`,
+      [prefixVar(
+        '--palette-text-secondary',
+      )]: `${theme.colorSchemes.light?.palette.text.secondary} !important`,
+      [prefixVar(
+        '--palette-text-tertiary',
+      )]: `${theme.colorSchemes.light?.palette.text.tertiary} !important`,
+      [prefixVar('--palette-divider')]: `${theme.colorSchemes.light?.palette.divider} !important`,
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      [prefixVar(
+        '--palette-focusVisible',
+      )]: `${theme.colorSchemes.dark?.palette.focusVisible} !important`,
+      [prefixVar(
+        '--palette-background-body',
+      )]: `${theme.colorSchemes.dark?.palette.background.body} !important`,
+      [prefixVar(
+        '--palette-background-surface',
+      )]: `${theme.colorSchemes.dark?.palette.background.surface} !important`,
+      [prefixVar(
+        '--palette-background-popup',
+      )]: `${theme.colorSchemes.dark?.palette.background.popup} !important`,
+      [prefixVar(
+        '--palette-background-level1',
+      )]: `${theme.colorSchemes.dark?.palette.background.level1} !important`,
+      [prefixVar(
+        '--palette-background-level2',
+      )]: `${theme.colorSchemes.dark?.palette.background.level2} !important`,
+      [prefixVar(
+        '--palette-background-level3',
+      )]: `${theme.colorSchemes.dark?.palette.background.level3} !important`,
+      [prefixVar(
+        '--palette-text-primary',
+      )]: `${theme.colorSchemes.dark?.palette.text.primary} !important`,
+      [prefixVar(
+        '--palette-text-secondary',
+      )]: `${theme.colorSchemes.dark?.palette.text.secondary} !important`,
+      [prefixVar(
+        '--palette-text-tertiary',
+      )]: `${theme.colorSchemes.dark?.palette.text.tertiary} !important`,
+      [prefixVar('--palette-divider')]: `${theme.colorSchemes.dark?.palette.divider} !important`,
+    },
+  };
+};
+
+/**
+ *
+ * @param color a supported theme color palette
+ * @returns (theme: ThemeFragment) => Record<DefaultColorPalette, CSSObject>
+ */
+export const applySolidInversion =
+  (color: ColorPaletteProp) => (themeProp: ThemeFragment & { theme?: ThemeFragment }) => {
+    const { theme = themeProp } = themeProp;
+    const getCssVarDefault = createGetCssVar(theme.cssVarPrefix);
+    const prefixVar = createPrefixVar(theme.cssVarPrefix);
+    const getCssVar = (cssVar: string) => {
+      const tokens = cssVar.split('-');
+      return getCssVarDefault(cssVar, theme.palette[tokens[1]][tokens[2]]);
+    };
+
+    return {
+      [INVERTED_COLORS_SELECTOR]: {
+        '--Badge-ringColor': getCssVar(`palette-${color}-solidBg`),
+        '--Icon-color': 'currentColor',
+        [`${theme.getColorSchemeSelector('light')}, ${theme.getColorSchemeSelector('dark')}`]: {
+          colorScheme: 'dark',
+          [prefixVar('--palette-focusVisible')]: getCssVar(`palette-${color}-200`),
+          [prefixVar('--palette-background-body')]: 'rgba(0 0 0 / 0.1)',
+          [prefixVar('--palette-background-surface')]: 'rgba(0 0 0 / 0.06)',
+          [prefixVar('--palette-background-popup')]: getCssVar(`palette-${color}-700`),
+          [prefixVar('--palette-background-level1')]: `rgba(${getCssVar(
+            `palette-${color}-darkChannel`,
+          )} / 0.2)`,
+          [prefixVar('--palette-background-level2')]: `rgba(${getCssVar(
+            `palette-${color}-darkChannel`,
+          )} / 0.36)`,
+          [prefixVar('--palette-background-level3')]: `rgba(${getCssVar(
+            `palette-${color}-darkChannel`,
+          )} / 0.6)`,
+          [prefixVar('--palette-text-primary')]: getCssVar(`palette-common-white`),
+          [prefixVar('--palette-text-secondary')]: getCssVar(`palette-${color}-200`),
+          [prefixVar('--palette-text-tertiary')]: getCssVar(`palette-${color}-300`),
+          [prefixVar('--palette-text-icon')]: getCssVar(`palette-${color}-200`),
+          [prefixVar('--palette-divider')]: `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.32)`,
+
+          '--variant-plainColor': getCssVar(`palette-${color}-50`),
+          '--variant-plainHoverColor': `#fff`,
+          '--variant-plainHoverBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.12)`,
+          '--variant-plainActiveBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.32)`,
+          '--variant-plainDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.72)`,
+
+          '--variant-outlinedColor': getCssVar(`palette-${color}-50`),
+          '--variant-outlinedBorder': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.5)`,
+          '--variant-outlinedHoverColor': `#fff`,
+          '--variant-outlinedHoverBorder': getCssVar(`palette-${color}-300`),
+          '--variant-outlinedHoverBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.12)`,
+          '--variant-outlinedActiveBg': `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.32)`,
+          '--variant-outlinedDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.72)`,
+          '--variant-outlinedDisabledBorder': `rgba(255 255 255 / 0.2)`,
+
+          '--variant-softColor': getCssVar(`palette-common-white`),
+          '--variant-softHoverColor': getCssVar(`palette-common-white`),
+          '--variant-softBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.24)`,
+          '--variant-softHoverBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.36)`,
+          '--variant-softActiveBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.16)`,
+          '--variant-softActiveColor': `#fff`,
+          '--variant-softDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.72)`,
+          '--variant-softDisabledBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.1)`,
+
+          '--variant-solidColor': getCssVar(
+            `palette-${color}-${color === 'neutral' ? '600' : '500'}`,
+          ),
+          '--variant-solidBg': getCssVar(`palette-common-white`),
+          '--variant-solidHoverBg': getCssVar(`palette-common-white`),
+          '--variant-solidActiveBg': getCssVar(`palette-${color}-100`),
+          '--variant-solidDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.72)`,
+          '--variant-solidDisabledBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.1)`,
+        },
+      },
+      [`&, & [${INVERTED_COLORS_ATTR}]`]: skipInvertedColors(theme),
+    };
+  };
+
+/**
+ *
+ * @param color a supported theme color palette
+ * @returns (theme: ThemeFragment) => Record<DefaultColorPalette, CSSObject>
+ */
+export const applySoftInversion =
+  (color: ColorPaletteProp) => (themeProp: ThemeFragment & { theme?: ThemeFragment }) => {
+    const { theme = themeProp } = themeProp;
+    const getCssVarDefault = createGetCssVar(theme.cssVarPrefix);
+    const prefixVar = createPrefixVar(theme.cssVarPrefix);
+    const getCssVar = (cssVar: string) => {
+      const tokens = cssVar.split('-');
+      return getCssVarDefault(cssVar, theme.palette[tokens[1]][tokens[2]]);
+    };
+
+    return {
+      [INVERTED_COLORS_SELECTOR]: {
+        '--Badge-ringColor': getCssVar(`palette-${color}-softBg`),
+        '--Icon-color': 'currentColor',
+        [theme.getColorSchemeSelector('dark')]: {
+          [prefixVar('--palette-focusVisible')]: getCssVar(`palette-${color}-300`),
+          [prefixVar('--palette-background-body')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.1)`,
+          [prefixVar('--palette-background-surface')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.08)`,
+          [prefixVar('--palette-background-level1')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.2)`,
+          [prefixVar('--palette-background-level2')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.4)`,
+          [prefixVar('--palette-background-level3')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.6)`,
+          [prefixVar('--palette-text-primary')]: getCssVar(`palette-${color}-100`),
+          [prefixVar('--palette-text-secondary')]: `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.72)`,
+          [prefixVar('--palette-text-tertiary')]: `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.6)`,
+          [prefixVar('--palette-text-icon')]: `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.6)`,
+          [prefixVar('--palette-divider')]: `rgba(${getCssVar(
+            `palette-${color}-lightChannel`,
+          )} / 0.2)`,
+          '--variant-plainColor': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 1)`,
+          '--variant-plainHoverColor': getCssVar(`palette-${color}-50`),
+          '--variant-plainHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.16)`,
+          '--variant-plainActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.32)`,
+          '--variant-plainDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.72)`,
+
+          '--variant-outlinedColor': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 1)`,
+          '--variant-outlinedHoverColor': getCssVar(`palette-${color}-50`),
+          '--variant-outlinedBg': 'initial',
+          '--variant-outlinedBorder': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.4)`,
+          '--variant-outlinedHoverBorder': getCssVar(`palette-${color}-600`),
+          '--variant-outlinedHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.16)`,
+          '--variant-outlinedActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.32)`,
+          '--variant-outlinedDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.72)`,
+          '--variant-outlinedDisabledBorder': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.2)`,
+
+          '--variant-softColor': getCssVar(`palette-${color}-200`),
+          '--variant-softBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.24)`,
+          '--variant-softHoverColor': '#fff',
+          '--variant-softHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.32)`,
+          '--variant-softActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.48)`,
+          '--variant-softDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.72)`,
+          '--variant-softDisabledBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.12)`,
+
+          '--variant-solidColor': '#fff',
+          '--variant-solidBg': getCssVar(`palette-${color}-500`),
+          '--variant-solidHoverColor': '#fff',
+          '--variant-solidHoverBg': getCssVar(`palette-${color}-600`),
+          '--variant-solidActiveBg': getCssVar(`palette-${color}-600`),
+          '--variant-solidDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.72)`,
+          '--variant-solidDisabledBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.12)`,
+        },
+        // `light` (default color scheme) should come last in case that `theme.getColorSchemeSelector()` return the same value
+        [theme.getColorSchemeSelector('light')]: {
+          [prefixVar('--palette-focusVisible')]: getCssVar(`palette-${color}-500`),
+          [prefixVar('--palette-background-body')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.1)`,
+          [prefixVar('--palette-background-surface')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.08)`,
+          [prefixVar('--palette-background-level1')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.2)`,
+          [prefixVar('--palette-background-level2')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.32)`,
+          [prefixVar('--palette-background-level3')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.48)`,
+          [prefixVar('--palette-text-primary')]: getCssVar(`palette-${color}-700`),
+          [prefixVar('--palette-text-secondary')]: `rgba(${getCssVar(
+            `palette-${color}-darkChannel`,
+          )} / 0.8)`,
+          [prefixVar('--palette-text-tertiary')]: `rgba(${getCssVar(
+            `palette-${color}-darkChannel`,
+          )} / 0.68)`,
+          [prefixVar('--palette-text-icon')]: getCssVar(`palette-${color}-500`),
+          [prefixVar('--palette-divider')]: `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.32)`,
+          '--variant-plainColor': `rgba(${getCssVar(`palette-${color}-darkChannel`)} / 0.8)`,
+          '--variant-plainHoverColor': `rgba(${getCssVar(`palette-${color}-darkChannel`)} / 1)`,
+          '--variant-plainHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.12)`,
+          '--variant-plainActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.24)`,
+          '--variant-plainDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.6)`,
+
+          '--variant-outlinedColor': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 1)`,
+          '--variant-outlinedBorder': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.4)`,
+          '--variant-outlinedHoverColor': getCssVar(`palette-${color}-600`),
+          '--variant-outlinedHoverBorder': getCssVar(`palette-${color}-300`),
+          '--variant-outlinedHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.12)`,
+          '--variant-outlinedActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.24)`,
+          '--variant-outlinedDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.6)`,
+          '--variant-outlinedDisabledBorder': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.12)`,
+
+          '--variant-softColor': getCssVar(`palette-${color}-600`),
+          '--variant-softBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.8)`,
+          '--variant-softHoverColor': getCssVar(`palette-${color}-700`),
+          '--variant-softHoverBg': getCssVar(`palette-${color}-200`),
+          '--variant-softActiveBg': getCssVar(`palette-${color}-300`),
+          '--variant-softDisabledColor': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.6)`,
+          '--variant-softDisabledBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.08)`,
+
+          '--variant-solidColor': getCssVar('palette-common-white'),
+          '--variant-solidBg': getCssVar(`palette-${color}-${color === 'neutral' ? '700' : '500'}`),
+          '--variant-solidHoverColor': getCssVar('palette-common-white'),
+          '--variant-solidHoverBg': getCssVar(
+            `palette-${color}-${color === 'neutral' ? '600' : '600'}`,
+          ),
+          '--variant-solidActiveBg': getCssVar(
+            `palette-${color}-${color === 'neutral' ? '600' : '600'}`,
+          ),
+          '--variant-solidDisabledColor': `rgba(${getCssVar(
+            `palette-${color}-mainChannel`,
+          )} / 0.6)`,
+          '--variant-solidDisabledBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.08)`,
+        },
+      },
+      [`&, & [${INVERTED_COLORS_ATTR}]`]: skipInvertedColors(theme),
+    };
+  };
diff --git a/packages/mui-joy/src/colorInversion/index.ts b/packages/mui-joy/src/colorInversion/index.ts
new file mode 100644
index 00000000000000..a54b6428867dc9
--- /dev/null
+++ b/packages/mui-joy/src/colorInversion/index.ts
@@ -0,0 +1 @@
+export { applySolidInversion, applySoftInversion } from './colorInversionUtils';
diff --git a/packages/mui-joy/src/styles/ColorInversion.test.js b/packages/mui-joy/src/styles/ColorInversion.test.js
deleted file mode 100644
index 7b1a4af927157b..00000000000000
--- a/packages/mui-joy/src/styles/ColorInversion.test.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as React from 'react';
-import { expect } from 'chai';
-import sinon from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
-import useThemeProps from './useThemeProps';
-import ThemeProvider from './ThemeProvider';
-import ColorInversion, { useColorInversion } from './ColorInversion';
-import { createSolidInversion } from './variantUtils';
-
-const OVERRIDABLE_VARIANT = ['plain', 'outlined', 'soft', 'solid'];
-
-function Parent({ children, invertedColors }) {
-  return (
-    <ColorInversion.Provider value={invertedColors ? OVERRIDABLE_VARIANT : undefined}>
-      {children}
-    </ColorInversion.Provider>
-  );
-}
-
-const Child = (inProps) => {
-  const props = useThemeProps({ name: 'Child', props: inProps });
-  const { getColor } = useColorInversion(props.variant);
-  const finalColor = getColor(inProps.color, props.color || 'default');
-  return finalColor;
-};
-
-describe('ColorInversion', () => {
-  const { render } = createRenderer();
-
-  it('createSolidInversion automatically create solid override if the variable is in the correct format', () => {
-    const result = createSolidInversion({
-      cssVarPrefix: 'foo',
-      palette: {
-        primary: {
-          plainColor: '',
-        },
-        secondary: {
-          softBg: '',
-        },
-        alternate: {
-          solidBg: '',
-        },
-      },
-    });
-    // partially check the result
-    sinon.assert.match(result, {
-      primary: {
-        '--variant-plainColor': 'var(--foo-palette-primary-50)',
-      },
-      secondary: {
-        '--variant-softBg': 'rgba(var(--foo-palette-secondary-lightChannel) / 0.24)',
-      },
-      alternate: {
-        '--variant-solidBg': 'var(--foo-palette-common-white)',
-      },
-    });
-  });
-
-  it('use the default color if no provider', () => {
-    const { container } = render(<Child variant="plain" />);
-    expect(container.firstChild).to.have.text('default');
-  });
-
-  it('use the default color if not enable', () => {
-    const { container } = render(
-      <Parent variant="solid" invertedColors={false}>
-        <Child variant="plain" />
-      </Parent>,
-    );
-    expect(container.firstChild).to.have.text('default');
-  });
-
-  describe('variant override enabled', () => {
-    it('use instance color if provided', () => {
-      const { container } = render(
-        <Parent variant="solid" invertedColors>
-          <Child variant="plain" color="primary" />
-        </Parent>,
-      );
-      expect(container.firstChild).to.have.text('primary');
-    });
-
-    describe('parent variant override', () => {
-      it('solid', () => {
-        const { container } = render(
-          <Parent variant="solid" invertedColors>
-            <Child variant="plain" />
-          </Parent>,
-        );
-        expect(container.firstChild).to.have.text('context');
-      });
-
-      it('soft', () => {
-        const { container } = render(
-          <Parent variant="soft" invertedColors>
-            <Child variant="plain" />
-          </Parent>,
-        );
-        expect(container.firstChild).to.have.text('context');
-      });
-    });
-  });
-
-  describe('theme default props configured', () => {
-    it('use the theme color if no provider', () => {
-      const { container } = render(
-        <ThemeProvider theme={{ components: { Child: { defaultProps: { color: 'primary' } } } }}>
-          <Child />
-        </ThemeProvider>,
-      );
-      expect(container.firstChild).to.have.text('primary');
-    });
-
-    it('use "context" color even though theme default props is configured', () => {
-      const { container } = render(
-        <ThemeProvider theme={{ components: { Child: { defaultProps: { color: 'primary' } } } }}>
-          <Parent variant="solid" invertedColors>
-            <Child variant="plain" />
-          </Parent>
-        </ThemeProvider>,
-      );
-      expect(container.firstChild).to.have.text('context');
-    });
-  });
-});
diff --git a/packages/mui-joy/src/styles/ColorInversion.tsx b/packages/mui-joy/src/styles/ColorInversion.tsx
deleted file mode 100644
index 3c03b8277a59f0..00000000000000
--- a/packages/mui-joy/src/styles/ColorInversion.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-import * as React from 'react';
-import { useTheme } from './ThemeProvider';
-import defaultTheme from './defaultTheme';
-import { ColorPaletteProp, VariantProp } from './types';
-
-const ColorInversion = React.createContext<undefined | Array<VariantProp>>(undefined);
-
-export const useColorInversion = (childVariant: VariantProp | undefined) => {
-  const overridableVariants = React.useContext(ColorInversion);
-  return {
-    /**
-     * Resolve the `color` value for the component.
-     * @param {ColorPaletteProp | 'inherit' | undefined} instanceColorProp The color defined on the instance.
-     * @param {ColorPaletteProp | 'inherit' | undefined} defaultColorProp The default color to use when variant inversion is not enabled.
-     */
-    getColor: (
-      instanceColorProp: ColorPaletteProp | 'inherit' | undefined,
-      defaultColorProp: ColorPaletteProp | 'inherit' | undefined,
-    ): ColorPaletteProp | 'context' | undefined => {
-      if (overridableVariants && childVariant) {
-        if (overridableVariants.includes(childVariant)) {
-          // @ts-ignore internal logic
-          return instanceColorProp || 'context';
-        }
-      }
-      // @ts-ignore internal logic
-      return instanceColorProp || defaultColorProp;
-    },
-  };
-};
-
-interface ColorInversionProviderProps {
-  children: React.ReactNode;
-  variant?: VariantProp;
-}
-
-export function ColorInversionProvider({ children, variant }: ColorInversionProviderProps) {
-  const theme = useTheme();
-  return (
-    <ColorInversion.Provider
-      value={
-        variant
-          ? // `theme` could come from other emotion/styled-components context.
-            (theme.colorInversionConfig ?? defaultTheme.colorInversionConfig)[variant]
-          : undefined
-      }
-    >
-      {children}
-    </ColorInversion.Provider>
-  );
-}
-
-export default ColorInversion;
diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
index 7d139fda1b3ec7..6bf22459d370ba 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, screen } from '@mui-internal/test-utils';
-import { CssVarsProvider, extendTheme, useTheme, shouldSkipGeneratingVar } from '@mui/joy/styles';
+import { CssVarsProvider, useTheme, shouldSkipGeneratingVar } from '@mui/joy/styles';
 
 describe('[Joy] CssVarsProvider', () => {
   let originalMatchmedia: typeof window.matchMedia;
@@ -439,68 +439,6 @@ describe('[Joy] CssVarsProvider', () => {
     });
   });
 
-  describe('Color Inversion', () => {
-    it('should be customizable', () => {
-      function Text() {
-        const theme = useTheme();
-        return <div>{theme.colorInversion.solid.primary['--variant-plain'] as string}</div>;
-      }
-
-      const { container } = render(
-        <CssVarsProvider
-          theme={extendTheme({
-            colorInversion: {
-              solid: {
-                primary: {
-                  '--variant-plain': 'black',
-                },
-              },
-            },
-          })}
-        >
-          <Text />
-        </CssVarsProvider>,
-      );
-
-      expect(container.firstChild?.textContent).to.equal('black');
-    });
-
-    it('should be customizable with a callback', () => {
-      function Text() {
-        const theme = useTheme();
-        return (
-          <div>
-            {
-              (theme.colorInversion.soft.primary['[data-joy-color-scheme="dark"] &'] as any)[
-                '--variant-plain'
-              ]
-            }
-          </div>
-        );
-      }
-
-      const { container } = render(
-        <CssVarsProvider
-          theme={extendTheme({
-            colorInversion: (theme) => ({
-              soft: {
-                primary: {
-                  [theme.getColorSchemeSelector('dark')]: {
-                    '--variant-plain': 'red',
-                  },
-                },
-              },
-            }),
-          })}
-        >
-          <Text />
-        </CssVarsProvider>,
-      );
-
-      expect(container.firstChild?.textContent).to.equal('red');
-    });
-  });
-
   describe('Focus', () => {
     it('contain expected focus', function test() {
       function Text() {
@@ -571,21 +509,6 @@ describe('[Joy] CssVarsProvider', () => {
         ].join(','),
       );
     });
-
-    it('contain expected colorInversion', function test() {
-      function Text() {
-        const theme = useTheme();
-        return <div>{Object.keys(theme.colorInversion).join(',')}</div>;
-      }
-
-      const { container } = render(
-        <CssVarsProvider>
-          <Text />
-        </CssVarsProvider>,
-      );
-
-      expect(container.firstChild?.textContent).to.equal(['soft', 'solid'].join(','));
-    });
   });
 
   describe('Spacing', () => {
diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx
index 0195d61b27ea59..4d5a9ac4e3f260 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx
@@ -1,10 +1,7 @@
 'use client';
-import { deepmerge } from '@mui/utils';
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import defaultTheme from './defaultTheme';
-import { CssVarsThemeOptions } from './extendTheme';
-import { createSoftInversion, createSolidInversion } from './variantUtils';
-import type { Theme, DefaultColorScheme, ExtendedColorScheme } from './types';
+import type { DefaultColorScheme, ExtendedColorScheme } from './types';
 import THEME_ID from './identifier';
 
 const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
@@ -20,20 +17,6 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
     light: 'light',
     dark: 'dark',
   },
-  resolveTheme: (mergedTheme: Theme) => {
-    const colorInversionInput = mergedTheme.colorInversion as CssVarsThemeOptions['colorInversion'];
-    mergedTheme.colorInversion = deepmerge(
-      {
-        soft: createSoftInversion(mergedTheme),
-        solid: createSolidInversion(mergedTheme),
-      },
-      typeof colorInversionInput === 'function'
-        ? colorInversionInput(mergedTheme)
-        : colorInversionInput,
-      { clone: false },
-    );
-    return mergedTheme;
-  },
 });
 
 export { CssVarsProvider, useColorScheme, getInitColorSchemeScript };
diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js
index d0d8ce22df80a8..154e11cbd2707a 100644
--- a/packages/mui-joy/src/styles/defaultTheme.test.js
+++ b/packages/mui-joy/src/styles/defaultTheme.test.js
@@ -24,8 +24,6 @@ describe('defaultTheme', () => {
         'zIndex',
         'typography',
         'variants',
-        'colorInversion',
-        'colorInversionConfig',
         'vars',
         'cssVarPrefix',
         'getColorSchemeSelector',
diff --git a/packages/mui-joy/src/styles/extendTheme.spec.ts b/packages/mui-joy/src/styles/extendTheme.spec.ts
index 73e42542bd3583..38c31364a17de1 100644
--- a/packages/mui-joy/src/styles/extendTheme.spec.ts
+++ b/packages/mui-joy/src/styles/extendTheme.spec.ts
@@ -71,16 +71,6 @@ import { TooltipOwnerState } from '@mui/joy/Tooltip';
 import { TypographyOwnerState } from '@mui/joy/Typography';
 
 extendTheme({
-  colorInversion: (theme) => ({
-    soft: {
-      primary: {
-        '--variant-plainColor': `rgba(${theme.getCssVar('palette-primary-darkChannel')} / 0.4)`,
-        [theme.getColorSchemeSelector('dark')]: {
-          '--variant-plainColor': `rgba(${theme.getCssVar('palette-primary-lightChannel')} / 0.4)`,
-        },
-      },
-    },
-  }),
   components: {
     JoyAccordion: {
       defaultProps: {
diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js
index 88a47614004503..7568b02be2dbcf 100644
--- a/packages/mui-joy/src/styles/extendTheme.test.js
+++ b/packages/mui-joy/src/styles/extendTheme.test.js
@@ -22,13 +22,11 @@ describe('extendTheme', () => {
         'shadow',
         'zIndex',
         'typography',
-        'colorInversionConfig',
         'variants',
         'cssVarPrefix',
         'palette',
         'vars',
         'getColorSchemeSelector',
-        'colorInversion',
         'unstable_sxConfig',
         'unstable_sx',
         'shouldSkipGeneratingVar',
diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts
index 20193542959c65..818cd124fcbdb0 100644
--- a/packages/mui-joy/src/styles/extendTheme.ts
+++ b/packages/mui-joy/src/styles/extendTheme.ts
@@ -17,11 +17,11 @@ import { DefaultColorScheme, ExtendedColorScheme, SupportedColorScheme } from '.
 import { ColorSystem, ColorPaletteProp, Palette, PaletteOptions } from './types/colorSystem';
 import { Focus } from './types/focus';
 import { TypographySystemOptions, FontSize } from './types/typography';
-import { Variants, ColorInversion, ColorInversionConfig } from './types/variants';
+import { Variants } from './types/variants';
 import { Theme, ThemeCssVar, ThemeScalesOptions, SxProps, ThemeVars } from './types';
 import { Components } from './components';
 import { generateUtilityClass } from '../className';
-import { createSoftInversion, createSolidInversion, createVariant } from './variantUtils';
+import { createVariant } from './variantUtils';
 import { MergeDefault } from './types/utils';
 
 type Partial2Level<T> = {
@@ -66,10 +66,6 @@ export interface CssVarsThemeOptions extends Partial2Level<ThemeScalesOptions> {
   focus?: Partial<Focus>;
   typography?: Partial<TypographySystemOptions>;
   variants?: Partial2Level<Variants>;
-  colorInversion?:
-    | Partial2Level<ColorInversion>
-    | ((theme: Theme) => Partial2Level<ColorInversion>);
-  colorInversionConfig?: ColorInversionConfig;
   breakpoints?: BreakpointsOptions;
   spacing?: SpacingOptions;
   components?: Components<Theme>;
@@ -95,7 +91,6 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     spacing,
     components: componentsInput,
     variants: variantsInput,
-    colorInversion: colorInversionInput,
     shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
     ...scalesInput
   } = themeOptions || {};
@@ -549,13 +544,9 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
                   color: `var(--Icon-color, ${theme.vars.palette.text.icon})`,
                   ...(ownerState.color &&
                     ownerState.color !== 'inherit' &&
-                    ownerState.color !== 'context' &&
                     themeProp.vars.palette[ownerState.color!] && {
                       color: `rgba(${themeProp.vars.palette[ownerState.color]?.mainChannel} / 1)`,
                     }),
-                  ...(ownerState.color === 'context' && {
-                    color: themeProp.vars.palette.text.secondary,
-                  }),
                 }),
                 ...(instanceFontSize &&
                   instanceFontSize !== 'inherit' && {
@@ -571,10 +562,6 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     cssVarPrefix,
     getCssVar,
     spacing: createSpacing(spacing),
-    colorInversionConfig: {
-      soft: ['plain', 'outlined', 'soft', 'solid'],
-      solid: ['plain', 'outlined', 'soft', 'solid'],
-    },
   } as unknown as Theme; // Need type casting due to module augmentation inside the repo
 
   /**
@@ -674,18 +661,5 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
 
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
 
-  // @ts-ignore if the colorInversion is provided as callbacks, it needs to be resolved in the CssVarsProvider
-  theme.colorInversion =
-    typeof colorInversionInput === 'function'
-      ? colorInversionInput
-      : deepmerge(
-          {
-            soft: createSoftInversion(theme, true),
-            solid: createSolidInversion(theme, true),
-          },
-          colorInversionInput || {},
-          { clone: false },
-        );
-
   return theme;
 }
diff --git a/packages/mui-joy/src/styles/index.ts b/packages/mui-joy/src/styles/index.ts
index 64dab7c658b1e9..4805789c378999 100644
--- a/packages/mui-joy/src/styles/index.ts
+++ b/packages/mui-joy/src/styles/index.ts
@@ -81,7 +81,6 @@ export { default as styled } from './styled';
 export { default as ThemeProvider } from './ThemeProvider';
 export * from './ThemeProvider';
 export { default as useThemeProps } from './useThemeProps';
-export { ColorInversionProvider, useColorInversion } from './ColorInversion';
 export { default as extendTheme, createGetCssVar } from './extendTheme';
 export type { CssVarsThemeOptions } from './extendTheme';
 export { default as StyledEngineProvider } from './StyledEngineProvider';
diff --git a/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts b/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts
index 90e293742fc2e1..d61b8f695cc5b8 100644
--- a/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts
+++ b/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts
@@ -1,6 +1,6 @@
 export default function shouldSkipGeneratingVar(keys: string[]) {
   return (
-    !!keys[0].match(/^(typography|variants|breakpoints|colorInversion|colorInversionConfig)$/) ||
+    !!keys[0].match(/^(typography|variants|breakpoints)$/) ||
     !!keys[0].match(/sxConfig$/) || // ends with sxConfig
     (keys[0] === 'palette' && !!keys[1]?.match(/^(mode)$/)) ||
     (keys[0] === 'focus' && keys[1] !== 'thickness')
diff --git a/packages/mui-joy/src/styles/types/colorSystem.ts b/packages/mui-joy/src/styles/types/colorSystem.ts
index 22837ba7d47c97..92bc781248e5ca 100644
--- a/packages/mui-joy/src/styles/types/colorSystem.ts
+++ b/packages/mui-joy/src/styles/types/colorSystem.ts
@@ -176,8 +176,4 @@ export interface ColorSystem {
   shadowChannel: string;
 }
 
-export type ApplyColorInversion<T extends { color?: ColorPaletteProp | 'inherit' }> = Simplify<
-  Omit<T, 'color'> & {
-    color: T['color'] | 'context';
-  }
->;
+export type ApplyColorInversion<T extends { color?: ColorPaletteProp | 'inherit' }> = Simplify<T>;
diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts
index 598b77fce1c7f8..c380d259ebcc12 100644
--- a/packages/mui-joy/src/styles/types/theme.ts
+++ b/packages/mui-joy/src/styles/types/theme.ts
@@ -23,7 +23,7 @@ import {
   DefaultFontWeight,
   DefaultLineHeight,
 } from './typography';
-import { Variants, ColorInversion, ColorInversionConfig } from './variants';
+import { Variants } from './variants';
 import { DefaultZIndex, ZIndex } from './zIndex';
 import { MergeDefault } from './utils';
 
@@ -98,8 +98,6 @@ export interface Theme extends ThemeScales, RuntimeColorSystem {
   focus: Focus;
   typography: TypographySystem;
   variants: Variants;
-  colorInversion: ColorInversion;
-  colorInversionConfig: ColorInversionConfig;
   spacing: Spacing;
   breakpoints: Breakpoints;
   cssVarPrefix: string;
diff --git a/packages/mui-joy/src/styles/types/variants.ts b/packages/mui-joy/src/styles/types/variants.ts
index 626e21d167d16f..88c6e98ea46679 100644
--- a/packages/mui-joy/src/styles/types/variants.ts
+++ b/packages/mui-joy/src/styles/types/variants.ts
@@ -18,25 +18,25 @@ export type DefaultVariantKey =
 
 // Split interfaces into multiple chunks so that they can be augmented independently
 
-export interface VariantPlain extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantPlainHover extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantPlainActive extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantPlainDisabled extends Record<ColorPaletteProp | 'context', CSSObject> {}
-
-export interface VariantOutlined extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantOutlinedHover extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantOutlinedActive extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantOutlinedDisabled extends Record<ColorPaletteProp | 'context', CSSObject> {}
-
-export interface VariantSoft extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantSoftHover extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantSoftActive extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantSoftDisabled extends Record<ColorPaletteProp | 'context', CSSObject> {}
-
-export interface VariantSolid extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantSolidHover extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantSolidActive extends Record<ColorPaletteProp | 'context', CSSObject> {}
-export interface VariantSolidDisabled extends Record<ColorPaletteProp | 'context', CSSObject> {}
+export interface VariantPlain extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantPlainHover extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantPlainActive extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantPlainDisabled extends Record<ColorPaletteProp, CSSObject> {}
+
+export interface VariantOutlined extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantOutlinedHover extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantOutlinedActive extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantOutlinedDisabled extends Record<ColorPaletteProp, CSSObject> {}
+
+export interface VariantSoft extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantSoftHover extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantSoftActive extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantSoftDisabled extends Record<ColorPaletteProp, CSSObject> {}
+
+export interface VariantSolid extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantSolidHover extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantSolidActive extends Record<ColorPaletteProp, CSSObject> {}
+export interface VariantSolidDisabled extends Record<ColorPaletteProp, CSSObject> {}
 
 export interface Variants {
   plain: VariantPlain;
@@ -64,13 +64,3 @@ export interface VariantPlainInversion extends Record<ColorPaletteProp, CSSObjec
 export interface VariantOutlinedInversion extends Record<ColorPaletteProp, CSSObject> {}
 export interface VariantSoftInversion extends Record<ColorPaletteProp, CSSObject> {}
 export interface VariantSolidInversion extends Record<ColorPaletteProp, CSSObject> {}
-
-export interface ColorInversion {
-  plain?: VariantPlainInversion;
-  outlined?: VariantOutlinedInversion;
-  soft: VariantSoftInversion;
-  solid: VariantSolidInversion;
-}
-
-export interface ColorInversionConfig
-  extends Partial<Record<VariantProp, Array<VariantProp> | undefined>> {}
diff --git a/packages/mui-joy/src/styles/variantUtils.test.js b/packages/mui-joy/src/styles/variantUtils.test.js
index 3d02f0452bf10c..24befca0656dce 100644
--- a/packages/mui-joy/src/styles/variantUtils.test.js
+++ b/packages/mui-joy/src/styles/variantUtils.test.js
@@ -302,7 +302,8 @@ describe('variant utils', () => {
         },
       });
       expect(result.primary).to.deep.include({
-        borderColor: 'var(--joy-palette-primary-outlinedActiveBorder, #aaa)',
+        borderColor:
+          'var(--variant-outlinedActiveBorder, var(--joy-palette-primary-outlinedActiveBorder, #aaa))',
       });
     });
 
@@ -319,13 +320,13 @@ describe('variant utils', () => {
       };
       const softResult = createVariant('soft', theme);
       expect(softResult.customColor).to.deep.include({
-        color: 'var(--joy-palette-customColor-softColor, #aaa)',
-        backgroundColor: 'var(--joy-palette-customColor-softBg, #bbb)',
+        color: 'var(--variant-softColor, var(--joy-palette-customColor-softColor, #aaa))',
+        backgroundColor: 'var(--variant-softBg, var(--joy-palette-customColor-softBg, #bbb))',
       });
 
       const softHoverResult = createVariant('softHover', theme);
       expect(softHoverResult.customColor).to.deep.include({
-        color: 'var(--joy-palette-customColor-softHoverColor, #ccc)',
+        color: 'var(--variant-softHoverColor, var(--joy-palette-customColor-softHoverColor, #ccc))',
       });
     });
 
diff --git a/packages/mui-joy/src/styles/variantUtils.ts b/packages/mui-joy/src/styles/variantUtils.ts
index 6d8f512b530a2b..c02969a48d9119 100644
--- a/packages/mui-joy/src/styles/variantUtils.ts
+++ b/packages/mui-joy/src/styles/variantUtils.ts
@@ -1,5 +1,4 @@
-import { CSSObject, unstable_createGetCssVar as createGetCssVar } from '@mui/system';
-import { DefaultColorScheme, ExtendedColorScheme } from './types/colorScheme';
+import { CSSObject } from '@mui/system';
 import { DefaultColorPalette, PaletteVariant } from './types/colorSystem';
 import { VariantKey } from './types/variants';
 
@@ -98,11 +97,6 @@ interface ThemeFragment {
   palette: Record<string, any>;
 }
 
-const createPrefixVar = (cssVarPrefix: string | undefined | null) => {
-  return (cssVar: string) =>
-    `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}${cssVar.replace(/^--/, '')}`;
-};
-
 // It's used only in extendTheme, so it's safe to always include default values
 export const createVariant = (variant: VariantKey, theme?: ThemeFragment) => {
   let result = {} as Record<DefaultColorPalette | 'context', CSSObject>;
@@ -116,8 +110,14 @@ export const createVariant = (variant: VariantKey, theme?: ThemeFragment) => {
       if (isVariantPalette(colorPalette) && typeof colorPalette === 'object') {
         result = {
           ...result,
-          [color]: createVariantStyle(variant, colorPalette, (variantVar) =>
-            getCssVar(`palette-${color}-${variantVar}`, palette[color][variantVar]),
+          [color]: createVariantStyle(
+            variant,
+            colorPalette,
+            (variantVar) =>
+              `var(--variant-${variantVar}, ${getCssVar(
+                `palette-${color}-${variantVar}`,
+                palette[color][variantVar],
+              )})`,
           ),
         };
       }
@@ -157,266 +157,3 @@ export const createVariant = (variant: VariantKey, theme?: ThemeFragment) => {
   });
   return result;
 };
-
-export const createSoftInversion = (
-  theme: ThemeFragment & {
-    getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string;
-  },
-  addDefaultValues?: boolean,
-) => {
-  const getCssVarDefault = createGetCssVar(theme.cssVarPrefix);
-  const prefixVar = createPrefixVar(theme.cssVarPrefix);
-  const result = {} as Record<DefaultColorPalette, CSSObject>;
-
-  const getCssVar = addDefaultValues
-    ? (cssVar: string) => {
-        const tokens = cssVar.split('-');
-        const color = tokens[1];
-        const value = tokens[2];
-        return getCssVarDefault(cssVar, theme.palette?.[color]?.[value]);
-      }
-    : getCssVarDefault;
-  Object.entries(theme.palette).forEach((entry) => {
-    const [color, colorPalette] = entry as [
-      DefaultColorPalette,
-      string | number | Record<string, any>,
-    ];
-    if (isVariantPalette(colorPalette)) {
-      result[color] = {
-        '--Badge-ringColor': getCssVar(`palette-${color}-softBg`),
-        [theme.getColorSchemeSelector('dark')]: {
-          [prefixVar('--palette-focusVisible')]: getCssVar(`palette-${color}-300`),
-          [prefixVar('--palette-background-body')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.1)`,
-          [prefixVar('--palette-background-surface')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.08)`,
-          [prefixVar('--palette-background-level1')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.2)`,
-          [prefixVar('--palette-background-level2')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.4)`,
-          [prefixVar('--palette-background-level3')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.6)`,
-          [prefixVar('--palette-text-primary')]: getCssVar(`palette-${color}-100`),
-          [prefixVar('--palette-text-secondary')]: `rgba(${getCssVar(
-            `palette-${color}-lightChannel`,
-          )} / 0.72)`,
-          [prefixVar('--palette-text-tertiary')]: `rgba(${getCssVar(
-            `palette-${color}-lightChannel`,
-          )} / 0.6)`,
-          [prefixVar('--palette-text-icon')]: `rgba(${getCssVar(
-            `palette-${color}-lightChannel`,
-          )} / 0.6)`,
-          [prefixVar('--palette-divider')]: `rgba(${getCssVar(
-            `palette-${color}-lightChannel`,
-          )} / 0.2)`,
-          '--variant-plainColor': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 1)`,
-          '--variant-plainHoverColor': getCssVar(`palette-${color}-50`),
-          '--variant-plainHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.16)`,
-          '--variant-plainActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.32)`,
-          '--variant-plainDisabledColor': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.72)`,
-
-          '--variant-outlinedColor': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 1)`,
-          '--variant-outlinedHoverColor': getCssVar(`palette-${color}-50`),
-          '--variant-outlinedBg': 'initial',
-          '--variant-outlinedBorder': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.4)`,
-          '--variant-outlinedHoverBorder': getCssVar(`palette-${color}-600`),
-          '--variant-outlinedHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.16)`,
-          '--variant-outlinedActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.32)`,
-          '--variant-outlinedDisabledColor': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.72)`,
-          '--variant-outlinedDisabledBorder': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.2)`,
-
-          '--variant-softColor': getCssVar(`palette-${color}-200`),
-          '--variant-softBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.24)`,
-          '--variant-softHoverColor': '#fff',
-          '--variant-softHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.32)`,
-          '--variant-softActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.48)`,
-          '--variant-softDisabledColor': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.72)`,
-          '--variant-softDisabledBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.12)`,
-
-          '--variant-solidColor': '#fff',
-          '--variant-solidBg': getCssVar(`palette-${color}-500`),
-          '--variant-solidHoverColor': '#fff',
-          '--variant-solidHoverBg': getCssVar(`palette-${color}-600`),
-          '--variant-solidActiveBg': getCssVar(`palette-${color}-600`),
-          '--variant-solidDisabledColor': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.72)`,
-          '--variant-solidDisabledBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.12)`,
-        },
-        // `light` (default color scheme) should come last in case that `theme.getColorSchemeSelector()` return the same value
-        [theme.getColorSchemeSelector('light')]: {
-          [prefixVar('--palette-focusVisible')]: getCssVar(`palette-${color}-500`),
-          [prefixVar('--palette-background-body')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.1)`,
-          [prefixVar('--palette-background-surface')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.08)`,
-          [prefixVar('--palette-background-level1')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.2)`,
-          [prefixVar('--palette-background-level2')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.32)`,
-          [prefixVar('--palette-background-level3')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.48)`,
-          [prefixVar('--palette-text-primary')]: getCssVar(`palette-${color}-700`),
-          [prefixVar('--palette-text-secondary')]: `rgba(${getCssVar(
-            `palette-${color}-darkChannel`,
-          )} / 0.8)`,
-          [prefixVar('--palette-text-tertiary')]: `rgba(${getCssVar(
-            `palette-${color}-darkChannel`,
-          )} / 0.68)`,
-          [prefixVar('--palette-text-icon')]: getCssVar(`palette-${color}-500`),
-          [prefixVar('--palette-divider')]: `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.32)`,
-          '--variant-plainColor': `rgba(${getCssVar(`palette-${color}-darkChannel`)} / 0.8)`,
-          '--variant-plainHoverColor': `rgba(${getCssVar(`palette-${color}-darkChannel`)} / 1)`,
-          '--variant-plainHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.12)`,
-          '--variant-plainActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.24)`,
-          '--variant-plainDisabledColor': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.6)`,
-
-          '--variant-outlinedColor': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 1)`,
-          '--variant-outlinedBorder': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.4)`,
-          '--variant-outlinedHoverColor': getCssVar(`palette-${color}-600`),
-          '--variant-outlinedHoverBorder': getCssVar(`palette-${color}-300`),
-          '--variant-outlinedHoverBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.12)`,
-          '--variant-outlinedActiveBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.24)`,
-          '--variant-outlinedDisabledColor': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.6)`,
-          '--variant-outlinedDisabledBorder': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.12)`,
-
-          '--variant-softColor': getCssVar(`palette-${color}-600`),
-          '--variant-softBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.8)`,
-          '--variant-softHoverColor': getCssVar(`palette-${color}-700`),
-          '--variant-softHoverBg': getCssVar(`palette-${color}-200`),
-          '--variant-softActiveBg': getCssVar(`palette-${color}-300`),
-          '--variant-softDisabledColor': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.6)`,
-          '--variant-softDisabledBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.08)`,
-
-          '--variant-solidColor': getCssVar('palette-common-white'),
-          '--variant-solidBg': getCssVar(`palette-${color}-${color === 'neutral' ? '700' : '500'}`),
-          '--variant-solidHoverColor': getCssVar('palette-common-white'),
-          '--variant-solidHoverBg': getCssVar(
-            `palette-${color}-${color === 'neutral' ? '600' : '600'}`,
-          ),
-          '--variant-solidActiveBg': getCssVar(
-            `palette-${color}-${color === 'neutral' ? '600' : '600'}`,
-          ),
-          '--variant-solidDisabledColor': `rgba(${getCssVar(
-            `palette-${color}-mainChannel`,
-          )} / 0.6)`,
-          '--variant-solidDisabledBg': `rgba(${getCssVar(`palette-${color}-mainChannel`)} / 0.08)`,
-        },
-      };
-    }
-  });
-  return result;
-};
-
-export const createSolidInversion = (theme: ThemeFragment, addDefaultValues?: boolean) => {
-  const getCssVarDefault = createGetCssVar(theme.cssVarPrefix);
-  const prefixVar = createPrefixVar(theme.cssVarPrefix);
-  const result = {} as Record<DefaultColorPalette, CSSObject>;
-
-  const getCssVar = addDefaultValues
-    ? (cssVar: string) => {
-        const tokens = cssVar.split('-');
-        const color = tokens[1];
-        const value = tokens[2];
-        return getCssVarDefault(cssVar, theme.palette[color][value]);
-      }
-    : getCssVarDefault;
-
-  Object.entries(theme.palette).forEach((entry) => {
-    const [color, colorPalette] = entry as [
-      DefaultColorPalette,
-      string | number | Record<string, any>,
-    ];
-    if (isVariantPalette(colorPalette)) {
-      result[color] = {
-        colorScheme: 'dark',
-        '--Badge-ringColor': getCssVar(`palette-${color}-solidBg`),
-        [prefixVar('--palette-focusVisible')]: getCssVar(`palette-${color}-200`),
-        [prefixVar('--palette-background-body')]: 'rgba(0 0 0 / 0.1)',
-        [prefixVar('--palette-background-surface')]: 'rgba(0 0 0 / 0.06)',
-        [prefixVar('--palette-background-popup')]: getCssVar(`palette-${color}-700`),
-        [prefixVar('--palette-background-level1')]: `rgba(${getCssVar(
-          `palette-${color}-darkChannel`,
-        )} / 0.2)`,
-        [prefixVar('--palette-background-level2')]: `rgba(${getCssVar(
-          `palette-${color}-darkChannel`,
-        )} / 0.36)`,
-        [prefixVar('--palette-background-level3')]: `rgba(${getCssVar(
-          `palette-${color}-darkChannel`,
-        )} / 0.6)`,
-        [prefixVar('--palette-text-primary')]: getCssVar(`palette-common-white`),
-        [prefixVar('--palette-text-secondary')]: getCssVar(`palette-${color}-200`),
-        [prefixVar('--palette-text-tertiary')]: getCssVar(`palette-${color}-300`),
-        [prefixVar('--palette-text-icon')]: getCssVar(`palette-${color}-200`),
-        [prefixVar('--palette-divider')]: `rgba(${getCssVar(
-          `palette-${color}-lightChannel`,
-        )} / 0.32)`,
-
-        '--variant-plainColor': getCssVar(`palette-${color}-50`),
-        '--variant-plainHoverColor': `#fff`,
-        '--variant-plainHoverBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.12)`,
-        '--variant-plainActiveBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.32)`,
-        '--variant-plainDisabledColor': `rgba(${getCssVar(
-          `palette-${color}-lightChannel`,
-        )} / 0.72)`,
-
-        '--variant-outlinedColor': getCssVar(`palette-${color}-50`),
-        '--variant-outlinedBorder': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.5)`,
-        '--variant-outlinedHoverColor': `#fff`,
-        '--variant-outlinedHoverBorder': getCssVar(`palette-${color}-300`),
-        '--variant-outlinedHoverBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.12)`,
-        '--variant-outlinedActiveBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.32)`,
-        '--variant-outlinedDisabledColor': `rgba(${getCssVar(
-          `palette-${color}-lightChannel`,
-        )} / 0.72)`,
-        '--variant-outlinedDisabledBorder': `rgba(255 255 255 / 0.2)`,
-
-        '--variant-softColor': getCssVar(`palette-common-white`),
-        '--variant-softHoverColor': getCssVar(`palette-common-white`),
-        '--variant-softBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.24)`,
-        '--variant-softHoverBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.36)`,
-        '--variant-softActiveBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.16)`,
-        '--variant-softDisabledColor': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.72)`,
-        '--variant-softDisabledBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.1)`,
-
-        '--variant-solidColor': getCssVar(
-          `palette-${color}-${color === 'neutral' ? '600' : '500'}`,
-        ),
-        '--variant-solidBg': getCssVar(`palette-common-white`),
-        '--variant-solidHoverBg': getCssVar(`palette-common-white`),
-        '--variant-solidActiveBg': getCssVar(`palette-${color}-100`),
-        '--variant-solidDisabledColor': `rgba(${getCssVar(
-          `palette-${color}-lightChannel`,
-        )} / 0.72)`,
-        '--variant-solidDisabledBg': `rgba(${getCssVar(`palette-${color}-lightChannel`)} / 0.1)`,
-      };
-    }
-  });
-  return result;
-};
diff --git a/packages/mui-joy/src/utils/useSlot.test.tsx b/packages/mui-joy/src/utils/useSlot.test.tsx
index 0684216f95ac35..7aab3a0233e590 100644
--- a/packages/mui-joy/src/utils/useSlot.test.tsx
+++ b/packages/mui-joy/src/utils/useSlot.test.tsx
@@ -2,11 +2,9 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui-internal/test-utils';
 import { Popper } from '@mui/base/Popper';
-import { ColorPaletteProp, styled, VariantProp } from '../styles';
-import { CreateSlotsAndSlotProps, SlotProps } from './types';
+import { styled } from '../styles';
+import { SlotProps } from './types';
 import useSlot from './useSlot';
-import { ApplyColorInversion } from '../styles/types';
-import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
 
 describe('useSlot', () => {
   const { render } = createRenderer();
@@ -289,105 +287,4 @@ describe('useSlot', () => {
       expect(getByRole('menuitem')).to.have.tagName('div');
     });
   });
-
-  describe('color inversion', () => {
-    const ItemRoot = styled('button')({});
-    const ItemDecorator = styled('span')({});
-    type Props = {
-      className?: string;
-      component?: React.ElementType;
-      href?: string;
-      variant?: VariantProp;
-      color?: ColorPaletteProp;
-    };
-    type OwnerState = Partial<ApplyColorInversion<Props>>;
-    const Item = React.forwardRef<
-      HTMLButtonElement,
-      Props &
-        CreateSlotsAndSlotProps<
-          {
-            root: React.ElementType;
-            decorator: React.ElementType;
-          },
-          {
-            root: SlotProps<'button', {}, OwnerState>;
-            decorator: SlotProps<'span', {}, OwnerState>;
-          }
-        >
-    >(({ variant = 'plain', color: colorProp, ...other }, ref) => {
-      const { getColor } = useColorInversion(variant);
-      const color = getColor(colorProp, 'neutral');
-      const [SlotRoot, rootProps] = useSlot('root', {
-        ref,
-        className: 'root',
-        elementType: ItemRoot,
-        externalForwardedProps: other,
-        ownerState: {
-          variant,
-          color,
-        },
-      });
-      const [SlotDecorator, decoratorProps] = useSlot('decorator', {
-        className: 'decorator',
-        elementType: ItemDecorator,
-        externalForwardedProps: other,
-        ownerState: {
-          variant,
-          color,
-        },
-        getSlotOwnerState: (mergedProps) => ({
-          color: mergedProps.color ?? 'neutral',
-        }),
-      });
-      return (
-        <SlotRoot
-          {...rootProps}
-          className={`${rootProps.className} color-${rootProps.ownerState.color}`}
-        >
-          <SlotDecorator
-            {...decoratorProps}
-            className={`${decoratorProps.className} color-${decoratorProps.ownerState.color}`}
-          />
-        </SlotRoot>
-      );
-    });
-
-    it('should have `context` color if the feature is enabled', () => {
-      const { getByRole } = render(
-        <ColorInversion.Provider value={['plain', 'outlined', 'soft', 'solid']}>
-          <Item />
-        </ColorInversion.Provider>,
-      );
-      expect(getByRole('button')).to.have.class('color-context');
-      expect(getByRole('button').firstChild).to.have.class('color-context');
-    });
-
-    it('should use color from prop even if the feature is enabled', () => {
-      const { getByRole } = render(
-        <ColorInversion.Provider value={['plain', 'outlined', 'soft', 'solid']}>
-          <Item color="danger" />
-        </ColorInversion.Provider>,
-      );
-      expect(getByRole('button')).to.have.class('color-danger');
-    });
-
-    it('should use color from slotProps even if the feature is enabled', () => {
-      const { getByRole } = render(
-        <ColorInversion.Provider value={['plain', 'outlined', 'soft', 'solid']}>
-          <Item
-            slotProps={{
-              root: {
-                color: 'danger',
-              },
-              decorator: {
-                color: 'success',
-              },
-            }}
-          />
-        </ColorInversion.Provider>,
-      );
-      expect(getByRole('button')).to.have.class('color-danger');
-      expect(getByRole('button').firstChild).to.have.class('color-success');
-    });
-  });
 });
diff --git a/packages/mui-joy/src/utils/useSlot.ts b/packages/mui-joy/src/utils/useSlot.ts
index 78ba64fe8fd1b7..630a30408f1dd9 100644
--- a/packages/mui-joy/src/utils/useSlot.ts
+++ b/packages/mui-joy/src/utils/useSlot.ts
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { ClassValue } from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { appendOwnerState, resolveComponentProps, mergeSlotProps } from '@mui/base/utils';
-import { useColorInversion } from '../styles/ColorInversion';
 import { ApplyColorInversion } from '../styles/types';
 
 export type WithCommonProps<T> = T & {
@@ -134,20 +133,9 @@ export default function useSlot<
 
   const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
 
-  // @ts-ignore internal logic
-  const { disableColorInversion = false, ...slotOwnerState } = getSlotOwnerState
-    ? getSlotOwnerState(mergedProps as any)
-    : {};
+  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps as any) : {};
   const finalOwnerState = { ...ownerState, ...slotOwnerState } as any;
 
-  const { getColor } = useColorInversion(finalOwnerState.variant);
-  if (name === 'root') {
-    // for the root slot, color inversion is calculated before the `useSlot` and pass through `ownerState`.
-    finalOwnerState.color = (mergedProps as any).color ?? (ownerState as any).color;
-  } else if (!disableColorInversion) {
-    finalOwnerState.color = getColor((mergedProps as any).color, finalOwnerState.color);
-  }
-
   const LeafComponent = (name === 'root' ? slotComponent || rootComponent : slotComponent) as
     | React.ElementType
     | undefined;
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index ff6f507c5b4a27..90842a786c5e1f 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.146",
+  "version": "5.0.0-alpha.147",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",
@@ -42,10 +42,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/base": "5.0.0-beta.17",
-    "@mui/system": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
+    "@mui/base": "5.0.0-beta.18",
+    "@mui/system": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
     "@mui/x-tree-view": "6.0.0-alpha.1",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1"
@@ -55,9 +55,9 @@
     "@types/chai": "^4.3.6",
     "@types/prop-types": "^15.7.7",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@types/sinon": "^10.0.16",
-    "chai": "^4.3.8",
+    "@types/react-dom": "^18.2.11",
+    "@types/sinon": "^10.0.19",
+    "chai": "^4.3.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sinon": "^15.2.0"
diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json
index ffc33923c9a2e0..04d5f9648d4c8d 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.103",
+  "version": "6.0.0-alpha.104",
   "private": false,
   "author": "MUI Team",
   "description": "v6-alpha: React components that implement Google's Material Design",
@@ -41,12 +41,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/base": "5.0.0-beta.17",
-    "@mui/material": "^5.14.11",
-    "@mui/system": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
-    "@types/react-transition-group": "^4.4.6",
+    "@mui/base": "5.0.0-beta.18",
+    "@mui/material": "^5.14.12",
+    "@mui/system": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
+    "@types/react-transition-group": "^4.4.7",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"
@@ -57,9 +57,9 @@
     "@types/chai": "^4.3.6",
     "@types/prop-types": "^15.7.7",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@types/sinon": "^10.0.16",
-    "chai": "^4.3.8",
+    "@types/react-dom": "^18.2.11",
+    "@types/sinon": "^10.0.19",
+    "chai": "^4.3.10",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/packages/mui-material-next/src/FormHelperText/FormHelperText.d.ts b/packages/mui-material-next/src/FormHelperText/FormHelperText.d.ts
new file mode 100644
index 00000000000000..02a9462ca0f191
--- /dev/null
+++ b/packages/mui-material-next/src/FormHelperText/FormHelperText.d.ts
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps, OverridableStringUnion } from '@mui/types';
+import { Theme } from '../styles';
+import { FormHelperTextClasses } from './formHelperTextClasses';
+
+export interface FormHelperTextPropsVariantOverrides {}
+
+export interface FormHelperTextOwnProps {
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormHelperTextClasses>;
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled?: boolean;
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused?: boolean;
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin?: 'dense';
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   */
+  variant?: OverridableStringUnion<
+    'standard' | 'outlined' | 'filled',
+    FormHelperTextPropsVariantOverrides
+  >;
+}
+
+export interface FormHelperTextTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'p',
+> {
+  props: AdditionalProps & FormHelperTextOwnProps;
+  defaultComponent: RootComponent;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [FormHelperText API](https://mui.com/material-ui/api/form-helper-text/)
+ */
+declare const FormHelperText: OverridableComponent<FormHelperTextTypeMap>;
+
+export type FormHelperTextProps<
+  RootComponent extends React.ElementType = FormHelperTextTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<FormHelperTextTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default FormHelperText;
diff --git a/packages/mui-material-next/src/FormHelperText/FormHelperText.js b/packages/mui-material-next/src/FormHelperText/FormHelperText.js
new file mode 100644
index 00000000000000..12bde80d986988
--- /dev/null
+++ b/packages/mui-material-next/src/FormHelperText/FormHelperText.js
@@ -0,0 +1,189 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import formControlState from '../FormControl/formControlState';
+import useFormControl from '../FormControl/useFormControl';
+import styled from '../styles/styled';
+import formHelperTextClasses, { getFormHelperTextUtilityClasses } from './formHelperTextClasses';
+import useThemeProps from '../styles/useThemeProps';
+
+const useUtilityClasses = (ownerState) => {
+  const { classes, contained, size, disabled, error, filled, focused, required } = ownerState;
+  const slots = {
+    root: [
+      'root',
+      disabled && 'disabled',
+      error && 'error',
+      size && `size${capitalize(size)}`,
+      contained && 'contained',
+      focused && 'focused',
+      filled && 'filled',
+      required && 'required',
+    ],
+  };
+
+  return composeClasses(slots, getFormHelperTextUtilityClasses, classes);
+};
+
+const FormHelperTextRoot = styled('p', {
+  name: 'MuiFormHelperText',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [
+      styles.root,
+      ownerState.size && styles[`size${capitalize(ownerState.size)}`],
+      ownerState.contained && styles.contained,
+      ownerState.filled && styles.filled,
+    ];
+  },
+})(({ theme, ownerState }) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
+  textAlign: 'left',
+  marginTop: 3,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  [`&.${formHelperTextClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled,
+  },
+  [`&.${formHelperTextClasses.error}`]: {
+    color: (theme.vars || theme).palette.error.main,
+  },
+  ...(ownerState.size === 'small' && {
+    marginTop: 4,
+  }),
+  ...(ownerState.contained && {
+    marginLeft: 14,
+    marginRight: 14,
+  }),
+}));
+
+const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiFormHelperText' });
+  const {
+    children,
+    className,
+    component = 'p',
+    disabled,
+    error,
+    filled,
+    focused,
+    margin,
+    required,
+    variant,
+    ...other
+  } = props;
+
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required'],
+  });
+
+  const ownerState = {
+    ...props,
+    component,
+    contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
+    variant: fcs.variant,
+    size: fcs.size,
+    disabled: fcs.disabled,
+    error: fcs.error,
+    filled: fcs.filled,
+    focused: fcs.focused,
+    required: fcs.required,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return (
+    <FormHelperTextRoot
+      as={component}
+      ownerState={ownerState}
+      className={clsx(classes.root, className)}
+      ref={ref}
+      {...other}
+    >
+      {children === ' ' ? (
+        // notranslate needed while Google Translate will not fix zero-width space issue
+        <span className="notranslate">&#8203;</span>
+      ) : (
+        children
+      )}
+    </FormHelperTextRoot>
+  );
+});
+
+FormHelperText.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @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,
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled: PropTypes.bool,
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: PropTypes.oneOf(['dense']),
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['filled', 'outlined', 'standard']),
+    PropTypes.string,
+  ]),
+};
+
+export default FormHelperText;
diff --git a/packages/mui-material-next/src/FormHelperText/FormHelperText.spec.tsx b/packages/mui-material-next/src/FormHelperText/FormHelperText.spec.tsx
new file mode 100644
index 00000000000000..760992705a7887
--- /dev/null
+++ b/packages/mui-material-next/src/FormHelperText/FormHelperText.spec.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { expectType } from '@mui/types';
+import FormHelperText, { FormHelperTextProps } from '@mui/material-next/FormHelperText';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props1: FormHelperTextProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: FormHelperTextProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLParagraphElement>, typeof event>(event);
+  },
+};
+
+const props3: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props4: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error CustomComponent does not accept incorrectProp
+  incorrectProp: 3,
+};
+
+// @ts-expect-error missing props
+const props5: FormHelperTextProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
+const TestComponent = () => {
+  return (
+    <React.Fragment>
+      <FormHelperText />
+      <FormHelperText component={'a'} href="/test" />
+
+      <FormHelperText component={CustomComponent} stringProp="s" numberProp={1} />
+      {
+        // @ts-expect-error missing props
+        <FormHelperText component={CustomComponent} />
+      }
+      <FormHelperText
+        component="span"
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+        }}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/mui-material-next/src/FormHelperText/FormHelperText.test.js b/packages/mui-material-next/src/FormHelperText/FormHelperText.test.js
new file mode 100644
index 00000000000000..1d56b54bd16a31
--- /dev/null
+++ b/packages/mui-material-next/src/FormHelperText/FormHelperText.test.js
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import FormHelperText, { formHelperTextClasses as classes } from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+
+describe('<FormHelperText />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<FormHelperText />, () => ({
+    classes,
+    inheritComponent: 'p',
+    render,
+    refInstanceof: window.HTMLParagraphElement,
+    testComponentPropWith: 'div',
+    muiName: 'MuiFormHelperText',
+    testVariantProps: { size: 'small' },
+    skip: ['componentsProp'],
+  }));
+
+  describe('prop: error', () => {
+    it('should have an error class', () => {
+      const { container } = render(<FormHelperText error />);
+      expect(container.firstChild).to.have.class(classes.error);
+    });
+  });
+
+  describe('with FormControl', () => {
+    ['error', 'disabled'].forEach((visualState) => {
+      describe(visualState, () => {
+        function FormHelperTextInFormControl(props) {
+          return (
+            <FormControl {...{ [visualState]: true }}>
+              <FormHelperText {...props}>Foo</FormHelperText>
+            </FormControl>
+          );
+        }
+
+        it(`should have the ${visualState} class`, () => {
+          const { getByText } = render(
+            <FormHelperTextInFormControl>Foo</FormHelperTextInFormControl>,
+          );
+
+          expect(getByText(/Foo/)).to.have.class(classes[visualState]);
+        });
+
+        it('should be overridden by props', () => {
+          const { getByText, setProps } = render(
+            <FormHelperTextInFormControl {...{ [visualState]: false }}>
+              Foo
+            </FormHelperTextInFormControl>,
+          );
+
+          expect(getByText(/Foo/)).not.to.have.class(classes[visualState]);
+
+          setProps({ [visualState]: true });
+          expect(getByText(/Foo/)).to.have.class(classes[visualState]);
+        });
+      });
+    });
+
+    describe('size', () => {
+      describe('small margin FormControl', () => {
+        it('should have the small class', () => {
+          const { getByText } = render(
+            <FormControl size="small">
+              <FormHelperText>Foo</FormHelperText>
+            </FormControl>,
+          );
+
+          expect(getByText(/Foo/)).to.have.class(classes.sizeSmall);
+        });
+      });
+
+      it('should be overridden by props', () => {
+        function FormHelperTextInFormControl(props) {
+          return (
+            <FormControl size="medium">
+              <FormHelperText {...props}>Foo</FormHelperText>
+            </FormControl>
+          );
+        }
+
+        const { getByText, setProps } = render(
+          <FormHelperTextInFormControl>Foo</FormHelperTextInFormControl>,
+        );
+
+        expect(getByText(/Foo/)).not.to.have.class(classes.sizeSmall);
+        setProps({ size: 'small' });
+        expect(getByText(/Foo/)).to.have.class(classes.sizeSmall);
+      });
+    });
+  });
+});
diff --git a/packages/mui-material-next/src/FormHelperText/formHelperTextClasses.ts b/packages/mui-material-next/src/FormHelperText/formHelperTextClasses.ts
new file mode 100644
index 00000000000000..4b9afb25838503
--- /dev/null
+++ b/packages/mui-material-next/src/FormHelperText/formHelperTextClasses.ts
@@ -0,0 +1,43 @@
+import {
+  unstable_generateUtilityClasses as generateUtilityClasses,
+  unstable_generateUtilityClass as generateUtilityClass,
+} from '@mui/utils';
+
+export interface FormHelperTextClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
+  contained: string;
+  /** State class applied to the root element if `focused={true}`. */
+  focused: string;
+  /** State class applied to the root element if `filled={true}`. */
+  filled: string;
+  /** State class applied to the root element if `required={true}`. */
+  required: string;
+}
+
+export type FormHelperTextClassKey = keyof FormHelperTextClasses;
+
+export function getFormHelperTextUtilityClasses(slot: string): string {
+  return generateUtilityClass('MuiFormHelperText', slot);
+}
+
+const formHelperTextClasses: FormHelperTextClasses = generateUtilityClasses('MuiFormHelperText', [
+  'root',
+  'error',
+  'disabled',
+  'sizeSmall',
+  'sizeMedium',
+  'contained',
+  'focused',
+  'filled',
+  'required',
+]);
+
+export default formHelperTextClasses;
diff --git a/packages/mui-material-next/src/FormHelperText/index.d.ts b/packages/mui-material-next/src/FormHelperText/index.d.ts
new file mode 100644
index 00000000000000..86a36e0378a79f
--- /dev/null
+++ b/packages/mui-material-next/src/FormHelperText/index.d.ts
@@ -0,0 +1,5 @@
+export { default } from './FormHelperText';
+export * from './FormHelperText';
+
+export { default as formHelperTextClasses } from './formHelperTextClasses';
+export * from './formHelperTextClasses';
diff --git a/packages/mui-material-next/src/FormHelperText/index.js b/packages/mui-material-next/src/FormHelperText/index.js
new file mode 100644
index 00000000000000..e2e5b0a06e3444
--- /dev/null
+++ b/packages/mui-material-next/src/FormHelperText/index.js
@@ -0,0 +1,5 @@
+'use client';
+export { default } from './FormHelperText';
+
+export { default as formHelperTextClasses } from './formHelperTextClasses';
+export * from './formHelperTextClasses';
diff --git a/packages/mui-material-next/src/FormLabel/FormLabel.d.ts b/packages/mui-material-next/src/FormLabel/FormLabel.d.ts
new file mode 100644
index 00000000000000..ccade1df4af856
--- /dev/null
+++ b/packages/mui-material-next/src/FormLabel/FormLabel.d.ts
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import {
+  OverridableStringUnion,
+  OverridableComponent,
+  OverrideProps,
+  OverridableTypeMap,
+} from '@mui/types';
+import { Theme } from '../styles';
+import { FormLabelClasses } from './formLabelClasses';
+
+export interface FormLabelPropsColorOverrides {}
+
+/**
+ * This type is kept for compatibility. Use `FormLabelOwnProps` instead.
+ */
+export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+
+export interface FormLabelOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormLabelClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   */
+  color?: OverridableStringUnion<
+    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    FormLabelPropsColorOverrides
+  >;
+  /**
+   * If `true`, the label should be displayed in a disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled?: boolean;
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused?: boolean;
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface FormLabelTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'label',
+> {
+  props: AdditionalProps & FormLabelBaseProps & FormLabelOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
+ * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
+ * - [Switch](https://mui.com/material-ui/react-switch/)
+ *
+ * API:
+ *
+ * - [FormLabel API](https://mui.com/material-ui/api/form-label/)
+ */
+declare const FormLabel: OverridableComponent<FormLabelTypeMap>;
+
+export interface ExtendFormLabelTypeMap<TypeMap extends OverridableTypeMap> {
+  props: TypeMap['props'] & Pick<FormLabelOwnProps, 'filled' | 'color'>;
+  defaultComponent: TypeMap['defaultComponent'];
+}
+
+export type FormLabelProps<
+  RootComponent extends React.ElementType = FormLabelTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<FormLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default FormLabel;
diff --git a/packages/mui-material-next/src/FormLabel/FormLabel.js b/packages/mui-material-next/src/FormLabel/FormLabel.js
new file mode 100644
index 00000000000000..d666eb862b4902
--- /dev/null
+++ b/packages/mui-material-next/src/FormLabel/FormLabel.js
@@ -0,0 +1,182 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import formControlState from '../FormControl/formControlState';
+import useFormControl from '../FormControl/useFormControl';
+import useThemeProps from '../styles/useThemeProps';
+import styled from '../styles/styled';
+import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses';
+
+const useUtilityClasses = (ownerState) => {
+  const { classes, color, focused, disabled, error, filled, required } = ownerState;
+  const slots = {
+    root: [
+      'root',
+      `color${capitalize(color)}`,
+      disabled && 'disabled',
+      error && 'error',
+      filled && 'filled',
+      focused && 'focused',
+      required && 'required',
+    ],
+    asterisk: ['asterisk', error && 'error'],
+  };
+
+  return composeClasses(slots, getFormLabelUtilityClasses, classes);
+};
+
+export const FormLabelRoot = styled('label', {
+  name: 'MuiFormLabel',
+  slot: 'Root',
+  overridesResolver: ({ ownerState }, styles) => {
+    return {
+      ...styles.root,
+      ...(ownerState.color === 'secondary' && styles.colorSecondary),
+      ...(ownerState.filled && styles.filled),
+    };
+  },
+})(({ theme, ownerState }) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.body1,
+  lineHeight: '1.4375em',
+  padding: 0,
+  position: 'relative',
+  [`&.${formLabelClasses.focused}`]: {
+    color: (theme.vars || theme).palette[ownerState.color].main,
+  },
+  [`&.${formLabelClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled,
+  },
+  [`&.${formLabelClasses.error}`]: {
+    color: (theme.vars || theme).palette.error.main,
+  },
+}));
+
+const AsteriskComponent = styled('span', {
+  name: 'MuiFormLabel',
+  slot: 'Asterisk',
+  overridesResolver: (props, styles) => styles.asterisk,
+})(({ theme }) => ({
+  [`&.${formLabelClasses.error}`]: {
+    color: (theme.vars || theme).palette.error.main,
+  },
+}));
+
+const FormLabel = React.forwardRef(function FormLabel(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiFormLabel' });
+  const {
+    children,
+    className,
+    color,
+    component = 'label',
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    ...other
+  } = props;
+
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['color', 'required', 'focused', 'disabled', 'error', 'filled'],
+  });
+
+  const ownerState = {
+    ...props,
+    color: fcs.color || 'primary',
+    component,
+    disabled: fcs.disabled,
+    error: fcs.error,
+    filled: fcs.filled,
+    focused: fcs.focused,
+    required: fcs.required,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return (
+    <FormLabelRoot
+      as={component}
+      ownerState={ownerState}
+      className={clsx(classes.root, className)}
+      ref={ref}
+      {...other}
+    >
+      {children}
+      {fcs.required && (
+        <AsteriskComponent ownerState={ownerState} aria-hidden className={classes.asterisk}>
+          &thinsp;{'*'}
+        </AsteriskComponent>
+      )}
+    </FormLabelRoot>
+  );
+});
+
+FormLabel.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+    PropTypes.string,
+  ]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the label should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled: PropTypes.bool,
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+};
+
+export default FormLabel;
diff --git a/packages/mui-material-next/src/FormLabel/FormLabel.test.js b/packages/mui-material-next/src/FormLabel/FormLabel.test.js
new file mode 100644
index 00000000000000..0f50f06c6ee756
--- /dev/null
+++ b/packages/mui-material-next/src/FormLabel/FormLabel.test.js
@@ -0,0 +1,192 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { expect } from 'chai';
+import { describeConformance, act, createRenderer } from '@mui-internal/test-utils';
+import FormLabel, { formLabelClasses as classes } from '@mui/material-next/FormLabel';
+import FormControl, { useFormControl } from '@mui/material-next/FormControl';
+// TODO v6: re-export from material-next
+import { hexToRgb } from '@mui/system';
+// TODO v6: remove after implementing Material You styles
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+// TODO v6: remove after implementing Material You styles
+const MaterialV5DefaultTheme = createTheme();
+
+describe('<FormLabel />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<FormLabel />, () => ({
+    classes,
+    inheritComponent: 'label',
+    render,
+    refInstanceof: window.HTMLLabelElement,
+    testComponentPropWith: 'div',
+    muiName: 'MuiFormLabel',
+    testVariantProps: { color: 'secondary' },
+    skip: ['componentsProp'],
+  }));
+
+  describe('prop: required', () => {
+    it('should visually show an asterisk but not include it in the a11y tree', () => {
+      const { container } = render(<FormLabel required>name</FormLabel>);
+
+      expect(container.querySelector('label')).to.have.text('name\u2009*');
+      expect(container.querySelectorAll(`.${classes.asterisk}`)).to.have.lengthOf(1);
+      expect(container.querySelectorAll(`.${classes.asterisk}`)[0]).toBeAriaHidden();
+    });
+
+    it('should not show an asterisk by default', () => {
+      const { container } = render(<FormLabel>name</FormLabel>);
+
+      expect(container.querySelector('label')).to.have.text('name');
+      expect(container.querySelectorAll(`.${classes.asterisk}`)).to.have.lengthOf(0);
+    });
+  });
+
+  describe('prop: error', () => {
+    it('should have an error class', () => {
+      const { container } = render(<FormLabel required error />);
+
+      expect(container.querySelectorAll(`.${classes.asterisk}`)).to.have.lengthOf(1);
+      expect(container.querySelector(`.${classes.asterisk}`)).to.have.class(classes.error);
+      expect(container.querySelectorAll(`.${classes.asterisk}`)[0]).toBeAriaHidden();
+      expect(container.firstChild).to.have.class(classes.error);
+    });
+  });
+
+  describe('with FormControl', () => {
+    describe('error', () => {
+      function Wrapper(props) {
+        return <FormControl error {...props} />;
+      }
+
+      it(`should have the error class`, () => {
+        const { container } = render(<FormLabel />, {
+          wrapper: Wrapper,
+        });
+
+        expect(container.querySelector('label')).to.have.class(classes.error);
+      });
+
+      it('should be overridden by props', () => {
+        const { container, setProps } = render(
+          <FormLabel data-testid="FormLabel" error={false} />,
+          {
+            wrapper: Wrapper,
+          },
+        );
+
+        expect(container.querySelector('label')).not.to.have.class(classes.error);
+
+        setProps({ error: true });
+        expect(container.querySelector('label')).to.have.class(classes.error);
+      });
+    });
+
+    describe('focused', () => {
+      const FormController = React.forwardRef((_, ref) => {
+        const formControl = useFormControl();
+        React.useImperativeHandle(ref, () => formControl, [formControl]);
+        return null;
+      });
+
+      it(`should have the focused class`, () => {
+        const formControlRef = React.createRef();
+        const { container } = render(
+          <FormControl error>
+            <FormLabel data-testid="FormLabel" />
+            <FormController ref={formControlRef} />
+          </FormControl>,
+        );
+
+        expect(container.querySelector('label')).not.to.have.class(classes.focused);
+
+        act(() => {
+          formControlRef.current.onFocus();
+        });
+        expect(container.querySelector('label')).to.have.class(classes.focused);
+      });
+
+      it('should be overridden by props', () => {
+        const formControlRef = React.createRef();
+        function Wrapper({ children }) {
+          return (
+            <FormControl error>
+              {children}
+              <FormController ref={formControlRef} />
+            </FormControl>
+          );
+        }
+        Wrapper.propTypes = { children: PropTypes.node };
+        const { container, setProps } = render(<FormLabel data-testid="FormLabel" />, {
+          wrapper: Wrapper,
+        });
+        act(() => {
+          formControlRef.current.onFocus();
+        });
+
+        expect(container.querySelector('label')).to.have.class(classes.focused);
+
+        setProps({ focused: false });
+        expect(container.querySelector('label')).not.to.have.class(classes.focused);
+
+        setProps({ focused: true });
+        expect(container.querySelector('label')).to.have.class(classes.focused);
+      });
+    });
+
+    describe('required', () => {
+      it('should show an asterisk', () => {
+        const { container } = render(
+          <FormControl required>
+            <FormLabel>name</FormLabel>
+          </FormControl>,
+        );
+
+        expect(container).to.have.text('name\u2009*');
+      });
+
+      it('should be overridden by props', () => {
+        const { container, setProps } = render(<FormLabel required={false}>name</FormLabel>, {
+          wrapper: (props) => <FormControl required {...props} />,
+        });
+
+        expect(container).to.have.text('name');
+
+        setProps({ required: true });
+        expect(container).to.have.text('name\u2009*');
+      });
+    });
+  });
+
+  describe('prop: color', () => {
+    it('should have color secondary class', () => {
+      const { container } = render(<FormLabel color="secondary" />);
+      expect(container.firstChild).to.have.class(classes.colorSecondary);
+    });
+
+    it('should have the focused class and style', () => {
+      const { container, getByTestId } = render(
+        <ThemeProvider theme={MaterialV5DefaultTheme}>
+          <FormLabel data-testid="FormLabel" color="secondary" focused />
+        </ThemeProvider>,
+      );
+      expect(container.querySelector(`.${classes.colorSecondary}`)).to.have.class(classes.focused);
+      expect(getByTestId('FormLabel')).toHaveComputedStyle({
+        color: hexToRgb(MaterialV5DefaultTheme.palette.secondary.main),
+      });
+    });
+
+    it('should have the error class and style, even when focused', () => {
+      const { container, getByTestId } = render(
+        <ThemeProvider theme={MaterialV5DefaultTheme}>
+          <FormLabel data-testid="FormLabel" color="secondary" focused error />
+        </ThemeProvider>,
+      );
+      expect(container.querySelector(`.${classes.colorSecondary}`)).to.have.class(classes.error);
+      expect(getByTestId('FormLabel')).toHaveComputedStyle({
+        color: hexToRgb(MaterialV5DefaultTheme.palette.error.main),
+      });
+    });
+  });
+});
diff --git a/packages/mui-material-next/src/FormLabel/formLabelClasses.ts b/packages/mui-material-next/src/FormLabel/formLabelClasses.ts
new file mode 100644
index 00000000000000..b1b69e98466e86
--- /dev/null
+++ b/packages/mui-material-next/src/FormLabel/formLabelClasses.ts
@@ -0,0 +1,42 @@
+import {
+  unstable_generateUtilityClass as generateUtilityClass,
+  unstable_generateUtilityClasses as generateUtilityClasses,
+} from '@mui/utils';
+
+export interface FormLabelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the color is secondary. */
+  colorSecondary: string;
+  /** State class applied to the root element if `focused={true}`. */
+  focused: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** State class applied to the root element if `filled={true}`. */
+  filled: string;
+  /** State class applied to the root element if `required={true}`. */
+  required: string;
+  /** Styles applied to the asterisk element. */
+  asterisk: string;
+}
+
+export type FormLabelClassKey = keyof FormLabelClasses;
+
+export function getFormLabelUtilityClasses(slot: string): string {
+  return generateUtilityClass('MuiFormLabel', slot);
+}
+
+const formLabelClasses: FormLabelClasses = generateUtilityClasses('MuiFormLabel', [
+  'root',
+  'colorSecondary',
+  'focused',
+  'disabled',
+  'error',
+  'filled',
+  'required',
+  'asterisk',
+]);
+
+export default formLabelClasses;
diff --git a/packages/mui-material-next/src/FormLabel/index.d.ts b/packages/mui-material-next/src/FormLabel/index.d.ts
new file mode 100644
index 00000000000000..f81d2d6d4ed4a4
--- /dev/null
+++ b/packages/mui-material-next/src/FormLabel/index.d.ts
@@ -0,0 +1,5 @@
+export { default } from './FormLabel';
+export * from './FormLabel';
+
+export { default as formLabelClasses } from './formLabelClasses';
+export * from './formLabelClasses';
diff --git a/packages/mui-material-next/src/FormLabel/index.js b/packages/mui-material-next/src/FormLabel/index.js
new file mode 100644
index 00000000000000..db05e838ce6da7
--- /dev/null
+++ b/packages/mui-material-next/src/FormLabel/index.js
@@ -0,0 +1,6 @@
+'use client';
+export { default } from './FormLabel';
+export * from './FormLabel';
+
+export { default as formLabelClasses } from './formLabelClasses';
+export * from './formLabelClasses';
diff --git a/packages/mui-material-next/src/InputAdornment/InputAdornment.d.ts b/packages/mui-material-next/src/InputAdornment/InputAdornment.d.ts
new file mode 100644
index 00000000000000..a4769605aabfa5
--- /dev/null
+++ b/packages/mui-material-next/src/InputAdornment/InputAdornment.d.ts
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { Theme } from '..';
+import { InputAdornmentClasses } from './inputAdornmentClasses';
+
+export interface InputAdornmentOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<InputAdornmentClasses>;
+  /**
+   * The content of the component, normally an `IconButton` or string.
+   */
+  children?: React.ReactNode;
+  /**
+   * Disable pointer events on the root.
+   * This allows for the content of the adornment to focus the `input` on click.
+   * @default false
+   */
+  disablePointerEvents?: boolean;
+  /**
+   * If children is a string then disable wrapping in a Typography component.
+   * @default false
+   */
+  disableTypography?: boolean;
+  /**
+   * The position this adornment should appear relative to the `Input`.
+   */
+  position: 'start' | 'end';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * Note: If you are using the `TextField` component or the `FormControl` component
+   * you do not have to set this manually.
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
+export interface InputAdornmentTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & InputAdornmentOwnProps;
+  defaultComponent: RootComponent;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [InputAdornment API](https://mui.com/material-ui/api/input-adornment/)
+ */
+declare const InputAdornment: OverridableComponent<InputAdornmentTypeMap>;
+
+export type InputAdornmentProps<
+  RootComponent extends React.ElementType = InputAdornmentTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<InputAdornmentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default InputAdornment;
diff --git a/packages/mui-material-next/src/InputAdornment/InputAdornment.js b/packages/mui-material-next/src/InputAdornment/InputAdornment.js
new file mode 100644
index 00000000000000..115dffc1c061ab
--- /dev/null
+++ b/packages/mui-material-next/src/InputAdornment/InputAdornment.js
@@ -0,0 +1,196 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import {
+  unstable_composeClasses as composeClasses,
+  unstable_capitalize as capitalize,
+} from '@mui/base/composeClasses';
+import Typography from '@mui/material/Typography';
+import FormControlContext from '../FormControl/FormControlContext';
+import useFormControl from '../FormControl/useFormControl';
+import styled from '../styles/styled';
+import inputAdornmentClasses, { getInputAdornmentUtilityClass } from './inputAdornmentClasses';
+import useThemeProps from '../styles/useThemeProps';
+
+const overridesResolver = (props, styles) => {
+  const { ownerState } = props;
+
+  return [
+    styles.root,
+    styles[`position${capitalize(ownerState.position)}`],
+    ownerState.disablePointerEvents === true && styles.disablePointerEvents,
+    styles[ownerState.variant],
+  ];
+};
+
+const useUtilityClasses = (ownerState) => {
+  const { classes, disablePointerEvents, hiddenLabel, position, size, variant } = ownerState;
+  const slots = {
+    root: [
+      'root',
+      disablePointerEvents && 'disablePointerEvents',
+      position && `position${capitalize(position)}`,
+      variant,
+      hiddenLabel && 'hiddenLabel',
+      size && `size${capitalize(size)}`,
+    ],
+  };
+
+  return composeClasses(slots, getInputAdornmentUtilityClass, classes);
+};
+
+const InputAdornmentRoot = styled('div', {
+  name: 'MuiInputAdornment',
+  slot: 'Root',
+  overridesResolver,
+})(({ theme, ownerState }) => ({
+  display: 'flex',
+  height: '0.01em', // Fix IE11 flexbox alignment. To remove at some point.
+  maxHeight: '2em',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  color: (theme.vars || theme).palette.action.active,
+  ...(ownerState.variant === 'filled' && {
+    // Styles applied to the root element if `variant="filled"`.
+    [`&.${inputAdornmentClasses.positionStart}&:not(.${inputAdornmentClasses.hiddenLabel})`]: {
+      marginTop: 16,
+    },
+  }),
+  ...(ownerState.position === 'start' && {
+    // Styles applied to the root element if `position="start"`.
+    marginRight: 8,
+  }),
+  ...(ownerState.position === 'end' && {
+    // Styles applied to the root element if `position="end"`.
+    marginLeft: 8,
+  }),
+  ...(ownerState.disablePointerEvents === true && {
+    // Styles applied to the root element if `disablePointerEvents={true}`.
+    pointerEvents: 'none',
+  }),
+}));
+
+const InputAdornment = React.forwardRef(function InputAdornment(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiInputAdornment' });
+  const {
+    children,
+    className,
+    component = 'div',
+    disablePointerEvents = false,
+    disableTypography = false,
+    position,
+    variant: variantProp,
+    ...other
+  } = props;
+
+  const muiFormControl = useFormControl() || {};
+
+  let variant = variantProp;
+
+  if (variantProp && muiFormControl.variant) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (variantProp === muiFormControl.variant) {
+        console.error(
+          'MUI: The `InputAdornment` variant infers the variant prop ' +
+            'you do not have to provide one.',
+        );
+      }
+    }
+  }
+
+  if (muiFormControl && !variant) {
+    variant = muiFormControl.variant;
+  }
+
+  const ownerState = {
+    ...props,
+    hiddenLabel: muiFormControl.hiddenLabel,
+    size: muiFormControl.size,
+    disablePointerEvents,
+    position,
+    variant,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return (
+    <FormControlContext.Provider value={null}>
+      <InputAdornmentRoot
+        as={component}
+        ownerState={ownerState}
+        className={clsx(classes.root, className)}
+        ref={ref}
+        {...other}
+      >
+        {typeof children === 'string' && !disableTypography ? (
+          <Typography color="text.secondary">{children}</Typography>
+        ) : (
+          <React.Fragment>
+            {/* To have the correct vertical alignment baseline */}
+            {position === 'start' ? (
+              /* notranslate needed while Google Translate will not fix zero-width space issue */
+              <span className="notranslate">&#8203;</span>
+            ) : null}
+            {children}
+          </React.Fragment>
+        )}
+      </InputAdornmentRoot>
+    </FormControlContext.Provider>
+  );
+});
+
+InputAdornment.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component, normally an `IconButton` or string.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @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,
+  /**
+   * Disable pointer events on the root.
+   * This allows for the content of the adornment to focus the `input` on click.
+   * @default false
+   */
+  disablePointerEvents: PropTypes.bool,
+  /**
+   * If children is a string then disable wrapping in a Typography component.
+   * @default false
+   */
+  disableTypography: PropTypes.bool,
+  /**
+   * The position this adornment should appear relative to the `Input`.
+   */
+  position: PropTypes.oneOf(['end', 'start']).isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * The variant to use.
+   * Note: If you are using the `TextField` component or the `FormControl` component
+   * you do not have to set this manually.
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
+};
+
+export default InputAdornment;
diff --git a/packages/mui-material-next/src/InputAdornment/InputAdornment.test.js b/packages/mui-material-next/src/InputAdornment/InputAdornment.test.js
new file mode 100644
index 00000000000000..8cb9c32096e4b6
--- /dev/null
+++ b/packages/mui-material-next/src/InputAdornment/InputAdornment.test.js
@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import {
+  createRenderer,
+  describeConformance,
+  strictModeDoubleLoggingSuppressed,
+} from '@mui-internal/test-utils';
+import { typographyClasses } from '@mui/material/Typography';
+import InputAdornment, { inputAdornmentClasses as classes } from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import FormControl from '@mui/material/FormControl';
+import Input from '@mui/material/Input';
+
+describe('<InputAdornment />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<InputAdornment position="start">foo</InputAdornment>, () => ({
+    classes,
+    inheritComponent: 'div',
+    render,
+    muiName: 'MuiInputAdornment',
+    testVariantProps: { color: 'primary' },
+    refInstanceof: window.HTMLDivElement,
+    skip: ['componentsProp'],
+    testComponentPropWith: 'span',
+  }));
+
+  it('should wrap text children in a Typography', () => {
+    const { container } = render(<InputAdornment position="start">foo</InputAdornment>);
+    const typography = container.querySelector(`.${typographyClasses.root}`);
+
+    expect(typography).not.to.equal(null);
+    expect(typography).to.have.text('foo');
+  });
+
+  it('should have the root and start class when position is start', () => {
+    const { container } = render(<InputAdornment position="start">foo</InputAdornment>);
+    const adornment = container.firstChild;
+
+    expect(adornment).to.have.class(classes.root);
+    expect(adornment).to.have.class(classes.positionStart);
+  });
+
+  it('should have the root and end class when position is end', () => {
+    const { container } = render(<InputAdornment position="end">foo</InputAdornment>);
+    const adornment = container.firstChild;
+
+    expect(adornment).to.have.class(classes.root);
+    expect(adornment).to.have.class(classes.positionEnd);
+  });
+
+  describe('prop: variant', () => {
+    it("should inherit the TextField's variant", () => {
+      const { getByTestId } = render(
+        <TextField
+          fullWidth
+          placeholder="Search"
+          label="Search"
+          variant="filled"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment data-testid="InputAdornment" position="start">
+                foo
+              </InputAdornment>
+            ),
+          }}
+        />,
+      );
+      const adornment = getByTestId('InputAdornment');
+
+      expect(adornment).to.have.class(classes.root);
+      expect(adornment).to.have.class(classes.positionStart);
+      expect(adornment).to.have.class(classes.filled);
+    });
+
+    it("should inherit the FormControl's variant", () => {
+      const { getByTestId } = render(
+        <FormControl variant="filled">
+          <InputAdornment data-testid="InputAdornment" position="start">
+            foo
+          </InputAdornment>
+        </FormControl>,
+      );
+      const adornment = getByTestId('InputAdornment');
+
+      expect(adornment).to.have.class(classes.root);
+      expect(adornment).to.have.class(classes.positionStart);
+      expect(adornment).to.have.class(classes.filled);
+    });
+
+    it('should override the inherited variant', () => {
+      const { getByTestId } = render(
+        <TextField
+          fullWidth
+          placeholder="Search"
+          label="Search"
+          variant="filled"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment data-testid="InputAdornment" variant="standard" position="start">
+                foo
+              </InputAdornment>
+            ),
+          }}
+        />,
+      );
+      const adornment = getByTestId('InputAdornment');
+
+      expect(adornment).to.have.class(classes.root);
+      expect(adornment).to.have.class(classes.positionStart);
+      expect(adornment).not.to.have.class(classes.filled);
+    });
+
+    it('should have the filled root and class when variant is filled', () => {
+      const { container } = render(
+        <InputAdornment variant="filled" position="start">
+          foo
+        </InputAdornment>,
+      );
+      const adornment = container.firstChild;
+
+      expect(adornment).to.have.class(classes.root);
+      expect(adornment).to.have.class(classes.positionStart);
+      expect(adornment).to.have.class(classes.filled);
+    });
+
+    it('should warn if the variant supplied is equal to the variant inferred', () => {
+      expect(() => {
+        render(
+          <FormControl variant="filled">
+            <Input
+              startAdornment={
+                <InputAdornment variant="filled" position="start">
+                  foo
+                </InputAdornment>
+              }
+            />
+          </FormControl>,
+        );
+      }).toErrorDev([
+        'MUI: The `InputAdornment` variant infers the variant ' +
+          'prop you do not have to provide one.',
+        !strictModeDoubleLoggingSuppressed &&
+          'MUI: The `InputAdornment` variant infers the variant ' +
+            'prop you do not have to provide one.',
+      ]);
+    });
+  });
+
+  it('should have the disabled pointer events class when disabledPointerEvents true', () => {
+    const { container } = render(
+      <InputAdornment disablePointerEvents position="start">
+        foo
+      </InputAdornment>,
+    );
+    const adornment = container.firstChild;
+
+    expect(adornment).to.have.class(classes.disablePointerEvents);
+  });
+
+  it('should not wrap text children in a Typography when disableTypography true', () => {
+    const { container } = render(
+      <InputAdornment disableTypography position="start">
+        foo
+      </InputAdornment>,
+    );
+
+    expect(container.querySelector(`.${typographyClasses.root}`)).to.equal(null);
+  });
+
+  it('should render children', () => {
+    const { container } = render(
+      <InputAdornment position="end">
+        <div>foo</div>
+      </InputAdornment>,
+    );
+    const adornment = container.firstChild;
+
+    expect(adornment.firstChild).to.have.property('nodeName', 'DIV');
+  });
+
+  describe('prop: position', () => {
+    it('should render span for vertical baseline alignment', () => {
+      const { container } = render(
+        <InputAdornment position="start">
+          <div>foo</div>
+        </InputAdornment>,
+      );
+      const adornment = container.firstChild;
+
+      expect(adornment.firstChild).to.have.tagName('span');
+      expect(adornment.firstChild).to.have.class('notranslate');
+      expect(adornment.childNodes[1]).to.have.tagName('div');
+    });
+  });
+
+  it('applies a size small class inside <FormControl size="small" />', () => {
+    const { getByTestId } = render(
+      <FormControl size="small">
+        <InputAdornment position="start" data-testid="root">
+          $
+        </InputAdornment>
+      </FormControl>,
+    );
+
+    expect(getByTestId('root')).to.have.class(classes.sizeSmall);
+  });
+
+  it('applies a hiddenLabel class inside <FormControl hiddenLabel />', () => {
+    const { getByTestId } = render(
+      <FormControl hiddenLabel>
+        <InputAdornment position="start" data-testid="root">
+          $
+        </InputAdornment>
+      </FormControl>,
+    );
+
+    expect(getByTestId('root')).to.have.class(classes.hiddenLabel);
+  });
+});
diff --git a/packages/mui-material-next/src/InputAdornment/index.d.ts b/packages/mui-material-next/src/InputAdornment/index.d.ts
new file mode 100644
index 00000000000000..48e5ebc6741b70
--- /dev/null
+++ b/packages/mui-material-next/src/InputAdornment/index.d.ts
@@ -0,0 +1,5 @@
+export * from './InputAdornment';
+export { default } from './InputAdornment';
+
+export { default as inputAdornmentClasses } from './inputAdornmentClasses';
+export * from './inputAdornmentClasses';
diff --git a/packages/mui-material-next/src/InputAdornment/index.js b/packages/mui-material-next/src/InputAdornment/index.js
new file mode 100644
index 00000000000000..e8757bd82b4074
--- /dev/null
+++ b/packages/mui-material-next/src/InputAdornment/index.js
@@ -0,0 +1,5 @@
+'use client';
+export { default } from './InputAdornment';
+
+export { default as inputAdornmentClasses } from './inputAdornmentClasses';
+export * from './inputAdornmentClasses';
diff --git a/packages/mui-material-next/src/InputAdornment/inputAdornmentClasses.ts b/packages/mui-material-next/src/InputAdornment/inputAdornmentClasses.ts
new file mode 100644
index 00000000000000..1b1fadb95e731f
--- /dev/null
+++ b/packages/mui-material-next/src/InputAdornment/inputAdornmentClasses.ts
@@ -0,0 +1,45 @@
+import {
+  unstable_generateUtilityClasses as generateUtilityClasses,
+  unstable_generateUtilityClass as generateUtilityClass,
+} from '@mui/utils';
+
+export interface InputAdornmentClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the root element if `variant="standard"`. */
+  standard: string;
+  /** Styles applied to the root element if `position="start"`. */
+  positionStart: string;
+  /** Styles applied to the root element if `position="end"`. */
+  positionEnd: string;
+  /** Styles applied to the root element if `disablePointerEvents={true}`. */
+  disablePointerEvents: string;
+  /** Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
+  hiddenLabel: string;
+  /** Styles applied if the adornment is used inside <FormControl size="small" />. */
+  sizeSmall: string;
+}
+
+export type InputAdornmentClassKey = keyof InputAdornmentClasses;
+
+export function getInputAdornmentUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiInputAdornment', slot);
+}
+
+const inputAdornmentClasses: InputAdornmentClasses = generateUtilityClasses('MuiInputAdornment', [
+  'root',
+  'filled',
+  'standard',
+  'outlined',
+  'positionStart',
+  'positionEnd',
+  'disablePointerEvents',
+  'hiddenLabel',
+  'sizeSmall',
+]);
+
+export default inputAdornmentClasses;
diff --git a/packages/mui-material-next/src/InputLabel/InputLabel.d.ts b/packages/mui-material-next/src/InputLabel/InputLabel.d.ts
new file mode 100644
index 00000000000000..9b704a57d331b7
--- /dev/null
+++ b/packages/mui-material-next/src/InputLabel/InputLabel.d.ts
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion, OverridableComponent, OverrideProps } from '@mui/types';
+import { FormLabelProps, ExtendFormLabelTypeMap } from '../FormLabel';
+import { Theme } from '../styles';
+import { InputLabelClasses } from './inputLabelClasses';
+
+export interface InputLabelPropsSizeOverrides {}
+
+export interface InputLabelOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<InputLabelClasses>;
+  color?: FormLabelProps['color'];
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused?: boolean;
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin?: 'dense';
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required?: boolean;
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink?: boolean;
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
+export type InputLabelTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'label',
+> = ExtendFormLabelTypeMap<{
+  props: AdditionalProps & InputLabelOwnProps;
+  defaultComponent: RootComponent;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [InputLabel API](https://mui.com/material-ui/api/input-label/)
+ * - inherits [FormLabel API](https://mui.com/material-ui/api/form-label/)
+ */
+declare const InputLabel: OverridableComponent<InputLabelTypeMap>;
+
+export type InputLabelProps<
+  RootComponent extends React.ElementType = InputLabelTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<InputLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default InputLabel;
diff --git a/packages/mui-material-next/src/InputLabel/InputLabel.js b/packages/mui-material-next/src/InputLabel/InputLabel.js
new file mode 100644
index 00000000000000..54b6561f9f6cb8
--- /dev/null
+++ b/packages/mui-material-next/src/InputLabel/InputLabel.js
@@ -0,0 +1,249 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import clsx from 'clsx';
+import formControlState from '../FormControl/formControlState';
+import useFormControl from '../FormControl/useFormControl';
+import FormLabel, { formLabelClasses } from '../FormLabel';
+import useThemeProps from '../styles/useThemeProps';
+import styled, { rootShouldForwardProp } from '../styles/styled';
+import { getInputLabelUtilityClasses } from './inputLabelClasses';
+
+const useUtilityClasses = (ownerState) => {
+  const { classes, formControl, size, shrink, disableAnimation, variant, required } = ownerState;
+  const slots = {
+    root: [
+      'root',
+      formControl && 'formControl',
+      !disableAnimation && 'animated',
+      shrink && 'shrink',
+      size && size !== 'normal' && `size${capitalize(size)}`,
+      variant,
+    ],
+    asterisk: [required && 'asterisk'],
+  };
+
+  const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
+
+  return {
+    ...classes, // forward the focused, disabled, etc. classes to the FormLabel
+    ...composedClasses,
+  };
+};
+
+const InputLabelRoot = styled(FormLabel, {
+  shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiInputLabel',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+    return [
+      { [`& .${formLabelClasses.asterisk}`]: styles.asterisk },
+      styles.root,
+      ownerState.formControl && styles.formControl,
+      ownerState.size === 'small' && styles.sizeSmall,
+      ownerState.shrink && styles.shrink,
+      !ownerState.disableAnimation && styles.animated,
+      styles[ownerState.variant],
+    ];
+  },
+})(({ theme, ownerState }) => ({
+  display: 'block',
+  transformOrigin: 'top left',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  maxWidth: '100%',
+  ...(ownerState.formControl && {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    // slight alteration to spec spacing to match visual spec result
+    transform: 'translate(0, 20px) scale(1)',
+  }),
+  ...(ownerState.size === 'small' && {
+    // Compensation for the `Input.inputSizeSmall` style.
+    transform: 'translate(0, 17px) scale(1)',
+  }),
+  ...(ownerState.shrink && {
+    transform: 'translate(0, -1.5px) scale(0.75)',
+    transformOrigin: 'top left',
+    maxWidth: '133%',
+  }),
+  ...(!ownerState.disableAnimation && {
+    transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeOut,
+    }),
+  }),
+  ...(ownerState.variant === 'filled' && {
+    // Chrome's autofill feature gives the input field a yellow background.
+    // Since the input field is behind the label in the HTML tree,
+    // the input field is drawn last and hides the label with an opaque background color.
+    // zIndex: 1 will raise the label above opaque background-colors of input.
+    zIndex: 1,
+    pointerEvents: 'none',
+    transform: 'translate(12px, 16px) scale(1)',
+    maxWidth: 'calc(100% - 24px)',
+    ...(ownerState.size === 'small' && {
+      transform: 'translate(12px, 13px) scale(1)',
+    }),
+    ...(ownerState.shrink && {
+      userSelect: 'none',
+      pointerEvents: 'auto',
+      transform: 'translate(12px, 7px) scale(0.75)',
+      maxWidth: 'calc(133% - 24px)',
+      ...(ownerState.size === 'small' && {
+        transform: 'translate(12px, 4px) scale(0.75)',
+      }),
+    }),
+  }),
+  ...(ownerState.variant === 'outlined' && {
+    // see comment above on filled.zIndex
+    zIndex: 1,
+    pointerEvents: 'none',
+    transform: 'translate(14px, 16px) scale(1)',
+    maxWidth: 'calc(100% - 24px)',
+    ...(ownerState.size === 'small' && {
+      transform: 'translate(14px, 9px) scale(1)',
+    }),
+    ...(ownerState.shrink && {
+      userSelect: 'none',
+      pointerEvents: 'auto',
+      // Theoretically, we should have (8+5)*2/0.75 = 34px
+      // but it feels a better when it bleeds a bit on the left, so 32px.
+      maxWidth: 'calc(133% - 32px)',
+      transform: 'translate(14px, -9px) scale(0.75)',
+    }),
+  }),
+}));
+
+const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
+  const props = useThemeProps({ name: 'MuiInputLabel', props: inProps });
+  const {
+    disableAnimation = false,
+    margin,
+    shrink: shrinkProp,
+    variant,
+    className,
+    ...other
+  } = props;
+
+  const muiFormControl = useFormControl();
+
+  let shrink = shrinkProp;
+  if (typeof shrink === 'undefined' && muiFormControl) {
+    shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
+  }
+
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['size', 'variant', 'required'],
+  });
+
+  const ownerState = {
+    ...props,
+    disableAnimation,
+    formControl: muiFormControl,
+    shrink,
+    size: fcs.size,
+    variant: fcs.variant,
+    required: fcs.required,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return (
+    <InputLabelRoot
+      data-shrink={shrink}
+      ownerState={ownerState}
+      ref={ref}
+      className={clsx(classes.root, className)}
+      {...other}
+      classes={classes}
+    />
+  );
+});
+
+InputLabel.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+    PropTypes.string,
+  ]),
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation: PropTypes.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: PropTypes.oneOf(['dense']),
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink: PropTypes.bool,
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['normal', 'small']),
+    PropTypes.string,
+  ]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
+};
+
+export default InputLabel;
diff --git a/packages/mui-material-next/src/InputLabel/InputLabel.spec.tsx b/packages/mui-material-next/src/InputLabel/InputLabel.spec.tsx
new file mode 100644
index 00000000000000..e9e6603b0fa0c8
--- /dev/null
+++ b/packages/mui-material-next/src/InputLabel/InputLabel.spec.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { expectType } from '@mui/types';
+import InputLabel from '@mui/material/InputLabel';
+
+const CustomComponent: React.FC<{ prop1: string; prop2: number }> = function CustomComponent() {
+  return <div />;
+};
+
+const InputLabelTest = () => {
+  return (
+    <div>
+      <InputLabel />
+      <InputLabel component="legend" />
+      <InputLabel
+        component="legend"
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLLegendElement, MouseEvent>, typeof event>(event);
+        }}
+      />
+
+      {/* @ts-expect-error */}
+      <InputLabel component="a" incorrectAttribute="url" />
+      {/* @ts-expect-error */}
+      <InputLabel component="div" href="url" />
+      <InputLabel component={CustomComponent} prop1="1" prop2={12} />
+      {/* @ts-expect-error */}
+      <InputLabel component={CustomComponent} prop1="1" />
+      {/* @ts-expect-error */}
+      <InputLabel component={CustomComponent} prop1="1" prop2="12" />
+    </div>
+  );
+};
diff --git a/packages/mui-material-next/src/InputLabel/InputLabel.test.js b/packages/mui-material-next/src/InputLabel/InputLabel.test.js
new file mode 100644
index 00000000000000..1a1b2a7e038f7c
--- /dev/null
+++ b/packages/mui-material-next/src/InputLabel/InputLabel.test.js
@@ -0,0 +1,165 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { expect } from 'chai';
+import { describeConformance, act, createRenderer } from '@mui-internal/test-utils';
+import { ClassNames } from '@emotion/react';
+import FormControl from '@mui/material/FormControl';
+import Input from '@mui/material/Input';
+import FormLabel from '@mui/material/FormLabel';
+import InputLabel, { inputLabelClasses as classes } from '@mui/material/InputLabel';
+
+describe('<InputLabel />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<InputLabel>Foo</InputLabel>, () => ({
+    classes,
+    inheritComponent: FormLabel,
+    render,
+    refInstanceof: window.HTMLLabelElement,
+    muiName: 'MuiInputLabel',
+    testVariantProps: { size: 'small' },
+    skip: ['componentsProp'],
+  }));
+
+  it('should render a label with text', () => {
+    const { container } = render(<InputLabel>Foo</InputLabel>);
+    expect(container.querySelector('label')).to.have.text('Foo');
+  });
+
+  it('should have the animated class by default', () => {
+    const { container } = render(<InputLabel>Foo</InputLabel>);
+    expect(container.firstChild).to.have.class(classes.animated);
+  });
+
+  it('should not have the animated class when disabled', () => {
+    const { container } = render(<InputLabel disableAnimation>Foo</InputLabel>);
+    expect(container.firstChild).not.to.have.class(classes.animated);
+  });
+
+  it('should forward the asterisk class to AsteriskComponent when required', () => {
+    const { container } = render(
+      <InputLabel classes={{ asterisk: 'my-asterisk' }} required>
+        Foo
+      </InputLabel>,
+    );
+    expect(container.querySelector('.my-asterisk')).to.have.class('MuiFormLabel-asterisk');
+    expect(container.querySelector('.my-asterisk')).to.have.class('MuiInputLabel-asterisk');
+  });
+
+  describe('with FormControl', () => {
+    it('should have the formControl class', () => {
+      const { getByTestId } = render(
+        <FormControl>
+          <InputLabel data-testid="root" />
+        </FormControl>,
+      );
+      expect(getByTestId('root')).to.have.class(classes.formControl);
+    });
+
+    it('should have the small class', () => {
+      const { getByTestId } = render(
+        <FormControl size="small">
+          <InputLabel data-testid="root" />
+        </FormControl>,
+      );
+
+      expect(getByTestId('root')).to.have.class(classes.sizeSmall);
+    });
+
+    describe('filled', () => {
+      it('applies a shrink class that can be controlled by props', () => {
+        function Wrapper({ children }) {
+          return (
+            <FormControl>
+              <Input defaultValue="Dave" />
+              {children}
+            </FormControl>
+          );
+        }
+        Wrapper.propTypes = { children: PropTypes.node };
+        const { getByTestId, setProps } = render(<InputLabel data-testid="root">name</InputLabel>, {
+          wrapper: Wrapper,
+        });
+
+        expect(getByTestId('root')).to.have.class(classes.shrink);
+
+        setProps({ shrink: false });
+        expect(getByTestId('root')).not.to.have.class(classes.shrink);
+
+        setProps({ shrink: true });
+        expect(getByTestId('root')).to.have.class(classes.shrink);
+      });
+    });
+
+    describe('focused', () => {
+      it('applies a shrink class that can be controlled by props', () => {
+        function Wrapper({ children }) {
+          return (
+            <FormControl>
+              <Input />
+              {children}
+            </FormControl>
+          );
+        }
+        Wrapper.propTypes = { children: PropTypes.node };
+
+        const { container, getByTestId, setProps } = render(<InputLabel data-testid="root" />, {
+          wrapper: Wrapper,
+        });
+        act(() => {
+          container.querySelector('input').focus();
+        });
+
+        expect(getByTestId('root')).to.have.class(classes.shrink);
+
+        setProps({ shrink: false });
+        expect(getByTestId('root')).not.to.have.class(classes.shrink);
+
+        setProps({ shrink: true });
+        expect(getByTestId('root')).to.have.class(classes.shrink);
+      });
+    });
+  });
+
+  describe('Emotion compatibility', () => {
+    it('classes.root should overwrite built-in styles.', () => {
+      const text = 'The label';
+
+      const { getByText } = render(
+        <ClassNames>
+          {({ css }) => (
+            <FormControl>
+              <InputLabel classes={{ root: css({ position: 'static' }) }}>{text}</InputLabel>
+            </FormControl>
+          )}
+        </ClassNames>,
+      );
+      const label = getByText(text);
+
+      expect(getComputedStyle(label).position).to.equal('static');
+    });
+
+    it('className should overwrite classes.root and built-in styles.', () => {
+      const text = 'The label';
+
+      const { getByText } = render(
+        <ClassNames>
+          {({ css }) => (
+            <FormControl>
+              <InputLabel
+                color="primary"
+                className={css({ position: 'static' })}
+                classes={{ root: css({ position: 'sticky' }) }}
+              >
+                {text}
+              </InputLabel>
+            </FormControl>
+          )}
+        </ClassNames>,
+      );
+      const label = getByText(text);
+
+      expect(getComputedStyle(label).position).to.equal('static');
+    });
+  });
+});
diff --git a/packages/mui-material-next/src/InputLabel/index.d.ts b/packages/mui-material-next/src/InputLabel/index.d.ts
new file mode 100644
index 00000000000000..1bee4cf24899ca
--- /dev/null
+++ b/packages/mui-material-next/src/InputLabel/index.d.ts
@@ -0,0 +1,5 @@
+export { default } from './InputLabel';
+export * from './InputLabel';
+
+export { default as inputLabelClasses } from './inputLabelClasses';
+export * from './inputLabelClasses';
diff --git a/packages/mui-material-next/src/InputLabel/index.js b/packages/mui-material-next/src/InputLabel/index.js
new file mode 100644
index 00000000000000..f1050f1d809098
--- /dev/null
+++ b/packages/mui-material-next/src/InputLabel/index.js
@@ -0,0 +1,5 @@
+'use client';
+export { default } from './InputLabel';
+
+export { default as inputLabelClasses } from './inputLabelClasses';
+export * from './inputLabelClasses';
diff --git a/packages/mui-material-next/src/InputLabel/inputLabelClasses.ts b/packages/mui-material-next/src/InputLabel/inputLabelClasses.ts
new file mode 100644
index 00000000000000..6ea43d13ce1719
--- /dev/null
+++ b/packages/mui-material-next/src/InputLabel/inputLabelClasses.ts
@@ -0,0 +1,57 @@
+import {
+  unstable_generateUtilityClass as generateUtilityClass,
+  unstable_generateUtilityClasses as generateUtilityClasses,
+} from '@mui/utils';
+
+export interface InputLabelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** State class applied to the root element if `focused={true}`. */
+  focused: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** State class applied to the root element if `required={true}`. */
+  required: string;
+  /** State class applied to the asterisk element. */
+  asterisk: string;
+  /** Styles applied to the root element if the component is a descendant of `FormControl`. */
+  formControl: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the input element if `shrink={true}`. */
+  shrink: string;
+  /** Styles applied to the input element unless `disableAnimation={true}`. */
+  animated: string;
+  /** Styles applied to the root element if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the root element if `variant="standard"`. */
+  standard: string;
+}
+
+export type InputLabelClassKey = keyof InputLabelClasses;
+
+export function getInputLabelUtilityClasses(slot: string): string {
+  return generateUtilityClass('MuiInputLabel', slot);
+}
+
+const inputLabelClasses: InputLabelClasses = generateUtilityClasses('MuiInputLabel', [
+  'root',
+  'focused',
+  'disabled',
+  'error',
+  'required',
+  'asterisk',
+  'formControl',
+  'sizeSmall',
+  'shrink',
+  'animated',
+  'standard',
+  'filled',
+  'outlined',
+]);
+
+export default inputLabelClasses;
diff --git a/packages/mui-material-next/src/Menu/Menu.d.ts b/packages/mui-material-next/src/Menu/Menu.d.ts
new file mode 100644
index 00000000000000..772dd71055b489
--- /dev/null
+++ b/packages/mui-material-next/src/Menu/Menu.d.ts
@@ -0,0 +1,97 @@
+/* eslint-disable no-restricted-imports */
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
+import { PaperProps } from '@mui/material/Paper';
+import { PopoverProps } from '@mui/material/Popover';
+import { MenuListProps } from '@mui/material/MenuList';
+import { TransitionProps } from '@mui/material/transitions/transition';
+import { MenuClasses } from './menuClasses';
+
+export interface MenuProps extends StandardProps<PopoverProps> {
+  /**
+   * An HTML element, or a function that returns one.
+   * It's used to set the position of the menu.
+   */
+  anchorEl?: PopoverProps['anchorEl'];
+  /**
+   * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled
+   * children are not focusable. If you set this prop to `false` focus will be placed
+   * on the parent modal container. This has severe accessibility implications
+   * and should only be considered if you manage focus otherwise.
+   * @default true
+   */
+  autoFocus?: boolean;
+  /**
+   * Menu contents, normally `MenuItem`s.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MenuClasses>;
+  /**
+   * When opening the menu will not focus the active item but the `[role="menu"]`
+   * unless `autoFocus` is also set to `false`. Not using the default means not
+   * following WAI-ARIA authoring practices. Please be considerate about possible
+   * accessibility implications.
+   * @default false
+   */
+  disableAutoFocusItem?: boolean;
+  /**
+   * Props applied to the [`MenuList`](/material-ui/api/menu-list/) element.
+   * @default {}
+   */
+  MenuListProps?: Partial<MenuListProps>;
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`.
+   */
+  onClose?: PopoverProps['onClose'];
+  /**
+   * If `true`, the component is shown.
+   */
+  open: boolean;
+  /**
+   * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
+   */
+  PopoverClasses?: PopoverProps['classes'];
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The length of the transition in `ms`, or 'auto'
+   * @default 'auto'
+   */
+  transitionDuration?: TransitionProps['timeout'] | 'auto';
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * @default {}
+   */
+  TransitionProps?: TransitionProps;
+  /**
+   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
+   * @default 'selectedMenu'
+   */
+  variant?: 'menu' | 'selectedMenu';
+}
+
+export declare const MenuPaper: React.FC<PaperProps>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [App Bar](https://mui.com/material-ui/react-app-bar/)
+ * - [Menu](https://mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [Menu API](https://mui.com/material-ui/api/menu/)
+ * - inherits [Popover API](https://mui.com/material-ui/api/popover/)
+ */
+export default function Menu(props: MenuProps): JSX.Element;
diff --git a/packages/mui-material-next/src/Menu/Menu.js b/packages/mui-material-next/src/Menu/Menu.js
new file mode 100644
index 00000000000000..928821b54d23a1
--- /dev/null
+++ b/packages/mui-material-next/src/Menu/Menu.js
@@ -0,0 +1,337 @@
+'use client';
+import * as React from 'react';
+import { isFragment } from 'react-is';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { useSlotProps } from '@mui/base/utils';
+import { HTMLElementType } from '@mui/utils';
+import MenuList from '@mui/material/MenuList';
+import Popover, { PopoverPaper } from '@mui/material/Popover';
+import styled, { rootShouldForwardProp } from '../styles/styled';
+import useTheme from '../styles/useTheme';
+import useThemeProps from '../styles/useThemeProps';
+import { getMenuUtilityClass } from './menuClasses';
+
+const RTL_ORIGIN = {
+  vertical: 'top',
+  horizontal: 'right',
+};
+
+const LTR_ORIGIN = {
+  vertical: 'top',
+  horizontal: 'left',
+};
+
+const useUtilityClasses = (ownerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['root'],
+    paper: ['paper'],
+    list: ['list'],
+  };
+
+  return composeClasses(slots, getMenuUtilityClass, classes);
+};
+
+const MenuRoot = styled(Popover, {
+  shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiMenu',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
+
+export const MenuPaper = styled(PopoverPaper, {
+  name: 'MuiMenu',
+  slot: 'Paper',
+  overridesResolver: (props, styles) => styles.paper,
+})({
+  // specZ: The maximum height of a simple menu should be one or more rows less than the view
+  // height. This ensures a tappable area outside of the simple menu with which to dismiss
+  // the menu.
+  maxHeight: 'calc(100% - 96px)',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+});
+
+const MenuMenuList = styled(MenuList, {
+  name: 'MuiMenu',
+  slot: 'List',
+  overridesResolver: (props, styles) => styles.list,
+})({
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+});
+
+const Menu = React.forwardRef(function Menu(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiMenu' });
+
+  const {
+    autoFocus = true,
+    children,
+    className,
+    disableAutoFocusItem = false,
+    MenuListProps = {},
+    onClose,
+    open,
+    PaperProps = {},
+    PopoverClasses,
+    transitionDuration = 'auto',
+    TransitionProps: { onEntering, ...TransitionProps } = {},
+    variant = 'selectedMenu',
+    slots = {},
+    slotProps = {},
+    ...other
+  } = props;
+
+  const theme = useTheme();
+  const isRtl = theme.direction === 'rtl';
+
+  const ownerState = {
+    ...props,
+    autoFocus,
+    disableAutoFocusItem,
+    MenuListProps,
+    onEntering,
+    PaperProps,
+    transitionDuration,
+    TransitionProps,
+    variant,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
+
+  const menuListActionsRef = React.useRef(null);
+
+  const handleEntering = (element, isAppearing) => {
+    if (menuListActionsRef.current) {
+      menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
+    }
+
+    if (onEntering) {
+      onEntering(element, isAppearing);
+    }
+  };
+
+  const handleListKeyDown = (event) => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+
+      if (onClose) {
+        onClose(event, 'tabKeyDown');
+      }
+    }
+  };
+
+  /**
+   * the index of the item should receive focus
+   * in a `variant="selectedMenu"` it's the first `selected` item
+   * otherwise it's the very first item.
+   */
+  let activeItemIndex = -1;
+  // since we inject focus related props into children we have to do a lookahead
+  // to check if there is a `selected` item. We're looking for the last `selected`
+  // item and use the first valid item as a fallback
+  React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (isFragment(child)) {
+        console.error(
+          [
+            "MUI: The Menu component doesn't accept a Fragment as a child.",
+            'Consider providing an array instead.',
+          ].join('\n'),
+        );
+      }
+    }
+
+    if (!child.props.disabled) {
+      if (variant === 'selectedMenu' && child.props.selected) {
+        activeItemIndex = index;
+      } else if (activeItemIndex === -1) {
+        activeItemIndex = index;
+      }
+    }
+  });
+
+  const PaperSlot = slots.paper ?? MenuPaper;
+  const paperExternalSlotProps = slotProps.paper ?? PaperProps;
+
+  const rootSlotProps = useSlotProps({
+    elementType: slots.root,
+    externalSlotProps: slotProps.root,
+    ownerState,
+    className: [classes.root, className],
+  });
+
+  const paperSlotProps = useSlotProps({
+    elementType: PaperSlot,
+    externalSlotProps: paperExternalSlotProps,
+    ownerState,
+    className: classes.paper,
+  });
+
+  return (
+    <MenuRoot
+      onClose={onClose}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: isRtl ? 'right' : 'left',
+      }}
+      transformOrigin={isRtl ? RTL_ORIGIN : LTR_ORIGIN}
+      slots={{
+        paper: PaperSlot,
+        root: slots.root,
+      }}
+      slotProps={{
+        root: rootSlotProps,
+        paper: paperSlotProps,
+      }}
+      open={open}
+      ref={ref}
+      transitionDuration={transitionDuration}
+      TransitionProps={{ onEntering: handleEntering, ...TransitionProps }}
+      ownerState={ownerState}
+      {...other}
+      classes={PopoverClasses}
+    >
+      <MenuMenuList
+        onKeyDown={handleListKeyDown}
+        actions={menuListActionsRef}
+        autoFocus={autoFocus && (activeItemIndex === -1 || disableAutoFocusItem)}
+        autoFocusItem={autoFocusItem}
+        variant={variant}
+        {...MenuListProps}
+        className={clsx(classes.list, MenuListProps.className)}
+      >
+        {children}
+      </MenuMenuList>
+    </MenuRoot>
+  );
+});
+
+Menu.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * An HTML element, or a function that returns one.
+   * It's used to set the position of the menu.
+   */
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    HTMLElementType,
+    PropTypes.func,
+  ]),
+  /**
+   * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled
+   * children are not focusable. If you set this prop to `false` focus will be placed
+   * on the parent modal container. This has severe accessibility implications
+   * and should only be considered if you manage focus otherwise.
+   * @default true
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * Menu contents, normally `MenuItem`s.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * When opening the menu will not focus the active item but the `[role="menu"]`
+   * unless `autoFocus` is also set to `false`. Not using the default means not
+   * following WAI-ARIA authoring practices. Please be considerate about possible
+   * accessibility implications.
+   * @default false
+   */
+  disableAutoFocusItem: PropTypes.bool,
+  /**
+   * Props applied to the [`MenuList`](/material-ui/api/menu-list/) element.
+   * @default {}
+   */
+  MenuListProps: PropTypes.object,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`.
+   */
+  onClose: PropTypes.func,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
+   */
+  PopoverClasses: PropTypes.object,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * The length of the transition in `ms`, or 'auto'
+   * @default 'auto'
+   */
+  transitionDuration: PropTypes.oneOfType([
+    PropTypes.oneOf(['auto']),
+    PropTypes.number,
+    PropTypes.shape({
+      appear: PropTypes.number,
+      enter: PropTypes.number,
+      exit: PropTypes.number,
+    }),
+  ]),
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * @default {}
+   */
+  TransitionProps: PropTypes.object,
+  /**
+   * The variant to use. Use `menu` to prevent selected items from impacting the initial focus.
+   * @default 'selectedMenu'
+   */
+  variant: PropTypes.oneOf(['menu', 'selectedMenu']),
+};
+
+export default Menu;
diff --git a/packages/mui-material-next/src/Menu/Menu.test.js b/packages/mui-material-next/src/Menu/Menu.test.js
new file mode 100644
index 00000000000000..a44da7bede2841
--- /dev/null
+++ b/packages/mui-material-next/src/Menu/Menu.test.js
@@ -0,0 +1,407 @@
+import * as React from 'react';
+import { spy } from 'sinon';
+import { expect } from 'chai';
+import {
+  createRenderer,
+  createMount,
+  describeConformance,
+  screen,
+  fireEvent,
+  strictModeDoubleLoggingSuppressed,
+} from '@mui-internal/test-utils';
+import Popover from '@mui/material/Popover';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Menu, { MenuPaper } from './Menu';
+import classes from './menuClasses';
+
+describe('<Menu />', () => {
+  const { render } = createRenderer({ clock: 'fake' });
+  const mount = createMount();
+
+  describeConformance(<Menu anchorEl={() => document.createElement('div')} open />, () => ({
+    classes,
+    inheritComponent: Popover,
+    render,
+    muiName: 'MuiMenu',
+    refInstanceof: window.HTMLDivElement,
+    slots: {
+      root: {
+        expectedClassName: classes.root,
+      },
+      paper: {
+        expectedClassName: classes.paper,
+      },
+    },
+    testDeepOverrides: { slotName: 'list', slotClassName: classes.list },
+    testRootOverrides: { slotName: 'root', slotClassName: classes.root },
+    testVariantProps: { variant: 'menu' },
+    skip: [
+      'rootClass', // portal, can't determine the root
+      'componentProp',
+      'componentsProp',
+      'reactTestRenderer', // react-transition-group issue
+      'themeDefaultProps', // portal, can't determine the root
+    ],
+  }));
+
+  describe('event callbacks', () => {
+    describe('entering', () => {
+      it('should fire callbacks', () => {
+        const handleEnter = spy();
+        const handleEntering = spy();
+        render(
+          <Menu
+            anchorEl={document.createElement('div')}
+            open
+            TransitionProps={{
+              onEnter: handleEnter,
+              onEntering: handleEntering,
+            }}
+          />,
+        );
+
+        expect(handleEnter.callCount).to.equal(
+          // onEnter is called on mount which is run twice with Strict Effects
+          React.version.startsWith('18') ? 2 : 1,
+        );
+        expect(handleEnter.args[0].length).to.equal(2);
+        expect(handleEntering.callCount).to.equal(1);
+        expect(handleEntering.args[0].length).to.equal(2);
+      });
+    });
+
+    describe('exiting', () => {
+      it('should fire callbacks', () => {
+        const handleExit = spy();
+        const handleExiting = spy();
+
+        const { setProps } = render(
+          <Menu
+            TransitionProps={{
+              onExit: handleExit,
+              onExiting: handleExiting,
+            }}
+            anchorEl={document.createElement('div')}
+            open
+          />,
+        );
+
+        setProps({
+          open: false,
+        });
+
+        expect(handleExit.callCount).to.equal(1);
+        expect(handleExit.args[0].length).to.equal(1);
+        expect(handleExiting.callCount).to.equal(1);
+        expect(handleExiting.args[0].length).to.equal(1);
+      });
+    });
+  });
+
+  it('should pass `classes.paper` to the Paper', () => {
+    render(
+      <Menu
+        anchorEl={document.createElement('div')}
+        open
+        PaperProps={{ 'data-testid': 'paper' }}
+      />,
+    );
+
+    expect(screen.getByTestId('paper')).to.have.class(classes.paper);
+  });
+
+  describe('prop: PopoverClasses', () => {
+    it('should be able to change the Popover style', () => {
+      render(
+        <Menu
+          anchorEl={document.createElement('div')}
+          open
+          PaperProps={{ 'data-testid': 'paper' }}
+          PopoverClasses={{ paper: 'bar' }}
+        />,
+      );
+
+      expect(screen.getByTestId('paper')).to.have.class('bar');
+    });
+
+    it('should be able to change the Popover root element style when Menu classes prop is also provided', () => {
+      render(
+        <Menu
+          anchorEl={document.createElement('div')}
+          open
+          data-testid="popover"
+          classes={{ paper: 'bar' }}
+          PopoverClasses={{ root: 'foo' }}
+        />,
+      );
+      expect(screen.getByTestId('popover')).to.have.class('foo');
+    });
+  });
+
+  describe('prop: PaperProps', () => {
+    it('should be passed to the paper component', () => {
+      const customElevation = 12;
+      const customClasses = { rounded: { borderRadius: 12 } };
+      const wrapper = mount(
+        <Menu
+          anchorEl={document.createElement('div')}
+          open
+          PaperProps={{
+            'data-testid': 'paper',
+            elevation: customElevation,
+            classes: customClasses,
+          }}
+        />,
+      );
+
+      expect(wrapper.find(MenuPaper).props().elevation).to.equal(customElevation);
+      expect(wrapper.find(MenuPaper).props().classes).to.contain(customClasses);
+    });
+  });
+
+  it('should pass onClose prop to Popover', () => {
+    const handleClose = spy();
+    render(<Menu anchorEl={document.createElement('div')} open onClose={handleClose} />);
+
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' });
+
+    expect(handleClose.callCount).to.equal(1);
+  });
+
+  it('renders its children only when open', () => {
+    const { setProps } = render(
+      <Menu anchorEl={document.createElement('div')} open={false}>
+        <div data-testid="children" />
+      </Menu>,
+    );
+
+    expect(screen.queryByTestId('children')).to.equal(null);
+
+    setProps({ open: true });
+
+    expect(screen.getByTestId('children')).not.to.equal(null);
+  });
+
+  describe('list node', () => {
+    it('should render a menu inside the Popover', () => {
+      render(<Menu anchorEl={document.createElement('div')} open data-testid="popover" />);
+
+      expect(screen.getByTestId('popover').querySelector('[role="menu"]')).not.to.equal(null);
+    });
+  });
+
+  it('should open during the initial mount', () => {
+    function MenuItem(props) {
+      const { autoFocus, children } = props;
+      return (
+        <div role="menuitem" tabIndex={-1} data-autofocus={autoFocus}>
+          {children}
+        </div>
+      );
+    }
+    render(
+      <Menu anchorEl={document.createElement('div')} open>
+        <MenuItem>one</MenuItem>
+      </Menu>,
+    );
+
+    expect(screen.getByRole('menuitem')).to.have.attribute('data-autofocus', 'true');
+  });
+
+  it('should not focus list if autoFocus=false', () => {
+    render(
+      <Menu anchorEl={document.createElement('div')} autoFocus={false} open>
+        <div tabIndex={-1} />
+      </Menu>,
+    );
+
+    expect(screen.getByRole('menu')).not.toHaveFocus();
+  });
+
+  it('should call TransitionProps.onEntering', () => {
+    const onEnteringSpy = spy();
+    render(
+      <Menu
+        anchorEl={document.createElement('div')}
+        open
+        TransitionProps={{ onEntering: onEnteringSpy }}
+      />,
+    );
+
+    expect(onEnteringSpy.callCount).to.equal(1);
+  });
+
+  it('should call TransitionProps.onEntering, disableAutoFocusItem', () => {
+    const onEnteringSpy = spy();
+    render(
+      <Menu
+        anchorEl={document.createElement('div')}
+        disableAutoFocusItem
+        open
+        TransitionProps={{ onEntering: onEnteringSpy }}
+      />,
+    );
+
+    expect(onEnteringSpy.callCount).to.equal(1);
+  });
+
+  it('should call onClose on tab', () => {
+    function MenuItem(props) {
+      const { autoFocus, children } = props;
+
+      const ref = React.useRef(null);
+      React.useEffect(() => {
+        if (autoFocus) {
+          ref.current.focus();
+        }
+      }, [autoFocus]);
+
+      return (
+        <div ref={ref} role="menuitem" tabIndex={-1}>
+          {children}
+        </div>
+      );
+    }
+    const onCloseSpy = spy();
+    render(
+      <Menu anchorEl={document.createElement('div')} open onClose={onCloseSpy}>
+        <MenuItem>hello</MenuItem>
+      </Menu>,
+    );
+
+    fireEvent.keyDown(screen.getByRole('menuitem'), { key: 'Tab' });
+
+    expect(onCloseSpy.callCount).to.equal(1);
+    expect(onCloseSpy.args[0][1]).to.equal('tabKeyDown');
+  });
+
+  it('ignores invalid children', () => {
+    render(
+      <Menu anchorEl={document.createElement('div')} open>
+        {null}
+        <span role="menuitem">hello</span>
+        {/* testing conditional rendering */}
+        {false && <span role="menuitem">hello</span>}
+        {undefined}
+        foo
+      </Menu>,
+    );
+
+    expect(screen.getAllByRole('menuitem')).to.have.length(1);
+  });
+
+  describe('warnings', () => {
+    it('warns a Fragment is passed as a child', () => {
+      expect(() => {
+        render(
+          <Menu anchorEl={document.createElement('div')} open={false}>
+            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+            <React.Fragment />
+          </Menu>,
+        );
+      }).toErrorDev([
+        "MUI: The Menu component doesn't accept a Fragment as a child.",
+        !strictModeDoubleLoggingSuppressed &&
+          "MUI: The Menu component doesn't accept a Fragment as a child.",
+      ]);
+    });
+  });
+
+  describe('theme customization', () => {
+    it('should override Menu Paper styles following correct precedence', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const menuPaperOverrides = { borderRadius: 4 };
+      const popoverPaperOverrides = { borderRadius: 8, height: 100 };
+      const rootPaperOverrides = { borderRadius: 16, height: 200, width: 200 };
+
+      const theme = createTheme({
+        components: {
+          MuiMenu: { styleOverrides: { paper: menuPaperOverrides } },
+          MuiPopover: { styleOverrides: { paper: popoverPaperOverrides } },
+          MuiPaper: { styleOverrides: { root: rootPaperOverrides } },
+        },
+      });
+
+      render(
+        <ThemeProvider theme={theme}>
+          <Menu
+            anchorEl={document.createElement('div')}
+            open
+            PaperProps={{
+              'data-testid': 'paper',
+            }}
+          />
+        </ThemeProvider>,
+      );
+
+      const paper = screen.getByTestId('paper');
+      expect(paper).toHaveComputedStyle({
+        borderTopLeftRadius: `${menuPaperOverrides.borderRadius}px`,
+        borderBottomLeftRadius: `${menuPaperOverrides.borderRadius}px`,
+        borderTopRightRadius: `${menuPaperOverrides.borderRadius}px`,
+        borderBottomRightRadius: `${menuPaperOverrides.borderRadius}px`,
+        height: `${popoverPaperOverrides.height}px`,
+        width: `${rootPaperOverrides.width}px`,
+      });
+    });
+
+    it('should override Menu Paper styles using styles in MuiPaper slot', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const theme = createTheme({
+        components: {
+          MuiPaper: { styleOverrides: { rounded: { borderRadius: 90 } } },
+        },
+      });
+
+      render(
+        <ThemeProvider theme={theme}>
+          <Menu
+            anchorEl={document.createElement('div')}
+            open
+            PaperProps={{
+              'data-testid': 'paper',
+            }}
+          />
+        </ThemeProvider>,
+      );
+
+      const paper = screen.getByTestId('paper');
+      expect(paper).toHaveComputedStyle({
+        borderTopLeftRadius: '90px',
+        borderBottomLeftRadius: '90px',
+        borderTopRightRadius: '90px',
+        borderBottomRightRadius: '90px',
+      });
+    });
+  });
+
+  describe('paper', () => {
+    it('should use MenuPaper component', () => {
+      const wrapper = mount(
+        <Menu anchorEl={document.createElement('div')} open>
+          <div />
+        </Menu>,
+      );
+
+      expect(wrapper.find(MenuPaper)).to.have.length(1);
+    });
+  });
+
+  describe('slots', () => {
+    it('should merge slots with existing values', () => {
+      const wrapper = mount(
+        <Menu slots={{ root: 'span' }} anchorEl={document.createElement('div')} open>
+          <div />
+        </Menu>,
+      );
+
+      expect(wrapper.find(MenuPaper)).to.have.length(1);
+    });
+  });
+});
diff --git a/packages/mui-material-next/src/Menu/index.d.ts b/packages/mui-material-next/src/Menu/index.d.ts
new file mode 100644
index 00000000000000..36a73cf7f7be4c
--- /dev/null
+++ b/packages/mui-material-next/src/Menu/index.d.ts
@@ -0,0 +1,5 @@
+export { default } from './Menu';
+export * from './Menu';
+
+export { default as menuClasses } from './menuClasses';
+export * from './menuClasses';
diff --git a/packages/mui-material-next/src/Menu/index.js b/packages/mui-material-next/src/Menu/index.js
new file mode 100644
index 00000000000000..2d9ed62e36c32c
--- /dev/null
+++ b/packages/mui-material-next/src/Menu/index.js
@@ -0,0 +1,5 @@
+'use client';
+export { default } from './Menu';
+
+export { default as menuClasses } from './menuClasses';
+export * from './menuClasses';
diff --git a/packages/mui-material-next/src/Menu/menuClasses.ts b/packages/mui-material-next/src/Menu/menuClasses.ts
new file mode 100644
index 00000000000000..47cebc2a222148
--- /dev/null
+++ b/packages/mui-material-next/src/Menu/menuClasses.ts
@@ -0,0 +1,23 @@
+import {
+  unstable_generateUtilityClasses as generateUtilityClasses,
+  unstable_generateUtilityClass as generateUtilityClass,
+} from '@mui/utils';
+
+export interface MenuClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the Paper component. */
+  paper: string;
+  /** Styles applied to the List component via `MenuList`. */
+  list: string;
+}
+
+export type MenuClassKey = keyof MenuClasses;
+
+export function getMenuUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiMenu', slot);
+}
+
+const menuClasses: MenuClasses = generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
+
+export default menuClasses;
diff --git a/packages/mui-material-next/src/MenuItem/MenuItem.d.ts b/packages/mui-material-next/src/MenuItem/MenuItem.d.ts
new file mode 100644
index 00000000000000..e21e1b2cef133d
--- /dev/null
+++ b/packages/mui-material-next/src/MenuItem/MenuItem.d.ts
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverrideProps } from '@mui/types';
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@mui/material/ButtonBase';
+import { Theme } from '@mui/material/styles';
+import { MenuItemClasses } from './menuItemClasses';
+
+export interface MenuItemOwnProps {
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MenuItemClasses>;
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
+   */
+  divider?: boolean;
+  /**
+   * If `true`, the component is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export type MenuItemTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'li',
+> = ExtendButtonBaseTypeMap<{
+  props: AdditionalProps & MenuItemOwnProps;
+  defaultComponent: RootComponent;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Menu](https://mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [MenuItem API](https://mui.com/material-ui/api/menu-item/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ */
+declare const MenuItem: ExtendButtonBase<MenuItemTypeMap>;
+
+export type MenuItemProps<
+  RootComponent extends React.ElementType = MenuItemTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<MenuItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default MenuItem;
diff --git a/packages/mui-material-next/src/MenuItem/MenuItem.js b/packages/mui-material-next/src/MenuItem/MenuItem.js
new file mode 100644
index 00000000000000..50d7de0511a5a7
--- /dev/null
+++ b/packages/mui-material-next/src/MenuItem/MenuItem.js
@@ -0,0 +1,301 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { alpha } from '@mui/system';
+import {
+  unstable_useEnhancedEffect as useEnhancedEffect,
+  unstable_useForkRef as useForkRef,
+} from '@mui/utils';
+import ListContext from '@mui/material/List/ListContext';
+import ButtonBase from '@mui/material/ButtonBase';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+import styled, { rootShouldForwardProp } from '../styles/styled';
+import useThemeProps from '../styles/useThemeProps';
+import { dividerClasses } from '../Divider';
+import menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';
+
+export const overridesResolver = (props, styles) => {
+  const { ownerState } = props;
+
+  return [
+    styles.root,
+    ownerState.dense && styles.dense,
+    ownerState.divider && styles.divider,
+    !ownerState.disableGutters && styles.gutters,
+  ];
+};
+
+const useUtilityClasses = (ownerState) => {
+  const { disabled, dense, divider, disableGutters, selected, classes } = ownerState;
+  const slots = {
+    root: [
+      'root',
+      dense && 'dense',
+      disabled && 'disabled',
+      !disableGutters && 'gutters',
+      divider && 'divider',
+      selected && 'selected',
+    ],
+  };
+
+  const composedClasses = composeClasses(slots, getMenuItemUtilityClass, classes);
+
+  return {
+    ...classes,
+    ...composedClasses,
+  };
+};
+
+const MenuItemRoot = styled(ButtonBase, {
+  shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiMenuItem',
+  slot: 'Root',
+  overridesResolver,
+})(({ theme, ownerState }) => ({
+  ...theme.typography.body1,
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  position: 'relative',
+  textDecoration: 'none',
+  minHeight: 48,
+  paddingTop: 6,
+  paddingBottom: 6,
+  boxSizing: 'border-box',
+  whiteSpace: 'nowrap',
+  ...(!ownerState.disableGutters && {
+    paddingLeft: 16,
+    paddingRight: 16,
+  }),
+  ...(ownerState.divider && {
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+    backgroundClip: 'padding-box',
+  }),
+  '&:hover': {
+    textDecoration: 'none',
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent',
+    },
+  },
+  [`&.${menuItemClasses.selected}`]: {
+    backgroundColor: theme.vars
+      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
+      : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    [`&.${menuItemClasses.focusVisible}`]: {
+      backgroundColor: theme.vars
+        ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
+        : alpha(
+            theme.palette.primary.main,
+            theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+          ),
+    },
+  },
+  [`&.${menuItemClasses.selected}:hover`]: {
+    backgroundColor: theme.vars
+      ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
+      : alpha(
+          theme.palette.primary.main,
+          theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+        ),
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: theme.vars
+        ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
+        : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    },
+  },
+  [`&.${menuItemClasses.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus,
+  },
+  [`&.${menuItemClasses.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
+  },
+  [`& + .${dividerClasses.root}`]: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+  [`& + .${dividerClasses.inset}`]: {
+    marginLeft: 52,
+  },
+  [`& .${listItemTextClasses.root}`]: {
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  [`& .${listItemTextClasses.inset}`]: {
+    paddingLeft: 36,
+  },
+  [`& .${listItemIconClasses.root}`]: {
+    minWidth: 36,
+  },
+  ...(!ownerState.dense && {
+    [theme.breakpoints.up('sm')]: {
+      minHeight: 'auto',
+    },
+  }),
+  ...(ownerState.dense && {
+    minHeight: 32, // https://m2.material.io/components/menus#specs > Dense
+    paddingTop: 4,
+    paddingBottom: 4,
+    ...theme.typography.body2,
+    [`& .${listItemIconClasses.root} svg`]: {
+      fontSize: '1.25rem',
+    },
+  }),
+}));
+
+const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiMenuItem' });
+  const {
+    autoFocus = false,
+    component = 'li',
+    dense = false,
+    divider = false,
+    disableGutters = false,
+    focusVisibleClassName,
+    role = 'menuitem',
+    tabIndex: tabIndexProp,
+    className,
+    ...other
+  } = props;
+
+  const context = React.useContext(ListContext);
+  const childContext = React.useMemo(
+    () => ({
+      dense: dense || context.dense || false,
+      disableGutters,
+    }),
+    [context.dense, dense, disableGutters],
+  );
+
+  const menuItemRef = React.useRef(null);
+  useEnhancedEffect(() => {
+    if (autoFocus) {
+      if (menuItemRef.current) {
+        menuItemRef.current.focus();
+      } else if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          'MUI: Unable to set focus to a MenuItem whose component has not been rendered.',
+        );
+      }
+    }
+  }, [autoFocus]);
+
+  const ownerState = {
+    ...props,
+    dense: childContext.dense,
+    divider,
+    disableGutters,
+  };
+
+  const classes = useUtilityClasses(props);
+
+  const handleRef = useForkRef(menuItemRef, ref);
+
+  let tabIndex;
+  if (!props.disabled) {
+    tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
+  }
+
+  return (
+    <ListContext.Provider value={childContext}>
+      <MenuItemRoot
+        ref={handleRef}
+        role={role}
+        tabIndex={tabIndex}
+        component={component}
+        focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
+        className={clsx(classes.root, className)}
+        {...other}
+        ownerState={ownerState}
+        classes={classes}
+      />
+    </ListContext.Provider>
+  );
+});
+
+MenuItem.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @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,
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
+   */
+  dense: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: PropTypes.bool,
+  /**
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
+   */
+  divider: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * @ignore
+   */
+  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  /**
+   * If `true`, the component is selected.
+   * @default false
+   */
+  selected: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * @default 0
+   */
+  tabIndex: PropTypes.number,
+};
+
+export default MenuItem;
diff --git a/packages/mui-material-next/src/MenuItem/MenuItem.spec.tsx b/packages/mui-material-next/src/MenuItem/MenuItem.spec.tsx
new file mode 100644
index 00000000000000..91c09d6a40122c
--- /dev/null
+++ b/packages/mui-material-next/src/MenuItem/MenuItem.spec.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { expectType } from '@mui/types';
+import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
+import Link from '@mui/material/Link';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const props1: MenuItemProps<'div'> = {
+  component: 'div',
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLDivElement>, typeof event>(event);
+  },
+};
+
+const props2: MenuItemProps = {
+  onChange: (event) => {
+    expectType<React.FormEvent<HTMLLIElement>, typeof event>(event);
+  },
+};
+
+const props3: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+};
+
+const props4: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+  stringProp: '2',
+  numberProp: 2,
+  // @ts-expect-error CustomComponent does not accept incorrectProp
+  incorrectProp: 3,
+};
+
+// @ts-expect-error missing props
+const props5: MenuItemProps<typeof CustomComponent> = {
+  component: CustomComponent,
+};
+
+const TestComponent = () => {
+  return (
+    <React.Fragment>
+      <MenuItem />
+      <MenuItem component={'a'} href="/test" />
+
+      <MenuItem component={CustomComponent} stringProp="s" numberProp={1} />
+      {
+        // @ts-expect-error missing props
+        <MenuItem component={CustomComponent} />
+      }
+      <MenuItem
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLLIElement>, typeof event>(event);
+        }}
+      />
+      <MenuItem
+        component="span"
+        onChange={(event) => {
+          expectType<React.FormEvent<HTMLSpanElement>, typeof event>(event);
+        }}
+      />
+      <MenuItem component={Link} />
+    </React.Fragment>
+  );
+};
diff --git a/packages/mui-material-next/src/MenuItem/MenuItem.test.js b/packages/mui-material-next/src/MenuItem/MenuItem.test.js
new file mode 100644
index 00000000000000..db2902698593e1
--- /dev/null
+++ b/packages/mui-material-next/src/MenuItem/MenuItem.test.js
@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import {
+  act,
+  describeConformance,
+  createRenderer,
+  fireEvent,
+  screen,
+} from '@mui-internal/test-utils';
+import ButtonBase from '@mui/material/ButtonBase';
+import ListContext from '@mui/material/List/ListContext';
+import MenuItem from './MenuItem';
+import classes from './menuItemClasses';
+
+describe('<MenuItem />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<MenuItem />, () => ({
+    classes,
+    inheritComponent: ButtonBase,
+    render,
+    refInstanceof: window.HTMLLIElement,
+    testComponentPropWith: 'a',
+    muiName: 'MuiMenuItem',
+    testVariantProps: { dense: true },
+    skip: ['componentsProp'],
+  }));
+
+  it('should render a focusable menuitem', () => {
+    render(<MenuItem />);
+    const menuitem = screen.getByRole('menuitem');
+
+    expect(menuitem).to.have.property('tabIndex', -1);
+  });
+
+  it('has a ripple when clicked', () => {
+    render(<MenuItem TouchRippleProps={{ classes: { rippleVisible: 'ripple-visible' } }} />);
+    const menuitem = screen.getByRole('menuitem');
+
+    // ripple starts on mousedown
+    fireEvent.mouseDown(menuitem);
+
+    expect(menuitem.querySelectorAll('.ripple-visible')).to.have.length(1);
+  });
+
+  it('should render with the selected class but not aria-selected when `selected`', () => {
+    render(<MenuItem selected />);
+    const menuitem = screen.getByRole('menuitem');
+
+    expect(menuitem).to.have.class(classes.selected);
+    expect(menuitem).not.to.have.attribute('aria-selected');
+  });
+
+  it('can have a role of option', () => {
+    render(<MenuItem role="option" aria-selected={false} />);
+
+    expect(screen.queryByRole('option')).not.to.equal(null);
+  });
+
+  describe('event callbacks', () => {
+    /**
+     * @type {Array<keyof typeof fireEvent>}
+     */
+    const events = ['click', 'mouseDown', 'mouseEnter', 'mouseLeave', 'mouseUp', 'touchEnd'];
+
+    events.forEach((eventName) => {
+      it(`should fire ${eventName}`, () => {
+        const handlerName = `on${eventName[0].toUpperCase()}${eventName.slice(1)}`;
+        const handler = spy();
+        render(<MenuItem {...{ [handlerName]: handler }} />);
+
+        fireEvent[eventName](screen.getByRole('menuitem'));
+
+        expect(handler.callCount).to.equal(1);
+      });
+    });
+
+    it(`should fire focus, keydown, keyup and blur`, () => {
+      const handleFocus = spy();
+      const handleKeyDown = spy();
+      const handleKeyUp = spy();
+      const handleBlur = spy();
+      render(
+        <MenuItem
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          onBlur={handleBlur}
+        />,
+      );
+      const menuitem = screen.getByRole('menuitem');
+
+      act(() => {
+        menuitem.focus();
+      });
+
+      expect(handleFocus.callCount).to.equal(1);
+
+      fireEvent.keyDown(menuitem);
+
+      expect(handleKeyDown.callCount).to.equal(1);
+
+      fireEvent.keyUp(menuitem);
+
+      expect(handleKeyUp.callCount).to.equal(1);
+
+      menuitem.blur();
+
+      expect(handleKeyDown.callCount).to.equal(1);
+    });
+
+    it('should fire onTouchStart', function touchStartTest() {
+      // only run in supported browsers
+      if (typeof Touch === 'undefined') {
+        this.skip();
+      }
+
+      const handleTouchStart = spy();
+      render(<MenuItem onTouchStart={handleTouchStart} />);
+      const menuitem = screen.getByRole('menuitem');
+
+      const touch = new Touch({ identifier: 0, target: menuitem, clientX: 0, clientY: 0 });
+      fireEvent.touchStart(menuitem, { touches: [touch] });
+
+      expect(handleTouchStart.callCount).to.equal(1);
+    });
+  });
+
+  it('can be disabled', () => {
+    render(<MenuItem disabled />);
+    const menuitem = screen.getByRole('menuitem');
+
+    expect(menuitem).to.have.attribute('aria-disabled', 'true');
+  });
+
+  it('can be selected', () => {
+    render(<MenuItem selected />);
+    const menuitem = screen.getByRole('menuitem');
+
+    expect(menuitem).to.have.class(classes.selected);
+  });
+
+  it('prop: disableGutters', () => {
+    const { rerender } = render(<MenuItem />);
+    const menuitem = screen.getByRole('menuitem');
+
+    expect(menuitem).to.have.class(classes.gutters);
+
+    rerender(<MenuItem disableGutters />);
+
+    expect(menuitem).not.to.have.class(classes.gutters);
+  });
+
+  describe('context: dense', () => {
+    it('should forward the context', () => {
+      let context = null;
+      const { setProps } = render(
+        <MenuItem>
+          <ListContext.Consumer>
+            {(options) => {
+              context = options;
+            }}
+          </ListContext.Consumer>
+        </MenuItem>,
+      );
+      expect(context).to.have.property('dense', false);
+      setProps({ dense: true });
+      expect(context).to.have.property('dense', true);
+    });
+  });
+});
diff --git a/packages/mui-material-next/src/MenuItem/index.d.ts b/packages/mui-material-next/src/MenuItem/index.d.ts
new file mode 100644
index 00000000000000..6ef0ce0d270227
--- /dev/null
+++ b/packages/mui-material-next/src/MenuItem/index.d.ts
@@ -0,0 +1,5 @@
+export { default } from './MenuItem';
+export * from './MenuItem';
+
+export * from './menuItemClasses';
+export { default as menuItemClasses } from './menuItemClasses';
diff --git a/packages/mui-material-next/src/MenuItem/index.js b/packages/mui-material-next/src/MenuItem/index.js
new file mode 100644
index 00000000000000..a53c62cb82c8fe
--- /dev/null
+++ b/packages/mui-material-next/src/MenuItem/index.js
@@ -0,0 +1,5 @@
+'use client';
+export { default } from './MenuItem';
+
+export * from './menuItemClasses';
+export { default as menuItemClasses } from './menuItemClasses';
diff --git a/packages/mui-material-next/src/MenuItem/menuItemClasses.ts b/packages/mui-material-next/src/MenuItem/menuItemClasses.ts
new file mode 100644
index 00000000000000..b4a3acd84088cc
--- /dev/null
+++ b/packages/mui-material-next/src/MenuItem/menuItemClasses.ts
@@ -0,0 +1,39 @@
+import {
+  unstable_generateUtilityClasses as generateUtilityClasses,
+  unstable_generateUtilityClass as generateUtilityClass,
+} from '@mui/utils';
+
+export interface MenuItemClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** State class applied to the root element if keyboard focused. */
+  focusVisible: string;
+  /** Styles applied to the root element if dense. */
+  dense: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the root element if `divider={true}`. */
+  divider: string;
+  /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+  gutters: string;
+  /** State class applied to the root element if `selected={true}`. */
+  selected: string;
+}
+
+export type MenuItemClassKey = keyof MenuItemClasses;
+
+export function getMenuItemUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiMenuItem', slot);
+}
+
+const menuItemClasses: MenuItemClasses = generateUtilityClasses('MuiMenuItem', [
+  'root',
+  'focusVisible',
+  'dense',
+  'disabled',
+  'divider',
+  'gutters',
+  'selected',
+]);
+
+export default menuItemClasses;
diff --git a/packages/mui-material-next/src/index.ts b/packages/mui-material-next/src/index.ts
index e81ee163b5e573..f8139b2e20fc9e 100644
--- a/packages/mui-material-next/src/index.ts
+++ b/packages/mui-material-next/src/index.ts
@@ -18,9 +18,21 @@ export * from './FilledInput';
 export { default as FormControl } from './FormControl';
 export * from './FormControl';
 
+export { default as FormHelperText } from './FormHelperText';
+export * from './FormHelperText';
+
+export { default as FormLabel } from './FormLabel';
+export * from './FormLabel';
+
+export { default as InputAdornment } from './InputAdornment';
+export * from './InputAdornment';
+
 export { default as InputBase } from './InputBase';
 export * from './InputBase';
 
+export { default as InputLabel } from './InputLabel';
+export * from './InputLabel';
+
 export { default as Input } from './Input';
 
 export { default as Select } from './Select';
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 0ffb63e335a7d5..c57b2f21dfce4b 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -43,12 +43,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/base": "5.0.0-beta.17",
-    "@mui/core-downloads-tracker": "^5.14.11",
-    "@mui/system": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
-    "@types/react-transition-group": "^4.4.6",
+    "@mui/base": "5.0.0-beta.18",
+    "@mui/core-downloads-tracker": "^5.14.12",
+    "@mui/system": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
+    "@types/react-transition-group": "^4.4.7",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1",
@@ -57,9 +57,9 @@
   },
   "devDependencies": {
     "@mui-internal/test-utils": "^1.0.0",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/lab": "5.0.0-alpha.146",
-    "@mui/styles": "^5.14.11",
+    "@mui/icons-material": "^5.14.12",
+    "@mui/lab": "5.0.0-alpha.147",
+    "@mui/styles": "^5.14.12",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-replace": "^5.0.2",
     "@testing-library/dom": "^9.3.3",
@@ -67,9 +67,9 @@
     "@types/chai": "^4.3.6",
     "@types/prop-types": "^15.7.7",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@types/sinon": "^10.0.16",
-    "chai": "^4.3.8",
+    "@types/react-dom": "^18.2.11",
+    "@types/sinon": "^10.0.19",
+    "chai": "^4.3.10",
     "css-mediaquery": "^0.1.2",
     "express": "^4.18.2",
     "fast-glob": "^3.3.1",
diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
index 993b5ecc3e9904..00924d277efffe 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -55,7 +55,7 @@ const CheckboxRoot = styled(SwitchBase, {
         ? `rgba(${
             ownerState.color === 'default'
               ? theme.vars.palette.action.activeChannel
-              : theme.vars.palette.primary.mainChannel
+              : theme.vars.palette[ownerState.color].mainChannel
           } / ${theme.vars.palette.action.hoverOpacity})`
         : alpha(
             ownerState.color === 'default'
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js
index ae902142b397fd..17dcd5b06d57c5 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -126,7 +126,7 @@ const PaginationItemPage = styled(ButtonBase, {
       backgroundColor: (theme.vars || theme).palette.action.selected,
       '&:hover': {
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
+          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
           : alpha(
               theme.palette.action.selected,
               theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
@@ -138,7 +138,7 @@ const PaginationItemPage = styled(ButtonBase, {
       },
       [`&.${paginationItemClasses.focusVisible}`]: {
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
+          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
           : alpha(
               theme.palette.action.selected,
               theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts
index 88f8fa340cc0e4..10a9dfdac763a1 100644
--- a/packages/mui-material/src/Slider/Slider.d.ts
+++ b/packages/mui-material/src/Slider/Slider.d.ts
@@ -39,7 +39,10 @@ export interface SliderOwnProps {
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
-  color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>;
+  color?: OverridableStringUnion<
+    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    SliderPropsColorOverrides
+  >;
   /**
    * The components used for each slot inside.
    *
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 09d6b08577fe98..753b5b037e0806 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -757,7 +757,7 @@ Slider.propTypes /* remove-proptypes */ = {
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['primary', 'secondary']),
+    PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']),
     PropTypes.string,
   ]),
   /**
diff --git a/packages/mui-material/src/Slider/Slider.spec.tsx b/packages/mui-material/src/Slider/Slider.spec.tsx
index 8b4c1b181ed69e..e27a540f5a0787 100644
--- a/packages/mui-material/src/Slider/Slider.spec.tsx
+++ b/packages/mui-material/src/Slider/Slider.spec.tsx
@@ -13,6 +13,14 @@ function testOnChange() {
 
 <Slider track="inverted" />;
 
+// color types
+<Slider color="primary" />;
+<Slider color="secondary" />;
+<Slider color="error" />;
+<Slider color="success" />;
+<Slider color="info" />;
+<Slider color="warning" />;
+
 // slotProps and componentsProps as objects
 <Slider
   slotProps={{
diff --git a/packages/mui-material/src/Slider/sliderClasses.ts b/packages/mui-material/src/Slider/sliderClasses.ts
index a86fbd4d8e5e8c..965d8126c883d4 100644
--- a/packages/mui-material/src/Slider/sliderClasses.ts
+++ b/packages/mui-material/src/Slider/sliderClasses.ts
@@ -8,6 +8,14 @@ export interface SliderClasses {
   colorPrimary: string;
   /** Styles applied to the root element if `color="secondary"`. */
   colorSecondary: string;
+  /** Styles applied to the root element if `color="error"`. */
+  colorError: string;
+  /** Styles applied to the root element if `color="info"`. */
+  colorInfo: string;
+  /** Styles applied to the root element if `color="success"`. */
+  colorSuccess: string;
+  /** Styles applied to the root element if `color="warning"`. */
+  colorWarning: string;
   /** Styles applied to the root element if `marks` is provided with at least one label. */
   marked: string;
   /** Styles applied to the root element if `orientation="vertical"`. */
@@ -44,6 +52,14 @@ export interface SliderClasses {
   thumbColorPrimary: string;
   /** Styles applied to the thumb element if `color="secondary"`. */
   thumbColorSecondary: string;
+  /** Styles applied to the thumb element if `color="error"`. */
+  thumbColorError: string;
+  /** Styles applied to the thumb element if `color="info"`. */
+  thumbColorInfo: string;
+  /** Styles applied to the thumb element if `color="success"`. */
+  thumbColorSuccess: string;
+  /** Styles applied to the thumb element if `color="warning"`. */
+  thumbColorWarning: string;
   /** Styles applied to the thumb element if `size="small"`. */
   thumbSizeSmall: string;
   /** Styles applied to the thumb label element. */
@@ -67,6 +83,10 @@ const sliderClasses: SliderClasses = generateUtilityClasses('MuiSlider', [
   'active',
   'colorPrimary',
   'colorSecondary',
+  'colorError',
+  'colorInfo',
+  'colorSuccess',
+  'colorWarning',
   'disabled',
   'dragging',
   'focusVisible',
@@ -80,6 +100,10 @@ const sliderClasses: SliderClasses = generateUtilityClasses('MuiSlider', [
   'thumb',
   'thumbColorPrimary',
   'thumbColorSecondary',
+  'thumbColorError',
+  'thumbColorSuccess',
+  'thumbColorInfo',
+  'thumbColorWarning',
   'track',
   'trackInverted',
   'trackFalse',
diff --git a/packages/mui-material/src/Typography/Typography.test.js b/packages/mui-material/src/Typography/Typography.test.js
index 99ac1bf1be7247..0012276b60ac6f 100644
--- a/packages/mui-material/src/Typography/Typography.test.js
+++ b/packages/mui-material/src/Typography/Typography.test.js
@@ -112,6 +112,20 @@ describe('<Typography />', () => {
     });
   });
 
+  describe('prop: color', () => {
+    it('should check for invalid color value', () => {
+      const msg =
+        'MUI: The value found in theme for prop: "background" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".';
+      expect(() => {
+        render(
+          <Typography variant="h6" color="background">
+            Hello
+          </Typography>,
+        );
+      }).toWarnDev([msg, msg]);
+    });
+  });
+
   it('combines system properties with the sx prop', () => {
     const { container } = render(<Typography mt={2} mr={1} sx={{ marginRight: 5, mb: 2 }} />);
 
diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json
index bedc844fa8cff8..4d62cc9ee6bee9 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.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.",
@@ -39,17 +39,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/utils": "^5.14.11",
+    "@mui/utils": "^5.14.12",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@mui-internal/test-utils": "^1.0.0",
-    "@mui/material": "^5.14.11",
-    "@mui/styles": "^5.14.11",
-    "@mui/types": "^7.2.4",
+    "@mui/material": "^5.14.12",
+    "@mui/styles": "^5.14.12",
+    "@mui/types": "^7.2.5",
     "@types/chai": "^4.3.6",
     "@types/react": "^18.2.23",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "react": "^18.2.0"
   },
   "peerDependencies": {
diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json
index d0b2f84a9eaed4..21fc6f0235d49d 100644
--- a/packages/mui-styled-engine-sc/package.json
+++ b/packages/mui-styled-engine-sc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine-sc",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for styled-components.",
@@ -46,7 +46,7 @@
     "@mui-internal/test-utils": "^1.0.0",
     "@types/chai": "^4.3.6",
     "@types/react": "^18.2.23",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "hoist-non-react-statics": "^3.3.2",
     "react": "^18.2.0",
     "styled-components": "^6.0.0"
diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json
index 71d3c40d04fc9b..ee55bb8796a8dd 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.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",
@@ -49,7 +49,7 @@
     "@mui-internal/test-utils": "^1.0.0",
     "@types/chai": "^4.3.6",
     "@types/react": "^18.2.23",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "react": "^18.2.0"
   },
   "peerDependencies": {
diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json
index 3f2f70c6f51b3a..808eda55e87abb 100644
--- a/packages/mui-styles/package.json
+++ b/packages/mui-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/styles",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.",
@@ -40,9 +40,9 @@
   "dependencies": {
     "@babel/runtime": "^7.23.1",
     "@emotion/hash": "^0.9.1",
-    "@mui/private-theming": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
+    "@mui/private-theming": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "hoist-non-react-statics": "^3.3.2",
@@ -58,13 +58,13 @@
   },
   "devDependencies": {
     "@mui-internal/test-utils": "^1.0.0",
-    "@mui/joy": "5.0.0-beta.8",
-    "@mui/material": "^5.14.11",
+    "@mui/joy": "5.0.0-beta.9",
+    "@mui/material": "^5.14.12",
     "@types/chai": "^4.3.6",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@types/sinon": "^10.0.16",
-    "chai": "^4.3.8",
+    "@types/react-dom": "^18.2.11",
+    "@types/sinon": "^10.0.19",
+    "chai": "^4.3.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sinon": "^15.2.0"
diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json
index 00c9e97dd974c7..2120e7351e4d28 100644
--- a/packages/mui-system/package.json
+++ b/packages/mui-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -41,10 +41,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/private-theming": "^5.14.11",
-    "@mui/styled-engine": "^5.14.11",
-    "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.11",
+    "@mui/private-theming": "^5.14.12",
+    "@mui/styled-engine": "^5.14.12",
+    "@mui/types": "^7.2.5",
+    "@mui/utils": "^5.14.12",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"
@@ -53,14 +53,14 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui-internal/test-utils": "^1.0.0",
-    "@mui/joy": "5.0.0-beta.8",
-    "@mui/material": "^5.14.11",
-    "@mui/material-next": "6.0.0-alpha.103",
+    "@mui/joy": "5.0.0-beta.9",
+    "@mui/material": "^5.14.12",
+    "@mui/material-next": "6.0.0-alpha.104",
     "@types/chai": "^4.3.6",
     "@types/prop-types": "^15.7.7",
     "@types/react": "^18.2.23",
-    "@types/sinon": "^10.0.16",
-    "chai": "^4.3.8",
+    "@types/sinon": "^10.0.19",
+    "chai": "^4.3.10",
     "fast-glob": "^3.3.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
diff --git a/packages/mui-system/src/palette.test.js b/packages/mui-system/src/palette.test.js
index 3c12032546dba8..bb2fc9ecb56f73 100644
--- a/packages/mui-system/src/palette.test.js
+++ b/packages/mui-system/src/palette.test.js
@@ -9,10 +9,16 @@ const theme = {
 
 describe('palette', () => {
   it('should treat grey as CSS color', () => {
-    const output = palette({
-      theme,
-      backgroundColor: 'grey',
-    });
+    let output;
+    expect(() => {
+      output = palette({
+        theme,
+        backgroundColor: 'grey',
+      });
+    }).toWarnDev(
+      'MUI: The value found in theme for prop: "grey" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+    );
+
     expect(output).to.deep.equal({
       backgroundColor: 'grey',
     });
diff --git a/packages/mui-system/src/style.js b/packages/mui-system/src/style.js
index 2767e7e306623a..9ee5757ed90caa 100644
--- a/packages/mui-system/src/style.js
+++ b/packages/mui-system/src/style.js
@@ -35,6 +35,14 @@ export function getStyleValue(themeMapping, transform, propValueFinal, userValue
     value = getPath(themeMapping, propValueFinal) || userValue;
   }
 
+  if (typeof value === 'object') {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `MUI: The value found in theme for prop: "${propValueFinal}" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".`,
+      );
+    }
+  }
+
   if (transform) {
     value = transform(value, userValue, themeMapping);
   }
diff --git a/packages/mui-system/src/style.test.js b/packages/mui-system/src/style.test.js
index 618017cbd214ff..c5635bfc6789c3 100644
--- a/packages/mui-system/src/style.test.js
+++ b/packages/mui-system/src/style.test.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import style from './style';
+import style, { getStyleValue } from './style';
 
 describe('style', () => {
   const bgcolor = style({
@@ -258,4 +258,60 @@ describe('style', () => {
       });
     });
   });
+  describe('getStyleValue', () => {
+    it('should warn on acceptable object', () => {
+      const round = (value) => Math.round(value * 1e5) / 1e5;
+      let output;
+
+      expect(() => {
+        output = getStyleValue(
+          {
+            body1: {
+              fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+              fontSize: '1rem',
+              letterSpacing: `${round(0.15 / 16)}em`,
+              fontWeight: 400,
+              lineHeight: 1.5,
+            },
+          },
+          null,
+          'body1',
+        );
+      }).toWarnDev(
+        'MUI: The value found in theme for prop: "body1" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+      );
+
+      expect(output).to.deep.equal({
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontSize: '1rem',
+        letterSpacing: `${round(0.15 / 16)}em`,
+        fontWeight: 400,
+        lineHeight: 1.5,
+      });
+    });
+
+    it('should warn on unacceptable object', () => {
+      const theme = {
+        palette: {
+          grey: { 100: '#f5f5f5' },
+        },
+      };
+
+      const paletteTransform = (value, userValue) => {
+        if (userValue === 'grey') {
+          return userValue;
+        }
+        return value;
+      };
+      let output;
+
+      expect(() => {
+        output = getStyleValue(theme.palette, paletteTransform, 'grey');
+      }).toWarnDev(
+        'MUI: The value found in theme for prop: "grey" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+      );
+
+      expect(output).to.be.equal('grey');
+    });
+  });
 });
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
index ba0d89c8fdb8f6..d19b7a24840f5c 100644
--- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
+++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
@@ -93,10 +93,17 @@ describe('styleFunctionSx', () => {
     });
 
     it('resolves system typography', () => {
-      const result = styleFunctionSx({
-        theme,
-        sx: { typography: ['body2', 'body1'] },
-      });
+      let result;
+
+      expect(() => {
+        result = styleFunctionSx({
+          theme,
+          sx: { typography: ['body2', 'body1'] },
+        });
+      }).toWarnDev([
+        'MUI: The value found in theme for prop: "body2" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+        'MUI: The value found in theme for prop: "body1" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".',
+      ]);
 
       expect(result).to.deep.equal({
         '@media (min-width:0px)': {
diff --git a/packages/mui-types/package.json b/packages/mui-types/package.json
index 8ae5cc819adbfd..dfab9b6052c633 100644
--- a/packages/mui-types/package.json
+++ b/packages/mui-types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/types",
-  "version": "7.2.4",
+  "version": "7.2.5",
   "private": false,
   "author": "MUI Team",
   "description": "Utility types for MUI.",
diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json
index 452ed18e2183f8..ccb9030b91cdae 100644
--- a/packages/mui-utils/package.json
+++ b/packages/mui-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "5.14.11",
+  "version": "5.14.12",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
@@ -47,18 +47,18 @@
   "devDependencies": {
     "@babel/helper-module-imports": "^7.22.15",
     "@mui-internal/test-utils": "^1.0.0",
-    "@mui/types": "^7.2.4",
+    "@mui/types": "^7.2.5",
     "@types/babel-plugin-macros": "^3.1.1",
     "@types/chai": "^4.3.6",
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^18.18.0",
+    "@types/mocha": "^10.0.2",
+    "@types/node": "^18.18.4",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-is": "^18.2.1",
-    "@types/sinon": "^10.0.16",
+    "@types/react-dom": "^18.2.11",
+    "@types/react-is": "^18.2.2",
+    "@types/sinon": "^10.0.19",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-tester": "^11.0.4",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sinon": "^15.2.0"
diff --git a/packages/rsc-builder/package.json b/packages/rsc-builder/package.json
index b648f00a9fe9d7..e981eade7c68f1 100644
--- a/packages/rsc-builder/package.json
+++ b/packages/rsc-builder/package.json
@@ -8,7 +8,7 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^18.18.0"
+    "@types/mocha": "^10.0.2",
+    "@types/node": "^18.18.4"
   }
 }
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
index c2c0fcab60e137..c0241657b24a49 100644
--- a/packages/test-utils/package.json
+++ b/packages/test-utils/package.json
@@ -26,7 +26,7 @@
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/react": "^14.0.0",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "chai-dom": "^1.11.0",
     "dom-accessibility-api": "^0.6.3",
     "enzyme": "^3.11.0",
@@ -47,9 +47,9 @@
     "@types/format-util": "^1.0.2",
     "@types/prop-types": "^15.7.7",
     "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-test-renderer": "^18.0.2",
-    "@types/sinon": "^10.0.16",
+    "@types/react-dom": "^18.2.11",
+    "@types/react-test-renderer": "^18.0.3",
+    "@types/sinon": "^10.0.19",
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
diff --git a/packages/test-utils/src/describeJoyColorInversion.tsx b/packages/test-utils/src/describeJoyColorInversion.tsx
deleted file mode 100644
index 318f62621007ed..00000000000000
--- a/packages/test-utils/src/describeJoyColorInversion.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as React from 'react';
-import { expect } from 'chai';
-import { ThemeProvider } from '@mui/joy/styles';
-import Sheet from '@mui/joy/Sheet';
-import { createRenderer, MuiRenderResult } from './createRenderer';
-
-/**
- * Test suite for checking the color inversion conformance for a component.
- *
- * Specify the `data-testid="test-element"` to the slot that apply `colorContext` className
- * otherwise the root slot will be used as a test element.
- */
-export default function describeJoyColorInversion(
-  element: React.ReactElement,
-  options: {
-    muiName: string;
-    classes: { colorContext: string; colorPrimary: string; colorSuccess: string };
-    wrapper?: (node: React.ReactElement) => React.ReactElement;
-    portalSlot?: string;
-  },
-) {
-  const { classes, muiName, wrapper = (node) => node, portalSlot } = options;
-  const { render } = createRenderer();
-  const getTestElement = (result: MuiRenderResult, id = '') => {
-    const { container, queryByTestId } = result;
-    let testElement = queryByTestId('test-element') ?? container.firstChild?.firstChild;
-    if (id) {
-      testElement = queryByTestId(id) ?? testElement;
-    }
-    return testElement;
-  };
-  describe('Color Inversion', () => {
-    describe('Feature enabled', () => {
-      it('implicit color value', () => {
-        const result = render(
-          <ThemeProvider>
-            <Sheet invertedColors variant="solid" color="primary">
-              {wrapper(element)}
-            </Sheet>
-          </ThemeProvider>,
-        );
-        expect(getTestElement(result)).to.have.class(classes.colorContext);
-      });
-
-      it('implicit color with theme default color', () => {
-        const result = render(
-          <ThemeProvider
-            theme={{
-              components: {
-                [muiName]: {
-                  defaultProps: {
-                    color: 'success',
-                  },
-                },
-              },
-            }}
-          >
-            <Sheet invertedColors variant="solid" color="primary">
-              {wrapper(element)}
-            </Sheet>
-          </ThemeProvider>,
-        );
-        expect(getTestElement(result)).to.have.class(classes.colorContext);
-      });
-    });
-
-    describe('Portal slot', () => {
-      if (!portalSlot) {
-        return;
-      }
-
-      const getProps = (disablePortal: boolean) =>
-        portalSlot === 'root'
-          ? {
-              disablePortal,
-              ...(!element.props.slotProps?.root?.['data-testid'] && {
-                'data-testid': 'test-portal',
-              }),
-            }
-          : {
-              slotProps: {
-                ...element.props.slotProps,
-                [portalSlot]: {
-                  ...element.props.slotProps?.[portalSlot],
-                  disablePortal,
-                  'data-testid': 'test-portal',
-                },
-              },
-            };
-
-      it('If `disablePortal` is false, color inversion should NOT apply', () => {
-        const result = render(
-          <ThemeProvider>
-            <Sheet invertedColors variant="solid" color="primary">
-              {wrapper(React.cloneElement(element, getProps(false)))}
-            </Sheet>
-          </ThemeProvider>,
-        );
-        expect(getTestElement(result, 'test-portal')).not.to.have.class(classes.colorContext);
-      });
-
-      it('If `disablePortal` is true, color inversion should WORK', () => {
-        const result = render(
-          <ThemeProvider>
-            <Sheet invertedColors variant="solid" color="primary">
-              {wrapper(React.cloneElement(element, getProps(true)))}
-            </Sheet>
-          </ThemeProvider>,
-        );
-        expect(getTestElement(result, 'test-portal')).to.have.class(classes.colorContext);
-      });
-    });
-
-    it('should use instance color', () => {
-      const result = render(
-        <ThemeProvider>
-          <Sheet invertedColors variant="solid" color="primary">
-            {wrapper(React.cloneElement(element, { color: 'primary' }))}
-          </Sheet>
-        </ThemeProvider>,
-      );
-      expect(getTestElement(result)).to.have.class(classes.colorPrimary);
-    });
-  });
-}
diff --git a/packages/test-utils/src/index.ts b/packages/test-utils/src/index.ts
index bf329372a4fdf3..8bcfd338a4218d 100644
--- a/packages/test-utils/src/index.ts
+++ b/packages/test-utils/src/index.ts
@@ -3,7 +3,6 @@ import * as React from 'react';
 export * from './components';
 export { default as describeConformance } from './describeConformance';
 export { default as describeConformanceUnstyled } from './describeConformanceUnstyled';
-export { default as describeJoyColorInversion } from './describeJoyColorInversion';
 export { default as createDescribe } from './createDescribe';
 export * from './createRenderer';
 export { default as createMount } from './createMount';
diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json
index 7d8031dc8ef7f1..38f0290cf765b8 100644
--- a/packages/typescript-to-proptypes/package.json
+++ b/packages/typescript-to-proptypes/package.json
@@ -38,13 +38,13 @@
     "@types/chai": "^4.3.6",
     "@types/doctrine": "^0.0.7",
     "@types/lodash": "^4.14.199",
-    "@types/node": "^18.18.0",
+    "@types/node": "^18.18.4",
     "@types/prettier": "^2.7.3",
     "@types/react": "^18.2.23",
     "@types/uuid": "^9.0.4",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "fast-glob": "^3.3.1",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.1"
+    "rimraf": "^5.0.5"
   }
 }
diff --git a/packages/zero-jest/package.json b/packages/zero-jest/package.json
index 888ee61ac6b84f..783c65928e0679 100644
--- a/packages/zero-jest/package.json
+++ b/packages/zero-jest/package.json
@@ -46,7 +46,6 @@
   "devDependencies": {
     "@jest/transform": "^29.7.0"
   },
-  "peerDependencies": {},
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json
index b83d3b2775fcf9..64e987e3b61aa8 100644
--- a/packages/zero-runtime/package.json
+++ b/packages/zero-runtime/package.json
@@ -43,8 +43,8 @@
   },
   "devDependencies": {
     "@types/chai": "^4.3.6",
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^18.18.0",
+    "@types/mocha": "^10.0.2",
+    "@types/node": "^18.18.4",
     "@types/react": "^18.2.23",
     "react": "^18.2.0"
   },
diff --git a/packages/zero-tag-processor/package.json b/packages/zero-tag-processor/package.json
index 83c7db765f7c0f..4bd53db60349e5 100644
--- a/packages/zero-tag-processor/package.json
+++ b/packages/zero-tag-processor/package.json
@@ -47,19 +47,19 @@
     "@emotion/css": "^11.11.2",
     "@linaria/tags": "^4.5.4",
     "@linaria/utils": "^4.5.3",
-    "@mui/system": "^5.14.11",
+    "@mui/system": "^5.14.12",
     "lodash.get": "^4.4.2",
     "stylis": "^4.2.0"
   },
   "devDependencies": {
-    "@mui/material": "^5.14.11",
+    "@mui/material": "^5.14.12",
     "@types/babel__core": "^7.20.2",
     "@types/babel__helper-module-imports": "^7.18.1",
     "@types/babel__helper-plugin-utils": "^7.10.1",
     "@types/chai": "^4.3.6",
     "@types/lodash.get": "^4.4.7",
-    "@types/mocha": "^10.0.1",
-    "@types/node": "^18.18.0",
+    "@types/mocha": "^10.0.2",
+    "@types/node": "^18.18.4",
     "@types/stylis": "^4.2.0"
   },
   "sideEffects": false,
diff --git a/packages/zero-vite-plugin/package.json b/packages/zero-vite-plugin/package.json
index fb330388de4fe2..f90ba29ba88fa9 100644
--- a/packages/zero-vite-plugin/package.json
+++ b/packages/zero-vite-plugin/package.json
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@types/babel__core": "^7.20.2",
     "@types/chai": "^4.3.6",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "vite": "^4.4.9"
   },
   "peerDependencies": {
diff --git a/test/package.json b/test/package.json
index 5115529964f63c..417d897b7306f1 100644
--- a/test/package.json
+++ b/test/package.json
@@ -10,18 +10,18 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@mui-internal/test-utils": "^1.0.0",
-    "@mui/base": "5.0.0-beta.17",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/joy": "5.0.0-beta.8",
-    "@mui/lab": "5.0.0-alpha.146",
-    "@mui/material": "^5.14.11",
-    "@mui/material-next": "6.0.0-alpha.103",
-    "@mui/system": "^5.14.11",
+    "@mui/base": "5.0.0-beta.18",
+    "@mui/icons-material": "^5.14.12",
+    "@mui/joy": "5.0.0-beta.9",
+    "@mui/lab": "5.0.0-alpha.147",
+    "@mui/material": "^5.14.12",
+    "@mui/material-next": "6.0.0-alpha.104",
+    "@mui/system": "^5.14.12",
     "@playwright/test": "1.37.1",
     "@testing-library/dom": "^9.3.3",
     "@types/chai": "^4.3.6",
     "@types/react": "^18.2.23",
-    "chai": "^4.3.8",
+    "chai": "^4.3.10",
     "docs": "^5.0.0",
     "fast-glob": "^3.3.1",
     "fs-extra": "^11.1.1",
diff --git a/test/regressions/fixtures/JoyColorInversion/JoyColorInversionStyled.js b/test/regressions/fixtures/JoyColorInversion/JoyColorInversionStyled.js
new file mode 100644
index 00000000000000..60f14eeb51fb49
--- /dev/null
+++ b/test/regressions/fixtures/JoyColorInversion/JoyColorInversionStyled.js
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { CssVarsProvider, styled } from '@mui/joy/styles';
+import { applySolidInversion } from '@mui/joy/colorInversion';
+import CssBaseline from '@mui/joy/CssBaseline';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import SvgIcon from '@mui/joy/SvgIcon';
+
+const Wrapper = styled('div')(
+  ({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.5rem',
+    padding: '1.5rem',
+    borderRadius: 20,
+    width: 300,
+    maxWidth: '100%',
+    ...theme.variants.solid.warning,
+  }),
+  applySolidInversion('warning'),
+);
+
+export default function JoyColorInversionStyled() {
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Wrapper>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <div>
+            <Typography level="title-lg">$4,236</Typography>
+            <Typography fontSize="xs" fontFamily="code">
+              CREDIT
+            </Typography>
+          </div>
+          <SvgIcon sx={{ ml: 'auto' }}>
+            <svg
+              width="50"
+              height="39"
+              viewBox="0 0 50 39"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M16.4992 2H37.5808L22.0816 24.9729H1L16.4992 2Z" fill="currentColor" />
+              <path
+                d="M17.4224 27.102L11.4192 36H33.5008L49 13.0271H32.7024L23.2064 27.102H17.4224Z"
+                fill="#312ECB"
+              />
+            </svg>
+          </SvgIcon>
+        </Box>
+        <Typography level="title-lg" fontFamily="code">
+          •••• •••• •••• 1212
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'space-between' }}>
+          <div>
+            <Typography fontSize="xs" fontFamily="code">
+              CARD NAME
+            </Typography>
+            <Typography level="title-sm" fontSize="sm">
+              JOHN DOE
+            </Typography>
+          </div>
+          <div>
+            <Typography fontSize="xs" textAlign="right" fontFamily="code">
+              EXPIRE
+            </Typography>
+            <Typography level="title-sm" fontSize="sm" textAlign="right">
+              07/25
+            </Typography>
+          </div>
+        </Box>
+      </Wrapper>
+    </CssVarsProvider>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
index 4d00440bcc6895..06d581c7276a0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2787,6 +2787,11 @@
   resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-18.0.0.tgz#f43d765b3c7533fd6fb88f3f25df079c24fccf69"
   integrity sha512-V8GImKs3TeQRxRtXFpG2wl19V7444NIOTDF24AWuIbmNaNYOQMWRbjcGDXV5B+0n887fgDcuMNOmlul+k+oJtw==
 
+"@octokit/openapi-types@^19.0.0":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-19.0.0.tgz#0101bf62ab14c1946149a0f8385440963e1253c4"
+  integrity sha512-PclQ6JGMTE9iUStpzMkwLCISFn/wDeRjkZFIKALpvJQNBGwDoYYi2fFvuHwssoQ1rXI5mfh6jgTgWuddeUzfWw==
+
 "@octokit/plugin-enterprise-rest@6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz#e07896739618dab8da7d4077c658003775f95437"
@@ -2807,12 +2812,12 @@
     "@octokit/tsconfig" "^1.0.2"
     "@octokit/types" "^9.2.3"
 
-"@octokit/plugin-paginate-rest@^8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-8.0.0.tgz#417b5367da2ba3c2d255a59b87c1cc608228ec38"
-  integrity sha512-2xZ+baZWUg+qudVXnnvXz7qfrTmDeYPCzangBVq/1gXxii/OiS//4shJp9dnCCvj1x+JAm9ji1Egwm1BA47lPQ==
+"@octokit/plugin-paginate-rest@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-9.0.0.tgz#21fd12816c2dc158a775ed20be5abcbc61052a46"
+  integrity sha512-oIJzCpttmBTlEhBmRvb+b9rlnGpmFgDtZ0bB6nq39qIod6A5DP+7RkVLMOixIgRCYSHDTeayWqmiJ2SZ6xgfdw==
   dependencies:
-    "@octokit/types" "^11.0.0"
+    "@octokit/types" "^12.0.0"
 
 "@octokit/plugin-request-log@^1.0.4":
   version "1.0.4"
@@ -2824,6 +2829,13 @@
   resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-4.0.0.tgz#260fa6970aa97bbcbd91f99f3cd812e2b285c9f1"
   integrity sha512-2uJI1COtYCq8Z4yNSnM231TgH50bRkheQ9+aH8TnZanB6QilOnx8RMD2qsnamSOXtDj0ilxvevf5fGsBhBBzKA==
 
+"@octokit/plugin-rest-endpoint-methods@^10.0.0":
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-10.0.0.tgz#040b36d6a15d4c7c534b0f44050051225f884cae"
+  integrity sha512-16VkwE2v6rXU+/gBsYC62M8lKWOphY5Lg4wpjYnVE9Zbu0J6IwiT5kILoj1YOB53XLmcJR+Nqp8DmifOPY4H3g==
+  dependencies:
+    "@octokit/types" "^12.0.0"
+
 "@octokit/plugin-rest-endpoint-methods@^5.12.0":
   version "5.16.2"
   resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.16.2.tgz#7ee8bf586df97dd6868cf68f641354e908c25342"
@@ -2840,13 +2852,6 @@
     "@octokit/types" "^9.2.3"
     deprecation "^2.3.1"
 
-"@octokit/plugin-rest-endpoint-methods@^9.0.0":
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-9.0.0.tgz#e15d54540893202da107305ded2bfd21ce6f769d"
-  integrity sha512-KquMF/VB1IkKNiVnzJKspY5mFgGyLd7HzdJfVEGTJFzqu9BRFNWt+nwTCMuUiWc72gLQhRWYubTwOkQj+w/1PA==
-  dependencies:
-    "@octokit/types" "^11.0.0"
-
 "@octokit/request-error@^2.0.5", "@octokit/request-error@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.1.0.tgz#9e150357831bfc788d13a4fd4b1913d60c74d677"
@@ -2929,15 +2934,15 @@
     "@octokit/plugin-request-log" "^1.0.4"
     "@octokit/plugin-rest-endpoint-methods" "^5.12.0"
 
-"@octokit/rest@^20.0.1":
-  version "20.0.1"
-  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-20.0.1.tgz#b8ee194b7cf89772d1e3fea3209f741c76a5efd3"
-  integrity sha512-wROV21RwHQIMNb2Dgd4+pY+dVy1Dwmp85pBrgr6YRRDYRBu9Gb+D73f4Bl2EukZSj5hInq2Tui9o7gAQpc2k2Q==
+"@octokit/rest@^20.0.2":
+  version "20.0.2"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-20.0.2.tgz#5cc8871ba01b14604439049e5f06c74b45c99594"
+  integrity sha512-Ux8NDgEraQ/DMAU1PlAohyfBBXDwhnX2j33Z1nJNziqAfHi70PuxkFYIcIt8aIAxtRE7KVuKp8lSR8pA0J5iOQ==
   dependencies:
     "@octokit/core" "^5.0.0"
-    "@octokit/plugin-paginate-rest" "^8.0.0"
+    "@octokit/plugin-paginate-rest" "^9.0.0"
     "@octokit/plugin-request-log" "^4.0.0"
-    "@octokit/plugin-rest-endpoint-methods" "^9.0.0"
+    "@octokit/plugin-rest-endpoint-methods" "^10.0.0"
 
 "@octokit/tsconfig@^1.0.2":
   version "1.0.2"
@@ -2951,6 +2956,13 @@
   dependencies:
     "@octokit/openapi-types" "^18.0.0"
 
+"@octokit/types@^12.0.0":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-12.0.0.tgz#6b34309288b6f5ac9761d2589e3165cde1b95fee"
+  integrity sha512-EzD434aHTFifGudYAygnFlS1Tl6KhbTynEWELQXIbTY8Msvb5nEqTZIm7sbPEt4mQYLZwu3zPKVdeIrw0g7ovg==
+  dependencies:
+    "@octokit/openapi-types" "^19.0.0"
+
 "@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.39.0", "@octokit/types@^6.40.0":
   version "6.41.0"
   resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.41.0.tgz#e58ef78d78596d2fb7df9c6259802464b5f84a04"
@@ -3849,10 +3861,10 @@
   dependencies:
     markdown-to-jsx "*"
 
-"@types/mdast@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.0.tgz#9f9462d4584a8b3e3711ea8bb4a94c485559ab90"
-  integrity sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==
+"@types/mdast@4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.1.tgz#9c45e60a04e79f160dcefe6545d28ae536a6ed22"
+  integrity sha512-IlKct1rUTJ1T81d8OHzyop15kGv9A/ff7Gz7IJgrk6jDb4Udw77pCJ+vq8oxZf4Ghpm+616+i1s/LNg/Vh7d+g==
   dependencies:
     "@types/unist" "*"
 
@@ -3878,15 +3890,15 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/mocha@^10.0.1":
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.1.tgz#2f4f65bb08bc368ac39c96da7b2f09140b26851b"
-  integrity sha512-/fvYntiO1GeICvqbQ3doGDIP97vWmvFt83GKguJ6prmQM2iXZfFcq6YE8KteFyRtX2/h5Hf91BYvPodJKFYv5Q==
+"@types/mocha@^10.0.2":
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.2.tgz#96d63314255540a36bf24da094cce7a13668d73b"
+  integrity sha512-NaHL0+0lLNhX6d9rs+NSt97WH/gIlRHmszXbQ/8/MV/eVcFNdeJ/GYhrFuUc8K7WuPhRhTSdMkCp8VMzhUq85w==
 
-"@types/node@*", "@types/node@>=10.0.0", "@types/node@>=12", "@types/node@>=12.0.0", "@types/node@>=18.0.0", "@types/node@^14.0.1", "@types/node@^14.14.35", "@types/node@^18.18.0":
-  version "18.18.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.0.tgz#bd19d5133a6e5e2d0152ec079ac27c120e7f1763"
-  integrity sha512-3xA4X31gHT1F1l38ATDIL9GpRLdwVhnEFC8Uikv5ZLlXATwrCYyPq7ZWHxzxc3J/30SUiwiYT+bQe0/XvKlWbw==
+"@types/node@*", "@types/node@>=10.0.0", "@types/node@>=12", "@types/node@>=12.0.0", "@types/node@>=18.0.0", "@types/node@^14.0.1", "@types/node@^14.14.35", "@types/node@^18.18.4":
+  version "18.18.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.4.tgz#519fef47a13cf869be290c20fc6ae9b7fe887aa7"
+  integrity sha512-t3rNFBgJRugIhackit2mVcLfF6IRc0JE4oeizPQL8Zrm8n2WY/0wOdpOPhdtG0V9Q2TlW/axbF1MJ6z+Yj/kKQ==
 
 "@types/normalize-package-data@^2.4.0", "@types/normalize-package-data@^2.4.1":
   version "2.4.1"
@@ -3933,54 +3945,54 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@18.2.7", "@types/react-dom@^18.0.0", "@types/react-dom@^18.2.7":
-  version "18.2.7"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
-  integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
+"@types/react-dom@18.2.11", "@types/react-dom@^18.0.0", "@types/react-dom@^18.2.11":
+  version "18.2.11"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.11.tgz#4332c315544698a0875dfdb6e320dda59e1b3d58"
+  integrity sha512-zq6Dy0EiCuF9pWFW6I6k6W2LdpUixLE4P6XjXU1QHLfak3GPACQfLwEuHzY5pOYa4hzj1d0GxX/P141aFjZsyg==
   dependencies:
     "@types/react" "*"
 
-"@types/react-is@^18.2.1":
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.1.tgz#61d01c2a6fc089a53520c0b66996d458fdc46863"
-  integrity sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==
+"@types/react-is@^18.2.2":
+  version "18.2.2"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.2.tgz#c2f4f8c7c7449376dab648dec9327f7148983d06"
+  integrity sha512-bNmRDADVsOivYLvqYQATYRbf60SlK++spu97SK65pSCjdtuTqczFexBQtOK+gQdG6cqOsvQZ3mR12ueEoaq5iA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-swipeable-views-utils@^0.13.4":
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/@types/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.4.tgz#2a48da267b48467887b146178673f4020dec5b1e"
-  integrity sha512-v0nDk6mMIPAu/kaEnqQpDz2Z7O8ewqy2in7xwobcAAkUKKsdw3MSWFW1BkQ+dPgTrBnj/KXUzx3ZIS6UYviwyA==
+"@types/react-swipeable-views-utils@^0.13.5":
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/@types/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.5.tgz#22c9a1cc07b58e3df9b6443607bd0dccbc9aedeb"
+  integrity sha512-VOWRDGyizqQT/Qpv1tbKcGaha0sQR2XTy4VRvlq54NRpxhTsDS6q7EHUV3oz10k6kvyEAHn//wdKx4jPnzQ0ow==
   dependencies:
     "@material-ui/types" "^4.0.0"
     "@types/react" "*"
     "@types/react-swipeable-views" "*"
 
-"@types/react-swipeable-views@*", "@types/react-swipeable-views@^0.13.2":
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/@types/react-swipeable-views/-/react-swipeable-views-0.13.2.tgz#c37cc8978ae60ab0dff209ef3eb1f77185aef330"
-  integrity sha512-FiszBm9M0JicAgzO/IwDqpfHQRUEjPZA88UexYsVD6qHJBf5LrbGjR5Mw4+yZbf8ZxJneNqOsZbe4WGjOYG7iQ==
+"@types/react-swipeable-views@*", "@types/react-swipeable-views@^0.13.3":
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/@types/react-swipeable-views/-/react-swipeable-views-0.13.3.tgz#a4c545b7b722c2622806e5853a96ec5826b0bafb"
+  integrity sha512-gVAQb5AxZTSLVTrJ/Fxwsk0axdBqGzXC8NxAD8MNwEf+qZynsb+15KL9TpNCaGGk4SCE2iyU/JNi6nGNB61AyA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@^18.0.2":
-  version "18.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.2.tgz#44243977eec18ab8cda88d8977437f47a0d3fdbe"
-  integrity sha512-tJzMn+9GHDrdrLe0O4rwJELDfTrmdJbCn/UdYyzjlnPiXYXDl5FBNzdw4PVk2R3hJvSHKFjZcRgvZc12lV0p5Q==
+"@types/react-test-renderer@^18.0.3":
+  version "18.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.3.tgz#67922bf5e5f0096581b1efd67dcdeabdd400cfea"
+  integrity sha512-4wcNLnY6nIT+L6g94CpzL4CXX2P18JvKPU9CDlaHr3DnbP3GiaQLhDotJqjWlVqOcE4UhLRjp0MtxqwuNKONnA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.6":
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
-  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
+"@types/react-transition-group@^4.4.6", "@types/react-transition-group@^4.4.7":
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c"
+  integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==
   dependencies:
     "@types/react" "*"
 
-"@types/react-window@^1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
-  integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
+"@types/react-window@^1.8.6":
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.6.tgz#4faba05b86abd36f40b612a5b02e28fadcf95c7c"
+  integrity sha512-AVJr3A5rIO9dQQu5TwTN0lP2c1RtuqyyZGCt7PGP8e5gUpn1PuQRMJb/u3UpdbwTHh4wbEi33UMW5NI0IXt1Mg==
   dependencies:
     "@types/react" "*"
 
@@ -4030,10 +4042,10 @@
     "@types/mime" "*"
     "@types/node" "*"
 
-"@types/sinon@^10.0.16":
-  version "10.0.16"
-  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-10.0.16.tgz#4bf10313bd9aa8eef1e50ec9f4decd3dd455b4d3"
-  integrity sha512-j2Du5SYpXZjJVJtXBokASpPRj+e2z+VUhCPHmM6WMfe3dpHu6iVKJMU6AiBcMp/XTAYnEj6Wc1trJUWwZ0QaAQ==
+"@types/sinon@^10.0.19":
+  version "10.0.19"
+  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-10.0.19.tgz#752b752bc40bb5af0bb1aec29bde49b139b91d35"
+  integrity sha512-MWZNGPSchIdDfb5FL+VFi4zHsHbNOTQEgjqFQk7HazXSXwUU9PAX3z9XBqb3AJGYr9YwrtCtaSMsT3brYsN/jQ==
   dependencies:
     "@types/sinonjs__fake-timers" "*"
 
@@ -4124,10 +4136,10 @@
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
   integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
 
-"@types/yargs@^17.0.24", "@types/yargs@^17.0.8":
-  version "17.0.24"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.24.tgz#b3ef8d50ad4aa6aecf6ddc97c580a00f5aa11902"
-  integrity sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==
+"@types/yargs@^17.0.28", "@types/yargs@^17.0.8":
+  version "17.0.28"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.28.tgz#d106e4301fbacde3d1796ab27374dd16588ec851"
+  integrity sha512-N3e3fkS86hNhtk6BEnc0rj3zcehaxx8QWhCROJkqpl5Zaoi7nAic3jH8q94jVD3zu5LGk+PUB6KAiDmimYOEQw==
   dependencies:
     "@types/yargs-parser" "*"
 
@@ -5820,18 +5832,18 @@ chai-dom@^1.11.0:
   resolved "https://registry.yarnpkg.com/chai-dom/-/chai-dom-1.11.0.tgz#aa3af405b3d9b0470d185b17081ed23ca5fdaeb4"
   integrity sha512-ZzGlEfk1UhHH5+N0t9bDqstOxPEXmn3EyXvtsok5rfXVDOFDJbHVy12rED6ZwkJAUDs2w7/Da4Hlq2LB63kltg==
 
-chai@^4.3.8:
-  version "4.3.8"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.8.tgz#40c59718ad6928da6629c70496fe990b2bb5b17c"
-  integrity sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==
+chai@^4.3.10:
+  version "4.3.10"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.10.tgz#d784cec635e3b7e2ffb66446a63b4e33bd390384"
+  integrity sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==
   dependencies:
     assertion-error "^1.1.0"
-    check-error "^1.0.2"
-    deep-eql "^4.1.2"
-    get-func-name "^2.0.0"
-    loupe "^2.3.1"
+    check-error "^1.0.3"
+    deep-eql "^4.1.3"
+    get-func-name "^2.0.2"
+    loupe "^2.3.6"
     pathval "^1.1.1"
-    type-detect "^4.0.5"
+    type-detect "^4.0.8"
 
 chainsaw@~0.1.0:
   version "0.1.0"
@@ -5933,10 +5945,12 @@ charm@^1.0.2:
   dependencies:
     inherits "^2.0.1"
 
-check-error@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
-  integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==
+check-error@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.3.tgz#a6502e4312a7ee969f646e83bb3ddd56281bd694"
+  integrity sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==
+  dependencies:
+    get-func-name "^2.0.2"
 
 cheerio-select@^2.1.0:
   version "2.1.0"
@@ -7083,10 +7097,10 @@ dedent@0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
-deep-eql@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.2.tgz#270ceb902f87724077e6f6449aed81463f42fc1c"
-  integrity sha512-gT18+YW4CcW/DBNTwAmqTtkJh7f9qqScu2qFVlx7kCoeY9tlBu9cUcr7+I+Z/noG8INehS3xQgLpTtd/QUTn4w==
+deep-eql@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.3.tgz#7c7775513092f7df98d8df9996dd085eb668cc6d"
+  integrity sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==
   dependencies:
     type-detect "^4.0.0"
 
@@ -8996,7 +9010,7 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-func-name@^2.0.0:
+get-func-name@^2.0.0, get-func-name@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
   integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
@@ -9201,13 +9215,13 @@ glob@7.2.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^10.2.2, glob@^10.2.5:
-  version "10.3.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.3.tgz#8360a4ffdd6ed90df84aa8d52f21f452e86a123b"
-  integrity sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==
+glob@^10.2.2, glob@^10.3.7:
+  version "10.3.10"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
+  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
   dependencies:
     foreground-child "^3.1.0"
-    jackspeak "^2.0.3"
+    jackspeak "^2.3.5"
     minimatch "^9.0.1"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
     path-scurry "^1.10.1"
@@ -10586,10 +10600,10 @@ iterator.prototype@^1.1.0:
     has-tostringtag "^1.0.0"
     reflect.getprototypeof "^1.0.3"
 
-jackspeak@^2.0.3:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.2.1.tgz#655e8cf025d872c9c03d3eb63e8f0c024fef16a6"
-  integrity sha512-MXbxovZ/Pm42f6cDIDkl3xpwv1AGwObKwfmjs2nQePiy85tP3fatofl3FC1aBsOtP/6fq5SbtgHwWcMsLP+bDw==
+jackspeak@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
   dependencies:
     "@isaacs/cliui" "^8.0.2"
   optionalDependencies:
@@ -11728,10 +11742,10 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-loupe@^2.3.1:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.4.tgz#7e0b9bffc76f148f9be769cb1321d3dcf3cb25f3"
-  integrity sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==
+loupe@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.6.tgz#76e4af498103c532d1ecc9be102036a21f787b53"
+  integrity sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==
   dependencies:
     get-func-name "^2.0.0"
 
@@ -13900,9 +13914,9 @@ postcss@^7.0.26:
     source-map "^0.6.1"
 
 postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.30:
-  version "8.4.30"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.30.tgz#0e0648d551a606ef2192a26da4cabafcc09c1aa7"
-  integrity sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -14327,10 +14341,10 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-draggable@^4.4.5:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
-  integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==
+react-draggable@^4.4.6:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
+  integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
   dependencies:
     clsx "^1.1.1"
     prop-types "^15.8.1"
@@ -15128,12 +15142,12 @@ rimraf@^4.4.1:
   dependencies:
     glob "^9.2.0"
 
-rimraf@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-5.0.1.tgz#0881323ab94ad45fec7c0221f27ea1a142f3f0d0"
-  integrity sha512-OfFZdwtd3lZ+XZzYP/6gTACubwFcHdLRqS9UX3UwpU2dnGQYkPFISRwvM3w9IiB2w7bW5qGo/uAwE4SmXXSKvg==
+rimraf@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-5.0.5.tgz#9be65d2d6e683447d2e9013da2bf451139a61ccf"
+  integrity sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==
   dependencies:
-    glob "^10.2.5"
+    glob "^10.3.7"
 
 rimraf@~2.5.2:
   version "2.5.4"
@@ -16867,7 +16881,7 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
-type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5, type-detect@^4.0.8:
+type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==