@mui/system 5.0.1 → 5.0.5

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.1
+/** @license MUI v5.0.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -47,18 +47,13 @@ var _exportNames = {
   getThemeProps: true,
   useTheme: true,
   useThemeWithoutDefault: true,
-  ThemeProvider: true
+  ThemeProvider: true,
+  unstable_createCssVarsProvider: true
 };
-Object.defineProperty(exports, "css", {
-  enumerable: true,
-  get: function () {
-    return _styledEngine.css;
-  }
-});
-Object.defineProperty(exports, "keyframes", {
+Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function () {
-    return _styledEngine.keyframes;
+    return _Box.default;
   }
 });
 Object.defineProperty(exports, "GlobalStyles", {
@@ -73,6 +68,12 @@ Object.defineProperty(exports, "StyledEngineProvider", {
     return _styledEngine.StyledEngineProvider;
   }
 });
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
 Object.defineProperty(exports, "borders", {
   enumerable: true,
   get: function () {
@@ -85,130 +86,136 @@ Object.defineProperty(exports, "breakpoints", {
     return _breakpoints.default;
   }
 });
-Object.defineProperty(exports, "handleBreakpoints", {
+Object.defineProperty(exports, "compose", {
   enumerable: true,
   get: function () {
-    return _breakpoints.handleBreakpoints;
+    return _compose.default;
   }
 });
-Object.defineProperty(exports, "mergeBreakpointsInOrder", {
+Object.defineProperty(exports, "createBox", {
   enumerable: true,
   get: function () {
-    return _breakpoints.mergeBreakpointsInOrder;
+    return _createBox.default;
   }
 });
-Object.defineProperty(exports, "unstable_resolveBreakpointValues", {
+Object.defineProperty(exports, "createBreakpoints", {
   enumerable: true,
   get: function () {
-    return _breakpoints.resolveBreakpointValues;
+    return _createBreakpoints.default;
   }
 });
-Object.defineProperty(exports, "compose", {
+Object.defineProperty(exports, "createSpacing", {
   enumerable: true,
   get: function () {
-    return _compose.default;
+    return _createSpacing.default;
   }
 });
-Object.defineProperty(exports, "display", {
+Object.defineProperty(exports, "createStyled", {
   enumerable: true,
   get: function () {
-    return _display.default;
+    return _createStyled.default;
   }
 });
-Object.defineProperty(exports, "flexbox", {
+Object.defineProperty(exports, "createTheme", {
   enumerable: true,
   get: function () {
-    return _flexbox.default;
+    return _createTheme.default;
   }
 });
-Object.defineProperty(exports, "grid", {
+Object.defineProperty(exports, "css", {
   enumerable: true,
   get: function () {
-    return _grid.default;
+    return _styledEngine.css;
   }
 });
-Object.defineProperty(exports, "palette", {
+Object.defineProperty(exports, "display", {
   enumerable: true,
   get: function () {
-    return _palette.default;
+    return _display.default;
   }
 });
-Object.defineProperty(exports, "positions", {
+Object.defineProperty(exports, "flexbox", {
   enumerable: true,
   get: function () {
-    return _positions.default;
+    return _flexbox.default;
   }
 });
-Object.defineProperty(exports, "shadows", {
+Object.defineProperty(exports, "getPath", {
   enumerable: true,
   get: function () {
-    return _shadows.default;
+    return _style.getPath;
   }
 });
-Object.defineProperty(exports, "sizing", {
+Object.defineProperty(exports, "getThemeProps", {
   enumerable: true,
   get: function () {
-    return _sizing.default;
+    return _useThemeProps.getThemeProps;
   }
 });
-Object.defineProperty(exports, "spacing", {
+Object.defineProperty(exports, "grid", {
   enumerable: true,
   get: function () {
-    return _spacing.default;
+    return _grid.default;
   }
 });
-Object.defineProperty(exports, "style", {
+Object.defineProperty(exports, "handleBreakpoints", {
   enumerable: true,
   get: function () {
-    return _style.default;
+    return _breakpoints.handleBreakpoints;
   }
 });
-Object.defineProperty(exports, "getPath", {
+Object.defineProperty(exports, "keyframes", {
   enumerable: true,
   get: function () {
-    return _style.getPath;
+    return _styledEngine.keyframes;
   }
 });
-Object.defineProperty(exports, "typography", {
+Object.defineProperty(exports, "mergeBreakpointsInOrder", {
   enumerable: true,
   get: function () {
-    return _typography.default;
+    return _breakpoints.mergeBreakpointsInOrder;
   }
 });
-Object.defineProperty(exports, "unstable_styleFunctionSx", {
+Object.defineProperty(exports, "palette", {
   enumerable: true,
   get: function () {
-    return _styleFunctionSx.default;
+    return _palette.default;
   }
 });
-Object.defineProperty(exports, "unstable_extendSxProp", {
+Object.defineProperty(exports, "positions", {
   enumerable: true,
   get: function () {
-    return _styleFunctionSx.extendSxProp;
+    return _positions.default;
   }
 });
-Object.defineProperty(exports, "unstable_getThemeValue", {
+Object.defineProperty(exports, "shadows", {
   enumerable: true,
   get: function () {
-    return _getThemeValue.default;
+    return _shadows.default;
   }
 });
-Object.defineProperty(exports, "Box", {
+Object.defineProperty(exports, "shape", {
   enumerable: true,
   get: function () {
-    return _Box.default;
+    return _shape.default;
   }
 });
-Object.defineProperty(exports, "createBox", {
+Object.defineProperty(exports, "sizing", {
   enumerable: true,
   get: function () {
-    return _createBox.default;
+    return _sizing.default;
   }
 });
-Object.defineProperty(exports, "createStyled", {
+Object.defineProperty(exports, "spacing", {
   enumerable: true,
   get: function () {
-    return _createStyled.default;
+    return _spacing.default;
+  }
+});
+Object.defineProperty(exports, "style", {
+  enumerable: true,
+  get: function () {
+    return _style.default;
   }
 });
 Object.defineProperty(exports, "styled", {
@@ -217,40 +224,40 @@ Object.defineProperty(exports, "styled", {
     return _styled.default;
   }
 });
-Object.defineProperty(exports, "createTheme", {
+Object.defineProperty(exports, "typography", {
   enumerable: true,
   get: function () {
-    return _createTheme.default;
+    return _typography.default;
   }
 });
-Object.defineProperty(exports, "createBreakpoints", {
+Object.defineProperty(exports, "unstable_createCssVarsProvider", {
   enumerable: true,
   get: function () {
-    return _createBreakpoints.default;
+    return _createCssVarsProvider.default;
   }
 });
-Object.defineProperty(exports, "createSpacing", {
+Object.defineProperty(exports, "unstable_extendSxProp", {
   enumerable: true,
   get: function () {
-    return _createSpacing.default;
+    return _styleFunctionSx.extendSxProp;
   }
 });
-Object.defineProperty(exports, "shape", {
+Object.defineProperty(exports, "unstable_getThemeValue", {
   enumerable: true,
   get: function () {
-    return _shape.default;
+    return _getThemeValue.default;
   }
 });
-Object.defineProperty(exports, "useThemeProps", {
+Object.defineProperty(exports, "unstable_resolveBreakpointValues", {
   enumerable: true,
   get: function () {
-    return _useThemeProps.default;
+    return _breakpoints.resolveBreakpointValues;
   }
 });
-Object.defineProperty(exports, "getThemeProps", {
+Object.defineProperty(exports, "unstable_styleFunctionSx", {
   enumerable: true,
   get: function () {
-    return _useThemeProps.getThemeProps;
+    return _styleFunctionSx.default;
   }
 });
 Object.defineProperty(exports, "useTheme", {
@@ -259,16 +266,16 @@ Object.defineProperty(exports, "useTheme", {
     return _useTheme.default;
   }
 });
-Object.defineProperty(exports, "useThemeWithoutDefault", {
+Object.defineProperty(exports, "useThemeProps", {
   enumerable: true,
   get: function () {
-    return _useThemeWithoutDefault.default;
+    return _useThemeProps.default;
   }
 });
-Object.defineProperty(exports, "ThemeProvider", {
+Object.defineProperty(exports, "useThemeWithoutDefault", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.default;
+    return _useThemeWithoutDefault.default;
   }
 });
 
@@ -450,6 +457,8 @@ Object.keys(_colorManipulator).forEach(function (key) {
 
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
+var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
+
 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; }

package/index.spec.d.ts

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

package/legacy/cssVars/createCssVarsProvider.js

@@ -0,0 +1,202 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GlobalStyles } from '@mui/styled-engine';
+import { deepmerge } from '@mui/utils';
+import cssVarsParser from './cssVarsParser';
+import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_STORAGE_KEY } from './getInitColorSchemeScript';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var resolveMode = function resolveMode(key, fallback, supportedColorSchemes) {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  var value;
+
+  try {
+    value = localStorage.getItem(key) || undefined;
+
+    if (!supportedColorSchemes.includes(value)) {
+      value = undefined;
+    }
+  } catch (e) {// Unsupported
+  }
+
+  return value || fallback;
+};
+
+export default function createCssVarsProvider(ThemeContext, options) {
+  var _options$theme = options.theme,
+      baseTheme = _options$theme === void 0 ? {} : _options$theme,
+      designSystemColorScheme = options.defaultColorScheme,
+      _options$prefix = options.prefix,
+      designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix;
+
+  if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
+    console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
+  }
+
+  var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
+
+  var useColorScheme = function useColorScheme() {
+    var value = React.useContext(ColorSchemeContext);
+
+    if (!value) {
+      throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `useColorScheme` must be called under <CssVarsProvider />" : _formatMuiErrorMessage(19));
+    }
+
+    return value;
+  };
+
+  function CssVarsProvider(_ref) {
+    var children = _ref.children,
+        _ref$theme = _ref.theme,
+        themeProp = _ref$theme === void 0 ? {} : _ref$theme,
+        _ref$prefix = _ref.prefix,
+        prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
+        _ref$storageKey = _ref.storageKey,
+        storageKey = _ref$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref$storageKey,
+        _ref$attribute = _ref.attribute,
+        attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+        _ref$defaultColorSche = _ref.defaultColorScheme,
+        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;
+
+    var _baseTheme$colorSchem = baseTheme.colorSchemes,
+        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
+        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
+
+    var _themeProp$colorSchem = themeProp.colorSchemes,
+        colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
+        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes"]);
+
+    var mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    var colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
+    var allColorSchemes = Object.keys(colorSchemes);
+    var joinedColorSchemes = allColorSchemes.join(',');
+
+    var _React$useState = React.useState(function () {
+      return resolveMode(storageKey, defaultColorScheme, allColorSchemes);
+    }),
+        colorScheme = _React$useState[0],
+        setColorScheme = _React$useState[1];
+
+    var resolvedColorScheme = colorScheme || defaultColorScheme;
+
+    var _cssVarsParser = cssVarsParser(mergedTheme, {
+      prefix: prefix
+    }),
+        rootCss = _cssVarsParser.css,
+        rootVars = _cssVarsParser.vars;
+
+    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      vars: rootVars
+    });
+    var styleSheet = {};
+    Object.entries(colorSchemes).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          scheme = _ref3[1];
+
+      var _cssVarsParser2 = cssVarsParser(scheme, {
+        prefix: prefix
+      }),
+          css = _cssVarsParser2.css,
+          vars = _cssVarsParser2.vars;
+
+      if (key === resolvedColorScheme) {
+        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
+      }
+
+      if (key === defaultColorScheme) {
+        styleSheet[':root'] = deepmerge(rootCss, css);
+      } else {
+        styleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = css;
+      }
+    });
+    React.useEffect(function () {
+      if (colorScheme) {
+        document.body.setAttribute(attribute, colorScheme);
+        localStorage.setItem(storageKey, colorScheme);
+      }
+    }, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
+
+    React.useEffect(function () {
+      var handleStorage = function handleStorage(event) {
+        var storageColorScheme = event.newValue;
+
+        if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
+          if (storageColorScheme) {
+            setColorScheme(storageColorScheme);
+          }
+        }
+      };
+
+      window.addEventListener('storage', handleStorage);
+      return function () {
+        return window.removeEventListener('storage', handleStorage);
+      };
+    }, [setColorScheme, storageKey, joinedColorSchemes]);
+    var wrappedSetColorScheme = React.useCallback(function (val) {
+      if (typeof val === 'string' && !allColorSchemes.includes(val)) {
+        console.error("`".concat(val, "` does not exist in `theme.colorSchemes`."));
+      } else {
+        setColorScheme(val);
+      }
+    }, [setColorScheme, allColorSchemes]);
+    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
+      value: {
+        colorScheme: colorScheme,
+        setColorScheme: wrappedSetColorScheme,
+        allColorSchemes: allColorSchemes
+      },
+      children: [/*#__PURE__*/_jsx(GlobalStyles, {
+        styles: styleSheet
+      }), /*#__PURE__*/_jsx(ThemeContext.Provider, {
+        value: mergedTheme,
+        children: children
+      })]
+    });
+  }
+
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The body attribute name to attach colorScheme.
+     */
+    attribute: PropTypes.string,
+
+    /**
+     * Your component tree.
+     */
+    children: PropTypes.node,
+
+    /**
+     * The initial color scheme used.
+     */
+    defaultColorScheme: PropTypes.string,
+
+    /**
+     * css variable prefix
+     */
+    prefix: PropTypes.string,
+
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    storageKey: PropTypes.string,
+
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: PropTypes.object
+  } : void 0;
+  return {
+    CssVarsProvider: CssVarsProvider,
+    useColorScheme: useColorScheme,
+    getInitColorSchemeScript: getInitColorSchemeScript
+  };
+}

package/legacy/cssVars/cssVarsParser.js

@@ -0,0 +1,125 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
+  var temp = obj;
+  keys.forEach(function (k, index) {
+    if (index === keys.length - 1) {
+      if (temp && _typeof(temp) === 'object') {
+        temp[k] = value;
+      }
+    } else if (temp && _typeof(temp) === 'object') {
+      if (!temp[k]) {
+        temp[k] = {};
+      }
+
+      temp = temp[k];
+    }
+  });
+};
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+
+export var walkObjectDeep = function walkObjectDeep(obj, callback) {
+  function recurse(object) {
+    var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    Object.entries(object).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+
+      if (value !== undefined && value !== null) {
+        if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
+          recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
+        } else {
+          callback([].concat(_toConsumableArray(parentKeys), [key]), value);
+        }
+      }
+    });
+  }
+
+  recurse(obj);
+};
+
+var getCssValue = function getCssValue(keys, value) {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
+      return keys.includes(prop);
+    })) {
+      // css property that are unitless
+      return value;
+    }
+
+    return "".concat(value, "px");
+  }
+
+  return value;
+};
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{ prefix?: string }} options
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+
+
+export default function cssVarsParser(obj, options) {
+  var _ref3 = options || {},
+      prefix = _ref3.prefix;
+
+  var css = {};
+  var vars = {};
+  walkObjectDeep(obj, function (keys, value) {
+    if (typeof value === 'string' || typeof value === 'number') {
+      var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
+
+      _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
+
+      assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
+    }
+  });
+  return {
+    css: css,
+    vars: vars
+  };
+}

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DEFAULT_STORAGE_KEY = 'mui-color-scheme';
+export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export default function getInitColorSchemeScript(options) {
+  var _ref = options || {},
+      _ref$storageKey = _ref.storageKey,
+      storageKey = _ref$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref$storageKey,
+      _ref$attribute = _ref.attribute,
+      attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute;
+
+  return /*#__PURE__*/_jsx("script", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: "(function() { try {\n        var colorScheme = localStorage.getItem('".concat(storageKey, "');\n        if (colorScheme) {\n          document.body.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
+    }
+  });
+}

package/legacy/cssVars/index.js

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

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.1
+/** @license MUI v5.0.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -41,4 +41,5 @@ export { default as useThemeProps, getThemeProps } from './useThemeProps';
 export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
-export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';

package/legacy/spacing.js

@@ -46,8 +46,8 @@ var getCssProperties = memoize(function (prop) {
     return property + dir;
   }) : [property + direction];
 });
-var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY'];
-var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
+var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 var spacingKeys = [].concat(marginKeys, paddingKeys);
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var themeSpacing = getPath(theme, themeKey) || defaultValue;