@mui/system 5.10.13 → 5.10.15

package/modern/createStyled.js

@@ -1,43 +1,37 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-      _excluded2 = ["theme"],
-      _excluded3 = ["theme"];
-
+  _excluded2 = ["theme"],
+  _excluded3 = ["theme"];
 /* 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;
 }
-
 const getStyleOverrides = (name, theme) => {
   if (theme.components && theme.components[name] && theme.components[name].styleOverrides) {
     return theme.components[name].styleOverrides;
   }
-
   return null;
 };
-
 const getVariantStyles = (name, theme) => {
   let variants = [];
-
   if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
     variants = theme.components[name].variants;
   }
-
   const variantsStyles = {};
   variants.forEach(definition => {
     const key = propsToClassKey(definition.props);
@@ -45,14 +39,12 @@ const getVariantStyles = (name, theme) => {
   });
   return variantsStyles;
 };
-
 const variantsResolver = (props, styles, theme, name) => {
   const {
     ownerState = {}
   } = props;
   const variantsStyles = [];
   const themeVariants = theme?.components?.[name]?.variants;
-
   if (themeVariants) {
     themeVariants.forEach(themeVariant => {
       let isMatch = true;
@@ -61,26 +53,22 @@ const 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 const systemDefaultTheme = createTheme();
-
 const lowercaseFirstLetter = string => {
   return string.charAt(0).toLowerCase() + string.slice(1);
 };
-
 export default function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
@@ -88,41 +76,35 @@ export default function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp,
     styleFunctionSx = defaultStyleFunctionSx
   } = input;
-
   const systemSx = props => {
     const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
     return styleFunctionSx(_extends({}, props, {
       theme
     }));
   };
-
   systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
     processStyles(tag, styles => styles.filter(style => !style?.__mui_systemSx));
-
     const {
-      name: componentName,
-      slot: componentSlot,
-      skipVariantsResolver: inputSkipVariantsResolver,
-      skipSx: inputSkipSx,
-      overridesResolver
-    } = inputOptions,
-          options = _objectWithoutPropertiesLoose(inputOptions, _excluded); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-
-
+        name: componentName,
+        slot: componentSlot,
+        skipVariantsResolver: inputSkipVariantsResolver,
+        skipSx: inputSkipSx,
+        overridesResolver
+      } = inputOptions,
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded);
+
+    // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
     const skipSx = inputSkipSx || false;
     let label;
-
     if (process.env.NODE_ENV !== 'production') {
       if (componentName) {
         label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
       }
     }
-
     let shouldForwardPropOption = shouldForwardProp;
-
     if (componentSlot === 'Root') {
       shouldForwardPropOption = rootShouldForwardProp;
     } else if (componentSlot) {
@@ -132,12 +114,10 @@ export default function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-
     const defaultStyledResolver = styledEngineStyled(tag, _extends({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
-
     const muiStyledResolver = (styleArg, ...expressions) => {
       const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
@@ -145,22 +125,19 @@ export default function createStyled(input = {}) {
         // which are basically components used as a selectors.
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
           let {
-            theme: themeInput
-          } = _ref,
-              other = _objectWithoutPropertiesLoose(_ref, _excluded2);
-
+              theme: themeInput
+            } = _ref,
+            other = _objectWithoutPropertiesLoose(_ref, _excluded2);
           return stylesArg(_extends({
             theme: isEmpty(themeInput) ? defaultTheme : themeInput
           }, other));
         } : stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
-
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
           const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
           const styleOverrides = getStyleOverrides(componentName, theme);
-
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
@@ -170,69 +147,56 @@ export default function createStyled(input = {}) {
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }
-
           return null;
         });
       }
-
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
           const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
-
       if (!skipSx) {
         expressionsWithDefaultTheme.push(systemSx);
       }
-
       const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-
       if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
-        const 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.
-
+        const 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 = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...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 = _ref2 => {
           let {
-            theme: themeInput
-          } = _ref2,
-              other = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-
+              theme: themeInput
+            } = _ref2,
+            other = _objectWithoutPropertiesLoose(_ref2, _excluded3);
           return styleArg(_extends({
             theme: isEmpty(themeInput) ? defaultTheme : themeInput
           }, other));
         };
       }
-
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
-
       if (process.env.NODE_ENV !== 'production') {
         let displayName;
-
         if (componentName) {
           displayName = `${componentName}${componentSlot || ''}`;
         }
-
         if (displayName === undefined) {
           displayName = `Styled(${getDisplayName(tag)})`;
         }
-
         Component.displayName = displayName;
       }
-
       return Component;
     };
-
     if (defaultStyledResolver.withConfig) {
       muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
     }
-
     return muiStyledResolver;
   };
 }

package/modern/createTheme/createBreakpoints.js

@@ -4,84 +4,72 @@ const _excluded = ["values", "unit", "step"];
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
-  })) || []; // Sort in ascending order
-
+  })) || [];
+  // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
     return _extends({}, acc, {
       [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) {
   const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
-    values = {
-      xs: 0,
-      // phone
-      sm: 600,
-      // tablet
-      md: 900,
-      // small laptop
-      lg: 1200,
-      // desktop
-      xl: 1536 // large screen
-
-    },
-    unit = 'px',
-    step = 5
-  } = breakpoints,
-        other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
-
+      // The breakpoint **start** at this value.
+      // For instance with the first breakpoint xs: [xs, sm).
+      values = {
+        xs: 0,
+        // phone
+        sm: 600,
+        // tablet
+        md: 900,
+        // small laptop
+        lg: 1200,
+        // desktop
+        xl: 1536 // large screen
+      },
+
+      unit = 'px',
+      step = 5
+    } = breakpoints,
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
-
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (min-width:${value}${unit})`;
   }
-
   function down(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (max-width:${value - step / 100}${unit})`;
   }
-
   function between(start, end) {
     const endIndex = keys.indexOf(end);
     return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${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
     const 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,
     values: sortedValues,

package/modern/createTheme/createSpacing.js

@@ -1,33 +1,30 @@
 import { createUnarySpacing } from '../spacing';
-
 /* tslint:enable:unified-signatures */
+
 export default function createSpacing(spacingInput = 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
-
-
   const transform = createUnarySpacing({
     spacing: spacingInput
   });
-
   const spacing = (...argsInput) => {
     if (process.env.NODE_ENV !== 'production') {
       if (!(argsInput.length <= 4)) {
         console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
       }
     }
-
     const args = argsInput.length === 0 ? [1] : argsInput;
     return args.map(argument => {
       const output = transform(argument);
       return typeof output === 'number' ? `${output}px` : output;
     }).join(' ');
   };
-
   spacing.mui = true;
   return spacing;
 }

package/modern/createTheme/createTheme.js

@@ -5,16 +5,14 @@ import { deepmerge } from '@mui/utils';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
 import createSpacing from './createSpacing';
-
 function createTheme(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {}
-  } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded);
-
+      breakpoints: breakpointsInput = {},
+      palette: paletteInput = {},
+      spacing: spacingInput,
+      shape: shapeInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose(options, _excluded);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -31,5 +29,4 @@ function createTheme(options = {}, ...args) {
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   return muiTheme;
 }
-
 export default createTheme;

package/modern/cssGrid.js

@@ -6,14 +6,11 @@ import responsivePropType from './responsivePropType';
 export const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
-
     const styleFromPropValue = propValue => ({
       gap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.gap, styleFromPropValue);
   }
-
   return null;
 };
 gap.propTypes = process.env.NODE_ENV !== 'production' ? {
@@ -23,14 +20,11 @@ gap.filterProps = ['gap'];
 export const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
-
     const styleFromPropValue = propValue => ({
       columnGap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.columnGap, styleFromPropValue);
   }
-
   return null;
 };
 columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
@@ -40,14 +34,11 @@ columnGap.filterProps = ['columnGap'];
 export const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
-
     const styleFromPropValue = propValue => ({
       rowGap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.rowGap, styleFromPropValue);
   }
-
   return null;
 };
 rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {