@flodesk/grain 2.13.0 → 2.15.0

package/es/components/arrange.js

@@ -30,7 +30,8 @@ var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alig
 var _templateObject;
 
 var __jsx = _react.default.createElement;
-var Wrapper = (0, _styled.default)(_box.Box)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  ", ";\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) {
+
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  ", ";\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.columns && "grid-auto-flow: ".concat(p.autoFlow);
 }, function (p) {
   return (0, _utilities.getSpace)(p.gap);

package/es/components/icon.js

@@ -17,37 +17,52 @@ 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,
+      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": [],
@@ -94,6 +109,14 @@ Icon.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "hasEvenBoundary": {
+      "type": {
+        "name": "custom",
+        "raw": "PropTypes.boolean"
+      },
+      "required": false,
+      "description": ""
+    },
     "color": {
       "type": {
         "name": "union",

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/icons/icon-align-center.js

@@ -38,18 +38,11 @@ var IconAlignCenter = function IconAlignCenter(props) {
     viewBox: "0 0 20 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), __jsx("rect", {
-    x: 1,
-    y: 7,
-    width: 18,
-    height: 18,
-    rx: 1,
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
-  }), __jsx("path", {
-    fill: "currentColor",
-    d: "M9 4h2v24H9z"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 4H9v2H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7v2h2v-2h7a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7V4ZM9 8H2v16h7V8Zm2 16V8h7v16h-7Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-chart.js

@@ -39,9 +39,10 @@ var IconChart = function IconChart(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    stroke: "currentColor",
-    strokeWidth: 2,
-    d: "M16 9h7v18h-7zM8 5h8v22H8zM1 18h7v9H1z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7 4h10v4h7v20H0V17h7V4Zm2 13v9h6V6H9v11Zm-2 2H2v7h5v-7Zm15 7h-5V10h5v16Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-chevron-horizontal.js

@@ -0,0 +1,54 @@
+"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 IconChevronHorizontal = function IconChevronHorizontal(props) {
+  return __jsx("svg", (0, _extends2.default)({
+    viewBox: "0 0 24 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), __jsx("path", {
+    d: "M8.7 8.75L1.45 16l7.25 7.25M15.3 23.25L22.55 16 15.3 8.75",
+    stroke: "currentColor",
+    strokeWidth: 2
+  }));
+};
+
+IconChevronHorizontal.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconChevronHorizontal"
+};
+var _default = IconChevronHorizontal;
+exports.default = _default;

package/es/icons/icon-crop.js

@@ -39,13 +39,10 @@ var IconCrop = function IconCrop(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M5 4v18a1 1 0 0 0 1 1h18",
-    stroke: "currentColor",
-    strokeWidth: 2
-  }), __jsx("path", {
-    d: "M0 9h18a1 1 0 0 1 1 1v18",
-    stroke: "currentColor",
-    strokeWidth: 2
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 10v12a2 2 0 0 0 2 2h12v4h2v-4h4v-2h-4V10a2 2 0 0 0-2-2H6V4H4v4H0v2h4Zm2 0v12h12V10H6Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-cross.js

@@ -38,18 +38,12 @@ var IconCross = function IconCross(props) {
     viewBox: "0 0 20 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), __jsx("g", {
-    clipPath: "url(#Cross_svg__a)",
-    stroke: "currentColor",
-    strokeWidth: 2
-  }, __jsx("path", {
-    d: "M19 7 1 25M1 7l18 18"
-  })), __jsx("defs", null, __jsx("clipPath", {
-    id: "Cross_svg__a"
-  }, __jsx("path", {
-    fill: "#fff",
-    d: "M0 0h20v32H0z"
-  }))));
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m10 17.414 8.293 8.293 1.414-1.414L11.414 16l8.293-8.293-1.414-1.414L10 14.586 1.707 6.293.293 7.707 8.586 16 .293 24.293l1.414 1.414L10 17.414Z",
+    fill: "currentColor"
+  }));
 };
 
 IconCross.__docgenInfo = {

package/es/icons/icon-file.js

@@ -39,15 +39,10 @@ var IconFile = function IconFile(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M1 4c0-.552.456-1 1.008-1H12l7 7v18a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4Z",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round"
-  }), __jsx("path", {
-    d: "M11 4v7h7",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.008 2A2.007 2.007 0 0 0 0 4v24a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9.586l-.293-.293-7-7L12.414 2H2.008ZM2 28V4.004A.017.017 0 0 1 2.005 4H10v8h8v16H2Zm15.586-18L12 4.414V10h5.586Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-folder-add.js

@@ -39,16 +39,13 @@ var IconFolderAdd = function IconFolderAdd(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M8 3H1v21a1 1 0 001 1h24a1 1 0 001-1V8a1 1 0 00-1-1H10L8 3z",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
+    d: "M1 3V2H0v1h1Zm7 0 .894-.447L8.618 2H8v1Zm2 4-.894.447.276.553H10V7ZM1 4h7V2H1v2Zm6.106-.553 2 4 1.788-.894-2-4-1.788.894ZM2 11V3H0v8h2Zm8-3h16V6H10v2Zm16 0v3h2V8h-2ZM0 11v13h2V11H0Zm2 15h24v-2H2v2Zm26-2V11h-2v13h2Zm-2 2a2 2 0 0 0 2-2h-2v2ZM0 24a2 2 0 0 0 2 2v-2H0ZM26 8h2a2 2 0 0 0-2-2v2Z",
+    fill: "currentColor"
   }), __jsx("path", {
-    fill: "currentColor",
-    d: "M8 15h12v2H8z"
-  }), __jsx("path", {
-    fill: "currentColor",
-    d: "M13 10h2v12h-2z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15 10h-2v5H8v2h5v5h2v-5h5v-2h-5v-5Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-folder.js

@@ -39,10 +39,8 @@ var IconFolder = function IconFolder(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M8 3H1v21a1 1 0 001 1h24a1 1 0 001-1V8a1 1 0 00-1-1H10L8 3z",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
+    d: "M1 3V2H0v1h1Zm7 0 .894-.447L8.618 2H8v1Zm2 4-.894.447.276.553H10V7ZM1 4h7V2H1v2Zm6.106-.553 2 4 1.788-.894-2-4-1.788.894ZM2 11V3H0v8h2Zm8-3h16V6H10v2Zm16 0v3h2V8h-2ZM0 11v13h2V11H0Zm2 15h24v-2H2v2Zm26-2V11h-2v13h2Zm-2 2a2 2 0 0 0 2-2h-2v2ZM0 24a2 2 0 0 0 2 2v-2H0ZM26 8h2a2 2 0 0 0-2-2v2Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-globe.js

@@ -38,20 +38,11 @@ var IconGlobe = function IconGlobe(props) {
     viewBox: "0 0 28 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), __jsx("circle", {
-    cx: 14,
-    cy: 16,
-    r: 13,
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), __jsx("path", {
-    d: "M22 16c0 3.703-.967 7.01-2.477 9.359C18.006 27.719 16.03 29 14 29s-4.006-1.281-5.523-3.641C6.967 23.009 6 19.703 6 16c0-3.703.967-7.01 2.477-9.359C9.994 4.281 11.97 3 14 3s4.006 1.281 5.523 3.641C21.033 8.991 22 12.297 22 16ZM14 3v26M27 16H1",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13 17v10.868c-1.273-.336-2.57-1.32-3.682-3.05C8.06 22.859 7.181 20.125 7.025 17H13Zm2 0v10.868c1.273-.336 2.57-1.32 3.682-3.05 1.259-1.959 2.137-4.693 2.293-7.818H15Zm5.975-2H15V4.132c1.273.336 2.57 1.32 3.682 3.05 1.259 1.959 2.137 4.693 2.293 7.818Zm2.002 2c-.168 3.706-1.263 7.014-2.928 9.366A12 12 0 0 0 25.96 17h-2.982Zm2.982-2h-2.982c-.168-3.706-1.263-7.014-2.928-9.366A12 12 0 0 1 25.96 15ZM28 16c0 7.732-6.268 14-14 14S0 23.732 0 16 6.268 2 14 2s14 6.268 14 14ZM2.041 17a12 12 0 0 0 5.91 9.366C6.286 24.014 5.19 20.706 5.023 17H2.04Zm2.982-2H2.04a12 12 0 0 1 5.91-9.366C6.286 7.986 5.19 11.294 5.023 15Zm2.002 0c.156-3.125 1.034-5.859 2.293-7.818 1.112-1.73 2.41-2.714 3.682-3.05V15H7.025Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-image.js

@@ -38,25 +38,11 @@ var IconImage = function IconImage(props) {
     viewBox: "0 0 28 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), __jsx("rect", {
-    x: 1,
-    y: 7,
-    width: 26,
-    height: 18,
-    rx: 1,
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
-  }), __jsx("path", {
-    d: "M1 21l9.182-8 13.182 12.111",
-    stroke: "currentColor",
-    strokeWidth: 2
-  }), __jsx("circle", {
-    cx: 21,
-    cy: 13,
-    r: 3,
-    stroke: "currentColor",
-    strokeWidth: 2
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 8a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8Zm26 0H2v10.802l7.525-6.556.675-.588.658.606L23.632 24H26V8ZM2 24v-2.545l8.164-7.113L20.676 24H2Zm17-11a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-mail.js

@@ -38,20 +38,11 @@ var IconMail = function IconMail(props) {
     viewBox: "0 0 28 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), __jsx("rect", {
-    x: 1,
-    y: 7,
-    width: 26,
-    height: 18,
-    rx: 1,
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
-  }), __jsx("path", {
-    d: "m2.5 8.5 11.5 10 11.5-10",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H2Zm22.551 2H3.449L14 17.175 24.551 8ZM2 9.39V24h24V9.39l-11.344 9.865-.656.57-.656-.57L2 9.39Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-pencil.js

@@ -39,14 +39,10 @@ var IconPencil = function IconPencil(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M1 27v-5L14 9l5 5L6 27H1Z",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round"
-  }), __jsx("path", {
-    d: "m14.25 8.75 3.293-3.293a1 1 0 0 1 1.414 0l3.586 3.586a1 1 0 0 1 0 1.414L19.25 13.75",
-    stroke: "currentColor",
-    strokeWidth: 2
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.664 4.75a2 2 0 0 0-2.828 0L14 7.586l-.457.457-.25.25-13 13-.293.293V28h6.414l.293-.293 13-13 .25-.25.457-.457 2.836-2.836a2 2 0 0 0 0-2.828L19.664 4.75ZM19 12.586l2.836-2.836-3.586-3.586L15.414 9 19 12.586ZM2 26v-3.586l12-12L17.586 14l-12 12H2Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-plus.js

@@ -39,11 +39,10 @@ var IconPlus = function IconPlus(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    fill: "currentColor",
-    d: "M0 15h20v2H0z"
-  }), __jsx("path", {
-    fill: "currentColor",
-    d: "M9 6h2v20H9z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 6H9v9H0v2h9v9h2v-9h9v-2h-9V6Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-share.js

@@ -39,14 +39,10 @@ var IconShare = function IconShare(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M23 21.111V26a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6c0-.552.446-1 .999-1h4.89",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
-  }), __jsx("path", {
-    d: "M12 5h11v11M9 19 23 5",
-    stroke: "currentColor",
-    strokeWidth: 2
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 6v20h20v-5.889h2V26a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6c0-1.103.893-2 1.999-2H7.889v2H2Zm10.03 0H12V4H22.999L23 5V4h1v12h-2V7.414L9.707 19.707l-1.414-1.414L20.586 6H12.029Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/icon-smile.js

@@ -43,11 +43,9 @@ var IconSmile = function IconSmile(props) {
     cy: 16,
     r: 13,
     stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeWidth: 2
   }), __jsx("path", {
-    d: "M20.5 18.598A6.998 6.998 0 0114 23a7 7 0 01-6.5-4.402",
+    d: "M20.5 18.598A6.998 6.998 0 0 1 14 23a7 7 0 0 1-6.5-4.402",
     stroke: "currentColor",
     strokeWidth: 2,
     strokeLinecap: "round",

package/es/icons/icon-switch.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 IconSwitch = function IconSwitch(props) {
+  return __jsx("svg", (0, _extends2.default)({
+    viewBox: "0 0 24 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), __jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.993 2.043l-7.25 7.25L.036 10l.707.707 7.25 7.25 1.414-1.414L3.864 11H24V9H3.864l5.543-5.543-1.414-1.414zm15.264 20.664l-7.25 7.25-1.414-1.414L20.136 23H0v-2h20.136l-5.543-5.543 1.414-1.414 7.25 7.25.707.707-.707.707z",
+    fill: "currentColor"
+  }));
+};
+
+IconSwitch.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "IconSwitch"
+};
+var _default = IconSwitch;
+exports.default = _default;

package/es/icons/icon-trash.js

@@ -39,19 +39,10 @@ var IconTrash = function IconTrash(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M3 11v17a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V11",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
-  }), __jsx("path", {
-    d: "M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3",
-    stroke: "currentColor",
-    strokeWidth: 2
-  }), __jsx("path", {
-    d: "M1 8a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v3H1V8Z",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "square"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2h6a2 2 0 0 1 2 2v4h-2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V12H0V8a2 2 0 0 1 2-2h6V4Zm2 2h4V4h-4v2Zm-8 4h20V8H2v2Zm18 2H4v16h16V12Z",
+    fill: "currentColor"
   }));
 };
 

package/es/icons/index.js

@@ -55,6 +55,12 @@ Object.defineProperty(exports, "IconBrowser", {
     return _iconBrowser.default;
   }
 });
+Object.defineProperty(exports, "IconChart", {
+  enumerable: true,
+  get: function get() {
+    return _iconChart.default;
+  }
+});
 Object.defineProperty(exports, "IconCheck", {
   enumerable: true,
   get: function get() {
@@ -67,6 +73,12 @@ Object.defineProperty(exports, "IconChevronDown", {
     return _iconChevronDown.default;
   }
 });
+Object.defineProperty(exports, "IconChevronHorizontal", {
+  enumerable: true,
+  get: function get() {
+    return _iconChevronHorizontal.default;
+  }
+});
 Object.defineProperty(exports, "IconChevronLeft", {
   enumerable: true,
   get: function get() {
@@ -229,6 +241,12 @@ Object.defineProperty(exports, "IconSmile", {
     return _iconSmile.default;
   }
 });
+Object.defineProperty(exports, "IconSwitch", {
+  enumerable: true,
+  get: function get() {
+    return _iconSwitch.default;
+  }
+});
 Object.defineProperty(exports, "IconTextAlignCenter", {
   enumerable: true,
   get: function get() {
@@ -265,12 +283,6 @@ Object.defineProperty(exports, "IconUndo", {
     return _iconUndo.default;
   }
 });
-Object.defineProperty(exports, "IconChart", {
-  enumerable: true,
-  get: function get() {
-    return _iconChart.default;
-  }
-});
 
 var _iconAlignCenter = _interopRequireDefault(require("./icon-align-center"));
 
@@ -288,10 +300,14 @@ var _iconArrowUp = _interopRequireDefault(require("./icon-arrow-up"));
 
 var _iconBrowser = _interopRequireDefault(require("./icon-browser"));
 
+var _iconChart = _interopRequireDefault(require("./icon-chart"));
+
 var _iconCheck = _interopRequireDefault(require("./icon-check"));
 
 var _iconChevronDown = _interopRequireDefault(require("./icon-chevron-down"));
 
+var _iconChevronHorizontal = _interopRequireDefault(require("./icon-chevron-horizontal"));
+
 var _iconChevronLeft = _interopRequireDefault(require("./icon-chevron-left"));
 
 var _iconChevronRight = _interopRequireDefault(require("./icon-chevron-right"));
@@ -346,6 +362,8 @@ var _iconShare = _interopRequireDefault(require("./icon-share"));
 
 var _iconSmile = _interopRequireDefault(require("./icon-smile"));
 
+var _iconSwitch = _interopRequireDefault(require("./icon-switch"));
+
 var _iconTextAlignCenter = _interopRequireDefault(require("./icon-text-align-center"));
 
 var _iconTextAlignLeft = _interopRequireDefault(require("./icon-text-align-left"));
@@ -356,6 +374,4 @@ var _iconTrash = _interopRequireDefault(require("./icon-trash"));
 
 var _iconType = _interopRequireDefault(require("./icon-type"));
 
-var _iconUndo = _interopRequireDefault(require("./icon-undo"));
-
-var _iconChart = _interopRequireDefault(require("./icon-chart"));
+var _iconUndo = _interopRequireDefault(require("./icon-undo"));

package/package.json

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