@flodesk/grain 6.1.5 → 6.2.0

package/es/components/text-input.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.symbol.iterator.js";
@@ -10,11 +11,9 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.object.assign.js";
 import _styled from "@emotion/styled/base";
-var _excluded = ["value", "placeholder", "label", "id", "icon", "hasError", "errorMessage", "isDisabled"];
-
-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); }
+var _excluded = ["children", "internalType", "setInternalType"],
+    _excluded2 = ["value", "placeholder", "label", "id", "icon", "hasError", "errorMessage", "isDisabled", "type"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -28,6 +27,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+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/es.array.concat.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; }
@@ -36,8 +39,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Box, Text } from '.';
 import { Icon } from './icon';
-import { FieldLabel, InputField } from '../foundational';
+import { IconButton } from './icon-button';
+import { componentVars, FieldLabel, InputField } from '../foundational';
 import { types } from '../types';
+import { IconHide, IconShow } from '../icons';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var iconOffsetPx = 12;
 var iconTextGapPx = 8;
@@ -47,19 +52,47 @@ var IconSection = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "producti
 } : {
   target: "e1o9e51y0",
   label: "IconSection"
-})("position:absolute;margin:auto;left:", iconOffsetPx, "px;top:0;bottom:0;height:fit-content;pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVc4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IEZpZWxkTGFiZWwsIElucHV0RmllbGQgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIGlzRGlzYWJsZWQsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGljb25SZWYuY3VycmVudCkge1xuICAgICAgc2V0SWNvbldpZHRoKGljb25SZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiB1bmRlZmluZWQ7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgICBpc0Rpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgLz5cbiAgICAgIDwvQm94PlxuICAgICAge2Vycm9yTWVzc2FnZSAmJiAoXG4gICAgICAgIDxCb3ggbWFyZ2luVG9wPXswLjV9PlxuICAgICAgICAgIDxUZXh0IGNvbG9yPVwiZGFuZ2VyXCI+e2Vycm9yTWVzc2FnZX08L1RleHQ+XG4gICAgICAgIDwvQm94PlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cblRleHRJbnB1dC5wcm9wVHlwZXMgPSB7XG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIHBsYWNlaG9sZGVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB2YWx1ZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgbGFiZWw6IHR5cGVzLmxhYmVsLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxufTtcbiJdfQ== */"));
-
-export var TextInput = function TextInput(_ref) {
-  var value = _ref.value,
-      placeholder = _ref.placeholder,
-      label = _ref.label,
-      id = _ref.id,
-      icon = _ref.icon,
-      hasError = _ref.hasError,
-      errorMessage = _ref.errorMessage,
-      isDisabled = _ref.isDisabled,
+})("position:absolute;margin:auto;left:", iconOffsetPx, "px;top:0;bottom:0;height:fit-content;pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWE4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICcuL2ljb24tYnV0dG9uJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkTGFiZWwsIElucHV0RmllbGQgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBJY29uSGlkZSwgSWNvblNob3cgfSBmcm9tICcuLi9pY29ucyc7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5jb25zdCBTaG93QnV0dG9uID0gKHsgY2hpbGRyZW4sIGludGVybmFsVHlwZSwgc2V0SW50ZXJuYWxUeXBlLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IHNob3dSaWdodE9mZnNldCA9IGBjYWxjKCgke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAke2NvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25IZWlnaHR9KSAvIDIpYDtcbiAgY29uc3QgdHlwZUFuZEljb25NYXAgPSB7XG4gICAgcGFzc3dvcmQ6IDxJY29uU2hvdyAvPixcbiAgICB0ZXh0OiA8SWNvbkhpZGUgLz4sXG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94XG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIHJpZ2h0PXtzaG93UmlnaHRPZmZzZXR9XG4gICAgICB0b3A9XCIwXCJcbiAgICAgIGJvdHRvbT1cIjBcIlxuICAgICAgbWFyZ2luPVwiYXV0b1wiXG4gICAgICBoZWlnaHQ9XCJmaXQtY29udGVudFwiXG4gICAgPlxuICAgICAgPEljb25CdXR0b25cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgICBpY29uPXt0eXBlQW5kSWNvbk1hcFtpbnRlcm5hbFR5cGVdfVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRJbnRlcm5hbFR5cGUoaW50ZXJuYWxUeXBlID09PSAndGV4dCcgPyAncGFzc3dvcmQnIDogJ3RleHQnKX1cbiAgICAgIC8+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIGlzRGlzYWJsZWQsXG4gIHR5cGUgPSAndGV4dCcsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuICBjb25zdCBbaW50ZXJuYWxUeXBlLCBzZXRJbnRlcm5hbFR5cGVdID0gUmVhY3QudXNlU3RhdGUodHlwZSk7XG5cbiAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaWNvblJlZi5jdXJyZW50KSB7XG4gICAgICBzZXRJY29uV2lkdGgoaWNvblJlZi5jdXJyZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBoYXNTaG93QnV0dG9uID0gdHlwZSA9PT0gJ3Bhc3N3b3JkJztcbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiB1bmRlZmluZWQ7XG4gIGNvbnN0IHBhZGRpbmdSaWdodCA9IGhhc1Nob3dCdXR0b24gPyBjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHQgOiB1bmRlZmluZWQ7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgdHlwZT17aW50ZXJuYWxUeXBlfVxuICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdH1cbiAgICAgICAgICBwYWRkaW5nUmlnaHQ9e3BhZGRpbmdSaWdodH1cbiAgICAgICAgICBoYXNFcnJvcj17aGFzRXJyb3J9XG4gICAgICAgICAgaXNEaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIC8+XG4gICAgICAgIHtoYXNTaG93QnV0dG9uICYmIChcbiAgICAgICAgICA8U2hvd0J1dHRvbiBzZXRJbnRlcm5hbFR5cGU9e3NldEludGVybmFsVHlwZX0gaW50ZXJuYWxUeXBlPXtpbnRlcm5hbFR5cGV9IC8+XG4gICAgICAgICl9XG4gICAgICA8L0JveD5cbiAgICAgIHtlcnJvck1lc3NhZ2UgJiYgKFxuICAgICAgICA8Qm94IG1hcmdpblRvcD17MC41fT5cbiAgICAgICAgICA8VGV4dCBjb2xvcj1cImRhbmdlclwiPntlcnJvck1lc3NhZ2V9PC9UZXh0PlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5UZXh0SW5wdXQucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgdmFsdWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGxhYmVsOiB0eXBlcy5sYWJlbCxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgdHlwZTogUHJvcFR5cGVzLm9uZU9mKFsndGV4dCcsICdwYXNzd29yZCddKSxcbn07XG4iXX0= */"));
+
+var ShowButton = function ShowButton(_ref) {
+  var children = _ref.children,
+      internalType = _ref.internalType,
+      setInternalType = _ref.setInternalType,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var showRightOffset = "calc((".concat(componentVars.textBoxHeight, " - ").concat(componentVars.clearButtonHeight, ") / 2)");
+  var typeAndIconMap = {
+    password: ___EmotionJSX(IconShow, null),
+    text: ___EmotionJSX(IconHide, null)
+  };
+  return ___EmotionJSX(Box, {
+    position: "absolute",
+    right: showRightOffset,
+    top: "0",
+    bottom: "0",
+    margin: "auto",
+    height: "fit-content"
+  }, ___EmotionJSX(IconButton, _extends({}, props, {
+    icon: typeAndIconMap[internalType],
+    onClick: function onClick() {
+      return setInternalType(internalType === 'text' ? 'password' : 'text');
+    }
+  })));
+};
+
+export var TextInput = function TextInput(_ref2) {
+  var value = _ref2.value,
+      placeholder = _ref2.placeholder,
+      label = _ref2.label,
+      id = _ref2.id,
+      icon = _ref2.icon,
+      hasError = _ref2.hasError,
+      errorMessage = _ref2.errorMessage,
+      isDisabled = _ref2.isDisabled,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'text' : _ref2$type,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
   var iconRef = React.useRef(null);
 
   var _React$useState = React.useState(),
@@ -67,12 +100,19 @@ export var TextInput = function TextInput(_ref) {
       iconWidth = _React$useState2[0],
       setIconWidth = _React$useState2[1];
 
+  var _React$useState3 = React.useState(type),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      internalType = _React$useState4[0],
+      setInternalType = _React$useState4[1];
+
   React.useEffect(function () {
     if (iconRef.current) {
       setIconWidth(iconRef.current.getBoundingClientRect().width);
     }
   }, []);
+  var hasShowButton = type === 'password';
   var paddingLeft = icon ? "".concat(iconOffsetPx + iconWidth + iconTextGapPx, "px") : undefined;
+  var paddingRight = hasShowButton ? componentVars.textBoxHeight : undefined;
   return ___EmotionJSX("div", null, label && ___EmotionJSX(FieldLabel, {
     htmlFor: id
   }, label), ___EmotionJSX(Box, {
@@ -81,13 +121,18 @@ export var TextInput = function TextInput(_ref) {
     ref: iconRef,
     icon: icon
   })), ___EmotionJSX(InputField, _extends({
+    type: internalType,
     id: id,
     value: value,
     placeholder: placeholder,
     paddingLeft: paddingLeft,
+    paddingRight: paddingRight,
     hasError: hasError,
     isDisabled: isDisabled
-  }, props))), errorMessage && ___EmotionJSX(Box, {
+  }, props)), hasShowButton && ___EmotionJSX(ShowButton, {
+    setInternalType: setInternalType,
+    internalType: internalType
+  })), errorMessage && ___EmotionJSX(Box, {
     marginTop: 0.5
   }, ___EmotionJSX(Text, {
     color: "danger"
@@ -101,5 +146,6 @@ TextInput.propTypes = {
   icon: PropTypes.node,
   hasError: PropTypes.bool,
   errorMessage: PropTypes.string,
-  isDisabled: PropTypes.bool
+  isDisabled: PropTypes.bool,
+  type: PropTypes.oneOf(['text', 'password'])
 };

package/es/icons/icon-hide.js

@@ -0,0 +1,21 @@
+import "core-js/modules/es.object.assign.js";
+
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconHide = function IconHide(props) {
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.532 5.882l3.175-3.175-1.414-1.414-3.41 3.41C16.205 3.683 14.228 3 12 3 5.39 3 1 9 .033 12c.527 1.634 2.07 4.16 4.434 6.119l-3.174 3.174 1.414 1.414 3.409-3.409 1.464-1.463.951-.952 1.443-1.443 5.453-5.453 1.447-1.446 1.237-1.238 1.421-1.421zm-3.112.284C15.104 5.446 13.62 5 11.999 5 9.332 5 7.043 6.207 5.252 7.849c-1.523 1.397-2.564 3-3.077 4.151.513 1.15 1.554 2.754 3.077 4.151.206.188.418.371.636.547l1.237-1.237A5.996 5.996 0 016.033 12c0-3.314 2.671-6 5.966-6 1.293 0 2.491.414 3.469 1.118l.952-.952zm-2.395 2.395A3.924 3.924 0 0011.999 8c-2.18 0-3.966 1.78-3.966 4 0 .736.197 1.424.538 2.014l5.454-5.453zm5.545.111l1.416-1.415c1.546 1.663 2.57 3.472 2.978 4.743C23 15 18.607 21 12 21c-1.441 0-2.777-.285-3.994-.762l1.576-1.577A8.802 8.802 0 0012 19c2.666 0 4.956-1.207 6.747-2.85 1.524-1.396 2.565-3 3.077-4.15-.414-.93-1.173-2.155-2.253-3.328zM12 18a5.942 5.942 0 01-1.552-.205l1.804-1.803c1.97-.125 3.562-1.704 3.703-3.704l1.815-1.815c.128.488.195 1 .195 1.527 0 3.314-2.67 6-5.965 6z",
+    fill: "currentColor"
+  }));
+};
+
+export default IconHide;

package/es/icons/icon-show.js

@@ -0,0 +1,21 @@
+import "core-js/modules/es.object.assign.js";
+
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconShow = function IconShow(props) {
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18.746 16.15c1.524-1.396 2.565-3 3.077-4.15-.512-1.15-1.553-2.754-3.077-4.15C16.956 6.206 14.666 5 12 5S7.043 6.207 5.252 7.849c-1.523 1.397-2.564 3-3.077 4.151.513 1.15 1.554 2.754 3.077 4.151C7.042 17.793 9.332 19 12 19c2.666 0 4.956-1.207 6.747-2.85zM23.964 12C23 15 18.607 21 12 21 5.39 21 1 15 .033 12 1 9 5.39 3 12 3 18.607 3 23 9 23.964 12zm-8 0c0 2.22-1.786 4-3.965 4-2.18 0-3.966-1.78-3.966-4 0-2.22 1.786-4 3.966-4 2.179 0 3.965 1.78 3.965 4zm2 0c0 3.314-2.67 6-5.965 6s-5.966-2.686-5.966-6S8.704 6 12 6c3.294 0 5.965 2.686 5.965 6z",
+    fill: "currentColor"
+  }));
+};
+
+export default IconShow;

package/es/icons/index.js

@@ -48,4 +48,6 @@ export { default as IconTrash } from './icon-trash';
 export { default as IconType } from './icon-type';
 export { default as IconUndo } from './icon-undo';
 export { default as IconUpload } from './icon-upload';
-export { default as IconDownload } from './icon-download';
+export { default as IconDownload } from './icon-download';
+export { default as IconShow } from './icon-show';
+export { default as IconHide } from './icon-hide';

package/package.json

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