@flodesk/grain 9.10.1 → 9.11.0

package/es/components/arrange.js

@@ -1,8 +1,5 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.object.assign.js";
-var _excluded = ["children", "gap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "rows", "autoFlow", "width", "height"];
+import _styled from "@emotion/styled/base";
+var _excluded = ["children", "gap", "alignItems", "justifyItems", "justifyContent", "alignContent", "columns", "rows", "autoFlow"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,34 +7,19 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import { getResponsiveDimension, getResponsiveOneOf, getResponsiveSpace } from '../utilities';
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.assign.js";
+import { getResponsiveOneOf, getResponsiveSpace } from '../utilities';
 import React, { forwardRef } from 'react';
-import { css } from '@emotion/react';
 import { types } from '../types';
+import { Box } from './box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      gap = _ref.gap,
-      _ref$alignItems = _ref.alignItems,
-      alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
-      justifyItems = _ref.justifyItems,
-      _ref$justifyContent = _ref.justifyContent,
-      justifyContent = _ref$justifyContent === void 0 ? 'start' : _ref$justifyContent,
-      alignContent = _ref.alignContent,
-      columns = _ref.columns,
-      rows = _ref.rows,
-      _ref$autoFlow = _ref.autoFlow,
-      autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
-      width = _ref.width,
-      height = _ref.height,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return ___EmotionJSX("div", _extends({
-    ref: ref,
-    css: /*#__PURE__*/css("display:grid;", !columns && getResponsiveOneOf('grid-auto-flow', autoFlow), ";", getResponsiveSpace('gap', gap), ";", getResponsiveOneOf('grid-template-columns', columns), ";", getResponsiveOneOf('grid-template-rows', rows), ";", getResponsiveOneOf('justify-items', justifyItems), ";", getResponsiveOneOf('align-items', alignItems), ";", getResponsiveOneOf('justify-content', justifyContent), ";", getResponsiveOneOf('align-content', alignContent), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('height', height), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Arrange;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2FycmFuZ2UuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCYyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9hcnJhbmdlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldFJlc3BvbnNpdmVEaW1lbnNpb24sIGdldFJlc3BvbnNpdmVPbmVPZiwgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBBcnJhbmdlID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgZ2FwLFxuICAgICAgYWxpZ25JdGVtcyA9ICdjZW50ZXInLFxuICAgICAganVzdGlmeUl0ZW1zLFxuICAgICAganVzdGlmeUNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgYWxpZ25Db250ZW50LFxuICAgICAgY29sdW1ucyxcbiAgICAgIHJvd3MsXG4gICAgICBhdXRvRmxvdyA9ICdjb2x1bW4nLFxuICAgICAgd2lkdGgsXG4gICAgICBoZWlnaHQsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8ZGl2XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICAkeyFjb2x1bW5zICYmIGdldFJlc3BvbnNpdmVPbmVPZignZ3JpZC1hdXRvLWZsb3cnLCBhdXRvRmxvdyl9O1xuICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnZ2FwJywgZ2FwKX07XG4gICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdncmlkLXRlbXBsYXRlLWNvbHVtbnMnLCBjb2x1bW5zKX07XG4gICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdncmlkLXRlbXBsYXRlLXJvd3MnLCByb3dzKX07XG5cbiAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2p1c3RpZnktaXRlbXMnLCBqdXN0aWZ5SXRlbXMpfTtcbiAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLWl0ZW1zJywgYWxpZ25JdGVtcyl9O1xuICAgICAgICAke2dldFJlc3BvbnNpdmVPbmVPZignanVzdGlmeS1jb250ZW50JywganVzdGlmeUNvbnRlbnQpfTtcbiAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLWNvbnRlbnQnLCBhbGlnbkNvbnRlbnQpfTtcblxuICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ3dpZHRoJywgd2lkdGgpfTtcbiAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdoZWlnaHQnLCBoZWlnaHQpfTtcbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApLFxuKTtcblxuQXJyYW5nZS5wcm9wVHlwZXMgPSB7XG4gIGdhcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBjb2x1bW5zOiB0eXBlcy5yZXNwb25zaXZlQ29sdW1ucyxcbiAgcm93czogdHlwZXMucmVzcG9uc2l2ZVJvd3MsXG4gIGF1dG9GbG93OiB0eXBlcy5hdXRvRmxvdyxcbiAgYWxpZ25JdGVtczogdHlwZXMuZ3JpZEl0ZW1zQWxpZ25tZW50LFxuICBqdXN0aWZ5SXRlbXM6IHR5cGVzLmdyaWRJdGVtc0FsaWdubWVudCxcbiAganVzdGlmeUNvbnRlbnQ6IHR5cGVzLmdyaWRDb250ZW50UG9zaXRpb24sXG4gIGFsaWduQ29udGVudDogdHlwZXMuZ3JpZENvbnRlbnRQb3NpdGlvbixcbiAgd2lkdGg6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIGhlaWdodDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbn07XG4iXX0= */")
-  }, props), children);
-});
-Arrange.propTypes = {
+var gridProps = {
   gap: types.responsiveSpace,
   columns: types.responsiveColumns,
   rows: types.responsiveRows,
@@ -45,7 +27,57 @@ Arrange.propTypes = {
   alignItems: types.gridItemsAlignment,
   justifyItems: types.gridItemsAlignment,
   justifyContent: types.gridContentPosition,
-  alignContent: types.gridContentPosition,
-  width: types.responsiveDimension,
-  height: types.responsiveDimension
-};
+  alignContent: types.gridContentPosition
+};
+
+var Root = /*#__PURE__*/_styled(Box, process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !Object.keys(gridProps).includes(prop);
+  },
+  target: "e12ddjtg0"
+} : {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !Object.keys(gridProps).includes(prop);
+  },
+  target: "e12ddjtg0",
+  label: "Root"
+})("display:grid;", function (_ref) {
+  var columns = _ref.columns,
+      autoFlow = _ref.autoFlow,
+      gap = _ref.gap,
+      rows = _ref.rows,
+      justifyItems = _ref.justifyItems,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      alignContent = _ref.alignContent;
+  return "\n    ".concat(!columns && getResponsiveOneOf('grid-auto-flow', autoFlow), ";\n    ").concat(getResponsiveSpace('gap', gap), ";\n    ").concat(getResponsiveOneOf('grid-template-columns', columns), ";\n    ").concat(getResponsiveOneOf('grid-template-rows', rows), ";\n    ").concat(getResponsiveOneOf('justify-items', justifyItems), ";\n    ").concat(getResponsiveOneOf('align-items', alignItems), ";\n    ").concat(getResponsiveOneOf('justify-content', justifyContent), ";\n    ").concat(getResponsiveOneOf('align-content', alignContent), ";\n  ");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2FycmFuZ2UuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CRSIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9hcnJhbmdlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldFJlc3BvbnNpdmVPbmVPZiwgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5cbmNvbnN0IGdyaWRQcm9wcyA9IHtcbiAgZ2FwOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIGNvbHVtbnM6IHR5cGVzLnJlc3BvbnNpdmVDb2x1bW5zLFxuICByb3dzOiB0eXBlcy5yZXNwb25zaXZlUm93cyxcbiAgYXV0b0Zsb3c6IHR5cGVzLmF1dG9GbG93LFxuICBhbGlnbkl0ZW1zOiB0eXBlcy5ncmlkSXRlbXNBbGlnbm1lbnQsXG4gIGp1c3RpZnlJdGVtczogdHlwZXMuZ3JpZEl0ZW1zQWxpZ25tZW50LFxuICBqdXN0aWZ5Q29udGVudDogdHlwZXMuZ3JpZENvbnRlbnRQb3NpdGlvbixcbiAgYWxpZ25Db250ZW50OiB0eXBlcy5ncmlkQ29udGVudFBvc2l0aW9uLFxufTtcblxuY29uc3QgUm9vdCA9IHN0eWxlZChCb3gsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIU9iamVjdC5rZXlzKGdyaWRQcm9wcykuaW5jbHVkZXMocHJvcCksXG59KWBcbiAgZGlzcGxheTogZ3JpZDtcbiAgJHsoeyBjb2x1bW5zLCBhdXRvRmxvdywgZ2FwLCByb3dzLCBqdXN0aWZ5SXRlbXMsIGFsaWduSXRlbXMsIGp1c3RpZnlDb250ZW50LCBhbGlnbkNvbnRlbnQgfSkgPT4gYFxuICAgICR7IWNvbHVtbnMgJiYgZ2V0UmVzcG9uc2l2ZU9uZU9mKCdncmlkLWF1dG8tZmxvdycsIGF1dG9GbG93KX07XG4gICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2dhcCcsIGdhcCl9O1xuICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdncmlkLXRlbXBsYXRlLWNvbHVtbnMnLCBjb2x1bW5zKX07XG4gICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2dyaWQtdGVtcGxhdGUtcm93cycsIHJvd3MpfTtcbiAgICAke2dldFJlc3BvbnNpdmVPbmVPZignanVzdGlmeS1pdGVtcycsIGp1c3RpZnlJdGVtcyl9O1xuICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdhbGlnbi1pdGVtcycsIGFsaWduSXRlbXMpfTtcbiAgICAke2dldFJlc3BvbnNpdmVPbmVPZignanVzdGlmeS1jb250ZW50JywganVzdGlmeUNvbnRlbnQpfTtcbiAgICAke2dldFJlc3BvbnNpdmVPbmVPZignYWxpZ24tY29udGVudCcsIGFsaWduQ29udGVudCl9O1xuICBgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBcnJhbmdlID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgZ2FwLFxuICAgICAgYWxpZ25JdGVtcyA9ICdjZW50ZXInLFxuICAgICAganVzdGlmeUl0ZW1zLFxuICAgICAganVzdGlmeUNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgYWxpZ25Db250ZW50LFxuICAgICAgY29sdW1ucyxcbiAgICAgIHJvd3MsXG4gICAgICBhdXRvRmxvdyA9ICdjb2x1bW4nLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiAoXG4gICAgPFJvb3RcbiAgICAgIHJlZj17cmVmfVxuICAgICAgZ2FwPXtnYXB9XG4gICAgICBhbGlnbkl0ZW1zPXthbGlnbkl0ZW1zfVxuICAgICAganVzdGlmeUl0ZW1zPXtqdXN0aWZ5SXRlbXN9XG4gICAgICBqdXN0aWZ5Q29udGVudD17anVzdGlmeUNvbnRlbnR9XG4gICAgICBhbGlnbkNvbnRlbnQ9e2FsaWduQ29udGVudH1cbiAgICAgIGNvbHVtbnM9e2NvbHVtbnN9XG4gICAgICByb3dzPXtyb3dzfVxuICAgICAgYXV0b0Zsb3c9e2F1dG9GbG93fVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1Jvb3Q+XG4gICksXG4pO1xuXG5BcnJhbmdlLnByb3BUeXBlcyA9IGdyaWRQcm9wcztcbiJdfQ== */"));
+
+export var Arrange = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      gap = _ref2.gap,
+      _ref2$alignItems = _ref2.alignItems,
+      alignItems = _ref2$alignItems === void 0 ? 'center' : _ref2$alignItems,
+      justifyItems = _ref2.justifyItems,
+      _ref2$justifyContent = _ref2.justifyContent,
+      justifyContent = _ref2$justifyContent === void 0 ? 'start' : _ref2$justifyContent,
+      alignContent = _ref2.alignContent,
+      columns = _ref2.columns,
+      rows = _ref2.rows,
+      _ref2$autoFlow = _ref2.autoFlow,
+      autoFlow = _ref2$autoFlow === void 0 ? 'column' : _ref2$autoFlow,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return ___EmotionJSX(Root, _extends({
+    ref: ref,
+    gap: gap,
+    alignItems: alignItems,
+    justifyItems: justifyItems,
+    justifyContent: justifyContent,
+    alignContent: alignContent,
+    columns: columns,
+    rows: rows,
+    autoFlow: autoFlow
+  }, props), children);
+});
+Arrange.propTypes = gridProps;

package/es/components/box.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.assign.js";
-var _excluded = ["children", "color", "colorHover", "backgroundColor", "backgroundColorHover", "borderColor", "borderColorHover", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor"];
+var _excluded = ["all", "children", "color", "colorHover", "backgroundColor", "backgroundColorHover", "borderColor", "borderColorHover", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "shadowHover", "overflow", "overflowX", "overflowY", "aspectRatio", "zIndex", "tag", "opacity", "opacityHover", "order", "alignSelf", "flex", "transition", "transitionHover", "cursor"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -17,7 +17,8 @@ import { types } from '../types';
 import PropTypes from 'prop-types';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
+  var all = _ref.all,
+      children = _ref.children,
       color = _ref.color,
       colorHover = _ref.colorHover,
       backgroundColor = _ref.backgroundColor,
@@ -76,10 +77,11 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var Tag = tag;
   return ___EmotionJSX(Tag, _extends({
     ref: ref,
-    css: /*#__PURE__*/css(getBorder(borderSide, borderWidth, borderColor), ";", getResponsiveSpace('padding', padding), ";", getResponsiveSpace('padding-top', paddingTop || paddingY), ";", getResponsiveSpace('padding-bottom', paddingBottom || paddingY), ";", getResponsiveSpace('padding-left', paddingLeft || paddingX), ";", getResponsiveSpace('padding-right', paddingRight || paddingX), ";", getResponsiveSpace('margin', margin), ";", getResponsiveSpace('margin-top', marginTop || marginY), ";", getResponsiveSpace('margin-bottom', marginBottom || marginY), ";", getResponsiveSpace('margin-left', marginLeft || marginX), ";", getResponsiveSpace('margin-right', marginRight || marginX), ";", getResponsiveSpace('top', top), ";", getResponsiveSpace('bottom', bottom), ";", getResponsiveSpace('left', left), ";", getResponsiveSpace('right', right), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('min-width', minWidth), ";", getResponsiveDimension('max-width', maxWidth), ";", getResponsiveDimension('height', height), ";", getResponsiveDimension('min-height', minHeight), ";", getResponsiveDimension('max-height', maxHeight), ";", getResponsiveOneOf('order', order), ";", getResponsiveOneOf('flex', flex), ";", getResponsiveOneOf('align-self', alignSelf), ";", overflow && "overflow: ".concat(overflow), ";", overflowX && "overflow-x: ".concat(overflowX), ";", overflowY && "overflow-y: ".concat(overflowY), ";color:", getColor(color), ";background-color:", getColor(backgroundColor), ";position:", position, ";border-radius:", getRadius(radius), ";box-shadow:", getShadow(shadow), ";aspect-ratio:", aspectRatio, ";z-index:", zIndex, ";", Boolean(opacity) && "opacity: ".concat(opacity), ";transition:", getTransition(transition), ";cursor:", cursor, ";&:hover{color:", getColor(colorHover), ";background-color:", getColor(backgroundColorHover), ";box-shadow:", getShadow(shadowHover), ";transition:", getTransition(transitionHover), ";", Boolean(opacityHover) && "opacity: ".concat(opacityHover), ";", borderColorHover && getBorder(borderSide, borderWidth, borderColorHover), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Box;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2JveC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEVnQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9ib3guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZ2V0Qm9yZGVyLFxuICBnZXRDb2xvcixcbiAgZ2V0UmFkaXVzLFxuICBnZXRSZXNwb25zaXZlU3BhY2UsXG4gIGdldFNoYWRvdyxcbiAgZ2V0UmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgZ2V0UmVzcG9uc2l2ZU9uZU9mLFxuICBnZXRUcmFuc2l0aW9uLFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcblxuZXhwb3J0IGNvbnN0IEJveCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNvbG9yLFxuICAgICAgY29sb3JIb3ZlcixcbiAgICAgIGJhY2tncm91bmRDb2xvcixcbiAgICAgIGJhY2tncm91bmRDb2xvckhvdmVyLFxuICAgICAgYm9yZGVyQ29sb3IgPSAnYm9yZGVyJyxcbiAgICAgIGJvcmRlckNvbG9ySG92ZXIsXG4gICAgICBib3JkZXJXaWR0aCA9ICcxcHgnLFxuICAgICAgYm9yZGVyU2lkZSxcbiAgICAgIHdpZHRoLFxuICAgICAgbWluV2lkdGgsXG4gICAgICBtYXhXaWR0aCxcbiAgICAgIGhlaWdodCxcbiAgICAgIG1pbkhlaWdodCxcbiAgICAgIG1heEhlaWdodCxcbiAgICAgIHJhZGl1cyxcbiAgICAgIHBhZGRpbmcsXG4gICAgICBwYWRkaW5nVG9wLFxuICAgICAgcGFkZGluZ0JvdHRvbSxcbiAgICAgIHBhZGRpbmdMZWZ0LFxuICAgICAgcGFkZGluZ1JpZ2h0LFxuICAgICAgcGFkZGluZ1gsXG4gICAgICBwYWRkaW5nWSxcbiAgICAgIG1hcmdpbixcbiAgICAgIG1hcmdpblRvcCxcbiAgICAgIG1hcmdpbkJvdHRvbSxcbiAgICAgIG1hcmdpbkxlZnQsXG4gICAgICBtYXJnaW5SaWdodCxcbiAgICAgIG1hcmdpblgsXG4gICAgICBtYXJnaW5ZLFxuICAgICAgcG9zaXRpb24sXG4gICAgICB0b3AsXG4gICAgICBib3R0b20sXG4gICAgICBsZWZ0LFxuICAgICAgcmlnaHQsXG4gICAgICBzaGFkb3csXG4gICAgICBzaGFkb3dIb3ZlcixcbiAgICAgIG92ZXJmbG93LFxuICAgICAgb3ZlcmZsb3dYLFxuICAgICAgb3ZlcmZsb3dZLFxuICAgICAgYXNwZWN0UmF0aW8sXG4gICAgICB6SW5kZXgsXG4gICAgICB0YWcgPSAnZGl2JyxcbiAgICAgIG9wYWNpdHksXG4gICAgICBvcGFjaXR5SG92ZXIsXG4gICAgICBvcmRlcixcbiAgICAgIGFsaWduU2VsZixcbiAgICAgIGZsZXgsXG4gICAgICB0cmFuc2l0aW9uLFxuICAgICAgdHJhbnNpdGlvbkhvdmVyLFxuICAgICAgY3Vyc29yLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgVGFnID0gdGFnO1xuICAgIHJldHVybiAoXG4gICAgICA8VGFnXG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAke2dldEJvcmRlcihib3JkZXJTaWRlLCBib3JkZXJXaWR0aCwgYm9yZGVyQ29sb3IpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdwYWRkaW5nJywgcGFkZGluZyl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdwYWRkaW5nLXRvcCcsIHBhZGRpbmdUb3AgfHwgcGFkZGluZ1kpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgncGFkZGluZy1ib3R0b20nLCBwYWRkaW5nQm90dG9tIHx8IHBhZGRpbmdZKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmctbGVmdCcsIHBhZGRpbmdMZWZ0IHx8IHBhZGRpbmdYKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmctcmlnaHQnLCBwYWRkaW5nUmlnaHQgfHwgcGFkZGluZ1gpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4nLCBtYXJnaW4pfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnbWFyZ2luLXRvcCcsIG1hcmdpblRvcCB8fCBtYXJnaW5ZKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi1ib3R0b20nLCBtYXJnaW5Cb3R0b20gfHwgbWFyZ2luWSl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tbGVmdCcsIG1hcmdpbkxlZnQgfHwgbWFyZ2luWCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tcmlnaHQnLCBtYXJnaW5SaWdodCB8fCBtYXJnaW5YKX07XG5cbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgndG9wJywgdG9wKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2JvdHRvbScsIGJvdHRvbSl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdsZWZ0JywgbGVmdCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdyaWdodCcsIHJpZ2h0KX07XG5cbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ3dpZHRoJywgd2lkdGgpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21pbi13aWR0aCcsIG1pbldpZHRoKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdtYXgtd2lkdGgnLCBtYXhXaWR0aCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignaGVpZ2h0JywgaGVpZ2h0KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdtaW4taGVpZ2h0JywgbWluSGVpZ2h0KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdtYXgtaGVpZ2h0JywgbWF4SGVpZ2h0KX07XG5cbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVPbmVPZignb3JkZXInLCBvcmRlcil9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdmbGV4JywgZmxleCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdhbGlnbi1zZWxmJywgYWxpZ25TZWxmKX07XG5cbiAgICAgICAgICAke292ZXJmbG93ICYmIGBvdmVyZmxvdzogJHtvdmVyZmxvd31gfTtcbiAgICAgICAgICAke292ZXJmbG93WCAmJiBgb3ZlcmZsb3cteDogJHtvdmVyZmxvd1h9YH07XG4gICAgICAgICAgJHtvdmVyZmxvd1kgJiYgYG92ZXJmbG93LXk6ICR7b3ZlcmZsb3dZfWB9O1xuXG4gICAgICAgICAgY29sb3I6ICR7Z2V0Q29sb3IoY29sb3IpfTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKGJhY2tncm91bmRDb2xvcil9O1xuICAgICAgICAgIHBvc2l0aW9uOiAke3Bvc2l0aW9ufTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cyhyYWRpdXMpfTtcbiAgICAgICAgICBib3gtc2hhZG93OiAke2dldFNoYWRvdyhzaGFkb3cpfTtcbiAgICAgICAgICBhc3BlY3QtcmF0aW86ICR7YXNwZWN0UmF0aW99O1xuICAgICAgICAgIHotaW5kZXg6ICR7ekluZGV4fTtcbiAgICAgICAgICAke0Jvb2xlYW4ob3BhY2l0eSkgJiYgYG9wYWNpdHk6ICR7b3BhY2l0eX1gfTtcbiAgICAgICAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24odHJhbnNpdGlvbil9O1xuICAgICAgICAgIGN1cnNvcjogJHtjdXJzb3J9O1xuXG4gICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBjb2xvcjogJHtnZXRDb2xvcihjb2xvckhvdmVyKX07XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKGJhY2tncm91bmRDb2xvckhvdmVyKX07XG4gICAgICAgICAgICBib3gtc2hhZG93OiAke2dldFNoYWRvdyhzaGFkb3dIb3Zlcil9O1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKHRyYW5zaXRpb25Ib3Zlcil9O1xuICAgICAgICAgICAgJHtCb29sZWFuKG9wYWNpdHlIb3ZlcikgJiYgYG9wYWNpdHk6ICR7b3BhY2l0eUhvdmVyfWB9O1xuICAgICAgICAgICAgJHtib3JkZXJDb2xvckhvdmVyICYmIGdldEJvcmRlcihib3JkZXJTaWRlLCBib3JkZXJXaWR0aCwgYm9yZGVyQ29sb3JIb3Zlcil9O1xuICAgICAgICAgIH1cbiAgICAgICAgYH1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1RhZz5cbiAgICApO1xuICB9LFxuKTtcblxuQm94LnByb3BUeXBlcyA9IHtcbiAgY29sb3I6IHR5cGVzLmNvbG9yLFxuICBjb2xvckhvdmVyOiB0eXBlcy5jb2xvcixcbiAgYmFja2dyb3VuZENvbG9yOiB0eXBlcy5jb2xvcixcbiAgYmFja2dyb3VuZENvbG9ySG92ZXI6IHR5cGVzLmNvbG9yLFxuICBib3JkZXJTaWRlOiB0eXBlcy5zaWRlLFxuICBib3JkZXJXaWR0aDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLm51bWJlciwgUHJvcFR5cGVzLnN0cmluZ10pLFxuICBib3JkZXJDb2xvcjogdHlwZXMuY29sb3IsXG4gIGJvcmRlckNvbG9ySG92ZXI6IHR5cGVzLmNvbG9yLFxuICB3aWR0aDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgbWluV2lkdGg6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1heFdpZHRoOiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBoZWlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1pbkhlaWdodDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgbWF4SGVpZ2h0OiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICByYWRpdXM6IHR5cGVzLnJhZGl1cyxcbiAgc2hhZG93OiB0eXBlcy5zaGFkb3csXG4gIHNoYWRvd0hvdmVyOiB0eXBlcy5zaGFkb3csXG4gIHBhZGRpbmc6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ1RvcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nQm90dG9tOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHBhZGRpbmdMZWZ0OiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHBhZGRpbmdSaWdodDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nWDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nWTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW46IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luVG9wOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpbkJvdHRvbTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5MZWZ0OiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblJpZ2h0OiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblg6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luWTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwb3NpdGlvbjogdHlwZXMucG9zaXRpb24sXG4gIHRvcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBib3R0b206IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbGVmdDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICByaWdodDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBvdmVyZmxvdzogdHlwZXMub3ZlcmZsb3csXG4gIG92ZXJmbG93WDogdHlwZXMub3ZlcmZsb3csXG4gIG92ZXJmbG93WTogdHlwZXMub3ZlcmZsb3csXG4gIGFzcGVjdFJhdGlvOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB6SW5kZXg6IHR5cGVzLnpJbmRleCxcbiAgdGFnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBvcGFjaXR5OiBQcm9wVHlwZXMuc3RyaW5nLFxuICBvcGFjaXR5SG92ZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIG9yZGVyOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMub2JqZWN0XSksXG4gIGFsaWduU2VsZjogdHlwZXMuYWxpZ25TZWxmLFxuICBmbGV4OiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMub2JqZWN0XSksXG4gIHRyYW5zaXRpb246IHR5cGVzLnRyYW5zaXRpb24sXG4gIHRyYW5zaXRpb25Ib3ZlcjogdHlwZXMudHJhbnNpdGlvbixcbiAgY3Vyc29yOiB0eXBlcy5jdXJzb3IsXG59O1xuIl19 */")
+    css: /*#__PURE__*/css(all && "all: ".concat(all), ";", getBorder(borderSide, borderWidth, borderColor), ";", getResponsiveSpace('padding', padding), ";", getResponsiveSpace('padding-top', paddingTop || paddingY), ";", getResponsiveSpace('padding-bottom', paddingBottom || paddingY), ";", getResponsiveSpace('padding-left', paddingLeft || paddingX), ";", getResponsiveSpace('padding-right', paddingRight || paddingX), ";", getResponsiveSpace('margin', margin), ";", getResponsiveSpace('margin-top', marginTop || marginY), ";", getResponsiveSpace('margin-bottom', marginBottom || marginY), ";", getResponsiveSpace('margin-left', marginLeft || marginX), ";", getResponsiveSpace('margin-right', marginRight || marginX), ";", getResponsiveSpace('top', top), ";", getResponsiveSpace('bottom', bottom), ";", getResponsiveSpace('left', left), ";", getResponsiveSpace('right', right), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('min-width', minWidth), ";", getResponsiveDimension('max-width', maxWidth), ";", getResponsiveDimension('height', height), ";", getResponsiveDimension('min-height', minHeight), ";", getResponsiveDimension('max-height', maxHeight), ";", getResponsiveOneOf('order', order), ";", getResponsiveOneOf('flex', flex), ";", getResponsiveOneOf('align-self', alignSelf), ";", overflow && "overflow: ".concat(overflow), ";", overflowX && "overflow-x: ".concat(overflowX), ";", overflowY && "overflow-y: ".concat(overflowY), ";color:", getColor(color), ";background-color:", getColor(backgroundColor), ";position:", position, ";border-radius:", getRadius(radius), ";box-shadow:", getShadow(shadow), ";aspect-ratio:", aspectRatio, ";z-index:", zIndex, ";", Boolean(opacity) && "opacity: ".concat(opacity), ";transition:", getTransition(transition), ";cursor:", cursor, ";&:hover{color:", getColor(colorHover), ";background-color:", getColor(backgroundColorHover), ";box-shadow:", getShadow(shadowHover), ";transition:", getTransition(transitionHover), ";", Boolean(opacityHover) && "opacity: ".concat(opacityHover), ";", borderColorHover && getBorder(borderSide, borderWidth, borderColorHover), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Box;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2JveC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0VnQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9ib3guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZ2V0Qm9yZGVyLFxuICBnZXRDb2xvcixcbiAgZ2V0UmFkaXVzLFxuICBnZXRSZXNwb25zaXZlU3BhY2UsXG4gIGdldFNoYWRvdyxcbiAgZ2V0UmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgZ2V0UmVzcG9uc2l2ZU9uZU9mLFxuICBnZXRUcmFuc2l0aW9uLFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcblxuZXhwb3J0IGNvbnN0IEJveCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBhbGwsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNvbG9yLFxuICAgICAgY29sb3JIb3ZlcixcbiAgICAgIGJhY2tncm91bmRDb2xvcixcbiAgICAgIGJhY2tncm91bmRDb2xvckhvdmVyLFxuICAgICAgYm9yZGVyQ29sb3IgPSAnYm9yZGVyJyxcbiAgICAgIGJvcmRlckNvbG9ySG92ZXIsXG4gICAgICBib3JkZXJXaWR0aCA9ICcxcHgnLFxuICAgICAgYm9yZGVyU2lkZSxcbiAgICAgIHdpZHRoLFxuICAgICAgbWluV2lkdGgsXG4gICAgICBtYXhXaWR0aCxcbiAgICAgIGhlaWdodCxcbiAgICAgIG1pbkhlaWdodCxcbiAgICAgIG1heEhlaWdodCxcbiAgICAgIHJhZGl1cyxcbiAgICAgIHBhZGRpbmcsXG4gICAgICBwYWRkaW5nVG9wLFxuICAgICAgcGFkZGluZ0JvdHRvbSxcbiAgICAgIHBhZGRpbmdMZWZ0LFxuICAgICAgcGFkZGluZ1JpZ2h0LFxuICAgICAgcGFkZGluZ1gsXG4gICAgICBwYWRkaW5nWSxcbiAgICAgIG1hcmdpbixcbiAgICAgIG1hcmdpblRvcCxcbiAgICAgIG1hcmdpbkJvdHRvbSxcbiAgICAgIG1hcmdpbkxlZnQsXG4gICAgICBtYXJnaW5SaWdodCxcbiAgICAgIG1hcmdpblgsXG4gICAgICBtYXJnaW5ZLFxuICAgICAgcG9zaXRpb24sXG4gICAgICB0b3AsXG4gICAgICBib3R0b20sXG4gICAgICBsZWZ0LFxuICAgICAgcmlnaHQsXG4gICAgICBzaGFkb3csXG4gICAgICBzaGFkb3dIb3ZlcixcbiAgICAgIG92ZXJmbG93LFxuICAgICAgb3ZlcmZsb3dYLFxuICAgICAgb3ZlcmZsb3dZLFxuICAgICAgYXNwZWN0UmF0aW8sXG4gICAgICB6SW5kZXgsXG4gICAgICB0YWcgPSAnZGl2JyxcbiAgICAgIG9wYWNpdHksXG4gICAgICBvcGFjaXR5SG92ZXIsXG4gICAgICBvcmRlcixcbiAgICAgIGFsaWduU2VsZixcbiAgICAgIGZsZXgsXG4gICAgICB0cmFuc2l0aW9uLFxuICAgICAgdHJhbnNpdGlvbkhvdmVyLFxuICAgICAgY3Vyc29yLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgVGFnID0gdGFnO1xuICAgIHJldHVybiAoXG4gICAgICA8VGFnXG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAke2FsbCAmJiBgYWxsOiAke2FsbH1gfTtcblxuICAgICAgICAgICR7Z2V0Qm9yZGVyKGJvcmRlclNpZGUsIGJvcmRlcldpZHRoLCBib3JkZXJDb2xvcil9O1xuXG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmcnLCBwYWRkaW5nKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmctdG9wJywgcGFkZGluZ1RvcCB8fCBwYWRkaW5nWSl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdwYWRkaW5nLWJvdHRvbScsIHBhZGRpbmdCb3R0b20gfHwgcGFkZGluZ1kpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgncGFkZGluZy1sZWZ0JywgcGFkZGluZ0xlZnQgfHwgcGFkZGluZ1gpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgncGFkZGluZy1yaWdodCcsIHBhZGRpbmdSaWdodCB8fCBwYWRkaW5nWCl9O1xuXG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbicsIG1hcmdpbil9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tdG9wJywgbWFyZ2luVG9wIHx8IG1hcmdpblkpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnbWFyZ2luLWJvdHRvbScsIG1hcmdpbkJvdHRvbSB8fCBtYXJnaW5ZKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi1sZWZ0JywgbWFyZ2luTGVmdCB8fCBtYXJnaW5YKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi1yaWdodCcsIG1hcmdpblJpZ2h0IHx8IG1hcmdpblgpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCd0b3AnLCB0b3ApfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnYm90dG9tJywgYm90dG9tKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2xlZnQnLCBsZWZ0KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3JpZ2h0JywgcmlnaHQpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignd2lkdGgnLCB3aWR0aCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignbWluLXdpZHRoJywgbWluV2lkdGgpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21heC13aWR0aCcsIG1heFdpZHRoKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdoZWlnaHQnLCBoZWlnaHQpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21pbi1oZWlnaHQnLCBtaW5IZWlnaHQpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21heC1oZWlnaHQnLCBtYXhIZWlnaHQpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdvcmRlcicsIG9yZGVyKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2ZsZXgnLCBmbGV4KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLXNlbGYnLCBhbGlnblNlbGYpfTtcblxuICAgICAgICAgICR7b3ZlcmZsb3cgJiYgYG92ZXJmbG93OiAke292ZXJmbG93fWB9O1xuICAgICAgICAgICR7b3ZlcmZsb3dYICYmIGBvdmVyZmxvdy14OiAke292ZXJmbG93WH1gfTtcbiAgICAgICAgICAke292ZXJmbG93WSAmJiBgb3ZlcmZsb3cteTogJHtvdmVyZmxvd1l9YH07XG5cbiAgICAgICAgICBjb2xvcjogJHtnZXRDb2xvcihjb2xvcil9O1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoYmFja2dyb3VuZENvbG9yKX07XG4gICAgICAgICAgcG9zaXRpb246ICR7cG9zaXRpb259O1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKHJhZGl1cyl9O1xuICAgICAgICAgIGJveC1zaGFkb3c6ICR7Z2V0U2hhZG93KHNoYWRvdyl9O1xuICAgICAgICAgIGFzcGVjdC1yYXRpbzogJHthc3BlY3RSYXRpb307XG4gICAgICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgICAgICAgICR7Qm9vbGVhbihvcGFjaXR5KSAmJiBgb3BhY2l0eTogJHtvcGFjaXR5fWB9O1xuICAgICAgICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbih0cmFuc2l0aW9uKX07XG4gICAgICAgICAgY3Vyc29yOiAke2N1cnNvcn07XG5cbiAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgIGNvbG9yOiAke2dldENvbG9yKGNvbG9ySG92ZXIpfTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoYmFja2dyb3VuZENvbG9ySG92ZXIpfTtcbiAgICAgICAgICAgIGJveC1zaGFkb3c6ICR7Z2V0U2hhZG93KHNoYWRvd0hvdmVyKX07XG4gICAgICAgICAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24odHJhbnNpdGlvbkhvdmVyKX07XG4gICAgICAgICAgICAke0Jvb2xlYW4ob3BhY2l0eUhvdmVyKSAmJiBgb3BhY2l0eTogJHtvcGFjaXR5SG92ZXJ9YH07XG4gICAgICAgICAgICAke2JvcmRlckNvbG9ySG92ZXIgJiYgZ2V0Qm9yZGVyKGJvcmRlclNpZGUsIGJvcmRlcldpZHRoLCBib3JkZXJDb2xvckhvdmVyKX07XG4gICAgICAgICAgfVxuICAgICAgICBgfVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvVGFnPlxuICAgICk7XG4gIH0sXG4pO1xuXG5Cb3gucHJvcFR5cGVzID0ge1xuICBhbGw6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGNvbG9yOiB0eXBlcy5jb2xvcixcbiAgY29sb3JIb3ZlcjogdHlwZXMuY29sb3IsXG4gIGJhY2tncm91bmRDb2xvcjogdHlwZXMuY29sb3IsXG4gIGJhY2tncm91bmRDb2xvckhvdmVyOiB0eXBlcy5jb2xvcixcbiAgYm9yZGVyU2lkZTogdHlwZXMuc2lkZSxcbiAgYm9yZGVyV2lkdGg6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5udW1iZXIsIFByb3BUeXBlcy5zdHJpbmddKSxcbiAgYm9yZGVyQ29sb3I6IHR5cGVzLmNvbG9yLFxuICBib3JkZXJDb2xvckhvdmVyOiB0eXBlcy5jb2xvcixcbiAgd2lkdGg6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1pbldpZHRoOiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBtYXhXaWR0aDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgaGVpZ2h0OiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBtaW5IZWlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1heEhlaWdodDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgcmFkaXVzOiB0eXBlcy5yYWRpdXMsXG4gIHNoYWRvdzogdHlwZXMuc2hhZG93LFxuICBzaGFkb3dIb3ZlcjogdHlwZXMuc2hhZG93LFxuICBwYWRkaW5nOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHBhZGRpbmdUb3A6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ0JvdHRvbTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nTGVmdDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nUmlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ1g6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ1k6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblRvcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5Cb3R0b206IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luTGVmdDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5SaWdodDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5YOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblk6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcG9zaXRpb246IHR5cGVzLnBvc2l0aW9uLFxuICB0b3A6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgYm90dG9tOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIGxlZnQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcmlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgb3ZlcmZsb3c6IHR5cGVzLm92ZXJmbG93LFxuICBvdmVyZmxvd1g6IHR5cGVzLm92ZXJmbG93LFxuICBvdmVyZmxvd1k6IHR5cGVzLm92ZXJmbG93LFxuICBhc3BlY3RSYXRpbzogUHJvcFR5cGVzLnN0cmluZyxcbiAgekluZGV4OiB0eXBlcy56SW5kZXgsXG4gIHRhZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgb3BhY2l0eTogUHJvcFR5cGVzLnN0cmluZyxcbiAgb3BhY2l0eUhvdmVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBvcmRlcjogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm9iamVjdF0pLFxuICBhbGlnblNlbGY6IHR5cGVzLmFsaWduU2VsZixcbiAgZmxleDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm9iamVjdF0pLFxuICB0cmFuc2l0aW9uOiB0eXBlcy50cmFuc2l0aW9uLFxuICB0cmFuc2l0aW9uSG92ZXI6IHR5cGVzLnRyYW5zaXRpb24sXG4gIGN1cnNvcjogdHlwZXMuY3Vyc29yLFxufTtcbiJdfQ== */")
   }, props), children);
 });
 Box.propTypes = {
+  all: PropTypes.string,
   color: types.color,
   colorHover: types.color,
   backgroundColor: types.color,

package/es/components/flex.js

@@ -1,40 +1,25 @@
-import "core-js/modules/es.object.assign.js";
+import _styled from "@emotion/styled/base";
+var _excluded = ["direction", "wrap", "justifyContent", "alignItems", "alignContent", "gap", "columnGap", "rowGap", "children"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.assign.js";
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import { types } from '../types';
-import { css } from '@emotion/react';
-import { getResponsiveDimension, getResponsiveOneOf, getResponsiveSpace } from '../utilities';
+import { getResponsiveOneOf, getResponsiveSpace } from '../utilities';
+import { Box } from './box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'row' : _ref$direction,
-      _ref$wrap = _ref.wrap,
-      wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
-      _ref$justifyContent = _ref.justifyContent,
-      justifyContent = _ref$justifyContent === void 0 ? 'start' : _ref$justifyContent,
-      _ref$alignItems = _ref.alignItems,
-      alignItems = _ref$alignItems === void 0 ? 'start' : _ref$alignItems,
-      _ref$alignContent = _ref.alignContent,
-      alignContent = _ref$alignContent === void 0 ? 'start' : _ref$alignContent,
-      gap = _ref.gap,
-      columnGap = _ref.columnGap,
-      rowGap = _ref.rowGap,
-      width = _ref.width,
-      height = _ref.height,
-      _ref$tag = _ref.tag,
-      tag = _ref$tag === void 0 ? 'div' : _ref$tag,
-      children = _ref.children,
-      props = _ref.props;
-  var Tag = tag;
-  return ___EmotionJSX(Tag, _extends({
-    css: /*#__PURE__*/css("display:flex;", getResponsiveOneOf('flex-direction', direction), ";", getResponsiveOneOf('flex-wrap', wrap), ";", getResponsiveOneOf('justify-content', justifyContent), ";", getResponsiveOneOf('align-items', alignItems), ";", getResponsiveOneOf('align-content', alignContent), ";", getResponsiveSpace('gap', gap), ";", getResponsiveSpace('column-gap', columnGap), ";", getResponsiveSpace('row-gap', rowGap), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('height', height), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Flex;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ZsZXguanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCZ0IiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvZmxleC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldFJlc3BvbnNpdmVEaW1lbnNpb24sIGdldFJlc3BvbnNpdmVPbmVPZiwgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgZGlyZWN0aW9uID0gJ3JvdycsXG4gICAgICB3cmFwID0gJ3dyYXAnLFxuICAgICAganVzdGlmeUNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgYWxpZ25JdGVtcyA9ICdzdGFydCcsXG4gICAgICBhbGlnbkNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgZ2FwLFxuICAgICAgY29sdW1uR2FwLFxuICAgICAgcm93R2FwLFxuICAgICAgd2lkdGgsXG4gICAgICBoZWlnaHQsXG4gICAgICB0YWcgPSAnZGl2JyxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgcHJvcHMsXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIGNvbnN0IFRhZyA9IHRhZztcbiAgICByZXR1cm4gKFxuICAgICAgPFRhZ1xuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdmbGV4LWRpcmVjdGlvbicsIGRpcmVjdGlvbil9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdmbGV4LXdyYXAnLCB3cmFwKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2p1c3RpZnktY29udGVudCcsIGp1c3RpZnlDb250ZW50KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLWl0ZW1zJywgYWxpZ25JdGVtcyl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdhbGlnbi1jb250ZW50JywgYWxpZ25Db250ZW50KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2dhcCcsIGdhcCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdjb2x1bW4tZ2FwJywgY29sdW1uR2FwKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3Jvdy1nYXAnLCByb3dHYXApfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ3dpZHRoJywgd2lkdGgpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ2hlaWdodCcsIGhlaWdodCl9O1xuICAgICAgICBgfVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1RhZz5cbiAgICApO1xuICB9LFxuKTtcblxuRmxleC5wcm9wVHlwZXMgPSB7XG4gIGRpcmVjdGlvbjogdHlwZXMuZmxleERpcmVjdGlvbixcbiAgd3JhcDogdHlwZXMuZmxleFdyYXAsXG4gIGp1c3RpZnlDb250ZW50OiB0eXBlcy5mbGV4SnVzdGlmeUNvbnRlbnQsXG4gIGFsaWduSXRlbXM6IHR5cGVzLmZsZXhBbGlnbkl0ZW1zLFxuICBhbGlnbkNvbnRlbnQ6IHR5cGVzLmZsZXhBbGlnbkNvbnRlbnQsXG4gIGdhcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBjb2x1bW5HYXA6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcm93R2FwOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHdpZHRoOiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBoZWlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIHRhZzogUHJvcFR5cGVzLnN0cmluZyxcbn07XG4iXX0= */"),
-    ref: ref
-  }, props), children);
-});
-Flex.propTypes = {
+var flexProps = {
   direction: types.flexDirection,
   wrap: types.flexWrap,
   justifyContent: types.flexJustifyContent,
@@ -42,8 +27,59 @@ Flex.propTypes = {
   alignContent: types.flexAlignContent,
   gap: types.responsiveSpace,
   columnGap: types.responsiveSpace,
-  rowGap: types.responsiveSpace,
-  width: types.responsiveDimension,
-  height: types.responsiveDimension,
-  tag: PropTypes.string
-};
+  rowGap: types.responsiveSpace
+};
+
+var Root = /*#__PURE__*/_styled(Box, process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !Object.keys(flexProps).includes(prop);
+  },
+  target: "e1kdx4dg0"
+} : {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !Object.keys(flexProps).includes(prop);
+  },
+  target: "e1kdx4dg0",
+  label: "Root"
+})("display:flex;", function (_ref) {
+  var direction = _ref.direction,
+      wrap = _ref.wrap,
+      justifyContent = _ref.justifyContent,
+      alignItems = _ref.alignItems,
+      alignContent = _ref.alignContent,
+      gap = _ref.gap,
+      columnGap = _ref.columnGap,
+      rowGap = _ref.rowGap;
+  return "\n    ".concat(getResponsiveOneOf('flex-direction', direction), ";\n    ").concat(getResponsiveOneOf('flex-wrap', wrap), ";\n    ").concat(getResponsiveOneOf('justify-content', justifyContent), ";\n    ").concat(getResponsiveOneOf('align-items', alignItems), ";\n    ").concat(getResponsiveOneOf('align-content', alignContent), ";\n    ").concat(getResponsiveSpace('gap', gap), ";\n    ").concat(getResponsiveSpace('column-gap', columnGap), ";\n    ").concat(getResponsiveSpace('row-gap', rowGap), ";\n  ");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ZsZXguanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CRSIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9mbGV4LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRSZXNwb25zaXZlT25lT2YsIGdldFJlc3BvbnNpdmVTcGFjZSB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5cbmNvbnN0IGZsZXhQcm9wcyA9IHtcbiAgZGlyZWN0aW9uOiB0eXBlcy5mbGV4RGlyZWN0aW9uLFxuICB3cmFwOiB0eXBlcy5mbGV4V3JhcCxcbiAganVzdGlmeUNvbnRlbnQ6IHR5cGVzLmZsZXhKdXN0aWZ5Q29udGVudCxcbiAgYWxpZ25JdGVtczogdHlwZXMuZmxleEFsaWduSXRlbXMsXG4gIGFsaWduQ29udGVudDogdHlwZXMuZmxleEFsaWduQ29udGVudCxcbiAgZ2FwOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIGNvbHVtbkdhcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICByb3dHYXA6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbn07XG5cbmNvbnN0IFJvb3QgPSBzdHlsZWQoQm94LCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFPYmplY3Qua2V5cyhmbGV4UHJvcHMpLmluY2x1ZGVzKHByb3ApLFxufSlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICR7KHsgZGlyZWN0aW9uLCB3cmFwLCBqdXN0aWZ5Q29udGVudCwgYWxpZ25JdGVtcywgYWxpZ25Db250ZW50LCBnYXAsIGNvbHVtbkdhcCwgcm93R2FwIH0pID0+IGBcbiAgICAke2dldFJlc3BvbnNpdmVPbmVPZignZmxleC1kaXJlY3Rpb24nLCBkaXJlY3Rpb24pfTtcbiAgICAke2dldFJlc3BvbnNpdmVPbmVPZignZmxleC13cmFwJywgd3JhcCl9O1xuICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdqdXN0aWZ5LWNvbnRlbnQnLCBqdXN0aWZ5Q29udGVudCl9O1xuICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdhbGlnbi1pdGVtcycsIGFsaWduSXRlbXMpfTtcbiAgICAke2dldFJlc3BvbnNpdmVPbmVPZignYWxpZ24tY29udGVudCcsIGFsaWduQ29udGVudCl9O1xuICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdnYXAnLCBnYXApfTtcbiAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnY29sdW1uLWdhcCcsIGNvbHVtbkdhcCl9O1xuICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdyb3ctZ2FwJywgcm93R2FwKX07XG4gIGB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgZGlyZWN0aW9uID0gJ3JvdycsXG4gICAgICB3cmFwID0gJ3dyYXAnLFxuICAgICAganVzdGlmeUNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgYWxpZ25JdGVtcyA9ICdzdGFydCcsXG4gICAgICBhbGlnbkNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgZ2FwLFxuICAgICAgY29sdW1uR2FwLFxuICAgICAgcm93R2FwLFxuICAgICAgY2hpbGRyZW4sXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPFJvb3RcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIGRpcmVjdGlvbj17ZGlyZWN0aW9ufVxuICAgICAgICB3cmFwPXt3cmFwfVxuICAgICAgICBqdXN0aWZ5Q29udGVudD17anVzdGlmeUNvbnRlbnR9XG4gICAgICAgIGFsaWduSXRlbXM9e2FsaWduSXRlbXN9XG4gICAgICAgIGFsaWduQ29udGVudD17YWxpZ25Db250ZW50fVxuICAgICAgICBnYXA9e2dhcH1cbiAgICAgICAgY29sdW1uR2FwPXtjb2x1bW5HYXB9XG4gICAgICAgIHJvd0dhcD17cm93R2FwfVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvUm9vdD5cbiAgICApO1xuICB9LFxuKTtcblxuRmxleC5wcm9wVHlwZXMgPSBmbGV4UHJvcHM7XG4iXX0= */"));
+
+export var Flex = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? 'row' : _ref2$direction,
+      _ref2$wrap = _ref2.wrap,
+      wrap = _ref2$wrap === void 0 ? 'wrap' : _ref2$wrap,
+      _ref2$justifyContent = _ref2.justifyContent,
+      justifyContent = _ref2$justifyContent === void 0 ? 'start' : _ref2$justifyContent,
+      _ref2$alignItems = _ref2.alignItems,
+      alignItems = _ref2$alignItems === void 0 ? 'start' : _ref2$alignItems,
+      _ref2$alignContent = _ref2.alignContent,
+      alignContent = _ref2$alignContent === void 0 ? 'start' : _ref2$alignContent,
+      gap = _ref2.gap,
+      columnGap = _ref2.columnGap,
+      rowGap = _ref2.rowGap,
+      children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return ___EmotionJSX(Root, _extends({
+    ref: ref,
+    direction: direction,
+    wrap: wrap,
+    justifyContent: justifyContent,
+    alignItems: alignItems,
+    alignContent: alignContent,
+    gap: gap,
+    columnGap: columnGap,
+    rowGap: rowGap
+  }, props), children);
+});
+Flex.propTypes = flexProps;

package/es/components/stack.js

@@ -15,23 +15,24 @@ import { getResponsiveSpace } from '../utilities';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { types } from '../types';
+import { Box } from './box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+var Root = /*#__PURE__*/_styled(Box, process.env.NODE_ENV === "production" ? {
   target: "e17bgatr0"
 } : {
   target: "e17bgatr0",
-  label: "Wrapper"
+  label: "Root"
 })("&>*+*{", function (p) {
   return getResponsiveSpace('margin-top', p.gap);
-}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N0YWNrLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvc3RhY2suanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgJiA+ICogKyAqIHtcbiAgICAke3AgPT4gZ2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tdG9wJywgcC5nYXApfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFN0YWNrID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgZ2FwLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFdyYXBwZXIgcmVmPXtyZWZ9IGdhcD17Z2FwfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9XcmFwcGVyPlxuKSk7XG5cblN0YWNrLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBnYXA6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbn07XG4iXX0= */"));
+}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N0YWNrLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPd0IiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvc3RhY2suanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi9ib3gnO1xuXG5jb25zdCBSb290ID0gc3R5bGVkKEJveClgXG4gICYgPiAqICsgKiB7XG4gICAgJHtwID0+IGdldFJlc3BvbnNpdmVTcGFjZSgnbWFyZ2luLXRvcCcsIHAuZ2FwKX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdGFjayA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIGdhcCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDxSb290IHJlZj17cmVmfSBnYXA9e2dhcH0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvUm9vdD5cbikpO1xuXG5TdGFjay5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgZ2FwOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG59O1xuIl19 */"));
 
 export var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       gap = _ref.gap,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return ___EmotionJSX(Wrapper, _extends({
+  return ___EmotionJSX(Root, _extends({
     ref: ref,
     gap: gap
   }, props), children);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "9.10.1",
+  "version": "9.11.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",