@material-ui/system - npm Package Compare versions

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

borders.js

@@ -1,4 +0,14 @@
-import style from './style';
-import compose from './compose';
+"use strict";
 
+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) {
@@ -12,3 +22,3 @@ if (typeof value !== 'number') {
 
-export const border = style({
+const border = (0, _style.default)({
   prop: 'border',
@@ -18,3 +28,4 @@ themeKey: 'borders',
 });
-export const borderTop = style({
+exports.border = border;
+const borderTop = (0, _style.default)({
   prop: 'borderTop',
@@ -24,3 +35,4 @@ themeKey: 'borders',
 });
-export const borderRight = style({
+exports.borderTop = borderTop;
+const borderRight = (0, _style.default)({
   prop: 'borderRight',
@@ -30,3 +42,4 @@ themeKey: 'borders',
 });
-export const borderBottom = style({
+exports.borderRight = borderRight;
+const borderBottom = (0, _style.default)({
   prop: 'borderBottom',
@@ -36,3 +49,4 @@ themeKey: 'borders',
 });
-export const borderLeft = style({
+exports.borderBottom = borderBottom;
+const borderLeft = (0, _style.default)({
   prop: 'borderLeft',
@@ -42,11 +56,15 @@ themeKey: 'borders',
 });
-export const borderColor = style({
+exports.borderLeft = borderLeft;
+const borderColor = (0, _style.default)({
   prop: 'borderColor',
   themeKey: 'palette'
 });
-export const borderRadius = style({
+exports.borderColor = borderColor;
+const borderRadius = (0, _style.default)({
   prop: 'borderRadius',
   themeKey: 'shape'
 });
-const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
-export default borders;
+exports.borderRadius = borderRadius;
+const borders = (0, _compose.default)(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
+var _default = borders;
+exports.default = _default;

breakpoints.js

@@ -1,6 +0,19 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import PropTypes from 'prop-types';
-import merge from './merge'; // The breakpoint **start** at this value.
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleBreakpoints = handleBreakpoints;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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[.
-
 const values = {
@@ -19,3 +32,4 @@ xs: 0,
 };
-export function handleBreakpoints(props, propValue, styleFromPropValue) {
+
+function handleBreakpoints(props, propValue, styleFromPropValue) {
   if (process.env.NODE_ENV !== 'production') {
@@ -38,3 +52,10 @@ if (!props.theme) {
     return Object.keys(propValue).reduce((acc, breakpoint) => {
-      acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
+      // key is breakpoint
+      if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+        acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
+      } else {
+        const cssKey = breakpoint;
+        acc[cssKey] = propValue[cssKey];
+      }
+
       return acc;
@@ -55,3 +76,3 @@ }, {});
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction(_extends({
+        acc[themeBreakpoints.up(key)] = styleFunction((0, _extends2.default)({
           theme: props.theme
@@ -63,11 +84,11 @@ }, props[key]));
     }, null);
-    return merge(base, extended);
+    return (0, _merge.default)(base, extended);
   };
 
-  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.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
   }) : {};
@@ -78,2 +99,3 @@ newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
 
-export default breakpoints;
+var _default = breakpoints;
+exports.default = _default;

compose.js

@@ -1,3 +0,12 @@
-import merge from './merge';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _merge = _interopRequireDefault(require("./merge"));
+
 function compose(...styles) {
@@ -8,3 +17,3 @@ const fn = props => styles.reduce((acc, style) => {
     if (output) {
-      return merge(acc, output);
+      return (0, _merge.default)(acc, output);
     }
@@ -35,2 +44,3 @@
 
-export default compose;
+var _default = compose;
+exports.default = _default;

css.js

@@ -1,5 +0,16 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import PropTypes from 'prop-types';
-import merge from './merge';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _merge = _interopRequireDefault(require("./merge"));
+
 function omit(input, fields) {
@@ -20,3 +31,3 @@ const output = {};
     if (props.css) {
-      return _extends({}, merge(output, styleFunction(_extends({
+      return (0, _extends2.default)({}, (0, _merge.default)(output, styleFunction((0, _extends2.default)({
         theme: props.theme
@@ -29,4 +40,4 @@ }, props.css))), omit(props.css, [styleFunction.filterProps]));
 
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
-    css: PropTypes.object
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? (0, _extends2.default)({}, styleFunction.propTypes, {
+    css: _propTypes.default.object
   }) : {};
@@ -37,2 +48,3 @@ newStyleFunction.filterProps = ['css', ...styleFunction.filterProps];
 
-export default css;
+var _default = css;
+exports.default = _default;

display.js

@@ -1,4 +0,15 @@
-import style from './style';
-import compose from './compose';
-export const displayPrint = style({
+"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"));
+
+const displayPrint = (0, _style.default)({
   prop: 'displayPrint',
@@ -12,17 +23,26 @@ cssProperty: false,
 });
-export const displayRaw = style({
+exports.displayPrint = displayPrint;
+const displayRaw = (0, _style.default)({
   prop: 'display'
 });
-export const overflow = style({
+exports.displayRaw = displayRaw;
+const overflow = (0, _style.default)({
   prop: 'overflow'
 });
-export const textOverflow = style({
+exports.overflow = overflow;
+const textOverflow = (0, _style.default)({
   prop: 'textOverflow'
 });
-export const visibility = style({
+exports.textOverflow = textOverflow;
+const visibility = (0, _style.default)({
   prop: 'visibility'
 });
-export const whiteSpace = style({
+exports.visibility = visibility;
+const whiteSpace = (0, _style.default)({
   prop: 'whiteSpace'
 });
-export default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
+exports.whiteSpace = whiteSpace;
+
+var _default = (0, _compose.default)(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
+
+exports.default = _default;

flexbox.js

@@ -1,43 +0,68 @@
-import style from './style';
-import compose from './compose';
-export const flexBasis = style({
+"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"));
+
+const flexBasis = (0, _style.default)({
   prop: 'flexBasis'
 });
-export const flexDirection = style({
+exports.flexBasis = flexBasis;
+const flexDirection = (0, _style.default)({
   prop: 'flexDirection'
 });
-export const flexWrap = style({
+exports.flexDirection = flexDirection;
+const flexWrap = (0, _style.default)({
   prop: 'flexWrap'
 });
-export const justifyContent = style({
+exports.flexWrap = flexWrap;
+const justifyContent = (0, _style.default)({
   prop: 'justifyContent'
 });
-export const alignItems = style({
+exports.justifyContent = justifyContent;
+const alignItems = (0, _style.default)({
   prop: 'alignItems'
 });
-export const alignContent = style({
+exports.alignItems = alignItems;
+const alignContent = (0, _style.default)({
   prop: 'alignContent'
 });
-export const order = style({
+exports.alignContent = alignContent;
+const order = (0, _style.default)({
   prop: 'order'
 });
-export const flex = style({
+exports.order = order;
+const flex = (0, _style.default)({
   prop: 'flex'
 });
-export const flexGrow = style({
+exports.flex = flex;
+const flexGrow = (0, _style.default)({
   prop: 'flexGrow'
 });
-export const flexShrink = style({
+exports.flexGrow = flexGrow;
+const flexShrink = (0, _style.default)({
   prop: 'flexShrink'
 });
-export const alignSelf = style({
+exports.flexShrink = flexShrink;
+const alignSelf = (0, _style.default)({
   prop: 'alignSelf'
 });
-export const justifyItems = style({
+exports.alignSelf = alignSelf;
+const justifyItems = (0, _style.default)({
   prop: 'justifyItems'
 });
-export const justifySelf = style({
+exports.justifyItems = justifyItems;
+const justifySelf = (0, _style.default)({
   prop: 'justifySelf'
 });
-const flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
-export default flexbox;
+exports.justifySelf = justifySelf;
+const flexbox = (0, _compose.default)(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
+var _default = flexbox;
+exports.default = _default;

grid.js

@@ -1,40 +0,64 @@
-import style from './style';
-import compose from './compose';
-export const gridGap = style({
+"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"));
+
+const gridGap = (0, _style.default)({
   prop: 'gridGap'
 });
-export const gridColumnGap = style({
+exports.gridGap = gridGap;
+const gridColumnGap = (0, _style.default)({
   prop: 'gridColumnGap'
 });
-export const gridRowGap = style({
+exports.gridColumnGap = gridColumnGap;
+const gridRowGap = (0, _style.default)({
   prop: 'gridRowGap'
 });
-export const gridColumn = style({
+exports.gridRowGap = gridRowGap;
+const gridColumn = (0, _style.default)({
   prop: 'gridColumn'
 });
-export const gridRow = style({
+exports.gridColumn = gridColumn;
+const gridRow = (0, _style.default)({
   prop: 'gridRow'
 });
-export const gridAutoFlow = style({
+exports.gridRow = gridRow;
+const gridAutoFlow = (0, _style.default)({
   prop: 'gridAutoFlow'
 });
-export const gridAutoColumns = style({
+exports.gridAutoFlow = gridAutoFlow;
+const gridAutoColumns = (0, _style.default)({
   prop: 'gridAutoColumns'
 });
-export const gridAutoRows = style({
+exports.gridAutoColumns = gridAutoColumns;
+const gridAutoRows = (0, _style.default)({
   prop: 'gridAutoRows'
 });
-export const gridTemplateColumns = style({
+exports.gridAutoRows = gridAutoRows;
+const gridTemplateColumns = (0, _style.default)({
   prop: 'gridTemplateColumns'
 });
-export const gridTemplateRows = style({
+exports.gridTemplateColumns = gridTemplateColumns;
+const gridTemplateRows = (0, _style.default)({
   prop: 'gridTemplateRows'
 });
-export const gridTemplateAreas = style({
+exports.gridTemplateRows = gridTemplateRows;
+const gridTemplateAreas = (0, _style.default)({
   prop: 'gridTemplateAreas'
 });
-export const gridArea = style({
+exports.gridTemplateAreas = gridTemplateAreas;
+const gridArea = (0, _style.default)({
   prop: 'gridArea'
 });
-const grid = compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-export default grid;
+exports.gridArea = gridArea;
+const grid = (0, _compose.default)(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
+var _default = grid;
+exports.default = _default;

index.d.ts

@@ -33,2 +33,8 @@ import * as React from 'react';
 
+export function handleBreakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(
+  props: Props,
+  propValue: any,
+  styleFromPropValue: (value: any) => any
+): any;
+
 /**
@@ -35,0 +41,0 @@ * @returns An enhanced stylefunction that considers breakpoints

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.13
+/** @license Material-UI v5.0.0-alpha.14
  *
@@ -6,24 +6,250 @@ * This source code is licensed under the MIT license found in the
  */
-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';
+"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,
+  handleBreakpoints: 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 () {
+    return _borders.default;
+  }
+});
+Object.defineProperty(exports, "breakpoints", {
+  enumerable: true,
+  get: function () {
+    return _breakpoints.default;
+  }
+});
+Object.defineProperty(exports, "handleBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _breakpoints.handleBreakpoints;
+  }
+});
+Object.defineProperty(exports, "compose", {
+  enumerable: true,
+  get: function () {
+    return _compose.default;
+  }
+});
+Object.defineProperty(exports, "css", {
+  enumerable: true,
+  get: function () {
+    return _css.default;
+  }
+});
+Object.defineProperty(exports, "display", {
+  enumerable: true,
+  get: function () {
+    return _display.default;
+  }
+});
+Object.defineProperty(exports, "flexbox", {
+  enumerable: true,
+  get: function () {
+    return _flexbox.default;
+  }
+});
+Object.defineProperty(exports, "grid", {
+  enumerable: true,
+  get: function () {
+    return _grid.default;
+  }
+});
+Object.defineProperty(exports, "palette", {
+  enumerable: true,
+  get: function () {
+    return _palette.default;
+  }
+});
+Object.defineProperty(exports, "positions", {
+  enumerable: true,
+  get: function () {
+    return _positions.default;
+  }
+});
+Object.defineProperty(exports, "shadows", {
+  enumerable: true,
+  get: function () {
+    return _shadows.default;
+  }
+});
+Object.defineProperty(exports, "sizing", {
+  enumerable: true,
+  get: function () {
+    return _sizing.default;
+  }
+});
+Object.defineProperty(exports, "spacing", {
+  enumerable: true,
+  get: function () {
+    return _spacing.default;
+  }
+});
+Object.defineProperty(exports, "style", {
+  enumerable: true,
+  get: function () {
+    return _style.default;
+  }
+});
+Object.defineProperty(exports, "typography", {
+  enumerable: true,
+  get: function () {
+    return _typography.default;
+  }
+});
+Object.defineProperty(exports, "visuallyHidden", {
+  enumerable: true,
+  get: function () {
+    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;
+  if (key in exports && exports[key] === _borders[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _borders[key];
+    }
+  });
+});
+
+var _breakpoints = _interopRequireWildcard(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;
+  if (key in exports && exports[key] === _flexbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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;
+  if (key in exports && exports[key] === _grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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;
+  if (key in exports && exports[key] === _palette[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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;
+  if (key in exports && exports[key] === _positions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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;
+  if (key in exports && exports[key] === _sizing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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;
+  if (key in exports && exports[key] === _spacing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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;
+  if (key in exports && exports[key] === _typography[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _typography[key];
+    }
+  });
+});
+
+var _visuallyHidden = _interopRequireDefault(require("./visuallyHidden"));

legacy/breakpoints.js

@@ -42,3 +42,10 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
     return Object.keys(propValue).reduce(function (acc, breakpoint) {
-      acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
+      // key is breakpoint
+      if (Object.keys(_themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+        acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
+      } else {
+        var cssKey = breakpoint;
+        acc[cssKey] = propValue[cssKey];
+      }
+
       return acc;
@@ -45,0 +52,0 @@ }, {});

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.13
+/** @license Material-UI v5.0.0-alpha.14
  *
@@ -9,2 +9,3 @@ * This source code is licensed under the MIT license found in the
 export { default as breakpoints } from './breakpoints';
+export { handleBreakpoints } from './breakpoints';
 export { default as compose } from './compose';
@@ -11,0 +12,0 @@ export { default as css } from './css';

legacy/palette.js

@@ -12,3 +12,7 @@ import style from './style';
 });
-var palette = compose(color, bgcolor);
+export var backgroundColor = style({
+  prop: 'backgroundColor',
+  themeKey: 'palette'
+});
+var palette = compose(color, bgcolor, backgroundColor);
 export default palette;

memoize.js

@@ -1,2 +0,9 @@
-export default function memoize(fn) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = memoize;
+
+function memoize(fn) {
   const cache = {};
@@ -3,0 +10,0 @@ return arg => {

merge.js

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

modern/breakpoints.js

@@ -37,3 +37,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     return Object.keys(propValue).reduce((acc, breakpoint) => {
-      acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
+      // key is breakpoint
+      if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+        acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);
+      } else {
+        const cssKey = breakpoint;
+        acc[cssKey] = propValue[cssKey];
+      }
+
       return acc;
@@ -40,0 +47,0 @@ }, {});

modern/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.13
+/** @license Material-UI v5.0.0-alpha.14
  *
@@ -9,2 +9,3 @@ * This source code is licensed under the MIT license found in the
 export { default as breakpoints } from './breakpoints';
+export { handleBreakpoints } from './breakpoints';
 export { default as compose } from './compose';
@@ -11,0 +12,0 @@ export { default as css } from './css';

modern/palette.js

@@ -12,3 +12,7 @@ import style from './style';
 });
-const palette = compose(color, bgcolor);
+export const backgroundColor = style({
+  prop: 'backgroundColor',
+  themeKey: 'palette'
+});
+const palette = compose(color, bgcolor, backgroundColor);
 export default palette;

package.json

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

palette.js

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

positions.js

@@ -1,22 +0,42 @@
-import style from './style';
-import compose from './compose';
-export const position = style({
+"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"));
+
+const position = (0, _style.default)({
   prop: 'position'
 });
-export const zIndex = style({
+exports.position = position;
+const zIndex = (0, _style.default)({
   prop: 'zIndex',
   themeKey: 'zIndex'
 });
-export const top = style({
+exports.zIndex = zIndex;
+const top = (0, _style.default)({
   prop: 'top'
 });
-export const right = style({
+exports.top = top;
+const right = (0, _style.default)({
   prop: 'right'
 });
-export const bottom = style({
+exports.right = right;
+const bottom = (0, _style.default)({
   prop: 'bottom'
 });
-export const left = style({
+exports.bottom = bottom;
+const left = (0, _style.default)({
   prop: 'left'
 });
-export default compose(position, zIndex, top, right, bottom, left);
+exports.left = left;
+
+var _default = (0, _compose.default)(position, zIndex, top, right, bottom, left);
+
+exports.default = _default;

responsivePropType.js

@@ -1,3 +0,14 @@
-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;
+"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"));
+
+const 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;

shadows.js

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

sizing.js

@@ -1,4 +0,14 @@
-import style from './style';
-import compose from './compose';
+"use strict";
 
+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) {
@@ -8,27 +18,33 @@ return value <= 1 ? `${value * 100}%` : value;
 
-export const width = style({
+const width = (0, _style.default)({
   prop: 'width',
   transform
 });
-export const maxWidth = style({
+exports.width = width;
+const maxWidth = (0, _style.default)({
   prop: 'maxWidth',
   transform
 });
-export const minWidth = style({
+exports.maxWidth = maxWidth;
+const minWidth = (0, _style.default)({
   prop: 'minWidth',
   transform
 });
-export const height = style({
+exports.minWidth = minWidth;
+const height = (0, _style.default)({
   prop: 'height',
   transform
 });
-export const maxHeight = style({
+exports.height = height;
+const maxHeight = (0, _style.default)({
   prop: 'maxHeight',
   transform
 });
-export const minHeight = style({
+exports.maxHeight = maxHeight;
+const minHeight = (0, _style.default)({
   prop: 'minHeight',
   transform
 });
-export const sizeWidth = style({
+exports.minHeight = minHeight;
+const sizeWidth = (0, _style.default)({
   prop: 'size',
@@ -38,3 +54,4 @@ cssProperty: 'width',
 });
-export const sizeHeight = style({
+exports.sizeWidth = sizeWidth;
+const sizeHeight = (0, _style.default)({
   prop: 'size',
@@ -44,6 +61,9 @@ cssProperty: 'height',
 });
-export const boxSizing = style({
+exports.sizeHeight = sizeHeight;
+const boxSizing = (0, _style.default)({
   prop: 'boxSizing'
 });
-const sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
-export default sizing;
+exports.boxSizing = boxSizing;
+const sizing = (0, _compose.default)(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
+var _default = sizing;
+exports.default = _default;

spacing.js

@@ -1,5 +0,19 @@
-import responsivePropType from './responsivePropType';
-import { handleBreakpoints } from './breakpoints';
-import merge from './merge';
-import memoize from './memoize';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUnarySpacing = createUnarySpacing;
+exports.default = void 0;
+
+var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
+
+var _breakpoints = require("./breakpoints");
+
+var _merge = _interopRequireDefault(require("./merge"));
+
+var _memoize = _interopRequireDefault(require("./memoize"));
+
 const properties = {
@@ -26,3 +40,3 @@ m: 'margin',
 
-const getCssProperties = memoize(prop => {
+const getCssProperties = (0, _memoize.default)(prop => {
   // It's not a shorthand notation.
@@ -43,3 +57,4 @@ if (prop.length > 2) {
 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) {
+
+function createUnarySpacing(theme) {
   const themeSpacing = theme.spacing || 8;
@@ -121,11 +136,12 @@
     const propValue = props[prop];
-    return handleBreakpoints(props, propValue, styleFromPropValue);
-  }).reduce(merge, {});
+    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
+  }).reduce(_merge.default, {});
 }
 
 spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
-  obj[key] = responsivePropType;
+  obj[key] = _responsivePropType.default;
   return obj;
 }, {}) : {};
 spacing.filterProps = spacingKeys;
-export default spacing;
+var _default = spacing;
+exports.default = _default;

style.js

@@ -1,4 +0,14 @@
-import responsivePropType from './responsivePropType';
-import { handleBreakpoints } from './breakpoints';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
+
+var _breakpoints = require("./breakpoints");
+
 function getPath(obj, path) {
@@ -53,7 +63,7 @@ if (!path || typeof path !== 'string') {
 
-    return handleBreakpoints(props, propValue, styleFromPropValue);
+    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
   };
 
   fn.propTypes = process.env.NODE_ENV !== 'production' ? {
-    [prop]: responsivePropType
+    [prop]: _responsivePropType.default
   } : {};
@@ -64,2 +74,3 @@ fn.filterProps = [prop];
 
-export default style;
+var _default = style;
+exports.default = _default;

typography.js

@@ -1,29 +0,48 @@
-import style from './style';
-import compose from './compose';
-export const fontFamily = style({
+"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"));
+
+const fontFamily = (0, _style.default)({
   prop: 'fontFamily',
   themeKey: 'typography'
 });
-export const fontSize = style({
+exports.fontFamily = fontFamily;
+const fontSize = (0, _style.default)({
   prop: 'fontSize',
   themeKey: 'typography'
 });
-export const fontStyle = style({
+exports.fontSize = fontSize;
+const fontStyle = (0, _style.default)({
   prop: 'fontStyle',
   themeKey: 'typography'
 });
-export const fontWeight = style({
+exports.fontStyle = fontStyle;
+const fontWeight = (0, _style.default)({
   prop: 'fontWeight',
   themeKey: 'typography'
 });
-export const letterSpacing = style({
+exports.fontWeight = fontWeight;
+const letterSpacing = (0, _style.default)({
   prop: 'letterSpacing'
 });
-export const lineHeight = style({
+exports.letterSpacing = letterSpacing;
+const lineHeight = (0, _style.default)({
   prop: 'lineHeight'
 });
-export const textAlign = style({
+exports.lineHeight = lineHeight;
+const textAlign = (0, _style.default)({
   prop: 'textAlign'
 });
-const typography = compose(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
-export default typography;
+exports.textAlign = textAlign;
+const typography = (0, _compose.default)(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+var _default = typography;
+exports.default = _default;

visuallyHidden.js

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

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

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

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

Improved metrics

Total package byte prevSize

748907

increased by1.25%

Lines of code

3032

increased by1.98%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

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