@mui/system 5.14.3 → 5.14.5

package/Box/Box.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '@mui/types';
-import { Theme } from '../createTheme';
+import { Theme as SystemTheme } from '../createTheme';
 import {
   SxProps,
   AllSystemCSSProperties,
@@ -170,17 +170,26 @@ export type SystemProps<Theme extends object = {}> = {
     | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>);
 };
 
-export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div', T extends object = Theme> {
-  props: P &
-    SystemProps<T> & {
+export interface BoxTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+  Theme extends object = SystemTheme,
+> {
+  props: AdditionalProps &
+    SystemProps<Theme> & {
       children?: React.ReactNode;
+      /**
+       * The component used for the root node.
+       * Either a string to use a HTML element or a component.
+       */
+      component?: React.ElementType;
       ref?: React.Ref<unknown>;
       /**
        * The system prop that allows defining system overrides as well as additional CSS styles.
        */
-      sx?: SxProps<T>;
+      sx?: SxProps<Theme>;
     };
-  defaultComponent: D;
+  defaultComponent: RootComponent;
 }
 /**
  *
@@ -196,8 +205,10 @@ export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div', T exten
 declare const Box: OverridableComponent<BoxTypeMap>;
 
 export type BoxProps<
-  D extends React.ElementType = BoxTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BoxTypeMap<P, D>, D> & { component?: React.ElementType };
+  RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Box;

package/CHANGELOG.md

@@ -1,5 +1,173 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.5
+
+<!-- generated comparing v5.14.4..master -->
+
+_Aug 14, 2023_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- @mnajdova [made it easier to use third-party components in Base UI slots](https://mui.com/base-ui/getting-started/customization/#overriding-subcomponent-slots) with the introduction of the `prepareForSlot` utility (#38138)
+
+### `@mui/material@5.14.5`
+
+- &#8203;<!-- 04 -->[TextField] Fix to handle `onClick` on root element (#38072) @LukasTy
+
+### `@mui/codemod@5.14.5`
+
+- &#8203;<!-- 31 -->[codemod] Add v5.0.0/tree-view-moved-to-x codemod (#38248) @flaviendelangle
+
+### `@mui/joy@5.0.0-beta.2`
+
+- &#8203;<!-- 07 -->[Input][joy-ui] Fix the `FormHelperText` icon color (#38387) @TheNatkat
+- &#8203;<!-- 06 -->[Skeleton][joy-ui] Soften the pulse animation (#38384) @zanivan
+- &#8203;<!-- 05 -->[TabPanel][joy-ui] Add `keepMounted` prop (#38293) @decadef20
+
+### `@mui/base@5.0.0-beta.11`
+
+- &#8203;<!-- 30 -->[base-ui] Remove the legacy Extend\* types (#38184) @michaldudak
+- &#8203;<!-- 29 -->[base-ui] Add `useModal` hook (#38187) @mnajdova
+- &#8203;<!-- 28 -->[base-ui] Add `prepareForSlot` util (#38138) @mnajdova
+- &#8203;<!-- 26 -->[useButton][base-ui] Fix tabIndex not being forwarded (#38417) @DiegoAndai
+- &#8203;<!-- 25 -->[useButton][base-ui] Fix onFocusVisible not being handled (#38399) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 32 -->[blog] Blog post for MUI X mid v6. Date Pickers, Data Grid, and Charts (#38241) @richbustos
+- &#8203;<!-- 35 -->[docs][base-ui] Update number input API docs (#38363) @mj12albert
+- &#8203;<!-- 29 -->[docs] Improve page transition speed (#38394) @oliviertassinari
+- &#8203;<!-- 28 -->[docs] Improve examples (#38398) @oliviertassinari
+- &#8203;<!-- 19 -->[docs][docs] Add `FileUpload` demo (#38420) @sai6855
+- &#8203;<!-- 18 -->[docs][joy-ui] Refine the Order Dashboard template design (#38395) @zanivan
+- &#8203;<!-- 17 -->[docs][material-ui][joy-ui] Simplify the Quickstart section on the Usage page (#38385) @danilo-leal
+- &#8203;<!-- 16 -->[docs][Menu][joy] Explain how to control the open state (#38355) @michaldudak
+- &#8203;<!-- 15 -->[docs][material] Revise the Support page (#38207) @samuelsycamore
+- &#8203;<!-- 14 -->[docs][material-ui] Remove incorrect `aria-label`s in extended variant examples of Floating Action Button (#37170) @ashleykolodziej
+- &#8203;<!-- 13 -->[docs][material-ui] Adjust slightly the installation page content (#38380) @danilo-leal
+- &#8203;<!-- 12 -->[docs][Switch] Fix the readOnly class name in docs (#38277) @michaldudak
+- &#8203;<!-- 11 -->[docs][TablePagination] Add Tailwind CSS & plain CSS introduction demo (#38286) @mnajdova
+
+### Examples
+
+- &#8203;<!-- 10 -->[examples] Add Joy UI + Vite.js + TypeScript example app (#37406) @nithins1
+
+### Core
+
+- &#8203;<!-- 30 -->[core] Consistent URL add leading / @oliviertassinari
+- &#8203;<!-- 27 -->[docs-infra] Fix rebase issue @oliviertassinari
+- &#8203;<!-- 26 -->[docs-infra] Fix typo in docs infra docs @oliviertassinari
+- &#8203;<!-- 25 -->[docs-infra] Fix nested list margin (#38456) @oliviertassinari
+- &#8203;<!-- 24 -->[docs-infra] Move the Diamond Sponsors to the TOC (#38410) @danilo-leal
+- &#8203;<!-- 22 -->[docs-infra] Move imports into page data (#38297) @alexfauquette
+- &#8203;<!-- 21 -->[docs-infra] Adjust heading styles (#38365) @danilo-leal
+- &#8203;<!-- 20 -->[docs-infra] Fix info callout border color (#38370) @danilo-leal
+- &#8203;<!-- 05 -->[website] Upgrade the homepage hero demos design (#38388) @danilo-leal
+- &#8203;<!-- 04 -->[website] Improve Base UI hero section demo (#38255) @danilo-leal
+- &#8203;<!-- 03 -->[website] Fix EmailSubscribe look (#38429) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Link Discord in footer (#38369) @richbustos
+- &#8203;<!-- 01 -->[website] Clean up the `GetStartedButtons` component (#38256) @danilo-leal
+
+All contributors of this release in alphabetical order: @alexfauquette, @ashleykolodziej, @danilo-leal, @decadef20, @DiegoAndai, @flaviendelangle, @LukasTy, @michaldudak, @mj12albert, @mnajdova, @nithins1, @oliviertassinari, @richbustos, @sai6855, @samuelsycamore, @TheNatkat, @zanivan
+
+## 5.14.4
+
+<!-- generated comparing v5.14.3..master -->
+
+_Aug 8, 2023_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Added [Number input](https://mui.com/base-ui/react-number-input) component & [useNumberInput](https://mui.com/base-ui/react-number-input#hook) hook in [Base UI](https://mui.com/base-ui/getting-started/) @mj12albert
+
+### `@mui/material@5.14.4`
+
+- &#8203;<!-- 25 -->[Checkbox][material] Add size classes (#38182) @michaldudak
+- &#8203;<!-- 03 -->[Typography] Improve inherit variant logic (#38123) @ZeeshanTamboli
+
+### `@mui/system@5.14.4`
+
+- &#8203;<!-- 34 -->Revert "[Box] Remove `component` from TypeMap (#38168)" (#38356) @michaldudak
+
+### `@mui/base@5.0.0-beta.10`
+
+#### Breaking changes
+
+- &#8203;<!-- 32 -->[base] Ban default exports (#38200) @michaldudak
+
+  Base UI default exports were changed to named ones. Previously we had a mix of default and named ones.
+  This was changed to improve consistency and avoid problems some bundlers have with default exports.
+  See https://github.com/mui/material-ui/issues/21862 for more context.
+
+  ```diff
+  - import Button, { buttonClasses } from '@mui/base/Button';
+  + import { Button, buttonClasses } from '@mui/base/Button';
+  - import BaseMenu from '@mui/base/Menu';
+  + import { Menu as BaseMenu } from '@mui/base/Menu';
+  ```
+
+  Additionally, the `ClassNameGenerator` has been moved to the directory matching its name:
+
+  ```diff
+  - import ClassNameGenerator from '@mui/base/className';
+  + import { ClassNameGenerator } from '@mui/base/ClassNameGenerator';
+  ```
+
+  A codemod is provided to help with the migration:
+
+  ```bash
+  npx @mui/codemod v5.0.0/base-use-named-imports <path>
+  ```
+
+#### Changes
+
+- &#8203;<!-- 31 -->[base] Create useNumberInput and NumberInput (#36119) @mj12albert
+- &#8203;<!-- 28 -->[Select][base] Fix flicker on click of controlled Select button (#37855) @VishruthR
+- &#8203;<!-- 09 -->[Dropdown] Fix imports of types (#38296) @yash-thakur
+
+### `@mui/joy@5.0.0-beta.1`
+
+- &#8203;<!-- 06 -->[joy-ui][MenuButton] Fix disable of `MenuButton` (#38342) @sai6855
+
+### Docs
+
+- &#8203;<!-- 33 -->[docs][AppBar] Fix `ResponsiveAppBar` demo logo href (#38346) @iownthegame
+- &#8203;<!-- 30 -->[docs][base] Add Tailwind CSS + plain CSS demo on the Button page (#38240) @alisasanib
+- &#8203;<!-- 29 -->[docs][Menu][base] Remove `Unstyled` prefix from demos' function names (#38270) @sai6855
+- &#8203;<!-- 22 -->[docs] Add themeable component guide (#37908) @siriwatknp
+- &#8203;<!-- 21 -->[docs] Fix Joy UI demo background color (#38307) @oliviertassinari
+- &#8203;<!-- 20 -->[docs] Update API docs for Number Input component (#38301) @ZeeshanTamboli
+- &#8203;<!-- 14 -->[docs][joy-ui] Revise the theme typography page (#38285) @danilo-leal
+- &#8203;<!-- 13 -->[docs][joy-ui] Add TS demo for Menu Bar (#38308) @sai6855
+- &#8203;<!-- 10 -->[docs][joy-ui] Updated Typography callout at getting started (#38289) @zanivan
+- &#8203;<!-- 12 -->[docs][joy-ui] Fix the Inter font installation instructions (#38284) @danilo-leal
+- &#8203;<!-- 11 -->[docs][material] Add note to Autocomplete about ref forwarding (#38305) @samuelsycamore
+- &#8203;<!-- 05 -->[docs][Skeleton] Make the demos feel more realistic (#38212) @oliviertassinari
+
+- &#8203;<!-- 08 -->[examples] Swap Next.js examples between App Router and Pages Router; update naming convention (#38204) @samuelsycamore
+- &#8203;<!-- 07 -->[examples][material-ui] Add Material UI + Next.js (App Router) example in JS (#38323) @samuelsycamore
+- &#8203;<!-- 27 -->[blog] Discord announcement blog (#38258) @richbustos
+- &#8203;<!-- 26 -->[blog] Fix 301 links to Toolpad @oliviertassinari
+- &#8203;<!-- 04 -->[website] Updating Charts demo with real charts usage for MUI X marketing page (#38317) @richbustos
+- &#8203;<!-- 03 -->[website] Adjust styles of the Product section on the homepage (#38366) @danilo-leal
+- &#8203;<!-- 02 -->[website] Add Nora teamMember card to 'About' (#38358) @noraleonte
+- &#8203;<!-- 01 -->[website] Fix image layout shift (#38326) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 24 -->[core] Fix docs demo export function consistency (#38191) @oliviertassinari
+- &#8203;<!-- 23 -->[core] Fix the link-check script on Windows (#38276) @michaldudak
+- &#8203;<!-- 26 -->[core] Use @testing-library/user-event direct API (#38325) @mj12albert
+- &#8203;<!-- 29 -->[core] Port GitHub workflow for ensuring triage label is present (#38312) @DanailH
+- &#8203;<!-- 19 -->[docs-infra] Consider files ending with .types.ts as props files (#37533) @mnajdova
+- &#8203;<!-- 18 -->[docs-infra] Fix skip to content design (#38304) @oliviertassinari
+- &#8203;<!-- 17 -->[docs-infra] Add a general round of polish to the API content display (#38282) @danilo-leal
+- &#8203;<!-- 16 -->[docs-infra] Make the side nav collapse animation snappier (#38259) @danilo-leal
+- &#8203;<!-- 15 -->[docs-infra] New Component API design followup (#38183) @cherniavskii
+- &#8203;<!-- 06 -->[test] Remove unnecessary `async` keyword from test (#38373) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @alisasanib, @cherniavskii, @DanailH, @danilo-leal, @iownthegame, @michaldudak, @mj12albert, @mnajdova, @noraleonte, @oliviertassinari, @richbustos, @sai6855, @samuelsycamore, @siriwatknp, @VishruthR, @yash-thakur, @zanivan, @ZeeshanTamboli
+
 ## 5.14.3
 
 <!-- generated comparing v5.14.2..master -->
@@ -129,7 +297,7 @@ A big thanks to the 23 contributors who made this release possible.
 - &#8203;<!-- 19 -->[docs][joy] Add adjustments to the color inversion page (#37143) @danilo-leal
 - &#8203;<!-- 18 -->[docs][material] Improve documentation about adding custom colors (#37743) @DiegoAndai
 - &#8203;<!-- 17 -->[examples] Fix Joy UI Next.js App Router font loading (#38095) @IgnacioUtrilla
-- &#8203;<!-- 16 -->[examples] Fix material-next-app-router Font Usage with next/font (#38026) @onderonur
+- &#8203;<!-- 16 -->[examples] Fix material-next Font Usage with next/font (#38026) @onderonur
 
 ### Core
 
@@ -401,7 +569,7 @@ _Jun 21, 2023_
 A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨:
 
 - 💫 Added [Slider](https://mui.com/material-ui/react-slider/#material-you-version) component using the new Material You design language (#37520) @DiegoAndai.
-- 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043
+- 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043
 
 ### `@mui/material@5.13.6`
 
@@ -462,7 +630,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
 - &#8203;<!-- 19 -->[docs-infra] Add analyticsTags to Algolia (#37600) @Janpot
 - &#8203;<!-- 18 -->[docs-infra] Simplify product id handling (#37593) @oliviertassinari
 - &#8203;<!-- 35 -->[CHANGELOG] Add missing release date for v5.13.5 @oliviertassinari
-- &#8203;<!-- 16 -->[examples] Shell command fix in the readme file of material-next-app-router-ts example (#37675) @bablukpik
+- &#8203;<!-- 16 -->[examples] Shell command fix in the readme file of material-next-ts example (#37675) @bablukpik
 - &#8203;<!-- 15 -->[examples] Next.js v13 app router with Material UI (#37315) @smo043
 
 ### Core
@@ -3619,7 +3787,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som
 - [docs] Add webpack alias for legacy utils package (#33376) @jgbae
 - [docs] Improve external link icons synonyms (#33257) @davidgarciab
 - [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova
-- [examples] Add MUI base example (#33154) @siriwatknp
+- [examples] Add Base UI example (#33154) @siriwatknp
 
 ### Core
 
@@ -3638,7 +3806,7 @@ _Jul 4, 2022_
 
 A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
 
-- 🐛 Fixed an issue causing Typescript errors when building a project with Material UI v5.8.6 (@michaldudak)
+- 🐛 Fixed an issue causing TypeScript errors when building a project with Material UI v5.8.6 (@michaldudak)
 - 🐛 Fixed a few bugs in Material UI components. Thanks @henriqueholtz, @jake-collibra, @MattiasMartens and @TimoWilhelm!
 - many other 🐛 bug fixes and 📚 documentation improvements
 
@@ -3667,7 +3835,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
 
 ### `@mui/base@5.0.0-alpha.88`
 
-- [base] Remove a type incompatible with Typescript 3.5 (#33361) @michaldudak
+- [base] Remove a type incompatible with TypeScript 3.5 (#33361) @michaldudak
 - [BadgeUnstyled] Export BadgeUnstyledOwnProps interface to fix typescript compiler error (#33314) @aaronlademann-wf
 - [TablePaginationUnstyled] Accept callbacks in componentsProps (#33309) @michaldudak
 
@@ -5109,7 +5277,7 @@ _Feb 1, 2022_
 
 A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
 
-- 🛠 @goncalovf added an example project using [Material UI with Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) (#28241)
+- 🛠 @goncalovf added an example project using [Material UI with Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite) (#28241)
 - Number of 🐛 bug fixes and 📚 documentation improvements.
 
 ### `@mui/material@5.4.0`
@@ -10284,7 +10452,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
 - [theme] Add htmlFontSize to Typography interface (#23412) @fergusmcdonald
 - [Tooltip] Fix PopperProps popper modifiers not being merged properly (#23421) @dominique-mueller
 - [Tooltip] Long press select text on iOS (#23466) @hmaddisb
-- [Tooltip] Unexpected behaviour onOpen/onClose (#23482) @brorlarsnicklas
+- [Tooltip] Unexpected behavior onOpen/onClose (#23482) @brorlarsnicklas
 
 ### `@material-ui/lab@v5.0.0-alpha.16`
 

package/Container/ContainerProps.d.ts

@@ -3,8 +3,8 @@ import { OverrideProps } from '@mui/types';
 import { SxProps } from '../styleFunctionSx';
 import { Theme, Breakpoint } from '../createTheme';
 import { ContainerClasses } from './containerClasses';
-export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & {
+export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & {
         children?: React.ReactNode;
         /**
          * Override or extend the styles applied to the component.
@@ -35,6 +35,6 @@ export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
          */
         sx?: SxProps<Theme>;
     };
-    defaultComponent: D;
+    defaultComponent: DefaultComponent;
 }
-export type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;
+export type ContainerProps<RootComponent extends React.ElementType = ContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ContainerTypeMap<AdditionalProps, RootComponent>, RootComponent>;

package/Stack/StackProps.d.ts

@@ -34,18 +34,18 @@ export interface StackBaseProps {
      */
     useFlexGap?: boolean;
 }
-export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & StackBaseProps & {
+export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & StackBaseProps & {
         /**
          * The system prop, which allows defining system overrides as well as additional CSS styles.
          */
         sx?: SxProps<Theme>;
     } & SystemProps<Theme>;
-    defaultComponent: D;
+    defaultComponent: DefaultComponent;
 }
-export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
+export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
     component?: React.ElementType;
-}> = OverrideProps<StackTypeMap<P, D>, D>;
+}> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export interface StackOwnerState {
     direction: StackProps['direction'];
     spacing: StackProps['spacing'];

package/Unstable_Grid/GridProps.d.ts

@@ -173,13 +173,13 @@ export interface GridOwnerState extends GridBaseProps {
     gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
     gridOffset: Partial<Record<Breakpoint, GridSize>>;
 }
-export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & GridBaseProps & {
+export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & GridBaseProps & {
         sx?: SxProps<Theme>;
     } & SystemProps<Theme>;
-    defaultComponent: D;
+    defaultComponent: DefaultComponent;
 }
-export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
     component?: React.ElementType;
-}> = OverrideProps<GridTypeMap<P, D>, D>;
+}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export {};

package/createStyled.d.ts

@@ -24,16 +24,16 @@ export interface MuiStyledOptions {
   skipSx?: boolean;
 }
 
-export type CreateMUIStyled<T extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
-  MUIStyledCommonProps<T>,
+export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
+  MUIStyledCommonProps<Theme>,
   MuiStyledOptions,
-  T
+  Theme
 >;
 
-export default function createStyled<T extends object = DefaultTheme>(options?: {
+export default function createStyled<Theme extends object = DefaultTheme>(options?: {
   themeId?: string;
-  defaultTheme?: T;
+  defaultTheme?: Theme;
   rootShouldForwardProp?: (prop: PropertyKey) => boolean;
   slotShouldForwardProp?: (prop: PropertyKey) => boolean;
   styleFunctionSx?: typeof styleFunctionSx;
-}): CreateMUIStyled<T>;
+}): CreateMUIStyled<Theme>;

package/createStyled.js

@@ -78,6 +78,9 @@ function shouldForwardProp(prop) {
 const systemDefaultTheme = (0, _createTheme.default)();
 exports.systemDefaultTheme = systemDefaultTheme;
 const lowercaseFirstLetter = string => {
+  if (!string) {
+    return string;
+  }
   return string.charAt(0).toLowerCase() + string.slice(1);
 };
 function resolveTheme({
@@ -87,6 +90,12 @@ function resolveTheme({
 }) {
   return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
 }
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return (props, styles) => styles[slot];
+}
 function createStyled(input = {}) {
   const {
     themeId,
@@ -111,21 +120,31 @@ function createStyled(input = {}) {
         slot: componentSlot,
         skipVariantsResolver: inputSkipVariantsResolver,
         skipSx: inputSkipSx,
-        overridesResolver
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
+        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
+    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
     let label;
     if (process.env.NODE_ENV !== 'production') {
       if (componentName) {
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
         label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
       }
     }
     let shouldForwardPropOption = shouldForwardProp;
-    if (componentSlot === 'Root') {
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
       shouldForwardPropOption = rootShouldForwardProp;
     } else if (componentSlot) {
       // any other slot specified
@@ -207,7 +226,7 @@ function createStyled(input = {}) {
       if (process.env.NODE_ENV !== 'production') {
         let displayName;
         if (componentName) {
-          displayName = `${componentName}${componentSlot || ''}`;
+          displayName = `${componentName}${(0, _utils.unstable_capitalize)(componentSlot || '')}`;
         }
         if (displayName === undefined) {
           displayName = `Styled(${(0, _utils.getDisplayName)(tag)})`;

package/esm/createStyled.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
 import styleFunctionSx from './styleFunctionSx';
@@ -66,6 +66,9 @@ export function shouldForwardProp(prop) {
 }
 export const systemDefaultTheme = createTheme();
 const lowercaseFirstLetter = string => {
+  if (!string) {
+    return string;
+  }
   return string.charAt(0).toLowerCase() + string.slice(1);
 };
 function resolveTheme({
@@ -75,6 +78,12 @@ function resolveTheme({
 }) {
   return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
 }
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return (props, styles) => styles[slot];
+}
 export default function createStyled(input = {}) {
   const {
     themeId,
@@ -99,21 +108,31 @@ export default function createStyled(input = {}) {
         slot: componentSlot,
         skipVariantsResolver: inputSkipVariantsResolver,
         skipSx: inputSkipSx,
-        overridesResolver
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
+        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = _objectWithoutPropertiesLoose(inputOptions, _excluded);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
+    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
     let label;
     if (process.env.NODE_ENV !== 'production') {
       if (componentName) {
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
         label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
       }
     }
     let shouldForwardPropOption = shouldForwardProp;
-    if (componentSlot === 'Root') {
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
       shouldForwardPropOption = rootShouldForwardProp;
     } else if (componentSlot) {
       // any other slot specified
@@ -195,7 +214,7 @@ export default function createStyled(input = {}) {
       if (process.env.NODE_ENV !== 'production') {
         let displayName;
         if (componentName) {
-          displayName = `${componentName}${componentSlot || ''}`;
+          displayName = `${componentName}${capitalize(componentSlot || '')}`;
         }
         if (displayName === undefined) {
           displayName = `Styled(${getDisplayName(tag)})`;

package/esm/styleFunctionSx/styleFunctionSx.js

@@ -34,6 +34,8 @@ export function unstable_createStyleFunctionSx() {
     if (val == null) {
       return null;
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
       return {
         [prop]: val

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.14.3
+ * @mui/system v5.14.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/createStyled.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
 import styleFunctionSx from './styleFunctionSx';
@@ -66,6 +66,9 @@ export function shouldForwardProp(prop) {
 }
 export var systemDefaultTheme = createTheme();
 var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
+  if (!string) {
+    return string;
+  }
   return string.charAt(0).toLowerCase() + string.slice(1);
 };
 function resolveTheme(_ref) {
@@ -74,6 +77,14 @@ function resolveTheme(_ref) {
     themeId = _ref.themeId;
   return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
 }
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return function (props, styles) {
+    return styles[slot];
+  };
+}
 export default function createStyled() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var themeId = input.themeId,
@@ -104,18 +115,27 @@ export default function createStyled() {
       componentSlot = inputOptions.slot,
       inputSkipVariantsResolver = inputOptions.skipVariantsResolver,
       inputSkipSx = inputOptions.skipSx,
-      overridesResolver = inputOptions.overridesResolver,
+      _inputOptions$overrid = inputOptions.overridesResolver,
+      overridesResolver = _inputOptions$overrid === void 0 ? defaultOverridesResolver(lowercaseFirstLetter(componentSlot)) : _inputOptions$overrid,
       options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    var skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
+    var skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     var skipSx = inputSkipSx || false;
     var label;
     if (process.env.NODE_ENV !== 'production') {
       if (componentName) {
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
         label = "".concat(componentName, "-").concat(lowercaseFirstLetter(componentSlot || 'Root'));
       }
     }
     var shouldForwardPropOption = shouldForwardProp;
-    if (componentSlot === 'Root') {
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
       shouldForwardPropOption = rootShouldForwardProp;
     } else if (componentSlot) {
       // any other slot specified
@@ -205,7 +225,7 @@ export default function createStyled() {
       if (process.env.NODE_ENV !== 'production') {
         var displayName;
         if (componentName) {
-          displayName = "".concat(componentName).concat(componentSlot || '');
+          displayName = "".concat(componentName).concat(capitalize(componentSlot || ''));
         }
         if (displayName === undefined) {
           displayName = "Styled(".concat(getDisplayName(tag), ")");

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.14.3
+ * @mui/system v5.14.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -38,6 +38,8 @@ export function unstable_createStyleFunctionSx() {
     if (val == null) {
       return null;
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
       return _defineProperty({}, prop, val);
     }

package/modern/createStyled.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName } from '@mui/utils';
+import { getDisplayName, unstable_capitalize as capitalize } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
 import styleFunctionSx from './styleFunctionSx';
@@ -65,6 +65,9 @@ export function shouldForwardProp(prop) {
 }
 export const systemDefaultTheme = createTheme();
 const lowercaseFirstLetter = string => {
+  if (!string) {
+    return string;
+  }
   return string.charAt(0).toLowerCase() + string.slice(1);
 };
 function resolveTheme({
@@ -74,6 +77,12 @@ function resolveTheme({
 }) {
   return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
 }
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return (props, styles) => styles[slot];
+}
 export default function createStyled(input = {}) {
   const {
     themeId,
@@ -98,21 +107,31 @@ export default function createStyled(input = {}) {
         slot: componentSlot,
         skipVariantsResolver: inputSkipVariantsResolver,
         skipSx: inputSkipSx,
-        overridesResolver
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
+        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = _objectWithoutPropertiesLoose(inputOptions, _excluded);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
+    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
     let label;
     if (process.env.NODE_ENV !== 'production') {
       if (componentName) {
+        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+        // For more details: https://github.com/mui/material-ui/pull/37908
         label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
       }
     }
     let shouldForwardPropOption = shouldForwardProp;
-    if (componentSlot === 'Root') {
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
       shouldForwardPropOption = rootShouldForwardProp;
     } else if (componentSlot) {
       // any other slot specified
@@ -194,7 +213,7 @@ export default function createStyled(input = {}) {
       if (process.env.NODE_ENV !== 'production') {
         let displayName;
         if (componentName) {
-          displayName = `${componentName}${componentSlot || ''}`;
+          displayName = `${componentName}${capitalize(componentSlot || '')}`;
         }
         if (displayName === undefined) {
           displayName = `Styled(${getDisplayName(tag)})`;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.14.3
+ * @mui/system v5.14.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -34,6 +34,8 @@ export function unstable_createStyleFunctionSx() {
     if (val == null) {
       return null;
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
       return {
         [prop]: val

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.14.3",
+  "version": "5.14.5",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.6",
-    "@mui/private-theming": "^5.13.7",
+    "@mui/private-theming": "^5.14.5",
     "@mui/styled-engine": "^5.13.2",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.3",
+    "@mui/utils": "^5.14.5",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"

package/styleFunctionSx/styleFunctionSx.js

@@ -42,6 +42,8 @@ function unstable_createStyleFunctionSx() {
     if (val == null) {
       return null;
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
       return {
         [prop]: val