@mui/system 5.10.14 → 5.10.16

package/CHANGELOG.md

@@ -1,5 +1,113 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.16
+
+<!-- generated comparing v5.10.15..master -->
+
+_Nov 28, 2022_
+
+A big thanks to the 13 contributors who made this release possible. This release contains various 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
+
+### `@mui/material@5.10.16`
+
+- &#8203;<!-- 21 -->[Autocomplete] Fix inferred value type when `multiple` prop is `true` (#35275) @fenghan34
+- &#8203;<!-- 19 -->[Chip] Add `skipFocusWhenDisabled` prop to not allow focussing deletable chip if disabled (#35065) @sai6855
+- &#8203;<!-- 18 -->[Chip] Remove unnecessary handleKeyDown event handler (#35231) @ZeeshanTamboli
+- &#8203;<!-- 05 -->[FormControl] Add missing types in `useFormControl` (#35168) @ZeeshanTamboli
+- &#8203;<!-- 04 -->[IconButton] Add missing color classes (#33820) @Zetta56
+- &#8203;<!-- 03 -->[SwipeableDrawer] Make paper ref accessible (#35082) @sai6855
+
+### `@mui/system@5.10.16`
+
+- &#8203;<!-- 02 -->[system] Remove unnecessary parsed theme (#35239) @siriwatknp
+- &#8203;<!-- 01 -->[theme] Fix TypeScript type for custom variants in responsive font sizes (#35057) @ZeeshanTamboli
+
+### `@mui/base@5.0.0-alpha.108`
+
+- &#8203;<!-- 20 -->[Base] Allow useSlotProps to receive undefined elementType (#35192) @leventdeniz
+
+### Docs
+
+- &#8203;<!-- 13 -->[docs] Improve feedback precision (#34641) @alexfauquette
+- &#8203;<!-- 12 -->[docs] Add Black Friday notification @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Fix migration feedback (#35232) @alexfauquette
+- &#8203;<!-- 10 -->[docs] Improve the useSelect demo styling (#33883) @michaldudak
+- &#8203;<!-- 09 -->[docs] Fix layout jump on first mistake (#35215) @oliviertassinari
+- &#8203;<!-- 08 -->[docs] Support demos with side effect imports (#35177) @m4theushw
+- &#8203;<!-- 07 -->[examples] Fix Next.js errors (#35246) @oliviertassinari
+- &#8203;<!-- 06 -->[examples] Updated Remix examples with the lates changes using React 18 (#35092) @58bits
+
+### Core
+
+- &#8203;<!-- 17 -->[core] Remove unused pattern (#35165) @iamxukai
+- &#8203;<!-- 16 -->[core] Fix Base version in changelog (#35224) @siriwatknp
+- &#8203;<!-- 15 -->[core] Migrate `describeConformance` to TypeScript (#35193) @flaviendelangle
+- &#8203;<!-- 14 -->[core] Skip CI for docs and examples paths (#35225) @siriwatknp
+
+All contributors of this release in alphabetical order: @58bits, @alexfauquette, @fenghan34, @flaviendelangle, @iamxukai, @leventdeniz, @m4theushw, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli, @Zetta56
+
+## 5.10.15
+
+<!-- generated comparing v5.10.14..master -->
+
+_Nov 21, 2022_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 @mnajdova added the button as the first component that implements [Material You](https://m3.material.io/) design (MD3)
+- 🌐 @MBilalShafi added Urdu (Pakistan) localization
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements
+
+### `@mui/material@5.10.15`
+
+- [Autocomplete] Fix keyboard navigation when using custom popover (#35160) @sai6855
+- [typescript] Add `background.defaultChannel` to `CssVarsPalette` (#35174) @alexfauquette
+- [l10n] Add Urdu (ur-PK) locale (#35154) @MBilalShafi
+
+### `@mui/icons-material@5.10.15`
+
+- [icons] Update the Material Design icons (#35194) @michaldudak
+
+### `@mui/material-next@6.0.0-alpha.63`
+
+- [Material You] Add theme structure & Button component (#34650) @mnajdova
+
+### `@mui/base@5.0.0-alpha.107`
+
+- [Select] Add attributes to conform with ARIA 1.2 (#35182) @michaldudak
+
+### Docs
+
+- [docs] Fix a couple documentation errors (#35217) @danilo-leal
+- [docs] Change MUI -> Material UI in icons-material's readme (#35220) @michaldudak
+- [docs] the pages have no <link rel=canonical so we need to tell Google to not index the staging envs @oliviertassinari
+- [docs] Fix confusion in TOCs when reaching scroll bottom (#35214) @oliviertassinari
+- [docs] Fix typos in section titles (#35025) @iamxukai
+- [docs] Fix typo in legacy date picker migration guide @oliviertassinari
+- [docs] Iterating on recent Joy UI Component page updates (#35162) @samuelsycamore
+- [docs] Inform that pickers are in X repository (#35189) @alexfauquette
+- [docs] Explain how the `error` prop works in the Unstyled Input (#35171) @michaldudak
+- [docs] Hotfix missing styles in dark mode (#35179) @siriwatknp
+- [docs] Add Joy UI theme typography page (#34811) @siriwatknp
+- [docs] Fix undo/redo in live editor (#35163) @oliviertassinari
+- [docs] Revise the Joy UI "Avatar" component page (#35152) @samuelsycamore
+- [docs] Make navbar backdrop filter consistent with website (#35157) @danilo-leal
+- [docs] Host CodeSandbox on MUI org (#35110) @oliviertassinari
+- [docs] Uplift introduction demos & make consistent with Base (#34316) @danilo-leal
+- [website] Add Security questionnaire in pricing (#35172) @oliviertassinari
+- [website] Fix theme mode toggle state (#35216) @siriwatknp
+- [website] Exclude experiment pages in production (#35180) @siriwatknp
+- [website] Disable SEO for performance pages (#35173) @oliviertassinari
+
+### Core
+
+- [core] Convert icons scripts to ESM (#35101) @Janpot
+- [core] Group renovate GitHub Action dependency updates @oliviertassinari
+- [core] Upgrade eslint-config-airbnb-typescript (#34642) @Janpot
+- [core] Ensure that prettier CI step fails when code is badly formatted (#35170) @michaldudak
+
+All contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @iamxukai, @Janpot, @MBilalShafi, @michaldudak, @oliviertassinari, @samuelsycamore, @siriwatknp
+
 ## v5.10.14
 
 <!-- generated comparing v5.10.13..master -->

package/Container/ContainerProps.d.ts

@@ -37,4 +37,4 @@ export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
     };
     defaultComponent: D;
 }
-export declare type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;
+export type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;

package/Container/containerClasses.d.ts

@@ -16,7 +16,7 @@ export interface ContainerClasses {
     /** Styles applied to the root element if `maxWidth="xl"`. */
     maxWidthXl: string;
 }
-export declare type ContainerClassKey = keyof ContainerClasses;
+export type ContainerClassKey = keyof ContainerClasses;
 export declare function getContainerUtilityClass(slot: string): string;
 declare const containerClasses: ContainerClasses;
 export default containerClasses;

package/Container/createContainer.d.ts

@@ -7,7 +7,7 @@ interface StyleFnProps<Theme> extends ContainerProps {
     theme: Theme;
     ownerState: ContainerProps;
 }
-declare type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
+type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
 export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
     createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
     useThemeProps?: (inProps: ContainerProps) => ContainerProps & {

package/Stack/StackProps.d.ts

@@ -33,7 +33,7 @@ export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
     } & SystemProps<Theme>;
     defaultComponent: D;
 }
-export declare type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
+export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
     component?: React.ElementType;
 }> = OverrideProps<StackTypeMap<P, D>, D>;
 export interface StackOwnerState {

package/Stack/stackClasses.d.ts

@@ -2,7 +2,7 @@ export interface StackClasses {
     /** Styles applied to the root element. */
     root: string;
 }
-export declare type StackClassKey = keyof StackClasses;
+export type StackClassKey = keyof StackClasses;
 export declare function getStackUtilityClass(slot: string): string;
 declare const stackClasses: StackClasses;
 export default stackClasses;

package/Unstable_Grid/GridProps.d.ts

@@ -3,13 +3,13 @@ import { OverrideProps, IfEquals } from '@mui/types';
 import { SxProps } from '../styleFunctionSx';
 import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
 import { SystemProps } from '../Box';
-declare type ResponsiveStyleValue<T> = T | Array<T | null> | {
+type ResponsiveStyleValue<T> = T | Array<T | null> | {
     [key in Breakpoint]?: T | null;
 };
-export declare type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export declare type GridSpacing = number | string;
-export declare type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export declare type GridSize = 'auto' | number;
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | number;
 export interface GridDefaultBreakpoints {
     /**
      * If a number, it sets the number of columns the grid item uses.
@@ -92,10 +92,10 @@ export interface GridDefaultBreakpoints {
      */
     xsOffset?: GridSize;
 }
-declare type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
+type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
 interface BreakpointOverridesEmpty {
 }
-declare type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
+type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
 export interface GridBaseProps extends Breakpoints {
     /**
      * The content of the component.
@@ -156,7 +156,7 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
     } & SystemProps<Theme>;
     defaultComponent: D;
 }
-export declare type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
     component?: React.ElementType;
 }> = OverrideProps<GridTypeMap<P, D>, D>;
 export {};

package/Unstable_Grid/gridClasses.d.ts

@@ -14,7 +14,7 @@ export interface GridClasses {
     /** Styles applied to the root element if `wrap="reverse"`. */
     'wrap-xs-wrap-reverse': string;
 }
-export declare type GridClassKey = keyof GridClasses;
+export type GridClassKey = keyof GridClasses;
 export declare function getGridUtilityClass(slot: string): string;
 declare const gridClasses: GridClasses;
 export default gridClasses;

package/createTheme/createSpacing.d.ts

@@ -1,5 +1,5 @@
-export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
-export declare type SpacingArgument = number | string;
+export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
+export type SpacingArgument = number | string;
 export interface Spacing {
     (): string;
     (value: number): string;

package/cssVars/createCssVarsProvider.d.ts

@@ -89,7 +89,7 @@ export default function createCssVarsProvider<ColorScheme extends string>(
     /**
      * Design system default theme
      *
-     * The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
+     * - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
      * those object of the color scheme will be used when the color scheme is active.
      *
      *  {
@@ -99,16 +99,21 @@ export default function createCssVarsProvider<ColorScheme extends string>(
      *    }
      *  }
      *
-     *  If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
-     *  likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
+     * - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
+     *   likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
      *
-     *  !!! Don't provided the same keys as in colorSchemes to theme because they will be replaced internally when the selected colorScheme is calculated.
+     * - If the theme contains the same keys as the color scheme, their values will be merged.
      *  Ex. {
      *    colorSchemes: {
-     *      light: { palette: { ... } },
-     *      dark: { palette: { ... } }
+     *      light: { palette: { primary: { ... } } },
+     *      dark: { palette: { primary: { ...} } }
      *    },
-     *    palette: { ... }, // This values will be replaced by the `palette` from the light | dark color scheme at runtime.
+     *    palette: { shared: { ... } }
+     *  }
+     *
+     *  becomes: {
+     *    colorSchemes: { ... },
+     *    palette: { shared: { ... }, primary: { ... } }
      *  }
      */
     theme: any;

package/cssVars/createCssVarsProvider.js

@@ -115,15 +115,14 @@ function createCssVarsProvider(options) {
     // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
     const {
       css: rootCss,
-      vars: rootVars,
-      parsedTheme
+      vars: rootVars
     } = (0, _cssVarsParser.default)(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
 
     // 3. Start composing the theme object
-    let theme = (0, _extends2.default)({}, parsedTheme, {
+    const theme = (0, _extends2.default)({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -139,8 +138,7 @@ function createCssVarsProvider(options) {
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
-        vars,
-        parsedTheme: parsedScheme
+        vars
       } = (0, _cssVarsParser.default)(scheme, {
         prefix: cssVarPrefix,
         shouldSkipGeneratingVar
@@ -148,7 +146,14 @@ function createCssVarsProvider(options) {
       theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
-        theme = (0, _extends2.default)({}, theme, parsedScheme);
+        Object.keys(scheme).forEach(schemeKey => {
+          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
+          } else {
+            theme[schemeKey] = scheme[schemeKey];
+          }
+        });
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }

package/cssVars/cssVarsParser.d.ts

@@ -1,4 +1,4 @@
-declare type NestedRecord<V = any> = {
+type NestedRecord<V = any> = {
     [k: string | number]: NestedRecord<V> | V;
 };
 /**
@@ -41,10 +41,10 @@ export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, ca
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -52,7 +52,6 @@ export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, ca
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
     prefix?: string;
@@ -60,6 +59,5 @@ export default function cssVarsParser<T extends Record<string, any>>(theme: T, o
 }): {
     css: Record<string, string | number>;
     vars: NestedRecord<string>;
-    parsedTheme: T;
 };
 export {};

package/cssVars/cssVarsParser.js

@@ -96,10 +96,10 @@ const getCssValue = (keys, value) => {
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -107,7 +107,6 @@ const getCssValue = (keys, value) => {
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 function cssVarsParser(theme, options) {
   const {
@@ -116,7 +115,6 @@ function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -128,13 +126,11 @@ function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
-    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
 
   return {
     css,
-    vars,
-    parsedTheme
+    vars
   };
 }

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,5 +1,5 @@
-export declare type Mode = 'light' | 'dark' | 'system';
-export declare type SystemMode = Exclude<Mode, 'system'>;
+export type Mode = 'light' | 'dark' | 'system';
+export type SystemMode = Exclude<Mode, 'system'>;
 export interface State<SupportedColorScheme extends string> {
     /**
      * User selected mode.
@@ -19,7 +19,7 @@ export interface State<SupportedColorScheme extends string> {
      */
     darkColorScheme: SupportedColorScheme;
 }
-export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
     /**
      * The current application color scheme. It is always `undefined` on the server.
      */

package/esm/cssVars/createCssVarsProvider.js

@@ -106,15 +106,14 @@ export default function createCssVarsProvider(options) {
     // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
     const {
       css: rootCss,
-      vars: rootVars,
-      parsedTheme
+      vars: rootVars
     } = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
 
     // 3. Start composing the theme object
-    let theme = _extends({}, parsedTheme, {
+    const theme = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -130,8 +129,7 @@ export default function createCssVarsProvider(options) {
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
-        vars,
-        parsedTheme: parsedScheme
+        vars
       } = cssVarsParser(scheme, {
         prefix: cssVarPrefix,
         shouldSkipGeneratingVar
@@ -139,7 +137,14 @@ export default function createCssVarsProvider(options) {
       theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
-        theme = _extends({}, theme, parsedScheme);
+        Object.keys(scheme).forEach(schemeKey => {
+          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+          } else {
+            theme[schemeKey] = scheme[schemeKey];
+          }
+        });
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }

package/esm/cssVars/cssVarsParser.js

@@ -86,10 +86,10 @@ const getCssValue = (keys, value) => {
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -97,7 +97,6 @@ const getCssValue = (keys, value) => {
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 export default function cssVarsParser(theme, options) {
   const {
@@ -106,7 +105,6 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -118,13 +116,11 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
-    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
 
   return {
     css,
-    vars,
-    parsedTheme
+    vars
   };
 }

package/esm/index.js

@@ -18,7 +18,7 @@ export { default as sizing } from './sizing';
 export * from './sizing';
 export { default as spacing } from './spacing';
 export * from './spacing';
-export { default as style, getPath } from './style';
+export { default as style, getPath, getStyleValue } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
@@ -40,6 +40,7 @@ export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+export { default as responsivePropType } from './responsivePropType';
 
 /** ----------------- */
 /** Layout components */

package/esm/style.js

@@ -20,7 +20,7 @@ export function getPath(obj, path, checkVars = true) {
     return null;
   }, obj);
 }
-function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+export function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
   let value;
   if (typeof themeMapping === 'function') {
     value = themeMapping(propValueFinal);
@@ -49,10 +49,10 @@ function style(options) {
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
     const styleFromPropValue = propValueFinal => {
-      let value = getValue(themeMapping, transform, propValueFinal);
+      let value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;

package/index.d.ts

@@ -165,6 +165,8 @@ export { default as unstable_createCssVarsProvider, CreateCssVarsProviderResult
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
 export * from './cssVars';
 
+export { default as responsivePropType } from './responsivePropType';
+
 export { default as createContainer } from './Container/createContainer';
 export * from './Container/createContainer';
 

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.14
+/** @license MUI v5.10.16
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -30,6 +30,7 @@ var _exportNames = {
   spacing: true,
   style: true,
   getPath: true,
+  getStyleValue: true,
   typography: true,
   unstable_styleFunctionSx: true,
   unstable_createStyleFunctionSx: true,
@@ -51,6 +52,7 @@ var _exportNames = {
   ThemeProvider: true,
   unstable_createCssVarsProvider: true,
   unstable_createGetCssVar: true,
+  responsivePropType: true,
   createContainer: true,
   Container: true,
   Unstable_Grid: true,
@@ -182,6 +184,12 @@ Object.defineProperty(exports, "getPath", {
     return _style.getPath;
   }
 });
+Object.defineProperty(exports, "getStyleValue", {
+  enumerable: true,
+  get: function () {
+    return _style.getStyleValue;
+  }
+});
 Object.defineProperty(exports, "getThemeProps", {
   enumerable: true,
   get: function () {
@@ -224,6 +232,12 @@ Object.defineProperty(exports, "positions", {
     return _positions.default;
   }
 });
+Object.defineProperty(exports, "responsivePropType", {
+  enumerable: true,
+  get: function () {
+    return _responsivePropType.default;
+  }
+});
 Object.defineProperty(exports, "shadows", {
   enumerable: true,
   get: function () {
@@ -468,6 +482,7 @@ Object.keys(_colorManipulator).forEach(function (key) {
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
 var _createGetCssVar = _interopRequireDefault(require("./cssVars/createGetCssVar"));
+var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _createContainer = _interopRequireDefault(require("./Container/createContainer"));
 var _Container = _interopRequireWildcard(require("./Container"));
 Object.keys(_Container).forEach(function (key) {

package/legacy/cssVars/createCssVarsProvider.js

@@ -125,9 +125,8 @@ export default function createCssVarsProvider(options) {
         shouldSkipGeneratingVar: shouldSkipGeneratingVar
       }),
       rootCss = _cssVarsParser.css,
-      rootVars = _cssVarsParser.vars,
-      parsedTheme = _cssVarsParser.parsedTheme; // 3. Start composing the theme object
-    var theme = _extends({}, parsedTheme, {
+      rootVars = _cssVarsParser.vars; // 3. Start composing the theme object
+    var theme = _extends({}, restThemeProp, {
       components: components,
       colorSchemes: colorSchemes,
       cssVarPrefix: cssVarPrefix,
@@ -151,12 +150,18 @@ export default function createCssVarsProvider(options) {
           shouldSkipGeneratingVar: shouldSkipGeneratingVar
         }),
         css = _cssVarsParser2.css,
-        vars = _cssVarsParser2.vars,
-        parsedScheme = _cssVarsParser2.parsedTheme;
+        vars = _cssVarsParser2.vars;
       theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
-        theme = _extends({}, theme, parsedScheme);
+        Object.keys(scheme).forEach(function (schemeKey) {
+          if (scheme[schemeKey] && _typeof(scheme[schemeKey]) === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+          } else {
+            theme[schemeKey] = scheme[schemeKey];
+          }
+        });
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }

package/legacy/cssVars/cssVarsParser.js

@@ -99,10 +99,10 @@ var getCssValue = function getCssValue(keys, value) {
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -110,7 +110,6 @@ var getCssValue = function getCssValue(keys, value) {
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 export default function cssVarsParser(theme, options) {
   var _ref3 = options || {},
@@ -118,7 +117,6 @@ export default function cssVarsParser(theme, options) {
     shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
   var css = {};
   var vars = {};
-  var parsedTheme = {};
   walkObjectDeep(theme, function (keys, value, arrayKeys) {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -128,7 +126,6 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
       }
     }
-    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, function (keys) {
     return keys[0] === 'vars';
   } // skip 'vars/*' paths
@@ -136,7 +133,6 @@ export default function cssVarsParser(theme, options) {
 
   return {
     css: css,
-    vars: vars,
-    parsedTheme: parsedTheme
+    vars: vars
   };
 }

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.14
+/** @license MUI v5.10.16
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -23,7 +23,7 @@ export { default as sizing } from './sizing';
 export * from './sizing';
 export { default as spacing } from './spacing';
 export * from './spacing';
-export { default as style, getPath } from './style';
+export { default as style, getPath, getStyleValue } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
@@ -45,6 +45,7 @@ export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+export { default as responsivePropType } from './responsivePropType';
 
 /** ----------------- */
 /** Layout components */

package/legacy/style.js

@@ -24,7 +24,7 @@ export function getPath(obj, path) {
     return null;
   }, obj);
 }
-function getValue(themeMapping, transform, propValueFinal) {
+export function getStyleValue(themeMapping, transform, propValueFinal) {
   var userValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : propValueFinal;
   var value;
   if (typeof themeMapping === 'function') {
@@ -53,10 +53,10 @@ function style(options) {
     var theme = props.theme;
     var themeMapping = getPath(theme, themeKey) || {};
     var styleFromPropValue = function styleFromPropValue(propValueFinal) {
-      var value = getValue(themeMapping, transform, propValueFinal);
+      var value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
+        value = getStyleValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
       }
       if (cssProperty === false) {
         return value;

package/modern/cssVars/createCssVarsProvider.js

@@ -106,15 +106,14 @@ export default function createCssVarsProvider(options) {
     // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
     const {
       css: rootCss,
-      vars: rootVars,
-      parsedTheme
+      vars: rootVars
     } = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
 
     // 3. Start composing the theme object
-    let theme = _extends({}, parsedTheme, {
+    const theme = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -130,8 +129,7 @@ export default function createCssVarsProvider(options) {
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
-        vars,
-        parsedTheme: parsedScheme
+        vars
       } = cssVarsParser(scheme, {
         prefix: cssVarPrefix,
         shouldSkipGeneratingVar
@@ -139,7 +137,14 @@ export default function createCssVarsProvider(options) {
       theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
-        theme = _extends({}, theme, parsedScheme);
+        Object.keys(scheme).forEach(schemeKey => {
+          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+          } else {
+            theme[schemeKey] = scheme[schemeKey];
+          }
+        });
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }

package/modern/cssVars/cssVarsParser.js

@@ -86,10 +86,10 @@ const getCssValue = (keys, value) => {
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -97,7 +97,6 @@ const getCssValue = (keys, value) => {
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 export default function cssVarsParser(theme, options) {
   const {
@@ -106,7 +105,6 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -118,13 +116,11 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
-    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
 
   return {
     css,
-    vars,
-    parsedTheme
+    vars
   };
 }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.14
+/** @license MUI v5.10.16
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -23,7 +23,7 @@ export { default as sizing } from './sizing';
 export * from './sizing';
 export { default as spacing } from './spacing';
 export * from './spacing';
-export { default as style, getPath } from './style';
+export { default as style, getPath, getStyleValue } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
@@ -45,6 +45,7 @@ export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+export { default as responsivePropType } from './responsivePropType';
 
 /** ----------------- */
 /** Layout components */

package/modern/style.js

@@ -20,7 +20,7 @@ export function getPath(obj, path, checkVars = true) {
     return null;
   }, obj);
 }
-function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+export function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
   let value;
   if (typeof themeMapping === 'function') {
     value = themeMapping(propValueFinal);
@@ -49,10 +49,10 @@ function style(options) {
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
     const styleFromPropValue = propValueFinal => {
-      let value = getValue(themeMapping, transform, propValueFinal);
+      let value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.10.14",
+  "version": "5.10.16",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.1",
-    "@mui/private-theming": "^5.10.14",
-    "@mui/styled-engine": "^5.10.14",
-    "@mui/types": "^7.2.1",
-    "@mui/utils": "^5.10.14",
+    "@mui/private-theming": "^5.10.16",
+    "@mui/styled-engine": "^5.10.16",
+    "@mui/types": "^7.2.2",
+    "@mui/utils": "^5.10.16",
     "clsx": "^1.2.1",
     "csstype": "^3.1.1",
     "prop-types": "^15.8.1"

package/responsivePropType.d.ts

@@ -0,0 +1,3 @@
+declare const responsivePropType: object;
+
+export default responsivePropType;

package/spacing.d.ts

@@ -10,6 +10,20 @@ export function createUnarySpacing<Spacing>(theme: { spacing: Spacing }): Spacin
   : // warns in Dev
     () => undefined;
 
+export function createUnaryUnit<Spacing>(
+  theme: { spacing: Spacing },
+  themeKey: string,
+  defaultValue: Spacing,
+  propName: string,
+): Spacing extends number
+  ? (abs: number | string) => number | number
+  : Spacing extends any[]
+  ? <Index extends number>(abs: Index | string) => Spacing[Index] | string
+  : Spacing extends (...args: unknown[]) => unknown
+  ? Spacing
+  : // warns in Dev
+    () => undefined;
+
 export const margin: SimpleStyleFunction<
   | 'm'
   | 'mt'

package/style.d.ts

@@ -17,3 +17,9 @@ export function style<PropKey extends string, Theme extends object>(
   options: StyleOptions<PropKey>,
 ): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }> & { filterProps: string[] };
 export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
+export function getStyleValue(
+  themeMapping: object | ((val: any) => any),
+  transform?: (val: any, userVal: any) => any,
+  propValueFinal?: any,
+  userValue?: any,
+): any;

package/style.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getPath = getPath;
+exports.getStyleValue = getStyleValue;
 var _utils = require("@mui/utils");
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _breakpoints = require("./breakpoints");
@@ -28,7 +29,7 @@ function getPath(obj, path, checkVars = true) {
     return null;
   }, obj);
 }
-function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
   let value;
   if (typeof themeMapping === 'function') {
     value = themeMapping(propValueFinal);
@@ -57,10 +58,10 @@ function style(options) {
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
     const styleFromPropValue = propValueFinal => {
-      let value = getValue(themeMapping, transform, propValueFinal);
+      let value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _utils.unstable_capitalize)(propValueFinal)}`, propValueFinal);
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _utils.unstable_capitalize)(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;