@flodesk/grain 2.14.1 → 2.17.0

package/es/components/button.js

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-require("core-js/modules/es.array.concat.js");
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _utilities = require("../utilities");
@@ -27,38 +25,37 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "tag", "variant", "isDisabled", "icon"];
+var _types = require("../types");
+
+var _excluded = ["children", "variant", "isDisabled", "icon"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var __jsx = _react.default.createElement;
-var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-buttonTextBoxPaddingX-m: 16px;\n  --grn-color-buttonBorder: var(--grn-color-fade4);\n  --grn-color-buttonBorder-hover: var(--grn-color-fade6);\n  --grn-color-buttonBorder-active: var(--grn-color-grey8);\n"])));
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-paddingX-m: 16px;\n  --grn-borderColor: var(--grn-color-fade4);\n  --grn-borderColor-hover: var(--grn-color-fade6);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
 var variants = {
-  neutral: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-color-buttonBorder);\n\n    &:hover {\n      border-color: var(--grn-color-buttonBorder-hover);\n    }\n    &:active {\n      border-color: var(--grn-color-buttonBorder-active);\n    }\n  "]))),
+  neutral: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-borderColor);\n\n    &:hover {\n      border-color: var(--grn-borderColor-hover);\n    }\n    &:active {\n      border-color: var(--grn-borderColor-active);\n    }\n  "]))),
   primary: (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: ", ";\n    border-color: transparent;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: black;\n    }\n  "])), (0, _utilities.getColor)('accent'), (0, _utilities.getColor)('grey7'), (0, _utilities.getColor)('grey2'))
 };
 
-var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  // border-radius: 3px;\n  transition: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-buttonTextBoxPaddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  ", ";\n\n  ", ";\n\n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n"])), variables, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), function (p) {
+var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  transition: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  ", ";\n  \n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n  \n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), function (p) {
   return !p.isDisabled && variants[p.variant];
-}, function (p) {
-  return p.isDisabled && "\n    color: ".concat((0, _utilities.getColor)('disabledContent'), ";\n    background-color: ").concat((0, _utilities.getColor)('disabledBackground'), ";\n    border-color: transparent;\n    cursor: default;\n  ");
-}, (0, _utilities.getTransition)('fast'));
+}, (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'), (0, _utilities.getColor)('disabledBackground'));
 
 var Button = function Button(_ref) {
   var children = _ref.children,
-      tag = _ref.tag,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
       isDisabled = _ref.isDisabled,
       icon = _ref.icon,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return __jsx(Wrapper, (0, _extends2.default)({
-    as: tag,
     variant: variant,
-    isDisabled: isDisabled,
+    disabled: isDisabled,
     icon: icon
   }, props), icon && __jsx(_components.Icon, {
-    icon: icon
+    icon: icon,
+    color: "currentColor"
   }), children);
 };
 
@@ -93,6 +90,13 @@ Button.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
     "onClick": {
       "type": {
         "name": "func"

package/es/components/icon-button.js

@@ -0,0 +1,115 @@
+"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.IconButton = 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 _components = require("../components");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react2 = require("@emotion/react");
+
+var _types = require("../types");
+
+var _excluded = ["children", "isDisabled", "icon", "color"];
+
+var _templateObject, _templateObject2;
+
+var __jsx = _react.default.createElement;
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
+
+var Wrapper = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  width: var(--grn-clearButtonHeight-m);\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-borderColor-hover);\n  }\n  \n  &:active {\n    transition: 0s;\n    border-color: var(--grn-borderColor-active);\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n  }\n"])), variables, (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'));
+
+var IconButton = function IconButton(_ref) {
+  var children = _ref.children,
+      isDisabled = _ref.isDisabled,
+      icon = _ref.icon,
+      color = _ref.color,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    disabled: isDisabled,
+    icon: icon,
+    color: color
+  }, props), icon && __jsx(_components.Icon, {
+    icon: icon,
+    color: "currentColor"
+  }), children && children);
+};
+
+exports.IconButton = IconButton;
+IconButton.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconButton",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isDisabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "color": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "enum",
+          "value": [{
+            "value": "\"greys\"",
+            "computed": false
+          }, {
+            "value": "\"fades\"",
+            "computed": false
+          }, {
+            "value": "\"baseColors\"",
+            "computed": false
+          }, {
+            "value": "\"semanticColors\"",
+            "computed": false
+          }]
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/components/icon.js

@@ -17,37 +17,53 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _utilities = require("../utilities");
 
+var _propTypes = require("prop-types");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _types = require("../types");
 
-var _excluded = ["icon", "size", "color"];
+var _excluded = ["icon", "size", "color", "hasEvenBoundary"];
 
 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  color: ", ";\n  \n  svg {\n    display: block;\n    height: ", ";\n  }\n"])), function (p) {
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: ", ";\n  color: ", ";\n  \n  svg {\n    display: block;\n    height: ", ";\n    ", ";\n  }\n"])), function (p) {
+  return (0, _utilities.getColor)(p.color);
+}, function (p) {
   return (0, _utilities.getColor)(p.color);
 }, function (p) {
   return (0, _utilities.getIconSize)(p.size);
+}, function (p) {
+  return p.hasEvenBoundary && "width: ".concat((0, _utilities.getIconSize)(p.size));
 });
 
-var Icon = function Icon(_ref) {
+var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
-      color = _ref.color,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'body' : _ref$color,
+      hasEvenBoundary = _ref.hasEvenBoundary,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return __jsx(Wrapper, (0, _extends2.default)({
     size: size,
-    color: color
+    color: color,
+    hasEvenBoundary: hasEvenBoundary,
+    ref: ref
   }, props), icon && icon);
-};
+});
 
 exports.Icon = Icon;
+Icon.propTypes = {
+  icon: _propTypes.PropTypes.node,
+  hasEvenBoundary: _propTypes.PropTypes.boolean,
+  size: _types.types.iconSize,
+  color: _types.types.color
+};
 Icon.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -87,14 +103,11 @@ Icon.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "icon": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    },
     "color": {
+      "defaultValue": {
+        "value": "'body'",
+        "computed": false
+      },
       "type": {
         "name": "union",
         "value": [{
@@ -118,6 +131,21 @@ Icon.__docgenInfo = {
       },
       "required": false,
       "description": ""
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "hasEvenBoundary": {
+      "type": {
+        "name": "custom",
+        "raw": "PropTypes.boolean"
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

package/es/components/index.js

@@ -41,6 +41,30 @@ Object.defineProperty(exports, "Icon", {
     return _icon.Icon;
   }
 });
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _iconButton.IconButton;
+  }
+});
+Object.defineProperty(exports, "TextButton", {
+  enumerable: true,
+  get: function get() {
+    return _textButton.TextButton;
+  }
+});
+Object.defineProperty(exports, "ToggleGroup", {
+  enumerable: true,
+  get: function get() {
+    return _toggleGroup.ToggleGroup;
+  }
+});
+Object.defineProperty(exports, "ToggleOption", {
+  enumerable: true,
+  get: function get() {
+    return _toggleGroup.ToggleOption;
+  }
+});
 
 var _text = require("./text");
 
@@ -52,4 +76,10 @@ var _textInput = require("./text-input");
 
 var _arrange = require("./arrange");
 
-var _icon = require("./icon");
+var _icon = require("./icon");
+
+var _iconButton = require("./icon-button");
+
+var _textButton = require("./text-button");
+
+var _toggleGroup = require("./toggle-group");

package/es/components/text-button.js

@@ -0,0 +1,85 @@
+"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.TextButton = 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 _components = require("../components");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "isDisabled", "icon"];
+
+var _templateObject, _templateObject2;
+
+var __jsx = _react.default.createElement;
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-paddingX-m: 8px;\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
+
+var Wrapper = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0 var(--grn-paddingX-m);\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-radius: ", ";\n  font-weight: ", ";\n  transition: ", ";\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  \n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-borderColor-hover);\n  }\n  \n  &:active {\n    transition: 0s;\n    border-color: var(--grn-borderColor-active);\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n  }\n"])), variables, (0, _utilities.getRadius)('s'), (0, _utilities.getWeight)('medium'), (0, _utilities.getTransition)('slow'), (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'));
+
+var TextButton = function TextButton(_ref) {
+  var children = _ref.children,
+      isDisabled = _ref.isDisabled,
+      icon = _ref.icon,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(Wrapper, (0, _extends2.default)({
+    disabled: isDisabled,
+    icon: icon
+  }, props), icon && __jsx(_components.Icon, {
+    icon: icon
+  }), children && children);
+};
+
+exports.TextButton = TextButton;
+TextButton.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TextButton",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isDisabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/components/text-input.js

@@ -11,6 +11,8 @@ exports.TextInput = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -25,33 +27,59 @@ var _types = require("../types");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["value", "placeholder", "size", "label", "id"];
+var _box = require("./box");
+
+var _icon = require("./icon");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _excluded = ["value", "placeholder", "size", "label", "id", "icon"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var __jsx = _react.default.createElement;
 var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-fieldTextBoxPaddingX-s: 8px;\n  --grn-fieldTextBoxPaddingX-m: 12px;\n  --grn-color-fieldBorder: var(--grn-color-fade3);\n  --grn-color-fieldBorder-hover: var(--grn-color-fade6);\n"])));
-var inputSizes = {
-  s: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    height: var(--grn-textBoxHeight-s);\n    padding: 0 var(--grn-fieldTextBoxPaddingX-s);\n    border-radius: ", ";\n  "])), (0, _utilities.getRadius)('xs')),
-  m: (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: var(--grn-textBoxHeight-m);\n    padding: 0 var(--grn-fieldTextBoxPaddingX-m);\n    border-radius: ", ";\n  "])), (0, _utilities.getRadius)('s'))
+var inputSizesStyles = {
+  s: {
+    height: 'var(--grn-textBoxHeight-s)',
+    padding: '0 var(--grn-fieldTextBoxPaddingX-s)',
+    borderRadius: (0, _utilities.getRadius)('xs')
+  },
+  m: {
+    height: 'var(--grn-textBoxHeight-m)',
+    padding: '0 var(--grn-fieldTextBoxPaddingX-m)',
+    borderRadius: (0, _utilities.getRadius)('s')
+  }
 };
-var labelSizes = {
-  s: '2px',
-  m: 'xs'
+var sizesStyles = {
+  s: {
+    labelGap: 2,
+    iconOffset: 8,
+    iconTextGap: 4
+  },
+  m: {
+    labelGap: 4,
+    iconOffset: 12,
+    iconTextGap: 8
+  }
 };
 
-var Wrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  font-size: ", ";\n"])), variables, function (p) {
+var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  font-size: ", ";\n"])), variables, function (p) {
   return (0, _utilities.getTextSize)(p.size);
 });
 
-var Label = _styled.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin-bottom: ", ";\n"])), function (p) {
-  return (0, _utilities.getSpace)(labelSizes[p.size]);
+var Label = _styled.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin-bottom: ", "px;\n"])), function (p) {
+  return sizesStyles[p.size].labelGap;
 });
 
-var InputField = _styled.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition: ", ";\n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-selection);\n  }\n"])), (0, _utilities.getTransition)('slow'), function (p) {
-  return inputSizes[p.size];
+var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition: border-color ", ";\n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-selection);\n  }\n"])), (0, _utilities.getTransition)('slow'), function (p) {
+  return inputSizesStyles[p.size];
+}, function (p) {
+  return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");
 }, (0, _utilities.getColor)('grey5'), (0, _utilities.getTransition)('fast'));
 
+var IconSection = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  margin: auto;\n  left: ", "px;\n  top: 0; \n  bottom: 0;\n  height: fit-content;\n"])), function (p) {
+  return sizesStyles[p.size].iconOffset;
+});
+
 var TextInput = function TextInput(_ref) {
   var value = _ref.value,
       placeholder = _ref.placeholder,
@@ -59,20 +87,46 @@ var TextInput = function TextInput(_ref) {
       size = _ref$size === void 0 ? 'm' : _ref$size,
       label = _ref.label,
       id = _ref.id,
+      icon = _ref.icon,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var iconRef = _react.default.useRef(null);
+
+  var _React$useState = _react.default.useState(),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      iconWidth = _React$useState2[0],
+      setIconWidth = _React$useState2[1];
+
+  _react.default.useEffect(function () {
+    if (iconRef.current) {
+      setIconWidth(iconRef.current.getBoundingClientRect().width);
+    }
+  }, []);
+
+  var paddingLeft = icon && sizesStyles[size].iconOffset + iconWidth + sizesStyles[size].iconTextGap;
   return __jsx(Wrapper, {
     size: size,
     type: "text"
   }, label && __jsx(Label, {
     htmlFor: id,
     size: size
-  }, label), __jsx(InputField, (0, _extends2.default)({
+  }, label), __jsx(_box.Box, {
+    position: "relative"
+  }, icon && __jsx(IconSection, {
+    size: size
+  }, __jsx(_icon.Icon, {
+    ref: iconRef,
+    icon: icon,
+    size: size
+  })), __jsx(InputField, (0, _extends2.default)({
     value: value,
     placeholder: placeholder,
     size: size,
     label: label,
-    id: id
-  }, props)));
+    icon: icon,
+    id: id,
+    paddingLeft: paddingLeft
+  }, props))));
 };
 
 exports.TextInput = TextInput;
@@ -106,6 +160,13 @@ TextInput.__docgenInfo = {
       "required": true,
       "description": ""
     },
+    "placeholder": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "value": {
       "type": {
         "name": "string"
@@ -114,6 +175,18 @@ TextInput.__docgenInfo = {
       "description": ""
     },
     "label": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "node"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "icon": {
       "type": {
         "name": "node"
       },

package/es/components/toggle-group.js

@@ -0,0 +1,120 @@
+"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.ToggleGroup = exports.ToggleOption = 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 _ = require(".");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react2 = require("@emotion/react");
+
+var _types = require("../types");
+
+var _excluded = ["children", "icon", "isActive", "onClick"],
+    _excluded2 = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var __jsx = _react.default.createElement;
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n  --grn-width: calc(var(--grn-textBoxHeight-m) + 4px);\n"])));
+
+var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border: 1px solid var(--grn-color-border);\n  border-radius: var(--grn-radius-s);\n  width: fit-content;\n"])));
+
+var ItemWrapper = _styled.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  transition: ", ";\n  min-width: var(--grn-width);\n  height: var(--grn-textBoxHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n\n  ", ";\n  \n  & + .ToggleOption {\n    border-color: var(--grn-color-border);\n  }\n  \n  &:after {\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    ", ";\n  }\n\n  &:first-child {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n  \n  &:first-child:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n  \n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-body);\n    transition: ", ";\n  }\n"])), variables, (0, _utilities.getWeight)("medium"), (0, _utilities.getTransition)('slow'), function (p) {
+  return p.isActive && "\n    color: var(--grn-color-body);\n  ";
+}, function (p) {
+  return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";
+}, (0, _utilities.getTransition)('fast'));
+
+var ToggleOption = function ToggleOption(_ref) {
+  var children = _ref.children,
+      icon = _ref.icon,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(ItemWrapper, (0, _extends2.default)({
+    className: "ToggleOption",
+    isActive: isActive,
+    onClick: onClick
+  }, props), icon && __jsx(_.Icon, {
+    icon: icon,
+    color: "currentColor"
+  }), children && children);
+};
+
+exports.ToggleOption = ToggleOption;
+
+var ToggleGroup = function ToggleGroup(_ref2) {
+  var children = _ref2.children,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return __jsx(Wrapper, props, children);
+};
+
+exports.ToggleGroup = ToggleGroup;
+ToggleOption.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ToggleOption",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isActive": {
+      "type": {
+        "name": "custom",
+        "raw": "PropTypes.boolean"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+ToggleGroup.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ToggleGroup",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/icons/icon-download.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.default = void 0;
+
+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;
+
+var IconDownload = function IconDownload(props) {
+  return __jsx("svg", (0, _extends2.default)({
+    viewBox: "0 0 18 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.75 3v12.129l5.69-5.69L16.5 10.5l-6.44 6.44L9 18l-1.06-1.06L1.5 10.5l1.06-1.06 5.69 5.689V3h1.5zM0 15v4.5A1.5 1.5 0 001.5 21h15a1.5 1.5 0 001.5-1.5V15h-1.5v4.5h-15V15H0z",
+    fill: "currentColor"
+  }));
+};
+
+IconDownload.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconDownload"
+};
+var _default = IconDownload;
+exports.default = _default;

package/es/icons/icon-monitor.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.default = void 0;
+
+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;
+
+var IconMonitor = function IconMonitor(props) {
+  return __jsx("svg", (0, _extends2.default)({
+    viewBox: "0 0 21 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.5 3A1.5 1.5 0 000 4.5v12A1.5 1.5 0 001.5 18h18a1.5 1.5 0 001.5-1.5v-12A1.5 1.5 0 0019.5 3h-18zm0 1.5h18v12h-18v-12zm13.5 15H6V21h9v-1.5z",
+    fill: "currentColor"
+  }));
+};
+
+IconMonitor.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconMonitor"
+};
+var _default = IconMonitor;
+exports.default = _default;

package/es/icons/icon-phone.js

@@ -0,0 +1,60 @@
+"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.default = void 0;
+
+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;
+
+var IconPhone = function IconPhone(props) {
+  return __jsx("svg", (0, _extends2.default)({
+    viewBox: "0 0 12 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 4.5A1.5 1.5 0 011.5 3h9A1.5 1.5 0 0112 4.5v15a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 010 19.5v-15zm10.5 0h-9v15h9v-15z",
+    fill: "currentColor"
+  }), __jsx("circle", {
+    cx: 6,
+    cy: 17.25,
+    r: 0.75,
+    fill: "currentColor"
+  }));
+};
+
+IconPhone.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconPhone"
+};
+var _default = IconPhone;
+exports.default = _default;

package/es/icons/icon-tablet.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.default = void 0;
+
+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;
+
+var IconTablet = function IconTablet(props) {
+  return __jsx("svg", (0, _extends2.default)({
+    viewBox: "0 0 15 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.5 3A1.5 1.5 0 000 4.5v15A1.5 1.5 0 001.5 21h12a1.5 1.5 0 001.5-1.5v-15A1.5 1.5 0 0013.5 3h-12zm0 1.5h12v15h-12v-15zm9 12h-6V18h6v-1.5z",
+    fill: "currentColor"
+  }));
+};
+
+IconTablet.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconTablet"
+};
+var _default = IconTablet;
+exports.default = _default;

package/es/icons/icon-upload.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.default = void 0;
+
+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;
+
+var IconUpload = function IconUpload(props) {
+  return __jsx("svg", (0, _extends2.default)({
+    viewBox: "0 0 18 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.5 10.5l-6.44-6.44L9 3 7.94 4.06 1.5 10.5l1.06 1.06 5.69-5.689V18h1.5V5.871l5.69 5.69L16.5 10.5zM0 15v4.5A1.5 1.5 0 001.5 21h15a1.5 1.5 0 001.5-1.5V15h-1.5v4.5h-15V15H0z",
+    fill: "currentColor"
+  }));
+};
+
+IconUpload.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconUpload"
+};
+var _default = IconUpload;
+exports.default = _default;

package/es/icons/index.js

@@ -199,12 +199,24 @@ Object.defineProperty(exports, "IconMinus", {
     return _iconMinus.default;
   }
 });
+Object.defineProperty(exports, "IconMonitor", {
+  enumerable: true,
+  get: function get() {
+    return _iconMonitor.default;
+  }
+});
 Object.defineProperty(exports, "IconPencil", {
   enumerable: true,
   get: function get() {
     return _iconPencil.default;
   }
 });
+Object.defineProperty(exports, "IconPhone", {
+  enumerable: true,
+  get: function get() {
+    return _iconPhone.default;
+  }
+});
 Object.defineProperty(exports, "IconPlus", {
   enumerable: true,
   get: function get() {
@@ -247,6 +259,12 @@ Object.defineProperty(exports, "IconSwitch", {
     return _iconSwitch.default;
   }
 });
+Object.defineProperty(exports, "IconTablet", {
+  enumerable: true,
+  get: function get() {
+    return _iconTablet.default;
+  }
+});
 Object.defineProperty(exports, "IconTextAlignCenter", {
   enumerable: true,
   get: function get() {
@@ -283,6 +301,18 @@ Object.defineProperty(exports, "IconUndo", {
     return _iconUndo.default;
   }
 });
+Object.defineProperty(exports, "IconUpload", {
+  enumerable: true,
+  get: function get() {
+    return _iconUpload.default;
+  }
+});
+Object.defineProperty(exports, "IconDownload", {
+  enumerable: true,
+  get: function get() {
+    return _iconDownload.default;
+  }
+});
 
 var _iconAlignCenter = _interopRequireDefault(require("./icon-align-center"));
 
@@ -348,8 +378,12 @@ var _iconMail = _interopRequireDefault(require("./icon-mail"));
 
 var _iconMinus = _interopRequireDefault(require("./icon-minus"));
 
+var _iconMonitor = _interopRequireDefault(require("./icon-monitor"));
+
 var _iconPencil = _interopRequireDefault(require("./icon-pencil"));
 
+var _iconPhone = _interopRequireDefault(require("./icon-phone"));
+
 var _iconPlus = _interopRequireDefault(require("./icon-plus"));
 
 var _iconRedo = _interopRequireDefault(require("./icon-redo"));
@@ -364,6 +398,8 @@ var _iconSmile = _interopRequireDefault(require("./icon-smile"));
 
 var _iconSwitch = _interopRequireDefault(require("./icon-switch"));
 
+var _iconTablet = _interopRequireDefault(require("./icon-tablet"));
+
 var _iconTextAlignCenter = _interopRequireDefault(require("./icon-text-align-center"));
 
 var _iconTextAlignLeft = _interopRequireDefault(require("./icon-text-align-left"));
@@ -374,4 +410,8 @@ var _iconTrash = _interopRequireDefault(require("./icon-trash"));
 
 var _iconType = _interopRequireDefault(require("./icon-type"));
 
-var _iconUndo = _interopRequireDefault(require("./icon-undo"));
+var _iconUndo = _interopRequireDefault(require("./icon-undo"));
+
+var _iconUpload = _interopRequireDefault(require("./icon-upload"));
+
+var _iconDownload = _interopRequireDefault(require("./icon-download"));

package/es/styles/components-variables.css

@@ -1,4 +1,5 @@
 :root {
   --grn-textBoxHeight-s: 28px;
   --grn-textBoxHeight-m: 40px;
+  --grn-clearButtonHeight-m: 36px;
 }

package/es/types.js

@@ -32,6 +32,7 @@ var types = {
   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"])
+  gridContentPositions: _propTypes.default.oneOf(["start", "end", "center", "stretch", "space-around", "space-between", "space-evenly"]),
+  icon: _propTypes.default.node
 };
 exports.types = types;

package/package.json

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