@mui/system - npm Package Compare versions

Comparing version 5.10.17 to 5.11.0

borders.js

@@ -7,3 +7,5 @@ "use strict";
 });
-exports.default = exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
+exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
+exports.borderTransform = borderTransform;
+exports.default = void 0;
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
@@ -14,3 +16,3 @@ var _style = _interopRequireDefault(require("./style"));
 var _breakpoints = require("./breakpoints");
-function getBorder(value) {
+function borderTransform(value) {
   if (typeof value !== 'number') {
@@ -24,3 +26,3 @@ return value;
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -31,3 +33,3 @@ exports.border = border;
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -38,3 +40,3 @@ exports.borderTop = borderTop;
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -45,3 +47,3 @@ exports.borderRight = borderRight;
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -52,3 +54,3 @@ exports.borderBottom = borderBottom;
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -80,2 +82,5 @@ exports.borderLeft = borderLeft;
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 exports.borderLeftColor = borderLeftColor;
@@ -82,0 +87,0 @@ const borderRadius = props => {

Box/Box.spec.d.ts

 export {};

breakpoints.js

@@ -66,2 +66,4 @@ "use strict";
 function breakpoints(styleFunction) {
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = props => {
@@ -68,0 +70,0 @@ const theme = props.theme || {};

compose.js

@@ -16,2 +16,5 @@ "use strict";
   }, {});
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
@@ -18,0 +21,0 @@ return Object.keys(props).reduce((acc, prop) => {

Container/Container.d.ts

@@ -0,0 +0,0 @@ /**

Container/containerClasses.d.ts

@@ -0,0 +0,0 @@ export interface ContainerClasses {

Container/ContainerProps.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Container/createContainer.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

createBox.d.ts

 import Box from './Box';
-import styleFunctionSx from './styleFunctionSx';
 
@@ -8,3 +7,2 @@ export default function createBox(options?: {
   generateClassName?: (componentName: string) => string;
-  styleFunctionSx?: typeof styleFunctionSx;
 }): typeof Box;

createBox.js

@@ -23,8 +23,7 @@ "use strict";
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = _styleFunctionSx.default
+    generateClassName
   } = options;
   const BoxRoot = (0, _styledEngine.default)('div', {
     shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
+  })(_styleFunctionSx.default);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
@@ -31,0 +30,0 @@ const theme = (0, _useTheme.default)(defaultTheme);

createBox.spec.d.ts

 export {};

createStyled.js

@@ -88,8 +88,7 @@ "use strict";
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = _styleFunctionSx.default
+    slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
     const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
-    return styleFunctionSx((0, _extends2.default)({}, props, {
+    return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
       theme
@@ -96,0 +95,0 @@ }));

createTheme/createSpacing.d.ts

@@ -0,0 +0,0 @@ export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;

createTheme/createTheme.d.ts

@@ -0,4 +1,6 @@
+import { CSSObject } from '@mui/styled-engine';
 import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
 import { Shape, ShapeOptions } from './shape';
 import { Spacing, SpacingOptions } from './createSpacing';
+import { SxConfig, SxProps } from '../styleFunctionSx';
 
@@ -21,2 +23,3 @@ export { Breakpoint, BreakpointOverrides } from './createBreakpoints';
   zIndex?: Record<string, number>;
+  unstable_sxConfig?: SxConfig;
 }
@@ -36,2 +39,4 @@
   zIndex?: unknown;
+  unstable_sxConfig: SxConfig;
+  unstable_sx: (props: SxProps<Theme>) => CSSObject;
 }
@@ -38,0 +43,0 @@

createTheme/createTheme.js

@@ -14,2 +14,4 @@ "use strict";
 var _createSpacing = _interopRequireDefault(require("./createSpacing"));
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
+var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
 const _excluded = ["breakpoints", "palette", "spacing", "shape"];
@@ -38,2 +40,9 @@ function createTheme(options = {}, ...args) {
   muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return (0, _styleFunctionSx.default)({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
@@ -40,0 +49,0 @@ }

cssGrid.js

@@ -13,2 +13,4 @@ "use strict";
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const gap = props => {
@@ -29,2 +31,5 @@ if (props.gap !== undefined && props.gap !== null) {
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const columnGap = props => {
@@ -45,2 +50,5 @@ if (props.columnGap !== undefined && props.columnGap !== null) {
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const rowGap = props => {
@@ -47,0 +55,0 @@ if (props.rowGap !== undefined && props.rowGap !== null) {

cssVars/createCssVarsProvider.spec.d.ts

 export {};

cssVars/createGetCssVar.d.ts

@@ -0,0 +0,0 @@ /**

cssVars/cssVarsParser.d.ts

@@ -0,0 +0,0 @@ type NestedRecord<V = any> = {

cssVars/getInitColorSchemeScript.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

cssVars/index.d.ts

 export { default } from './createCssVarsProvider';
 export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';

cssVars/useCurrentColorScheme.d.ts

@@ -0,0 +0,0 @@ export type Mode = 'light' | 'dark' | 'system';

esm/borders.js

@@ -6,3 +6,3 @@ import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
-function getBorder(value) {
+export function borderTransform(value) {
   if (typeof value !== 'number') {
@@ -16,3 +16,3 @@ return value;
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -22,3 +22,3 @@ export const borderTop = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -28,3 +28,3 @@ export const borderRight = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -34,3 +34,3 @@ export const borderBottom = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -40,3 +40,3 @@ export const borderLeft = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -63,2 +63,5 @@ export const borderColor = style({
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const borderRadius = props => {
@@ -65,0 +68,0 @@ if (props.borderRadius !== undefined && props.borderRadius !== null) {

esm/breakpoints.js

@@ -53,2 +53,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 function breakpoints(styleFunction) {
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = props => {
@@ -55,0 +57,0 @@ const theme = props.theme || {};

esm/compose.js

@@ -9,2 +9,5 @@ import merge from './merge';
   }, {});
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
@@ -11,0 +14,0 @@ return Object.keys(props).reduce((acc, prop) => {

esm/createBox.js

@@ -7,3 +7,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import styled from '@mui/styled-engine';
-import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
@@ -15,4 +15,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = defaultStyleFunctionSx
+    generateClassName
   } = options;
@@ -19,0 +18,0 @@ const BoxRoot = styled('div', {

esm/createStyled.js

@@ -11,3 +11,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import propsToClassKey from './propsToClassKey';
-import defaultStyleFunctionSx from './styleFunctionSx';
+import styleFunctionSx from './styleFunctionSx';
 function isEmpty(obj) {
@@ -78,4 +78,3 @@ return Object.keys(obj).length === 0;
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = defaultStyleFunctionSx
+    slotShouldForwardProp = shouldForwardProp
   } = input;
@@ -82,0 +81,0 @@ const systemSx = props => {

esm/createTheme/createTheme.js

@@ -8,2 +8,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import createSpacing from './createSpacing';
+import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
+import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 function createTheme(options = {}, ...args) {
@@ -31,4 +33,11 @@ const {
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 export default createTheme;

esm/cssGrid.js

@@ -6,2 +6,5 @@ import style from './style';
 import responsivePropType from './responsivePropType';
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const gap = props => {
@@ -21,2 +24,5 @@ if (props.gap !== undefined && props.gap !== null) {
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const columnGap = props => {
@@ -36,2 +42,5 @@ if (props.columnGap !== undefined && props.columnGap !== null) {
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const rowGap = props => {
@@ -38,0 +47,0 @@ if (props.rowGap !== undefined && props.rowGap !== null) {

esm/index.js

@@ -24,4 +24,3 @@ export { css, keyframes, GlobalStyles, StyledEngineProvider } from '@mui/styled-engine';
 export * from './typography';
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
-export { default as experimental_sx } from './sx';
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from './styleFunctionSx';
 export { default as unstable_getThemeValue } from './getThemeValue';
@@ -28,0 +27,0 @@ export { default as Box } from './Box';

esm/palette.js

 import style from './style';
 import compose from './compose';
-function transform(value, userValue) {
+export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
@@ -12,3 +12,3 @@ return userValue;
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
@@ -19,3 +19,3 @@ export const bgcolor = style({
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
@@ -25,5 +25,5 @@ export const backgroundColor = style({
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
 const palette = compose(color, bgcolor, backgroundColor);
 export default palette;

esm/sizing.js

 import style from './style';
 import compose from './compose';
 import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
-function transform(value) {
+export function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
@@ -9,3 +9,3 @@ }
   prop: 'width',
-  transform
+  transform: sizingTransform
 });
@@ -18,3 +18,3 @@ export const maxWidth = props => {
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
@@ -29,15 +29,15 @@ };
   prop: 'minWidth',
-  transform
+  transform: sizingTransform
 });
 export const height = style({
   prop: 'height',
-  transform
+  transform: sizingTransform
 });
 export const maxHeight = style({
   prop: 'maxHeight',
-  transform
+  transform: sizingTransform
 });
 export const minHeight = style({
   prop: 'minHeight',
-  transform
+  transform: sizingTransform
 });
@@ -47,3 +47,3 @@ export const sizeWidth = style({
   cssProperty: 'width',
-  transform
+  transform: sizingTransform
 });
@@ -53,3 +53,3 @@ export const sizeHeight = style({
   cssProperty: 'height',
-  transform
+  transform: sizingTransform
 });
@@ -56,0 +56,0 @@ export const boxSizing = style({

esm/spacing.js

@@ -42,4 +42,4 @@ import responsivePropType from './responsivePropType';
 });
-const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
+export const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+export 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];
@@ -46,0 +46,0 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {

esm/style.js

@@ -33,3 +33,3 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
@@ -45,2 +45,5 @@ return value;
   } = options;
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
@@ -47,0 +50,0 @@ if (props[prop] == null) {

esm/styleFunctionSx/extendSxProp.js

@@ -5,4 +5,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { isPlainObject } from '@mui/utils';
-import { propToStyleFunction } from '../getThemeValue';
+import defaultSxConfig from './defaultSxConfig';
 const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
   const result = {
@@ -12,4 +13,5 @@ systemProps: {},
   };
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
   Object.keys(props).forEach(prop => {
-    if (propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -16,0 +18,0 @@ } else {

esm/styleFunctionSx/index.js

 export { default } from './styleFunctionSx';
 export { unstable_createStyleFunctionSx } from './styleFunctionSx';
-export { default as extendSxProp } from './extendSxProp';
+export { default as extendSxProp } from './extendSxProp';
+export { default as unstable_defaultSxConfig } from './defaultSxConfig';

esm/styleFunctionSx/styleFunctionSx.js

@@ -0,4 +1,6 @@
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import merge from '../merge';
-import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
+import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys(...objects) {
@@ -14,20 +16,44 @@ const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultStyleFunctionMapping) {
-  const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => {
-    styleFunctionMapping[styleFnName].filterProps.forEach(propName => {
-      acc[propName] = styleFunctionMapping[styleFnName];
-    });
-    return acc;
-  }, {});
-  function getThemeValue(prop, value, theme) {
-    const inputProps = {
-      [prop]: value,
+export function unstable_createStyleFunctionSx() {
+  function getThemeValue(prop, val, theme, config) {
+    const props = {
+      [prop]: val,
       theme
     };
-    const styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : {
-      [prop]: value
+    const options = config[prop];
+    if (!options) {
+      return {
+        [prop]: val
+      };
+    }
+    const {
+      cssProperty = prop,
+      themeKey,
+      transform,
+      style
+    } = options;
+    if (val == null) {
+      return null;
+    }
+    const themeMapping = getPath(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    const styleFromPropValue = propValueFinal => {
+      let value = getValue(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
     };
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
+    var _theme$unstable_sxCon;
     const {
@@ -41,2 +67,4 @@ sx,
 
+    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;
+
     /*
@@ -65,4 +93,4 @@ * Receive `sxInput` as object or callback
           if (typeof value === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme));
+            if (config[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
@@ -84,3 +112,3 @@ const breakpointsValues = handleBreakpoints({
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
@@ -87,0 +115,0 @@ }

index.d.ts

@@ -122,7 +122,6 @@ import {
   extendSxProp as unstable_extendSxProp,
+  unstable_defaultSxConfig,
 } from './styleFunctionSx';
 export * from './styleFunctionSx';
 
-export { default as experimental_sx } from './sx';
-
 export { default as Box } from './Box';
@@ -129,0 +128,0 @@ export * from './Box';

index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.10.17
+/** @license MUI v5.11.0
  *
@@ -38,3 +38,3 @@ * This source code is licensed under the MIT license found in the
   unstable_extendSxProp: true,
-  experimental_sx: true,
+  unstable_defaultSxConfig: true,
   unstable_getThemeValue: true,
@@ -170,8 +170,2 @@ Box: true,
 });
-Object.defineProperty(exports, "experimental_sx", {
-  enumerable: true,
-  get: function () {
-    return _sx.default;
-  }
-});
 Object.defineProperty(exports, "flexbox", {
@@ -303,2 +297,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "unstable_defaultSxConfig", {
+  enumerable: true,
+  get: function () {
+    return _styleFunctionSx.unstable_defaultSxConfig;
+  }
+});
 Object.defineProperty(exports, "unstable_extendSxProp", {
@@ -449,3 +449,2 @@ enumerable: true,
 var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
-var _sx = _interopRequireDefault(require("./sx"));
 var _getThemeValue = _interopRequireDefault(require("./getThemeValue"));
@@ -452,0 +451,0 @@ var _Box = _interopRequireDefault(require("./Box"));

index.spec.d.ts

 export {};

legacy/borders.js

@@ -6,3 +6,3 @@ import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
-function getBorder(value) {
+export function borderTransform(value) {
   if (typeof value !== 'number') {
@@ -16,3 +16,3 @@ return value;
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -22,3 +22,3 @@ export var borderTop = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -28,3 +28,3 @@ export var borderRight = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -34,3 +34,3 @@ export var borderBottom = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -40,3 +40,3 @@ export var borderLeft = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -63,2 +63,5 @@ export var borderColor = style({
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var borderRadius = function borderRadius(props) {
@@ -65,0 +68,0 @@ if (props.borderRadius !== undefined && props.borderRadius !== null) {

legacy/breakpoints.js

@@ -57,2 +57,4 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 function breakpoints(styleFunction) {
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   var newStyleFunction = function newStyleFunction(props) {
@@ -59,0 +61,0 @@ var theme = props.theme || {};

legacy/compose.js

@@ -13,2 +13,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   }, {});
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   var fn = function fn(props) {
@@ -15,0 +18,0 @@ return Object.keys(props).reduce(function (acc, prop) {

legacy/createBox.js

@@ -6,3 +6,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import styled from '@mui/styled-engine';
-import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
@@ -15,5 +15,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
     defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
-    generateClassName = options.generateClassName,
-    _options$styleFunctio = options.styleFunctionSx,
-    styleFunctionSx = _options$styleFunctio === void 0 ? defaultStyleFunctionSx : _options$styleFunctio;
+    generateClassName = options.generateClassName;
   var BoxRoot = styled('div', {
@@ -20,0 +18,0 @@ shouldForwardProp: function shouldForwardProp(prop) {

legacy/createStyled.js

@@ -10,3 +10,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import propsToClassKey from './propsToClassKey';
-import defaultStyleFunctionSx from './styleFunctionSx';
+import styleFunctionSx from './styleFunctionSx';
 function isEmpty(obj) {
@@ -79,5 +79,3 @@ return Object.keys(obj).length === 0;
     _input$slotShouldForw = input.slotShouldForwardProp,
-    slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw,
-    _input$styleFunctionS = input.styleFunctionSx,
-    styleFunctionSx = _input$styleFunctionS === void 0 ? defaultStyleFunctionSx : _input$styleFunctionS;
+    slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw;
   var systemSx = function systemSx(props) {
@@ -84,0 +82,0 @@ var theme = isEmpty(props.theme) ? defaultTheme : props.theme;

legacy/createTheme/createTheme.js

@@ -7,2 +7,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import createSpacing from './createSpacing';
+import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
+import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 function createTheme() {
@@ -37,4 +39,11 @@ var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   }, muiTheme);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 export default createTheme;

legacy/cssGrid.js

@@ -6,2 +6,5 @@ import style from './style';
 import responsivePropType from './responsivePropType';
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var gap = function gap(props) {
@@ -23,2 +26,5 @@ if (props.gap !== undefined && props.gap !== null) {
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var columnGap = function columnGap(props) {
@@ -40,2 +46,5 @@ if (props.columnGap !== undefined && props.columnGap !== null) {
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export var rowGap = function rowGap(props) {
@@ -42,0 +51,0 @@ if (props.rowGap !== undefined && props.rowGap !== null) {

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.10.17
+/** @license MUI v5.11.0
  *
@@ -29,4 +29,3 @@ * This source code is licensed under the MIT license found in the
 export * from './typography';
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
-export { default as experimental_sx } from './sx';
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from './styleFunctionSx';
 export { default as unstable_getThemeValue } from './getThemeValue';
@@ -33,0 +32,0 @@ export { default as Box } from './Box';

legacy/palette.js

 import style from './style';
 import compose from './compose';
-function transform(value, userValue) {
+export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
@@ -12,3 +12,3 @@ return userValue;
   themeKey: 'palette',
-  transform: transform
+  transform: paletteTransform
 });
@@ -19,3 +19,3 @@ export var bgcolor = style({
   themeKey: 'palette',
-  transform: transform
+  transform: paletteTransform
 });
@@ -25,5 +25,5 @@ export var backgroundColor = style({
   themeKey: 'palette',
-  transform: transform
+  transform: paletteTransform
 });
 var palette = compose(color, bgcolor, backgroundColor);
 export default palette;

legacy/sizing.js

 import style from './style';
 import compose from './compose';
 import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
-function transform(value) {
+export function sizingTransform(value) {
   return value <= 1 && value !== 0 ? "".concat(value * 100, "%") : value;
@@ -9,3 +9,3 @@ }
   prop: 'width',
-  transform: transform
+  transform: sizingTransform
 });
@@ -18,3 +18,3 @@ export var maxWidth = function maxWidth(props) {
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
@@ -29,15 +29,15 @@ };
   prop: 'minWidth',
-  transform: transform
+  transform: sizingTransform
 });
 export var height = style({
   prop: 'height',
-  transform: transform
+  transform: sizingTransform
 });
 export var maxHeight = style({
   prop: 'maxHeight',
-  transform: transform
+  transform: sizingTransform
 });
 export var minHeight = style({
   prop: 'minHeight',
-  transform: transform
+  transform: sizingTransform
 });
@@ -47,3 +47,3 @@ export var sizeWidth = style({
   cssProperty: 'width',
-  transform: transform
+  transform: sizingTransform
 });
@@ -53,3 +53,3 @@ export var sizeHeight = style({
   cssProperty: 'height',
-  transform: transform
+  transform: sizingTransform
 });
@@ -56,0 +56,0 @@ export var boxSizing = style({

legacy/spacing.js

@@ -48,4 +48,4 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 });
-var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
+export var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+export var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 var spacingKeys = [].concat(marginKeys, paddingKeys);
@@ -52,0 +52,0 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {

legacy/style.js

@@ -38,3 +38,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
@@ -48,3 +48,4 @@ return value;
     themeKey = options.themeKey,
-    transform = options.transform;
+    transform = options.transform; // false positive
+  // eslint-disable-next-line react/function-component-definition
   var fn = function fn(props) {
@@ -51,0 +52,0 @@ if (props[prop] == null) {

legacy/styleFunctionSx/extendSxProp.js

@@ -5,4 +5,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { isPlainObject } from '@mui/utils';
-import { propToStyleFunction } from '../getThemeValue';
+import defaultSxConfig from './defaultSxConfig';
 var splitProps = function splitProps(props) {
+  var _props$theme$unstable, _props$theme;
   var result = {
@@ -12,4 +13,5 @@ systemProps: {},
   };
+  var config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
   Object.keys(props).forEach(function (prop) {
-    if (propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -16,0 +18,0 @@ } else {

legacy/styleFunctionSx/index.js

 export { default } from './styleFunctionSx';
 export { unstable_createStyleFunctionSx } from './styleFunctionSx';
-export { default as extendSxProp } from './extendSxProp';
+export { default as extendSxProp } from './extendSxProp';
+export { default as unstable_defaultSxConfig } from './defaultSxConfig';

legacy/styleFunctionSx/styleFunctionSx.js

 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import merge from '../merge';
-import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
+import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys() {
@@ -24,20 +26,40 @@ for (var _len = arguments.length, objects = new Array(_len), _key = 0; _key < _len; _key++) {
 export function unstable_createStyleFunctionSx() {
-  var styleFunctionMapping = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultStyleFunctionMapping;
-  var propToStyleFunction = Object.keys(styleFunctionMapping).reduce(function (acc, styleFnName) {
-    styleFunctionMapping[styleFnName].filterProps.forEach(function (propName) {
-      acc[propName] = styleFunctionMapping[styleFnName];
-    });
-    return acc;
-  }, {});
-  function getThemeValue(prop, value, theme) {
-    var _inputProps;
-    var inputProps = (_inputProps = {}, _defineProperty(_inputProps, prop, value), _defineProperty(_inputProps, "theme", theme), _inputProps);
-    var styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
+  function getThemeValue(prop, val, theme, config) {
+    var _props;
+    var props = (_props = {}, _defineProperty(_props, prop, val), _defineProperty(_props, "theme", theme), _props);
+    var options = config[prop];
+    if (!options) {
+      return _defineProperty({}, prop, val);
+    }
+    var _options$cssProperty = options.cssProperty,
+      cssProperty = _options$cssProperty === void 0 ? prop : _options$cssProperty,
+      themeKey = options.themeKey,
+      transform = options.transform,
+      style = options.style;
+    if (val == null) {
+      return null;
+    }
+    var themeMapping = getPath(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    var styleFromPropValue = function styleFromPropValue(propValueFinal) {
+      var value = getValue(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);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return _defineProperty({}, cssProperty, value);
+    };
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
-    var _ref2 = props || {},
-      sx = _ref2.sx,
-      _ref2$theme = _ref2.theme,
-      theme = _ref2$theme === void 0 ? {} : _ref2$theme;
+    var _theme$unstable_sxCon;
+    var _ref3 = props || {},
+      sx = _ref3.sx,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? {} : _ref3$theme;
     if (!sx) {
@@ -47,2 +69,4 @@ return null; // Emotion & styled-components will neglect null
 
+    var config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;
+
     /*
@@ -71,4 +95,4 @@ * Receive `sxInput` as object or callback
           if (_typeof(value) === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme));
+            if (config[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
@@ -90,3 +114,3 @@ var breakpointsValues = handleBreakpoints({
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
@@ -93,0 +117,0 @@ }

modern/borders.js

@@ -6,3 +6,3 @@ import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
-function getBorder(value) {
+export function borderTransform(value) {
   if (typeof value !== 'number') {
@@ -16,3 +16,3 @@ return value;
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -22,3 +22,3 @@ export const borderTop = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -28,3 +28,3 @@ export const borderRight = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -34,3 +34,3 @@ export const borderBottom = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -40,3 +40,3 @@ export const borderLeft = style({
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
@@ -63,2 +63,5 @@ export const borderColor = style({
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const borderRadius = props => {
@@ -65,0 +68,0 @@ if (props.borderRadius !== undefined && props.borderRadius !== null) {

modern/breakpoints.js

@@ -53,2 +53,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 function breakpoints(styleFunction) {
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = props => {
@@ -55,0 +57,0 @@ const theme = props.theme || {};

modern/compose.js

@@ -9,2 +9,5 @@ import merge from './merge';
   }, {});
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
@@ -11,0 +14,0 @@ return Object.keys(props).reduce((acc, prop) => {

modern/createBox.js

@@ -7,3 +7,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import styled from '@mui/styled-engine';
-import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
@@ -15,4 +15,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = defaultStyleFunctionSx
+    generateClassName
   } = options;
@@ -19,0 +18,0 @@ const BoxRoot = styled('div', {

modern/createStyled.js

@@ -11,3 +11,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import propsToClassKey from './propsToClassKey';
-import defaultStyleFunctionSx from './styleFunctionSx';
+import styleFunctionSx from './styleFunctionSx';
 function isEmpty(obj) {
@@ -77,4 +77,3 @@ return Object.keys(obj).length === 0;
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = defaultStyleFunctionSx
+    slotShouldForwardProp = shouldForwardProp
   } = input;
@@ -81,0 +80,0 @@ const systemSx = props => {

modern/createTheme/createTheme.js

@@ -8,2 +8,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import createSpacing from './createSpacing';
+import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
+import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 function createTheme(options = {}, ...args) {
@@ -31,4 +33,11 @@ const {
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 export default createTheme;

modern/cssGrid.js

@@ -6,2 +6,5 @@ import style from './style';
 import responsivePropType from './responsivePropType';
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const gap = props => {
@@ -21,2 +24,5 @@ if (props.gap !== undefined && props.gap !== null) {
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const columnGap = props => {
@@ -36,2 +42,5 @@ if (props.columnGap !== undefined && props.columnGap !== null) {
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const rowGap = props => {
@@ -38,0 +47,0 @@ if (props.rowGap !== undefined && props.rowGap !== null) {

modern/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.10.17
+/** @license MUI v5.11.0
  *
@@ -29,4 +29,3 @@ * This source code is licensed under the MIT license found in the
 export * from './typography';
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
-export { default as experimental_sx } from './sx';
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from './styleFunctionSx';
 export { default as unstable_getThemeValue } from './getThemeValue';
@@ -33,0 +32,0 @@ export { default as Box } from './Box';

modern/palette.js

 import style from './style';
 import compose from './compose';
-function transform(value, userValue) {
+export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
@@ -12,3 +12,3 @@ return userValue;
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
@@ -19,3 +19,3 @@ export const bgcolor = style({
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
@@ -25,5 +25,5 @@ export const backgroundColor = style({
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
 const palette = compose(color, bgcolor, backgroundColor);
 export default palette;

modern/sizing.js

 import style from './style';
 import compose from './compose';
 import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
-function transform(value) {
+export function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
@@ -9,3 +9,3 @@ }
   prop: 'width',
-  transform
+  transform: sizingTransform
 });
@@ -17,3 +17,3 @@ export const maxWidth = props => {
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
@@ -28,15 +28,15 @@ };
   prop: 'minWidth',
-  transform
+  transform: sizingTransform
 });
 export const height = style({
   prop: 'height',
-  transform
+  transform: sizingTransform
 });
 export const maxHeight = style({
   prop: 'maxHeight',
-  transform
+  transform: sizingTransform
 });
 export const minHeight = style({
   prop: 'minHeight',
-  transform
+  transform: sizingTransform
 });
@@ -46,3 +46,3 @@ export const sizeWidth = style({
   cssProperty: 'width',
-  transform
+  transform: sizingTransform
 });
@@ -52,3 +52,3 @@ export const sizeHeight = style({
   cssProperty: 'height',
-  transform
+  transform: sizingTransform
 });
@@ -55,0 +55,0 @@ export const boxSizing = style({

modern/spacing.js

@@ -42,4 +42,4 @@ import responsivePropType from './responsivePropType';
 });
-const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
+export const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+export 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];
@@ -46,0 +46,0 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {

modern/style.js

@@ -33,3 +33,3 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
@@ -45,2 +45,5 @@ return value;
   } = options;
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
@@ -47,0 +50,0 @@ if (props[prop] == null) {

modern/styleFunctionSx/extendSxProp.js

@@ -5,3 +5,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { isPlainObject } from '@mui/utils';
-import { propToStyleFunction } from '../getThemeValue';
+import defaultSxConfig from './defaultSxConfig';
 const splitProps = props => {
@@ -12,4 +12,5 @@ const result = {
   };
+  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
   Object.keys(props).forEach(prop => {
-    if (propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -16,0 +17,0 @@ } else {

modern/styleFunctionSx/index.js

 export { default } from './styleFunctionSx';
 export { unstable_createStyleFunctionSx } from './styleFunctionSx';
-export { default as extendSxProp } from './extendSxProp';
+export { default as extendSxProp } from './extendSxProp';
+export { default as unstable_defaultSxConfig } from './defaultSxConfig';

modern/styleFunctionSx/styleFunctionSx.js

@@ -0,4 +1,6 @@
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import merge from '../merge';
-import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
+import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys(...objects) {
@@ -14,18 +16,41 @@ const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultStyleFunctionMapping) {
-  const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => {
-    styleFunctionMapping[styleFnName].filterProps.forEach(propName => {
-      acc[propName] = styleFunctionMapping[styleFnName];
-    });
-    return acc;
-  }, {});
-  function getThemeValue(prop, value, theme) {
-    const inputProps = {
-      [prop]: value,
+export function unstable_createStyleFunctionSx() {
+  function getThemeValue(prop, val, theme, config) {
+    const props = {
+      [prop]: val,
       theme
     };
-    const styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : {
-      [prop]: value
+    const options = config[prop];
+    if (!options) {
+      return {
+        [prop]: val
+      };
+    }
+    const {
+      cssProperty = prop,
+      themeKey,
+      transform,
+      style
+    } = options;
+    if (val == null) {
+      return null;
+    }
+    const themeMapping = getPath(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    const styleFromPropValue = propValueFinal => {
+      let value = getValue(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
     };
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
@@ -41,2 +66,4 @@ function styleFunctionSx(props) {
 
+    const config = theme.unstable_sxConfig ?? defaultSxConfig;
+
     /*
@@ -65,4 +92,4 @@ * Receive `sxInput` as object or callback
           if (typeof value === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme));
+            if (config[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
@@ -84,3 +111,3 @@ const breakpointsValues = handleBreakpoints({
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
@@ -87,0 +114,0 @@ }

package.json

 {
   "name": "@mui/system",
-  "version": "5.10.17",
+  "version": "5.11.0",
   "private": false,
@@ -46,7 +46,7 @@ "author": "MUI Team",
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
-    "@mui/private-theming": "^5.10.16",
-    "@mui/styled-engine": "^5.10.16",
-    "@mui/types": "^7.2.2",
-    "@mui/utils": "^5.10.16",
+    "@babel/runtime": "^7.20.6",
+    "@mui/private-theming": "^5.11.0",
+    "@mui/styled-engine": "^5.11.0",
+    "@mui/types": "^7.2.3",
+    "@mui/utils": "^5.11.0",
     "clsx": "^1.2.1",
@@ -53,0 +53,0 @@ "csstype": "^3.1.1",

palette.js

@@ -8,5 +8,6 @@ "use strict";
 exports.default = exports.color = exports.bgcolor = exports.backgroundColor = void 0;
+exports.paletteTransform = paletteTransform;
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
-function transform(value, userValue) {
+function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
@@ -20,3 +21,3 @@ return userValue;
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
@@ -28,3 +29,3 @@ exports.color = color;
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
@@ -35,3 +36,3 @@ exports.bgcolor = bgcolor;
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
@@ -38,0 +39,0 @@ exports.backgroundColor = backgroundColor;

sizing.js

@@ -7,7 +7,9 @@ "use strict";
 });
-exports.width = exports.sizeWidth = exports.sizeHeight = exports.minWidth = exports.minHeight = exports.maxWidth = exports.maxHeight = exports.height = exports.default = exports.boxSizing = void 0;
+exports.sizeWidth = exports.sizeHeight = exports.minWidth = exports.minHeight = exports.maxWidth = exports.maxHeight = exports.height = exports.default = exports.boxSizing = void 0;
+exports.sizingTransform = sizingTransform;
+exports.width = void 0;
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
 var _breakpoints = require("./breakpoints");
-function transform(value) {
+function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
@@ -17,3 +19,3 @@ }
   prop: 'width',
-  transform
+  transform: sizingTransform
 });
@@ -27,3 +29,3 @@ exports.width = width;
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
@@ -39,3 +41,3 @@ };
   prop: 'minWidth',
-  transform
+  transform: sizingTransform
 });
@@ -45,3 +47,3 @@ exports.minWidth = minWidth;
   prop: 'height',
-  transform
+  transform: sizingTransform
 });
@@ -51,3 +53,3 @@ exports.height = height;
   prop: 'maxHeight',
-  transform
+  transform: sizingTransform
 });
@@ -57,3 +59,3 @@ exports.maxHeight = maxHeight;
   prop: 'minHeight',
-  transform
+  transform: sizingTransform
 });
@@ -64,3 +66,3 @@ exports.minHeight = minHeight;
   cssProperty: 'width',
-  transform
+  transform: sizingTransform
 });
@@ -71,3 +73,3 @@ exports.sizeWidth = sizeWidth;
   cssProperty: 'height',
-  transform
+  transform: sizingTransform
 });
@@ -74,0 +76,0 @@ exports.sizeHeight = sizeHeight;

spacing.js

@@ -13,3 +13,5 @@ "use strict";
 exports.margin = margin;
+exports.marginKeys = void 0;
 exports.padding = padding;
+exports.paddingKeys = void 0;
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
@@ -57,3 +59,5 @@ var _breakpoints = require("./breakpoints");
 const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+exports.marginKeys = marginKeys;
 const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
+exports.paddingKeys = paddingKeys;
 const spacingKeys = [...marginKeys, ...paddingKeys];
@@ -60,0 +64,0 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {

Stack/createStack.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Stack/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Stack';

Stack/Stack.d.ts

@@ -0,0 +0,0 @@ /**

Stack/stackClasses.d.ts

@@ -0,0 +0,0 @@ export interface StackClasses {

Stack/StackProps.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

style.d.ts

 import { CSSObject } from '@mui/styled-engine';
 import { StyleFunction } from './Box';
 
+export type TransformFunction = (
+  cssValue: unknown,
+  userValue: unknown,
+) => number | string | React.CSSProperties | CSSObject;
+
 export interface StyleOptions<PropKey> {
@@ -11,6 +16,3 @@ cssProperty?: PropKey | keyof React.CSSProperties | false;
   themeKey?: string;
-  transform?: (
-    cssValue: unknown,
-    userValue: unknown,
-  ) => number | string | React.CSSProperties | CSSObject;
+  transform?: TransformFunction;
 }
@@ -22,6 +24,6 @@ export function style<PropKey extends string, Theme extends object>(
 export function getStyleValue(
-  themeMapping: object | ((val: any) => any),
-  transform?: (val: any, userVal: any) => any,
-  propValueFinal?: any,
-  userValue?: any,
+  themeMapping: object | ((arg: any) => any),
+  transform: TransformFunction | null,
+  propValueFinal: unknown,
+  userValue?: unknown,
 ): any;

style.js

@@ -42,3 +42,3 @@ "use strict";
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
@@ -54,2 +54,5 @@ return value;
   } = options;
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
@@ -56,0 +59,0 @@ if (props[prop] == null) {

styleFunctionSx/extendSxProp.js

@@ -11,5 +11,6 @@ "use strict";
 var _utils = require("@mui/utils");
-var _getThemeValue = require("../getThemeValue");
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 const _excluded = ["sx"];
 const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
   const result = {
@@ -19,4 +20,5 @@ systemProps: {},
   };
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : _defaultSxConfig.default;
   Object.keys(props).forEach(prop => {
-    if (_getThemeValue.propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -23,0 +25,0 @@ } else {

styleFunctionSx/index.d.ts

@@ -9,2 +9,6 @@ export { default } from './styleFunctionSx';
 export { default as extendSxProp } from './extendSxProp';
+
+export { default as unstable_defaultSxConfig } from './defaultSxConfig';
+export * from './defaultSxConfig';
+
 export * from './extendSxProp';

styleFunctionSx/index.js

@@ -25,5 +25,12 @@ "use strict";
 });
+Object.defineProperty(exports, "unstable_defaultSxConfig", {
+  enumerable: true,
+  get: function () {
+    return _defaultSxConfig.default;
+  }
+});
 var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
 var _extendSxProp = _interopRequireDefault(require("./extendSxProp"));
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

styleFunctionSx/styleFunctionSx.d.ts

 import * as CSS from 'csstype';
+import { CSSObject } from '@mui/styled-engine';
 import { StandardCSSProperties } from './StandardCssProperties';
@@ -77,3 +78,3 @@ import { AliasesCSSProperties } from './AliasesCSSProperties';
 export interface StyleFunctionSx {
-  (props: object): object;
+  (props: object): CSSObject;
   filterProps?: string[];
@@ -80,0 +81,0 @@ }

styleFunctionSx/styleFunctionSx.js

@@ -9,5 +9,7 @@ "use strict";
 exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
+var _utils = require("@mui/utils");
 var _merge = _interopRequireDefault(require("../merge"));
-var _getThemeValue = require("../getThemeValue");
+var _style = require("../style");
 var _breakpoints = require("../breakpoints");
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 function objectsHaveSameKeys(...objects) {
@@ -23,20 +25,44 @@ const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.styleFunctionMapping) {
-  const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => {
-    styleFunctionMapping[styleFnName].filterProps.forEach(propName => {
-      acc[propName] = styleFunctionMapping[styleFnName];
-    });
-    return acc;
-  }, {});
-  function getThemeValue(prop, value, theme) {
-    const inputProps = {
-      [prop]: value,
+function unstable_createStyleFunctionSx() {
+  function getThemeValue(prop, val, theme, config) {
+    const props = {
+      [prop]: val,
       theme
     };
-    const styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : {
-      [prop]: value
+    const options = config[prop];
+    if (!options) {
+      return {
+        [prop]: val
+      };
+    }
+    const {
+      cssProperty = prop,
+      themeKey,
+      transform,
+      style
+    } = options;
+    if (val == null) {
+      return null;
+    }
+    const themeMapping = (0, _style.getPath)(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    const styleFromPropValue = propValueFinal => {
+      let value = (0, _style.getStyleValue)(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _utils.unstable_capitalize)(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
     };
+    return (0, _breakpoints.handleBreakpoints)(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
+    var _theme$unstable_sxCon;
     const {
@@ -50,2 +76,4 @@ sx,
 
+    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : _defaultSxConfig.default;
+
     /*
@@ -74,4 +102,4 @@ * Receive `sxInput` as object or callback
           if (typeof value === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme));
+            if (config[styleKey]) {
+              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
             } else {
@@ -93,3 +121,3 @@ const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
           } else {
-            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme));
+            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
           }
@@ -96,0 +124,0 @@ }

styleFunctionSx/styleFunctionSx.spec.d.ts

 export {};

Unstable_Grid/createGrid.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Unstable_Grid/Grid.d.ts

@@ -0,0 +0,0 @@ /**

Unstable_Grid/gridClasses.d.ts

@@ -0,0 +0,0 @@ export interface GridClasses {

Unstable_Grid/gridGenerator.d.ts

@@ -0,0 +0,0 @@ import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';

Unstable_Grid/GridProps.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Unstable_Grid/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './Grid';

No alert changes

Improved metrics

Total package byte prevSize

1244884

increased by2.46%

Lines of code

18734

increased by7.52%

Worsened metrics

Number of package files

325

decreased by-1.81%

Dependency changes

• Updated@babel/runtime@^7.20.6

• Updated@mui/private-theming@^5.11.0

• Updated@mui/styled-engine@^5.11.0

• Updated@mui/types@^7.2.3

• Updated@mui/utils@^5.11.0