New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@xstyled/system

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@xstyled/system - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

11

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log

# [1.8.0](https://github.com/smooth-code/xstyled/compare/v1.7.0...v1.8.0) (2019-07-09)
### Features
* introduce configurable transformers ([4958bcb](https://github.com/smooth-code/xstyled/commit/4958bcb))
# [1.7.0](https://github.com/smooth-code/xstyled/compare/v1.6.0...v1.7.0) (2019-07-08)

@@ -8,0 +19,0 @@

221

dist/xstyled-system.cjs.js

@@ -117,2 +117,10 @@ 'use strict';

unit('px');
var pxToRem = function pxToRem(value) {
return round(value / 16);
};
var remPx = function remPx(value) {
return num(value) && value !== 0 ? pxToRem(value) + "rem" : value;
};
var rpx = function rpx(value) {

@@ -124,9 +132,6 @@ if (!string(value) || value.length < 4) return value;

if (n === 0) return 0;
return round(n / 16) + "rem";
return pxToRem(n) + "rem";
};
var rpxPx = function rpxPx(value) {
return px(rpx(value));
};
var percent = function percent(n) {
return n !== 0 && n >= -1 && n <= 1 ? round(n * 100) + "%" : rpxPx(n);
return n !== 0 && n >= -1 && n <= 1 ? round(n * 100) + "%" : n;
};

@@ -208,9 +213,13 @@

var themeGetter = function themeGetter(_ref) {
var transform = _ref.transform,
var name = _ref.name,
defaultTransform = _ref.transform,
key = _ref.key,
defaultVariants = _ref.defaultVariants;
defaultVariants = _ref.defaultVariants,
compose = _ref.compose;
var id = themeGetterId++;
return function (value) {
var getter = function getter(value) {
return function (props) {
if (!string(value) && !num(value)) return value;
var res = value;
if (!string(value) && !num(value)) return res;
var cache = getCacheNamespace(props.theme, "__themeGetter" + id);

@@ -220,18 +229,24 @@ if (cache.has(value)) return cache.get(value);

variants = is(variants) ? variants : defaultVariants;
var themeValue = is(variants) ? getThemeValue(props, value, variants) : null;
var computedValue = is(themeValue) ? themeValue : value;
res = is(variants) ? getThemeValue(props, value, variants) : null;
res = is(res) ? res : value;
var transform = (name && props.theme && props.theme.transformers ? props.theme.transformers[name] : null) || defaultTransform;
if (!transform) {
cache.set(value, computedValue);
return computedValue;
if (transform) {
res = transform(res, {
rawValue: value,
variants: variants
});
}
var transformedValue = transform(computedValue, {
rawValue: value,
variants: variants
});
cache.set(value, transformedValue);
return transformedValue;
res = compose ? compose(res)(props) : res;
cache.set(value, res);
return res;
};
};
getter.meta = {
name: name,
transform: defaultTransform
};
return getter;
};

@@ -417,2 +432,3 @@

themeGetter({
name: 'color',
key: 'colors'

@@ -423,3 +439,6 @@ });

themeGetter({
transform: rpxPx
name: 'px',
transform: function transform(value) {
return px(rpx(value));
}
});

@@ -429,3 +448,5 @@ var getPercent =

themeGetter({
transform: percent
name: 'percent',
transform: percent,
compose: getPx
});

@@ -435,5 +456,13 @@ var getRadius =

themeGetter({
name: 'radius',
key: 'radii',
transform: rpxPx
compose: getPx
});
var getTransition =
/*#__PURE__*/
themeGetter({
name: 'transition',
key: 'transitions'
}); // Style
var opacity =

@@ -449,7 +478,2 @@ /*#__PURE__*/

});
var getTransition =
/*#__PURE__*/
themeGetter({
key: 'transitions'
});
var transition =

@@ -503,2 +527,3 @@ /*#__PURE__*/

themeGetter({
name: 'border',
key: 'borders',

@@ -509,2 +534,22 @@ transform: function transform(n) {

});
var getBorderWidth =
/*#__PURE__*/
themeGetter({
name: 'borderWidth',
key: 'borderWidths',
compose: getPx
});
var getBorderStyle =
/*#__PURE__*/
themeGetter({
name: 'borderStyle',
key: 'borderStyles'
});
var getShadow =
/*#__PURE__*/
themeGetter({
name: 'shadow',
key: 'shadows'
}); // Style
var border =

@@ -570,8 +615,2 @@ /*#__PURE__*/

});
var getBorderWidth =
/*#__PURE__*/
themeGetter({
key: 'borderWidths',
transform: rpxPx
});
var borderWidth =

@@ -583,7 +622,2 @@ /*#__PURE__*/

});
var getBorderStyle =
/*#__PURE__*/
themeGetter({
key: 'borderStyles'
});
var borderStyle =

@@ -601,7 +635,2 @@ /*#__PURE__*/

});
var getShadow =
/*#__PURE__*/
themeGetter({
key: 'shadows'
});
var boxShadow =

@@ -620,5 +649,7 @@ /*#__PURE__*/

themeGetter({
transform: percent,
key: 'sizes'
});
name: 'size',
key: 'sizes',
compose: getPercent
}); // Styles
var display =

@@ -744,9 +775,12 @@ /*#__PURE__*/

return value * -1;
}
} // Getters
var getSpace =
/*#__PURE__*/
themeGetter({
name: 'space',
key: 'space',
defaultVariants: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
compose: getPx,
transform: function transform(_, _ref) {

@@ -764,3 +798,3 @@ var rawValue = _ref.rawValue,

return rpxPx(_neg ? toNegative(_value) : _value);
return _neg ? toNegative(_value) : _value;
}

@@ -771,5 +805,6 @@

var value = is(variants[abs]) ? variants[abs] : abs;
return rpxPx(neg ? toNegative(value) : value);
return neg ? toNegative(value) : value;
}
});
}); // Styles
var margin =

@@ -944,2 +979,9 @@ /*#__PURE__*/

var getZIndex =
/*#__PURE__*/
themeGetter({
name: 'zIndex',
key: 'zIndices'
}); // Styles
var position =

@@ -950,7 +992,2 @@ /*#__PURE__*/

});
var getZIndex =
/*#__PURE__*/
themeGetter({
key: 'zIndices'
});
var zIndex =

@@ -993,4 +1030,26 @@ /*#__PURE__*/

themeGetter({
name: 'font',
key: 'fonts'
});
var getLineHeight =
/*#__PURE__*/
themeGetter({
name: 'lineHeight',
key: 'lineHeights',
transform: rpx
});
var getFontWeight =
/*#__PURE__*/
themeGetter({
name: 'fontWeight',
key: 'fontWeights'
});
var getLetterSpacing =
/*#__PURE__*/
themeGetter({
name: 'letterSpacing',
key: 'letterSpacings',
compose: getPx
}); // Styles
var fontFamily =

@@ -1005,5 +1064,6 @@ /*#__PURE__*/

themeGetter({
name: 'fontSize',
key: 'fontSizes',
defaultVariants: [0, 12, 14, 16, 20, 24, 32, 48, 64, 72],
transform: rpxPx
compose: getPx
});

@@ -1016,8 +1076,2 @@ var fontSize =

});
var getLineHeight =
/*#__PURE__*/
themeGetter({
key: 'lineHeights',
transform: rpx
});
var lineHeight =

@@ -1029,7 +1083,2 @@ /*#__PURE__*/

});
var getFontWeight =
/*#__PURE__*/
themeGetter({
key: 'fontWeights'
});
var fontWeight =

@@ -1046,8 +1095,2 @@ /*#__PURE__*/

});
var getLetterSpacing =
/*#__PURE__*/
themeGetter({
key: 'letterSpacings',
transform: rpxPx
});
var letterSpacing =

@@ -1144,19 +1187,5 @@ /*#__PURE__*/

};
th.color = getColor;
th.px = getPx;
th.percent = getPercent;
th.radius = getRadius;
th.border = getBorder;
th.borderWidth = getBorderWidth;
th.borderStyle = getBorderStyle;
th.shadow = getShadow;
th.size = getSize;
th.zIndex = getZIndex;
th.space = getSpace;
th.font = getFont;
th.fontSize = getFontSize;
th.lineHeight = getLineHeight;
th.fontWeight = getFontWeight;
th.letterSpacing = getLetterSpacing;
th.transition = getTransition;
[getColor, getPx, getPercent, getRadius, getBorder, getBorderWidth, getBorderStyle, getShadow, getSize, getZIndex, getSpace, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition].forEach(function (themeGetter) {
th[themeGetter.meta.name] = themeGetter;
});

@@ -1231,2 +1260,11 @@ var variant = function variant(_ref) {

var rpxTransformer = {
px: function px(value) {
return remPx(rpx(value));
},
border: function border(n) {
return num(n) && n > 0 ? remPx(n) + " solid" : n;
}
};
var createSystemComponent = function createSystemComponent(createElement, defaultComponent, system$1) {

@@ -1363,2 +1401,3 @@ if (defaultComponent === void 0) {

exports.row = row;
exports.rpxTransformer = rpxTransformer;
exports.size = size;

@@ -1365,0 +1404,0 @@ exports.space = space;

222

dist/xstyled-system.es.js

@@ -111,2 +111,10 @@ import _extends from '@babel/runtime/helpers/esm/extends';

unit('px');
var pxToRem = function pxToRem(value) {
return round(value / 16);
};
var remPx = function remPx(value) {
return num(value) && value !== 0 ? pxToRem(value) + "rem" : value;
};
var rpx = function rpx(value) {

@@ -118,9 +126,6 @@ if (!string(value) || value.length < 4) return value;

if (n === 0) return 0;
return round(n / 16) + "rem";
return pxToRem(n) + "rem";
};
var rpxPx = function rpxPx(value) {
return px(rpx(value));
};
var percent = function percent(n) {
return n !== 0 && n >= -1 && n <= 1 ? round(n * 100) + "%" : rpxPx(n);
return n !== 0 && n >= -1 && n <= 1 ? round(n * 100) + "%" : n;
};

@@ -202,9 +207,13 @@

var themeGetter = function themeGetter(_ref) {
var transform = _ref.transform,
var name = _ref.name,
defaultTransform = _ref.transform,
key = _ref.key,
defaultVariants = _ref.defaultVariants;
defaultVariants = _ref.defaultVariants,
compose = _ref.compose;
var id = themeGetterId++;
return function (value) {
var getter = function getter(value) {
return function (props) {
if (!string(value) && !num(value)) return value;
var res = value;
if (!string(value) && !num(value)) return res;
var cache = getCacheNamespace(props.theme, "__themeGetter" + id);

@@ -214,18 +223,24 @@ if (cache.has(value)) return cache.get(value);

variants = is(variants) ? variants : defaultVariants;
var themeValue = is(variants) ? getThemeValue(props, value, variants) : null;
var computedValue = is(themeValue) ? themeValue : value;
res = is(variants) ? getThemeValue(props, value, variants) : null;
res = is(res) ? res : value;
var transform = (name && props.theme && props.theme.transformers ? props.theme.transformers[name] : null) || defaultTransform;
if (!transform) {
cache.set(value, computedValue);
return computedValue;
if (transform) {
res = transform(res, {
rawValue: value,
variants: variants
});
}
var transformedValue = transform(computedValue, {
rawValue: value,
variants: variants
});
cache.set(value, transformedValue);
return transformedValue;
res = compose ? compose(res)(props) : res;
cache.set(value, res);
return res;
};
};
getter.meta = {
name: name,
transform: defaultTransform
};
return getter;
};

@@ -411,2 +426,3 @@

themeGetter({
name: 'color',
key: 'colors'

@@ -417,3 +433,6 @@ });

themeGetter({
transform: rpxPx
name: 'px',
transform: function transform(value) {
return px(rpx(value));
}
});

@@ -423,3 +442,5 @@ var getPercent =

themeGetter({
transform: percent
name: 'percent',
transform: percent,
compose: getPx
});

@@ -429,5 +450,13 @@ var getRadius =

themeGetter({
name: 'radius',
key: 'radii',
transform: rpxPx
compose: getPx
});
var getTransition =
/*#__PURE__*/
themeGetter({
name: 'transition',
key: 'transitions'
}); // Style
var opacity =

@@ -443,7 +472,2 @@ /*#__PURE__*/

});
var getTransition =
/*#__PURE__*/
themeGetter({
key: 'transitions'
});
var transition =

@@ -497,2 +521,3 @@ /*#__PURE__*/

themeGetter({
name: 'border',
key: 'borders',

@@ -503,2 +528,22 @@ transform: function transform(n) {

});
var getBorderWidth =
/*#__PURE__*/
themeGetter({
name: 'borderWidth',
key: 'borderWidths',
compose: getPx
});
var getBorderStyle =
/*#__PURE__*/
themeGetter({
name: 'borderStyle',
key: 'borderStyles'
});
var getShadow =
/*#__PURE__*/
themeGetter({
name: 'shadow',
key: 'shadows'
}); // Style
var border =

@@ -564,8 +609,2 @@ /*#__PURE__*/

});
var getBorderWidth =
/*#__PURE__*/
themeGetter({
key: 'borderWidths',
transform: rpxPx
});
var borderWidth =

@@ -577,7 +616,2 @@ /*#__PURE__*/

});
var getBorderStyle =
/*#__PURE__*/
themeGetter({
key: 'borderStyles'
});
var borderStyle =

@@ -595,7 +629,2 @@ /*#__PURE__*/

});
var getShadow =
/*#__PURE__*/
themeGetter({
key: 'shadows'
});
var boxShadow =

@@ -614,5 +643,7 @@ /*#__PURE__*/

themeGetter({
transform: percent,
key: 'sizes'
});
name: 'size',
key: 'sizes',
compose: getPercent
}); // Styles
var display =

@@ -738,9 +769,12 @@ /*#__PURE__*/

return value * -1;
}
} // Getters
var getSpace =
/*#__PURE__*/
themeGetter({
name: 'space',
key: 'space',
defaultVariants: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
compose: getPx,
transform: function transform(_, _ref) {

@@ -758,3 +792,3 @@ var rawValue = _ref.rawValue,

return rpxPx(_neg ? toNegative(_value) : _value);
return _neg ? toNegative(_value) : _value;
}

@@ -765,5 +799,6 @@

var value = is(variants[abs]) ? variants[abs] : abs;
return rpxPx(neg ? toNegative(value) : value);
return neg ? toNegative(value) : value;
}
});
}); // Styles
var margin =

@@ -938,2 +973,9 @@ /*#__PURE__*/

var getZIndex =
/*#__PURE__*/
themeGetter({
name: 'zIndex',
key: 'zIndices'
}); // Styles
var position =

@@ -944,7 +986,2 @@ /*#__PURE__*/

});
var getZIndex =
/*#__PURE__*/
themeGetter({
key: 'zIndices'
});
var zIndex =

@@ -987,4 +1024,26 @@ /*#__PURE__*/

themeGetter({
name: 'font',
key: 'fonts'
});
var getLineHeight =
/*#__PURE__*/
themeGetter({
name: 'lineHeight',
key: 'lineHeights',
transform: rpx
});
var getFontWeight =
/*#__PURE__*/
themeGetter({
name: 'fontWeight',
key: 'fontWeights'
});
var getLetterSpacing =
/*#__PURE__*/
themeGetter({
name: 'letterSpacing',
key: 'letterSpacings',
compose: getPx
}); // Styles
var fontFamily =

@@ -999,5 +1058,6 @@ /*#__PURE__*/

themeGetter({
name: 'fontSize',
key: 'fontSizes',
defaultVariants: [0, 12, 14, 16, 20, 24, 32, 48, 64, 72],
transform: rpxPx
compose: getPx
});

@@ -1010,8 +1070,2 @@ var fontSize =

});
var getLineHeight =
/*#__PURE__*/
themeGetter({
key: 'lineHeights',
transform: rpx
});
var lineHeight =

@@ -1023,7 +1077,2 @@ /*#__PURE__*/

});
var getFontWeight =
/*#__PURE__*/
themeGetter({
key: 'fontWeights'
});
var fontWeight =

@@ -1040,8 +1089,2 @@ /*#__PURE__*/

});
var getLetterSpacing =
/*#__PURE__*/
themeGetter({
key: 'letterSpacings',
transform: rpxPx
});
var letterSpacing =

@@ -1138,19 +1181,5 @@ /*#__PURE__*/

};
th.color = getColor;
th.px = getPx;
th.percent = getPercent;
th.radius = getRadius;
th.border = getBorder;
th.borderWidth = getBorderWidth;
th.borderStyle = getBorderStyle;
th.shadow = getShadow;
th.size = getSize;
th.zIndex = getZIndex;
th.space = getSpace;
th.font = getFont;
th.fontSize = getFontSize;
th.lineHeight = getLineHeight;
th.fontWeight = getFontWeight;
th.letterSpacing = getLetterSpacing;
th.transition = getTransition;
[getColor, getPx, getPercent, getRadius, getBorder, getBorderWidth, getBorderStyle, getShadow, getSize, getZIndex, getSpace, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition].forEach(function (themeGetter) {
th[themeGetter.meta.name] = themeGetter;
});

@@ -1225,2 +1254,11 @@ var variant = function variant(_ref) {

var rpxTransformer = {
px: function px(value) {
return remPx(rpx(value));
},
border: function border(n) {
return num(n) && n > 0 ? remPx(n) + " solid" : n;
}
};
var createSystemComponent = function createSystemComponent(createElement, defaultComponent, system$1) {

@@ -1248,2 +1286,2 @@ if (defaultComponent === void 0) {

export { alignContent, alignItems, alignSelf, background, backgroundColor, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, backgrounds, basics, between, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRadius, borderRight, borderRightColor, borderStyle, borderTop, borderTopColor, borderWidth, borders, bottom, boxShadow, breakpoints, col, color, compose, createStyleGenerator, createSystemComponent, display, down, flex, flexBasis, flexDirection, flexWrap, flexboxes, fontFamily, fontSize, fontWeight, getBorder, getBorderStyle, getBorderWidth, getBreakpoints, getColor, getFont, getFontSize, getFontWeight, getLetterSpacing, getLineHeight, getPercent, getPx, getRadius, getShadow, getSize, getSpace, getTransition, getZIndex, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, grids, height, justifyContent, justifyItems, justifySelf, layout, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, mx, my, opacity, order, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, position, positioning, px$1 as px, py, reduceBreakpoints, right, row, size, space, style, system, textAlign, textTransform, th, themeGetter, top, transition, typography, up, variant, verticalAlign, width, xgrids, zIndex };
export { alignContent, alignItems, alignSelf, background, backgroundColor, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, backgrounds, basics, between, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRadius, borderRight, borderRightColor, borderStyle, borderTop, borderTopColor, borderWidth, borders, bottom, boxShadow, breakpoints, col, color, compose, createStyleGenerator, createSystemComponent, display, down, flex, flexBasis, flexDirection, flexWrap, flexboxes, fontFamily, fontSize, fontWeight, getBorder, getBorderStyle, getBorderWidth, getBreakpoints, getColor, getFont, getFontSize, getFontWeight, getLetterSpacing, getLineHeight, getPercent, getPx, getRadius, getShadow, getSize, getSpace, getTransition, getZIndex, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, grids, height, justifyContent, justifyItems, justifySelf, layout, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, mx, my, opacity, order, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, position, positioning, px$1 as px, py, reduceBreakpoints, right, row, rpxTransformer, size, space, style, system, textAlign, textTransform, th, themeGetter, top, transition, typography, up, variant, verticalAlign, width, xgrids, zIndex };

2

dist/xstyled-system.min.js

@@ -1,1 +0,1 @@

!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((r=r||self).xstyledSystem={})}(this,function(r){"use strict";var e=function(r){return r},t=function(r){return null!=r},o=function(r){return"number"==typeof r&&!Number.isNaN(r)},n=function(r){return"string"==typeof r&&""!==r},i=function(r){return"object"==typeof r&&null!==r},p=function(r){return"function"==typeof r},a=function(r,e){if(!t(e))return r;for(var o in e)r[o]=e[o];return r},u=function r(e,o){if(!t(o))return e;for(var n in o)i(e[n])?e[n]=r(a({},e[n]),o[n]):e[n]=o[n];return e},f=function(r,e,o){return void 0===o&&(o=r.theme),function r(e){if(!p(e))return e;for(var t=arguments.length,o=new Array(t>1?t-1:0),n=1;n<t;n++)o[n-1]=arguments[n];var i=e.apply(void 0,o);return r.apply(void 0,[i].concat(o))}(function(r,e){for(var o=String(e).split("."),n=o.length,i=r,p=0;p<n;p+=1){if(void 0===i)return i;var a=o[p];i=t(i[a])?i[a]:void 0}return i}(o,e),r)};var d=function(r){return Math.round(r*Math.pow(10,4))/Math.pow(10,4)},s=function(r){return function(e){return o(e)&&0!==e?""+e+r:e}}("px"),m=function(r){if(!n(r)||r.length<4)return r;if("rpx"!==r.slice(-3))return r;var e=Number(r.slice(0,r.length-3));return 0===e?0:d(e/16)+"rem"},l=function(r){return s(m(r))},g=function(r){return 0!==r&&r>=-1&&r<=1?d(100*r)+"%":l(r)},c={xs:0,sm:576,md:768,lg:992,xl:1200};function h(r){var e=f(r,"breakpoints");return t(e)?e:c}var y=function(r){return r?"@media (min-width: "+r+")":null},v=function(r){return r?"@media (max-width: "+r+")":null},b=function(r,e){return"@media (min-width: "+r+") and (max-width: "+e+")"},G=function(r,e){var t=r[e];return 0===t?null:s(t)},x=function(r,e){var t=r[e];return 0===t?null:s(t-.02)},k="undefined"!=typeof Map&&"undefined"!=typeof WeakMap,w=k?new WeakMap:null;var S={has:function(){return!1},set:function(){},get:function(){}};function C(r,e){if(!k||!r)return S;var t=function(r){if(w.has(r))return w.get(r);var e={};return w.set(r,e),e}(r);return t[e]=t[e]||new Map,t[e]}var R=0,W=function(r){var e=r.transform,i=r.key,p=r.defaultVariants,a=R++;return function(r){return function(u){if(!n(r)&&!o(r))return r;var d=C(u.theme,"__themeGetter"+a);if(d.has(r))return d.get(r);var s=t(i)?f(u,i):null;s=t(s)?s:p;var m=t(s)?f(u,r,s):null,l=t(m)?m:r;if(!e)return d.set(r,l),l;var g=e(l,{rawValue:r,variants:s});return d.set(r,g),g}}};function P(r,e,t,p,a){if(i(e))return null;if(a.has(e))return a.get(e);var u=p(e)(t);if(!n(u)&&!o(u))return null;var f={};for(var d in r)f[r[d]]=u;return a.set(e,f),f}function A(r,e,t){return r.meta={props:e,getStyle:r,generators:t},r}function B(r){var e=h(r),t={};for(var o in e)t[o]=y(G(e,o));return t}function T(r,t,o,n){void 0===o&&(o=e);var i=n?function(r,e){if(e.has("_medias"))return e.get("_medias");var t=B(r);return e.set("_medias",t),t}(r,n):B(r),p={};for(var f in t){var d=o(t[f]);if(null!==d){var s=i[f];null===s?p=u(p,d):p[s]=p[s]?a(p[s],d):d}}return p}function z(){for(var r=[],e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];t.forEach(function(e){e&&(e.meta.generators?r=[].concat(r,e.meta.generators):r.push(e))});var n=function(r){for(var e={},t=0;t<r.length;t++){var o=r[t];if(o&&o.meta)for(var n=Object.keys(o.meta.props),i=0;i<n.length;i++)e[o.meta.props[n[i]]]=o}return e}(r);return A(function(r){var e={};for(var t in r){var o=n[t];if(o){var i=o.meta.getStyle(r);u(e,i)}}return e},r.reduce(function(r,e){return[].concat(r,e.meta.props)},[]),t)}function j(r){var e=r.prop,o=r.cssProperty,n=r.key,p=void 0===n?null:n,a=r.transform,u=void 0===a?null:a,f=r.themeGet,d=void 0===f?null:f,s=Array.isArray(o)?o:[o||e];return Array.isArray(e)?z.apply(void 0,e.map(function(r){return j({prop:r,cssProperty:s,key:p,transform:u,themeGet:d})})):(d=d||W({key:p,transform:u}),A(function(r,e,o){return function(n){var p=n[r];if(!t(p))return null;var a=C(n.theme,r);return i(p)?T(n,p,function(r){return P(e,r,n,o,a)},a):P(e,p,n,o,a)}}(e,s,d),[e]))}var L=W({key:"colors"}),I=W({transform:l}),H=W({transform:g}),M=W({key:"radii",transform:l}),O=j({prop:"opacity"}),F=j({prop:"overflow"}),_=W({key:"transitions"}),N=j({prop:"transition",themeGet:_}),V=z(O,F,N),D=j({prop:"background"}),E=j({prop:"backgroundColor",themeGet:L}),Z=j({prop:"backgroundImage"}),q=j({prop:"backgroundSize"}),J=j({prop:"backgroundPosition"}),K=j({prop:"backgroundRepeat"}),Q=z(D,E,Z,q,J,K),U=W({key:"borders",transform:function(r){return o(r)&&r>0?s(r)+" solid":r}}),X=j({prop:"border",themeGet:U}),Y=j({prop:"borderTop",themeGet:U}),$=j({prop:"borderTopColor",themeGet:L}),rr=j({prop:"borderRight",themeGet:U}),er=j({prop:"borderRightColor",themeGet:L}),tr=j({prop:"borderBottom",themeGet:U}),or=j({prop:"borderBottomColor",themeGet:L}),nr=j({prop:"borderLeft",themeGet:U}),ir=j({prop:"borderLeftColor",themeGet:L}),pr=j({prop:"borderColor",themeGet:L}),ar=W({key:"borderWidths",transform:l}),ur=j({prop:"borderWidth",themeGet:ar}),fr=W({key:"borderStyles"}),dr=j({prop:"borderStyle",themeGet:fr}),sr=j({prop:"borderRadius",themeGet:M}),mr=W({key:"shadows"}),lr=j({prop:"boxShadow",themeGet:mr}),gr=z(X,Y,$,rr,er,tr,or,nr,ir,pr,ur,dr,sr,lr),cr=W({transform:g,key:"sizes"}),hr=j({prop:"display"}),yr=j({prop:"width",themeGet:cr}),vr=j({prop:"height",themeGet:cr}),br=j({prop:"maxWidth",themeGet:cr}),Gr=j({prop:"maxHeight",themeGet:cr}),xr=j({prop:"minWidth",themeGet:cr}),kr=j({prop:"minHeight",themeGet:cr}),wr=j({prop:"size",cssProperty:["width","height"],themeGet:cr}),Sr=j({prop:"verticalAlign"}),Cr=z(hr,yr,vr,br,Gr,xr,kr,wr,Sr),Rr=j({prop:"alignItems"}),Wr=j({prop:"alignContent"}),Pr=j({prop:"justifyContent"}),Ar=j({prop:"justifyItems"}),Br=j({prop:"flexWrap"}),Tr=j({prop:"flexBasis",themeGet:H}),zr=j({prop:"flexDirection"}),jr=j({prop:"flex"}),Lr=j({prop:"justifySelf"}),Ir=j({prop:"alignSelf"}),Hr=j({prop:"order"}),Mr=z(hr,Rr,Wr,Pr,Ar,Br,Tr,zr,jr,Lr,Ir,Hr);function Or(r){return n(r)?"-"+r:-1*r}var Fr=W({key:"space",defaultVariants:[0,4,8,16,24,48,96,144,192,240],transform:function(r,e){var i=e.rawValue,p=e.variants;if(n(i)){var a=i.startsWith("-"),u=a?i.substr(1):i,f=p[u],d=t(f)?f:u;return l(a?Or(d):d)}var s,m=Math.abs(i),g=o(s=i)&&s<0,c=t(p[m])?p[m]:m;return l(g?Or(c):c)}}),_r=j({prop:["margin","m"],cssProperty:"margin",themeGet:Fr}),Nr=j({prop:["marginTop","mt"],cssProperty:"marginTop",themeGet:Fr}),Vr=j({prop:["marginRight","mr"],cssProperty:"marginRight",themeGet:Fr}),Dr=j({prop:["marginBottom","mb"],cssProperty:"marginBottom",themeGet:Fr}),Er=j({prop:["marginLeft","ml"],cssProperty:"marginLeft",themeGet:Fr}),Zr=j({prop:"mx",cssProperty:["marginRight","marginLeft"],themeGet:Fr}),qr=j({prop:"my",cssProperty:["marginTop","marginBottom"],themeGet:Fr}),Jr=j({prop:["padding","p"],cssProperty:"padding",themeGet:Fr}),Kr=j({prop:["paddingTop","pt"],cssProperty:"paddingTop",themeGet:Fr}),Qr=j({prop:["paddingRight","pr"],cssProperty:"paddingRight",themeGet:Fr}),Ur=j({prop:["paddingBottom","pb"],cssProperty:"paddingBottom",themeGet:Fr}),Xr=j({prop:["paddingLeft","pl"],cssProperty:"paddingLeft",themeGet:Fr}),Yr=j({prop:"px",cssProperty:["paddingRight","paddingLeft"],themeGet:Fr}),$r=j({prop:"py",cssProperty:["paddingTop","paddingBottom"],themeGet:Fr}),re=z(_r,Nr,Vr,Dr,Er,Zr,qr,Jr,Kr,Qr,Ur,Xr,Yr,$r),ee=j({prop:"gridGap",themeGet:Fr}),te=j({prop:"gridColumnGap",themeGet:Fr}),oe=j({prop:"gridRowGap",themeGet:Fr}),ne=j({prop:"gridColumn"}),ie=j({prop:"gridRow"}),pe=j({prop:"gridAutoFlow"}),ae=j({prop:"gridAutoColumns"}),ue=j({prop:"gridAutoRows"}),fe=j({prop:"gridTemplateColumns"}),de=j({prop:"gridTemplateRows"}),se=j({prop:"gridTemplateAreas"}),me=j({prop:"gridArea"}),le=z(ee,te,oe,ne,ie,pe,ae,ue,fe,de,se,me),ge=j({prop:"position"}),ce=W({key:"zIndices"}),he=j({prop:"zIndex",themeGet:ce}),ye=j({prop:"top",themeGet:I}),ve=j({prop:"right",themeGet:I}),be=j({prop:"bottom",themeGet:I}),Ge=j({prop:"left",themeGet:I}),xe=z(ge,he,ye,ve,be,Ge),ke=W({key:"fonts"}),we=j({prop:"fontFamily",themeGet:ke}),Se=W({key:"fontSizes",defaultVariants:[0,12,14,16,20,24,32,48,64,72],transform:l}),Ce=j({prop:"fontSize",themeGet:Se}),Re=W({key:"lineHeights",transform:m}),We=j({prop:"lineHeight",themeGet:Re}),Pe=W({key:"fontWeights"}),Ae=j({prop:"fontWeight",themeGet:Pe}),Be=j({prop:"textAlign"}),Te=W({key:"letterSpacings",transform:l}),ze=j({prop:"letterSpacing",themeGet:Te}),je=j({prop:"color",themeGet:L}),Le=j({prop:"textTransform"}),Ie=z(we,Ce,We,Ae,Be,ze,je,Le);function He(){return(He=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r}).apply(this,arguments)}var Me=A(function(){return{boxSizing:"border-box",flexGrow:1,flexWrap:"wrap",display:"flex"}},["row"]);function Oe(r,e){if(!0===e)return{flexBasis:0,flexGrow:1,maxWidth:"100%"};if("auto"===e)return{flex:"0 0 auto",maxWidth:"none",width:"auto"};var t=H(e)(r);return{flex:"0 0 "+t,maxWidth:t}}var Fe=A(function(r){var e=r.col,t={boxSizing:"border-box",flexBasis:0,flexGrow:1,maxWidth:"100%"};return i(e)?He({},t,{},T(r,e,function(e){return Oe(r,e)})):He({},t,{},Oe(r,e))},["col"]),_e=z(Me,Fe),Ne=z(Q,V,gr,Mr,le,Cr,xe,re,Ie,_e),Ve=function(r){return function(e){return f(e,r)}};Ve.color=L,Ve.px=I,Ve.percent=H,Ve.radius=M,Ve.border=U,Ve.borderWidth=ar,Ve.borderStyle=fr,Ve.shadow=mr,Ve.size=cr,Ve.zIndex=ce,Ve.space=Fr,Ve.font=ke,Ve.fontSize=Se,Ve.lineHeight=Re,Ve.fontWeight=Pe,Ve.letterSpacing=Te,Ve.transition=_;var De=function(r,e){return function(t){var o=h(t),n=G(o,r);return null===n?e:[y(n)+" {",e,"}"]}},Ee=function(r,e){return function(t){var o=h(t),n=x(o,r);return null===n?null:[v(n)+" {",e,"}"]}};r.alignContent=Wr,r.alignItems=Rr,r.alignSelf=Ir,r.background=D,r.backgroundColor=E,r.backgroundImage=Z,r.backgroundPosition=J,r.backgroundRepeat=K,r.backgroundSize=q,r.backgrounds=Q,r.basics=V,r.between=function(r,e,t){return function(o){var n=h(o),i=G(n,r),p=x(n,e);return null===p?De(r,t)(o):null===i?Ee(e,t)(o):[b(i,p)+" {",t,"}"]}},r.border=X,r.borderBottom=tr,r.borderBottomColor=or,r.borderColor=pr,r.borderLeft=nr,r.borderLeftColor=ir,r.borderRadius=sr,r.borderRight=rr,r.borderRightColor=er,r.borderStyle=dr,r.borderTop=Y,r.borderTopColor=$,r.borderWidth=ur,r.borders=gr,r.bottom=be,r.boxShadow=lr,r.breakpoints=function(r){return function(e){for(var t=[],o=Object.keys(r),n=o.length,i=0;i<n;i++){var p=o[i],a=r[p],u=De(p,a)(e);Array.isArray(u)?u.forEach(function(r){return t.push(r)}):t.push(u)}return t}},r.col=Fe,r.color=je,r.compose=z,r.createStyleGenerator=A,r.createSystemComponent=function(r,e,t){function o(o){var n=o.as,i=function(r,e){var t={};for(var o in r)-1===e.indexOf(o)&&(t[o]=r[o]);return t}(function(r,e){if(null==r)return{};var t,o,n={},i=Object.keys(r);for(o=0;o<i.length;o++)t=i[o],e.indexOf(t)>=0||(n[t]=r[t]);return n}(o,["as"]),t.meta.props);return r(n||e,i)}return void 0===e&&(e="div"),void 0===t&&(t=Ne),o.displayName="SystemComponent",o},r.display=hr,r.down=Ee,r.flex=jr,r.flexBasis=Tr,r.flexDirection=zr,r.flexWrap=Br,r.flexboxes=Mr,r.fontFamily=we,r.fontSize=Ce,r.fontWeight=Ae,r.getBorder=U,r.getBorderStyle=fr,r.getBorderWidth=ar,r.getBreakpoints=h,r.getColor=L,r.getFont=ke,r.getFontSize=Se,r.getFontWeight=Pe,r.getLetterSpacing=Te,r.getLineHeight=Re,r.getPercent=H,r.getPx=I,r.getRadius=M,r.getShadow=mr,r.getSize=cr,r.getSpace=Fr,r.getTransition=_,r.getZIndex=ce,r.gridArea=me,r.gridAutoColumns=ae,r.gridAutoFlow=pe,r.gridAutoRows=ue,r.gridColumn=ne,r.gridColumnGap=te,r.gridGap=ee,r.gridRow=ie,r.gridRowGap=oe,r.gridTemplateAreas=se,r.gridTemplateColumns=fe,r.gridTemplateRows=de,r.grids=le,r.height=vr,r.justifyContent=Pr,r.justifyItems=Ar,r.justifySelf=Lr,r.layout=Cr,r.left=Ge,r.letterSpacing=ze,r.lineHeight=We,r.margin=_r,r.marginBottom=Dr,r.marginLeft=Er,r.marginRight=Vr,r.marginTop=Nr,r.maxHeight=Gr,r.maxWidth=br,r.minHeight=kr,r.minWidth=xr,r.mx=Zr,r.my=qr,r.opacity=O,r.order=Hr,r.overflow=F,r.padding=Jr,r.paddingBottom=Ur,r.paddingLeft=Xr,r.paddingRight=Qr,r.paddingTop=Kr,r.position=ge,r.positioning=xe,r.px=Yr,r.py=$r,r.reduceBreakpoints=T,r.right=ve,r.row=Me,r.size=wr,r.space=re,r.style=j,r.system=Ne,r.textAlign=Be,r.textTransform=Le,r.th=Ve,r.themeGetter=W,r.top=ye,r.transition=N,r.typography=Ie,r.up=De,r.variant=function(r){var e=r.key,o=void 0===e?null:e,n=r.default,i=r.variants,p=void 0===i?{}:i,d=r.prop,s=void 0===d?"variant":d;return function(r){var e=t(o)?f(r,o):null,i=u(a({},p),e),d=void 0!==r[s]?r[s]:n;return f(r,d,i)}},r.verticalAlign=Sr,r.width=yr,r.xgrids=_e,r.zIndex=he,Object.defineProperty(r,"__esModule",{value:!0})});
!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((r=r||self).xstyledSystem={})}(this,function(r){"use strict";var e=function(r){return r},t=function(r){return null!=r},o=function(r){return"number"==typeof r&&!Number.isNaN(r)},n=function(r){return"string"==typeof r&&""!==r},i=function(r){return"object"==typeof r&&null!==r},p=function(r){return"function"==typeof r},a=function(r,e){if(!t(e))return r;for(var o in e)r[o]=e[o];return r},u=function r(e,o){if(!t(o))return e;for(var n in o)i(e[n])?e[n]=r(a({},e[n]),o[n]):e[n]=o[n];return e},m=function(r,e,o){return void 0===o&&(o=r.theme),function r(e){if(!p(e))return e;for(var t=arguments.length,o=new Array(t>1?t-1:0),n=1;n<t;n++)o[n-1]=arguments[n];var i=e.apply(void 0,o);return r.apply(void 0,[i].concat(o))}(function(r,e){for(var o=String(e).split("."),n=o.length,i=r,p=0;p<n;p+=1){if(void 0===i)return i;var a=o[p];i=t(i[a])?i[a]:void 0}return i}(o,e),r)};var f=function(r){return Math.round(r*Math.pow(10,4))/Math.pow(10,4)},s=function(r){return function(e){return o(e)&&0!==e?""+e+r:e}}("px"),d=function(r){return f(r/16)},l=function(r){return o(r)&&0!==r?d(r)+"rem":r},c=function(r){if(!n(r)||r.length<4)return r;if("rpx"!==r.slice(-3))return r;var e=Number(r.slice(0,r.length-3));return 0===e?0:d(e)+"rem"},g={xs:0,sm:576,md:768,lg:992,xl:1200};function h(r){var e=m(r,"breakpoints");return t(e)?e:g}var y=function(r){return r?"@media (min-width: "+r+")":null},v=function(r){return r?"@media (max-width: "+r+")":null},b=function(r,e){return"@media (min-width: "+r+") and (max-width: "+e+")"},G=function(r,e){var t=r[e];return 0===t?null:s(t)},x=function(r,e){var t=r[e];return 0===t?null:s(t-.02)},k="undefined"!=typeof Map&&"undefined"!=typeof WeakMap,w=k?new WeakMap:null;var S={has:function(){return!1},set:function(){},get:function(){}};function C(r,e){if(!k||!r)return S;var t=function(r){if(w.has(r))return w.get(r);var e={};return w.set(r,e),e}(r);return t[e]=t[e]||new Map,t[e]}var R=0,W=function(r){var e=r.name,i=r.transform,p=r.key,a=r.defaultVariants,u=r.compose,f=R++,s=function(r){return function(s){var d=r;if(!n(r)&&!o(r))return d;var l=C(s.theme,"__themeGetter"+f);if(l.has(r))return l.get(r);var c=t(p)?m(s,p):null;c=t(c)?c:a,d=t(c)?m(s,r,c):null,d=t(d)?d:r;var g=(e&&s.theme&&s.theme.transformers?s.theme.transformers[e]:null)||i;return g&&(d=g(d,{rawValue:r,variants:c})),d=u?u(d)(s):d,l.set(r,d),d}};return s.meta={name:e,transform:i},s};function P(r,e,t,p,a){if(i(e))return null;if(a.has(e))return a.get(e);var u=p(e)(t);if(!n(u)&&!o(u))return null;var m={};for(var f in r)m[r[f]]=u;return a.set(e,m),m}function A(r,e,t){return r.meta={props:e,getStyle:r,generators:t},r}function T(r){var e=h(r),t={};for(var o in e)t[o]=y(G(e,o));return t}function B(r,t,o,n){void 0===o&&(o=e);var i=n?function(r,e){if(e.has("_medias"))return e.get("_medias");var t=T(r);return e.set("_medias",t),t}(r,n):T(r),p={};for(var m in t){var f=o(t[m]);if(null!==f){var s=i[m];null===s?p=u(p,f):p[s]=p[s]?a(p[s],f):f}}return p}function z(){for(var r=[],e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];t.forEach(function(e){e&&(e.meta.generators?r=[].concat(r,e.meta.generators):r.push(e))});var n=function(r){for(var e={},t=0;t<r.length;t++){var o=r[t];if(o&&o.meta)for(var n=Object.keys(o.meta.props),i=0;i<n.length;i++)e[o.meta.props[n[i]]]=o}return e}(r);return A(function(r){var e={};for(var t in r){var o=n[t];if(o){var i=o.meta.getStyle(r);u(e,i)}}return e},r.reduce(function(r,e){return[].concat(r,e.meta.props)},[]),t)}function j(r){var e=r.prop,o=r.cssProperty,n=r.key,p=void 0===n?null:n,a=r.transform,u=void 0===a?null:a,m=r.themeGet,f=void 0===m?null:m,s=Array.isArray(o)?o:[o||e];return Array.isArray(e)?z.apply(void 0,e.map(function(r){return j({prop:r,cssProperty:s,key:p,transform:u,themeGet:f})})):(f=f||W({key:p,transform:u}),A(function(r,e,o){return function(n){var p=n[r];if(!t(p))return null;var a=C(n.theme,r);return i(p)?B(n,p,function(r){return P(e,r,n,o,a)},a):P(e,p,n,o,a)}}(e,s,f),[e]))}var L=W({name:"color",key:"colors"}),I=W({name:"px",transform:function(r){return s(c(r))}}),H=W({name:"percent",transform:function(r){return 0!==r&&r>=-1&&r<=1?f(100*r)+"%":r},compose:I}),M=W({name:"radius",key:"radii",compose:I}),O=W({name:"transition",key:"transitions"}),F=j({prop:"opacity"}),_=j({prop:"overflow"}),N=j({prop:"transition",themeGet:O}),V=z(F,_,N),E=j({prop:"background"}),D=j({prop:"backgroundColor",themeGet:L}),Z=j({prop:"backgroundImage"}),q=j({prop:"backgroundSize"}),J=j({prop:"backgroundPosition"}),K=j({prop:"backgroundRepeat"}),Q=z(E,D,Z,q,J,K),U=W({name:"border",key:"borders",transform:function(r){return o(r)&&r>0?s(r)+" solid":r}}),X=W({name:"borderWidth",key:"borderWidths",compose:I}),Y=W({name:"borderStyle",key:"borderStyles"}),$=W({name:"shadow",key:"shadows"}),rr=j({prop:"border",themeGet:U}),er=j({prop:"borderTop",themeGet:U}),tr=j({prop:"borderTopColor",themeGet:L}),or=j({prop:"borderRight",themeGet:U}),nr=j({prop:"borderRightColor",themeGet:L}),ir=j({prop:"borderBottom",themeGet:U}),pr=j({prop:"borderBottomColor",themeGet:L}),ar=j({prop:"borderLeft",themeGet:U}),ur=j({prop:"borderLeftColor",themeGet:L}),mr=j({prop:"borderColor",themeGet:L}),fr=j({prop:"borderWidth",themeGet:X}),sr=j({prop:"borderStyle",themeGet:Y}),dr=j({prop:"borderRadius",themeGet:M}),lr=j({prop:"boxShadow",themeGet:$}),cr=z(rr,er,tr,or,nr,ir,pr,ar,ur,mr,fr,sr,dr,lr),gr=W({name:"size",key:"sizes",compose:H}),hr=j({prop:"display"}),yr=j({prop:"width",themeGet:gr}),vr=j({prop:"height",themeGet:gr}),br=j({prop:"maxWidth",themeGet:gr}),Gr=j({prop:"maxHeight",themeGet:gr}),xr=j({prop:"minWidth",themeGet:gr}),kr=j({prop:"minHeight",themeGet:gr}),wr=j({prop:"size",cssProperty:["width","height"],themeGet:gr}),Sr=j({prop:"verticalAlign"}),Cr=z(hr,yr,vr,br,Gr,xr,kr,wr,Sr),Rr=j({prop:"alignItems"}),Wr=j({prop:"alignContent"}),Pr=j({prop:"justifyContent"}),Ar=j({prop:"justifyItems"}),Tr=j({prop:"flexWrap"}),Br=j({prop:"flexBasis",themeGet:H}),zr=j({prop:"flexDirection"}),jr=j({prop:"flex"}),Lr=j({prop:"justifySelf"}),Ir=j({prop:"alignSelf"}),Hr=j({prop:"order"}),Mr=z(hr,Rr,Wr,Pr,Ar,Tr,Br,zr,jr,Lr,Ir,Hr);function Or(r){return n(r)?"-"+r:-1*r}var Fr=W({name:"space",key:"space",defaultVariants:[0,4,8,16,24,48,96,144,192,240],compose:I,transform:function(r,e){var i=e.rawValue,p=e.variants;if(n(i)){var a=i.startsWith("-"),u=a?i.substr(1):i,m=p[u],f=t(m)?m:u;return a?Or(f):f}var s,d=Math.abs(i),l=o(s=i)&&s<0,c=t(p[d])?p[d]:d;return l?Or(c):c}}),_r=j({prop:["margin","m"],cssProperty:"margin",themeGet:Fr}),Nr=j({prop:["marginTop","mt"],cssProperty:"marginTop",themeGet:Fr}),Vr=j({prop:["marginRight","mr"],cssProperty:"marginRight",themeGet:Fr}),Er=j({prop:["marginBottom","mb"],cssProperty:"marginBottom",themeGet:Fr}),Dr=j({prop:["marginLeft","ml"],cssProperty:"marginLeft",themeGet:Fr}),Zr=j({prop:"mx",cssProperty:["marginRight","marginLeft"],themeGet:Fr}),qr=j({prop:"my",cssProperty:["marginTop","marginBottom"],themeGet:Fr}),Jr=j({prop:["padding","p"],cssProperty:"padding",themeGet:Fr}),Kr=j({prop:["paddingTop","pt"],cssProperty:"paddingTop",themeGet:Fr}),Qr=j({prop:["paddingRight","pr"],cssProperty:"paddingRight",themeGet:Fr}),Ur=j({prop:["paddingBottom","pb"],cssProperty:"paddingBottom",themeGet:Fr}),Xr=j({prop:["paddingLeft","pl"],cssProperty:"paddingLeft",themeGet:Fr}),Yr=j({prop:"px",cssProperty:["paddingRight","paddingLeft"],themeGet:Fr}),$r=j({prop:"py",cssProperty:["paddingTop","paddingBottom"],themeGet:Fr}),re=z(_r,Nr,Vr,Er,Dr,Zr,qr,Jr,Kr,Qr,Ur,Xr,Yr,$r),ee=j({prop:"gridGap",themeGet:Fr}),te=j({prop:"gridColumnGap",themeGet:Fr}),oe=j({prop:"gridRowGap",themeGet:Fr}),ne=j({prop:"gridColumn"}),ie=j({prop:"gridRow"}),pe=j({prop:"gridAutoFlow"}),ae=j({prop:"gridAutoColumns"}),ue=j({prop:"gridAutoRows"}),me=j({prop:"gridTemplateColumns"}),fe=j({prop:"gridTemplateRows"}),se=j({prop:"gridTemplateAreas"}),de=j({prop:"gridArea"}),le=z(ee,te,oe,ne,ie,pe,ae,ue,me,fe,se,de),ce=W({name:"zIndex",key:"zIndices"}),ge=j({prop:"position"}),he=j({prop:"zIndex",themeGet:ce}),ye=j({prop:"top",themeGet:I}),ve=j({prop:"right",themeGet:I}),be=j({prop:"bottom",themeGet:I}),Ge=j({prop:"left",themeGet:I}),xe=z(ge,he,ye,ve,be,Ge),ke=W({name:"font",key:"fonts"}),we=W({name:"lineHeight",key:"lineHeights",transform:c}),Se=W({name:"fontWeight",key:"fontWeights"}),Ce=W({name:"letterSpacing",key:"letterSpacings",compose:I}),Re=j({prop:"fontFamily",themeGet:ke}),We=W({name:"fontSize",key:"fontSizes",defaultVariants:[0,12,14,16,20,24,32,48,64,72],compose:I}),Pe=j({prop:"fontSize",themeGet:We}),Ae=j({prop:"lineHeight",themeGet:we}),Te=j({prop:"fontWeight",themeGet:Se}),Be=j({prop:"textAlign"}),ze=j({prop:"letterSpacing",themeGet:Ce}),je=j({prop:"color",themeGet:L}),Le=j({prop:"textTransform"}),Ie=z(Re,Pe,Ae,Te,Be,ze,je,Le);function He(){return(He=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r}).apply(this,arguments)}var Me=A(function(){return{boxSizing:"border-box",flexGrow:1,flexWrap:"wrap",display:"flex"}},["row"]);function Oe(r,e){if(!0===e)return{flexBasis:0,flexGrow:1,maxWidth:"100%"};if("auto"===e)return{flex:"0 0 auto",maxWidth:"none",width:"auto"};var t=H(e)(r);return{flex:"0 0 "+t,maxWidth:t}}var Fe=A(function(r){var e=r.col,t={boxSizing:"border-box",flexBasis:0,flexGrow:1,maxWidth:"100%"};return i(e)?He({},t,{},B(r,e,function(e){return Oe(r,e)})):He({},t,{},Oe(r,e))},["col"]),_e=z(Me,Fe),Ne=z(Q,V,cr,Mr,le,Cr,xe,re,Ie,_e),Ve=function(r){return function(e){return m(e,r)}};[L,I,H,M,U,X,Y,$,gr,ce,Fr,ke,We,we,Se,Ce,O].forEach(function(r){Ve[r.meta.name]=r});var Ee=function(r,e){return function(t){var o=h(t),n=G(o,r);return null===n?e:[y(n)+" {",e,"}"]}},De=function(r,e){return function(t){var o=h(t),n=x(o,r);return null===n?null:[v(n)+" {",e,"}"]}},Ze={px:function(r){return l(c(r))},border:function(r){return o(r)&&r>0?l(r)+" solid":r}};r.alignContent=Wr,r.alignItems=Rr,r.alignSelf=Ir,r.background=E,r.backgroundColor=D,r.backgroundImage=Z,r.backgroundPosition=J,r.backgroundRepeat=K,r.backgroundSize=q,r.backgrounds=Q,r.basics=V,r.between=function(r,e,t){return function(o){var n=h(o),i=G(n,r),p=x(n,e);return null===p?Ee(r,t)(o):null===i?De(e,t)(o):[b(i,p)+" {",t,"}"]}},r.border=rr,r.borderBottom=ir,r.borderBottomColor=pr,r.borderColor=mr,r.borderLeft=ar,r.borderLeftColor=ur,r.borderRadius=dr,r.borderRight=or,r.borderRightColor=nr,r.borderStyle=sr,r.borderTop=er,r.borderTopColor=tr,r.borderWidth=fr,r.borders=cr,r.bottom=be,r.boxShadow=lr,r.breakpoints=function(r){return function(e){for(var t=[],o=Object.keys(r),n=o.length,i=0;i<n;i++){var p=o[i],a=r[p],u=Ee(p,a)(e);Array.isArray(u)?u.forEach(function(r){return t.push(r)}):t.push(u)}return t}},r.col=Fe,r.color=je,r.compose=z,r.createStyleGenerator=A,r.createSystemComponent=function(r,e,t){function o(o){var n=o.as,i=function(r,e){var t={};for(var o in r)-1===e.indexOf(o)&&(t[o]=r[o]);return t}(function(r,e){if(null==r)return{};var t,o,n={},i=Object.keys(r);for(o=0;o<i.length;o++)t=i[o],e.indexOf(t)>=0||(n[t]=r[t]);return n}(o,["as"]),t.meta.props);return r(n||e,i)}return void 0===e&&(e="div"),void 0===t&&(t=Ne),o.displayName="SystemComponent",o},r.display=hr,r.down=De,r.flex=jr,r.flexBasis=Br,r.flexDirection=zr,r.flexWrap=Tr,r.flexboxes=Mr,r.fontFamily=Re,r.fontSize=Pe,r.fontWeight=Te,r.getBorder=U,r.getBorderStyle=Y,r.getBorderWidth=X,r.getBreakpoints=h,r.getColor=L,r.getFont=ke,r.getFontSize=We,r.getFontWeight=Se,r.getLetterSpacing=Ce,r.getLineHeight=we,r.getPercent=H,r.getPx=I,r.getRadius=M,r.getShadow=$,r.getSize=gr,r.getSpace=Fr,r.getTransition=O,r.getZIndex=ce,r.gridArea=de,r.gridAutoColumns=ae,r.gridAutoFlow=pe,r.gridAutoRows=ue,r.gridColumn=ne,r.gridColumnGap=te,r.gridGap=ee,r.gridRow=ie,r.gridRowGap=oe,r.gridTemplateAreas=se,r.gridTemplateColumns=me,r.gridTemplateRows=fe,r.grids=le,r.height=vr,r.justifyContent=Pr,r.justifyItems=Ar,r.justifySelf=Lr,r.layout=Cr,r.left=Ge,r.letterSpacing=ze,r.lineHeight=Ae,r.margin=_r,r.marginBottom=Er,r.marginLeft=Dr,r.marginRight=Vr,r.marginTop=Nr,r.maxHeight=Gr,r.maxWidth=br,r.minHeight=kr,r.minWidth=xr,r.mx=Zr,r.my=qr,r.opacity=F,r.order=Hr,r.overflow=_,r.padding=Jr,r.paddingBottom=Ur,r.paddingLeft=Xr,r.paddingRight=Qr,r.paddingTop=Kr,r.position=ge,r.positioning=xe,r.px=Yr,r.py=$r,r.reduceBreakpoints=B,r.right=ve,r.row=Me,r.rpxTransformer=Ze,r.size=wr,r.space=re,r.style=j,r.system=Ne,r.textAlign=Be,r.textTransform=Le,r.th=Ve,r.themeGetter=W,r.top=ye,r.transition=N,r.typography=Ie,r.up=Ee,r.variant=function(r){var e=r.key,o=void 0===e?null:e,n=r.default,i=r.variants,p=void 0===i?{}:i,f=r.prop,s=void 0===f?"variant":f;return function(r){var e=t(o)?m(r,o):null,i=u(a({},p),e),f=void 0!==r[s]?r[s]:n;return m(r,f,i)}},r.verticalAlign=Sr,r.width=yr,r.xgrids=_e,r.zIndex=he,Object.defineProperty(r,"__esModule",{value:!0})});

221

dist/xstyled-system.umd.js

@@ -113,2 +113,10 @@ (function (global, factory) {

unit('px');
var pxToRem = function pxToRem(value) {
return round(value / 16);
};
var remPx = function remPx(value) {
return num(value) && value !== 0 ? pxToRem(value) + "rem" : value;
};
var rpx = function rpx(value) {

@@ -120,9 +128,6 @@ if (!string(value) || value.length < 4) return value;

if (n === 0) return 0;
return round(n / 16) + "rem";
return pxToRem(n) + "rem";
};
var rpxPx = function rpxPx(value) {
return px(rpx(value));
};
var percent = function percent(n) {
return n !== 0 && n >= -1 && n <= 1 ? round(n * 100) + "%" : rpxPx(n);
return n !== 0 && n >= -1 && n <= 1 ? round(n * 100) + "%" : n;
};

@@ -204,9 +209,13 @@

var themeGetter = function themeGetter(_ref) {
var transform = _ref.transform,
var name = _ref.name,
defaultTransform = _ref.transform,
key = _ref.key,
defaultVariants = _ref.defaultVariants;
defaultVariants = _ref.defaultVariants,
compose = _ref.compose;
var id = themeGetterId++;
return function (value) {
var getter = function getter(value) {
return function (props) {
if (!string(value) && !num(value)) return value;
var res = value;
if (!string(value) && !num(value)) return res;
var cache = getCacheNamespace(props.theme, "__themeGetter" + id);

@@ -216,18 +225,24 @@ if (cache.has(value)) return cache.get(value);

variants = is(variants) ? variants : defaultVariants;
var themeValue = is(variants) ? getThemeValue(props, value, variants) : null;
var computedValue = is(themeValue) ? themeValue : value;
res = is(variants) ? getThemeValue(props, value, variants) : null;
res = is(res) ? res : value;
var transform = (name && props.theme && props.theme.transformers ? props.theme.transformers[name] : null) || defaultTransform;
if (!transform) {
cache.set(value, computedValue);
return computedValue;
if (transform) {
res = transform(res, {
rawValue: value,
variants: variants
});
}
var transformedValue = transform(computedValue, {
rawValue: value,
variants: variants
});
cache.set(value, transformedValue);
return transformedValue;
res = compose ? compose(res)(props) : res;
cache.set(value, res);
return res;
};
};
getter.meta = {
name: name,
transform: defaultTransform
};
return getter;
};

@@ -413,2 +428,3 @@

themeGetter({
name: 'color',
key: 'colors'

@@ -419,3 +435,6 @@ });

themeGetter({
transform: rpxPx
name: 'px',
transform: function transform(value) {
return px(rpx(value));
}
});

@@ -425,3 +444,5 @@ var getPercent =

themeGetter({
transform: percent
name: 'percent',
transform: percent,
compose: getPx
});

@@ -431,5 +452,13 @@ var getRadius =

themeGetter({
name: 'radius',
key: 'radii',
transform: rpxPx
compose: getPx
});
var getTransition =
/*#__PURE__*/
themeGetter({
name: 'transition',
key: 'transitions'
}); // Style
var opacity =

@@ -445,7 +474,2 @@ /*#__PURE__*/

});
var getTransition =
/*#__PURE__*/
themeGetter({
key: 'transitions'
});
var transition =

@@ -499,2 +523,3 @@ /*#__PURE__*/

themeGetter({
name: 'border',
key: 'borders',

@@ -505,2 +530,22 @@ transform: function transform(n) {

});
var getBorderWidth =
/*#__PURE__*/
themeGetter({
name: 'borderWidth',
key: 'borderWidths',
compose: getPx
});
var getBorderStyle =
/*#__PURE__*/
themeGetter({
name: 'borderStyle',
key: 'borderStyles'
});
var getShadow =
/*#__PURE__*/
themeGetter({
name: 'shadow',
key: 'shadows'
}); // Style
var border =

@@ -566,8 +611,2 @@ /*#__PURE__*/

});
var getBorderWidth =
/*#__PURE__*/
themeGetter({
key: 'borderWidths',
transform: rpxPx
});
var borderWidth =

@@ -579,7 +618,2 @@ /*#__PURE__*/

});
var getBorderStyle =
/*#__PURE__*/
themeGetter({
key: 'borderStyles'
});
var borderStyle =

@@ -597,7 +631,2 @@ /*#__PURE__*/

});
var getShadow =
/*#__PURE__*/
themeGetter({
key: 'shadows'
});
var boxShadow =

@@ -616,5 +645,7 @@ /*#__PURE__*/

themeGetter({
transform: percent,
key: 'sizes'
});
name: 'size',
key: 'sizes',
compose: getPercent
}); // Styles
var display =

@@ -740,9 +771,12 @@ /*#__PURE__*/

return value * -1;
}
} // Getters
var getSpace =
/*#__PURE__*/
themeGetter({
name: 'space',
key: 'space',
defaultVariants: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
compose: getPx,
transform: function transform(_, _ref) {

@@ -760,3 +794,3 @@ var rawValue = _ref.rawValue,

return rpxPx(_neg ? toNegative(_value) : _value);
return _neg ? toNegative(_value) : _value;
}

@@ -767,5 +801,6 @@

var value = is(variants[abs]) ? variants[abs] : abs;
return rpxPx(neg ? toNegative(value) : value);
return neg ? toNegative(value) : value;
}
});
}); // Styles
var margin =

@@ -940,2 +975,9 @@ /*#__PURE__*/

var getZIndex =
/*#__PURE__*/
themeGetter({
name: 'zIndex',
key: 'zIndices'
}); // Styles
var position =

@@ -946,7 +988,2 @@ /*#__PURE__*/

});
var getZIndex =
/*#__PURE__*/
themeGetter({
key: 'zIndices'
});
var zIndex =

@@ -989,4 +1026,26 @@ /*#__PURE__*/

themeGetter({
name: 'font',
key: 'fonts'
});
var getLineHeight =
/*#__PURE__*/
themeGetter({
name: 'lineHeight',
key: 'lineHeights',
transform: rpx
});
var getFontWeight =
/*#__PURE__*/
themeGetter({
name: 'fontWeight',
key: 'fontWeights'
});
var getLetterSpacing =
/*#__PURE__*/
themeGetter({
name: 'letterSpacing',
key: 'letterSpacings',
compose: getPx
}); // Styles
var fontFamily =

@@ -1001,5 +1060,6 @@ /*#__PURE__*/

themeGetter({
name: 'fontSize',
key: 'fontSizes',
defaultVariants: [0, 12, 14, 16, 20, 24, 32, 48, 64, 72],
transform: rpxPx
compose: getPx
});

@@ -1012,8 +1072,2 @@ var fontSize =

});
var getLineHeight =
/*#__PURE__*/
themeGetter({
key: 'lineHeights',
transform: rpx
});
var lineHeight =

@@ -1025,7 +1079,2 @@ /*#__PURE__*/

});
var getFontWeight =
/*#__PURE__*/
themeGetter({
key: 'fontWeights'
});
var fontWeight =

@@ -1042,8 +1091,2 @@ /*#__PURE__*/

});
var getLetterSpacing =
/*#__PURE__*/
themeGetter({
key: 'letterSpacings',
transform: rpxPx
});
var letterSpacing =

@@ -1166,19 +1209,5 @@ /*#__PURE__*/

};
th.color = getColor;
th.px = getPx;
th.percent = getPercent;
th.radius = getRadius;
th.border = getBorder;
th.borderWidth = getBorderWidth;
th.borderStyle = getBorderStyle;
th.shadow = getShadow;
th.size = getSize;
th.zIndex = getZIndex;
th.space = getSpace;
th.font = getFont;
th.fontSize = getFontSize;
th.lineHeight = getLineHeight;
th.fontWeight = getFontWeight;
th.letterSpacing = getLetterSpacing;
th.transition = getTransition;
[getColor, getPx, getPercent, getRadius, getBorder, getBorderWidth, getBorderStyle, getShadow, getSize, getZIndex, getSpace, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition].forEach(function (themeGetter) {
th[themeGetter.meta.name] = themeGetter;
});

@@ -1253,2 +1282,11 @@ var variant = function variant(_ref) {

var rpxTransformer = {
px: function px(value) {
return remPx(rpx(value));
},
border: function border(n) {
return num(n) && n > 0 ? remPx(n) + " solid" : n;
}
};
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -1402,2 +1440,3 @@ if (source == null) return {};

exports.row = row;
exports.rpxTransformer = rpxTransformer;
exports.size = size;

@@ -1404,0 +1443,0 @@ exports.space = space;

4

package.json
{
"name": "@xstyled/system",
"description": "Modern style system for styled-components & emotion.",
"version": "1.7.0",
"version": "1.8.0",
"keywords": [

@@ -28,3 +28,3 @@ "emotion",

},
"gitHead": "a7af03df58752838e0a67ef0d38cae5070db9635"
"gitHead": "21703e47414d5113e02bcf35854aff5783708baf"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc