@chakra-ui/styled-system - npm Package Compare versions

59

CHANGELOG.md

		# Change Log

		## 1.2.0

		### Minor Changes

		- [`609ac595`](https://github.com/chakra-ui/chakra-ui/commit/609ac595568799c9f2c38ccbc9ef44fdc7393baa)
		Thanks [@segunadebayo](https://github.com/segunadebayo)! - ## 📝 Description

		Adds support for CSS logical properties and `direction` in the theme for
		future RTL optimizations.

		## 🚀 New behavior

		Make it possible to pass css logical style props or shorthand props. For
		example, to pass bi-directional margin-left, users will change `ml` to `ms` OR
		`marginLeft` ot `marginStart`.

		```jsx
		// not RTL friendly 🚨
		<Box ml="20px" />

		// Good ✅
		<Box marginStart="20px" />

		// or use shorthand for margin-left bi-directional ✅
		<Box ms="20px" />
		```

		Here's a list of possible bi-directional shorthand style props you can pass in
		addition to most css logical properties:

		\| Prop \| LTR value \| RTL value \|
		\| ------------------ \| ---------------------------------------------- \| ---------------------------------------------- \|
		\| ms \| marginLeft \| marginRight \|
		\| marginStart \| marginLeft \| marginRight \|
		\| me \| marginRight \| marginLeft \|
		\| marginEnd \| marginRight \| marginLeft \|
		\| ps \| paddingLeft \| paddingRight \|
		\| paddingStart \| paddingLeft \| paddingRight \|
		\| pe \| paddingRight \| paddingLeft \|
		\| paddingEnd \| paddingRight \| paddingLeft \|
		\| insetStart \| left \| right \|
		\| insetEnd \| right \| left \|
		\| borderStartWidth \| borderLeftWidth \| borderRightWidth \|
		\| borderEndWidth \| borderRightWidth \| borderLeftWidth \|
		\| borderStartRadius \| borderTopLeftRadius + borderBottomLeftRadius \| borderTopRightRadius + borderBottomRightRadius \|
		\| borderEndRadius \| borderTopRightRadius + borderBottomRightRadius \| borderTopLeftRadius + borderBottomLeftRadius \|
		\| roundedStart \| borderTopLeftRadius + borderBottomLeftRadius \| borderTopRightRadius + borderBottomRightRadius \|
		\| roundedEnd \| borderTopRightRadius + borderBottomRightRadius \| borderTopLeftRadius + borderBottomLeftRadius \|
		\| roundedTopStart \| borderTopLeftRadius \| borderTopRightRadius \|
		\| roundedTopEnd \| borderTopRightRadius \| borderTopLeftRadius \|
		\| roundedBottomStart \| borderBottomLeftRadius \| borderBottomRightRadius \|
		\| roundedBottomEnd \| borderBottomRightRadius \| borderBottomLeftRadius \|

		### Patch Changes

		- Updated dependencies
		[[`e73878ee`](https://github.com/chakra-ui/chakra-ui/commit/e73878ee686c11d3f94ad6ac61b19ae9508d75a5)]:
		- @chakra-ui/utils@1.0.2

		## 1.1.1
		@@ -4,0 +63,0 @@

54

dist/cjs/config/background.js

		@@ -8,19 +8,9 @@ "use strict";

		var _utils = require("../utils");

		var config = {
		bg: {
		property: "background",
		scale: "colors"
		},
		bgColor: {
		property: "backgroundColor",
		scale: "colors"
		},
		background: {
		property: "background",
		scale: "colors"
		},
		backgroundColor: {
		property: "backgroundColor",
		scale: "colors"
		},
		bg: _utils.t.colors("background"),
		bgColor: _utils.t.colors("backgroundColor"),
		background: _utils.t.colors("background"),
		backgroundColor: _utils.t.colors("backgroundColor"),
		backgroundImage: true,
		@@ -32,26 +22,10 @@ backgroundSize: true,
		backgroundBlendMode: true,
		bgImage: {
		property: "backgroundImage"
		},
		bgImg: {
		property: "backgroundImage"
		},
		bgBlendMode: {
		property: "backgroundBlendMode"
		},
		bgSize: {
		property: "backgroundSize"
		},
		bgPosition: {
		property: "backgroundPosition"
		},
		bgPos: {
		property: "backgroundPosition"
		},
		bgRepeat: {
		property: "backgroundRepeat"
		},
		bgAttachment: {
		property: "backgroundAttachment"
		}
		bgImage: _utils.t.prop("backgroundImage"),
		bgImg: _utils.t.prop("backgroundImage"),
		bgBlendMode: _utils.t.prop("backgroundBlendMode"),
		bgSize: _utils.t.prop("backgroundSize"),
		bgPosition: _utils.t.prop("backgroundPosition"),
		bgPos: _utils.t.prop("backgroundPosition"),
		bgRepeat: _utils.t.prop("backgroundRepeat"),
		bgAttachment: _utils.t.prop("backgroundAttachment")
		};
		@@ -58,0 +32,0 @@ var background = (0, _core.system)(config);

268

dist/cjs/config/border.js

		@@ -8,167 +8,125 @@ "use strict";

		/**
		* The parser configuration for common border properties
		*/
		var _utils = require("../utils");

		var config = {
		border: {
		property: "border",
		scale: "borders"
		border: _utils.t.borders("border"),
		borderWidth: _utils.t.borderWidths("borderWidth"),
		borderStyle: _utils.t.borderStyles("borderStyle"),
		borderColor: _utils.t.colors("borderColor"),
		borderRadius: _utils.t.radii("borderRadius"),
		borderTop: _utils.t.borders("borderTop"),
		borderBlockStart: _utils.t.borders("borderBlockStart"),
		borderTopLeftRadius: _utils.t.radii("borderTopLeftRadius"),
		borderStartStartRadius: {
		property: "&",
		scale: "radii",
		transform: (0, _utils.polyfill)({
		ltr: "borderTopLeftRadius",
		rtl: "borderTopRightRadius"
		})
		},
		borderWidth: {
		property: "borderWidth",
		scale: "borderWidths"
		borderEndStartRadius: {
		property: "&",
		scale: "radii",
		transform: (0, _utils.polyfill)({
		ltr: "borderBottomLeftRadius",
		rtl: "borderBottomRightRadius"
		})
		},
		borderStyle: {
		property: "borderStyle",
		scale: "borderStyles"
		borderTopRightRadius: _utils.t.radii("borderTopRightRadius"),
		borderStartEndRadius: {
		property: "&",
		scale: "radii",
		transform: (0, _utils.polyfill)({
		ltr: "borderTopRightRadius",
		rtl: "borderTopLeftRadius"
		})
		},
		borderColor: {
		property: "borderColor",
		scale: "colors"
		borderEndEndRadius: {
		property: "&",
		scale: "radii",
		transform: (0, _utils.polyfill)({
		ltr: "borderBottomRightRadius",
		rtl: "borderBottomLeftRadius"
		})
		},
		borderRadius: {
		property: "borderRadius",
		scale: "radii"
		},
		rounded: {
		property: "borderRadius",
		scale: "radii"
		},
		borderTop: {
		property: "borderTop",
		borderRight: _utils.t.borders("borderRight"),
		borderInlineEnd: _utils.t.borders("borderInlineEnd"),
		borderBottom: _utils.t.borders("borderBottom"),
		borderBlockEnd: _utils.t.borders("borderBlockEnd"),
		borderBottomLeftRadius: _utils.t.radii("borderBottomLeftRadius"),
		borderBottomRightRadius: _utils.t.radii("borderBottomRightRadius"),
		borderLeft: _utils.t.borders("borderLeft"),
		borderInlineStart: {
		property: "borderInlineStart",
		scale: "borders"
		},
		borderTopLeftRadius: {
		property: "borderTopLeftRadius",
		scale: "radii"
		borderInlineStartRadius: {
		scale: "radii",
		property: "&",
		transform: (0, _utils.polyfill)({
		ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"],
		rtl: ["borderTopRightRadius", "borderBottomRightRadius"]
		})
		},
		roundedTopLeft: {
		property: "borderTopLeftRadius",
		scale: "radii"
		borderInlineEndRadius: {
		scale: "radii",
		property: "&",
		transform: (0, _utils.polyfill)({
		ltr: ["borderTopRightRadius", "borderBottomRightRadius"],
		rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"]
		})
		},
		borderTopRightRadius: {
		property: "borderTopRightRadius",
		scale: "radii"
		},
		roundedTopRight: {
		property: "borderTopRightRadius",
		scale: "radii"
		},
		borderRight: {
		property: "borderRight",
		scale: "borders"
		},
		borderBottom: {
		property: "borderBottom",
		scale: "borders"
		},
		borderBottomLeftRadius: {
		property: "borderBottomLeftRadius",
		scale: "radii"
		},
		roundedBottomLeft: {
		property: "borderBottomLeftRadius",
		scale: "radii"
		},
		borderBottomRightRadius: {
		property: "borderBottomRightRadius",
		scale: "radii"
		},
		roundedBottomRight: {
		property: "borderBottomRightRadius",
		scale: "radii"
		},
		borderLeft: {
		property: "borderLeft",
		scale: "borders"
		},
		borderX: {
		properties: ["borderLeft", "borderRight"],
		scale: "borders"
		},
		borderY: {
		properties: ["borderTop", "borderBottom"],
		scale: "borders"
		},
		borderTopWidth: {
		property: "borderTopWidth",
		scale: "borderWidths"
		},
		borderTopColor: {
		property: "borderTopColor",
		scale: "colors"
		},
		borderTopStyle: {
		property: "borderTopStyle",
		scale: "borderStyles"
		},
		borderBottomWidth: {
		property: "borderBottomWidth",
		scale: "borderWidths"
		},
		borderBottomColor: {
		property: "borderBottomColor",
		scale: "colors"
		},
		borderBottomStyle: {
		property: "borderBottomStyle",
		scale: "borderStyles"
		},
		borderLeftWidth: {
		property: "borderLeftWidth",
		scale: "borderWidths"
		},
		borderLeftColor: {
		property: "borderLeftColor",
		scale: "colors"
		},
		borderLeftStyle: {
		property: "borderLeftStyle",
		scale: "borderStyles"
		},
		borderRightWidth: {
		property: "borderRightWidth",
		scale: "borderWidths"
		},
		borderRightColor: {
		property: "borderRightColor",
		scale: "colors"
		},
		borderRightStyle: {
		property: "borderRightStyle",
		scale: "borderStyles"
		},
		borderTopRadius: {
		properties: ["borderTopLeftRadius", "borderTopRightRadius"],
		scale: "radii"
		},
		roundedTop: {
		properties: ["borderTopLeftRadius", "borderTopRightRadius"],
		scale: "radii"
		},
		borderBottomRadius: {
		properties: ["borderBottomLeftRadius", "borderBottomRightRadius"],
		scale: "radii"
		},
		roundedBottom: {
		properties: ["borderBottomLeftRadius", "borderBottomRightRadius"],
		scale: "radii"
		},
		borderLeftRadius: {
		properties: ["borderTopLeftRadius", "borderBottomLeftRadius"],
		scale: "radii"
		},
		roundedLeft: {
		properties: ["borderTopLeftRadius", "borderBottomLeftRadius"],
		scale: "radii"
		},
		borderRightRadius: {
		properties: ["borderTopRightRadius", "borderBottomRightRadius"],
		scale: "radii"
		},
		roundedRight: {
		properties: ["borderTopRightRadius", "borderBottomRightRadius"],
		scale: "radii"
		}
		borderX: _utils.t.borders(["borderLeft", "borderRight"]),
		borderInline: _utils.t.borders("borderInline"),
		borderY: _utils.t.borders(["borderTop", "borderBottom"]),
		borderBlock: _utils.t.borders("borderBlock"),
		borderTopWidth: _utils.t.borderWidths("borderTopWidth"),
		borderBlockStartWidth: _utils.t.borderWidths("borderBlockStartWidth"),
		borderTopColor: _utils.t.colors("borderTopColor"),
		borderBlockStartColor: _utils.t.colors("borderBlockStartColor"),
		borderTopStyle: _utils.t.borderStyles("borderTopStyle"),
		borderBlockStartStyle: _utils.t.borderStyles("borderBlockStartStyle"),
		borderBottomWidth: _utils.t.borderWidths("borderBottomWidth"),
		borderBlockEndWidth: _utils.t.borderWidths("borderBlockEndWidth"),
		borderBottomColor: _utils.t.colors("borderBottomColor"),
		borderBlockEndColor: _utils.t.colors("borderBlockEndColor"),
		borderBottomStyle: _utils.t.borderStyles("borderBottomStyle"),
		borderBlockEndStyle: _utils.t.borderStyles("borderBlockEndStyle"),
		borderLeftWidth: _utils.t.borderWidths("borderLeftWidth"),
		borderInlineStartWidth: _utils.t.borderWidths("borderInlineStartWidth"),
		borderLeftColor: _utils.t.colors("borderLeftColor"),
		borderInlineStartColor: _utils.t.colors("borderInlineStartColor"),
		borderLeftStyle: _utils.t.borderStyles("borderLeftStyle"),
		borderInlineStartStyle: _utils.t.borderStyles("borderInlineStartStyle"),
		borderRightWidth: _utils.t.borderWidths("borderRightWidth"),
		borderInlineEndWidth: _utils.t.borderWidths("borderInlineEndWidth"),
		borderRightColor: _utils.t.colors("borderRightColor"),
		borderInlineEndColor: _utils.t.colors("borderInlineEndColor"),
		borderRightStyle: _utils.t.borderStyles("borderRightStyle"),
		borderInlineEndStyle: _utils.t.borderStyles("borderInlineEndStyle"),
		borderTopRadius: _utils.t.radii(["borderTopLeftRadius", "borderTopRightRadius"]),
		borderBottomRadius: _utils.t.radii(["borderBottomLeftRadius", "borderBottomRightRadius"]),
		borderLeftRadius: _utils.t.radii(["borderTopLeftRadius", "borderBottomLeftRadius"]),
		borderRightRadius: _utils.t.radii(["borderTopRightRadius", "borderBottomRightRadius"])
		};
		config.roundedTopLeft = config.borderTopLeftRadius;
		config.roundedTopStart = config.borderStartStartRadius;
		config.roundedTopRight = config.borderTopRightRadius;
		config.roundedTopEnd = config.borderStartEndRadius;
		config.roundedBottomLeft = config.borderBottomLeftRadius;
		config.roundedBottomStart = config.borderEndStartRadius;
		config.roundedBottomRight = config.borderBottomRightRadius;
		config.roundedBottomEnd = config.borderEndEndRadius;
		config.rounded = config.borderRadius;
		config.roundedTop = config.borderTopRadius;
		config.roundedBottom = config.borderBottomRadius;
		config.roundedLeft = config.borderLeftRadius;
		config.roundedRight = config.borderRightRadius;
		config.roundedStart = config.borderInlineStartRadius;
		config.borderStartRadius = config.borderInlineStartRadius;
		config.roundedEnd = config.borderInlineEndRadius;
		config.borderEndRadius = config.borderInlineEndRadius;
		config.borderEndWidth = config.borderInlineEndWidth;
		config.borderStartWidth = config.borderInlineStartWidth;
		/**
		@@ -175,0 +133,0 @@ * The prop types for border properties listed above

25

dist/cjs/config/color.js

		@@ -8,23 +8,10 @@ "use strict";

		/**
		* The parser configuration for common border properties
		*/
		var _utils = require("../utils");

		var config = {
		color: {
		property: "color",
		scale: "colors"
		},
		textColor: {
		property: "color",
		scale: "colors"
		},
		color: _utils.t.colors("color"),
		textColor: _utils.t.colors("color"),
		opacity: true,
		fill: {
		property: "fill",
		scale: "colors"
		},
		stroke: {
		property: "stroke",
		scale: "colors"
		}
		fill: _utils.t.colors("fill"),
		stroke: _utils.t.colors("stroke")
		};
		@@ -31,0 +18,0 @@ var color = (0, _core.system)(config);

11

dist/cjs/config/flexbox.js

		@@ -8,2 +8,4 @@ "use strict";

		var _utils = require("../utils");

		var config = {
		@@ -19,12 +21,7 @@ alignItems: true,
		flexShrink: true,
		flexBasis: {
		property: "flexBasis",
		scale: "sizes"
		},
		flexBasis: _utils.t.sizes("flexBasis"),
		justifySelf: true,
		alignSelf: true,
		order: true,
		flexDir: {
		property: "flexDirection"
		}
		flexDir: _utils.t.prop("flexDirection")
		};
		@@ -31,0 +28,0 @@ /**

17

dist/cjs/config/grid.js

		@@ -8,15 +8,8 @@ "use strict";

		var _utils = require("../utils");

		var config = {
		gridGap: {
		property: "gridGap",
		scale: "space"
		},
		gridColumnGap: {
		property: "gridColumnGap",
		scale: "space"
		},
		gridRowGap: {
		property: "gridRowGap",
		scale: "space"
		},
		gridGap: _utils.t.space("gridGap"),
		gridColumnGap: _utils.t.space("gridColumnGap"),
		gridRowGap: _utils.t.space("gridRowGap"),
		gridColumn: true,
		@@ -23,0 +16,0 @@ gridRow: true,

84

dist/cjs/config/layout.js

		@@ -6,69 +6,21 @@ "use strict";

		var _utils = require("@chakra-ui/utils");

		var _core = require("@styled-system/core");

		function transform(value, scale) {
		var defaultValue = !(0, _utils.isNumber)(value) \|\| value > 1 ? value : value * 100 + "%";
		return (0, _utils.memoizedGet)(scale, value, defaultValue);
		}
		var _utils = require("../utils");

		var config = {
		width: {
		property: "width",
		scale: "sizes",
		transform: transform
		},
		w: {
		property: "width",
		scale: "sizes",
		transform: transform
		},
		height: {
		property: "height",
		scale: "sizes"
		},
		h: {
		property: "height",
		scale: "sizes"
		},
		boxSize: {
		properties: ["width", "height"],
		scale: "sizes"
		},
		minWidth: {
		property: "minWidth",
		scale: "sizes"
		},
		minW: {
		property: "minWidth",
		scale: "sizes"
		},
		minHeight: {
		property: "minHeight",
		scale: "sizes"
		},
		minH: {
		property: "minHeight",
		scale: "sizes"
		},
		maxWidth: {
		property: "maxWidth",
		scale: "sizes"
		},
		maxW: {
		property: "maxWidth",
		scale: "sizes"
		},
		maxHeight: {
		property: "maxHeight",
		scale: "sizes"
		},
		maxH: {
		property: "maxHeight",
		scale: "sizes"
		},
		d: {
		property: "display"
		},
		width: _utils.t.sizesT("width"),
		inlineSize: _utils.t.sizesT("inlineSize"),
		height: _utils.t.sizes("height"),
		blockSize: _utils.t.sizes("blockSize"),
		boxSize: _utils.t.sizes(["width", "height"]),
		minWidth: _utils.t.sizes("minWidth"),
		minInlineSize: _utils.t.sizes("minInlineSize"),
		minHeight: _utils.t.sizes("minHeight"),
		minBlockSize: _utils.t.sizes("minBlockSize"),
		maxWidth: _utils.t.sizes("maxWidth"),
		maxInlineSize: _utils.t.sizes("maxInlineSize"),
		maxHeight: _utils.t.sizes("maxHeight"),
		maxBlockSize: _utils.t.sizes("maxBlockSize"),
		d: _utils.t.prop("display"),
		overflow: true,
		@@ -81,2 +33,8 @@ overflowX: true,
		};
		config.w = config.width;
		config.h = config.height;
		config.minW = config.minWidth;
		config.maxW = config.maxWidth;
		config.minH = config.minHeight;
		config.maxH = config.maxHeight;
		/**
		@@ -83,0 +41,0 @@ * Types for layout related CSS properties

10

dist/cjs/config/list.js

		@@ -8,12 +8,10 @@ "use strict";

		var _utils = require("../utils");

		var config = {
		listStyleType: true,
		listStylePosition: true,
		listStylePos: {
		property: "listStylePosition"
		},
		listStylePos: _utils.t.prop("listStylePosition"),
		listStyleImage: true,
		listStyleImg: {
		property: "listStyleImage"
		}
		listStyleImg: _utils.t.prop("listStyleImage")
		};
		@@ -20,0 +18,0 @@ var list = (0, _core.system)(config);

19

dist/cjs/config/others.js

		@@ -8,2 +8,16 @@ "use strict";

		var _utils = require("../utils");

		var floatTransform = function floatTransform(value, _, props) {
		if (props === void 0) {
		props = {};
		}

		var map = {
		left: "right",
		right: "left"
		};
		return (0, _utils.getIsRtl)(props) ? map[value] : value;
		};

		var config = {
		@@ -19,3 +33,6 @@ animation: true,
		objectPosition: true,
		"float": true,
		"float": {
		property: "float",
		transform: floatTransform
		},
		willChange: true,
		@@ -22,0 +39,0 @@ filter: true

7

dist/cjs/config/outline.js

		@@ -8,2 +8,4 @@ "use strict";

		var _utils = require("../utils");

		/**
		@@ -15,6 +17,3 @@ * The parser configuration for common outline properties
		outlineOffset: true,
		outlineColor: {
		property: "outlineColor",
		scale: "colors"
		}
		outlineColor: _utils.t.colors("outlineColor")
		};
		@@ -21,0 +20,0 @@ var outline = (0, _core.system)(config);

54

dist/cjs/config/position.js

		@@ -12,5 +12,3 @@ "use strict";
		position: true,
		pos: {
		property: "position"
		},
		pos: _utils.t.prop("position"),
		zIndex: {
		@@ -20,38 +18,18 @@ property: "zIndex",
		},
		inset: {
		properties: ["left", "top", "bottom", "right"],
		scale: "space",
		transform: _utils.positiveOrNegative
		},
		insetX: {
		properties: ["left", "right"],
		scale: "space",
		transform: _utils.positiveOrNegative
		},
		insetY: {
		properties: ["top", "bottom"],
		scale: "space",
		transform: _utils.positiveOrNegative
		},
		top: {
		property: "top",
		scale: "space",
		transform: _utils.positiveOrNegative
		},
		right: {
		property: "right",
		scale: "space",
		transform: _utils.positiveOrNegative
		},
		bottom: {
		property: "bottom",
		scale: "space",
		transform: _utils.positiveOrNegative
		},
		left: {
		property: "left",
		scale: "space",
		transform: _utils.positiveOrNegative
		}
		inset: _utils.t.spaceT("inset"),
		insetX: _utils.t.spaceT(["left", "right"]),
		insetInline: _utils.t.spaceT("insetInline"),
		insetY: _utils.t.spaceT(["top", "bottom"]),
		insetBlock: _utils.t.spaceT("insetBlock"),
		top: _utils.t.spaceT("top"),
		insetBlockStart: _utils.t.spaceT("insetBlockStart"),
		bottom: _utils.t.spaceT("bottom"),
		insetBlockEnd: _utils.t.spaceT("insetBlockEnd"),
		left: _utils.t.spaceT("left"),
		insetInlineStart: _utils.t.spaceT("insetInlineStart"),
		right: _utils.t.spaceT("right"),
		insetInlineEnd: _utils.t.spaceT("insetInlineEnd")
		};
		config.insetStart = config.insetInlineStart;
		config.insetEnd = config.insetInlineEnd;
		/**
		@@ -58,0 +36,0 @@ * Types for position CSS properties

17

dist/cjs/config/shadow.js

		@@ -8,16 +8,9 @@ "use strict";

		var _utils = require("../utils");

		var config = {
		boxShadow: {
		property: "boxShadow",
		scale: "shadows"
		},
		textShadow: {
		property: "textShadow",
		scale: "shadows"
		},
		shadow: {
		property: "boxShadow",
		scale: "shadows"
		}
		boxShadow: _utils.t.shadows("boxShadow"),
		textShadow: _utils.t.shadows("textShadow")
		};
		config.shadow = config.boxShadow;
		/**
		@@ -24,0 +17,0 @@ * Types for box and text shadow properties

174

dist/cjs/config/space.js

		@@ -11,129 +11,51 @@ "use strict";
		var config = {
		margin: {
		property: "margin",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		m: {
		property: "margin",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		marginTop: {
		property: "marginTop",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		mt: {
		property: "marginTop",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		marginRight: {
		property: "marginRight",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		mr: {
		property: "marginRight",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		marginBottom: {
		property: "marginBottom",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		mb: {
		property: "marginBottom",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		marginLeft: {
		property: "marginLeft",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		ml: {
		property: "marginLeft",
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		marginX: {
		properties: ["marginLeft", "marginRight"],
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		mx: {
		properties: ["marginLeft", "marginRight"],
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		marginY: {
		properties: ["marginTop", "marginBottom"],
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		my: {
		properties: ["marginTop", "marginBottom"],
		transform: _utils.positiveOrNegative,
		scale: "space"
		},
		padding: {
		property: "padding",
		scale: "space"
		},
		p: {
		property: "padding",
		scale: "space"
		},
		paddingTop: {
		property: "paddingTop",
		scale: "space"
		},
		pt: {
		property: "paddingTop",
		scale: "space"
		},
		paddingRight: {
		property: "paddingRight",
		scale: "space"
		},
		pr: {
		property: "paddingRight",
		scale: "space"
		},
		paddingBottom: {
		property: "paddingBottom",
		scale: "space"
		},
		pb: {
		property: "paddingBottom",
		scale: "space"
		},
		paddingLeft: {
		property: "paddingLeft",
		scale: "space"
		},
		pl: {
		property: "paddingLeft",
		scale: "space"
		},
		paddingX: {
		properties: ["paddingLeft", "paddingRight"],
		scale: "space"
		},
		px: {
		properties: ["paddingLeft", "paddingRight"],
		scale: "space"
		},
		paddingY: {
		properties: ["paddingTop", "paddingBottom"],
		scale: "space"
		},
		py: {
		properties: ["paddingTop", "paddingBottom"],
		scale: "space"
		}
		margin: _utils.t.spaceT("margin"),
		marginTop: _utils.t.spaceT("marginTop"),
		marginBlockStart: _utils.t.spaceT("marginBlockStart"),
		marginRight: _utils.t.spaceT("marginRight"),
		marginInlineEnd: _utils.t.spaceT("marginInlineEnd"),
		marginBottom: _utils.t.spaceT("marginBottom"),
		marginBlockEnd: _utils.t.spaceT("marginBlockEnd"),
		marginLeft: _utils.t.spaceT("marginLeft"),
		marginInlineStart: _utils.t.spaceT("marginInlineStart"),
		marginX: _utils.t.spaceT(["marginLeft", "marginRight"]),
		marginInline: _utils.t.spaceT("marginInline"),
		marginY: _utils.t.spaceT(["marginTop", "marginBottom"]),
		marginBlock: _utils.t.spaceT("marginBlock"),
		padding: _utils.t.space("padding"),
		paddingTop: _utils.t.space("paddingTop"),
		paddingBlockStart: _utils.t.space("paddingBlockStart"),
		paddingRight: _utils.t.space("paddingRight"),
		paddingBottom: _utils.t.space("paddingBottom"),
		paddingBlockEnd: _utils.t.space("paddingBlockEnd"),
		paddingLeft: _utils.t.space("paddingLeft"),
		paddingInlineStart: _utils.t.space("paddingInlineStart"),
		paddingInlineEnd: _utils.t.space("paddingInlineEnd"),
		paddingX: _utils.t.space(["paddingLeft", "paddingRight"]),
		paddingInline: _utils.t.space("paddingInline"),
		paddingY: _utils.t.space(["paddingTop", "paddingBottom"]),
		paddingBlock: _utils.t.space("paddingBlock")
		};
		config.m = config.margin;
		config.mt = config.marginTop;
		config.mr = config.marginRight;
		config.me = config.marginInlineEnd;
		config.marginEnd = config.marginInlineEnd;
		config.mb = config.marginBottom;
		config.ml = config.marginLeft;
		config.ms = config.marginInlineStart;
		config.marginStart = config.marginInlineStart;
		config.mx = config.marginX;
		config.my = config.marginY;
		config.p = config.padding;
		config.pt = config.paddingTop;
		config.py = config.paddingY;
		config.px = config.paddingX;
		config.pb = config.paddingBottom;
		config.pl = config.paddingLeft;
		config.ps = config.paddingInlineStart;
		config.paddingStart = config.paddingInlineStart;
		config.pr = config.paddingRight;
		config.pe = config.paddingInlineEnd;
		config.paddingEnd = config.paddingInlineEnd;
		/**
		@@ -140,0 +62,0 @@ * Types for space related CSS properties

13

dist/cjs/css.js

		@@ -158,3 +158,3 @@ "use strict";
		var scale = (0, _utils.memoizedGet)(theme, (_config = config) == null ? void 0 : _config.scale, {});
		var value = (_config$transform = (_config2 = config) == null ? void 0 : _config2.transform == null ? void 0 : _config2.transform(val, scale)) != null ? _config$transform : (0, _utils.memoizedGet)(scale, val, val);
		var value = (_config$transform = (_config2 = config) == null ? void 0 : _config2.transform == null ? void 0 : _config2.transform(val, scale, props)) != null ? _config$transform : (0, _utils.memoizedGet)(scale, val, val);

		@@ -171,3 +171,12 @@ if ((_config3 = config) != null && _config3.properties) {
		if ((_config4 = config) != null && _config4.property) {
		computedStyles[config.property] = value;
		/**
		* Used for styled-system configs that map to multiple computed properties.
		* For example, the `borderLeftRadius` computed keys based on rtl/ltr
		*/
		if (config.property === "&") {
		computedStyles = (0, _utils.mergeWith)({}, computedStyles, value);
		} else {
		computedStyles[config.property] = value;
		}

		continue;
		@@ -174,0 +183,0 @@ }

18

dist/cjs/pseudo/pseudo.selector.js

		@@ -38,7 +38,7 @@ "use strict";

		function toGroup(fn) {
		return merge(fn, "[role=group]", "[data-group]");
		}
		var toGroup = function toGroup(fn) {
		return merge(fn, "[role=group]", "[data-group]", ".group");
		};

		function merge(fn) {
		var merge = function merge(fn) {
		for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
		@@ -49,3 +49,3 @@ selectors[_key - 1] = arguments[_key];
		return selectors.map(fn).join(", ");
		}
		};

		@@ -274,3 +274,9 @@ var disabled = function disabled(selector) {
		*/
		_selection: "&::selection"
		_selection: "&::selection",

		/**
		* Styles for CSS Selector `[dir=rtl] &`
		* It is applied when any parent element has `dir="rtl"`
		*/
		_rtl: "[dir=rtl] &"
		};
		@@ -277,0 +283,0 @@ exports.pseudoSelectors = pseudoSelectors;

134

dist/cjs/utils/index.js

		"use strict";

		exports.__esModule = true;
		var _exportNames = {
		makeConfig: true,
		t: true,
		getIsRtl: true,
		polyfill: true,
		handleQuartetValues: true,
		isRtl: true
		};
		exports.makeConfig = makeConfig;
		exports.getIsRtl = getIsRtl;
		exports.polyfill = polyfill;
		exports.handleQuartetValues = handleQuartetValues;
		exports.isRtl = exports.t = void 0;

		var _utils = require("@chakra-ui/utils");

		var _positiveOrNegative = require("./positive-or-negative");
		@@ -9,2 +24,3 @@
		if (key === "default" \|\| key === "__esModule") return;
		if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
		if (key in exports && exports[key] === _positiveOrNegative[key]) return;
		@@ -18,5 +34,123 @@ exports[key] = _positiveOrNegative[key];
		if (key === "default" \|\| key === "__esModule") return;
		if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
		if (key in exports && exports[key] === _types[key]) return;
		exports[key] = _types[key];
		});

		function makeConfig(scale, transform) {
		return function (prop) {
		var result = {
		scale: scale
		};
		if (transform) result.transform = transform;
		if (Array.isArray(prop)) result.properties = prop;else result.property = prop;
		return result;
		};
		}

		function fractionalValue(value, scale) {
		var defaultValue = !(0, _utils.isNumber)(value) \|\| value > 1 ? value : value * 100 + "%";
		return (0, _utils.get)(scale, value, defaultValue);
		}

		var t = {
		borderWidths: makeConfig("borderWidths"),
		borderStyles: makeConfig("borderStyles"),
		colors: makeConfig("colors"),
		borders: makeConfig("borders"),
		radii: makeConfig("radii"),
		space: makeConfig("space"),
		spaceT: makeConfig("space", _positiveOrNegative.positiveOrNegative),
		prop: function prop(property, transform) {
		return {
		property: property,
		transform: transform
		};
		},
		sizes: makeConfig("sizes"),
		sizesT: makeConfig("sizes", fractionalValue),
		shadows: makeConfig("shadows")
		};
		exports.t = t;

		function getIsRtl(props) {
		var theme = "theme" in props ? props.theme : props;
		return theme.direction === "rtl";
		}
		/**
		* Polyfill for border-{start\|end}-radius properties.
		* We'll remove this once css logical properties is supported in major browsers
		*/


		function polyfill(map) {
		return function (value, scale, props) {
		var isRtl = getIsRtl(props);
		var raw = (0, _utils.getWithDefault)(value, scale);
		var result = {};

		if (Array.isArray(map.ltr)) {
		map.ltr.forEach(function (_, i) {
		result[isRtl ? map.rtl[i] : map.ltr[i]] = raw;
		});
		} else {
		result[isRtl ? map.rtl : map.ltr] = raw;
		}

		return result;
		};
		}
		/**
		* Credits to https://github.com/kentcdodds/rtl-css-js/blob/aaf3e9885026de11b01f3b73258f25e21b7432f7/src/internal/utils.js
		* @todo use this for margin, padding, border-radius value transformations in rtl
		*/


		function getValuesAsList(value) {
		return value.replace(/ +/g, " ").split(" ").map(function (i) {
		return i.trim();
		}).filter(Boolean).reduce(function (_ref, item) {
		var list = _ref.list,
		state = _ref.state;
		var openParansCount = (item.match(/\(/g) \|\| []).length;
		var closedParansCount = (item.match(/\)/g) \|\| []).length;

		if (state.parensDepth > 0) {
		list[list.length - 1] = list[list.length - 1] + " " + item;
		} else {
		list.push(item);
		}

		state.parensDepth += openParansCount - closedParansCount;
		return {
		list: list,
		state: state
		};
		}, {
		list: [],
		state: {
		parensDepth: 0
		}
		}).list;
		}

		function handleQuartetValues(value) {
		var splitValues = getValuesAsList(value);

		if (splitValues.length <= 3 \|\| splitValues.length > 4) {
		return value;
		}

		var top = splitValues[0],
		right = splitValues[1],
		bottom = splitValues[2],
		left = splitValues[3];
		return [top, left, bottom, right].join(" ");
		}

		var isRtl = function isRtl(theme) {
		return theme.direction === "rtl";
		};

		exports.isRtl = isRtl;
		//# sourceMappingURL=index.js.map

21

dist/cjs/utils/parse-border.js

		@@ -39,23 +39,14 @@ "use strict";
		var borderColorKey = key + "Color";
		if (style) css[borderStyleKey] = style;
		if (unit) css[borderWidthKey] = unit;

		if (style) {
		css[borderStyleKey] = style;
		}

		if (unit) {
		css[borderWidthKey] = unit;
		}

		var _split$filter = split.filter(function (i) {
		var match = matchString(i, unitMatch) && matchString(i, styleMatch);
		return !match && i !== style && i !== unit;
		var _split$filter = split.filter(function (val) {
		var match = matchString(val, unitMatch) && matchString(val, styleMatch);
		return !match && val !== style && val !== unit;
		}),
		color = _split$filter[0];

		if (color) {
		css[borderColorKey] = color;
		}

		if (color) css[borderColorKey] = color;
		return css;
		}
		//# sourceMappingURL=parse-border.js.map

53

dist/esm/config/background.js

		import { createParser, system } from "@styled-system/core";
		import { t } from "../utils";
		var config = {
		bg: {
		property: "background",
		scale: "colors"
		},
		bgColor: {
		property: "backgroundColor",
		scale: "colors"
		},
		background: {
		property: "background",
		scale: "colors"
		},
		backgroundColor: {
		property: "backgroundColor",
		scale: "colors"
		},
		bg: t.colors("background"),
		bgColor: t.colors("backgroundColor"),
		background: t.colors("background"),
		backgroundColor: t.colors("backgroundColor"),
		backgroundImage: true,
		@@ -25,26 +14,10 @@ backgroundSize: true,
		backgroundBlendMode: true,
		bgImage: {
		property: "backgroundImage"
		},
		bgImg: {
		property: "backgroundImage"
		},
		bgBlendMode: {
		property: "backgroundBlendMode"
		},
		bgSize: {
		property: "backgroundSize"
		},
		bgPosition: {
		property: "backgroundPosition"
		},
		bgPos: {
		property: "backgroundPosition"
		},
		bgRepeat: {
		property: "backgroundRepeat"
		},
		bgAttachment: {
		property: "backgroundAttachment"
		}
		bgImage: t.prop("backgroundImage"),
		bgImg: t.prop("backgroundImage"),
		bgBlendMode: t.prop("backgroundBlendMode"),
		bgSize: t.prop("backgroundSize"),
		bgPosition: t.prop("backgroundPosition"),
		bgPos: t.prop("backgroundPosition"),
		bgRepeat: t.prop("backgroundRepeat"),
		bgAttachment: t.prop("backgroundAttachment")
		};
		@@ -51,0 +24,0 @@ export var background = system(config);

268

dist/esm/config/border.js

		import { createParser, system } from "@styled-system/core";

		/**
		* The parser configuration for common border properties
		*/
		import { polyfill, t } from "../utils";
		var config = {
		border: {
		property: "border",
		scale: "borders"
		border: t.borders("border"),
		borderWidth: t.borderWidths("borderWidth"),
		borderStyle: t.borderStyles("borderStyle"),
		borderColor: t.colors("borderColor"),
		borderRadius: t.radii("borderRadius"),
		borderTop: t.borders("borderTop"),
		borderBlockStart: t.borders("borderBlockStart"),
		borderTopLeftRadius: t.radii("borderTopLeftRadius"),
		borderStartStartRadius: {
		property: "&",
		scale: "radii",
		transform: polyfill({
		ltr: "borderTopLeftRadius",
		rtl: "borderTopRightRadius"
		})
		},
		borderWidth: {
		property: "borderWidth",
		scale: "borderWidths"
		borderEndStartRadius: {
		property: "&",
		scale: "radii",
		transform: polyfill({
		ltr: "borderBottomLeftRadius",
		rtl: "borderBottomRightRadius"
		})
		},
		borderStyle: {
		property: "borderStyle",
		scale: "borderStyles"
		borderTopRightRadius: t.radii("borderTopRightRadius"),
		borderStartEndRadius: {
		property: "&",
		scale: "radii",
		transform: polyfill({
		ltr: "borderTopRightRadius",
		rtl: "borderTopLeftRadius"
		})
		},
		borderColor: {
		property: "borderColor",
		scale: "colors"
		borderEndEndRadius: {
		property: "&",
		scale: "radii",
		transform: polyfill({
		ltr: "borderBottomRightRadius",
		rtl: "borderBottomLeftRadius"
		})
		},
		borderRadius: {
		property: "borderRadius",
		scale: "radii"
		},
		rounded: {
		property: "borderRadius",
		scale: "radii"
		},
		borderTop: {
		property: "borderTop",
		borderRight: t.borders("borderRight"),
		borderInlineEnd: t.borders("borderInlineEnd"),
		borderBottom: t.borders("borderBottom"),
		borderBlockEnd: t.borders("borderBlockEnd"),
		borderBottomLeftRadius: t.radii("borderBottomLeftRadius"),
		borderBottomRightRadius: t.radii("borderBottomRightRadius"),
		borderLeft: t.borders("borderLeft"),
		borderInlineStart: {
		property: "borderInlineStart",
		scale: "borders"
		},
		borderTopLeftRadius: {
		property: "borderTopLeftRadius",
		scale: "radii"
		borderInlineStartRadius: {
		scale: "radii",
		property: "&",
		transform: polyfill({
		ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"],
		rtl: ["borderTopRightRadius", "borderBottomRightRadius"]
		})
		},
		roundedTopLeft: {
		property: "borderTopLeftRadius",
		scale: "radii"
		borderInlineEndRadius: {
		scale: "radii",
		property: "&",
		transform: polyfill({
		ltr: ["borderTopRightRadius", "borderBottomRightRadius"],
		rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"]
		})
		},
		borderTopRightRadius: {
		property: "borderTopRightRadius",
		scale: "radii"
		},
		roundedTopRight: {
		property: "borderTopRightRadius",
		scale: "radii"
		},
		borderRight: {
		property: "borderRight",
		scale: "borders"
		},
		borderBottom: {
		property: "borderBottom",
		scale: "borders"
		},
		borderBottomLeftRadius: {
		property: "borderBottomLeftRadius",
		scale: "radii"
		},
		roundedBottomLeft: {
		property: "borderBottomLeftRadius",
		scale: "radii"
		},
		borderBottomRightRadius: {
		property: "borderBottomRightRadius",
		scale: "radii"
		},
		roundedBottomRight: {
		property: "borderBottomRightRadius",
		scale: "radii"
		},
		borderLeft: {
		property: "borderLeft",
		scale: "borders"
		},
		borderX: {
		properties: ["borderLeft", "borderRight"],
		scale: "borders"
		},
		borderY: {
		properties: ["borderTop", "borderBottom"],
		scale: "borders"
		},
		borderTopWidth: {
		property: "borderTopWidth",
		scale: "borderWidths"
		},
		borderTopColor: {
		property: "borderTopColor",
		scale: "colors"
		},
		borderTopStyle: {
		property: "borderTopStyle",
		scale: "borderStyles"
		},
		borderBottomWidth: {
		property: "borderBottomWidth",
		scale: "borderWidths"
		},
		borderBottomColor: {
		property: "borderBottomColor",
		scale: "colors"
		},
		borderBottomStyle: {
		property: "borderBottomStyle",
		scale: "borderStyles"
		},
		borderLeftWidth: {
		property: "borderLeftWidth",
		scale: "borderWidths"
		},
		borderLeftColor: {
		property: "borderLeftColor",
		scale: "colors"
		},
		borderLeftStyle: {
		property: "borderLeftStyle",
		scale: "borderStyles"
		},
		borderRightWidth: {
		property: "borderRightWidth",
		scale: "borderWidths"
		},
		borderRightColor: {
		property: "borderRightColor",
		scale: "colors"
		},
		borderRightStyle: {
		property: "borderRightStyle",
		scale: "borderStyles"
		},
		borderTopRadius: {
		properties: ["borderTopLeftRadius", "borderTopRightRadius"],
		scale: "radii"
		},
		roundedTop: {
		properties: ["borderTopLeftRadius", "borderTopRightRadius"],
		scale: "radii"
		},
		borderBottomRadius: {
		properties: ["borderBottomLeftRadius", "borderBottomRightRadius"],
		scale: "radii"
		},
		roundedBottom: {
		properties: ["borderBottomLeftRadius", "borderBottomRightRadius"],
		scale: "radii"
		},
		borderLeftRadius: {
		properties: ["borderTopLeftRadius", "borderBottomLeftRadius"],
		scale: "radii"
		},
		roundedLeft: {
		properties: ["borderTopLeftRadius", "borderBottomLeftRadius"],
		scale: "radii"
		},
		borderRightRadius: {
		properties: ["borderTopRightRadius", "borderBottomRightRadius"],
		scale: "radii"
		},
		roundedRight: {
		properties: ["borderTopRightRadius", "borderBottomRightRadius"],
		scale: "radii"
		}
		borderX: t.borders(["borderLeft", "borderRight"]),
		borderInline: t.borders("borderInline"),
		borderY: t.borders(["borderTop", "borderBottom"]),
		borderBlock: t.borders("borderBlock"),
		borderTopWidth: t.borderWidths("borderTopWidth"),
		borderBlockStartWidth: t.borderWidths("borderBlockStartWidth"),
		borderTopColor: t.colors("borderTopColor"),
		borderBlockStartColor: t.colors("borderBlockStartColor"),
		borderTopStyle: t.borderStyles("borderTopStyle"),
		borderBlockStartStyle: t.borderStyles("borderBlockStartStyle"),
		borderBottomWidth: t.borderWidths("borderBottomWidth"),
		borderBlockEndWidth: t.borderWidths("borderBlockEndWidth"),
		borderBottomColor: t.colors("borderBottomColor"),
		borderBlockEndColor: t.colors("borderBlockEndColor"),
		borderBottomStyle: t.borderStyles("borderBottomStyle"),
		borderBlockEndStyle: t.borderStyles("borderBlockEndStyle"),
		borderLeftWidth: t.borderWidths("borderLeftWidth"),
		borderInlineStartWidth: t.borderWidths("borderInlineStartWidth"),
		borderLeftColor: t.colors("borderLeftColor"),
		borderInlineStartColor: t.colors("borderInlineStartColor"),
		borderLeftStyle: t.borderStyles("borderLeftStyle"),
		borderInlineStartStyle: t.borderStyles("borderInlineStartStyle"),
		borderRightWidth: t.borderWidths("borderRightWidth"),
		borderInlineEndWidth: t.borderWidths("borderInlineEndWidth"),
		borderRightColor: t.colors("borderRightColor"),
		borderInlineEndColor: t.colors("borderInlineEndColor"),
		borderRightStyle: t.borderStyles("borderRightStyle"),
		borderInlineEndStyle: t.borderStyles("borderInlineEndStyle"),
		borderTopRadius: t.radii(["borderTopLeftRadius", "borderTopRightRadius"]),
		borderBottomRadius: t.radii(["borderBottomLeftRadius", "borderBottomRightRadius"]),
		borderLeftRadius: t.radii(["borderTopLeftRadius", "borderBottomLeftRadius"]),
		borderRightRadius: t.radii(["borderTopRightRadius", "borderBottomRightRadius"])
		};
		config.roundedTopLeft = config.borderTopLeftRadius;
		config.roundedTopStart = config.borderStartStartRadius;
		config.roundedTopRight = config.borderTopRightRadius;
		config.roundedTopEnd = config.borderStartEndRadius;
		config.roundedBottomLeft = config.borderBottomLeftRadius;
		config.roundedBottomStart = config.borderEndStartRadius;
		config.roundedBottomRight = config.borderBottomRightRadius;
		config.roundedBottomEnd = config.borderEndEndRadius;
		config.rounded = config.borderRadius;
		config.roundedTop = config.borderTopRadius;
		config.roundedBottom = config.borderBottomRadius;
		config.roundedLeft = config.borderLeftRadius;
		config.roundedRight = config.borderRightRadius;
		config.roundedStart = config.borderInlineStartRadius;
		config.borderStartRadius = config.borderInlineStartRadius;
		config.roundedEnd = config.borderInlineEndRadius;
		config.borderEndRadius = config.borderInlineEndRadius;
		config.borderEndWidth = config.borderInlineEndWidth;
		config.borderStartWidth = config.borderInlineStartWidth;
		/**
		@@ -169,0 +125,0 @@ * The prop types for border properties listed above

25

dist/esm/config/color.js

		import { createParser, system } from "@styled-system/core";

		/**
		* The parser configuration for common border properties
		*/
		import { t } from "../utils";
		var config = {
		color: {
		property: "color",
		scale: "colors"
		},
		textColor: {
		property: "color",
		scale: "colors"
		},
		color: t.colors("color"),
		textColor: t.colors("color"),
		opacity: true,
		fill: {
		property: "fill",
		scale: "colors"
		},
		stroke: {
		property: "stroke",
		scale: "colors"
		}
		fill: t.colors("fill"),
		stroke: t.colors("stroke")
		};
		@@ -25,0 +10,0 @@ export var color = system(config);

10

dist/esm/config/flexbox.js

		import { createParser, system } from "@styled-system/core";
		import { t } from "../utils";
		var config = {
		@@ -12,12 +13,7 @@ alignItems: true,
		flexShrink: true,
		flexBasis: {
		property: "flexBasis",
		scale: "sizes"
		},
		flexBasis: t.sizes("flexBasis"),
		justifySelf: true,
		alignSelf: true,
		order: true,
		flexDir: {
		property: "flexDirection"
		}
		flexDir: t.prop("flexDirection")
		};
		@@ -24,0 +20,0 @@ /**

16

dist/esm/config/grid.js

		import { createParser, system } from "@styled-system/core";
		import { t } from "../utils";
		var config = {
		gridGap: {
		property: "gridGap",
		scale: "space"
		},
		gridColumnGap: {
		property: "gridColumnGap",
		scale: "space"
		},
		gridRowGap: {
		property: "gridRowGap",
		scale: "space"
		},
		gridGap: t.space("gridGap"),
		gridColumnGap: t.space("gridColumnGap"),
		gridRowGap: t.space("gridRowGap"),
		gridColumn: true,
		@@ -16,0 +8,0 @@ gridRow: true,

85

dist/esm/config/layout.js

		@@ -1,67 +0,18 @@
		import { isNumber, memoizedGet as get } from "@chakra-ui/utils";
		import { createParser, system } from "@styled-system/core";

		function transform(value, scale) {
		var defaultValue = !isNumber(value) \|\| value > 1 ? value : value * 100 + "%";
		return get(scale, value, defaultValue);
		}

		import { t } from "../utils";
		var config = {
		width: {
		property: "width",
		scale: "sizes",
		transform
		},
		w: {
		property: "width",
		scale: "sizes",
		transform
		},
		height: {
		property: "height",
		scale: "sizes"
		},
		h: {
		property: "height",
		scale: "sizes"
		},
		boxSize: {
		properties: ["width", "height"],
		scale: "sizes"
		},
		minWidth: {
		property: "minWidth",
		scale: "sizes"
		},
		minW: {
		property: "minWidth",
		scale: "sizes"
		},
		minHeight: {
		property: "minHeight",
		scale: "sizes"
		},
		minH: {
		property: "minHeight",
		scale: "sizes"
		},
		maxWidth: {
		property: "maxWidth",
		scale: "sizes"
		},
		maxW: {
		property: "maxWidth",
		scale: "sizes"
		},
		maxHeight: {
		property: "maxHeight",
		scale: "sizes"
		},
		maxH: {
		property: "maxHeight",
		scale: "sizes"
		},
		d: {
		property: "display"
		},
		width: t.sizesT("width"),
		inlineSize: t.sizesT("inlineSize"),
		height: t.sizes("height"),
		blockSize: t.sizes("blockSize"),
		boxSize: t.sizes(["width", "height"]),
		minWidth: t.sizes("minWidth"),
		minInlineSize: t.sizes("minInlineSize"),
		minHeight: t.sizes("minHeight"),
		minBlockSize: t.sizes("minBlockSize"),
		maxWidth: t.sizes("maxWidth"),
		maxInlineSize: t.sizes("maxInlineSize"),
		maxHeight: t.sizes("maxHeight"),
		maxBlockSize: t.sizes("maxBlockSize"),
		d: t.prop("display"),
		overflow: true,
		@@ -74,2 +25,8 @@ overflowX: true,
		};
		config.w = config.width;
		config.h = config.height;
		config.minW = config.minWidth;
		config.maxW = config.maxWidth;
		config.minH = config.minHeight;
		config.maxH = config.maxHeight;
		/**
		@@ -76,0 +33,0 @@ * Types for layout related CSS properties

9

dist/esm/config/list.js

		import { createParser, system } from "@styled-system/core";
		import { t } from "../utils";
		var config = {
		listStyleType: true,
		listStylePosition: true,
		listStylePos: {
		property: "listStylePosition"
		},
		listStylePos: t.prop("listStylePosition"),
		listStyleImage: true,
		listStyleImg: {
		property: "listStyleImage"
		}
		listStyleImg: t.prop("listStyleImage")
		};
		@@ -13,0 +10,0 @@ export var list = system(config);

19

dist/esm/config/others.js

		import { createParser, system } from "@styled-system/core";
		import { getIsRtl } from "../utils";

		var floatTransform = function floatTransform(value, _, props) {
		if (props === void 0) {
		props = {};
		}

		var map = {
		left: "right",
		right: "left"
		};
		return getIsRtl(props) ? map[value] : value;
		};

		var config = {
		@@ -12,3 +26,6 @@ animation: true,
		objectPosition: true,
		float: true,
		float: {
		property: "float",
		transform: floatTransform
		},
		willChange: true,
		@@ -15,0 +32,0 @@ filter: true

8

dist/esm/config/outline.js

		import { createParser, system } from "@styled-system/core";

		import { t } from "../utils";
		/**
		* The parser configuration for common outline properties
		*/

		var config = {
		outline: true,
		outlineOffset: true,
		outlineColor: {
		property: "outlineColor",
		scale: "colors"
		}
		outlineColor: t.colors("outlineColor")
		};
		@@ -14,0 +12,0 @@ export var outline = system(config);

56

dist/esm/config/position.js

		import { createParser, system } from "@styled-system/core";
		import { positiveOrNegative } from "../utils";
		import { t } from "../utils";
		var config = {
		position: true,
		pos: {
		property: "position"
		},
		pos: t.prop("position"),
		zIndex: {
		@@ -12,38 +10,18 @@ property: "zIndex",
		},
		inset: {
		properties: ["left", "top", "bottom", "right"],
		scale: "space",
		transform: positiveOrNegative
		},
		insetX: {
		properties: ["left", "right"],
		scale: "space",
		transform: positiveOrNegative
		},
		insetY: {
		properties: ["top", "bottom"],
		scale: "space",
		transform: positiveOrNegative
		},
		top: {
		property: "top",
		scale: "space",
		transform: positiveOrNegative
		},
		right: {
		property: "right",
		scale: "space",
		transform: positiveOrNegative
		},
		bottom: {
		property: "bottom",
		scale: "space",
		transform: positiveOrNegative
		},
		left: {
		property: "left",
		scale: "space",
		transform: positiveOrNegative
		}
		inset: t.spaceT("inset"),
		insetX: t.spaceT(["left", "right"]),
		insetInline: t.spaceT("insetInline"),
		insetY: t.spaceT(["top", "bottom"]),
		insetBlock: t.spaceT("insetBlock"),
		top: t.spaceT("top"),
		insetBlockStart: t.spaceT("insetBlockStart"),
		bottom: t.spaceT("bottom"),
		insetBlockEnd: t.spaceT("insetBlockEnd"),
		left: t.spaceT("left"),
		insetInlineStart: t.spaceT("insetInlineStart"),
		right: t.spaceT("right"),
		insetInlineEnd: t.spaceT("insetInlineEnd")
		};
		config.insetStart = config.insetInlineStart;
		config.insetEnd = config.insetInlineEnd;
		/**
		@@ -50,0 +28,0 @@ * Types for position CSS properties

16

dist/esm/config/shadow.js

		import { createParser, system } from "@styled-system/core";
		import { t } from "../utils";
		var config = {
		boxShadow: {
		property: "boxShadow",
		scale: "shadows"
		},
		textShadow: {
		property: "textShadow",
		scale: "shadows"
		},
		shadow: {
		property: "boxShadow",
		scale: "shadows"
		}
		boxShadow: t.shadows("boxShadow"),
		textShadow: t.shadows("textShadow")
		};
		config.shadow = config.boxShadow;
		/**
		@@ -17,0 +9,0 @@ * Types for box and text shadow properties

176

dist/esm/config/space.js

		import { createParser, system } from "@styled-system/core";
		import { positiveOrNegative } from "../utils";
		import { t } from "../utils";
		var config = {
		margin: {
		property: "margin",
		transform: positiveOrNegative,
		scale: "space"
		},
		m: {
		property: "margin",
		transform: positiveOrNegative,
		scale: "space"
		},
		marginTop: {
		property: "marginTop",
		transform: positiveOrNegative,
		scale: "space"
		},
		mt: {
		property: "marginTop",
		transform: positiveOrNegative,
		scale: "space"
		},
		marginRight: {
		property: "marginRight",
		transform: positiveOrNegative,
		scale: "space"
		},
		mr: {
		property: "marginRight",
		transform: positiveOrNegative,
		scale: "space"
		},
		marginBottom: {
		property: "marginBottom",
		transform: positiveOrNegative,
		scale: "space"
		},
		mb: {
		property: "marginBottom",
		transform: positiveOrNegative,
		scale: "space"
		},
		marginLeft: {
		property: "marginLeft",
		transform: positiveOrNegative,
		scale: "space"
		},
		ml: {
		property: "marginLeft",
		transform: positiveOrNegative,
		scale: "space"
		},
		marginX: {
		properties: ["marginLeft", "marginRight"],
		transform: positiveOrNegative,
		scale: "space"
		},
		mx: {
		properties: ["marginLeft", "marginRight"],
		transform: positiveOrNegative,
		scale: "space"
		},
		marginY: {
		properties: ["marginTop", "marginBottom"],
		transform: positiveOrNegative,
		scale: "space"
		},
		my: {
		properties: ["marginTop", "marginBottom"],
		transform: positiveOrNegative,
		scale: "space"
		},
		padding: {
		property: "padding",
		scale: "space"
		},
		p: {
		property: "padding",
		scale: "space"
		},
		paddingTop: {
		property: "paddingTop",
		scale: "space"
		},
		pt: {
		property: "paddingTop",
		scale: "space"
		},
		paddingRight: {
		property: "paddingRight",
		scale: "space"
		},
		pr: {
		property: "paddingRight",
		scale: "space"
		},
		paddingBottom: {
		property: "paddingBottom",
		scale: "space"
		},
		pb: {
		property: "paddingBottom",
		scale: "space"
		},
		paddingLeft: {
		property: "paddingLeft",
		scale: "space"
		},
		pl: {
		property: "paddingLeft",
		scale: "space"
		},
		paddingX: {
		properties: ["paddingLeft", "paddingRight"],
		scale: "space"
		},
		px: {
		properties: ["paddingLeft", "paddingRight"],
		scale: "space"
		},
		paddingY: {
		properties: ["paddingTop", "paddingBottom"],
		scale: "space"
		},
		py: {
		properties: ["paddingTop", "paddingBottom"],
		scale: "space"
		}
		margin: t.spaceT("margin"),
		marginTop: t.spaceT("marginTop"),
		marginBlockStart: t.spaceT("marginBlockStart"),
		marginRight: t.spaceT("marginRight"),
		marginInlineEnd: t.spaceT("marginInlineEnd"),
		marginBottom: t.spaceT("marginBottom"),
		marginBlockEnd: t.spaceT("marginBlockEnd"),
		marginLeft: t.spaceT("marginLeft"),
		marginInlineStart: t.spaceT("marginInlineStart"),
		marginX: t.spaceT(["marginLeft", "marginRight"]),
		marginInline: t.spaceT("marginInline"),
		marginY: t.spaceT(["marginTop", "marginBottom"]),
		marginBlock: t.spaceT("marginBlock"),
		padding: t.space("padding"),
		paddingTop: t.space("paddingTop"),
		paddingBlockStart: t.space("paddingBlockStart"),
		paddingRight: t.space("paddingRight"),
		paddingBottom: t.space("paddingBottom"),
		paddingBlockEnd: t.space("paddingBlockEnd"),
		paddingLeft: t.space("paddingLeft"),
		paddingInlineStart: t.space("paddingInlineStart"),
		paddingInlineEnd: t.space("paddingInlineEnd"),
		paddingX: t.space(["paddingLeft", "paddingRight"]),
		paddingInline: t.space("paddingInline"),
		paddingY: t.space(["paddingTop", "paddingBottom"]),
		paddingBlock: t.space("paddingBlock")
		};
		config.m = config.margin;
		config.mt = config.marginTop;
		config.mr = config.marginRight;
		config.me = config.marginInlineEnd;
		config.marginEnd = config.marginInlineEnd;
		config.mb = config.marginBottom;
		config.ml = config.marginLeft;
		config.ms = config.marginInlineStart;
		config.marginStart = config.marginInlineStart;
		config.mx = config.marginX;
		config.my = config.marginY;
		config.p = config.padding;
		config.pt = config.paddingTop;
		config.py = config.paddingY;
		config.px = config.paddingX;
		config.pb = config.paddingBottom;
		config.pl = config.paddingLeft;
		config.ps = config.paddingInlineStart;
		config.paddingStart = config.paddingInlineStart;
		config.pr = config.paddingRight;
		config.pe = config.paddingInlineEnd;
		config.paddingEnd = config.paddingInlineEnd;
		/**
		@@ -132,0 +54,0 @@ * Types for space related CSS properties

13

dist/esm/css.js

		@@ -139,3 +139,3 @@ import { isArray, isCustomBreakpoint, isObject, isResponsiveObjectLike, memoizedGet as get, mergeWith, objectToArrayNotation, runIfFn } from "@chakra-ui/utils";
		var scale = get(theme, (_config = config) == null ? void 0 : _config.scale, {});
		var value = (_config$transform = (_config2 = config) == null ? void 0 : _config2.transform == null ? void 0 : _config2.transform(val, scale)) != null ? _config$transform : get(scale, val, val);
		var value = (_config$transform = (_config2 = config) == null ? void 0 : _config2.transform == null ? void 0 : _config2.transform(val, scale, props)) != null ? _config$transform : get(scale, val, val);

		@@ -151,3 +151,12 @@ if ((_config3 = config) != null && _config3.properties) {
		if ((_config4 = config) != null && _config4.property) {
		computedStyles[config.property] = value;
		/**
		* Used for styled-system configs that map to multiple computed properties.
		* For example, the `borderLeftRadius` computed keys based on rtl/ltr
		*/
		if (config.property === "&") {
		computedStyles = mergeWith({}, computedStyles, value);
		} else {
		computedStyles[config.property] = value;
		}

		continue;
		@@ -154,0 +163,0 @@ }

16

dist/esm/pseudo/pseudo.selector.js

		@@ -14,7 +14,5 @@ import { objectKeys } from "@chakra-ui/utils";

		function toGroup(fn) {
		return merge(fn, "[role=group]", "[data-group]");
		}
		var toGroup = fn => merge(fn, "[role=group]", "[data-group]", ".group");

		function merge(fn) {
		var merge = function merge(fn) {
		for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
		@@ -25,3 +23,3 @@ selectors[_key - 1] = arguments[_key];
		return selectors.map(fn).join(", ");
		}
		};

		@@ -248,5 +246,11 @@ var disabled = selector => selector + ", " + selector + ":focus, " + selector + ":hover";
		*/
		_selection: "&::selection"
		_selection: "&::selection",

		/**
		* Styles for CSS Selector `[dir=rtl] &`
		* It is applied when any parent element has `dir="rtl"`
		*/
		_rtl: "[dir=rtl] &"
		};
		export var pseudoPropNames = objectKeys(pseudoSelectors);
		//# sourceMappingURL=pseudo.selector.js.map

104

dist/esm/utils/index.js

		@@ -0,3 +1,107 @@
		import { get, getWithDefault, isNumber } from "@chakra-ui/utils";
		import { positiveOrNegative } from "./positive-or-negative";
		export * from "./positive-or-negative";
		export * from "./types";
		export function makeConfig(scale, transform) {
		return prop => {
		var result = {
		scale
		};
		if (transform) result.transform = transform;
		if (Array.isArray(prop)) result.properties = prop;else result.property = prop;
		return result;
		};
		}

		function fractionalValue(value, scale) {
		var defaultValue = !isNumber(value) \|\| value > 1 ? value : value * 100 + "%";
		return get(scale, value, defaultValue);
		}

		export var t = {
		borderWidths: makeConfig("borderWidths"),
		borderStyles: makeConfig("borderStyles"),
		colors: makeConfig("colors"),
		borders: makeConfig("borders"),
		radii: makeConfig("radii"),
		space: makeConfig("space"),
		spaceT: makeConfig("space", positiveOrNegative),
		prop: (property, transform) => ({
		property,
		transform
		}),
		sizes: makeConfig("sizes"),
		sizesT: makeConfig("sizes", fractionalValue),
		shadows: makeConfig("shadows")
		};
		export function getIsRtl(props) {
		var theme = "theme" in props ? props.theme : props;
		return theme.direction === "rtl";
		}
		/**
		* Polyfill for border-{start\|end}-radius properties.
		* We'll remove this once css logical properties is supported in major browsers
		*/

		export function polyfill(map) {
		return (value, scale, props) => {
		var isRtl = getIsRtl(props);
		var raw = getWithDefault(value, scale);
		var result = {};

		if (Array.isArray(map.ltr)) {
		map.ltr.forEach((_, i) => {
		result[isRtl ? map.rtl[i] : map.ltr[i]] = raw;
		});
		} else {
		result[isRtl ? map.rtl : map.ltr] = raw;
		}

		return result;
		};
		}
		/**
		* Credits to https://github.com/kentcdodds/rtl-css-js/blob/aaf3e9885026de11b01f3b73258f25e21b7432f7/src/internal/utils.js
		* @todo use this for margin, padding, border-radius value transformations in rtl
		*/

		function getValuesAsList(value) {
		return value.replace(/ +/g, " ").split(" ").map(i => i.trim()).filter(Boolean).reduce((_ref, item) => {
		var {
		list,
		state
		} = _ref;
		var openParansCount = (item.match(/\(/g) \|\| []).length;
		var closedParansCount = (item.match(/\)/g) \|\| []).length;

		if (state.parensDepth > 0) {
		list[list.length - 1] = list[list.length - 1] + " " + item;
		} else {
		list.push(item);
		}

		state.parensDepth += openParansCount - closedParansCount;
		return {
		list,
		state
		};
		}, {
		list: [],
		state: {
		parensDepth: 0
		}
		}).list;
		}

		export function handleQuartetValues(value) {
		var splitValues = getValuesAsList(value);

		if (splitValues.length <= 3 \|\| splitValues.length > 4) {
		return value;
		}

		var [top, right, bottom, left] = splitValues;
		return [top, left, bottom, right].join(" ");
		}
		export var isRtl = theme => theme.direction === "rtl";
		//# sourceMappingURL=index.js.map

23

dist/esm/utils/parse-border.js

		@@ -27,22 +27,11 @@ var matchString = (val, regex) => val.match(regex);
		var borderColorKey = key + "Color";

		if (style) {
		css[borderStyleKey] = style;
		}

		if (unit) {
		css[borderWidthKey] = unit;
		}

		var [color] = split.filter(i => {
		var match = matchString(i, unitMatch) && matchString(i, styleMatch);
		return !match && i !== style && i !== unit;
		if (style) css[borderStyleKey] = style;
		if (unit) css[borderWidthKey] = unit;
		var [color] = split.filter(val => {
		var match = matchString(val, unitMatch) && matchString(val, styleMatch);
		return !match && val !== style && val !== unit;
		});

		if (color) {
		css[borderColorKey] = color;
		}

		if (color) css[borderColorKey] = color;
		return css;
		}
		//# sourceMappingURL=parse-border.js.map

4

dist/types/@styled-system/core.d.ts

		@@ -9,3 +9,3 @@ declare module "@styled-system/core" {
		/** The CSS property to use in the returned style object (overridden by `properties` if present). */
		property?: keyof CSS.Properties;
		property?: keyof CSS.Properties \| (string & {});
		/**
		@@ -21,3 +21,3 @@ * An array of multiple properties (e.g. `['marginLeft', 'marginRight']`) to which this style's value will be
		/** A function to transform the raw value based on the scale. */
		transform?: (value: any, scale?: Scale) => any;
		transform?: (value: any, scale?: Scale, props?: Record<string, any>) => any;
		}
		@@ -24,0 +24,0 @@ interface Config {

56

dist/types/config/border.d.ts

		@@ -36,2 +36,3 @@ /// <reference path="../@styled-system/core.d.ts" />
		borderTop?: ResponsiveValue<CSS.Property.BorderTop<Length>>;
		borderBlockStart?: ResponsiveValue<CSS.Property.BorderBlockStart<Length>>;
		/**
		@@ -41,2 +42,3 @@ * The CSS `border-top-width` property
		borderTopWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
		borderBlockStartWidth?: ResponsiveValue<CSS.Property.BorderBlockStartWidth<Length>>;
		/**
		@@ -46,2 +48,3 @@ * The CSS `border-bottom-width` property
		borderBottomWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
		borderBlockEndWidth?: ResponsiveValue<CSS.Property.BorderBlockEndWidth<Length>>;
		/**
		@@ -51,2 +54,3 @@ * The CSS `border-left-width` property
		borderLeftWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
		borderInlineStartWidth?: ResponsiveValue<CSS.Property.BorderInlineStartWidth<Length>>;
		/**
		@@ -56,2 +60,3 @@ * The CSS `border-right-width` property
		borderRightWidth?: ResponsiveValue<CSS.Property.BorderWidth<Length>>;
		borderInlineEndWidth?: ResponsiveValue<CSS.Property.BorderInlineEndWidth<Length>>;
		/**
		@@ -61,2 +66,3 @@ * The CSS `border-top-style` property
		borderTopStyle?: ResponsiveValue<CSS.Property.BorderTopStyle>;
		borderBlockStartStyle?: ResponsiveValue<CSS.Property.BorderBlockStartStyle>;
		/**
		@@ -66,2 +72,3 @@ * The CSS `border-bottom-style` property
		borderBottomStyle?: ResponsiveValue<CSS.Property.BorderBottomStyle>;
		borderBlockEndStyle?: ResponsiveValue<CSS.Property.BorderBlockEndStyle>;
		/**
		@@ -71,2 +78,3 @@ * The CSS `border-left-style` property
		borderLeftStyle?: ResponsiveValue<CSS.Property.BorderLeftStyle>;
		borderInlineStartStyle?: ResponsiveValue<CSS.Property.BorderInlineStartStyle>;
		/**
		@@ -76,2 +84,3 @@ * The CSS `border-right-styles` property
		borderRightStyle?: ResponsiveValue<CSS.Property.BorderRightStyle>;
		borderInlineEndStyle?: ResponsiveValue<CSS.Property.BorderInlineEndStyle>;
		/**
		@@ -81,2 +90,3 @@ * The CSS `border-top-color` property
		borderTopColor?: ResponsiveValue<CSS.Property.BorderTopColor>;
		borderBlockStartColor?: ResponsiveValue<CSS.Property.BorderBlockStartColor>;
		/**
		@@ -86,2 +96,3 @@ * The CSS `border-bottom-color` property
		borderBottomColor?: ResponsiveValue<CSS.Property.BorderBottomColor>;
		borderBlockEndColor?: ResponsiveValue<CSS.Property.BorderBlockEndColor>;
		/**
		@@ -91,2 +102,3 @@ * The CSS `border-left-color` property
		borderLeftColor?: ResponsiveValue<CSS.Property.BorderLeftColor>;
		borderInlineStartColor?: ResponsiveValue<CSS.Property.BorderInlineStartColor>;
		/**
		@@ -96,2 +108,3 @@ * The CSS `border-right-color` property
		borderRightColor?: ResponsiveValue<CSS.Property.BorderRightColor>;
		borderInlineEndColor?: ResponsiveValue<CSS.Property.BorderInlineEndColor>;
		/**
		@@ -101,2 +114,3 @@ * The CSS `border-right` property
		borderRight?: ResponsiveValue<CSS.Property.BorderRight<Length>>;
		borderInlineEnd?: ResponsiveValue<CSS.Property.BorderInlineEnd<Length>>;
		/**
		@@ -106,2 +120,3 @@ * The CSS `border-bottom` property
		borderBottom?: ResponsiveValue<CSS.Property.BorderBottom<Length>>;
		borderBlockEnd?: ResponsiveValue<CSS.Property.BorderBlockEnd<Length>>;
		/**
		@@ -111,2 +126,3 @@ * The CSS `border-left` property
		borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<Length>>;
		borderInlineStart?: ResponsiveValue<CSS.Property.BorderInlineStart<Length>>;
		/**
		@@ -129,2 +145,17 @@ * The CSS `border-top-radius` property
		/**
		* When direction is `ltr`, `roundedEnd` is equivalent to `borderRightRadius`.
		* When direction is `rtl`, `roundedEnd` is equivalent to `borderLeftRadius`.
		*/
		roundedEnd?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		* When direction is `ltr`, `borderInlineEndRadius` is equivalent to `borderRightRadius`.
		* When direction is `rtl`, `borderInlineEndRadius` is equivalent to `borderLeftRadius`.
		*/
		borderInlineEndRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		* When direction is `ltr`, `borderEndRadius` is equivalent to `borderRightRadius`.
		* When direction is `rtl`, `borderEndRadius` is equivalent to `borderLeftRadius`.
		*/
		borderEndRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		* The CSS `border-bottom-radius` property
		@@ -146,5 +177,21 @@ */
		/**
		* When direction is `ltr`, `roundedEnd` is equivalent to `borderRightRadius`.
		* When direction is `rtl`, `roundedEnd` is equivalent to `borderLeftRadius`.
		*/
		roundedStart?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		* When direction is `ltr`, `borderInlineStartRadius` is equivalent to `borderLeftRadius`.
		* When direction is `rtl`, `borderInlineStartRadius` is equivalent to `borderRightRadius`.
		*/
		borderInlineStartRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		* When direction is `ltr`, `borderStartRadius` is equivalent to `borderLeftRadius`.
		* When direction is `rtl`, `borderStartRadius` is equivalent to `borderRightRadius`.
		*/
		borderStartRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		* The CSS `border-top-left-radius` property
		*/
		borderTopLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		borderStartStartRadius?: ResponsiveValue<CSS.Property.BorderStartStartRadius<Length>>;
		/**
		@@ -154,2 +201,3 @@ * The CSS `border-top-left-radius` property
		roundedTopLeft?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		roundedTopStart?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		@@ -159,2 +207,3 @@ * The CSS `border-top-right-radius` property
		borderTopRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		borderStartEndRadius?: ResponsiveValue<CSS.Property.BorderStartEndRadius<Length>>;
		/**
		@@ -164,2 +213,3 @@ * The CSS `border-top-right-radius` property
		roundedTopRight?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		roundedTopEnd?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		@@ -169,2 +219,3 @@ * The CSS `border-bottom-left-radius` property
		borderBottomLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		borderEndStartRadius?: ResponsiveValue<CSS.Property.BorderEndStartRadius<Length>>;
		/**
		@@ -174,2 +225,3 @@ * The CSS `border-bottom-left-radius` property
		roundedBottomLeft?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		roundedBottomStart?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		@@ -179,2 +231,3 @@ * The CSS `border-bottom-right-radius` property
		borderBottomRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		borderEndEndRadius?: ResponsiveValue<CSS.Property.BorderEndEndRadius<Length>>;
		/**
		@@ -184,2 +237,3 @@ * The CSS `border-bottom-right-radius` property
		roundedBottomRight?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		roundedBottomEnd?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
		/**
		@@ -189,2 +243,3 @@ * The CSS `border-right` and `border-left` property
		borderX?: ResponsiveValue<CSS.Property.Border<Length>>;
		borderInline?: ResponsiveValue<CSS.Property.BorderInline<Length>>;
		/**
		@@ -194,4 +249,5 @@ * The CSS `border-top` and `border-bottom` property
		borderY?: ResponsiveValue<CSS.Property.Border<Length>>;
		borderBlock?: ResponsiveValue<CSS.Property.BorderBlock<Length>>;
		}
		export declare const border: import("@styled-system/core").StyleFn;
		export declare const borderParser: import("@styled-system/core").StyleFn;

6

dist/types/config/layout.d.ts

		@@ -24,2 +24,3 @@ /// <reference path="../@styled-system/core.d.ts" />
		w?: ResponsiveValue<CSS.Property.Width<Length>>;
		inlineSize?: ResponsiveValue<CSS.Property.InlineSize<Length>>;
		/**
		@@ -37,2 +38,3 @@ * The CSS `width` and `height` property
		maxW?: ResponsiveValue<CSS.Property.MaxWidth<Length>>;
		maxInlineSize?: ResponsiveValue<CSS.Property.MaxInlineSize<Length>>;
		/**
		@@ -46,2 +48,3 @@ * The CSS `min-width` property
		minW?: ResponsiveValue<CSS.Property.MinWidth<Length>>;
		minInlineSize?: ResponsiveValue<CSS.Property.MinInlineSize<Length>>;
		/**
		@@ -55,2 +58,3 @@ * The CSS `height` property
		h?: ResponsiveValue<CSS.Property.Height<Length>>;
		blockSize?: ResponsiveValue<CSS.Property.BlockSize<Length>>;
		/**
		@@ -64,2 +68,3 @@ * The CSS `max-height` property
		maxH?: ResponsiveValue<CSS.Property.MaxHeight<Length>>;
		maxBlockSize?: ResponsiveValue<CSS.Property.MaxBlockSize<Length>>;
		/**
		@@ -73,2 +78,3 @@ * The CSS `min-height` property
		minH?: ResponsiveValue<CSS.Property.MinHeight<Length>>;
		minBlockSize?: ResponsiveValue<CSS.Property.MinBlockSize<Length>>;
		/**
		@@ -75,0 +81,0 @@ * The CSS `vertical-align` property

20

dist/types/config/position.d.ts

		@@ -16,2 +16,3 @@ /// <reference path="../@styled-system/core.d.ts" />
		top?: ResponsiveValue<CSS.Property.Top<Length>>;
		insetBlockStart?: ResponsiveValue<CSS.Property.InsetBlockStart<Length>>;
		/**
		@@ -22,5 +23,16 @@ * The CSS `right` property
		/**
		* When the direction is `ltr`, `insetInlineEnd` is equivalent to `right`.
		* When the direction is `rtl`, `insetInlineEnd` is equivalent to `left`.
		*/
		insetInlineEnd?: ResponsiveValue<CSS.Property.InsetInlineEnd<Length>>;
		/**
		* When the direction is `ltr`, `insetEnd` is equivalent to `right`.
		* When the direction is `rtl`, `insetEnd` is equivalent to `left`.
		*/
		insetEnd?: ResponsiveValue<CSS.Property.InsetInlineEnd<Length>>;
		/**
		* The CSS `bottom` property
		*/
		bottom?: ResponsiveValue<CSS.Property.Bottom<Length>>;
		insetBlockEnd?: ResponsiveValue<CSS.Property.InsetBlockEnd<Length>>;
		/**
		@@ -30,3 +42,9 @@ * The CSS `left` property
		left?: ResponsiveValue<CSS.Property.Left<Length>>;
		insetInlineStart?: ResponsiveValue<CSS.Property.InsetInlineStart<Length>>;
		/**
		* When the direction is `start`, `end` is equivalent to `left`.
		* When the direction is `start`, `end` is equivalent to `right`.
		*/
		insetStart?: ResponsiveValue<CSS.Property.InsetInlineStart<Length>>;
		/**
		* The CSS `left`, `right`, `top`, `bottom` property
		@@ -51,4 +69,6 @@ */
		position?: ResponsiveValue<CSS.Property.Position>;
		insetInline?: ResponsiveValue<CSS.Property.InsetInline>;
		insetBlock?: ResponsiveValue<CSS.Property.InsetBlock>;
		}
		export declare const position: import("@styled-system/core").StyleFn;
		export declare const positionParser: import("@styled-system/core").StyleFn;

70

dist/types/config/space.d.ts

		/// <reference path="../@styled-system/core.d.ts" />
		import * as CSS from "csstype";
		import { ResponsiveValue, Length } from "../utils";
		import { Length, ResponsiveValue } from "../utils";
		/**
		@@ -20,2 +20,3 @@ * Types for space related CSS properties
		mt?: ResponsiveValue<CSS.Property.Margin<Length>>;
		marginBlockStart?: ResponsiveValue<CSS.Property.MarginBlockStart<Length>>;
		/**
		@@ -30,2 +31,17 @@ * Margin on top
		/**
		* When direction is `ltr`, `marginInlineEnd` is equivalent to `marginRight`.
		* When direction is `rtl`, `marginInlineEnd` is equivalent to `marginLeft`.
		*/
		marginInlineEnd?: ResponsiveValue<CSS.Property.MarginInlineEnd<Length>>;
		/**
		* When direction is `ltr`, `marginEnd` is equivalent to `marginRight`.
		* When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
		*/
		marginEnd?: ResponsiveValue<CSS.Property.MarginInlineEnd<Length>>;
		/**
		* When direction is `ltr`, `me` is equivalent to `marginRight`.
		* When direction is `rtl`, `me` is equivalent to `marginLeft`.
		*/
		me?: ResponsiveValue<CSS.Property.MarginInlineEnd<Length>>;
		/**
		* Margin on right
		@@ -38,2 +54,3 @@ */
		mb?: ResponsiveValue<CSS.Property.MarginBottom<Length>>;
		marginBlockEnd?: ResponsiveValue<CSS.Property.MarginBlockEnd<Length>>;
		/**
		@@ -48,2 +65,17 @@ * Margin on bottom
		/**
		* When direction is `ltr`, `marginInlineStart` is equivalent to `marginLeft`.
		* When direction is `rtl`, `marginInlineStart` is equivalent to `marginRight`.
		*/
		marginInlineStart?: ResponsiveValue<CSS.Property.MarginInlineStart<Length>>;
		/**
		* When direction is `ltr`, `marginStart` is equivalent to `marginLeft`.
		* When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
		*/
		marginStart?: ResponsiveValue<CSS.Property.MarginInlineStart<Length>>;
		/**
		* When direction is `ltr`, `ms` is equivalent to `marginLeft`.
		* When direction is `rtl`, `ms` is equivalent to `marginRight`.
		*/
		ms?: ResponsiveValue<CSS.Property.MarginInlineStart<Length>>;
		/**
		* Margin on left
		@@ -56,2 +88,3 @@ */
		mx?: ResponsiveValue<CSS.Property.Margin<Length>>;
		marginInline?: ResponsiveValue<CSS.Property.MarginInline<Length>>;
		/**
		@@ -65,2 +98,3 @@ * Margin on left and right
		my?: ResponsiveValue<CSS.Property.Margin<Length>>;
		marginBlock?: ResponsiveValue<CSS.Property.MarginBlock<Length>>;
		/**
		@@ -82,2 +116,3 @@ * Margin on top and bottom
		pt?: ResponsiveValue<CSS.Property.PaddingTop<Length>>;
		paddingBlockStart?: ResponsiveValue<CSS.Property.PaddingBlockStart<Length>>;
		/**
		@@ -92,2 +127,17 @@ * Padding on top
		/**
		* When direction is `ltr`, `paddingInlineEnd` is equivalent to `paddingRight`.
		* When direction is `rtl`, `paddingInlineEnd` is equivalent to `paddingLeft`.
		*/
		paddingInlineEnd?: ResponsiveValue<CSS.Property.PaddingInlineEnd<Length>>;
		/**
		* When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`.
		* When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
		*/
		paddingEnd?: ResponsiveValue<CSS.Property.PaddingInlineEnd<Length>>;
		/**
		* When direction is `ltr`, `pe` is equivalent to `paddingRight`.
		* When direction is `rtl`, `pe` is equivalent to `paddingLeft`.
		*/
		pe?: ResponsiveValue<CSS.Property.PaddingInlineEnd<Length>>;
		/**
		* Padding on right
		@@ -100,2 +150,3 @@ */
		pb?: ResponsiveValue<CSS.Property.PaddingBottom<Length>>;
		paddingBlockEnd?: ResponsiveValue<CSS.Property.PaddingBlockEnd<Length>>;
		/**
		@@ -110,2 +161,17 @@ * Padding on bottom
		/**
		* When direction is `ltr`, `paddingInlineStart` is equivalent to `paddingLeft`.
		* When direction is `rtl`, `paddingInlineStart` is equivalent to `paddingRight`.
		*/
		paddingInlineStart?: ResponsiveValue<CSS.Property.PaddingInlineStart<Length>>;
		/**
		* When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`.
		* When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
		*/
		paddingStart?: ResponsiveValue<CSS.Property.PaddingInlineStart<Length>>;
		/**
		* When direction is `ltr`, `ps` is equivalent to `paddingLeft`.
		* When direction is `rtl`, `ps` is equivalent to `paddingRight`.
		*/
		ps?: ResponsiveValue<CSS.Property.PaddingInlineStart<Length>>;
		/**
		* Padding on left
		@@ -118,2 +184,3 @@ */
		px?: ResponsiveValue<CSS.Property.Padding<Length>>;
		paddingInline?: ResponsiveValue<CSS.Property.PaddingInline<Length>>;
		/**
		@@ -127,2 +194,3 @@ * Padding on left and right
		py?: ResponsiveValue<CSS.Property.Padding<Length>>;
		paddingBlock?: ResponsiveValue<CSS.Property.PaddingBlock<Length>>;
		/**
		@@ -129,0 +197,0 @@ * Padding on top and bottom

48

dist/types/css.types.d.ts

		import { Dict, Omit } from "@chakra-ui/utils";
		import { PropertiesFallback, Property, Pseudos as CSSPseudos, StandardProperties, SvgProperties } from "csstype";
		import { ChakraStyleProps } from "./parser.types";
		import { Pseudos } from "./pseudo";
		@@ -25,48 +26,3 @@ import { ResponsiveValue } from "./utils";
		}
		interface AliasesCSSProperties {
		bg?: CSS["background"];
		bgColor?: CSS["backgroundColor"];
		bgImage?: CSS["backgroundImage"];
		bgSize?: CSS["backgroundSize"];
		bgPosition?: CSS["backgroundPosition"];
		bgRepeat?: CSS["backgroundRepeat"];
		bgAttachment?: CSS["backgroundAttachment"];
		borderX?: CSS["border"];
		borderY?: CSS["border"];
		borderTopRadius?: CSS["borderRadius"];
		borderBottomRadius?: CSS["borderRadius"];
		borderLeftRadius?: CSS["borderRadius"];
		borderRightRadius?: CSS["borderRadius"];
		textColor?: CSS["color"];
		flexDir?: CSS["flexDirection"];
		w?: CSS["width"];
		h?: CSS["height"];
		boxSize?: CSS["width"];
		minW?: CSS["minWidth"];
		maxW?: CSS["maxWidth"];
		minH?: CSS["minHeight"];
		maxH?: CSS["maxHeight"];
		m?: CSS["margin"];
		mt?: CSS["marginTop"];
		mr?: CSS["marginRight"];
		mb?: CSS["marginBottom"];
		ml?: CSS["marginLeft"];
		mx?: CSS["marginLeft"];
		pos?: CSS["position"];
		inset?: CSS["left"];
		insetX?: CSS["left"];
		insetY?: CSS["top"];
		marginX?: CSS["marginLeft"];
		my?: CSS["marginTop"];
		marginY?: CSS["marginTop"];
		p?: CSS["padding"];
		pt?: CSS["paddingTop"];
		pr?: CSS["paddingRight"];
		pb?: CSS["paddingBottom"];
		pl?: CSS["paddingLeft"];
		px?: CSS["paddingLeft"];
		paddingX?: CSS["paddingLeft"];
		py?: CSS["paddingTop"];
		paddingY?: CSS["paddingTop"];
		textDecor?: CSS["textDecoration"];
		interface AliasesCSSProperties extends Omit<ChakraStyleProps, keyof CSS> {
		}
		@@ -73,0 +29,0 @@ interface OverwriteCSSProperties {

7

dist/types/pseudo/pseudo.selector.d.ts

		@@ -183,4 +183,9 @@ export declare const pseudoSelectors: {
		_selection: string;
		/**
		* Styles for CSS Selector `[dir=rtl] &`
		* It is applied when any parent element has `dir="rtl"`
		*/
		_rtl: string;
		};
		export declare type Pseudos = typeof pseudoSelectors;
		export declare const pseudoPropNames: ("_hover" \| "_active" \| "_focus" \| "_highlighted" \| "_focusWithin" \| "_focusVisible" \| "_disabled" \| "_readOnly" \| "_before" \| "_after" \| "_empty" \| "_expanded" \| "_checked" \| "_grabbed" \| "_pressed" \| "_invalid" \| "_valid" \| "_loading" \| "_selected" \| "_hidden" \| "_autofill" \| "_even" \| "_odd" \| "_first" \| "_last" \| "_notFirst" \| "_notLast" \| "_visited" \| "_activeLink" \| "_indeterminate" \| "_groupHover" \| "_groupFocus" \| "_groupActive" \| "_groupDisabled" \| "_groupInvalid" \| "_groupChecked" \| "_placeholder" \| "_fullScreen" \| "_selection")[];
		export declare const pseudoPropNames: ("_hover" \| "_active" \| "_focus" \| "_highlighted" \| "_focusWithin" \| "_focusVisible" \| "_disabled" \| "_readOnly" \| "_before" \| "_after" \| "_empty" \| "_expanded" \| "_checked" \| "_grabbed" \| "_pressed" \| "_invalid" \| "_valid" \| "_loading" \| "_selected" \| "_hidden" \| "_autofill" \| "_even" \| "_odd" \| "_first" \| "_last" \| "_notFirst" \| "_notLast" \| "_visited" \| "_activeLink" \| "_indeterminate" \| "_groupHover" \| "_groupFocus" \| "_groupActive" \| "_groupDisabled" \| "_groupInvalid" \| "_groupChecked" \| "_placeholder" \| "_fullScreen" \| "_selection" \| "_rtl")[];

4

package.json

		{
		"name": "@chakra-ui/styled-system",
		"version": "1.1.1",
		"version": "1.2.0",
		"description": "Style function for css-in-js building component libraries",
		@@ -57,3 +57,3 @@ "keywords": [
		"dependencies": {
		"@chakra-ui/utils": "1.0.1",
		"@chakra-ui/utils": "1.0.2",
		"@styled-system/core": "5.1.2",
		@@ -60,0 +60,0 @@ "css-get-unit": "1.0.1",

90

README.md

		# Component Name

		A Quick description of the component
		The framework agnostic styling engine for Chakra UI. It's used in the `system`
		package.

		@@ -14,1 +15,88 @@ ## Installation
		```

		### CSS Logical Properties

		Chakra UI provides pretty good support for bi-directional (`bidi`) CSS
		properties. For our shorthand props, we provide a `*Bidi` suffix to manage the
		rtl/ltr switching.

		```jsx
		import { css } from "@chakra-ui/styled-system"

		const theme = {
		direction: "rtl", // ltr \| rtl
		}

		const styles = css({
		mt: "40px",
		// bi-directional `margin-right`
		// `margin-right` in ltr, `margin-left` in rtl
		mrBidi: "30px",
		})(theme)
		```

		### References

		```js
		const cssLogicalValueMap = {
		float: { left: "inline-start", right: "inline-end" },
		clear: { left: "inline-start", right: "inline-end" },
		resize: { horizontal: "block", vertical: "inline" },
		textAlign: { left: "start", right: "end" },
		captionSize: { top: "block-start", bottom: "block-end" },
		}

		const cssLogicalPropertiesMap = {
		// Margin and Padding Logical Properties
		"marginTop\|mt": "marginBlockStart",
		"marginLeft\|ml": "marginInlineStart",
		"marginRight\|mr": "marginInlineEnd",
		"marginBottom\|mb": "marginBlockEnd",
		"paddingTop\|pt": "paddingBlockStart",
		"paddingBottom\|pb": "paddingBlockEnd",
		"paddingLeft\|pl": "paddingInlineStart",
		"paddingRight\|pr": "paddingInlineEnd",
		"marginY\|my": "marginBlock",
		"marginX\|mx": "marginInline",
		"paddingY\|py": "paddingBlock",
		"paddingX\|px": "paddingInline",

		// Floating and positioning logical properties
		top: "insetBlockStart",
		bottom: "insetBlockEnd",
		left: "insetInlineStart",
		right: "insetInlineEnd",

		// Sizing Logical properties
		"width\|w": "inlineSize",
		"minW\|minWidth": "minInlineSize",
		"maxW\|maxWidth": "maxInlineSize",
		"height\|h": "blockSize",
		"minH\|minHeight": "minBlockSize",
		"maxH\|maxHeight": "maxBlockSize",

		// Border logical properties
		borderY: "borderBlock",
		borderX: "borderInline",

		borderTop: "borderBlockStart",
		borderTopWidth: "borderBlockStartWidth",
		borderTopStyle: "borderBlockStartStyle",
		borderTopColor: "borderBlockStartColor",

		borderBottom: "borderBlockEnd",
		borderBottomWidth: "borderBlockEndWidth",
		borderBottomStyle: "borderBlockEndStyle",
		borderBottomColor: "borderBlockEndColor",

		borderLeft: "borderInlineStart",
		borderLeftWidth: "borderInlineStartWidth",
		borderLeftStyle: "borderInlineStartStyle",
		borderLeftColor: "borderInlineStartColor",

		borderRight: "borderInlineEnd",
		borderRightWidth: "borderInlineEndWidth",
		borderRightStyle: "borderInlineEndStyle",
		borderRightColor: "borderInlineEndColor",
		}
		```

dist/cjs/config/background.js.map