@flodesk/grain 11.38.1 → 11.40.0

package/es/components/icon-button.js

@@ -1,27 +1,50 @@
 import _styled from "@emotion/styled/base";
-const _excluded = ["children", "isDisabled", "icon", "color", "variant", "type", "isActive", "tag"];
+const _excluded = ["children", "isDisabled", "icon", "color", "variant", "type", "isActive", "tag", "trimSide"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+import "core-js/modules/web.dom-collections.iterator.js";
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import { Icon } from './icon';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { types } from '../types';
 import { getClearButtonStyles } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
+const getTrimSideStyles = _ref => {
+  let {
+    iconWidth,
+    trimSide
+  } = _ref;
+  const offset = "calc((var(--grn-clearbutton-height) - ".concat(iconWidth, "px) / -2)");
+  if (!trimSide) return '';
+  if (trimSide === 'left') return "margin-left: ".concat(offset, ";");
+  if (trimSide === 'right') return "margin-right: ".concat(offset, ";");
+  if (trimSide === 'x') return "margin-inline: ".concat(offset, ";");
+};
+
 const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
   target: "evb8g3z0"
 } : {
   target: "evb8g3z0",
   label: "Wrapper"
-})(p => p.clearButtonStyles.box, ";min-width:var(--grn-clearbutton-height);padding-left:8px;padding-right:8px;.Icon{", p => p.clearButtonStyles.icon, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNkIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvaWNvbi1idXR0b24uanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IGdldENsZWFyQnV0dG9uU3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7cCA9PiBwLmNsZWFyQnV0dG9uU3R5bGVzLmJveH07XG4gIG1pbi13aWR0aDogdmFyKC0tZ3JuLWNsZWFyYnV0dG9uLWhlaWdodCk7XG4gIHBhZGRpbmctbGVmdDogOHB4O1xuICBwYWRkaW5nLXJpZ2h0OiA4cHg7XG5cbiAgLkljb24ge1xuICAgICR7cCA9PiBwLmNsZWFyQnV0dG9uU3R5bGVzLmljb259O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgSWNvbkJ1dHRvbiA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICBpY29uLFxuICAgICAgY29sb3IsXG4gICAgICB2YXJpYW50ID0gJ25ldXRyYWwnLFxuICAgICAgdHlwZSA9ICdidXR0b24nLFxuICAgICAgaXNBY3RpdmUsXG4gICAgICB0YWcgPSAnYnV0dG9uJyxcbiAgICAgIC4uLnByb3BzXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIGNvbnN0IGNsZWFyQnV0dG9uU3R5bGVzID0gZ2V0Q2xlYXJCdXR0b25TdHlsZXMoeyB2YXJpYW50LCBpc0Rpc2FibGVkLCBpc0FjdGl2ZSB9KTtcbiAgICByZXR1cm4gKFxuICAgICAgPFdyYXBwZXJcbiAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGljb249e2ljb259XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICBjbGVhckJ1dHRvblN0eWxlcz17Y2xlYXJCdXR0b25TdHlsZXN9XG4gICAgICAgIGFzPXt0YWd9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gLz59XG4gICAgICAgIHtjaGlsZHJlbiAmJiBjaGlsZHJlbn1cbiAgICAgIDwvV3JhcHBlcj5cbiAgICApO1xuICB9LFxuKTtcblxuSWNvbkJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICB2YXJpYW50OiB0eXBlcy5jbGVhckJ1dHRvblZhcmlhbnQsXG4gIHR5cGU6IHR5cGVzLmJ1dHRvblR5cGUsXG4gIHRhZzogdHlwZXMuYnV0dG9uVGFnLFxufTtcbiJdfQ== */"));
+})(p => p.clearButtonStyles.box, ";min-width:var(--grn-clearbutton-height);padding-left:8px;padding-right:8px;", _ref2 => {
+  let {
+    trimSide,
+    iconWidth
+  } = _ref2;
+  return trimSide && getTrimSideStyles({
+    iconWidth,
+    trimSide
+  });
+}, ";.Icon{", p => p.clearButtonStyles.icon, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYsIHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IGdldENsZWFyQnV0dG9uU3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgZ2V0VHJpbVNpZGVTdHlsZXMgPSAoeyBpY29uV2lkdGgsIHRyaW1TaWRlIH0pID0+IHtcbiAgY29uc3Qgb2Zmc2V0ID0gYGNhbGMoKHZhcigtLWdybi1jbGVhcmJ1dHRvbi1oZWlnaHQpIC0gJHtpY29uV2lkdGh9cHgpIC8gLTIpYDtcblxuICBpZiAoIXRyaW1TaWRlKSByZXR1cm4gJyc7XG5cbiAgaWYgKHRyaW1TaWRlID09PSAnbGVmdCcpIHJldHVybiBgbWFyZ2luLWxlZnQ6ICR7b2Zmc2V0fTtgO1xuICBpZiAodHJpbVNpZGUgPT09ICdyaWdodCcpIHJldHVybiBgbWFyZ2luLXJpZ2h0OiAke29mZnNldH07YDtcbiAgaWYgKHRyaW1TaWRlID09PSAneCcpIHJldHVybiBgbWFyZ2luLWlubGluZTogJHtvZmZzZXR9O2A7XG59O1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtwID0+IHAuY2xlYXJCdXR0b25TdHlsZXMuYm94fTtcbiAgbWluLXdpZHRoOiB2YXIoLS1ncm4tY2xlYXJidXR0b24taGVpZ2h0KTtcbiAgcGFkZGluZy1sZWZ0OiA4cHg7XG4gIHBhZGRpbmctcmlnaHQ6IDhweDtcbiAgJHsoeyB0cmltU2lkZSwgaWNvbldpZHRoIH0pID0+IHRyaW1TaWRlICYmIGdldFRyaW1TaWRlU3R5bGVzKHsgaWNvbldpZHRoLCB0cmltU2lkZSB9KX07XG5cbiAgLkljb24ge1xuICAgICR7cCA9PiBwLmNsZWFyQnV0dG9uU3R5bGVzLmljb259O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgSWNvbkJ1dHRvbiA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICBpY29uLFxuICAgICAgY29sb3IsXG4gICAgICB2YXJpYW50ID0gJ25ldXRyYWwnLFxuICAgICAgdHlwZSA9ICdidXR0b24nLFxuICAgICAgaXNBY3RpdmUsXG4gICAgICB0YWcgPSAnYnV0dG9uJyxcbiAgICAgIHRyaW1TaWRlLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgW2ljb25XaWR0aCwgc2V0SWNvbldpZHRoXSA9IFJlYWN0LnVzZVN0YXRlKDE4KTtcbiAgICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IGdldENsZWFyQnV0dG9uU3R5bGVzKHsgdmFyaWFudCwgaXNEaXNhYmxlZCwgaXNBY3RpdmUgfSk7XG5cbiAgICBjb25zdCBpY29uUmVmID0gUmVhY3QudXNlUmVmKCk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKHRyaW1TaWRlICYmIGljb25SZWYuY3VycmVudCkge1xuICAgICAgICBzZXRJY29uV2lkdGgoaWNvblJlZi5jdXJyZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoKTtcbiAgICAgIH1cbiAgICB9LCBbXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFdyYXBwZXJcbiAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGljb249e2ljb259XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICBjbGVhckJ1dHRvblN0eWxlcz17Y2xlYXJCdXR0b25TdHlsZXN9XG4gICAgICAgIGFzPXt0YWd9XG4gICAgICAgIGljb25XaWR0aD17aWNvbldpZHRofVxuICAgICAgICB0cmltU2lkZT17dHJpbVNpZGV9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gcmVmPXtpY29uUmVmfSAvPn1cbiAgICAgICAge2NoaWxkcmVuICYmIGNoaWxkcmVufVxuICAgICAgPC9XcmFwcGVyPlxuICAgICk7XG4gIH0sXG4pO1xuXG5JY29uQnV0dG9uLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIHZhcmlhbnQ6IHR5cGVzLmNsZWFyQnV0dG9uVmFyaWFudCxcbiAgdHlwZTogdHlwZXMuYnV0dG9uVHlwZSxcbiAgdGFnOiB0eXBlcy5idXR0b25UYWcsXG4gIHRyaW1TaWRlOiBQcm9wVHlwZXMub25lT2YoWydsZWZ0JywgJ3JpZ2h0JywgJ3gnXSksXG59O1xuIl19 */"));
 
-export const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     children,
     isDisabled,
@@ -30,15 +53,23 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant = 'neutral',
     type = 'button',
     isActive,
-    tag = 'button'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+    tag = 'button',
+    trimSide
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
 
+  const [iconWidth, setIconWidth] = React.useState(18);
   const clearButtonStyles = getClearButtonStyles({
     variant,
     isDisabled,
     isActive
   });
+  const iconRef = React.useRef();
+  useEffect(() => {
+    if (trimSide && iconRef.current) {
+      setIconWidth(iconRef.current.getBoundingClientRect().width);
+    }
+  }, []);
   return ___EmotionJSX(Wrapper, _extends({
     type: type,
     disabled: isDisabled,
@@ -46,9 +77,12 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref,
     variant: variant,
     clearButtonStyles: clearButtonStyles,
-    as: tag
+    as: tag,
+    iconWidth: iconWidth,
+    trimSide: trimSide
   }, props), icon && ___EmotionJSX(Icon, {
-    icon: icon
+    icon: icon,
+    ref: iconRef
   }), children && children);
 });
 IconButton.propTypes = {
@@ -59,5 +93,6 @@ IconButton.propTypes = {
   isActive: PropTypes.bool,
   variant: types.clearButtonVariant,
   type: types.buttonType,
-  tag: types.buttonTag
+  tag: types.buttonTag,
+  trimSide: PropTypes.oneOf(['left', 'right', 'x'])
 };

package/es/icons/icon-align-center.js

@@ -14,4 +14,5 @@ const IconAlignCenter = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconAlignCenter.viewBoxWidth = 28;
 export default IconAlignCenter;

package/es/icons/icon-align-left.js

@@ -14,4 +14,5 @@ const IconAlignLeft = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconAlignLeft.viewBoxWidth = 34;
 export default IconAlignLeft;

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

@@ -14,4 +14,5 @@ const IconAlignRight = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconAlignRight.viewBoxWidth = 34;
 export default IconAlignRight;

package/es/icons/icon-apple.js

@@ -14,4 +14,5 @@ const IconExit = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconExit.viewBoxWidth = 28;
 export default IconExit;

package/es/icons/icon-archive.js

@@ -14,4 +14,5 @@ const IconArchive = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconArchive.viewBoxWidth = 36;
 export default IconArchive;

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

@@ -14,4 +14,5 @@ const IconArrowDown = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconArrowDown.viewBoxWidth = 28;
 export default IconArrowDown;

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

@@ -14,4 +14,5 @@ const IconArrowLeft = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconArrowLeft.viewBoxWidth = 28;
 export default IconArrowLeft;

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

@@ -14,4 +14,5 @@ const IconArrowRight = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconArrowRight.viewBoxWidth = 28;
 export default IconArrowRight;

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

@@ -14,4 +14,5 @@ const IconArrowUp = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconArrowUp.viewBoxWidth = 28;
 export default IconArrowUp;

package/es/icons/icon-at.js

@@ -14,4 +14,5 @@ const IconAt = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconAt.viewBoxWidth = 34;
 export default IconAt;

package/es/icons/icon-ball.js

@@ -14,4 +14,5 @@ const IconBall = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconBall.viewBoxWidth = 34;
 export default IconBall;

package/es/icons/icon-bold.js

@@ -14,4 +14,5 @@ const IconBold = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconBold.viewBoxWidth = 24;
 export default IconBold;

package/es/icons/icon-bolt-filled.js

@@ -14,4 +14,5 @@ const IconBoltFilled = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconBoltFilled.viewBoxWidth = 28;
 export default IconBoltFilled;

package/es/icons/icon-bolt.js

@@ -14,4 +14,5 @@ const IconBolt = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconBolt.viewBoxWidth = 28;
 export default IconBolt;

package/es/icons/icon-branching.js

@@ -14,4 +14,5 @@ const IconBranching = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconBranching.viewBoxWidth = 32;
 export default IconBranching;

package/es/icons/icon-browser.js

@@ -14,4 +14,5 @@ const IconBrowser = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconBrowser.viewBoxWidth = 34;
 export default IconBrowser;

package/es/icons/icon-bullet-list.js

@@ -14,4 +14,5 @@ const IconBulletList = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconBulletList.viewBoxWidth = 32;
 export default IconBulletList;

package/es/icons/icon-car.js

@@ -14,4 +14,5 @@ const IconCar = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconCar.viewBoxWidth = 34;
 export default IconCar;

package/es/icons/icon-chart.js

@@ -14,4 +14,5 @@ const IconChart = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconChart.viewBoxWidth = 24;
 export default IconChart;

package/es/icons/icon-check.js

@@ -14,4 +14,5 @@ const IconCheck = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconCheck.viewBoxWidth = 32;
 export default IconCheck;

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

@@ -14,4 +14,5 @@ const IconChevronDown = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconChevronDown.viewBoxWidth = 20;
 export default IconChevronDown;

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

@@ -14,4 +14,5 @@ const IconChevronHorizontal = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconChevronHorizontal.viewBoxWidth = 34;
 export default IconChevronHorizontal;

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

@@ -14,4 +14,5 @@ const IconChevronLeft = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconChevronLeft.viewBoxWidth = 12;
 export default IconChevronLeft;

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

@@ -14,4 +14,5 @@ const IconChevronRight = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconChevronRight.viewBoxWidth = 12;
 export default IconChevronRight;

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

@@ -14,4 +14,5 @@ const IconChevronUp = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconChevronUp.viewBoxWidth = 20;
 export default IconChevronUp;

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

@@ -14,4 +14,5 @@ const IconChevronVertical = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconChevronVertical.viewBoxWidth = 24;
 export default IconChevronVertical;

package/es/icons/icon-clip.js

@@ -14,4 +14,5 @@ const IconClip = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconClip.viewBoxWidth = 28;
 export default IconClip;

package/es/icons/icon-clock.js

@@ -14,4 +14,5 @@ const IconClock = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconClock.viewBoxWidth = 34;
 export default IconClock;

package/es/icons/icon-column-and-rows.js

@@ -18,4 +18,5 @@ const IconColumnAndRows = props => ___EmotionJSX("svg", _extends({
   strokeWidth: "3"
 }));
 
+IconColumnAndRows.viewBoxWidth = 32;
 export default IconColumnAndRows;

package/es/icons/icon-column-one.js

@@ -14,4 +14,5 @@ const IconColumnOne = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconColumnOne.viewBoxWidth = 24;
 export default IconColumnOne;

package/es/icons/icon-column-two.js

@@ -14,4 +14,5 @@ const IconColumnTwo = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconColumnTwo.viewBoxWidth = 32;
 export default IconColumnTwo;

package/es/icons/icon-columns-and-row.js

@@ -18,4 +18,5 @@ const IconColumnsAndRow = props => ___EmotionJSX("svg", _extends({
   strokeWidth: "3"
 }));
 
+IconColumnsAndRow.viewBoxWidth = 32;
 export default IconColumnsAndRow;

package/es/icons/icon-columns.js

@@ -14,4 +14,5 @@ const IconColumns = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconColumns.viewBoxWidth = 32;
 export default IconColumns;

package/es/icons/icon-content-align-bottom.js

@@ -14,4 +14,5 @@ const IconContentAlignBottom = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconContentAlignBottom.viewBoxWidth = 32;
 export default IconContentAlignBottom;

package/es/icons/icon-content-align-center.js

@@ -14,4 +14,5 @@ const IconContentAlignCenter = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconContentAlignCenter.viewBoxWidth = 32;
 export default IconContentAlignCenter;

package/es/icons/icon-content-align-top.js

@@ -14,4 +14,5 @@ const IconContentAlignTop = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconContentAlignTop.viewBoxWidth = 32;
 export default IconContentAlignTop;

package/es/icons/icon-crop.js

@@ -14,4 +14,5 @@ const IconCrop = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconCrop.viewBoxWidth = 32;
 export default IconCrop;

package/es/icons/icon-cross.js

@@ -14,4 +14,5 @@ const IconCross = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconCross.viewBoxWidth = 24;
 export default IconCross;

package/es/icons/icon-dog.js

@@ -14,4 +14,5 @@ const IconDog = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconDog.viewBoxWidth = 32;
 export default IconDog;

package/es/icons/icon-download.js

@@ -14,4 +14,5 @@ const IconDownload = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconDownload.viewBoxWidth = 32;
 export default IconDownload;

package/es/icons/icon-drag.js

@@ -14,4 +14,5 @@ const IconDrag = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconDrag.viewBoxWidth = 18;
 export default IconDrag;

package/es/icons/icon-duplicate.js

@@ -14,4 +14,5 @@ const IconDuplicate = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconDuplicate.viewBoxWidth = 32;
 export default IconDuplicate;

package/es/icons/icon-ellipsis.js

@@ -14,4 +14,5 @@ const IconEllipsis = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconEllipsis.viewBoxWidth = 30;
 export default IconEllipsis;

package/es/icons/icon-exit.js

@@ -14,4 +14,5 @@ const IconExit = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconExit.viewBoxWidth = 34;
 export default IconExit;

package/es/icons/icon-file.js

@@ -14,4 +14,5 @@ const IconFile = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconFile.viewBoxWidth = 28;
 export default IconFile;

package/es/icons/icon-flag.js

@@ -14,4 +14,5 @@ const IconFlag = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconFlag.viewBoxWidth = 28;
 export default IconFlag;

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

@@ -14,4 +14,5 @@ const IconFolderAdd = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconFolderAdd.viewBoxWidth = 36;
 export default IconFolderAdd;

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

@@ -14,4 +14,5 @@ const IconFolderMove = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconFolderMove.viewBoxWidth = 36;
 export default IconFolderMove;

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

@@ -14,4 +14,5 @@ const IconFolderRemove = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconFolderRemove.viewBoxWidth = 36;
 export default IconFolderRemove;

package/es/icons/icon-folder.js

@@ -14,4 +14,5 @@ const IconFolder = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconFolder.viewBoxWidth = 34;
 export default IconFolder;

package/es/icons/icon-gear.js

@@ -14,4 +14,5 @@ const IconGear = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconGear.viewBoxWidth = 34;
 export default IconGear;

package/es/icons/icon-globe.js

@@ -14,4 +14,5 @@ const IconGlobe = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconGlobe.viewBoxWidth = 34;
 export default IconGlobe;

package/es/icons/icon-heart.js

@@ -14,4 +14,5 @@ const IconHeart = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconHeart.viewBoxWidth = 34;
 export default IconHeart;

package/es/icons/icon-hide.js

@@ -14,4 +14,5 @@ const IconHide = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconHide.viewBoxWidth = 34;
 export default IconHide;

package/es/icons/icon-image.js

@@ -14,4 +14,5 @@ const IconImage = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconImage.viewBoxWidth = 34;
 export default IconImage;

package/es/icons/icon-info.js

@@ -14,4 +14,5 @@ const IconInfo = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconInfo.viewBoxWidth = 34;
 export default IconInfo;

package/es/icons/icon-italic.js

@@ -14,4 +14,5 @@ const IconItalic = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconItalic.viewBoxWidth = 24;
 export default IconItalic;

package/es/icons/icon-layout-text-bottom.js

@@ -14,4 +14,5 @@ const IconLayoutTextBottom = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconLayoutTextBottom.viewBoxWidth = 32;
 export default IconLayoutTextBottom;

package/es/icons/icon-layout-text-left.js

@@ -14,4 +14,5 @@ const IconLayoutTextLeft = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconLayoutTextLeft.viewBoxWidth = 32;
 export default IconLayoutTextLeft;

package/es/icons/icon-layout-text-right.js

@@ -14,4 +14,5 @@ const IconLayoutTextRight = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconLayoutTextRight.viewBoxWidth = 32;
 export default IconLayoutTextRight;

package/es/icons/icon-layout-text-top.js

@@ -14,4 +14,5 @@ const IconLayoutTextTop = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconLayoutTextTop.viewBoxWidth = 32;
 export default IconLayoutTextTop;

package/es/icons/icon-letter-list.js

@@ -21,4 +21,5 @@ const IconLetterList = props => ___EmotionJSX("svg", _extends({
   d: "M0 0h34v36H0z"
 }))));
 
+IconLetterList.viewBoxWidth = 34;
 export default IconLetterList;

package/es/icons/icon-link.js

@@ -14,4 +14,5 @@ const IconLink = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconLink.viewBoxWidth = 32;
 export default IconLink;

package/es/icons/icon-location.js

@@ -14,4 +14,5 @@ const IconLocation = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconLocation.viewBoxWidth = 28;
 export default IconLocation;

package/es/icons/icon-mail.js

@@ -14,4 +14,5 @@ const IconMail = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconMail.viewBoxWidth = 34;
 export default IconMail;

package/es/icons/icon-minus.js

@@ -14,4 +14,5 @@ const IconMinus = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconMinus.viewBoxWidth = 28;
 export default IconMinus;

package/es/icons/icon-monitor.js

@@ -14,4 +14,5 @@ const IconMonitor = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconMonitor.viewBoxWidth = 34;
 export default IconMonitor;

package/es/icons/icon-number-list.js

@@ -21,4 +21,5 @@ const IconNumberList = props => ___EmotionJSX("svg", _extends({
   d: "M0 0h34v36H0z"
 }))));
 
+IconNumberList.viewBoxWidth = 34;
 export default IconNumberList;

package/es/icons/icon-pencil.js

@@ -14,4 +14,5 @@ const IconPencil = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconPencil.viewBoxWidth = 32;
 export default IconPencil;

package/es/icons/icon-phone.js

@@ -14,4 +14,5 @@ const IconPhone = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconPhone.viewBoxWidth = 24;
 export default IconPhone;

package/es/icons/icon-play.js

@@ -14,4 +14,5 @@ const IconPlay = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconPlay.viewBoxWidth = 28;
 export default IconPlay;

package/es/icons/icon-plus.js

@@ -14,4 +14,5 @@ const IconPlus = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconPlus.viewBoxWidth = 28;
 export default IconPlus;

package/es/icons/icon-question.js

@@ -14,4 +14,5 @@ const IconQuestion = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconQuestion.viewBoxWidth = 34;
 export default IconQuestion;

package/es/icons/icon-redo.js

@@ -14,4 +14,5 @@ const IconRedo = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconRedo.viewBoxWidth = 32;
 export default IconRedo;

package/es/icons/icon-reset.js

@@ -14,4 +14,5 @@ const IconReset = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconReset.viewBoxWidth = 34;
 export default IconReset;

package/es/icons/icon-row-and-columns.js

@@ -18,4 +18,5 @@ const IconRowAndColumns = props => ___EmotionJSX("svg", _extends({
   strokeWidth: "3"
 }));
 
+IconRowAndColumns.viewBoxWidth = 32;
 export default IconRowAndColumns;

package/es/icons/icon-rows-and-column.js

@@ -18,4 +18,5 @@ const IconRowsAndColumn = props => ___EmotionJSX("svg", _extends({
   strokeWidth: "3"
 }));
 
+IconRowsAndColumn.viewBoxWidth = 32;
 export default IconRowsAndColumn;

package/es/icons/icon-rows.js

@@ -14,4 +14,5 @@ const IconRows = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconRows.viewBoxWidth = 32;
 export default IconRows;

package/es/icons/icon-search.js

@@ -14,4 +14,5 @@ const IconSearch = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconSearch.viewBoxWidth = 32;
 export default IconSearch;

package/es/icons/icon-send.js

@@ -14,4 +14,5 @@ const IconSend = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconSend.viewBoxWidth = 32;
 export default IconSend;

package/es/icons/icon-share.js

@@ -14,4 +14,5 @@ const IconShare = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconShare.viewBoxWidth = 28;
 export default IconShare;

package/es/icons/icon-show.js

@@ -14,4 +14,5 @@ const IconShow = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconShow.viewBoxWidth = 34;
 export default IconShow;

package/es/icons/icon-smile.js

@@ -14,4 +14,5 @@ const IconSmile = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconSmile.viewBoxWidth = 34;
 export default IconSmile;

package/es/icons/icon-square.js

@@ -14,4 +14,5 @@ const IconSquare = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconSquare.viewBoxWidth = 32;
 export default IconSquare;

package/es/icons/icon-strike.js

@@ -14,4 +14,5 @@ const IconStrike = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconStrike.viewBoxWidth = 32;
 export default IconStrike;

package/es/icons/icon-switch.js

@@ -14,4 +14,5 @@ const IconSwitch = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconSwitch.viewBoxWidth = 34;
 export default IconSwitch;

package/es/icons/icon-symbols.js

@@ -14,4 +14,5 @@ const IconSymbols = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconSymbols.viewBoxWidth = 32;
 export default IconSymbols;

package/es/icons/icon-tablet.js

@@ -14,4 +14,5 @@ const IconTablet = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconTablet.viewBoxWidth = 28;
 export default IconTablet;

package/es/icons/icon-text-align-center.js

@@ -14,4 +14,5 @@ const IconTextAlignCenter = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconTextAlignCenter.viewBoxWidth = 34;
 export default IconTextAlignCenter;

package/es/icons/icon-text-align-left.js

@@ -14,4 +14,5 @@ const IconTextAlignLeft = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconTextAlignLeft.viewBoxWidth = 34;
 export default IconTextAlignLeft;

package/es/icons/icon-text-align-right.js

@@ -14,4 +14,5 @@ const IconTextAlignRight = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconTextAlignRight.viewBoxWidth = 34;
 export default IconTextAlignRight;

package/es/icons/icon-text-justify.js

@@ -14,4 +14,5 @@ const IconTextJustify = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconTextJustify.viewBoxWidth = 34;
 export default IconTextJustify;

package/es/icons/icon-trash.js

@@ -14,4 +14,5 @@ const IconTrash = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconTrash.viewBoxWidth = 32;
 export default IconTrash;

package/es/icons/icon-type.js

@@ -14,4 +14,5 @@ const IconType = props => ___EmotionJSX("svg", _extends({
   clipRule: "evenodd"
 }));
 
+IconType.viewBoxWidth = 16;
 export default IconType;

package/es/icons/icon-underline.js

@@ -14,4 +14,5 @@ const IconUnderline = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconUnderline.viewBoxWidth = 32;
 export default IconUnderline;

package/es/icons/icon-undo.js

@@ -14,4 +14,5 @@ const IconUndo = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconUndo.viewBoxWidth = 32;
 export default IconUndo;

package/es/icons/icon-upload.js

@@ -14,4 +14,5 @@ const IconUpload = props => ___EmotionJSX("svg", _extends({
   fill: "currentColor"
 }));
 
+IconUpload.viewBoxWidth = 32;
 export default IconUpload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.38.1",
+  "version": "11.40.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "types": "es/types/index.d.ts",