@mui/material 5.13.1 → 5.13.3

package/node/internal/SwitchBase.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -17,6 +19,7 @@ var _useFormControl = _interopRequireDefault(require("../FormControl/useFormCont
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _switchBaseClasses = require("./switchBaseClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 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; }
 const useUtilityClasses = ownerState => {
@@ -34,15 +37,13 @@ const useUtilityClasses = ownerState => {
 };
 const SwitchBaseRoot = (0, _styled.default)(_ButtonBase.default)(({
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   padding: 9,
-  borderRadius: '50%',
-  ...(ownerState.edge === 'start' && {
-    marginLeft: ownerState.size === 'small' ? -3 : -12
-  }),
-  ...(ownerState.edge === 'end' && {
-    marginRight: ownerState.size === 'small' ? -3 : -12
-  })
+  borderRadius: '50%'
+}, ownerState.edge === 'start' && {
+  marginLeft: ownerState.size === 'small' ? -3 : -12
+}, ownerState.edge === 'end' && {
+  marginRight: ownerState.size === 'small' ? -3 : -12
 }));
 const SwitchBaseInput = (0, _styled.default)('input')({
   cursor: 'inherit',
@@ -62,29 +63,29 @@ const SwitchBaseInput = (0, _styled.default)('input')({
  */
 const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref) {
   const {
-    autoFocus,
-    checked: checkedProp,
-    checkedIcon,
-    className,
-    defaultChecked,
-    disabled: disabledProp,
-    disableFocusRipple = false,
-    edge = false,
-    icon,
-    id,
-    inputProps,
-    inputRef,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    readOnly,
-    required = false,
-    tabIndex,
-    type,
-    value,
-    ...other
-  } = props;
+      autoFocus,
+      checked: checkedProp,
+      checkedIcon,
+      className,
+      defaultChecked,
+      disabled: disabledProp,
+      disableFocusRipple = false,
+      edge = false,
+      icon,
+      id,
+      inputProps,
+      inputRef,
+      name,
+      onBlur,
+      onChange,
+      onFocus,
+      readOnly,
+      required = false,
+      tabIndex,
+      type,
+      value
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [checked, setCheckedState] = (0, _useControlled.default)({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -127,15 +128,14 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     }
   }
   const hasLabelFor = type === 'checkbox' || type === 'radio';
-  const ownerState = {
-    ...props,
+  const ownerState = (0, _extends2.default)({}, props, {
     checked,
     disabled,
     disableFocusRipple,
     edge
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SwitchBaseRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SwitchBaseRoot, (0, _extends2.default)({
     component: "span",
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
@@ -146,9 +146,9 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     onFocus: handleFocus,
     onBlur: handleBlur,
     ownerState: ownerState,
-    ref: ref,
-    ...other,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchBaseInput, {
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchBaseInput, (0, _extends2.default)({
       autoFocus: autoFocus,
       checked: checkedProp,
       defaultChecked: defaultChecked,
@@ -162,13 +162,11 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       required: required,
       ownerState: ownerState,
       tabIndex: tabIndex,
-      type: type,
-      ...(type === 'checkbox' && value === undefined ? {} : {
-        value
-      }),
-      ...inputProps
-    }), checked ? checkedIcon : icon]
-  });
+      type: type
+    }, type === 'checkbox' && value === undefined ? {} : {
+      value
+    }, inputProps)), checked ? checkedIcon : icon]
+  }));
 });
 
 // NB: If changed, please update Checkbox, Switch and Radio

package/node/styles/CssVarsProvider.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useColorScheme = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _system = require("@mui/system");
 var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
 var _createTypography = _interopRequireDefault(require("./createTypography"));
@@ -26,10 +27,9 @@ const {
     dark: 'dark'
   },
   resolveTheme: theme => {
-    const newTheme = {
-      ...theme,
+    const newTheme = (0, _extends2.default)({}, theme, {
       typography: (0, _createTypography.default)(theme.palette, theme.typography)
-    };
+    });
     newTheme.unstable_sx = function sx(props) {
       return (0, _system.unstable_styleFunctionSx)({
         sx: props,

package/node/styles/ThemeProvider.js

@@ -5,23 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ThemeProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
 var _identifier = _interopRequireDefault(require("./identifier"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["theme"];
 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; }
-function ThemeProvider({
-  theme: themeInput,
-  ...props
-}) {
+function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const scopedTheme = themeInput[_identifier.default];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.ThemeProvider, {
-    ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.ThemeProvider, (0, _extends2.default)({}, props, {
     themeId: scopedTheme ? _identifier.default : undefined,
     theme: scopedTheme || themeInput
-  });
+  }));
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**

package/node/styles/adaptV4Theme.js

@@ -1,27 +1,31 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = adaptV4Theme;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _system = require("@mui/system");
+const _excluded = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  _excluded2 = ["type", "mode"];
 function adaptV4Theme(inputTheme) {
   if (process.env.NODE_ENV !== 'production') {
     console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
   }
   const {
-    defaultProps = {},
-    mixins = {},
-    overrides = {},
-    palette = {},
-    props = {},
-    styleOverrides = {},
-    ...other
-  } = inputTheme;
-  const theme = {
-    ...other,
+      defaultProps = {},
+      mixins = {},
+      overrides = {},
+      palette = {},
+      props = {},
+      styleOverrides = {}
+    } = inputTheme,
+    other = (0, _objectWithoutPropertiesLoose2.default)(inputTheme, _excluded);
+  const theme = (0, _extends2.default)({}, other, {
     components: {}
-  };
+  });
 
   // default props
   Object.keys(defaultProps).forEach(component => {
@@ -53,35 +57,32 @@ function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = (0, _system.createBreakpoints)(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = {
+  theme.mixins = (0, _extends2.default)({
     gutters: (styles = {}) => {
-      return {
+      return (0, _extends2.default)({
         paddingLeft: spacing(2),
-        paddingRight: spacing(2),
-        ...styles,
-        [breakpoints.up('sm')]: {
+        paddingRight: spacing(2)
+      }, styles, {
+        [breakpoints.up('sm')]: (0, _extends2.default)({
           paddingLeft: spacing(3),
-          paddingRight: spacing(3),
-          ...styles[breakpoints.up('sm')]
-        }
-      };
-    },
-    ...mixins
-  };
+          paddingRight: spacing(3)
+        }, styles[breakpoints.up('sm')])
+      });
+    }
+  }, mixins);
   const {
-    type: typeInput,
-    mode: modeInput,
-    ...paletteRest
-  } = palette;
+      type: typeInput,
+      mode: modeInput
+    } = palette,
+    paletteRest = (0, _objectWithoutPropertiesLoose2.default)(palette, _excluded2);
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = {
+  theme.palette = (0, _extends2.default)({
     // theme.palette.text.hint
     text: {
       hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
     },
     mode: finalMode,
-    type: finalMode,
-    ...paletteRest
-  };
+    type: finalMode
+  }, paletteRest);
   return theme;
 }

package/node/styles/createMixins.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createMixins;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function createMixins(breakpoints, mixins) {
-  return {
+  return (0, _extends2.default)({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -16,7 +18,6 @@ function createMixins(breakpoints, mixins) {
       [breakpoints.up('sm')]: {
         minHeight: 64
       }
-    },
-    ...mixins
-  };
+    }
+  }, mixins);
 }

package/node/styles/createPalette.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.dark = void 0;
 exports.default = createPalette;
 exports.light = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _utils = require("@mui/utils");
 var _system = require("@mui/system");
 var _common = _interopRequireDefault(require("../colors/common"));
@@ -17,6 +19,7 @@ var _orange = _interopRequireDefault(require("../colors/orange"));
 var _blue = _interopRequireDefault(require("../colors/blue"));
 var _lightBlue = _interopRequireDefault(require("../colors/lightBlue"));
 var _green = _interopRequireDefault(require("../colors/green"));
+const _excluded = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -183,11 +186,11 @@ function getDefaultWarning(mode = 'light') {
 }
 function createPalette(palette) {
   const {
-    mode = 'light',
-    contrastThreshold = 3,
-    tonalOffset = 0.2,
-    ...other
-  } = palette;
+      mode = 'light',
+      contrastThreshold = 3,
+      tonalOffset = 0.2
+    } = palette,
+    other = (0, _objectWithoutPropertiesLoose2.default)(palette, _excluded);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -215,9 +218,7 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = {
-      ...color
-    };
+    color = (0, _extends2.default)({}, color);
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -257,11 +258,9 @@ const theme2 = createTheme({ palette: {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-  const paletteOutput = (0, _utils.deepmerge)({
+  const paletteOutput = (0, _utils.deepmerge)((0, _extends2.default)({
     // A collection of common colors.
-    common: {
-      ..._common.default
-    },
+    common: (0, _extends2.default)({}, _common.default),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -310,9 +309,7 @@ const theme2 = createTheme({ palette: {
     // Used by the functions below to shift a color's luminance by approximately
     // two indexes within its tonal palette.
     // E.g., shift from Red 500 to Red 300 or Red 700.
-    tonalOffset,
-    // The light and dark mode object.
-    ...modes[mode]
-  }, other);
+    tonalOffset
+  }, modes[mode]), other);
   return paletteOutput;
 }

package/node/styles/createTheme.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createMuiTheme = createMuiTheme;
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _utils = require("@mui/utils");
 var _system = require("@mui/system");
 var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
@@ -15,17 +17,15 @@ var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _shadows = _interopRequireDefault(require("./shadows"));
 var _createTransitions = _interopRequireDefault(require("./createTransitions"));
 var _zIndex = _interopRequireDefault(require("./zIndex"));
+const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput,
-    mixins: mixinsInput = {},
-    spacing: spacingInput,
-    palette: paletteInput = {},
-    transitions: transitionsInput = {},
-    typography: typographyInput = {},
-    shape: shapeInput,
-    ...other
-  } = options;
+      mixins: mixinsInput = {},
+      palette: paletteInput = {},
+      transitions: transitionsInput = {},
+      typography: typographyInput = {}
+    } = options,
+    other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : (0, _utils.formatMuiErrorMessage)(18));
@@ -39,9 +39,7 @@ Please use another name.` : (0, _utils.formatMuiErrorMessage)(18));
     shadows: _shadows.default.slice(),
     typography: (0, _createTypography.default)(palette, typographyInput),
     transitions: (0, _createTransitions.default)(transitionsInput),
-    zIndex: {
-      ..._zIndex.default
-    }
+    zIndex: (0, _extends2.default)({}, _zIndex.default)
   });
   muiTheme = (0, _utils.deepmerge)(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);
@@ -75,10 +73,7 @@ Please use another name.` : (0, _utils.formatMuiErrorMessage)(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = {
-    ..._system.unstable_defaultSxConfig,
-    ...(other == null ? void 0 : other.unstable_sxConfig)
-  };
+  muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _system.unstable_defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return (0, _system.unstable_styleFunctionSx)({
       sx: props,

package/node/styles/createTransitions.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createTransitions;
 exports.easing = exports.duration = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const _excluded = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -49,21 +53,15 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = {
-    ...easing,
-    ...inputTransitions.easing
-  };
-  const mergedDuration = {
-    ...duration,
-    ...inputTransitions.duration
-  };
+  const mergedEasing = (0, _extends2.default)({}, easing, inputTransitions.easing);
+  const mergedDuration = (0, _extends2.default)({}, duration, inputTransitions.duration);
   const create = (props = ['all'], options = {}) => {
     const {
-      duration: durationOption = mergedDuration.standard,
-      easing: easingOption = mergedEasing.easeInOut,
-      delay = 0,
-      ...other
-    } = options;
+        duration: durationOption = mergedDuration.standard,
+        easing: easingOption = mergedEasing.easeInOut,
+        delay = 0
+      } = options,
+      other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -87,11 +85,11 @@ function createTransitions(inputTransitions) {
     }
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-  return {
+  return (0, _extends2.default)({
     getAutoHeightDuration,
-    create,
-    ...inputTransitions,
+    create
+  }, inputTransitions, {
     easing: mergedEasing,
     duration: mergedDuration
-  };
+  });
 }

package/node/styles/createTypography.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createTypography;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _utils = require("@mui/utils");
+const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -18,23 +22,24 @@ const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
  * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
 function createTypography(palette, typography) {
-  const {
-    fontFamily = defaultFontFamily,
-    // The default font size of the Material Specification.
-    fontSize = 14,
-    // px
-    fontWeightLight = 300,
-    fontWeightRegular = 400,
-    fontWeightMedium = 500,
-    fontWeightBold = 700,
-    // Tell MUI what's the font-size on the html element.
-    // 16px is the default font-size used by browsers.
-    htmlFontSize = 16,
-    // Apply the CSS properties to all the variants.
-    allVariants,
-    pxToRem: pxToRem2,
-    ...other
-  } = typeof typography === 'function' ? typography(palette) : typography;
+  const _ref = typeof typography === 'function' ? typography(palette) : typography,
+    {
+      fontFamily = defaultFontFamily,
+      // The default font size of the Material Specification.
+      fontSize = 14,
+      // px
+      fontWeightLight = 300,
+      fontWeightRegular = 400,
+      fontWeightMedium = 500,
+      fontWeightBold = 700,
+      // Tell MUI what's the font-size on the html element.
+      // 16px is the default font-size used by browsers.
+      htmlFontSize = 16,
+      // Apply the CSS properties to all the variants.
+      allVariants,
+      pxToRem: pxToRem2
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -45,20 +50,15 @@ function createTypography(palette, typography) {
   }
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => (0, _extends2.default)({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
     // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight,
-    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
-    // across font-families can cause issues with the kerning.
-    ...(fontFamily === defaultFontFamily ? {
-      letterSpacing: `${round(letterSpacing / size)}em`
-    } : {}),
-    ...casing,
-    ...allVariants
-  });
+    lineHeight
+  }, fontFamily === defaultFontFamily ? {
+    letterSpacing: `${round(letterSpacing / size)}em`
+  } : {}, casing, allVariants);
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
     h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
@@ -81,7 +81,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return (0, _utils.deepmerge)({
+  return (0, _utils.deepmerge)((0, _extends2.default)({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -89,9 +89,8 @@ function createTypography(palette, typography) {
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,
-    fontWeightBold,
-    ...variants
-  }, other, {
+    fontWeightBold
+  }, variants), other, {
     clone: false // No need to clone deep
   });
 }