@mui/system 5.10.14 → 5.10.15

package/cssVars/cssVarsParser.d.ts

@@ -1,65 +1,65 @@
-declare type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
-};
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
-/**
- *
- * @param {Object} obj : source object
- * @param {Function} callback : a function that will be called when
- *                   - the deepest key in source object is reached
- *                   - the value of the deepest key is NOT `undefined` | `null`
- *
- * @example
- * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
- * // ['palette', 'primary', 'main'] '#000000'
- */
-export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} 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.
- *
- * @example
- * const { css, vars, parsedTheme } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: 'var(--color)' } }
- * }, { prefix: 'foo' })
- *
- * 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;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: Record<string, string | number>;
-    vars: NestedRecord<string>;
-    parsedTheme: T;
-};
-export {};
+declare type NestedRecord<V = any> = {
+    [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} 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.
+ *
+ * @example
+ * const { css, vars, parsedTheme } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * 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;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: Record<string, string | number>;
+    vars: NestedRecord<string>;
+    parsedTheme: T;
+};
+export {};

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,42 +1,42 @@
-/// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
-export interface GetInitColorSchemeScriptOptions {
-    /**
-     * The mode to be used for the first visit
-     * @default 'light'
-     */
-    defaultMode?: 'light' | 'dark' | 'system';
-    /**
-     * The default color scheme to be used on the light mode
-     * @default 'light'
-     */
-    defaultLightColorScheme?: string;
-    /**
-     * The default color scheme to be used on the dark mode
-     * * @default 'dark'
-     */
-    defaultDarkColorScheme?: string;
-    /**
-     * The node (provided as string) used to attach the color-scheme attribute
-     * @default 'document.documentElement'
-     */
-    colorSchemeNode?: string;
-    /**
-     * localStorage key used to store `mode`
-     * @default 'mode'
-     */
-    modeStorageKey?: string;
-    /**
-     * localStorage key used to store `colorScheme`
-     * @default 'color-scheme'
-     */
-    colorSchemeStorageKey?: string;
-    /**
-     * DOM attribute for applying color scheme
-     * @default 'data-color-scheme'
-     */
-    attribute?: string;
-}
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
+export interface GetInitColorSchemeScriptOptions {
+    /**
+     * The mode to be used for the first visit
+     * @default 'light'
+     */
+    defaultMode?: 'light' | 'dark' | 'system';
+    /**
+     * The default color scheme to be used on the light mode
+     * @default 'light'
+     */
+    defaultLightColorScheme?: string;
+    /**
+     * The default color scheme to be used on the dark mode
+     * * @default 'dark'
+     */
+    defaultDarkColorScheme?: string;
+    /**
+     * The node (provided as string) used to attach the color-scheme attribute
+     * @default 'document.documentElement'
+     */
+    colorSchemeNode?: string;
+    /**
+     * localStorage key used to store `mode`
+     * @default 'mode'
+     */
+    modeStorageKey?: string;
+    /**
+     * localStorage key used to store `colorScheme`
+     * @default 'color-scheme'
+     */
+    colorSchemeStorageKey?: string;
+    /**
+     * DOM attribute for applying color scheme
+     * @default 'data-color-scheme'
+     */
+    attribute?: string;
+}
+export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;

package/cssVars/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './createCssVarsProvider';
-export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default } from './createCssVarsProvider';
+export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,53 +1,53 @@
-export declare type Mode = 'light' | 'dark' | 'system';
-export declare type SystemMode = Exclude<Mode, 'system'>;
-export interface State<SupportedColorScheme extends string> {
-    /**
-     * User selected mode.
-     * Note: on the server, mode is always undefined
-     */
-    mode: Mode | undefined;
-    /**
-     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
-     */
-    systemMode: SystemMode | undefined;
-    /**
-     * The color scheme for the light mode.
-     */
-    lightColorScheme: SupportedColorScheme;
-    /**
-     * The color scheme for the dark mode.
-     */
-    darkColorScheme: SupportedColorScheme;
-}
-export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
-    /**
-     * The current application color scheme. It is always `undefined` on the server.
-     */
-    colorScheme: SupportedColorScheme | undefined;
-    /**
-     * `mode` is saved to internal state and localStorage
-     * If `mode` is null, it will be reset to the defaultMode
-     */
-    setMode: (mode: Mode | null) => void;
-    /**
-     * `colorScheme` is saved to internal state and localStorage
-     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
-     */
-    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
-        light: SupportedColorScheme | null;
-        dark: SupportedColorScheme | null;
-    }> | null) => void;
-};
-export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
-export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
-interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    storageWindow?: Window | null;
-}
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
-export {};
+export declare type Mode = 'light' | 'dark' | 'system';
+export declare type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+    /**
+     * User selected mode.
+     * Note: on the server, mode is always undefined
+     */
+    mode: Mode | undefined;
+    /**
+     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+     */
+    systemMode: SystemMode | undefined;
+    /**
+     * The color scheme for the light mode.
+     */
+    lightColorScheme: SupportedColorScheme;
+    /**
+     * The color scheme for the dark mode.
+     */
+    darkColorScheme: SupportedColorScheme;
+}
+export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+    /**
+     * The current application color scheme. It is always `undefined` on the server.
+     */
+    colorScheme: SupportedColorScheme | undefined;
+    /**
+     * `mode` is saved to internal state and localStorage
+     * If `mode` is null, it will be reset to the defaultMode
+     */
+    setMode: (mode: Mode | null) => void;
+    /**
+     * `colorScheme` is saved to internal state and localStorage
+     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+     */
+    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
+        light: SupportedColorScheme | null;
+        dark: SupportedColorScheme | null;
+    }> | null) => void;
+};
+export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
+export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
+interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    storageWindow?: Window | null;
+}
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
+export {};

package/esm/cssVars/createCssVarsProvider.js

@@ -114,7 +114,7 @@ export default function createCssVarsProvider(options) {
     });
 
     // 3. Start composing the theme object
-    let theme = _extends({}, parsedTheme, {
+    const theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -139,7 +139,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(parsedScheme).forEach(schemeKey => {
+          if (parsedScheme[schemeKey] && typeof parsedScheme[schemeKey] === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends({}, theme[schemeKey], parsedScheme[schemeKey]);
+          } else {
+            theme[schemeKey] = parsedScheme[schemeKey];
+          }
+        });
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }

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.15
  *
  * 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/index.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/legacy/cssVars/createCssVarsProvider.js

@@ -156,7 +156,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(parsedScheme).forEach(function (schemeKey) {
+          if (parsedScheme[schemeKey] && _typeof(parsedScheme[schemeKey]) === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends({}, theme[schemeKey], parsedScheme[schemeKey]);
+          } else {
+            theme[schemeKey] = parsedScheme[schemeKey];
+          }
+        });
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.14
+/** @license MUI v5.10.15
  *
  * 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

@@ -114,7 +114,7 @@ export default function createCssVarsProvider(options) {
     });
 
     // 3. Start composing the theme object
-    let theme = _extends({}, parsedTheme, {
+    const theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -139,7 +139,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(parsedScheme).forEach(schemeKey => {
+          if (parsedScheme[schemeKey] && typeof parsedScheme[schemeKey] === 'object') {
+            // shallow merge the 1st level structure of the theme.
+            theme[schemeKey] = _extends({}, theme[schemeKey], parsedScheme[schemeKey]);
+          } else {
+            theme[schemeKey] = parsedScheme[schemeKey];
+          }
+        });
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.14
+/** @license MUI v5.10.15
  *
  * 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.15",
   "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/private-theming": "^5.10.15",
     "@mui/styled-engine": "^5.10.14",
     "@mui/types": "^7.2.1",
-    "@mui/utils": "^5.10.14",
+    "@mui/utils": "^5.10.15",
     "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'