@flodesk/grain 2.9.0 → 2.12.0

package/es/components/arrange.js

@@ -0,0 +1,290 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Arrange = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../utilities");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _types = require("../types");
+
+var _box = require("./box");
+
+var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alignItems", "justifyContent", "alignContent", "placeItems", "placeContent"];
+
+var _templateObject;
+
+var __jsx = _react.default.createElement;
+var Wrapper = (0, _styled.default)(_box.Box)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-auto-flow: ", ";\n  justify-content: start;\n  align-items: center;\n  gap: ", ";\n  grid-template-columns: ", ";\n  justify-items: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  align-content: ", ";\n  place-items: ", ";\n  place-content: ", ";\n"])), function (p) {
+  return p.autoFlow;
+}, function (p) {
+  return (0, _utilities.getSpace)(p.gap);
+}, function (p) {
+  return (0, _utilities.getGridColumns)(p.columns);
+}, function (p) {
+  return p.justifyItems;
+}, function (p) {
+  return p.alignItems;
+}, function (p) {
+  return p.justifyContent;
+}, function (p) {
+  return p.alignContent;
+}, function (p) {
+  return p.placeItems;
+}, function (p) {
+  return p.placeContent;
+});
+
+var Arrange = function Arrange(_ref) {
+  var children = _ref.children,
+      gap = _ref.gap,
+      columns = _ref.columns,
+      _ref$autoFlow = _ref.autoFlow,
+      autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
+      justifyItems = _ref.justifyItems,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      alignContent = _ref.alignContent,
+      placeItems = _ref.placeItems,
+      placeContent = _ref.placeContent,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    gap: gap,
+    columns: columns,
+    autoFlow: autoFlow
+  }, props), children);
+};
+
+exports.Arrange = Arrange;
+Arrange.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Arrange",
+  "props": {
+    "autoFlow": {
+      "defaultValue": {
+        "value": "'column'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"column\"",
+          "computed": false
+        }, {
+          "value": "\"row\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "gap": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"xs\"",
+            "computed": false
+          }, {
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "columns": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "array"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "justifyItems": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"start\"",
+          "computed": false
+        }, {
+          "value": "\"end\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"stretch\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "alignItems": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"start\"",
+          "computed": false
+        }, {
+          "value": "\"end\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"stretch\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "justifyContent": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"start\"",
+          "computed": false
+        }, {
+          "value": "\"end\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"stretch\"",
+          "computed": false
+        }, {
+          "value": "\"space-around\"",
+          "computed": false
+        }, {
+          "value": "\"space-between\"",
+          "computed": false
+        }, {
+          "value": "\"space-evenly\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "alignContent": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"start\"",
+          "computed": false
+        }, {
+          "value": "\"end\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"stretch\"",
+          "computed": false
+        }, {
+          "value": "\"space-around\"",
+          "computed": false
+        }, {
+          "value": "\"space-between\"",
+          "computed": false
+        }, {
+          "value": "\"space-evenly\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "placeItems": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"start\"",
+          "computed": false
+        }, {
+          "value": "\"end\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"stretch\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "placeContent": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"start\"",
+          "computed": false
+        }, {
+          "value": "\"end\"",
+          "computed": false
+        }, {
+          "value": "\"center\"",
+          "computed": false
+        }, {
+          "value": "\"stretch\"",
+          "computed": false
+        }, {
+          "value": "\"space-around\"",
+          "computed": false
+        }, {
+          "value": "\"space-between\"",
+          "computed": false
+        }, {
+          "value": "\"space-evenly\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/components/box.js

@@ -15,8 +15,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-require("core-js/modules/es.array.concat.js");
-
 var _utilities = require("../utilities");
 
 var _react = _interopRequireDefault(require("react"));
@@ -25,58 +23,60 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _types = require("../types");
 
-var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "height", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio"];
+var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "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", "overflow", "aspectRatio"];
 
 var _templateObject;
 
 var __jsx = _react.default.createElement;
 
-var getSpaceCss = function getSpaceCss(propertyName, propertyValue) {
-  if (propertyValue || propertyValue === 0) {
-    return "".concat(propertyName, ": ").concat((0, _utilities.getSpace)(propertyValue));
-  }
-};
-
-var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  position: ", ";\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  \n  padding:", ";\n  padding-top:", ";\n  padding-bottom:", ";\n  padding-left:", ";\n  padding-right:", ";\n  \n  margin:", ";\n  margin-top:", ";\n  margin-bottom:", ";\n  margin-left:", ";\n  margin-right:", ";\n  \n  top:", ";\n  bottom:", ";\n  left:", ";\n  right:", ";\n  \n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n\n  color: ", ";\n  background-color: ", ";\n  \n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
   return (0, _utilities.getBorder)(p.borderSide, p.borderWidth, p.borderColor);
 }, function (p) {
-  return getSpaceCss('padding', p.padding);
+  return (0, _utilities.getSpace)(p.padding);
 }, function (p) {
-  return getSpaceCss('padding-top', p.paddingTop);
+  return (0, _utilities.getSpace)(p.paddingTop);
 }, function (p) {
-  return getSpaceCss('padding-bottom', p.paddingBottom);
+  return (0, _utilities.getSpace)(p.paddingBottom);
 }, function (p) {
-  return getSpaceCss('padding-left', p.paddingLeft);
+  return (0, _utilities.getSpace)(p.paddingLeft);
 }, function (p) {
-  return getSpaceCss('padding-right', p.paddingRight);
+  return (0, _utilities.getSpace)(p.paddingRight);
 }, function (p) {
-  return getSpaceCss('margin', p.margin);
+  return (0, _utilities.getSpace)(p.margin);
 }, function (p) {
-  return getSpaceCss('margin-top', p.marginTop);
+  return (0, _utilities.getSpace)(p.marginTop);
 }, function (p) {
-  return getSpaceCss('margin-bottom', p.marginBottom);
+  return (0, _utilities.getSpace)(p.marginBottom);
 }, function (p) {
-  return getSpaceCss('margin-left', p.marginLeft);
+  return (0, _utilities.getSpace)(p.marginLeft);
 }, function (p) {
-  return getSpaceCss('margin-right', p.marginRight);
+  return (0, _utilities.getSpace)(p.marginRight);
 }, function (p) {
-  return getSpaceCss('top', p.top);
+  return (0, _utilities.getSpace)(p.top);
 }, function (p) {
-  return getSpaceCss('bottom', p.bottom);
+  return (0, _utilities.getSpace)(p.bottom);
 }, function (p) {
-  return getSpaceCss('left', p.left);
+  return (0, _utilities.getSpace)(p.left);
 }, function (p) {
-  return getSpaceCss('right', p.right);
+  return (0, _utilities.getSpace)(p.right);
 }, function (p) {
-  return p.position;
+  return (0, _utilities.getDimension)(p.width);
+}, function (p) {
+  return (0, _utilities.getDimension)(p.minWidth);
+}, function (p) {
+  return (0, _utilities.getDimension)(p.maxWidth);
+}, function (p) {
+  return (0, _utilities.getDimension)(p.height);
+}, function (p) {
+  return (0, _utilities.getDimension)(p.minHeight);
+}, function (p) {
+  return (0, _utilities.getDimension)(p.maxHeight);
 }, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
   return (0, _utilities.getColor)(p.backgroundColor);
 }, function (p) {
-  return (0, _utilities.getSpace)(p.width);
-}, function (p) {
-  return (0, _utilities.getSpace)(p.height);
+  return p.position;
 }, function (p) {
   return (0, _utilities.getRadius)(p.radius);
 }, function (p) {
@@ -95,7 +95,11 @@ var Box = function Box(_ref) {
       borderWidth = _ref.borderWidth,
       borderColor = _ref.borderColor,
       width = _ref.width,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
       height = _ref.height,
+      minHeight = _ref.minHeight,
+      maxHeight = _ref.maxHeight,
       radius = _ref.radius,
       padding = _ref.padding,
       paddingTop = _ref.paddingTop,
@@ -127,7 +131,11 @@ var Box = function Box(_ref) {
     borderWidth: borderWidth,
     borderColor: borderColor,
     width: width,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
     height: height,
+    minHeight: minHeight,
+    maxHeight: maxHeight,
     radius: radius,
     padding: padding,
     paddingTop: paddingY || paddingTop,
@@ -284,6 +292,30 @@ Box.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "minWidth": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "maxWidth": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "height": {
       "type": {
         "name": "union",
@@ -296,6 +328,30 @@ Box.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "minHeight": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "maxHeight": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "radius": {
       "type": {
         "name": "union",

package/es/components/icon.js

@@ -0,0 +1,94 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../utilities");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _types = require("../types");
+
+var _excluded = ["icon", "size"];
+
+var _templateObject;
+
+var __jsx = _react.default.createElement;
+
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: fit-content;\n  \n  svg {\n    display: block;\n    height: ", ";\n  }\n"])), function (p) {
+  return (0, _utilities.getIconSize)(p.size);
+});
+
+var Icon = function Icon(_ref) {
+  var icon = _ref.icon,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    size: size
+  }, props), icon && icon);
+};
+
+exports.Icon = Icon;
+Icon.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Icon",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"s\"",
+            "computed": false
+          }, {
+            "value": "\"m\"",
+            "computed": false
+          }, {
+            "value": "\"l\"",
+            "computed": false
+          }, {
+            "value": "\"xl\"",
+            "computed": false
+          }, {
+            "value": "\"xxl\"",
+            "computed": false
+          }]
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/components/index.js

@@ -29,6 +29,18 @@ Object.defineProperty(exports, "TextInput", {
     return _textInput.TextInput;
   }
 });
+Object.defineProperty(exports, "Arrange", {
+  enumerable: true,
+  get: function get() {
+    return _arrange.Arrange;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function get() {
+    return _icon.Icon;
+  }
+});
 
 var _text = require("./text");
 
@@ -36,4 +48,8 @@ var _box = require("./box");
 
 var _button = require("./button");
 
-var _textInput = require("./text-input");
+var _textInput = require("./text-input");
+
+var _arrange = require("./arrange");
+
+var _icon = require("./icon");

package/es/icons/icon-arrow-right.js

@@ -0,0 +1,55 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconArrowRight = IconArrowRight;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __jsx = React.createElement;
+
+function IconArrowRight(props) {
+  return __jsx("svg", (0, _extends2.default)({
+    viewBox: "0 0 22 32",
+    fill: "none"
+  }, props), __jsx("path", {
+    fill: "#fff",
+    d: "M0 0h22v32H0z"
+  }), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20.914 15l-9.957-9.957-1.414 1.414L18.086 15H0v2h18.086l-8.543 8.543 1.414 1.414L20.914 17H21v-.086l.914-.914-.914-.914V15h-.086z",
+    fill: "#000"
+  }));
+}
+
+IconArrowRight.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconArrowRight"
+};

package/es/icons/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IconArrowRight", {
+  enumerable: true,
+  get: function get() {
+    return _iconArrowRight.IconArrowRight;
+  }
+});
+
+var _iconArrowRight = require("./icon-arrow-right");

package/es/index.js

@@ -35,4 +35,18 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 
+var _icons = require("./icons");
+
+Object.keys(_icons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _icons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _icons[key];
+    }
+  });
+});
+
 var _variables = require("./variables");

package/es/styles/variables.css

@@ -10,6 +10,14 @@
   --grn-text-xxl: 30px;
 }
 
+:root {
+  --grn-icon-s: calc(var(--grn-unit) * 2.5);
+  --grn-icon-m: calc(var(--grn-unit) * 3);
+  --grn-icon-l: calc(var(--grn-unit) * 4);
+  --grn-icon-xl: calc(var(--grn-unit) * 5);
+  --grn-icon-xxl: calc(var(--grn-unit) * 6);
+}
+
 :root {
   --grn-weight-normal: 400;
   --grn-weight-medium: 500;

package/es/types.js

@@ -24,9 +24,14 @@ var types = {
   shadow: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.shadows)), _propTypes.default.string]),
   position: _propTypes.default.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
   textSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.textSizes)), _propTypes.default.number, _propTypes.default.string]),
+  iconSize: _propTypes.default.oneOfType([_propTypes.default.oneOf(Object.keys(_variables.vars.iconSizes)), _propTypes.default.number, _propTypes.default.string]),
   weight: _propTypes.default.oneOf(Object.keys(_variables.vars.weights)),
   textAlign: _propTypes.default.oneOf(["left", "center", "right"]),
   overflow: _propTypes.default.oneOf(["visible", "hidden", "scroll", "auto"]),
-  fieldSize: _propTypes.default.oneOf(["s", "m"])
+  fieldSize: _propTypes.default.oneOf(["s", "m"]),
+  columns: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string]),
+  autoFlow: _propTypes.default.oneOf(["column", "row"]),
+  gridItemsAlignments: _propTypes.default.oneOf(["start", "end", "center", "stretch"]),
+  gridContentPositions: _propTypes.default.oneOf(["start", "end", "center", "stretch", "space-around", "space-between", "space-evenly"])
 };
 exports.types = types;

package/es/utilities.js

@@ -23,12 +23,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBorder = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
+exports.getBorder = exports.getGridColumns = exports.getIconSize = exports.getDimension = exports.getSpace = exports.getTransition = exports.getRadius = exports.getWeight = exports.getTextSize = exports.getShadow = exports.getColor = exports.getCssVar = exports.getCssVarCore = exports.isBrowser = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 require("core-js/modules/es.array.concat.js");
 
+require("core-js/modules/es.array.map.js");
+
 var _variables = require("./variables");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -54,6 +56,18 @@ var u = function u(amount) {
   return "calc(var(--grn-unit) * ".concat(amount, ")");
 };
 
+var isNumber = function isNumber(value) {
+  return typeof value === "number";
+};
+
+var isString = function isString(value) {
+  return typeof value === "string";
+};
+
+var isArray = function isArray(value) {
+  return Array.isArray(value);
+};
+
 var getColor = function getColor(color) {
   if (color in _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _variables.vars.colors.baseColors), _variables.vars.colors.greys), _variables.vars.colors.semanticColors), _variables.vars.colors.fades)) {
     return getCssVar("color", color);
@@ -113,20 +127,67 @@ var getTransition = function getTransition(transition) {
 exports.getTransition = getTransition;
 
 var getSpace = function getSpace(space) {
-  if (isNaN(space)) {
-    if (space in _variables.vars.spaces) {
-      return getCssVar("space", space);
-    }
+  if (space === 0) return space;
 
-    return space;
+  if (isNumber(space)) {
+    return u(space);
   }
 
-  if (space === 0) return space;
-  return u(space);
+  if (space in _variables.vars.spaces) {
+    return getCssVar("space", space);
+  }
+
+  if (isString(space)) {
+    return space;
+  }
 };
 
 exports.getSpace = getSpace;
 
+var getDimension = function getDimension(dimension) {
+  if (dimension === 0) return dimension;
+
+  if (isNumber(dimension)) {
+    return u(dimension);
+  }
+
+  if (isString(dimension)) {
+    return dimension;
+  }
+};
+
+exports.getDimension = getDimension;
+
+var getIconSize = function getIconSize(size) {
+  if (size === 0) return size;
+
+  if (size in _variables.vars.iconSizes) {
+    return getCssVar("icon", size);
+  }
+
+  if (isNumber(size) || isString(size)) {
+    return getDimension(size);
+  }
+};
+
+exports.getIconSize = getIconSize;
+
+var getGridColumns = function getGridColumns(columns) {
+  if (columns) {
+    if (isArray(columns)) {
+      return columns.map(function (column) {
+        return getDimension(column);
+      }).join(" ");
+    }
+
+    if (isString(columns)) {
+      return columns;
+    }
+  }
+};
+
+exports.getGridColumns = getGridColumns;
+
 var getBorder = function getBorder(borderSide) {
   var borderWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1px";
   var borderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "border";

package/es/variables.js

@@ -16,6 +16,13 @@ var vars = {
     xl: "xl",
     xxl: "xxl"
   },
+  iconSizes: {
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl",
+    xxl: "xxl"
+  },
   spaces: {
     xs: "xs",
     s: "s",

package/package.json

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