@mui/system 5.6.0 → 5.6.3

package/modern/ThemeProvider/ThemeProvider.js

@@ -38,7 +38,14 @@ function ThemeProvider(props) {
   });
 }
 
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
   /**
    * Your component tree.
    */
@@ -47,7 +54,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
 } : void 0;
 
 if (process.env.NODE_ENV !== 'production') {

package/modern/createBox.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "component"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
 import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
@@ -33,29 +32,5 @@ export default function createBox(options = {}) {
       theme: theme
     }, other));
   });
-  process.env.NODE_ENV !== "production" ? Box.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    children: PropTypes.node,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * @ignore
-     */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-  } : void 0;
   return Box;
 }

package/modern/index.js

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

package/modern/spacing.js

@@ -43,7 +43,7 @@ const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTo
 const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  const themeSpacing = getPath(theme, themeKey) || defaultValue;
+  const themeSpacing = getPath(theme, themeKey) ?? defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return abs => {

package/modern/style.js

@@ -4,9 +4,24 @@ 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);
+  return path.split('.').reduce((acc, item) => {
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+
+    return null;
+  }, obj);
 }
 
 function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.6.0",
+  "version": "5.6.3",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -28,7 +28,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+    "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/private-theming": "^5.6.0",
-    "@mui/styled-engine": "^5.6.0",
+    "@mui/private-theming": "^5.6.2",
+    "@mui/styled-engine": "^5.6.1",
     "@mui/types": "^7.1.3",
-    "@mui/utils": "^5.6.0",
+    "@mui/utils": "^5.6.1",
     "clsx": "^1.1.1",
     "csstype": "^3.0.11",
     "prop-types": "^15.7.2"

package/spacing.js

@@ -64,7 +64,9 @@ const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddin
 const spacingKeys = [...marginKeys, ...paddingKeys];
 
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  const themeSpacing = (0, _style.getPath)(theme, themeKey) || defaultValue;
+  var _getPath;
+
+  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey)) != null ? _getPath : defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return abs => {

package/style.js

@@ -17,9 +17,24 @@ 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);
+  return path.split('.').reduce((acc, item) => {
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+
+    return null;
+  }, obj);
 }
 
 function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -69,7 +69,9 @@ export type SystemStyleObject<Theme extends object = {}> =
 export type SxProps<Theme extends object = {}> =
   | SystemStyleObject<Theme>
   | ((theme: Theme) => SystemStyleObject<Theme>)
-  | Array<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
+  | ReadonlyArray<
+      boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)
+    >;
 
 export interface StyleFunctionSx {
   (props: object): object;

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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