@mui/system 5.10.13 → 5.10.15

package/legacy/createStyled.js

@@ -2,41 +2,35 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
 import defaultStyleFunctionSx from './styleFunctionSx';
-
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
-} // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-
+}
 
+// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
 function isStringTag(tag) {
-  return typeof tag === 'string' && // 96 is one less than the char code
+  return typeof tag === 'string' &&
+  // 96 is one less than the char code
   // for "a" so this is checking that
   // it's a lowercase character
   tag.charCodeAt(0) > 96;
 }
-
 var getStyleOverrides = function getStyleOverrides(name, theme) {
   if (theme.components && theme.components[name] && theme.components[name].styleOverrides) {
     return theme.components[name].styleOverrides;
   }
-
   return null;
 };
-
 var getVariantStyles = function getVariantStyles(name, theme) {
   var variants = [];
-
   if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
     variants = theme.components[name].variants;
   }
-
   var variantsStyles = {};
   variants.forEach(function (definition) {
     var key = propsToClassKey(definition.props);
@@ -44,15 +38,12 @@ var getVariantStyles = function getVariantStyles(name, theme) {
   });
   return variantsStyles;
 };
-
 var variantsResolver = function variantsResolver(props, styles, theme, name) {
   var _theme$components, _theme$components$nam;
-
   var _props$ownerState = props.ownerState,
-      ownerState = _props$ownerState === void 0 ? {} : _props$ownerState;
+    ownerState = _props$ownerState === void 0 ? {} : _props$ownerState;
   var variantsStyles = [];
   var themeVariants = theme == null ? void 0 : (_theme$components = theme.components) == null ? void 0 : (_theme$components$nam = _theme$components[name]) == null ? void 0 : _theme$components$nam.variants;
-
   if (themeVariants) {
     themeVariants.forEach(function (themeVariant) {
       var isMatch = true;
@@ -61,44 +52,38 @@ var variantsResolver = function variantsResolver(props, styles, theme, name) {
           isMatch = false;
         }
       });
-
       if (isMatch) {
         variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
       }
     });
   }
-
   return variantsStyles;
-}; // Update /system/styled/#api in case if this changes
-
+};
 
+// Update /system/styled/#api in case if this changes
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
 export var systemDefaultTheme = createTheme();
-
 var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
   return string.charAt(0).toLowerCase() + string.slice(1);
 };
-
 export default function createStyled() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _input$defaultTheme = input.defaultTheme,
-      defaultTheme = _input$defaultTheme === void 0 ? systemDefaultTheme : _input$defaultTheme,
-      _input$rootShouldForw = input.rootShouldForwardProp,
-      rootShouldForwardProp = _input$rootShouldForw === void 0 ? shouldForwardProp : _input$rootShouldForw,
-      _input$slotShouldForw = input.slotShouldForwardProp,
-      slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw,
-      _input$styleFunctionS = input.styleFunctionSx,
-      styleFunctionSx = _input$styleFunctionS === void 0 ? defaultStyleFunctionSx : _input$styleFunctionS;
-
+    defaultTheme = _input$defaultTheme === void 0 ? systemDefaultTheme : _input$defaultTheme,
+    _input$rootShouldForw = input.rootShouldForwardProp,
+    rootShouldForwardProp = _input$rootShouldForw === void 0 ? shouldForwardProp : _input$rootShouldForw,
+    _input$slotShouldForw = input.slotShouldForwardProp,
+    slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw,
+    _input$styleFunctionS = input.styleFunctionSx,
+    styleFunctionSx = _input$styleFunctionS === void 0 ? defaultStyleFunctionSx : _input$styleFunctionS;
   var systemSx = function systemSx(props) {
     var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
     return styleFunctionSx(_extends({}, props, {
       theme: theme
     }));
   };
-
   systemSx.__mui_systemSx = true;
   return function (tag) {
     var inputOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -108,27 +93,21 @@ export default function createStyled() {
         return !(style != null && style.__mui_systemSx);
       });
     });
-
     var componentName = inputOptions.name,
-        componentSlot = inputOptions.slot,
-        inputSkipVariantsResolver = inputOptions.skipVariantsResolver,
-        inputSkipSx = inputOptions.skipSx,
-        overridesResolver = inputOptions.overridesResolver,
-        options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-
-
+      componentSlot = inputOptions.slot,
+      inputSkipVariantsResolver = inputOptions.skipVariantsResolver,
+      inputSkipSx = inputOptions.skipSx,
+      overridesResolver = inputOptions.overridesResolver,
+      options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     var skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
     var skipSx = inputSkipSx || false;
     var label;
-
     if (process.env.NODE_ENV !== 'production') {
       if (componentName) {
         label = "".concat(componentName, "-").concat(lowercaseFirstLetter(componentSlot || 'Root'));
       }
     }
-
     var shouldForwardPropOption = shouldForwardProp;
-
     if (componentSlot === 'Root') {
       shouldForwardPropOption = rootShouldForwardProp;
     } else if (componentSlot) {
@@ -138,111 +117,91 @@ export default function createStyled() {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-
     var defaultStyledResolver = styledEngineStyled(tag, _extends({
       shouldForwardProp: shouldForwardPropOption,
       label: label
     }, options));
-
     var muiStyledResolver = function muiStyledResolver(styleArg) {
       for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         expressions[_key - 1] = arguments[_key];
       }
-
       var expressionsWithDefaultTheme = expressions ? expressions.map(function (stylesArg) {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? function (_ref) {
           var themeInput = _ref.theme,
-              other = _objectWithoutProperties(_ref, ["theme"]);
-
+            other = _objectWithoutProperties(_ref, ["theme"]);
           return stylesArg(_extends({
             theme: isEmpty(themeInput) ? defaultTheme : themeInput
           }, other));
         } : stylesArg;
       }) : [];
       var transformedStyleArg = styleArg;
-
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(function (props) {
           var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
           var styleOverrides = getStyleOverrides(componentName, theme);
-
           if (styleOverrides) {
             var resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(function (_ref2) {
               var _ref3 = _slicedToArray(_ref2, 2),
-                  slotKey = _ref3[0],
-                  slotStyle = _ref3[1];
-
+                slotKey = _ref3[0],
+                slotStyle = _ref3[1];
               resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
                 theme: theme
               })) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }
-
           return null;
         });
       }
-
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(function (props) {
           var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
-
       if (!skipSx) {
         expressionsWithDefaultTheme.push(systemSx);
       }
-
       var numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-
       if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
-        var placeholders = new Array(numOfCustomFnsApplied).fill(''); // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-
+        var placeholders = new Array(numOfCustomFnsApplied).fill('');
+        // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
         transformedStyleArg = [].concat(_toConsumableArray(styleArg), _toConsumableArray(placeholders));
         transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(placeholders));
-      } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      } else if (typeof styleArg === 'function' &&
+      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = function transformedStyleArg(_ref4) {
           var themeInput = _ref4.theme,
-              other = _objectWithoutProperties(_ref4, ["theme"]);
-
+            other = _objectWithoutProperties(_ref4, ["theme"]);
           return styleArg(_extends({
             theme: isEmpty(themeInput) ? defaultTheme : themeInput
           }, other));
         };
       }
-
       var Component = defaultStyledResolver.apply(void 0, [transformedStyleArg].concat(_toConsumableArray(expressionsWithDefaultTheme)));
-
       if (process.env.NODE_ENV !== 'production') {
         var displayName;
-
         if (componentName) {
           displayName = "".concat(componentName).concat(componentSlot || '');
         }
-
         if (displayName === undefined) {
           displayName = "Styled(".concat(getDisplayName(tag), ")");
         }
-
         Component.displayName = displayName;
       }
-
       return Component;
     };
-
     if (defaultStyledResolver.withConfig) {
       muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
     }
-
     return muiStyledResolver;
   };
 }

package/legacy/createTheme/createBreakpoints.js

@@ -4,85 +4,72 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 export var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-
 var sortBreakpointsValues = function sortBreakpointsValues(values) {
   var breakpointsAsArray = Object.keys(values).map(function (key) {
     return {
       key: key,
       val: values[key]
     };
-  }) || []; // Sort in ascending order
-
+  }) || [];
+  // Sort in ascending order
   breakpointsAsArray.sort(function (breakpoint1, breakpoint2) {
     return breakpoint1.val - breakpoint2.val;
   });
   return breakpointsAsArray.reduce(function (acc, obj) {
     return _extends({}, acc, _defineProperty({}, obj.key, obj.val));
   }, {});
-}; // Keep in mind that @media is inclusive by the CSS specification.
-
+};
 
+// Keep in mind that @media is inclusive by the CSS specification.
 export default function createBreakpoints(breakpoints) {
   var _breakpoints$values = breakpoints.values,
-      values = _breakpoints$values === void 0 ? {
-    xs: 0,
-    // phone
-    sm: 600,
-    // tablet
-    md: 900,
-    // small laptop
-    lg: 1200,
-    // desktop
-    xl: 1536 // large screen
-
-  } : _breakpoints$values,
-      _breakpoints$unit = breakpoints.unit,
-      unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
-      _breakpoints$step = breakpoints.step,
-      step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
-      other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
-
+    values = _breakpoints$values === void 0 ? {
+      xs: 0,
+      // phone
+      sm: 600,
+      // tablet
+      md: 900,
+      // small laptop
+      lg: 1200,
+      // desktop
+      xl: 1536 // large screen
+    } : _breakpoints$values,
+    _breakpoints$unit = breakpoints.unit,
+    unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
+    _breakpoints$step = breakpoints.step,
+    step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
+    other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
   var sortedValues = sortBreakpointsValues(values);
   var keys = Object.keys(sortedValues);
-
   function up(key) {
     var value = typeof values[key] === 'number' ? values[key] : key;
     return "@media (min-width:".concat(value).concat(unit, ")");
   }
-
   function down(key) {
     var value = typeof values[key] === 'number' ? values[key] : key;
     return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
   }
-
   function between(start, end) {
     var endIndex = keys.indexOf(end);
     return "@media (min-width:".concat(typeof values[start] === 'number' ? values[start] : start).concat(unit, ") and ") + "(max-width:".concat((endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100).concat(unit, ")");
   }
-
   function only(key) {
     if (keys.indexOf(key) + 1 < keys.length) {
       return between(key, keys[keys.indexOf(key) + 1]);
     }
-
     return up(key);
   }
-
   function not(key) {
     // handle first and last key separately, for better readability
     var keyIndex = keys.indexOf(key);
-
     if (keyIndex === 0) {
       return up(keys[1]);
     }
-
     if (keyIndex === keys.length - 1) {
       return down(keys[keyIndex]);
     }
-
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-
   return _extends({
     keys: keys,
     values: sortedValues,

package/legacy/createTheme/createSpacing.js

@@ -1,39 +1,34 @@
 import { createUnarySpacing } from '../spacing';
-
 /* tslint:enable:unified-signatures */
+
 export default function createSpacing() {
   var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
-
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
-  } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
+  }
+
+  // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
   // Smaller components, such as icons, can align to a 4dp grid.
   // https://m2.material.io/design/layout/understanding-layout.html
-
-
   var transform = createUnarySpacing({
     spacing: spacingInput
   });
-
   var spacing = function spacing() {
     for (var _len = arguments.length, argsInput = new Array(_len), _key = 0; _key < _len; _key++) {
       argsInput[_key] = arguments[_key];
     }
-
     if (process.env.NODE_ENV !== 'production') {
       if (!(argsInput.length <= 4)) {
         console.error("MUI: Too many arguments provided, expected between 0 and 4, got ".concat(argsInput.length));
       }
     }
-
     var args = argsInput.length === 0 ? [1] : argsInput;
     return args.map(function (argument) {
       var output = transform(argument);
       return typeof output === 'number' ? "".concat(output, "px") : output;
     }).join(' ');
   };
-
   spacing.mui = true;
   return spacing;
 }

package/legacy/createTheme/createTheme.js

@@ -4,19 +4,16 @@ import { deepmerge } from '@mui/utils';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
 import createSpacing from './createSpacing';
-
 function createTheme() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
   var _options$breakpoints = options.breakpoints,
-      breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
-      _options$palette = options.palette,
-      paletteInput = _options$palette === void 0 ? {} : _options$palette,
-      spacingInput = options.spacing,
-      _options$shape = options.shape,
-      shapeInput = _options$shape === void 0 ? {} : _options$shape,
-      other = _objectWithoutProperties(options, ["breakpoints", "palette", "spacing", "shape"]);
-
+    breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
+    _options$palette = options.palette,
+    paletteInput = _options$palette === void 0 ? {} : _options$palette,
+    spacingInput = options.spacing,
+    _options$shape = options.shape,
+    shapeInput = _options$shape === void 0 ? {} : _options$shape,
+    other = _objectWithoutProperties(options, ["breakpoints", "palette", "spacing", "shape"]);
   var breakpoints = createBreakpoints(breakpointsInput);
   var spacing = createSpacing(spacingInput);
   var muiTheme = deepmerge({
@@ -30,15 +27,12 @@ function createTheme() {
     spacing: spacing,
     shape: _extends({}, shape, shapeInput)
   }, other);
-
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }
-
   muiTheme = args.reduce(function (acc, argument) {
     return deepmerge(acc, argument);
   }, muiTheme);
   return muiTheme;
 }
-
 export default createTheme;

package/legacy/cssGrid.js

@@ -6,16 +6,13 @@ import responsivePropType from './responsivePropType';
 export var gap = function gap(props) {
   if (props.gap !== undefined && props.gap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
-
     var styleFromPropValue = function styleFromPropValue(propValue) {
       return {
         gap: getValue(transformer, propValue)
       };
     };
-
     return handleBreakpoints(props, props.gap, styleFromPropValue);
   }
-
   return null;
 };
 gap.propTypes = process.env.NODE_ENV !== 'production' ? {
@@ -25,16 +22,13 @@ gap.filterProps = ['gap'];
 export var columnGap = function columnGap(props) {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
-
     var styleFromPropValue = function styleFromPropValue(propValue) {
       return {
         columnGap: getValue(transformer, propValue)
       };
     };
-
     return handleBreakpoints(props, props.columnGap, styleFromPropValue);
   }
-
   return null;
 };
 columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
@@ -44,16 +38,13 @@ columnGap.filterProps = ['columnGap'];
 export var rowGap = function rowGap(props) {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
-
     var styleFromPropValue = function styleFromPropValue(propValue) {
       return {
         rowGap: getValue(transformer, propValue)
       };
     };
-
     return handleBreakpoints(props, props.rowGap, styleFromPropValue);
   }
-
   return null;
 };
 rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {