@mui/system 5.1.1 → 5.2.3

package/legacy/useThemeProps/getThemeProps.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
   var theme = params.theme,
       name = params.name,
@@ -10,18 +8,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  var output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  var defaultProps = theme.components[name].defaultProps;
-  var propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package/modern/breakpoints.js

@@ -93,7 +93,7 @@ export function createEmptyBreakpointObject(breakpointsInput = {}) {
 export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
     const breakpointOutput = acc[key];
-    const isBreakpointUnused = Object.keys(breakpointOutput).length === 0;
+    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
 
     if (isBreakpointUnused) {
       delete acc[key];

package/modern/createBox.js

@@ -54,7 +54,7 @@ export default function createBox(options = {}) {
     /**
      * @ignore
      */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
   } : void 0;
   return Box;
 }

package/modern/cssVars/createCssVarsProvider.js

@@ -2,25 +2,33 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 const _excluded = ["colorSchemes"],
-      _excluded2 = ["colorSchemes"];
+      _excluded2 = ["colorSchemes"],
+      _excluded3 = ["components"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
   const {
     theme: baseTheme = {},
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
+    disableTransitionOnChange = false,
+    enableColorScheme = true,
     prefix: designSystemPrefix = '',
     shouldSkipGeneratingVar
   } = options;
+  const systemSpacing = createSpacing(baseTheme.spacing);
+  const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
 
   if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -47,17 +55,28 @@ export default function createCssVarsProvider(options) {
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme
   }) {
+    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
+    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
+    const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
+
     const {
       colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
 
     const {
       colorSchemes: colorSchemesProp = {}
     } = themeProp,
           restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
 
-    let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    const hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+
+    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
+        {
+      components = {}
+    } = _deepmerge,
+        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
+
     const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -65,6 +84,7 @@ export default function createCssVarsProvider(options) {
     const {
       mode,
       setMode,
+      systemMode,
       lightColorScheme,
       darkColorScheme,
       colorScheme,
@@ -100,7 +120,11 @@ export default function createCssVarsProvider(options) {
       shouldSkipGeneratingVar
     });
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
-      vars: rootVars
+      components,
+      colorSchemes,
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -112,10 +136,7 @@ export default function createCssVarsProvider(options) {
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
-      }
+      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {
@@ -137,9 +158,50 @@ export default function createCssVarsProvider(options) {
     });
     React.useEffect(() => {
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
+    React.useEffect(() => {
+      if (!mode || !enableColorScheme) {
+        return undefined;
+      }
+
+      const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+      if (mode === 'system') {
+        document.documentElement.style.setProperty('color-scheme', systemMode);
+      } else {
+        document.documentElement.style.setProperty('color-scheme', mode);
+      }
+
+      return () => {
+        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+      };
+    }, [mode, systemMode]);
+    React.useEffect(() => {
+      let timer;
+
+      if (disableTransitionOnChange && hasMounted.current) {
+        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+        const css = document.createElement('style');
+        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+        document.head.appendChild(css); // Force browser repaint
+
+        (() => window.getComputedStyle(document.body))();
+
+        timer = setTimeout(() => {
+          document.head.removeChild(css);
+        }, 1);
+      }
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [colorScheme]);
+    React.useEffect(() => {
+      hasMounted.current = true;
+    }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
         mode,
@@ -170,7 +232,7 @@ export default function createCssVarsProvider(options) {
     attribute: PropTypes.string,
 
     /**
-     * Your component tree.
+     * The component tree.
      */
     children: PropTypes.node,
 
@@ -190,7 +252,7 @@ export default function createCssVarsProvider(options) {
     modeStorageKey: PropTypes.string,
 
     /**
-     * css variable prefix
+     * CSS variable prefix.
      */
     prefix: PropTypes.string,
 

package/modern/cssVars/cssVarsParser.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -45,14 +43,16 @@ export const assignNestedKeys = (obj, keys, value) => {
  * // ['palette', 'primary', 'main'] '#000000'
  */
 
-export const walkObjectDeep = (obj, callback) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        if (typeof value === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [...parentKeys, key]);
-        } else {
-          callback([...parentKeys, key], value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
       }
     });
@@ -64,7 +64,7 @@ export const walkObjectDeep = (obj, callback) => {
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
     }
 
@@ -102,10 +102,6 @@ const getCssValue = (keys, value) => {
 
 
 export default function cssVarsParser(theme, options) {
-  const clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
     prefix,
     basePrefix = '',
@@ -113,13 +109,18 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
       if (typeof value === 'string' && value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+        } else {
+          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = value;
       }
@@ -133,7 +134,8 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
     css,
     vars

package/modern/cssVars/getInitColorSchemeScript.js

@@ -5,7 +5,7 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    defaultMode = 'light',
+    enableSystem,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -18,23 +18,23 @@ export default function getInitColorSchemeScript(options) {
       __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
         var colorScheme = '';
-        if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
+        if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
         if (mode === 'light') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
         }
         if (mode === 'dark') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.1.1
+/** @license MUI v5.2.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,6 +27,7 @@ export { default as style, getPath } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
+export { default as experimental_sx } from './sx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';
 export { default as createBox } from './createBox';

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -44,27 +44,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(styleKey => {
       const value = callIfFn(sxObject[styleKey], theme);
 
-      if (typeof value === 'object') {
-        if (propToStyleFunction[styleKey]) {
-          css = merge(css, getThemeValue(styleKey, value, theme));
-        } else {
-          const breakpointsValues = handleBreakpoints({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object') {
+          if (propToStyleFunction[styleKey]) {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           } else {
-            css = merge(css, breakpointsValues);
+            const breakpointsValues = handleBreakpoints({
+              theme
+            }, value, x => ({
+              [styleKey]: x
+            }));
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                theme
+              });
+            } else {
+              css = merge(css, breakpointsValues);
+            }
           }
+        } else {
+          css = merge(css, getThemeValue(styleKey, value, theme));
         }
-      } else {
-        css = merge(css, getThemeValue(styleKey, value, theme));
       }
     });
     return removeUnusedBreakpoints(breakpointsKeys, css);

package/modern/sx/index.js

@@ -0,0 +1 @@
+export { default } from './sx';

package/modern/sx/sx.js

@@ -0,0 +1,12 @@
+import styleFunctionSx from '../styleFunctionSx';
+
+function sx(styles) {
+  return ({
+    theme
+  }) => styleFunctionSx({
+    sx: styles,
+    theme
+  });
+}
+
+export default sx;

package/modern/useThemeProps/getThemeProps.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
   const {
     theme,
@@ -12,18 +10,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  const output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.1.1",
+  "version": "5.2.3",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -23,7 +23,7 @@
   "homepage": "https://mui.com/system/basics/",
   "funding": {
     "type": "opencollective",
-    "url": "https://opencollective.com/material-ui"
+    "url": "https://opencollective.com/mui"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.1.1",
-    "@mui/styled-engine": "^5.1.1",
+    "@mui/private-theming": "^5.2.3",
+    "@mui/styled-engine": "^5.2.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.1.1",
+    "@mui/utils": "^5.2.3",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.9",
+    "csstype": "^3.0.10",
     "prop-types": "^15.7.2"
   },
   "sideEffects": false,

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -57,7 +57,7 @@ export type SystemStyleObject<Theme extends object = {}> =
 export type SxProps<Theme extends object = {}> =
   | SystemStyleObject<Theme>
   | ((theme: Theme) => SystemStyleObject<Theme>)
-  | Array<SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
+  | Array<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function unstable_styleFunctionSx(props: object): object;

package/styleFunctionSx/styleFunctionSx.js

@@ -59,27 +59,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(styleKey => {
       const value = callIfFn(sxObject[styleKey], theme);
 
-      if (typeof value === 'object') {
-        if (_getThemeValue.propToStyleFunction[styleKey]) {
-          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
-        } else {
-          const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object') {
+          if (_getThemeValue.propToStyleFunction[styleKey]) {
+            css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
           } else {
-            css = (0, _merge.default)(css, breakpointsValues);
+            const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
+              theme
+            }, value, x => ({
+              [styleKey]: x
+            }));
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                theme
+              });
+            } else {
+              css = (0, _merge.default)(css, breakpointsValues);
+            }
           }
+        } else {
+          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
         }
-      } else {
-        css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
       }
     });
     return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/sx/index.d.ts

@@ -0,0 +1 @@
+export { default } from './sx';

package/sx/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _sx.default;
+  }
+});
+
+var _sx = _interopRequireDefault(require("./sx"));

package/sx/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/sx/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/sx/sx.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from '@mui/styled-engine';
+import { SxProps } from '../styleFunctionSx';
+
+export default function sx<T extends object = {}>(styles: SxProps<T>): CSSObject;

package/sx/sx.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
+
+function sx(styles) {
+  return ({
+    theme
+  }) => (0, _styleFunctionSx.default)({
+    sx: styles,
+    theme
+  });
+}
+
+var _default = sx;
+exports.default = _default;

package/useThemeProps/getThemeProps.js

@@ -1,15 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getThemeProps;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _utils = require("@mui/utils");
 
-/* eslint-disable no-restricted-syntax */
 function getThemeProps(params) {
   const {
     theme,
@@ -21,17 +18,5 @@ function getThemeProps(params) {
     return props;
   }
 
-  const output = (0, _extends2.default)({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return (0, _utils.internal_resolveProps)(theme.components[name].defaultProps, props);
 }