@mui/system 5.10.13 → 5.10.14

package/legacy/borders.js

@@ -3,15 +3,12 @@ import style from './style';
 import compose from './compose';
 import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
-
 function getBorder(value) {
   if (typeof value !== 'number') {
     return value;
   }
-
   return "".concat(value, "px solid");
 }
-
 export var border = style({
   prop: 'border',
   themeKey: 'borders',
@@ -60,16 +57,13 @@ export var borderLeftColor = style({
 export var borderRadius = function borderRadius(props) {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     var transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
-
     var styleFromPropValue = function styleFromPropValue(propValue) {
       return {
         borderRadius: getValue(transformer, propValue)
       };
     };
-
     return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
   }
-
   return null;
 };
 borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {

package/legacy/breakpoints.js

@@ -3,9 +3,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
-import merge from './merge'; // The breakpoint **start** at this value.
-// For instance with the first breakpoint xs: [xs, sm[.
+import merge from './merge';
 
+// The breakpoint **start** at this value.
+// For instance with the first breakpoint xs: [xs, sm[.
 export var values = {
   xs: 0,
   // phone
@@ -16,8 +17,8 @@ export var values = {
   lg: 1200,
   // desktop
   xl: 1536 // large screen
-
 };
+
 var defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
@@ -28,7 +29,6 @@ var defaultBreakpoints = {
 };
 export function handleBreakpoints(props, propValue, styleFromPropValue) {
   var theme = props.theme || {};
-
   if (Array.isArray(propValue)) {
     var themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return propValue.reduce(function (acc, item, index) {
@@ -36,29 +36,23 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
       return acc;
     }, {});
   }
-
   if (_typeof(propValue) === 'object') {
     var _themeBreakpoints = theme.breakpoints || defaultBreakpoints;
-
     return Object.keys(propValue).reduce(function (acc, breakpoint) {
       // key is breakpoint
       if (Object.keys(_themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
         var mediaKey = _themeBreakpoints.up(breakpoint);
-
         acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
       } else {
         var cssKey = breakpoint;
         acc[cssKey] = propValue[cssKey];
       }
-
       return acc;
     }, {});
   }
-
   var output = styleFromPropValue(propValue);
   return output;
 }
-
 function breakpoints(styleFunction) {
   var newStyleFunction = function newStyleFunction(props) {
     var theme = props.theme || {};
@@ -71,12 +65,10 @@ function breakpoints(styleFunction) {
           theme: theme
         }, props[key]));
       }
-
       return acc;
     }, null);
     return merge(base, extended);
   };
-
   newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
     xs: PropTypes.object,
     sm: PropTypes.object,
@@ -87,10 +79,8 @@ function breakpoints(styleFunction) {
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl'].concat(_toConsumableArray(styleFunction.filterProps));
   return newStyleFunction;
 }
-
 export function createEmptyBreakpointObject() {
   var _breakpointsInput$key;
-
   var breakpointsInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce(function (acc, key) {
     var breakpointStyleKey = breakpointsInput.up(key);
@@ -103,38 +93,33 @@ export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce(function (acc, key) {
     var breakpointOutput = acc[key];
     var isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
-
     if (isBreakpointUnused) {
       delete acc[key];
     }
-
     return acc;
   }, style);
 }
 export function mergeBreakpointsInOrder(breakpointsInput) {
   var emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
-
   for (var _len = arguments.length, styles = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     styles[_key - 1] = arguments[_key];
   }
-
   var mergedOutput = [emptyBreakpoints].concat(styles).reduce(function (prev, next) {
     return deepmerge(prev, next);
   }, {});
   return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
-} // compute base for responsive values; e.g.,
+}
+
+// compute base for responsive values; e.g.,
 // [1,2,3] => {xs: true, sm: true, md: true}
 // {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
-
 export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
   // fixed value
   if (_typeof(breakpointValues) !== 'object') {
     return {};
   }
-
   var base = {};
   var breakpointsKeys = Object.keys(themeBreakpoints);
-
   if (Array.isArray(breakpointValues)) {
     breakpointsKeys.forEach(function (breakpoint, i) {
       if (i < breakpointValues.length) {
@@ -148,20 +133,17 @@ export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
       }
     });
   }
-
   return base;
 }
 export function resolveBreakpointValues(_ref) {
   var breakpointValues = _ref.values,
-      themeBreakpoints = _ref.breakpoints,
-      customBase = _ref.base;
+    themeBreakpoints = _ref.breakpoints,
+    customBase = _ref.base;
   var base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
   var keys = Object.keys(base);
-
   if (keys.length === 0) {
     return breakpointValues;
   }
-
   var previous;
   return keys.reduce(function (acc, breakpoint, i) {
     if (Array.isArray(breakpointValues)) {
@@ -173,7 +155,6 @@ export function resolveBreakpointValues(_ref) {
     } else {
       acc[breakpoint] = breakpointValues;
     }
-
     return acc;
   }, {});
 }

package/legacy/colorManipulator.js

@@ -1,5 +1,4 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-
 /**
  * Returns a number whose value is limited to the given range.
  * @param {number} value The value to be clamped
@@ -10,42 +9,37 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 function clamp(value) {
   var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-
   if (process.env.NODE_ENV !== 'production') {
     if (value < min || value > max) {
       console.error("MUI: The value provided ".concat(value, " is out of range [").concat(min, ", ").concat(max, "]."));
     }
   }
-
   return Math.min(Math.max(min, value), max);
 }
+
 /**
  * Converts a color from CSS hex format to CSS rgb format.
  * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
  * @returns {string} A CSS rgb color string
  */
-
-
 export function hexToRgb(color) {
   color = color.slice(1);
   var re = new RegExp(".{1,".concat(color.length >= 6 ? 2 : 1, "}"), 'g');
   var colors = color.match(re);
-
   if (colors && colors[0].length === 1) {
     colors = colors.map(function (n) {
       return n + n;
     });
   }
-
   return colors ? "rgb".concat(colors.length === 4 ? 'a' : '', "(").concat(colors.map(function (n, index) {
     return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
   }).join(', '), ")") : '';
 }
-
 function intToHex(int) {
   var hex = int.toString(16);
   return hex.length === 1 ? "0".concat(hex) : hex;
 }
+
 /**
  * Returns an object with the type and values of a color.
  *
@@ -53,43 +47,33 @@ function intToHex(int) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {object} - A MUI color object: {type: string, values: number[]}
  */
-
-
 export function decomposeColor(color) {
   // Idempotent
   if (color.type) {
     return color;
   }
-
   if (color.charAt(0) === '#') {
     return decomposeColor(hexToRgb(color));
   }
-
   var marker = color.indexOf('(');
   var type = color.substring(0, marker);
-
   if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
     throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Unsupported `".concat(color, "` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") : _formatMuiErrorMessage(9, color));
   }
-
   var values = color.substring(marker + 1, color.length - 1);
   var colorSpace;
-
   if (type === 'color') {
     values = values.split(' ');
     colorSpace = values.shift();
-
     if (values.length === 4 && values[3].charAt(0) === '/') {
       values[3] = values[3].slice(1);
     }
-
     if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
       throw new Error(process.env.NODE_ENV !== "production" ? "MUI: unsupported `".concat(colorSpace, "` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.") : _formatMuiErrorMessage(10, colorSpace));
     }
   } else {
     values = values.split(',');
   }
-
   values = values.map(function (value) {
     return parseFloat(value);
   });
@@ -99,19 +83,20 @@ export function decomposeColor(color) {
     colorSpace: colorSpace
   };
 }
+
 /**
  * Returns a channel created from the input color.
  *
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
  */
-
 export var colorChannel = function colorChannel(color) {
   var decomposedColor = decomposeColor(color);
   return decomposedColor.values.slice(0, 3).map(function (val, idx) {
     return decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? "".concat(val, "%") : val;
   }).join(' ');
 };
+
 /**
  * Converts a color object with type and values to a string.
  * @param {object} color - Decomposed color
@@ -119,12 +104,10 @@ export var colorChannel = function colorChannel(color) {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
-
 export function recomposeColor(color) {
   var type = color.type,
-      colorSpace = color.colorSpace;
+    colorSpace = color.colorSpace;
   var values = color.values;
-
   if (type.indexOf('rgb') !== -1) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map(function (n, i) {
@@ -134,62 +117,54 @@ export function recomposeColor(color) {
     values[1] = "".concat(values[1], "%");
     values[2] = "".concat(values[2], "%");
   }
-
   if (type.indexOf('color') !== -1) {
     values = "".concat(colorSpace, " ").concat(values.join(' '));
   } else {
     values = "".concat(values.join(', '));
   }
-
   return "".concat(type, "(").concat(values, ")");
 }
+
 /**
  * Converts a color from CSS rgb format to CSS hex format.
  * @param {string} color - RGB color, i.e. rgb(n, n, n)
  * @returns {string} A CSS rgb color string, i.e. #nnnnnn
  */
-
 export function rgbToHex(color) {
   // Idempotent
   if (color.indexOf('#') === 0) {
     return color;
   }
-
   var _decomposeColor = decomposeColor(color),
-      values = _decomposeColor.values;
-
+    values = _decomposeColor.values;
   return "#".concat(values.map(function (n, i) {
     return intToHex(i === 3 ? Math.round(255 * n) : n);
   }).join(''));
 }
+
 /**
  * Converts a color from hsl format to rgb format.
  * @param {string} color - HSL color values
  * @returns {string} rgb color values
  */
-
 export function hslToRgb(color) {
   color = decomposeColor(color);
   var _color = color,
-      values = _color.values;
+    values = _color.values;
   var h = values[0];
   var s = values[1] / 100;
   var l = values[2] / 100;
   var a = s * Math.min(l, 1 - l);
-
   var f = function f(n) {
     var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
     return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
   };
-
   var type = 'rgb';
   var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-
   if (color.type === 'hsla') {
     type += 'a';
     rgb.push(values[3]);
   }
-
   return recomposeColor({
     type: type,
     values: rgb
@@ -203,7 +178,6 @@ export function hslToRgb(color) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {number} The relative brightness of the color in the range 0 - 1
  */
-
 export function getLuminance(color) {
   color = decomposeColor(color);
   var rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
@@ -213,10 +187,12 @@ export function getLuminance(color) {
     }
 
     return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-  }); // Truncate at 3 digits
+  });
 
+  // Truncate at 3 digits
   return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
 }
+
 /**
  * Calculates the contrast ratio between two colors.
  *
@@ -225,12 +201,12 @@ export function getLuminance(color) {
  * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} A contrast ratio value in the range 0 - 21.
  */
-
 export function getContrastRatio(foreground, background) {
   var lumA = getLuminance(foreground);
   var lumB = getLuminance(background);
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 }
+
 /**
  * Sets the absolute transparency of a color.
  * Any existing alpha values are overwritten.
@@ -238,34 +214,29 @@ export function getContrastRatio(foreground, background) {
  * @param {number} value - value to set the alpha channel to in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 export function alpha(color, value) {
   color = decomposeColor(color);
   value = clamp(value);
-
   if (color.type === 'rgb' || color.type === 'hsl') {
     color.type += 'a';
   }
-
   if (color.type === 'color') {
     color.values[3] = "/".concat(value);
   } else {
     color.values[3] = value;
   }
-
   return recomposeColor(color);
 }
+
 /**
  * Darkens a color.
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 export function darken(color, coefficient) {
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
-
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] *= 1 - coefficient;
   } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
@@ -273,20 +244,18 @@ export function darken(color, coefficient) {
       color.values[i] *= 1 - coefficient;
     }
   }
-
   return recomposeColor(color);
 }
+
 /**
  * Lightens a color.
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 export function lighten(color, coefficient) {
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
-
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] += (100 - color.values[2]) * coefficient;
   } else if (color.type.indexOf('rgb') !== -1) {
@@ -298,9 +267,9 @@ export function lighten(color, coefficient) {
       color.values[_i] += (1 - color.values[_i]) * coefficient;
     }
   }
-
   return recomposeColor(color);
 }
+
 /**
  * Darken or lighten a color, depending on its luminance.
  * Light colors are darkened, dark colors are lightened.
@@ -308,7 +277,6 @@ export function lighten(color, coefficient) {
  * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 export function emphasize(color) {
   var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);

package/legacy/compose.js

@@ -1,28 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import merge from './merge';
-
 function compose() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
   }
-
   var handlers = styles.reduce(function (acc, style) {
     style.filterProps.forEach(function (prop) {
       acc[prop] = style;
     });
     return acc;
   }, {});
-
   var fn = function fn(props) {
     return Object.keys(props).reduce(function (acc, prop) {
       if (handlers[prop]) {
         return merge(acc, handlers[prop](props));
       }
-
       return acc;
     }, {});
   };
-
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce(function (acc, style) {
     return _extends(acc, style.propTypes);
   }, {}) : {};
@@ -31,5 +26,4 @@ function compose() {
   }, []);
   return fn;
 }
-
 export default compose;

package/legacy/createBox.js

@@ -9,11 +9,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var defaultTheme = options.defaultTheme,
-      _options$defaultClass = options.defaultClassName,
-      defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
-      generateClassName = options.generateClassName,
-      _options$styleFunctio = options.styleFunctionSx,
-      styleFunctionSx = _options$styleFunctio === void 0 ? defaultStyleFunctionSx : _options$styleFunctio;
+    _options$defaultClass = options.defaultClassName,
+    defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
+    generateClassName = options.generateClassName,
+    _options$styleFunctio = options.styleFunctionSx,
+    styleFunctionSx = _options$styleFunctio === void 0 ? defaultStyleFunctionSx : _options$styleFunctio;
   var BoxRoot = styled('div', {
     shouldForwardProp: function shouldForwardProp(prop) {
       return prop !== 'theme' && prop !== 'sx' && prop !== 'as';
@@ -21,13 +21,11 @@ export default function createBox() {
   })(styleFunctionSx);
   var Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     var theme = useTheme(defaultTheme);
-
     var _extendSxProp = extendSxProp(inProps),
-        className = _extendSxProp.className,
-        _extendSxProp$compone = _extendSxProp.component,
-        component = _extendSxProp$compone === void 0 ? 'div' : _extendSxProp$compone,
-        other = _objectWithoutProperties(_extendSxProp, ["className", "component"]);
-
+      className = _extendSxProp.className,
+      _extendSxProp$compone = _extendSxProp.component,
+      component = _extendSxProp$compone === void 0 ? 'div' : _extendSxProp$compone,
+      other = _objectWithoutProperties(_extendSxProp, ["className", "component"]);
     return /*#__PURE__*/_jsx(BoxRoot, _extends({
       as: component,
       ref: ref,