@mui/system 5.11.14 → 5.11.16

package/legacy/Stack/Stack.js

@@ -44,6 +44,16 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the theme's default props configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
 } : void 0;
 export default Stack;

package/legacy/Stack/createStack.js

@@ -99,6 +99,11 @@ export var style = function style(_ref) {
       });
     }
     var styleFromPropValue = function styleFromPropValue(propValue, breakpoint) {
+      if (ownerState.useFlexGap) {
+        return {
+          gap: getValue(transformer, propValue)
+        };
+      }
       return {
         '& > :not(style) + :not(style)': _defineProperty({
           margin: 0
@@ -141,10 +146,13 @@ export default function createStack() {
       divider = props.divider,
       children = props.children,
       className = props.className,
-      other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children", "className"]);
+      _props$useFlexGap = props.useFlexGap,
+      useFlexGap = _props$useFlexGap === void 0 ? false : _props$useFlexGap,
+      other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"]);
     var ownerState = {
       direction: direction,
-      spacing: spacing
+      spacing: spacing,
+      useFlexGap: useFlexGap
     };
     var classes = useUtilityClasses();
     return /*#__PURE__*/_jsx(StackRoot, _extends({

package/legacy/Unstable_Grid/gridGenerator.js

@@ -2,12 +2,18 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
+function appendLevel(level) {
+  if (!level) {
+    return '';
+  }
+  return "Level".concat(level);
+}
 function isNestedContainer(ownerState) {
   return ownerState.level > 0 && ownerState.container;
 }
 function createGetSelfSpacing(ownerState) {
   return function getSelfSpacing(axis) {
-    return "var(--Grid-".concat(axis, "Spacing").concat(ownerState.level || '', ")");
+    return "var(--Grid-".concat(axis, "Spacing").concat(appendLevel(ownerState.level), ")");
   };
 }
 function createGetParentSpacing(ownerState) {
@@ -15,9 +21,15 @@ function createGetParentSpacing(ownerState) {
     if (ownerState.level === 0) {
       return "var(--Grid-".concat(axis, "Spacing)");
     }
-    return "var(--Grid-".concat(axis, "Spacing").concat(ownerState.level - 1 || '', ")");
+    return "var(--Grid-".concat(axis, "Spacing").concat(appendLevel(ownerState.level - 1), ")");
   };
 }
+function getParentColumns(ownerState) {
+  if (ownerState.level === 0) {
+    return "var(--Grid-columns)";
+  }
+  return "var(--Grid-columns".concat(appendLevel(ownerState.level - 1), ")");
+}
 export var filterBreakpointKeys = function filterBreakpointKeys(breakpointsKeys, responsiveKeys) {
   return breakpointsKeys.filter(function (key) {
     return responsiveKeys.includes(key);
@@ -91,7 +103,7 @@ export var generateGridSizeStyles = function generateGridSizeStyles(_ref) {
       style = {
         flexGrow: 0,
         flexBasis: 'auto',
-        width: "calc(100% * ".concat(value, " / var(--Grid-columns)").concat(isNestedContainer(ownerState) ? " + ".concat(getSelfSpacing('column')) : '', ")")
+        width: "calc(100% * ".concat(value, " / ").concat(getParentColumns(ownerState)).concat(isNestedContainer(ownerState) ? " + ".concat(getSelfSpacing('column')) : '', ")")
       };
     }
     appendStyle(styles, style);
@@ -111,7 +123,7 @@ export var generateGridOffsetStyles = function generateGridOffsetStyles(_ref2) {
     }
     if (typeof value === 'number') {
       style = {
-        marginLeft: value === 0 ? '0px' : "calc(100% * ".concat(value, " / var(--Grid-columns))")
+        marginLeft: value === 0 ? '0px' : "calc(100% * ".concat(value, " / ").concat(getParentColumns(ownerState), ")")
       };
     }
     appendStyle(styles, style);
@@ -124,47 +136,45 @@ export var generateGridColumnsStyles = function generateGridColumnsStyles(_ref3)
   if (!ownerState.container) {
     return {};
   }
-  var styles = {
+  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columns".concat(appendLevel(ownerState.level)), getParentColumns(ownerState)) : {
     '--Grid-columns': 12
   };
   traverseBreakpoints(theme.breakpoints, ownerState.columns, function (appendStyle, value) {
-    appendStyle(styles, {
-      '--Grid-columns': value
-    });
+    appendStyle(styles, _defineProperty({}, "--Grid-columns".concat(appendLevel(ownerState.level)), value));
   });
   return styles;
 };
-export var generateGridRowSpacingStyles = function generateGridRowSpacingStyles(_ref4) {
-  var theme = _ref4.theme,
-    ownerState = _ref4.ownerState;
+export var generateGridRowSpacingStyles = function generateGridRowSpacingStyles(_ref5) {
+  var theme = _ref5.theme,
+    ownerState = _ref5.ownerState;
   if (!ownerState.container) {
     return {};
   }
   var getParentSpacing = createGetParentSpacing(ownerState);
-  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-rowSpacing".concat(ownerState.level || ''), getParentSpacing('row')) : {};
+  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-rowSpacing".concat(appendLevel(ownerState.level)), getParentSpacing('row')) : {};
   traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, function (appendStyle, value) {
     var _theme$spacing;
-    appendStyle(styles, _defineProperty({}, "--Grid-rowSpacing".concat(ownerState.level || ''), typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)));
+    appendStyle(styles, _defineProperty({}, "--Grid-rowSpacing".concat(appendLevel(ownerState.level)), typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)));
   });
   return styles;
 };
-export var generateGridColumnSpacingStyles = function generateGridColumnSpacingStyles(_ref6) {
-  var theme = _ref6.theme,
-    ownerState = _ref6.ownerState;
+export var generateGridColumnSpacingStyles = function generateGridColumnSpacingStyles(_ref7) {
+  var theme = _ref7.theme,
+    ownerState = _ref7.ownerState;
   if (!ownerState.container) {
     return {};
   }
   var getParentSpacing = createGetParentSpacing(ownerState);
-  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columnSpacing".concat(ownerState.level || ''), getParentSpacing('column')) : {};
+  var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columnSpacing".concat(appendLevel(ownerState.level)), getParentSpacing('column')) : {};
   traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, function (appendStyle, value) {
     var _theme$spacing2;
-    appendStyle(styles, _defineProperty({}, "--Grid-columnSpacing".concat(ownerState.level || ''), typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)));
+    appendStyle(styles, _defineProperty({}, "--Grid-columnSpacing".concat(appendLevel(ownerState.level)), typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)));
   });
   return styles;
 };
-export var generateGridDirectionStyles = function generateGridDirectionStyles(_ref8) {
-  var theme = _ref8.theme,
-    ownerState = _ref8.ownerState;
+export var generateGridDirectionStyles = function generateGridDirectionStyles(_ref9) {
+  var theme = _ref9.theme,
+    ownerState = _ref9.ownerState;
   if (!ownerState.container) {
     return {};
   }
@@ -176,8 +186,8 @@ export var generateGridDirectionStyles = function generateGridDirectionStyles(_r
   });
   return styles;
 };
-export var generateGridStyles = function generateGridStyles(_ref9) {
-  var ownerState = _ref9.ownerState;
+export var generateGridStyles = function generateGridStyles(_ref10) {
+  var ownerState = _ref10.ownerState;
   var getSelfSpacing = createGetSelfSpacing(ownerState);
   var getParentSpacing = createGetParentSpacing(ownerState);
   return _extends({
@@ -200,10 +210,10 @@ export var generateGridStyles = function generateGridStyles(_ref9) {
 };
 export var generateSizeClassNames = function generateSizeClassNames(gridSize) {
   var classNames = [];
-  Object.entries(gridSize).forEach(function (_ref10) {
-    var _ref11 = _slicedToArray(_ref10, 2),
-      key = _ref11[0],
-      value = _ref11[1];
+  Object.entries(gridSize).forEach(function (_ref11) {
+    var _ref12 = _slicedToArray(_ref11, 2),
+      key = _ref12[0],
+      value = _ref12[1];
     if (value !== false && value !== undefined) {
       classNames.push("grid-".concat(key, "-").concat(String(value)));
     }
@@ -223,10 +233,10 @@ export var generateSpacingClassNames = function generateSpacingClassNames(spacin
   }
   if (_typeof(spacing) === 'object' && !Array.isArray(spacing)) {
     var classNames = [];
-    Object.entries(spacing).forEach(function (_ref12) {
-      var _ref13 = _slicedToArray(_ref12, 2),
-        key = _ref13[0],
-        value = _ref13[1];
+    Object.entries(spacing).forEach(function (_ref13) {
+      var _ref14 = _slicedToArray(_ref13, 2),
+        key = _ref14[0],
+        value = _ref14[1];
       if (isValidSpacing(value)) {
         classNames.push("spacing-".concat(key, "-").concat(String(value)));
       }
@@ -240,10 +250,10 @@ export var generateDirectionClasses = function generateDirectionClasses(directio
     return [];
   }
   if (_typeof(direction) === 'object') {
-    return Object.entries(direction).map(function (_ref14) {
-      var _ref15 = _slicedToArray(_ref14, 2),
-        key = _ref15[0],
-        value = _ref15[1];
+    return Object.entries(direction).map(function (_ref15) {
+      var _ref16 = _slicedToArray(_ref15, 2),
+        key = _ref16[0],
+        value = _ref16[1];
       return "direction-".concat(key, "-").concat(value);
     });
   }

package/legacy/index.js

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

package/legacy/styleFunctionSx/defaultSxConfig.js

@@ -1,40 +1,8 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import { unstable_capitalize as capitalize } from '@mui/utils';
 import { padding, margin } from '../spacing';
-import { handleBreakpoints } from '../breakpoints';
 import { borderRadius, borderTransform } from '../borders';
 import { gap, rowGap, columnGap } from '../cssGrid';
 import { paletteTransform } from '../palette';
 import { maxWidth, sizingTransform } from '../sizing';
-var createFontStyleFunction = function createFontStyleFunction(prop) {
-  return function (props) {
-    if (props[prop] !== undefined && props[prop] !== null) {
-      var styleFromPropValue = function styleFromPropValue(propValue) {
-        var _props$theme$typograp;
-        // fetch the value directly defined in the theme, like fontWeightLight
-        var value = (_props$theme$typograp = props.theme.typography) == null ? void 0 : _props$theme$typograp[propValue];
-        if (_typeof(value) === 'object') {
-          // typography variant was pulled, but these props can't be an object
-          value = null;
-        }
-        if (!value) {
-          var _props$theme$typograp2, _props$prop;
-          // fetch fontWeightLight when the value is 'light'
-          value = (_props$theme$typograp2 = props.theme.typography) == null ? void 0 : _props$theme$typograp2["".concat(prop).concat(props[prop] === 'default' || props[prop] === prop ? '' : capitalize((_props$prop = props[prop]) == null ? void 0 : _props$prop.toString()))];
-        }
-        if (!value) {
-          var _props$theme$typograp3, _props$theme$typograp4, _props$theme$typograp5;
-          // fetch the value from the typography variant or default to the propValue
-          value = (_props$theme$typograp3 = (_props$theme$typograp4 = props.theme.typography) == null ? void 0 : (_props$theme$typograp5 = _props$theme$typograp4[propValue]) == null ? void 0 : _props$theme$typograp5[prop]) != null ? _props$theme$typograp3 : propValue;
-        }
-        return _defineProperty({}, prop, value);
-      };
-      return handleBreakpoints(props, props[prop], styleFromPropValue);
-    }
-    return null;
-  };
-};
 var defaultSxConfig = {
   // borders
   border: {
@@ -295,19 +263,16 @@ var defaultSxConfig = {
   boxSizing: {},
   // typography
   fontFamily: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontFamily')
+    themeKey: 'typography'
   },
   fontSize: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontSize')
+    themeKey: 'typography'
   },
   fontStyle: {
     themeKey: 'typography'
   },
   fontWeight: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontWeight')
+    themeKey: 'typography'
   },
   letterSpacing: {},
   textTransform: {},

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -38,6 +38,9 @@ export function unstable_createStyleFunctionSx() {
     if (val == null) {
       return null;
     }
+    if (themeKey === 'typography' && val === 'inherit') {
+      return _defineProperty({}, prop, val);
+    }
     var themeMapping = getPath(theme, themeKey) || {};
     if (style) {
       return style(props);
@@ -57,10 +60,10 @@ export function unstable_createStyleFunctionSx() {
   }
   function styleFunctionSx(props) {
     var _theme$unstable_sxCon;
-    var _ref3 = props || {},
-      sx = _ref3.sx,
-      _ref3$theme = _ref3.theme,
-      theme = _ref3$theme === void 0 ? {} : _ref3$theme;
+    var _ref4 = props || {},
+      sx = _ref4.sx,
+      _ref4$theme = _ref4.theme,
+      theme = _ref4$theme === void 0 ? {} : _ref4$theme;
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }

package/modern/Stack/Stack.js

@@ -44,6 +44,16 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the theme's default props configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
 } : void 0;
 export default Stack;

package/modern/Stack/createStack.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["component", "direction", "spacing", "divider", "children", "className"];
+const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -95,6 +95,11 @@ export const style = ({
       });
     }
     const styleFromPropValue = (propValue, breakpoint) => {
+      if (ownerState.useFlexGap) {
+        return {
+          gap: getValue(transformer, propValue)
+        };
+      }
       return {
         '& > :not(style) + :not(style)': {
           margin: 0,
@@ -132,12 +137,14 @@ export default function createStack(options = {}) {
         spacing = 0,
         divider,
         children,
-        className
+        className,
+        useFlexGap = false
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded);
     const ownerState = {
       direction,
-      spacing
+      spacing,
+      useFlexGap
     };
     const classes = useUtilityClasses();
     return /*#__PURE__*/_jsx(StackRoot, _extends({

package/modern/Unstable_Grid/gridGenerator.js

@@ -1,10 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+function appendLevel(level) {
+  if (!level) {
+    return '';
+  }
+  return `Level${level}`;
+}
 function isNestedContainer(ownerState) {
   return ownerState.level > 0 && ownerState.container;
 }
 function createGetSelfSpacing(ownerState) {
   return function getSelfSpacing(axis) {
-    return `var(--Grid-${axis}Spacing${ownerState.level || ''})`;
+    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level)})`;
   };
 }
 function createGetParentSpacing(ownerState) {
@@ -12,9 +18,15 @@ function createGetParentSpacing(ownerState) {
     if (ownerState.level === 0) {
       return `var(--Grid-${axis}Spacing)`;
     }
-    return `var(--Grid-${axis}Spacing${ownerState.level - 1 || ''})`;
+    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level - 1)})`;
   };
 }
+function getParentColumns(ownerState) {
+  if (ownerState.level === 0) {
+    return `var(--Grid-columns)`;
+  }
+  return `var(--Grid-columns${appendLevel(ownerState.level - 1)})`;
+}
 export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
 export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
   const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
@@ -85,7 +97,7 @@ export const generateGridSizeStyles = ({
       style = {
         flexGrow: 0,
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / var(--Grid-columns)${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
+        width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
       };
     }
     appendStyle(styles, style);
@@ -106,7 +118,7 @@ export const generateGridOffsetStyles = ({
     }
     if (typeof value === 'number') {
       style = {
-        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(--Grid-columns))`
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
       };
     }
     appendStyle(styles, style);
@@ -120,12 +132,14 @@ export const generateGridColumnsStyles = ({
   if (!ownerState.container) {
     return {};
   }
-  const styles = {
+  const styles = isNestedContainer(ownerState) ? {
+    [`--Grid-columns${appendLevel(ownerState.level)}`]: getParentColumns(ownerState)
+  } : {
     '--Grid-columns': 12
   };
   traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
     appendStyle(styles, {
-      '--Grid-columns': value
+      [`--Grid-columns${appendLevel(ownerState.level)}`]: value
     });
   });
   return styles;
@@ -141,11 +155,11 @@ export const generateGridRowSpacingStyles = ({
   const styles = isNestedContainer(ownerState) ? {
     // Set the default spacing as its parent spacing.
     // It will be overridden if spacing props are provided
-    [`--Grid-rowSpacing${ownerState.level || ''}`]: getParentSpacing('row')
+    [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('row')
   } : {};
   traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
     appendStyle(styles, {
-      [`--Grid-rowSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
     });
   });
   return styles;
@@ -161,11 +175,11 @@ export const generateGridColumnSpacingStyles = ({
   const styles = isNestedContainer(ownerState) ? {
     // Set the default spacing as its parent spacing.
     // It will be overridden if spacing props are provided
-    [`--Grid-columnSpacing${ownerState.level || ''}`]: getParentSpacing('column')
+    [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('column')
   } : {};
   traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
     appendStyle(styles, {
-      [`--Grid-columnSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
     });
   });
   return styles;

package/modern/index.js

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

package/modern/styleFunctionSx/defaultSxConfig.js

@@ -1,37 +1,8 @@
-import { unstable_capitalize as capitalize } from '@mui/utils';
 import { padding, margin } from '../spacing';
-import { handleBreakpoints } from '../breakpoints';
 import { borderRadius, borderTransform } from '../borders';
 import { gap, rowGap, columnGap } from '../cssGrid';
 import { paletteTransform } from '../palette';
 import { maxWidth, sizingTransform } from '../sizing';
-const createFontStyleFunction = prop => {
-  return props => {
-    if (props[prop] !== undefined && props[prop] !== null) {
-      const styleFromPropValue = propValue => {
-        // fetch the value directly defined in the theme, like fontWeightLight
-        let value = props.theme.typography?.[propValue];
-        if (typeof value === 'object') {
-          // typography variant was pulled, but these props can't be an object
-          value = null;
-        }
-        if (!value) {
-          // fetch fontWeightLight when the value is 'light'
-          value = props.theme.typography?.[`${prop}${props[prop] === 'default' || props[prop] === prop ? '' : capitalize(props[prop]?.toString())}`];
-        }
-        if (!value) {
-          // fetch the value from the typography variant or default to the propValue
-          value = props.theme.typography?.[propValue]?.[prop] ?? propValue;
-        }
-        return {
-          [prop]: value
-        };
-      };
-      return handleBreakpoints(props, props[prop], styleFromPropValue);
-    }
-    return null;
-  };
-};
 const defaultSxConfig = {
   // borders
   border: {
@@ -290,19 +261,16 @@ const defaultSxConfig = {
   boxSizing: {},
   // typography
   fontFamily: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontFamily')
+    themeKey: 'typography'
   },
   fontSize: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontSize')
+    themeKey: 'typography'
   },
   fontStyle: {
     themeKey: 'typography'
   },
   fontWeight: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontWeight')
+    themeKey: 'typography'
   },
   letterSpacing: {},
   textTransform: {},

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -34,6 +34,11 @@ export function unstable_createStyleFunctionSx() {
     if (val == null) {
       return null;
     }
+    if (themeKey === 'typography' && val === 'inherit') {
+      return {
+        [prop]: val
+      };
+    }
     const themeMapping = getPath(theme, themeKey) || {};
     if (style) {
       return style(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.11.14",
+  "version": "5.11.16",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/runtime": "^7.21.0",
     "@mui/private-theming": "^5.11.13",
-    "@mui/styled-engine": "^5.11.11",
+    "@mui/styled-engine": "^5.11.16",
     "@mui/types": "^7.2.3",
     "@mui/utils": "^5.11.13",
     "clsx": "^1.2.1",
-    "csstype": "^3.1.1",
+    "csstype": "^3.1.2",
     "prop-types": "^15.8.1"
   },
   "sideEffects": false,

package/styleFunctionSx/defaultSxConfig.js

@@ -4,43 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _utils = require("@mui/utils");
 var _spacing = require("../spacing");
-var _breakpoints = require("../breakpoints");
 var _borders = require("../borders");
 var _cssGrid = require("../cssGrid");
 var _palette = require("../palette");
 var _sizing = require("../sizing");
-const createFontStyleFunction = prop => {
-  return props => {
-    if (props[prop] !== undefined && props[prop] !== null) {
-      const styleFromPropValue = propValue => {
-        var _props$theme$typograp;
-        // fetch the value directly defined in the theme, like fontWeightLight
-        let value = (_props$theme$typograp = props.theme.typography) == null ? void 0 : _props$theme$typograp[propValue];
-        if (typeof value === 'object') {
-          // typography variant was pulled, but these props can't be an object
-          value = null;
-        }
-        if (!value) {
-          var _props$theme$typograp2, _props$prop;
-          // fetch fontWeightLight when the value is 'light'
-          value = (_props$theme$typograp2 = props.theme.typography) == null ? void 0 : _props$theme$typograp2[`${prop}${props[prop] === 'default' || props[prop] === prop ? '' : (0, _utils.unstable_capitalize)((_props$prop = props[prop]) == null ? void 0 : _props$prop.toString())}`];
-        }
-        if (!value) {
-          var _props$theme$typograp3, _props$theme$typograp4, _props$theme$typograp5;
-          // fetch the value from the typography variant or default to the propValue
-          value = (_props$theme$typograp3 = (_props$theme$typograp4 = props.theme.typography) == null ? void 0 : (_props$theme$typograp5 = _props$theme$typograp4[propValue]) == null ? void 0 : _props$theme$typograp5[prop]) != null ? _props$theme$typograp3 : propValue;
-        }
-        return {
-          [prop]: value
-        };
-      };
-      return (0, _breakpoints.handleBreakpoints)(props, props[prop], styleFromPropValue);
-    }
-    return null;
-  };
-};
 const defaultSxConfig = {
   // borders
   border: {
@@ -299,19 +267,16 @@ const defaultSxConfig = {
   boxSizing: {},
   // typography
   fontFamily: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontFamily')
+    themeKey: 'typography'
   },
   fontSize: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontSize')
+    themeKey: 'typography'
   },
   fontStyle: {
     themeKey: 'typography'
   },
   fontWeight: {
-    themeKey: 'typography',
-    style: createFontStyleFunction('fontWeight')
+    themeKey: 'typography'
   },
   letterSpacing: {},
   textTransform: {},

package/styleFunctionSx/styleFunctionSx.js

@@ -42,6 +42,11 @@ function unstable_createStyleFunctionSx() {
     if (val == null) {
       return null;
     }
+    if (themeKey === 'typography' && val === 'inherit') {
+      return {
+        [prop]: val
+      };
+    }
     const themeMapping = (0, _style.getPath)(theme, themeKey) || {};
     if (style) {
       return style(props);

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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