styled-system - npm Package Compare versions

Comparing version 2.0.0-0 to 2.0.0-1

dist/index.js

@@ -6,336 +6,356 @@ 'use strict';
 });
-exports.disabled = exports.active = exports.focus = exports.hover = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.backgroundPosition = exports.backgroundSize = exports.backgroundImage = exports.background = exports.boxShadow = exports.borderColor = exports.borderRadius = exports.borders = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.border = exports.getBorder = exports.alignSelf = exports.flex = exports.flexDirection = exports.flexWrap = exports.justifyContent = exports.alignContent = exports.alignItems = exports.size = exports.sizeHeight = exports.sizeWidth = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.display = exports.letterSpacing = exports.fontWeight = exports.lineHeight = exports.textAlign = exports.fontFamily = exports.color = exports.bgColor = exports.textColor = exports.fontSize = exports.width = exports.util = exports.space = exports.propTypes = exports.theme = exports.responsiveStyle = exports.pseudoStyle = exports.style = undefined;
+exports.propTypes = exports.util = exports.space = exports.themeGet = exports.responsiveStyle = exports.pseudoStyle = exports.style = exports.borderWidth = exports.theme = exports.disabled = exports.active = exports.focus = exports.hover = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.backgroundPosition = exports.backgroundSize = exports.backgroundImage = exports.background = exports.boxShadow = exports.borderRadius = exports.borderColor = exports.borders = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = exports.border = exports.alignSelf = exports.flex = exports.flexDirection = exports.flexWrap = exports.justifyContent = exports.alignContent = exports.alignItems = exports.ratio = exports.size = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.display = exports.letterSpacing = exports.fontWeight = exports.lineHeight = exports.textAlign = exports.fontFamily = exports.color = exports.bgColor = exports.textColor = exports.fontSize = exports.width = undefined;
 
-var _assign = require('babel-runtime/core-js/object/assign');
+var _keys = require('babel-runtime/core-js/object/keys');
 
-var _assign2 = _interopRequireDefault(_assign);
+var _keys2 = _interopRequireDefault(_keys);
 
-var _util2 = require('./util');
+var _styles = require('./styles');
 
-Object.defineProperty(exports, 'style', {
+Object.defineProperty(exports, 'width', {
   enumerable: true,
   get: function get() {
-    return _util2.style;
+    return _styles.width;
   }
 });
-Object.defineProperty(exports, 'pseudoStyle', {
+Object.defineProperty(exports, 'fontSize', {
   enumerable: true,
   get: function get() {
-    return _util2.pseudoStyle;
+    return _styles.fontSize;
   }
 });
-Object.defineProperty(exports, 'responsiveStyle', {
+Object.defineProperty(exports, 'textColor', {
   enumerable: true,
   get: function get() {
-    return _util2.responsiveStyle;
+    return _styles.textColor;
   }
 });
-Object.defineProperty(exports, 'theme', {
+Object.defineProperty(exports, 'bgColor', {
   enumerable: true,
   get: function get() {
-    return _util2.theme;
+    return _styles.bgColor;
   }
 });
-
-var _propTypes = require('./prop-types');
-
-Object.defineProperty(exports, 'propTypes', {
+Object.defineProperty(exports, 'color', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_propTypes).default;
+    return _styles.color;
   }
 });
-
-var _space = require('./space');
-
-Object.defineProperty(exports, 'space', {
+Object.defineProperty(exports, 'fontFamily', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_space).default;
+    return _styles.fontFamily;
   }
 });
-
-var util = _interopRequireWildcard(_util2);
-
-var _util = _interopRequireWildcard(_util2);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.util = _util;
-
-// core
-
-var getWidth = function getWidth(n) {
-  return !util.num(n) || n > 1 ? util.px(n) : n * 100 + '%';
-};
-var width = exports.width = (0, _util2.responsiveStyle)({
-  prop: 'width',
-  alias: 'w',
-  getter: getWidth
+Object.defineProperty(exports, 'textAlign', {
+  enumerable: true,
+  get: function get() {
+    return _styles.textAlign;
+  }
 });
-
-var fontSize = exports.fontSize = (0, _util2.responsiveStyle)({
-  prop: 'fontSize',
-  alias: 'f',
-  key: 'fontSizes',
-  numberToPx: true
+Object.defineProperty(exports, 'lineHeight', {
+  enumerable: true,
+  get: function get() {
+    return _styles.lineHeight;
+  }
 });
-
-var textColor = exports.textColor = (0, _util2.responsiveStyle)({
-  prop: 'color',
-  key: 'colors'
+Object.defineProperty(exports, 'fontWeight', {
+  enumerable: true,
+  get: function get() {
+    return _styles.fontWeight;
+  }
 });
-
-var bgColor = exports.bgColor = (0, _util2.responsiveStyle)({
-  prop: 'bg',
-  cssProperty: 'backgroundColor',
-  key: 'colors'
+Object.defineProperty(exports, 'letterSpacing', {
+  enumerable: true,
+  get: function get() {
+    return _styles.letterSpacing;
+  }
 });
-
-var color = exports.color = function color(props) {
-  return (0, _assign2.default)({}, textColor(props), bgColor(props));
-};
-
-// typography
-var fontFamily = exports.fontFamily = (0, _util2.responsiveStyle)({
-  prop: 'fontFamily',
-  alias: 'font',
-  key: 'fonts'
+Object.defineProperty(exports, 'display', {
+  enumerable: true,
+  get: function get() {
+    return _styles.display;
+  }
 });
-
-var textAlign = exports.textAlign = (0, _util2.responsiveStyle)({
-  prop: 'textAlign'
+Object.defineProperty(exports, 'maxWidth', {
+  enumerable: true,
+  get: function get() {
+    return _styles.maxWidth;
+  }
 });
-
-var lineHeight = exports.lineHeight = (0, _util2.style)({
-  prop: 'lineHeight',
-  key: 'lineHeights'
+Object.defineProperty(exports, 'minWidth', {
+  enumerable: true,
+  get: function get() {
+    return _styles.minWidth;
+  }
 });
-
-var fontWeight = exports.fontWeight = (0, _util2.style)({
-  prop: 'fontWeight',
-  key: 'fontWeights'
+Object.defineProperty(exports, 'height', {
+  enumerable: true,
+  get: function get() {
+    return _styles.height;
+  }
 });
-
-var letterSpacing = exports.letterSpacing = (0, _util2.style)({
-  prop: 'letterSpacing',
-  key: 'letterSpacings',
-  numberToPx: true
+Object.defineProperty(exports, 'maxHeight', {
+  enumerable: true,
+  get: function get() {
+    return _styles.maxHeight;
+  }
 });
-
-// layout
-var display = exports.display = (0, _util2.responsiveStyle)({
-  prop: 'display'
+Object.defineProperty(exports, 'minHeight', {
+  enumerable: true,
+  get: function get() {
+    return _styles.minHeight;
+  }
 });
-
-var maxWidth = exports.maxWidth = (0, _util2.responsiveStyle)({
-  prop: 'maxWidth',
-  key: 'maxWidths',
-  numberToPx: true
+Object.defineProperty(exports, 'size', {
+  enumerable: true,
+  get: function get() {
+    return _styles.size;
+  }
 });
-
-var minWidth = exports.minWidth = (0, _util2.responsiveStyle)({
-  prop: 'minWidth',
-  key: 'minWidths',
-  numberToPx: true
+Object.defineProperty(exports, 'ratio', {
+  enumerable: true,
+  get: function get() {
+    return _styles.ratio;
+  }
 });
-
-var height = exports.height = (0, _util2.responsiveStyle)({
-  prop: 'height',
-  key: 'heights',
-  numberToPx: true
+Object.defineProperty(exports, 'alignItems', {
+  enumerable: true,
+  get: function get() {
+    return _styles.alignItems;
+  }
 });
-
-var maxHeight = exports.maxHeight = (0, _util2.responsiveStyle)({
-  prop: 'maxHeight',
-  key: 'maxHeights',
-  numberToPx: true
+Object.defineProperty(exports, 'alignContent', {
+  enumerable: true,
+  get: function get() {
+    return _styles.alignContent;
+  }
 });
-
-var minHeight = exports.minHeight = (0, _util2.responsiveStyle)({
-  prop: 'minHeight',
-  key: 'minHeights',
-  numberToPx: true
+Object.defineProperty(exports, 'justifyContent', {
+  enumerable: true,
+  get: function get() {
+    return _styles.justifyContent;
+  }
 });
-
-var sizeWidth = exports.sizeWidth = (0, _util2.responsiveStyle)({
-  prop: 'size',
-  cssProperty: 'width',
-  numberToPx: true
+Object.defineProperty(exports, 'flexWrap', {
+  enumerable: true,
+  get: function get() {
+    return _styles.flexWrap;
+  }
 });
-
-var sizeHeight = exports.sizeHeight = (0, _util2.responsiveStyle)({
-  prop: 'size',
-  cssProperty: 'height',
-  numberToPx: true
+Object.defineProperty(exports, 'flexDirection', {
+  enumerable: true,
+  get: function get() {
+    return _styles.flexDirection;
+  }
 });
-
-var size = exports.size = function size(props) {
-  return (0, _assign2.default)({}, sizeWidth(props), sizeHeight(props));
-};
-
-// export const ratio = props => null
-
-// flexbox
-var alignItems = exports.alignItems = (0, _util2.responsiveStyle)({
-  prop: 'alignItems'
+Object.defineProperty(exports, 'flex', {
+  enumerable: true,
+  get: function get() {
+    return _styles.flex;
+  }
 });
-
-var alignContent = exports.alignContent = (0, _util2.responsiveStyle)({
-  prop: 'alignContent'
+Object.defineProperty(exports, 'alignSelf', {
+  enumerable: true,
+  get: function get() {
+    return _styles.alignSelf;
+  }
 });
-
-var justifyContent = exports.justifyContent = (0, _util2.responsiveStyle)({
-  prop: 'justifyContent'
+Object.defineProperty(exports, 'border', {
+  enumerable: true,
+  get: function get() {
+    return _styles.border;
+  }
 });
-
-var flexWrap = exports.flexWrap = (0, _util2.responsiveStyle)({
-  prop: 'flexWrap',
-  alias: 'wrap'
+Object.defineProperty(exports, 'borderTop', {
+  enumerable: true,
+  get: function get() {
+    return _styles.borderTop;
+  }
 });
-
-var flexDirection = exports.flexDirection = (0, _util2.responsiveStyle)({
-  prop: 'flexDirection'
+Object.defineProperty(exports, 'borderRight', {
+  enumerable: true,
+  get: function get() {
+    return _styles.borderRight;
+  }
 });
-
-var flex = exports.flex = (0, _util2.responsiveStyle)({
-  prop: 'flex'
+Object.defineProperty(exports, 'borderBottom', {
+  enumerable: true,
+  get: function get() {
+    return _styles.borderBottom;
+  }
 });
-
-var alignSelf = exports.alignSelf = (0, _util2.responsiveStyle)({
-  prop: 'alignSelf'
+Object.defineProperty(exports, 'borderLeft', {
+  enumerable: true,
+  get: function get() {
+    return _styles.borderLeft;
+  }
 });
-
-// borders
-var getBorder = exports.getBorder = function getBorder(n) {
-  return util.num(n) && n > 0 ? n + 'px solid' : n;
-};
-
-var border = exports.border = (0, _util2.responsiveStyle)({
-  prop: 'border',
-  key: 'borders',
-  getter: getBorder
+Object.defineProperty(exports, 'borders', {
+  enumerable: true,
+  get: function get() {
+    return _styles.borders;
+  }
 });
-
-var borderTop = exports.borderTop = (0, _util2.responsiveStyle)({
-  prop: 'borderTop',
-  key: 'borders',
-  getter: getBorder
+Object.defineProperty(exports, 'borderColor', {
+  enumerable: true,
+  get: function get() {
+    return _styles.borderColor;
+  }
 });
-
-var borderRight = exports.borderRight = (0, _util2.responsiveStyle)({
-  prop: 'borderRight',
-  key: 'borders',
-  getter: getBorder
+Object.defineProperty(exports, 'borderRadius', {
+  enumerable: true,
+  get: function get() {
+    return _styles.borderRadius;
+  }
 });
-
-var borderBottom = exports.borderBottom = (0, _util2.responsiveStyle)({
-  prop: 'borderBottom',
-  key: 'borders',
-  getter: getBorder
+Object.defineProperty(exports, 'boxShadow', {
+  enumerable: true,
+  get: function get() {
+    return _styles.boxShadow;
+  }
 });
-
-var borderLeft = exports.borderLeft = (0, _util2.responsiveStyle)({
-  prop: 'borderLeft',
-  key: 'borders',
-  getter: getBorder
+Object.defineProperty(exports, 'background', {
+  enumerable: true,
+  get: function get() {
+    return _styles.background;
+  }
 });
-
-var borders = exports.borders = function borders(props) {
-  return (0, _assign2.default)({}, border(props), borderTop(props), borderRight(props), borderBottom(props), borderLeft(props));
-};
-
-var borderRadius = exports.borderRadius = (0, _util2.style)({
-  prop: 'borderRadius',
-  key: 'radii',
-  numberToPx: true
+Object.defineProperty(exports, 'backgroundImage', {
+  enumerable: true,
+  get: function get() {
+    return _styles.backgroundImage;
+  }
 });
-
-var borderColor = exports.borderColor = (0, _util2.style)({
-  prop: 'borderColor',
-  key: 'colors'
+Object.defineProperty(exports, 'backgroundSize', {
+  enumerable: true,
+  get: function get() {
+    return _styles.backgroundSize;
+  }
 });
-
-var boxShadow = exports.boxShadow = (0, _util2.style)({
-  prop: 'boxShadow',
-  key: 'shadows'
+Object.defineProperty(exports, 'backgroundPosition', {
+  enumerable: true,
+  get: function get() {
+    return _styles.backgroundPosition;
+  }
 });
-
-// backgrounds
-var background = exports.background = (0, _util2.style)({
-  prop: 'background'
+Object.defineProperty(exports, 'zIndex', {
+  enumerable: true,
+  get: function get() {
+    return _styles.zIndex;
+  }
 });
-
-var backgroundImage = exports.backgroundImage = (0, _util2.style)({
-  prop: 'backgroundImage',
-  alias: 'bgImage',
-  getter: function getter(n) {
-    return 'url(' + n + ')';
+Object.defineProperty(exports, 'top', {
+  enumerable: true,
+  get: function get() {
+    return _styles.top;
   }
 });
-
-var backgroundSize = exports.backgroundSize = (0, _util2.style)({
-  prop: 'backgroundSize',
-  alias: 'bgSize'
+Object.defineProperty(exports, 'right', {
+  enumerable: true,
+  get: function get() {
+    return _styles.right;
+  }
 });
-
-var backgroundPosition = exports.backgroundPosition = (0, _util2.style)({
-  prop: 'backgroundPosition',
-  alias: 'bgPosition'
+Object.defineProperty(exports, 'bottom', {
+  enumerable: true,
+  get: function get() {
+    return _styles.bottom;
+  }
 });
-
-// position
-var zIndex = exports.zIndex = (0, _util2.style)({
-  prop: 'zIndex'
+Object.defineProperty(exports, 'left', {
+  enumerable: true,
+  get: function get() {
+    return _styles.left;
+  }
 });
-
-var top = exports.top = (0, _util2.responsiveStyle)({
-  prop: 'top',
-  numberToPx: true
+Object.defineProperty(exports, 'hover', {
+  enumerable: true,
+  get: function get() {
+    return _styles.hover;
+  }
 });
-
-var right = exports.right = (0, _util2.responsiveStyle)({
-  prop: 'right',
-  numberToPx: true
+Object.defineProperty(exports, 'focus', {
+  enumerable: true,
+  get: function get() {
+    return _styles.focus;
+  }
 });
-
-var bottom = exports.bottom = (0, _util2.responsiveStyle)({
-  prop: 'bottom',
-  numberToPx: true
+Object.defineProperty(exports, 'active', {
+  enumerable: true,
+  get: function get() {
+    return _styles.active;
+  }
 });
-
-var left = exports.left = (0, _util2.responsiveStyle)({
-  prop: 'left',
-  numberToPx: true
+Object.defineProperty(exports, 'disabled', {
+  enumerable: true,
+  get: function get() {
+    return _styles.disabled;
+  }
 });
+Object.defineProperty(exports, 'theme', {
+  enumerable: true,
+  get: function get() {
+    return _styles.theme;
+  }
+});
+Object.defineProperty(exports, 'borderWidth', {
+  enumerable: true,
+  get: function get() {
+    return _styles.borderWidth;
+  }
+});
 
-// pseudos
-var hover = exports.hover = (0, _util2.pseudoStyle)('hover')({
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  boxShadow: 'shadows'
+var _util2 = require('./util');
+
+Object.defineProperty(exports, 'style', {
+  enumerable: true,
+  get: function get() {
+    return _util2.style;
+  }
 });
+Object.defineProperty(exports, 'pseudoStyle', {
+  enumerable: true,
+  get: function get() {
+    return _util2.pseudoStyle;
+  }
+});
+Object.defineProperty(exports, 'responsiveStyle', {
+  enumerable: true,
+  get: function get() {
+    return _util2.responsiveStyle;
+  }
+});
+Object.defineProperty(exports, 'themeGet', {
+  enumerable: true,
+  get: function get() {
+    return _util2.themeGet;
+  }
+});
 
-var focus = exports.focus = (0, _util2.pseudoStyle)('focus')({
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  boxShadow: 'shadows'
+var _space = require('./space');
+
+Object.defineProperty(exports, 'space', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_space).default;
+  }
 });
 
-var active = exports.active = (0, _util2.pseudoStyle)('active')({
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  boxShadow: 'shadows'
+var styles = _interopRequireWildcard(_styles);
+
+var _util = _interopRequireWildcard(_util2);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.util = _util;
+var propTypes = exports.propTypes = {};
+
+(0, _keys2.default)(styles).forEach(function (key) {
+  propTypes[key] = styles[key].propTypes;
 });
 
-var disabled = exports.disabled = (0, _util2.pseudoStyle)('disabled', 'disabledStyle')({
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  boxShadow: 'shadows'
-});
+exports.default = styles;

dist/space.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.space = undefined;
 
@@ -24,2 +25,6 @@ var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _util = require('./util');
@@ -29,2 +34,4 @@
 
+var _constants2 = _interopRequireDefault(_constants);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,3 +41,3 @@
 
-exports.default = function (props) {
+var space = exports.space = function space(props) {
   var keys = (0, _keys2.default)(props).filter(function (key) {
@@ -40,3 +47,3 @@ return REG.test(key);
   var bp = (0, _util.breaks)(props);
-  var sc = (0, _util.get)(props, 'theme.space', _constants.space);
+  var sc = (0, _util.get)(props, 'theme.space', _constants2.default.space);
 
@@ -97,2 +104,23 @@ return keys.map(function (key) {
   y: ['Top', 'Bottom']
-};
+};
+
+var responsive = _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.array]);
+
+space.propTypes = {
+  m: responsive,
+  mt: responsive,
+  mr: responsive,
+  mb: responsive,
+  ml: responsive,
+  mx: responsive,
+  my: responsive,
+  p: responsive,
+  pt: responsive,
+  pr: responsive,
+  pb: responsive,
+  pl: responsive,
+  px: responsive,
+  py: responsive
+};
+
+exports.default = space;

dist/util.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.theme = exports.responsiveStyle = exports.pseudoStyle = exports.style = exports.getValue = exports.mq = exports.merge = exports.dec = exports.media = exports.breaks = exports.arr = exports.num = exports.neg = exports.px = exports.is = exports.get = undefined;
+exports.themeGet = exports.pseudoStyle = exports.responsiveStyle = exports.style = exports.getValue = exports.merge = exports.media = exports.dec = exports.breaks = exports.fallbackTheme = exports.mq = exports.get = exports.arr = exports.neg = exports.px = exports.num = exports.is = undefined;
 
@@ -29,3 +29,3 @@ var _typeof2 = require('babel-runtime/helpers/typeof');
 
-var _propTypes = require('./prop-types');
+var _propTypes = require('prop-types');
 
@@ -40,19 +40,24 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var is = function is(n) {
+var propTypes = {
+  responsivePropType: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.array]),
+  numberOrString: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+};
+
+var is = exports.is = function is(n) {
   return n !== undefined && n !== null;
 };
-var num = function num(n) {
+var num = exports.num = function num(n) {
   return typeof n === 'number' && !isNaN(n);
 };
-var px = function px(n) {
+var px = exports.px = function px(n) {
   return num(n) ? n + 'px' : n;
 };
-var neg = function neg(n) {
+var neg = exports.neg = function neg(n) {
   return n < 0;
 };
-var arr = function arr(n) {
+var arr = exports.arr = function arr(n) {
   return Array.isArray(n) ? n : [n];
 };
 
-var get = function get(obj, path, fallback) {
+var get = exports.get = function get(obj, path, fallback) {
   return path.split('.').reduce(function (a, b) {
@@ -63,15 +68,15 @@ return a && a[b] ? a[b] : null;
 
-var mq = function mq(n) {
+var mq = exports.mq = function mq(n) {
   return '@media screen and (min-width: ' + px(n) + ')';
 };
 
-var fallbackTheme = function fallbackTheme(props) {
+var fallbackTheme = exports.fallbackTheme = function fallbackTheme(props) {
   return get(props, 'theme', _constants2.default);
 };
 
-var breaks = function breaks(props) {
+var breaks = exports.breaks = function breaks(props) {
   return [null].concat((0, _toConsumableArray3.default)(get(props, 'theme.breakpoints', _constants.breakpoints).map(mq)));
 };
 
-var dec = function dec(props) {
+var dec = exports.dec = function dec(props) {
   return function (val) {
@@ -84,3 +89,3 @@ return arr(props).reduce(function (acc, prop) {
 
-var media = function media(bp) {
+var media = exports.media = function media(bp) {
   return function (d, i) {
@@ -91,3 +96,3 @@ return is(d) ? bp[i] ? (0, _defineProperty3.default)({}, bp[i], d) : d : null;
 
-var merge = function merge(a, b) {
+var merge = exports.merge = function merge(a, b) {
   return (0, _assign2.default)({}, a, b, (0, _keys2.default)(b).reduce(function (obj, key) {
@@ -98,7 +103,7 @@ return (0, _assign2.default)(obj, (0, _defineProperty3.default)({}, key, a[key] !== null && (0, _typeof3.default)(a[key]) === 'object' ? merge(a[key], b[key]) : b[key]));
 
-var getValue = function getValue(val, getter, toPx) {
+var getValue = exports.getValue = function getValue(val, getter, toPx) {
   return typeof getter === 'function' ? getter(val) : toPx ? px(val) : val;
 };
 
-var style = function style(_ref2) {
+var style = exports.style = function style(_ref2) {
   var prop = _ref2.prop,
@@ -110,3 +115,4 @@ cssProperty = _ref2.cssProperty,
       numberToPx = _ref2.numberToPx;
-  return function (props) {
+
+  var fn = function fn(props) {
     cssProperty = cssProperty || prop;
@@ -120,5 +126,10 @@ var n = is(props[prop]) ? props[prop] : props[alias];
   };
+  fn.propTypes = (0, _defineProperty3.default)({}, prop, propTypes.numberOrString);
+  if (alias) {
+    fn.propTypes[alias] = propTypes.numberOrString;
+  }
+  return fn;
 };
 
-var responsiveStyle = function responsiveStyle(_ref4) {
+var responsiveStyle = exports.responsiveStyle = function responsiveStyle(_ref4) {
   var prop = _ref4.prop,
@@ -130,3 +141,4 @@ cssProperty = _ref4.cssProperty,
       numberToPx = _ref4.numberToPx;
-  return function (props) {
+
+  var fn = function fn(props) {
     cssProperty = cssProperty || prop;
@@ -149,5 +161,13 @@ var n = is(props[prop]) ? props[prop] : props[alias];
   };
+
+  // add propTypes object to returned function
+  fn.propTypes = (0, _defineProperty3.default)({}, prop, propTypes.responsive);
+  if (alias) {
+    fn.propTypes[alias] = propTypes.responsive;
+  }
+
+  return fn;
 };
 
-var pseudoStyle = function pseudoStyle(pseudoclass, prop) {
+var pseudoStyle = exports.pseudoStyle = function pseudoStyle(pseudoclass, prop) {
   return function () {
@@ -174,23 +194,7 @@ var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-var theme = function theme(keys, fallback) {
+// todo: consider alternative names
+var themeGet = exports.themeGet = function themeGet(keys, fallback) {
   return function (props) {
     return get(props.theme, keys, fallback);
   };
-};
-
-exports.get = get;
-exports.is = is;
-exports.px = px;
-exports.neg = neg;
-exports.num = num;
-exports.arr = arr;
-exports.breaks = breaks;
-exports.media = media;
-exports.dec = dec;
-exports.merge = merge;
-exports.mq = mq;
-exports.getValue = getValue;
-exports.style = style;
-exports.pseudoStyle = pseudoStyle;
-exports.responsiveStyle = responsiveStyle;
-exports.theme = theme;
+};

package.json

 {
   "name": "styled-system",
-  "version": "2.0.0-0",
+  "version": "2.0.0-1",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

36521

increased by39.77%

Number of package files

12

increased by9.09%

Lines of code

1114

increased by49.93%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes