@mui/material 6.0.0-alpha.6 → 6.0.0-alpha.8

package/node/useScrollTrigger/useScrollTrigger.js

@@ -1,15 +1,11 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useScrollTrigger;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-const _excluded = ["getTrigger", "target"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function defaultTrigger(store, options) {
@@ -33,17 +29,18 @@ function defaultTrigger(store, options) {
 const defaultTarget = typeof window !== 'undefined' ? window : null;
 function useScrollTrigger(options = {}) {
   const {
-      getTrigger = defaultTrigger,
-      target = defaultTarget
-    } = options,
-    other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    getTrigger = defaultTrigger,
+    target = defaultTarget,
+    ...other
+  } = options;
   const store = React.useRef();
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
   React.useEffect(() => {
     const handleScroll = () => {
-      setTrigger(getTrigger(store, (0, _extends2.default)({
-        target
-      }, other)));
+      setTrigger(getTrigger(store, {
+        target,
+        ...other
+      }));
     };
     handleScroll(); // Re-evaluate trigger when dependencies change
     target.addEventListener('scroll', handleScroll, {

package/node/utils/createSvgIcon.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createSvgIcon;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -16,12 +15,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Private module reserved for @mui packages.
  */function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
       "data-testid": `${displayName}Icon`,
-      ref: ref
-    }, props, {
+      ref: ref,
+      ...props,
       children: path
-    }));
+    });
   }
   if (process.env.NODE_ENV !== 'production') {
     // Need to set `displayName` on the inner component for React.memo.

package/node/utils/useSlot.js

@@ -6,13 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useSlot;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _utils = require("@mui/base/utils");
-const _excluded = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"],
-  _excluded2 = ["component", "slots", "slotProps"],
-  _excluded3 = ["component"];
 /**
  * An internal function to create a Material UI slot.
  *
@@ -36,51 +31,57 @@ function useSlot(
  */
 name, parameters) {
   const {
-      className,
-      elementType: initialElementType,
-      ownerState,
-      externalForwardedProps,
-      getSlotOwnerState,
-      internalForwardedProps
-    } = parameters,
-    useSlotPropsParams = (0, _objectWithoutPropertiesLoose2.default)(parameters, _excluded);
+    className,
+    elementType: initialElementType,
+    ownerState,
+    externalForwardedProps,
+    getSlotOwnerState,
+    internalForwardedProps,
+    ...useSlotPropsParams
+  } = parameters;
   const {
-      component: rootComponent,
-      slots = {
-        [name]: undefined
-      },
-      slotProps = {
-        [name]: undefined
-      }
-    } = externalForwardedProps,
-    other = (0, _objectWithoutPropertiesLoose2.default)(externalForwardedProps, _excluded2);
+    component: rootComponent,
+    slots = {
+      [name]: undefined
+    },
+    slotProps = {
+      [name]: undefined
+    },
+    ...other
+  } = externalForwardedProps;
   const elementType = slots[name] || initialElementType;
 
   // `slotProps[name]` can be a callback that receives the component's ownerState.
   // `resolvedComponentsProps` is always a plain object.
   const resolvedComponentsProps = (0, _utils.resolveComponentProps)(slotProps[name], ownerState);
-  const _mergeSlotProps = (0, _utils.mergeSlotProps)((0, _extends2.default)({
-      className
-    }, useSlotPropsParams, {
-      externalForwardedProps: name === 'root' ? other : undefined,
-      externalSlotProps: resolvedComponentsProps
-    })),
-    {
-      props: {
-        component: slotComponent
-      },
-      internalRef
-    } = _mergeSlotProps,
-    mergedProps = (0, _objectWithoutPropertiesLoose2.default)(_mergeSlotProps.props, _excluded3);
+  const {
+    props: {
+      component: slotComponent,
+      ...mergedProps
+    },
+    internalRef
+  } = (0, _utils.mergeSlotProps)({
+    className,
+    ...useSlotPropsParams,
+    externalForwardedProps: name === 'root' ? other : undefined,
+    externalSlotProps: resolvedComponentsProps
+  });
   const ref = (0, _useForkRef.default)(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
   const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
-  const finalOwnerState = (0, _extends2.default)({}, ownerState, slotOwnerState);
+  const finalOwnerState = {
+    ...ownerState,
+    ...slotOwnerState
+  };
   const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
-  const props = (0, _utils.appendOwnerState)(elementType, (0, _extends2.default)({}, name === 'root' && !rootComponent && !slots[name] && internalForwardedProps, name !== 'root' && !slots[name] && internalForwardedProps, mergedProps, LeafComponent && {
-    as: LeafComponent
-  }, {
+  const props = (0, _utils.appendOwnerState)(elementType, {
+    ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
+    ...(name !== 'root' && !slots[name] && internalForwardedProps),
+    ...mergedProps,
+    ...(LeafComponent && {
+      as: LeafComponent
+    }),
     ref
-  }), finalOwnerState);
+  }, finalOwnerState);
   Object.keys(slotOwnerState).forEach(propName => {
     delete props[propName];
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-alpha.6",
+  "version": "6.0.0-alpha.8",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -27,18 +27,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
+    "@babel/runtime": "^7.24.5",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.44",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.6",
+    "@mui/base": "5.0.0-beta.46",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.5",
-    "@mui/system": "^6.0.0-alpha.5"
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.8",
+    "@mui/utils": "^6.0.0-alpha.8",
+    "@mui/system": "^6.0.0-alpha.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/CssVarsProvider.js

@@ -3,7 +3,6 @@
 // do not remove the following import (https://github.com/microsoft/TypeScript/issues/29808#issuecomment-1320713018)
 /* eslint-disable @typescript-eslint/no-unused-vars */
 // @ts-ignore
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import styleFunctionSx from '@mui/system/styleFunctionSx';
 import experimental_extendTheme from './experimental_extendTheme';
@@ -25,9 +24,10 @@ const {
     dark: 'dark'
   },
   resolveTheme: theme => {
-    const newTheme = _extends({}, theme, {
+    const newTheme = {
+      ...theme,
       typography: createTypography(theme.palette, theme.typography)
-    });
+    };
     newTheme.unstable_sx = function sx(props) {
       return styleFunctionSx({
         sx: props,

package/styles/ThemeProvider.js

@@ -1,23 +1,20 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as SystemThemeProvider } from '@mui/system';
 import THEME_ID from './identifier';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function ThemeProvider(_ref) {
-  let {
-      theme: themeInput
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+export default function ThemeProvider({
+  theme: themeInput,
+  ...props
+}) {
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/_jsx(SystemThemeProvider, _extends({}, props, {
+  return /*#__PURE__*/_jsx(SystemThemeProvider, {
+    ...props,
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**

package/styles/adaptV4Theme.js

@@ -1,24 +1,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-  _excluded2 = ["type", "mode"];
 import { createBreakpoints, createSpacing } from '@mui/system';
 export default 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 = {}
-    } = inputTheme,
-    other = _objectWithoutPropertiesLoose(inputTheme, _excluded);
-  const theme = _extends({}, other, {
+    defaultProps = {},
+    mixins = {},
+    overrides = {},
+    palette = {},
+    props = {},
+    styleOverrides = {},
+    ...other
+  } = inputTheme;
+  const theme = {
+    ...other,
     components: {}
-  });
+  };
 
   // default props
   Object.keys(defaultProps).forEach(component => {
@@ -50,32 +47,35 @@ export default function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = _extends({
+  theme.mixins = {
     gutters: (styles = {}) => {
-      return _extends({
+      return {
         paddingLeft: spacing(2),
-        paddingRight: spacing(2)
-      }, styles, {
-        [breakpoints.up('sm')]: _extends({
+        paddingRight: spacing(2),
+        ...styles,
+        [breakpoints.up('sm')]: {
           paddingLeft: spacing(3),
-          paddingRight: spacing(3)
-        }, styles[breakpoints.up('sm')])
-      });
-    }
-  }, mixins);
+          paddingRight: spacing(3),
+          ...styles[breakpoints.up('sm')]
+        }
+      };
+    },
+    ...mixins
+  };
   const {
-      type: typeInput,
-      mode: modeInput
-    } = palette,
-    paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2);
+    type: typeInput,
+    mode: modeInput,
+    ...paletteRest
+  } = palette;
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = _extends({
+  theme.palette = {
     // 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/styles/createMixins.js

@@ -1,6 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 export default function createMixins(breakpoints, mixins) {
-  return _extends({
+  return {
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -11,6 +10,7 @@ export default function createMixins(breakpoints, mixins) {
       [breakpoints.up('sm')]: {
         minHeight: 64
       }
-    }
-  }, mixins);
+    },
+    ...mixins
+  };
 }

package/styles/createPalette.js

@@ -1,7 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-const _excluded = ["mode", "contrastThreshold", "tonalOffset"];
 import deepmerge from '@mui/utils/deepmerge';
 import { darken, getContrastRatio, lighten } from '@mui/system/colorManipulator';
 import common from '../colors/common';
@@ -176,11 +173,11 @@ function getDefaultWarning(mode = 'light') {
 }
 export default function createPalette(palette) {
   const {
-      mode = 'light',
-      contrastThreshold = 3,
-      tonalOffset = 0.2
-    } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded);
+    mode = 'light',
+    contrastThreshold = 3,
+    tonalOffset = 0.2,
+    ...other
+  } = palette;
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -208,7 +205,9 @@ export default function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends({}, color);
+    color = {
+      ...color
+    };
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -248,9 +247,11 @@ const theme2 = createTheme({ palette: {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-  const paletteOutput = deepmerge(_extends({
+  const paletteOutput = deepmerge({
     // A collection of common colors.
-    common: _extends({}, common),
+    common: {
+      ...common
+    },
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -299,7 +300,9 @@ 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
-  }, modes[mode]), other);
+    tonalOffset,
+    // The light and dark mode object.
+    ...modes[mode]
+  }, other);
   return paletteOutput;
 }

package/styles/createTheme.js

@@ -1,7 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 import deepmerge from '@mui/utils/deepmerge';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import systemCreateTheme from '@mui/system/createTheme';
@@ -14,12 +11,15 @@ import createTransitions from './createTransitions';
 import zIndex from './zIndex';
 function createTheme(options = {}, ...args) {
   const {
-      mixins: mixinsInput = {},
-      palette: paletteInput = {},
-      transitions: transitionsInput = {},
-      typography: typographyInput = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
+    breakpoints: breakpointsInput,
+    mixins: mixinsInput = {},
+    spacing: spacingInput,
+    palette: paletteInput = {},
+    transitions: transitionsInput = {},
+    typography: typographyInput = {},
+    shape: shapeInput,
+    ...other
+  } = options;
   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.` : _formatMuiErrorMessage(18));
@@ -33,7 +33,9 @@ Please use another name.` : _formatMuiErrorMessage(18));
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
+    zIndex: {
+      ...zIndex
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
@@ -67,7 +69,10 @@ Please use another name.` : _formatMuiErrorMessage(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other?.unstable_sxConfig
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/styles/createTransitions.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/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.
 export const easing = {
@@ -43,15 +40,21 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 export default function createTransitions(inputTransitions) {
-  const mergedEasing = _extends({}, easing, inputTransitions.easing);
-  const mergedDuration = _extends({}, duration, inputTransitions.duration);
+  const mergedEasing = {
+    ...easing,
+    ...inputTransitions.easing
+  };
+  const mergedDuration = {
+    ...duration,
+    ...inputTransitions.duration
+  };
   const create = (props = ['all'], options = {}) => {
     const {
-        duration: durationOption = mergedDuration.standard,
-        easing: easingOption = mergedEasing.easeInOut,
-        delay = 0
-      } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded);
+      duration: durationOption = mergedDuration.standard,
+      easing: easingOption = mergedEasing.easeInOut,
+      delay = 0,
+      ...other
+    } = options;
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       const isNumber = value => !Number.isNaN(parseFloat(value));
@@ -76,11 +79,11 @@ export default 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 _extends({
+  return {
     getAutoHeightDuration,
-    create
-  }, inputTransitions, {
+    create,
+    ...inputTransitions,
     easing: mergedEasing,
     duration: mergedDuration
-  });
+  };
 }

package/styles/createTypography.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 import deepmerge from '@mui/utils/deepmerge';
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -15,24 +12,23 @@ const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
  * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
 export default function createTypography(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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+  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;
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -43,15 +39,20 @@ export default function createTypography(palette, typography) {
   }
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
     // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight
-  }, fontFamily === defaultFontFamily ? {
-    letterSpacing: `${round(letterSpacing / size)}em`
-  } : {}, casing, allVariants);
+    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
+  });
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
     h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
@@ -75,7 +76,7 @@ export default function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends({
+  return deepmerge({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -83,8 +84,9 @@ export default function createTypography(palette, typography) {
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,
-    fontWeightBold
-  }, variants), other, {
+    fontWeightBold,
+    ...variants
+  }, other, {
     clone: false // No need to clone deep
   });
 }