@material-ui/system - npm Package Compare versions

Comparing version 5.0.0-alpha.11 to 5.0.0-alpha.13

borders.js

@@ -1,14 +0,4 @@
-"use strict";
+import style from './style';
+import compose from './compose';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.borderRadius = exports.borderColor = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.border = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
 function getBorder(value) {
@@ -19,6 +9,6 @@ if (typeof value !== 'number') {
 
-  return "".concat(value, "px solid");
+  return `${value}px solid`;
 }
 
-var border = (0, _style.default)({
+export const border = style({
   prop: 'border',
@@ -28,4 +18,3 @@ themeKey: 'borders',
 });
-exports.border = border;
-var borderTop = (0, _style.default)({
+export const borderTop = style({
   prop: 'borderTop',
@@ -35,4 +24,3 @@ themeKey: 'borders',
 });
-exports.borderTop = borderTop;
-var borderRight = (0, _style.default)({
+export const borderRight = style({
   prop: 'borderRight',
@@ -42,4 +30,3 @@ themeKey: 'borders',
 });
-exports.borderRight = borderRight;
-var borderBottom = (0, _style.default)({
+export const borderBottom = style({
   prop: 'borderBottom',
@@ -49,4 +36,3 @@ themeKey: 'borders',
 });
-exports.borderBottom = borderBottom;
-var borderLeft = (0, _style.default)({
+export const borderLeft = style({
   prop: 'borderLeft',
@@ -56,15 +42,11 @@ themeKey: 'borders',
 });
-exports.borderLeft = borderLeft;
-var borderColor = (0, _style.default)({
+export const borderColor = style({
   prop: 'borderColor',
   themeKey: 'palette'
 });
-exports.borderColor = borderColor;
-var borderRadius = (0, _style.default)({
+export const borderRadius = style({
   prop: 'borderRadius',
   themeKey: 'shape'
 });
-exports.borderRadius = borderRadius;
-var borders = (0, _compose.default)(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
-var _default = borders;
-exports.default = _default;
+const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
+export default borders;

breakpoints.js

@@ -1,24 +0,7 @@
-"use strict";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import PropTypes from 'prop-types';
+import merge from './merge'; // The breakpoint **start** at this value.
+// For instance with the first breakpoint xs: [xs, sm[.
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.handleBreakpoints = handleBreakpoints;
-exports.default = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _merge = _interopRequireDefault(require("./merge"));
-
-// The breakpoint **start** at this value.
-// For instance with the first breakpoint xs: [xs, sm[.
-var values = {
+const values = {
   xs: 0,
@@ -30,12 +13,9 @@ sm: 600,
 };
-var defaultBreakpoints = {
+const defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
   keys: ['xs', 'sm', 'md', 'lg', 'xl'],
-  up: function up(key) {
-    return "@media (min-width:".concat(values[key], "px)");
-  }
+  up: key => `@media (min-width:${values[key]}px)`
 };
-
-function handleBreakpoints(props, propValue, styleFromPropValue) {
+export function handleBreakpoints(props, propValue, styleFromPropValue) {
   if (process.env.NODE_ENV !== 'production') {
@@ -48,4 +28,4 @@ if (!props.theme) {
   if (Array.isArray(propValue)) {
-    var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
-    return propValue.reduce(function (acc, item, index) {
+    const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
+    return propValue.reduce((acc, item, index) => {
       acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
@@ -56,7 +36,6 @@ return acc;
 
-  if ((0, _typeof2.default)(propValue) === 'object') {
-    var _themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
-
-    return Object.keys(propValue).reduce(function (acc, breakpoint) {
-      acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
+  if (typeof propValue === 'object') {
+    const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
+    return Object.keys(propValue).reduce((acc, breakpoint) => {
+      acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
       return acc;
@@ -66,3 +45,3 @@ }, {});
 
-  var output = styleFromPropValue(propValue);
+  const output = styleFromPropValue(propValue);
   return output;
@@ -72,9 +51,9 @@ }
 function breakpoints(styleFunction) {
-  var newStyleFunction = function newStyleFunction(props) {
-    var base = styleFunction(props);
-    var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
-    var extended = themeBreakpoints.keys.reduce(function (acc, key) {
+  const newStyleFunction = props => {
+    const base = styleFunction(props);
+    const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
+    const extended = themeBreakpoints.keys.reduce((acc, key) => {
       if (props[key]) {
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction((0, _extends2.default)({
+        acc[themeBreakpoints.up(key)] = styleFunction(_extends({
           theme: props.theme
@@ -86,17 +65,16 @@ }, props[key]));
     }, null);
-    return (0, _merge.default)(base, extended);
+    return merge(base, extended);
   };
 
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? (0, _extends2.default)({}, styleFunction.propTypes, {
-    xs: _propTypes.default.object,
-    sm: _propTypes.default.object,
-    md: _propTypes.default.object,
-    lg: _propTypes.default.object,
-    xl: _propTypes.default.object
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
+    xs: PropTypes.object,
+    sm: PropTypes.object,
+    md: PropTypes.object,
+    lg: PropTypes.object,
+    xl: PropTypes.object
   }) : {};
-  newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl'].concat((0, _toConsumableArray2.default)(styleFunction.filterProps));
+  newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
   return newStyleFunction;
 }
 
-var _default = breakpoints;
-exports.default = _default;
+export default breakpoints;

compose.js

@@ -1,30 +0,13 @@
-"use strict";
+import merge from './merge';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+function compose(...styles) {
+  const fn = props => styles.reduce((acc, style) => {
+    const output = style(props);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+    if (output) {
+      return merge(acc, output);
+    }
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _merge = _interopRequireDefault(require("./merge"));
-
-function compose() {
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
-  }
-
-  var fn = function fn(props) {
-    return styles.reduce(function (acc, style) {
-      var output = style(props);
-
-      if (output) {
-        return (0, _merge.default)(acc, output);
-      }
-
-      return acc;
-    }, {});
-  }; // Alternative approach that doesn't yield any performance gain.
+    return acc;
+  }, {}); // Alternative approach that doesn't yield any performance gain.
   // const handlers = styles.reduce((acc, style) => {
@@ -46,12 +29,7 @@ //   style.filterProps.forEach(prop => {
 
-  fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce(function (acc, style) {
-    return (0, _extends2.default)(acc, style.propTypes);
-  }, {}) : {};
-  fn.filterProps = styles.reduce(function (acc, style) {
-    return acc.concat(style.filterProps);
-  }, []);
+  fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
+  fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
   return fn;
 }
 
-var _default = compose;
-exports.default = _default;
+export default compose;

css.js

@@ -1,21 +0,8 @@
-"use strict";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import PropTypes from 'prop-types';
+import merge from './merge';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _merge = _interopRequireDefault(require("./merge"));
-
 function omit(input, fields) {
-  var output = {};
-  Object.keys(input).forEach(function (prop) {
+  const output = {};
+  Object.keys(input).forEach(prop => {
     if (fields.indexOf(prop) === -1) {
@@ -29,7 +16,7 @@ output[prop] = input[prop];
 function css(styleFunction) {
-  var newStyleFunction = function newStyleFunction(props) {
-    var output = styleFunction(props);
+  const newStyleFunction = props => {
+    const output = styleFunction(props);
 
     if (props.css) {
-      return (0, _extends2.default)({}, (0, _merge.default)(output, styleFunction((0, _extends2.default)({
+      return _extends({}, merge(output, styleFunction(_extends({
         theme: props.theme
@@ -42,10 +29,9 @@ }, props.css))), omit(props.css, [styleFunction.filterProps]));
 
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? (0, _extends2.default)({}, styleFunction.propTypes, {
-    css: _propTypes.default.object
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
+    css: PropTypes.object
   }) : {};
-  newStyleFunction.filterProps = ['css'].concat((0, _toConsumableArray2.default)(styleFunction.filterProps));
+  newStyleFunction.filterProps = ['css', ...styleFunction.filterProps];
   return newStyleFunction;
 }
 
-var _default = css;
-exports.default = _default;
+export default css;

display.js

@@ -1,49 +0,27 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.whiteSpace = exports.visibility = exports.textOverflow = exports.overflow = exports.displayRaw = exports.displayPrint = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
-var displayPrint = (0, _style.default)({
+import style from './style';
+import compose from './compose';
+export const displayPrint = style({
   prop: 'displayPrint',
   cssProperty: false,
-  transform: function transform(value) {
-    return {
-      '@media print': {
-        display: value
-      }
-    };
-  }
+  transform: value => ({
+    '@media print': {
+      display: value
+    }
+  })
 });
-exports.displayPrint = displayPrint;
-var displayRaw = (0, _style.default)({
+export const displayRaw = style({
   prop: 'display'
 });
-exports.displayRaw = displayRaw;
-var overflow = (0, _style.default)({
+export const overflow = style({
   prop: 'overflow'
 });
-exports.overflow = overflow;
-var textOverflow = (0, _style.default)({
+export const textOverflow = style({
   prop: 'textOverflow'
 });
-exports.textOverflow = textOverflow;
-var visibility = (0, _style.default)({
+export const visibility = style({
   prop: 'visibility'
 });
-exports.visibility = visibility;
-var whiteSpace = (0, _style.default)({
+export const whiteSpace = style({
   prop: 'whiteSpace'
 });
-exports.whiteSpace = whiteSpace;
-
-var _default = (0, _compose.default)(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
-
-exports.default = _default;
+export default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);

flexbox.js

@@ -1,68 +0,43 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.justifySelf = exports.justifyItems = exports.alignSelf = exports.flexShrink = exports.flexGrow = exports.flex = exports.order = exports.alignContent = exports.alignItems = exports.justifyContent = exports.flexWrap = exports.flexDirection = exports.flexBasis = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
-var flexBasis = (0, _style.default)({
+import style from './style';
+import compose from './compose';
+export const flexBasis = style({
   prop: 'flexBasis'
 });
-exports.flexBasis = flexBasis;
-var flexDirection = (0, _style.default)({
+export const flexDirection = style({
   prop: 'flexDirection'
 });
-exports.flexDirection = flexDirection;
-var flexWrap = (0, _style.default)({
+export const flexWrap = style({
   prop: 'flexWrap'
 });
-exports.flexWrap = flexWrap;
-var justifyContent = (0, _style.default)({
+export const justifyContent = style({
   prop: 'justifyContent'
 });
-exports.justifyContent = justifyContent;
-var alignItems = (0, _style.default)({
+export const alignItems = style({
   prop: 'alignItems'
 });
-exports.alignItems = alignItems;
-var alignContent = (0, _style.default)({
+export const alignContent = style({
   prop: 'alignContent'
 });
-exports.alignContent = alignContent;
-var order = (0, _style.default)({
+export const order = style({
   prop: 'order'
 });
-exports.order = order;
-var flex = (0, _style.default)({
+export const flex = style({
   prop: 'flex'
 });
-exports.flex = flex;
-var flexGrow = (0, _style.default)({
+export const flexGrow = style({
   prop: 'flexGrow'
 });
-exports.flexGrow = flexGrow;
-var flexShrink = (0, _style.default)({
+export const flexShrink = style({
   prop: 'flexShrink'
 });
-exports.flexShrink = flexShrink;
-var alignSelf = (0, _style.default)({
+export const alignSelf = style({
   prop: 'alignSelf'
 });
-exports.alignSelf = alignSelf;
-var justifyItems = (0, _style.default)({
+export const justifyItems = style({
   prop: 'justifyItems'
 });
-exports.justifyItems = justifyItems;
-var justifySelf = (0, _style.default)({
+export const justifySelf = style({
   prop: 'justifySelf'
 });
-exports.justifySelf = justifySelf;
-var flexbox = (0, _compose.default)(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
-var _default = flexbox;
-exports.default = _default;
+const flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
+export default flexbox;

grid.js

@@ -1,64 +0,40 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.gridArea = exports.gridTemplateAreas = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridAutoRows = exports.gridAutoColumns = exports.gridAutoFlow = exports.gridRow = exports.gridColumn = exports.gridRowGap = exports.gridColumnGap = exports.gridGap = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
-var gridGap = (0, _style.default)({
+import style from './style';
+import compose from './compose';
+export const gridGap = style({
   prop: 'gridGap'
 });
-exports.gridGap = gridGap;
-var gridColumnGap = (0, _style.default)({
+export const gridColumnGap = style({
   prop: 'gridColumnGap'
 });
-exports.gridColumnGap = gridColumnGap;
-var gridRowGap = (0, _style.default)({
+export const gridRowGap = style({
   prop: 'gridRowGap'
 });
-exports.gridRowGap = gridRowGap;
-var gridColumn = (0, _style.default)({
+export const gridColumn = style({
   prop: 'gridColumn'
 });
-exports.gridColumn = gridColumn;
-var gridRow = (0, _style.default)({
+export const gridRow = style({
   prop: 'gridRow'
 });
-exports.gridRow = gridRow;
-var gridAutoFlow = (0, _style.default)({
+export const gridAutoFlow = style({
   prop: 'gridAutoFlow'
 });
-exports.gridAutoFlow = gridAutoFlow;
-var gridAutoColumns = (0, _style.default)({
+export const gridAutoColumns = style({
   prop: 'gridAutoColumns'
 });
-exports.gridAutoColumns = gridAutoColumns;
-var gridAutoRows = (0, _style.default)({
+export const gridAutoRows = style({
   prop: 'gridAutoRows'
 });
-exports.gridAutoRows = gridAutoRows;
-var gridTemplateColumns = (0, _style.default)({
+export const gridTemplateColumns = style({
   prop: 'gridTemplateColumns'
 });
-exports.gridTemplateColumns = gridTemplateColumns;
-var gridTemplateRows = (0, _style.default)({
+export const gridTemplateRows = style({
   prop: 'gridTemplateRows'
 });
-exports.gridTemplateRows = gridTemplateRows;
-var gridTemplateAreas = (0, _style.default)({
+export const gridTemplateAreas = style({
   prop: 'gridTemplateAreas'
 });
-exports.gridTemplateAreas = gridTemplateAreas;
-var gridArea = (0, _style.default)({
+export const gridArea = style({
   prop: 'gridArea'
 });
-exports.gridArea = gridArea;
-var grid = (0, _compose.default)(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-var _default = grid;
-exports.default = _default;
+const grid = compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
+export default grid;

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.11
+/** @license Material-UI v5.0.0-alpha.13
  *
@@ -6,235 +6,24 @@ * This source code is licensed under the MIT license found in the
  */
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  borders: true,
-  breakpoints: true,
-  compose: true,
-  css: true,
-  display: true,
-  flexbox: true,
-  grid: true,
-  palette: true,
-  positions: true,
-  shadows: true,
-  sizing: true,
-  spacing: true,
-  style: true,
-  typography: true,
-  visuallyHidden: true
-};
-Object.defineProperty(exports, "borders", {
-  enumerable: true,
-  get: function get() {
-    return _borders.default;
-  }
-});
-Object.defineProperty(exports, "breakpoints", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoints.default;
-  }
-});
-Object.defineProperty(exports, "compose", {
-  enumerable: true,
-  get: function get() {
-    return _compose.default;
-  }
-});
-Object.defineProperty(exports, "css", {
-  enumerable: true,
-  get: function get() {
-    return _css.default;
-  }
-});
-Object.defineProperty(exports, "display", {
-  enumerable: true,
-  get: function get() {
-    return _display.default;
-  }
-});
-Object.defineProperty(exports, "flexbox", {
-  enumerable: true,
-  get: function get() {
-    return _flexbox.default;
-  }
-});
-Object.defineProperty(exports, "grid", {
-  enumerable: true,
-  get: function get() {
-    return _grid.default;
-  }
-});
-Object.defineProperty(exports, "palette", {
-  enumerable: true,
-  get: function get() {
-    return _palette.default;
-  }
-});
-Object.defineProperty(exports, "positions", {
-  enumerable: true,
-  get: function get() {
-    return _positions.default;
-  }
-});
-Object.defineProperty(exports, "shadows", {
-  enumerable: true,
-  get: function get() {
-    return _shadows.default;
-  }
-});
-Object.defineProperty(exports, "sizing", {
-  enumerable: true,
-  get: function get() {
-    return _sizing.default;
-  }
-});
-Object.defineProperty(exports, "spacing", {
-  enumerable: true,
-  get: function get() {
-    return _spacing.default;
-  }
-});
-Object.defineProperty(exports, "style", {
-  enumerable: true,
-  get: function get() {
-    return _style.default;
-  }
-});
-Object.defineProperty(exports, "typography", {
-  enumerable: true,
-  get: function get() {
-    return _typography.default;
-  }
-});
-Object.defineProperty(exports, "visuallyHidden", {
-  enumerable: true,
-  get: function get() {
-    return _visuallyHidden.default;
-  }
-});
-
-var _borders = _interopRequireWildcard(require("./borders"));
-
-Object.keys(_borders).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _borders[key];
-    }
-  });
-});
-
-var _breakpoints = _interopRequireDefault(require("./breakpoints"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
-var _css = _interopRequireDefault(require("./css"));
-
-var _display = _interopRequireDefault(require("./display"));
-
-var _flexbox = _interopRequireWildcard(require("./flexbox"));
-
-Object.keys(_flexbox).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _flexbox[key];
-    }
-  });
-});
-
-var _grid = _interopRequireWildcard(require("./grid"));
-
-Object.keys(_grid).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _grid[key];
-    }
-  });
-});
-
-var _palette = _interopRequireWildcard(require("./palette"));
-
-Object.keys(_palette).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _palette[key];
-    }
-  });
-});
-
-var _positions = _interopRequireWildcard(require("./positions"));
-
-Object.keys(_positions).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _positions[key];
-    }
-  });
-});
-
-var _shadows = _interopRequireDefault(require("./shadows"));
-
-var _sizing = _interopRequireWildcard(require("./sizing"));
-
-Object.keys(_sizing).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _sizing[key];
-    }
-  });
-});
-
-var _spacing = _interopRequireWildcard(require("./spacing"));
-
-Object.keys(_spacing).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _spacing[key];
-    }
-  });
-});
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _typography = _interopRequireWildcard(require("./typography"));
-
-Object.keys(_typography).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _typography[key];
-    }
-  });
-});
-
-var _visuallyHidden = _interopRequireDefault(require("./visuallyHidden"));
+export { default as borders } from './borders';
+export * from './borders';
+export { default as breakpoints } from './breakpoints';
+export { default as compose } from './compose';
+export { default as css } from './css';
+export { default as display } from './display';
+export { default as flexbox } from './flexbox';
+export * from './flexbox';
+export { default as grid } from './grid';
+export * from './grid';
+export { default as palette } from './palette';
+export * from './palette';
+export { default as positions } from './positions';
+export * from './positions';
+export { default as shadows } from './shadows';
+export { default as sizing } from './sizing';
+export * from './sizing';
+export { default as spacing } from './spacing';
+export * from './spacing';
+export { default as style } from './style';
+export { default as typography } from './typography';
+export * from './typography';
+export { default as visuallyHidden } from './visuallyHidden';

memoize.js

@@ -1,11 +0,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = memoize;
-
-function memoize(fn) {
-  var cache = {};
-  return function (arg) {
+export default function memoize(fn) {
+  const cache = {};
+  return arg => {
     if (cache[arg] === undefined) {
@@ -12,0 +5,0 @@ cache[arg] = fn(arg);

merge.js

@@ -1,10 +0,3 @@
-"use strict";
+import { deepmerge } from '@material-ui/utils';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _utils = require("@material-ui/utils");
-
 function merge(acc, item) {
@@ -15,3 +8,3 @@ if (!item) {
 
-  return (0, _utils.deepmerge)(acc, item, {
+  return deepmerge(acc, item, {
     clone: false // No need to clone deep, it's way faster.
@@ -22,3 +15,2 @@
 
-var _default = merge;
-exports.default = _default;
+export default merge;

package.json

 {
   "name": "@material-ui/system",
-  "version": "5.0.0-alpha.11",
+  "version": "5.0.0-alpha.13",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI System - Design system for Material-UI.",
-  "main": "./index.js",
+  "main": "./node/index.js",
   "keywords": [
@@ -40,3 +40,3 @@ "react",
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "^5.0.0-alpha.8",
+    "@material-ui/utils": "^5.0.0-alpha.13",
     "prop-types": "^15.7.2"
@@ -49,6 +49,6 @@ },
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">=10.0.0"
   },
-  "module": "./esm/index.js",
+  "module": "./index.js",
   "typings": "./index.d.ts"
 }

palette.js

@@ -1,20 +0,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.bgcolor = exports.color = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
-var color = (0, _style.default)({
+import style from './style';
+import compose from './compose';
+export const color = style({
   prop: 'color',
   themeKey: 'palette'
 });
-exports.color = color;
-var bgcolor = (0, _style.default)({
+export const bgcolor = style({
   prop: 'bgcolor',
@@ -24,5 +12,3 @@ cssProperty: 'backgroundColor',
 });
-exports.bgcolor = bgcolor;
-var palette = (0, _compose.default)(color, bgcolor);
-var _default = palette;
-exports.default = _default;
+const palette = compose(color, bgcolor);
+export default palette;

positions.js

@@ -1,42 +0,22 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.position = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
-var position = (0, _style.default)({
+import style from './style';
+import compose from './compose';
+export const position = style({
   prop: 'position'
 });
-exports.position = position;
-var zIndex = (0, _style.default)({
+export const zIndex = style({
   prop: 'zIndex',
   themeKey: 'zIndex'
 });
-exports.zIndex = zIndex;
-var top = (0, _style.default)({
+export const top = style({
   prop: 'top'
 });
-exports.top = top;
-var right = (0, _style.default)({
+export const right = style({
   prop: 'right'
 });
-exports.right = right;
-var bottom = (0, _style.default)({
+export const bottom = style({
   prop: 'bottom'
 });
-exports.bottom = bottom;
-var left = (0, _style.default)({
+export const left = style({
   prop: 'left'
 });
-exports.left = left;
-
-var _default = (0, _compose.default)(position, zIndex, top, right, bottom, left);
-
-exports.default = _default;
+export default compose(position, zIndex, top, right, bottom, left);

responsivePropType.js

@@ -1,14 +0,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var responsivePropType = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.object, _propTypes.default.array]) : {};
-var _default = responsivePropType;
-exports.default = _default;
+import PropTypes from 'prop-types';
+const responsivePropType = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
+export default responsivePropType;

shadows.js

@@ -1,17 +0,6 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var boxShadow = (0, _style.default)({
+import style from './style';
+const boxShadow = style({
   prop: 'boxShadow',
   themeKey: 'shadows'
 });
-var _default = boxShadow;
-exports.default = _default;
+export default boxShadow;

sizing.js

@@ -1,66 +0,46 @@
-"use strict";
+import style from './style';
+import compose from './compose';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.boxSizing = exports.sizeHeight = exports.sizeWidth = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.width = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
 function transform(value) {
-  return value <= 1 ? "".concat(value * 100, "%") : value;
+  return value <= 1 ? `${value * 100}%` : value;
 }
 
-var width = (0, _style.default)({
+export const width = style({
   prop: 'width',
-  transform: transform
+  transform
 });
-exports.width = width;
-var maxWidth = (0, _style.default)({
+export const maxWidth = style({
   prop: 'maxWidth',
-  transform: transform
+  transform
 });
-exports.maxWidth = maxWidth;
-var minWidth = (0, _style.default)({
+export const minWidth = style({
   prop: 'minWidth',
-  transform: transform
+  transform
 });
-exports.minWidth = minWidth;
-var height = (0, _style.default)({
+export const height = style({
   prop: 'height',
-  transform: transform
+  transform
 });
-exports.height = height;
-var maxHeight = (0, _style.default)({
+export const maxHeight = style({
   prop: 'maxHeight',
-  transform: transform
+  transform
 });
-exports.maxHeight = maxHeight;
-var minHeight = (0, _style.default)({
+export const minHeight = style({
   prop: 'minHeight',
-  transform: transform
+  transform
 });
-exports.minHeight = minHeight;
-var sizeWidth = (0, _style.default)({
+export const sizeWidth = style({
   prop: 'size',
   cssProperty: 'width',
-  transform: transform
+  transform
 });
-exports.sizeWidth = sizeWidth;
-var sizeHeight = (0, _style.default)({
+export const sizeHeight = style({
   prop: 'size',
   cssProperty: 'height',
-  transform: transform
+  transform
 });
-exports.sizeHeight = sizeHeight;
-var boxSizing = (0, _style.default)({
+export const boxSizing = style({
   prop: 'boxSizing'
 });
-exports.boxSizing = boxSizing;
-var sizing = (0, _compose.default)(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
-var _default = sizing;
-exports.default = _default;
+const sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
+export default sizing;

spacing.js

@@ -1,26 +0,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createUnarySpacing = createUnarySpacing;
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
-
-var _breakpoints = require("./breakpoints");
-
-var _merge = _interopRequireDefault(require("./merge"));
-
-var _memoize = _interopRequireDefault(require("./memoize"));
-
-var properties = {
+import responsivePropType from './responsivePropType';
+import { handleBreakpoints } from './breakpoints';
+import merge from './merge';
+import memoize from './memoize';
+const properties = {
   m: 'margin',
   p: 'padding'
 };
-var directions = {
+const directions = {
   t: 'Top',
@@ -33,3 +17,3 @@ r: 'Right',
 };
-var aliases = {
+const aliases = {
   marginX: 'mx',
@@ -43,3 +27,3 @@ marginY: 'my',
 
-var getCssProperties = (0, _memoize.default)(function (prop) {
+const getCssProperties = memoize(prop => {
   // It's not a shorthand notation.
@@ -54,23 +38,16 @@ if (prop.length > 2) {
 
-  var _prop$split = prop.split(''),
-      _prop$split2 = (0, _slicedToArray2.default)(_prop$split, 2),
-      a = _prop$split2[0],
-      b = _prop$split2[1];
-
-  var property = properties[a];
-  var direction = directions[b] || '';
-  return Array.isArray(direction) ? direction.map(function (dir) {
-    return property + dir;
-  }) : [property + direction];
+  const [a, b] = prop.split('');
+  const property = properties[a];
+  const direction = directions[b] || '';
+  return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
-var spacingKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
+const spacingKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
+export function createUnarySpacing(theme) {
+  const themeSpacing = theme.spacing || 8;
 
-function createUnarySpacing(theme) {
-  var themeSpacing = theme.spacing || 8;
-
   if (typeof themeSpacing === 'number') {
-    return function (abs) {
+    return abs => {
       if (process.env.NODE_ENV !== 'production') {
         if (typeof abs !== 'number') {
-          console.error("Material-UI: Expected spacing argument to be a number, got ".concat(abs, "."));
+          console.error(`Material-UI: Expected spacing argument to be a number, got ${abs}.`);
         }
@@ -84,6 +61,6 @@ }
   if (Array.isArray(themeSpacing)) {
-    return function (abs) {
+    return abs => {
       if (process.env.NODE_ENV !== 'production') {
         if (abs > themeSpacing.length - 1) {
-          console.error(["Material-UI: The value provided (".concat(abs, ") overflows."), "The supported values are: ".concat(JSON.stringify(themeSpacing), "."), "".concat(abs, " > ").concat(themeSpacing.length - 1, ", you need to add the missing values.")].join('\n'));
+          console.error([`Material-UI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
         }
@@ -101,8 +78,6 @@ }
   if (process.env.NODE_ENV !== 'production') {
-    console.error(["Material-UI: The `theme.spacing` value (".concat(themeSpacing, ") is invalid."), 'It should be a number, an array or a function.'].join('\n'));
+    console.error([`Material-UI: The \`theme.spacing\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
   }
 
-  return function () {
-    return undefined;
-  };
+  return () => undefined;
 }
@@ -115,4 +90,4 @@
 
-  var abs = Math.abs(propValue);
-  var transformed = transformer(abs);
+  const abs = Math.abs(propValue);
+  const transformed = transformer(abs);
 
@@ -127,18 +102,16 @@ if (propValue >= 0) {
 
-  return "-".concat(transformed);
+  return `-${transformed}`;
 }
 
 function getStyleFromPropValue(cssProperties, transformer) {
-  return function (propValue) {
-    return cssProperties.reduce(function (acc, cssProperty) {
-      acc[cssProperty] = getValue(transformer, propValue);
-      return acc;
-    }, {});
-  };
+  return propValue => cssProperties.reduce((acc, cssProperty) => {
+    acc[cssProperty] = getValue(transformer, propValue);
+    return acc;
+  }, {});
 }
 
 function spacing(props) {
-  var theme = props.theme;
-  var transformer = createUnarySpacing(theme);
-  return Object.keys(props).map(function (prop) {
+  const theme = props.theme;
+  const transformer = createUnarySpacing(theme);
+  return Object.keys(props).map(prop => {
     // Using a hash computation over an array iteration could be faster, but with only 28 items,
@@ -150,15 +123,14 @@ // it's doesn't worth the bundle size.
 
-    var cssProperties = getCssProperties(prop);
-    var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-    var propValue = props[prop];
-    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
-  }).reduce(_merge.default, {});
+    const cssProperties = getCssProperties(prop);
+    const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
+    const propValue = props[prop];
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }).reduce(merge, {});
 }
 
-spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce(function (obj, key) {
-  obj[key] = _responsivePropType.default;
+spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
+  obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
 spacing.filterProps = spacingKeys;
-var _default = spacing;
-exports.default = _default;
+export default spacing;

style.js

@@ -1,16 +0,4 @@
-"use strict";
+import responsivePropType from './responsivePropType';
+import { handleBreakpoints } from './breakpoints';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
-
-var _breakpoints = require("./breakpoints");
-
 function getPath(obj, path) {
@@ -21,15 +9,14 @@ if (!path || typeof path !== 'string') {
 
-  return path.split('.').reduce(function (acc, item) {
-    return acc && acc[item] ? acc[item] : null;
-  }, obj);
+  return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
 }
 
 function style(options) {
-  var prop = options.prop,
-      _options$cssProperty = options.cssProperty,
-      cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
-      themeKey = options.themeKey,
-      transform = options.transform;
+  const {
+    prop,
+    cssProperty = options.prop,
+    themeKey,
+    transform
+  } = options;
 
-  var fn = function fn(props) {
+  const fn = props => {
     if (props[prop] == null) {
@@ -39,8 +26,8 @@ return null;
 
-    var propValue = props[prop];
-    var theme = props.theme;
-    var themeMapping = getPath(theme, themeKey) || {};
+    const propValue = props[prop];
+    const theme = props.theme;
+    const themeMapping = getPath(theme, themeKey) || {};
 
-    var styleFromPropValue = function styleFromPropValue(propValueFinal) {
-      var value;
+    const styleFromPropValue = propValueFinal => {
+      let value;
 
@@ -63,9 +50,13 @@ if (typeof themeMapping === 'function') {
 
-      return (0, _defineProperty2.default)({}, cssProperty, value);
+      return {
+        [cssProperty]: value
+      };
     };
 
-    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
+    return handleBreakpoints(props, propValue, styleFromPropValue);
   };
 
-  fn.propTypes = process.env.NODE_ENV !== 'production' ? (0, _defineProperty2.default)({}, prop, _responsivePropType.default) : {};
+  fn.propTypes = process.env.NODE_ENV !== 'production' ? {
+    [prop]: responsivePropType
+  } : {};
   fn.filterProps = [prop];
@@ -75,3 +66,2 @@ return fn;
 
-var _default = style;
-exports.default = _default;
+export default style;

typography.js

@@ -1,48 +0,29 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = void 0;
-
-var _style = _interopRequireDefault(require("./style"));
-
-var _compose = _interopRequireDefault(require("./compose"));
-
-var fontFamily = (0, _style.default)({
+import style from './style';
+import compose from './compose';
+export const fontFamily = style({
   prop: 'fontFamily',
   themeKey: 'typography'
 });
-exports.fontFamily = fontFamily;
-var fontSize = (0, _style.default)({
+export const fontSize = style({
   prop: 'fontSize',
   themeKey: 'typography'
 });
-exports.fontSize = fontSize;
-var fontStyle = (0, _style.default)({
+export const fontStyle = style({
   prop: 'fontStyle',
   themeKey: 'typography'
 });
-exports.fontStyle = fontStyle;
-var fontWeight = (0, _style.default)({
+export const fontWeight = style({
   prop: 'fontWeight',
   themeKey: 'typography'
 });
-exports.fontWeight = fontWeight;
-var letterSpacing = (0, _style.default)({
+export const letterSpacing = style({
   prop: 'letterSpacing'
 });
-exports.letterSpacing = letterSpacing;
-var lineHeight = (0, _style.default)({
+export const lineHeight = style({
   prop: 'lineHeight'
 });
-exports.lineHeight = lineHeight;
-var textAlign = (0, _style.default)({
+export const textAlign = style({
   prop: 'textAlign'
 });
-exports.textAlign = textAlign;
-var typography = (0, _compose.default)(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
-var _default = typography;
-exports.default = _default;
+const typography = compose(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+export default typography;

visuallyHidden.js

@@ -1,8 +0,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var visuallyHidden = {
+const visuallyHidden = {
   border: 0,
@@ -18,3 +12,2 @@ clip: 'rect(0 0 0 0)',
 };
-var _default = visuallyHidden;
-exports.default = _default;
+export default visuallyHidden;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

739676

increased by6.51%

Number of package files

81

increased by30.65%

Lines of code

2973

increased by23.88%

Worsened metrics

Number of low supply chain risk alerts

40

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@material-ui/utils@^5.0.0-alpha.13