@mui/system 5.15.1 → 5.15.3

package/CHANGELOG.md

@@ -1,5 +1,137 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.15.3
+
+<!-- generated comparing v5.15.2..master -->
+
+_Jan 3, 2024_
+
+A big thanks to the 11 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material-nextjs@5.15.3`
+
+- &#8203;<!-- 06 -->[material-nextjs] Fix order of emotion server (#40409) @siriwatknp
+
+### `@mui/base@5.0.0-beta.30`
+
+- &#8203;<!-- 40 -->[useSlider] Rearrange passive option in eventlisteners (#40235) @Kamino0
+
+### `@mui/lab@5.0.0-alpha.159`
+
+- &#8203;<!-- 14 -->Add use client directive (#40358) @DiegoAndai
+
+### `@mui/material-next@6.0.0-alpha.116`
+
+- &#8203;<!-- 13 -->[List] Copy all List\* components to material-next package (#40367) @sai6855
+- &#8203;<!-- 12 -->Update CONTRIBUTING guide given v6/v7 rescheduling (#40363) @DiegoAndai
+- &#8203;<!-- 11 -->[MenuItem] Fix spec import (#40271) @DiegoAndai
+- &#8203;<!-- 10 -->[Option] Add Option component (#40270) @DiegoAndai
+- &#8203;<!-- 09 -->[Slider] Replace lodash with internal utils (#40261) @DiegoAndai
+- &#8203;<!-- 08 -->[Switch] Change files to TypeScript (#39894) @lhilgert9
+- &#8203;<!-- 07 -->[theme] Move ref palette out of color schemes (#40341) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 41 -->[base-ui] Polish the Table Pagination demos (#40281) @danilo-leal
+- &#8203;<!-- 22 -->[joy-ui] Fix dashboard template console errors (#40316) @oliviertassinari
+- &#8203;<!-- 21 -->[joy-ui] Fix image size on the Files template (#40315) @oliviertassinari
+- &#8203;<!-- 20 -->[material-ui] Revise the Divider page (#40356) @danilo-leal
+- &#8203;<!-- 19 -->[material-ui] Polish the Next.js integration page (#40317) @oliviertassinari
+- &#8203;<!-- 18 -->[material-ui] Adding autoFocus on Virtual Popover (#40239) @aacevski
+- &#8203;<!-- 17 -->[material-ui] Revise the Roadmap page (#40054) @danilo-leal
+- &#8203;<!-- 16 -->[material-ui] Update the "showing and hiding" section on the Tooltip page (#40283) @anle9650
+- &#8203;<!-- 05 -->[material-ui] Fix Slider's customized iOS demo to use updated official colors (#39813) @Super-Kenil
+- &#8203;<!-- 15 -->[examples] Simplify Next.js example (#40318) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 39 -->[blog] Update open-graph cards for all posts (#40328) @danilo-leal
+- &#8203;<!-- 38 -->[blog] Correct git diff @oliviertassinari
+- &#8203;<!-- 37 -->[code-infra] Update lerna and unpin its version (#40399) @michaldudak
+- &#8203;<!-- 36 -->[code-infra] Break package dependency cycle between @mui/material and @mui/icons-material (#40400) @michaldudak
+- &#8203;<!-- 35 -->[code-infra] Break package dependency cycles (#40398) @michaldudak
+- &#8203;<!-- 34 -->[code-infra] Sync bug issue template (#40305) @oliviertassinari
+- &#8203;<!-- 33 -->[docs] Fix 301 link to Base UI (#40396) @oliviertassinari
+- &#8203;<!-- 32 -->[docs] Link new MUI X components in sidnav (#40345) @oliviertassinari
+- &#8203;<!-- 31 -->[docs] Fix 301 links to Toolpad @oliviertassinari
+- &#8203;<!-- 30 -->[docs] Remove old notifications @oliviertassinari
+- &#8203;<!-- 29 -->[docs] Always mention the npm tag with npx (#40335) @oliviertassinari
+- &#8203;<!-- 28 -->[docs] Reduce network use on the All Components pages (#40313) @oliviertassinari
+- &#8203;<!-- 27 -->[docs-infra] Fix missing button aria-label (#40394) @oliviertassinari
+- &#8203;<!-- 26 -->[docs-infra] Fix a11y violation rule (#40393) @oliviertassinari
+- &#8203;<!-- 25 -->[docs-infra] Prefetch pages on hover (#40314) @oliviertassinari
+- &#8203;<!-- 24 -->[docs-infra] Fix footer links to link to the main domain (#40373) @oliviertassinari
+- &#8203;<!-- 23 -->[docs-infra] Add stray design adjustments (#40347) @danilo-leal
+- &#8203;<!-- 04 -->[website] Fix Base UI page's component section imports & styles (#40231) @danilo-leal
+- &#8203;<!-- 03 -->[website] Fix outdated Nhost image link @oliviertassinari
+- &#8203;<!-- 02 -->[website] Shorten Joy UI description, 7 chars too long @oliviertassinari
+- &#8203;<!-- 01 -->[website] Update some social preview images (#40282) @danilo-leal
+
+All contributors of this release in alphabetical order: @aacevski, @anle9650, @danilo-leal, @DiegoAndai, @Kamino0, @lhilgert9, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp, @Super-Kenil
+
+## 5.15.2
+
+<!-- generated comparing v5.15.1..master -->
+
+_Dec 25, 2023_
+
+A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added support for callbacks in the [variant's props definition](https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants) (#40094) @mnajdova
+- 💫 Published a [blogpost](https://mui.com/blog/2023-material-ui-v6-and-beyond/) for the 2024's plan about Material UI
+
+### `@mui/material@5.15.2`
+
+- &#8203;<!-- 31 -->[Badge] Use the variants API in the styled call (#40213) @mnajdova
+- &#8203;<!-- 04 -->[Paper] Add missing Paper classes descriptions (#40300) @sai6855
+
+### `@mui/system@5.15.2`
+
+- &#8203;<!-- 03 -->Support props callback in the variant's definition (#40094) @mnajdova
+
+### `@mui/base@5.0.0-beta.29`
+
+- &#8203;<!-- 29 -->[Popup] Use context-based transition API (#39326) @michaldudak
+- &#8203;<!-- 28 -->[Popup] Popup no longer opens outside viewport (#39827) @adamhylander
+- &#8203;<!-- 27 -->[useSelect] Refactor to use DOM focus management instead of active descendant (#39675) @DiegoAndai
+
+### `@mui/material-next@6.0.0-alpha.115`
+
+- &#8203;<!-- 15 -->[material-next][Divider]Divider ts support (#40307) @sai6855
+
+### Docs
+
+- &#8203;<!-- 30 -->[base-ui] Fix form submission Select demo (#40014) @ZeeshanTamboli
+- &#8203;<!-- 24 -->[blog] Add Material UI v6 and beyond blog post (#40242) @mnajdova
+- &#8203;<!-- 10 -->[material-ui] Fix broken links in the All components page (#40303) @muazaqdas
+- &#8203;<!-- 09 -->[material-ui] Fix broken links on the All components page (#40279) @danilo-leal
+- &#8203;<!-- 08 -->[material-ui] Add aria-current for nav tabs demo (#39594) @Kimzify
+- &#8203;<!-- 07 -->[material-ui] Add an "All components" page (#40256) @danilo-leal
+- &#8203;<!-- 06 -->[material-ui][Tooltip] Add demo to show how to change distance between tooltip and its anchor (#40087) @anle9650
+
+### Core
+
+- &#8203;<!-- 26 -->[blog] Fix 301 redirection @oliviertassinari
+- &#8203;<!-- 25 -->[blog] Reduce max image size @oliviertassinari
+- &#8203;<!-- 23 -->[code-infra] Extract Babel macro from mui-utils (#40262) @michaldudak
+- &#8203;<!-- 22 -->[core] Simplify a bit the release instructions @oliviertassinari
+- &#8203;<!-- 21 -->[core] Push force to deploy is not unexpected @oliviertassinari
+- &#8203;<!-- 20 -->[core] Fix CSS2 vs. CSS3 ::after syntax @oliviertassinari
+- &#8203;<!-- 19 -->[core] Fix CSS2 vs. CSS3 ::before syntax @oliviertassinari
+- &#8203;<!-- 05 -->[core] Use direct import from utils package (#40254) @siriwatknp
+- &#8203;<!-- 18 -->[core] Yaml format match most common convention @oliviertassinari
+- &#8203;<!-- 17 -->[core] Polish docs-feedback issue template @oliviertassinari
+- &#8203;<!-- 16 -->[core] Pin Node version on GitHub Actions to 18.18 (#40187) @michaldudak
+- &#8203;<!-- 14 -->[docs] Fix SEO regression (#40306) @oliviertassinari
+- &#8203;<!-- 13 -->[docs] Fix docs redirections @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Update the Contributing guide to give more guidance on documentation (#40274) @samuelsycamore
+- &#8203;<!-- 11 -->[docs-infra] Add polish to the inline code block (#40260) @danilo-leal
+- &#8203;<!-- 02 -->[website] Update Gold sponsors: add RxDB, standardize formatting (#40273) @samuelsycamore
+- &#8203;<!-- 01 -->[website] Revert change to homepage SEO attributes @oliviertassinari
+
+All contributors of this release in alphabetical order: @adamhylander, @anle9650, @danilo-leal, @DiegoAndai, @Kimzify, @michaldudak, @mnajdova, @muazaqdas, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 5.15.1
 
 <!-- generated comparing v5.15.0..master -->
@@ -1307,7 +1439,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
   A codemod is provided to help with the migration:
 
   ```bash
-  npx @mui/codemod v5.0.0/base-use-named-exports <path>
+  npx @mui/codemod@latest v5.0.0/base-use-named-exports <path>
   ```
 
 #### Changes
@@ -2189,7 +2321,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
   There is codemod that you can run in your project to do the transformation:
 
   ```bash
-  npx @mui/codemod v5.0.0/base-remove-component-prop <path>
+  npx @mui/codemod@latest v5.0.0/base-remove-component-prop <path>
   ```
 
   The full documentation about the codemod can be found [here](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#base-remove-component-prop).
@@ -2288,7 +2420,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som
   You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js) to help with the migration:
 
   ```bash
-  npx @mui/codemod v5.0.0/base-remove-unstyled-suffix <path>
+  npx @mui/codemod@latest v5.0.0/base-remove-unstyled-suffix <path>
   ```
 
 #### Changes

package/README.md

@@ -1,6 +1,6 @@
 # MUI System
 
-MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.
+MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.
 
 ## Installation
 

package/colorManipulator.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -20,7 +21,7 @@ exports.private_safeEmphasize = private_safeEmphasize;
 exports.private_safeLighten = private_safeLighten;
 exports.recomposeColor = recomposeColor;
 exports.rgbToHex = rgbToHex;
-var _utils = require("@mui/utils");
+var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /**
@@ -79,7 +80,7 @@ function decomposeColor(color) {
   const type = color.substring(0, marker);
   if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
-The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : (0, _utils.formatMuiErrorMessage)(9, color));
+The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : (0, _formatMuiErrorMessage2.default)(9, color));
   }
   let values = color.substring(marker + 1, color.length - 1);
   let colorSpace;
@@ -91,7 +92,7 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
     }
     if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
-The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : (0, _utils.formatMuiErrorMessage)(10, colorSpace));
+The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : (0, _formatMuiErrorMessage2.default)(10, colorSpace));
     }
   } else {
     values = values.split(',');

package/createStyled.js

@@ -37,10 +37,17 @@ const getStyleOverrides = (name, theme) => {
   return null;
 };
 const transformVariants = variants => {
+  let numOfCallbacks = 0;
   const variantsStyles = {};
   if (variants) {
     variants.forEach(definition => {
-      const key = (0, _propsToClassKey.default)(definition.props);
+      let key = '';
+      if (typeof definition.props === 'function') {
+        key = `callback${numOfCallbacks}`;
+        numOfCallbacks += 1;
+      } else {
+        key = (0, _propsToClassKey.default)(definition.props);
+      }
       variantsStyles[key] = definition.style;
     });
   }
@@ -58,16 +65,29 @@ const variantsResolver = (props, styles, variants) => {
     ownerState = {}
   } = props;
   const variantsStyles = [];
+  let numOfCallbacks = 0;
   if (variants) {
     variants.forEach(variant => {
       let isMatch = true;
-      Object.keys(variant.props).forEach(key => {
-        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-          isMatch = false;
-        }
-      });
+      if (typeof variant.props === 'function') {
+        const propsToCheck = (0, _extends2.default)({}, props, ownerState);
+        isMatch = variant.props(propsToCheck);
+      } else {
+        Object.keys(variant.props).forEach(key => {
+          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
+            isMatch = false;
+          }
+        });
+      }
       if (isMatch) {
-        variantsStyles.push(styles[(0, _propsToClassKey.default)(variant.props)]);
+        if (typeof variant.props === 'function') {
+          variantsStyles.push(styles[`callback${numOfCallbacks}`]);
+        } else {
+          variantsStyles.push(styles[(0, _propsToClassKey.default)(variant.props)]);
+        }
+      }
+      if (typeof variant.props === 'function') {
+        numOfCallbacks += 1;
       }
     });
   }

package/createTheme/index.js

@@ -10,4 +10,11 @@ Object.defineProperty(exports, "default", {
     return _createTheme.default;
   }
 });
-var _createTheme = _interopRequireDefault(require("./createTheme"));
+Object.defineProperty(exports, "private_createBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _createBreakpoints.default;
+  }
+});
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));

package/cssVars/createCssVarsProvider.js

@@ -8,9 +8,10 @@ exports.DISABLE_CSS_TRANSITION = void 0;
 exports.default = createCssVarsProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _utils = require("@mui/utils");
+var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
 var _styledEngine = require("@mui/styled-engine");
 var _privateTheming = require("@mui/private-theming");
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
@@ -47,7 +48,7 @@ function createCssVarsProvider(options) {
   const useColorScheme = () => {
     const value = React.useContext(ColorSchemeContext);
     if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : (0, _utils.formatMuiErrorMessage)(19));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : (0, _formatMuiErrorMessage2.default)(19));
     }
     return value;
   };

package/esm/colorManipulator.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /* eslint-disable @typescript-eslint/naming-convention */
 /**
  * Returns a number whose value is limited to the given range.

package/esm/createStyled.js

@@ -26,10 +26,17 @@ const getStyleOverrides = (name, theme) => {
   return null;
 };
 const transformVariants = variants => {
+  let numOfCallbacks = 0;
   const variantsStyles = {};
   if (variants) {
     variants.forEach(definition => {
-      const key = propsToClassKey(definition.props);
+      let key = '';
+      if (typeof definition.props === 'function') {
+        key = `callback${numOfCallbacks}`;
+        numOfCallbacks += 1;
+      } else {
+        key = propsToClassKey(definition.props);
+      }
       variantsStyles[key] = definition.style;
     });
   }
@@ -47,16 +54,29 @@ const variantsResolver = (props, styles, variants) => {
     ownerState = {}
   } = props;
   const variantsStyles = [];
+  let numOfCallbacks = 0;
   if (variants) {
     variants.forEach(variant => {
       let isMatch = true;
-      Object.keys(variant.props).forEach(key => {
-        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-          isMatch = false;
-        }
-      });
+      if (typeof variant.props === 'function') {
+        const propsToCheck = _extends({}, props, ownerState);
+        isMatch = variant.props(propsToCheck);
+      } else {
+        Object.keys(variant.props).forEach(key => {
+          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
+            isMatch = false;
+          }
+        });
+      }
       if (isMatch) {
-        variantsStyles.push(styles[propsToClassKey(variant.props)]);
+        if (typeof variant.props === 'function') {
+          variantsStyles.push(styles[`callback${numOfCallbacks}`]);
+        } else {
+          variantsStyles.push(styles[propsToClassKey(variant.props)]);
+        }
+      }
+      if (typeof variant.props === 'function') {
+        numOfCallbacks += 1;
       }
     });
   }

package/esm/createTheme/index.js

@@ -1 +1,2 @@
-export { default } from './createTheme';
+export { default } from './createTheme';
+export { default as private_createBreakpoints } from './createBreakpoints';

package/esm/cssVars/createCssVarsProvider.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/esm/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
 export { default as GlobalStyles } from './GlobalStyles';
 export { default as borders } from './borders';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.1
+ * @mui/system v5.15.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -366,7 +366,7 @@ Object.defineProperty(exports, "useThemeWithoutDefault", {
     return _useThemeWithoutDefault.default;
   }
 });
-var _utils = require("@mui/utils");
+var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var _styledEngine = require("@mui/styled-engine");
 var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
 var _borders = _interopRequireWildcard(require("./borders"));
@@ -557,7 +557,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // TODO: Remove this function in v6
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _utils.formatMuiErrorMessage)(20));
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _formatMuiErrorMessage2.default)(20));
 }
 
 /** ----------------- */

package/legacy/colorManipulator.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /* eslint-disable @typescript-eslint/naming-convention */
 /**
  * Returns a number whose value is limited to the given range.

package/legacy/createStyled.js

@@ -27,10 +27,17 @@ var getStyleOverrides = function getStyleOverrides(name, theme) {
   return null;
 };
 var transformVariants = function transformVariants(variants) {
+  var numOfCallbacks = 0;
   var variantsStyles = {};
   if (variants) {
     variants.forEach(function (definition) {
-      var key = propsToClassKey(definition.props);
+      var key = '';
+      if (typeof definition.props === 'function') {
+        key = "callback".concat(numOfCallbacks);
+        numOfCallbacks += 1;
+      } else {
+        key = propsToClassKey(definition.props);
+      }
       variantsStyles[key] = definition.style;
     });
   }
@@ -47,16 +54,29 @@ var variantsResolver = function variantsResolver(props, styles, variants) {
   var _props$ownerState = props.ownerState,
     ownerState = _props$ownerState === void 0 ? {} : _props$ownerState;
   var variantsStyles = [];
+  var numOfCallbacks = 0;
   if (variants) {
     variants.forEach(function (variant) {
       var isMatch = true;
-      Object.keys(variant.props).forEach(function (key) {
-        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-          isMatch = false;
-        }
-      });
+      if (typeof variant.props === 'function') {
+        var propsToCheck = _extends({}, props, ownerState);
+        isMatch = variant.props(propsToCheck);
+      } else {
+        Object.keys(variant.props).forEach(function (key) {
+          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
+            isMatch = false;
+          }
+        });
+      }
       if (isMatch) {
-        variantsStyles.push(styles[propsToClassKey(variant.props)]);
+        if (typeof variant.props === 'function') {
+          variantsStyles.push(styles["callback".concat(numOfCallbacks)]);
+        } else {
+          variantsStyles.push(styles[propsToClassKey(variant.props)]);
+        }
+      }
+      if (typeof variant.props === 'function') {
+        numOfCallbacks += 1;
       }
     });
   }

package/legacy/createTheme/index.js

@@ -1 +1,2 @@
-export { default } from './createTheme';
+export { default } from './createTheme';
+export { default as private_createBreakpoints } from './createBreakpoints';

package/legacy/cssVars/createCssVarsProvider.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.1
+ * @mui/system v5.15.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7,7 +7,7 @@
  */
 'use client';
 
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
 export { default as GlobalStyles } from './GlobalStyles';
 export { default as borders } from './borders';

package/modern/colorManipulator.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /* eslint-disable @typescript-eslint/naming-convention */
 /**
  * Returns a number whose value is limited to the given range.

package/modern/createStyled.js

@@ -26,10 +26,17 @@ const getStyleOverrides = (name, theme) => {
   return null;
 };
 const transformVariants = variants => {
+  let numOfCallbacks = 0;
   const variantsStyles = {};
   if (variants) {
     variants.forEach(definition => {
-      const key = propsToClassKey(definition.props);
+      let key = '';
+      if (typeof definition.props === 'function') {
+        key = `callback${numOfCallbacks}`;
+        numOfCallbacks += 1;
+      } else {
+        key = propsToClassKey(definition.props);
+      }
       variantsStyles[key] = definition.style;
     });
   }
@@ -47,16 +54,29 @@ const variantsResolver = (props, styles, variants) => {
     ownerState = {}
   } = props;
   const variantsStyles = [];
+  let numOfCallbacks = 0;
   if (variants) {
     variants.forEach(variant => {
       let isMatch = true;
-      Object.keys(variant.props).forEach(key => {
-        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-          isMatch = false;
-        }
-      });
+      if (typeof variant.props === 'function') {
+        const propsToCheck = _extends({}, props, ownerState);
+        isMatch = variant.props(propsToCheck);
+      } else {
+        Object.keys(variant.props).forEach(key => {
+          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
+            isMatch = false;
+          }
+        });
+      }
       if (isMatch) {
-        variantsStyles.push(styles[propsToClassKey(variant.props)]);
+        if (typeof variant.props === 'function') {
+          variantsStyles.push(styles[`callback${numOfCallbacks}`]);
+        } else {
+          variantsStyles.push(styles[propsToClassKey(variant.props)]);
+        }
+      }
+      if (typeof variant.props === 'function') {
+        numOfCallbacks += 1;
       }
     });
   }

package/modern/createTheme/index.js

@@ -1 +1,2 @@
-export { default } from './createTheme';
+export { default } from './createTheme';
+export { default as private_createBreakpoints } from './createBreakpoints';

package/modern/cssVars/createCssVarsProvider.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.1
+ * @mui/system v5.15.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7,7 +7,7 @@
  */
 'use client';
 
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
 export { default as GlobalStyles } from './GlobalStyles';
 export { default as borders } from './borders';

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@mui/system",
-  "version": "5.15.1",
+  "version": "5.15.3",
   "private": false,
   "author": "MUI Team",
-  "description": "CSS utilities for rapidly laying out custom designs.",
+  "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
   "main": "./index.js",
   "keywords": [
     "react",
@@ -26,11 +26,11 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.5",
-    "@mui/private-theming": "^5.15.1",
-    "@mui/styled-engine": "^5.15.1",
-    "@mui/types": "^7.2.11",
-    "@mui/utils": "^5.15.1",
+    "@babel/runtime": "^7.23.6",
+    "@mui/private-theming": "^5.15.3",
+    "@mui/styled-engine": "^5.15.3",
+    "@mui/types": "^7.2.12",
+    "@mui/utils": "^5.15.3",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"