@mui/system 5.6.1 → 5.6.2

package/Box/Box.spec.d.ts

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

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.6.2
+
+<!-- generated comparing v5.6.1..master -->
+
+_Apr 18, 2022_
+
+A big thanks to the 11 contributors who made this release possible. This release is mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.6.2`
+
+- &#8203;<!-- 29 -->[Autocomplete] Explain how to use getOptionLabel in free solo mode and update getOptionLabel type (#32165) @michaldudak
+- &#8203;<!-- 28 -->[Badge] Fix customization of classes (#32185) @michaldudak
+- &#8203;<!-- 03 -->[TextField] Add a workaround for Safari CSS transition scale bug (#32188) @igordanchenko
+
+### `@mui/system@5.6.2`
+
+- &#8203;<!-- 05 -->[system] Update style function to use vars automatically if available (#32244) @mnajdova
+
+### `@mui/base@5.0.0-alpha.77`
+
+- &#8203;<!-- 08 -->[FormControlUnstyled] Revise API (#32134) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.24`
+
+- &#8203;<!-- 07 -->[Joy] Add `Badge` component (#31401) @hbjORbj
+- &#8203;<!-- 06 -->[Joy] Fix misuse variable in `Input` (#32268) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 27 -->[blog] Fix images for the docs separation post (#32257) @danilo-leal
+- &#8203;<!-- 25 -->[docs] Base Form Control style revisions and final review (#32309) @samuelsycamore
+- &#8203;<!-- 24 -->[docs] Base TablePagination style revisions and final review (#32178) @samuelsycamore
+- &#8203;<!-- 23 -->[docs] Revise the dark mode article (#32179) @danilo-leal
+- &#8203;<!-- 22 -->[docs] Add `aria-label` for `IconButton` (#32276) @SiarheiBobryk
+- &#8203;<!-- 21 -->[docs] Fix `borderRadius` in the docs example (#32347) @ZeeshanTamboli
+- &#8203;<!-- 20 -->[docs] Fix 404 link in the code (#32323) @oliviertassinari
+- &#8203;<!-- 19 -->[docs] Sync h1 with side nav label (#32235) @oliviertassinari
+- &#8203;<!-- 18 -->[docs] Fix SEO issues (#32282) @oliviertassinari
+- &#8203;<!-- 17 -->[docs] Fix broken link in the test contributing guide (#32283) @sirartemis
+- &#8203;<!-- 16 -->[docs] Update "How to customize" page anchor links #32315 @abaker93
+- &#8203;<!-- 15 -->[docs] Mark `onBackdropClick` prop as deprecated in `Dialog`, `Modal` and `ModalUnstyled` components (#32297) @ZeeshanTamboli
+- &#8203;<!-- 14 -->[docs] Link to advanced components page (#32290) @siriwatknp
+- &#8203;<!-- 13 -->[docs] Sync package description with the docs (#32211) @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Revise "Component theming" and "How to customize" guides (#31997) @danilo-leal
+- &#8203;<!-- 11 -->[docs] Add note in the Contributing guide about linking issues to a PR (#32174) @danilo-leal
+- &#8203;<!-- 10 -->[docs] Update RTL guide (#32242) @michaldudak
+- &#8203;<!-- 09 -->[docs] Uniformize capitalization (#32238) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Improve new role template @oliviertassinari
+- &#8203;<!-- 01 -->[website] Remove a gold sponsor (#32261) @hbjORbj
+- &#8203;<!-- 24 -->[website] Mark DataGrid Column spanning done on Pricing page (#32305) @cherniavskii
+
+### Core
+
+- &#8203;<!-- 31 -->[core] Remove unecessary div (#32237) @oliviertassinari
+- &#8203;<!-- 30 -->[core] Revert #32229 (#32262) @michaldudak
+- &#8203;<!-- 04 -->[test] Fix running unit tests on Windows (#32260) @michaldudak
+
+All contributors of this release in alphabetical order: @abaker93, @cherniavskii, @danilo-leal, @hbjORbj, @igordanchenko, @michaldudak, @mnajdova, @oliviertassinari, @samuelsycamore, @SiarheiBobryk, @sirartemis, @siriwatknp, @ZeeshanTamboli
+
 ## 5.6.1
 
 <!-- generated comparing v5.6.0..master -->
@@ -3575,7 +3634,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
 - &#8203;<!-- 28 -->[docs] Fix broken overrides link on API pages (#26244) @mnajdova
 - &#8203;<!-- 27 -->[docs] Improve documentation for Buttons (#26184) @arpitBhalla
 - &#8203;<!-- 24 -->[docs] Emphasize on props for screen readers (#26222) @atisheyJain03
-- &#8203;<!-- 23 -->[docs] Link third-party routing in Bottom Navigation (#26190) @arpitBhalla
+- &#8203;<!-- 23 -->[docs] Link third-party routing in Bottom navigation (#26190) @arpitBhalla
 - &#8203;<!-- 22 -->[docs] Migrate Select, Progress demos to emotion (#26178) @mnajdova
 - &#8203;<!-- 20 -->[docs] Add accessibility section to Badges (#26009) @likitarai1
 - &#8203;<!-- 15 -->[docs] Migrate Popper, Drawer demos to emotion (#26183) @mnajdova
@@ -4587,7 +4646,7 @@ The prop didn't solve any important problem better than any of its alternatives
 
 ### Docs
 
-- &#8203;<!-- 22 -->[docs] Migrate Bottom Navigation demos to emotion (#25180) @vicasas
+- &#8203;<!-- 22 -->[docs] Migrate Bottom navigation demos to emotion (#25180) @vicasas
 - &#8203;<!-- 09 -->[docs] Migrate Button demos to emotion (#25138) @vicasas
 - &#8203;<!-- 17 -->[docs] Migrate Divider demos to emotion (#25145) @vicasas
 - &#8203;<!-- 24 -->[docs] Migrate Pagination demos to emotion (#25183) @vicasas

package/createBox.spec.d.ts

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

package/createTheme/createSpacing.d.ts

@@ -1,10 +1,10 @@
-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 interface Spacing {
-    (): string;
-    (value: number): string;
-    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
-    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
-    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
-}
-export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
+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 interface Spacing {
+    (): string;
+    (value: number): string;
+    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
+    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
+    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
+}
+export default function createSpacing(spacingInput?: SpacingOptions): Spacing;

package/cssVars/createCssVarsProvider.spec.d.ts

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

package/cssVars/createGetCssVar.d.ts

@@ -1,5 +1,5 @@
-/**
- * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
- * and they does not need to remember the prefix (defined once).
- */
-export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;

package/cssVars/cssVarsParser.d.ts

@@ -1,70 +1,70 @@
-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: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => 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, scope: Record<string, string | number>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  basePrefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
- *
- * @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(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
- */
-export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
-    prefix?: string;
-    basePrefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: NestedRecord<string>;
-    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: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => 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, scope: Record<string, string | number>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *
+ * @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(--foo-color)' }
+ * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+ */
+export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
+    prefix?: string;
+    basePrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+    parsedTheme: T;
+};
+export {};

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
-export default function getInitColorSchemeScript(options?: {
-    enableSystem?: boolean;
-    defaultLightColorScheme?: string;
-    defaultDarkColorScheme?: string;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    attribute?: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
+export default function getInitColorSchemeScript(options?: {
+    enableSystem?: boolean;
+    defaultLightColorScheme?: string;
+    defaultDarkColorScheme?: string;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    attribute?: string;
+}): JSX.Element;

package/cssVars/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './createCssVarsProvider';
-export type { CreateCssVarsProviderResult } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';
+export type { CreateCssVarsProviderResult } from './createCssVarsProvider';

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,50 +1,50 @@
-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;
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-}): Result<SupportedColorScheme>;
+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;
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+}): Result<SupportedColorScheme>;

package/esm/style.js

@@ -4,6 +4,15 @@ import { handleBreakpoints } from './breakpoints';
 export function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
     return null;
+  } // Check if CSS variables are used
+
+
+  if (obj && obj.vars) {
+    const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+
+    if (val != null) {
+      return val;
+    }
   }
 
   return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);

package/index.d.ts

@@ -23,6 +23,10 @@ export const borderRight: SimpleStyleFunction<'borderRight'>;
 export const borderBottom: SimpleStyleFunction<'borderBottom'>;
 export const borderLeft: SimpleStyleFunction<'borderLeft'>;
 export const borderColor: SimpleStyleFunction<'borderColor'>;
+export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
+export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
+export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
+export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
 export const borderRadius: SimpleStyleFunction<'borderRadius'>;
 export type BordersProps = PropsFor<typeof borders>;
 

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.spec.d.ts

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

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/style.js

@@ -5,6 +5,17 @@ import { handleBreakpoints } from './breakpoints';
 export function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
     return null;
+  } // Check if CSS variables are used
+
+
+  if (obj && obj.vars) {
+    var val = "vars.".concat(path).split('.').reduce(function (acc, item) {
+      return acc && acc[item] ? acc[item] : null;
+    }, obj);
+
+    if (val != null) {
+      return val;
+    }
   }
 
   return path.split('.').reduce(function (acc, item) {

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/style.js

@@ -4,6 +4,15 @@ import { handleBreakpoints } from './breakpoints';
 export function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
     return null;
+  } // Check if CSS variables are used
+
+
+  if (obj && obj.vars) {
+    const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+
+    if (val != null) {
+      return val;
+    }
   }
 
   return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/private-theming": "^5.6.1",
+    "@mui/private-theming": "^5.6.2",
     "@mui/styled-engine": "^5.6.1",
     "@mui/types": "^7.1.3",
     "@mui/utils": "^5.6.1",

package/style.js

@@ -17,6 +17,15 @@ var _breakpoints = require("./breakpoints");
 function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
     return null;
+  } // Check if CSS variables are used
+
+
+  if (obj && obj.vars) {
+    const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+
+    if (val != null) {
+      return val;
+    }
   }
 
   return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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