@flodesk/grain 2.20.0 → 2.20.1

package/es/components/button.js

@@ -1,126 +1,62 @@
-"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.Button = 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"));
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["children", "variant", "isDisabled", "icon", "hasFullWidth"];
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _react2 = require("@emotion/react");
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.object.keys.js";
 
-var _foundational = require("../foundational");
+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; }
 
-var _excluded = ["children", "variant", "isDisabled", "icon", "hasFullWidth"];
+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; }
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var __jsx = _react.default.createElement;
-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"])));
+import { getColor, getRadius, getWeight } from '../utilities';
+import { Icon } from '../components';
+import React from "react";
+import styled from "@emotion/styled";
+import PropTypes from "prop-types";
+import { css } from '@emotion/react';
+import { transitions } from '../foundational';
+var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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-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      background-color: ", ";\n    }\n  "])), (0, _utilities.getColor)('accent'), (0, _utilities.getColor)('grey7'), (0, _utilities.getColor)('grey6'))
+  neutral: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: white;\n    background-color: ", ";\n    border-color: transparent;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n    }\n  "])), getColor('accent'), getColor('grey7'), getColor('grey6'))
 };
-
-var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\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  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  ", ";\n  ", ";\n  \n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, _foundational.transitions, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), function (p) {
+var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\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  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  ", ";\n  ", ";\n  \n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, transitions, getWeight('medium'), getRadius('s'), function (p) {
   return !p.isDisabled && variants[p.variant];
 }, function (p) {
   return p.hasFullWidth && "width: 100%";
-}, (0, _utilities.getColor)('disabledContent'), (0, _utilities.getColor)('disabledBackground'));
-
-var Button = function Button(_ref) {
+}, getColor('disabledContent'), getColor('disabledBackground'));
+export var Button = function Button(_ref) {
   var children = _ref.children,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
       isDisabled = _ref.isDisabled,
       icon = _ref.icon,
       hasFullWidth = _ref.hasFullWidth,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return __jsx(Wrapper, (0, _extends2.default)({
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     variant: variant,
     disabled: isDisabled,
     icon: icon,
     hasFullWidth: hasFullWidth
-  }, props), icon && __jsx(_components.Icon, {
+  }, props), icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     color: "currentColor"
   }), children);
 };
-
-exports.Button = Button;
-Button.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Button",
-  "props": {
-    "variant": {
-      "defaultValue": {
-        "value": "'neutral'",
-        "computed": false
-      },
-      "type": {
-        "name": "enum",
-        "value": [{
-          "value": "\"neutral\"",
-          "computed": false
-        }, {
-          "value": "\"primary\"",
-          "computed": false
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
-    "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": ""
-    },
-    "hasFullWidth": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": ""
-    }
-  }
+Button.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  variant: PropTypes.oneOf(Object.keys(variants)),
+  onClick: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  hasFullWidth: PropTypes.bool
 };

package/es/components/icon-button.js

@@ -1,111 +1,48 @@
-"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 _components = require("../components");
-
-var _react = _interopRequireDefault(require("react"));
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["children", "isDisabled", "icon", "color"];
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _templateObject;
 
-var _types = require("../types");
+import "core-js/modules/es.object.assign.js";
 
-var _foundational = require("../foundational");
+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; }
 
-var _excluded = ["children", "isDisabled", "icon", "color"];
+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; }
 
-var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var __jsx = _react.default.createElement;
-var Wrapper = (0, _styled.default)(_foundational.ClearButtonBox)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: var(--grn-clearButtonHeight-m);\n"])));
-
-var IconButton = function IconButton(_ref) {
+import { Icon } from '../components';
+import React from "react";
+import styled from "@emotion/styled";
+import PropTypes from "prop-types";
+import { types } from '../types';
+import { ClearButtonBox } from '../foundational';
+var Wrapper = styled(ClearButtonBox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: var(--grn-clearButtonHeight-m);\n"])));
+export 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)({
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     disabled: isDisabled,
     icon: icon,
     color: color
-  }, props), icon && __jsx(_components.Icon, {
+  }, props), icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     color: isDisabled ? 'currentColor' : color
   }), 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": ""
-    }
-  }
+IconButton.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  onClick: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  color: types.color
 };

package/es/components/icon-toggle.js

@@ -1,119 +1,64 @@
-"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.IconToggleGroup = exports.IconToggle = 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");
-
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
 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) + 2px);\n"])));
+import "core-js/modules/es.object.assign.js";
 
-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"])));
+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; }
 
-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  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\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  transition: color ", ";\n\n  ", ";\n  \n  & + .IconToggle {\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    transition: ", ";\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  }\n"])), variables, (0, _utilities.getWeight)("medium"), (0, _utilities.getTransition)('fast'), function (p) {
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { getTransition, getWeight } from "../utilities";
+import { Icon } from ".";
+import React from "react";
+import styled from "@emotion/styled";
+import PropTypes from "prop-types";
+import { css } from "@emotion/react";
+import { types } from "../types";
+var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n  --grn-width: calc(var(--grn-textBoxHeight-m) + 2px);\n"])));
+var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\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  transition: color ", ";\n\n  ", ";\n  \n  & + .IconToggle {\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    transition: ", ";\n    ", ";\n  }\n\n  &:first-of-type {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n  \n  &:first-of-type: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  }\n"])), variables, getWeight("medium"), getTransition('fast'), function (p) {
   return p.isActive && "\n    color: var(--grn-color-body);\n  ";
-}, (0, _utilities.getTransition)('xFast'), function (p) {
+}, getTransition('xFast'), function (p) {
   return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";
 });
-
-var IconToggle = function IconToggle(_ref) {
+export var IconToggle = function IconToggle(_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)({
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(ItemWrapper, Object.assign({
     className: "IconToggle",
     isActive: isActive,
     onClick: onClick
-  }, props), icon && __jsx(_.Icon, {
+  }, props), icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     color: "currentColor"
   }), children && children);
 };
-
-exports.IconToggle = IconToggle;
-
-var IconToggleGroup = function IconToggleGroup(_ref2) {
+export var IconToggleGroup = function IconToggleGroup(_ref2) {
   var children = _ref2.children,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return __jsx(Wrapper, props, children);
-};
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
-exports.IconToggleGroup = IconToggleGroup;
-IconToggle.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "IconToggle",
-  "props": {
-    "children": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    },
-    "icon": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    },
-    "isActive": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": ""
-    },
-    "onClick": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": ""
-    }
-  }
+  return /*#__PURE__*/React.createElement(Wrapper, props, children);
+};
+IconToggleGroup.propTypes = {
+  children: PropTypes.node
 };
-IconToggleGroup.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "IconToggleGroup",
-  "props": {
-    "children": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    }
-  }
+IconToggle.propTypes = {
+  children: PropTypes.node,
+  icon: types.icon,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func
 };

package/es/components/icon.js

@@ -1,150 +1,54 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Icon = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _utilities = require("../utilities");
-
-var _propTypes = require("prop-types");
-
-var _react = _interopRequireDefault(require("react"));
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["icon", "size", "color", "hasEvenBoundary"];
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _templateObject;
 
-var _types = require("../types");
+import "core-js/modules/es.object.assign.js";
 
-var _excluded = ["icon", "size", "color", "hasEvenBoundary"];
+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; }
 
-var _templateObject;
+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; }
 
-var __jsx = _react.default.createElement;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-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"])), function (p) {
-  return (0, _utilities.getColor)(p.color);
+import { getColor, getIconSize } from '../utilities';
+import { PropTypes } from 'prop-types';
+import React from "react";
+import styled from "@emotion/styled";
+import { types } from '../types';
+var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: ", ";\n  color: ", ";\n  \n  svg {\n    display: block;\n    height: ", ";\n    ", "\n"])), function (p) {
+  return getColor(p.color);
 }, function (p) {
-  return (0, _utilities.getColor)(p.color);
+  return getColor(p.color);
 }, function (p) {
-  return (0, _utilities.getIconSize)(p.size);
+  return getIconSize(p.size);
 }, function (p) {
-  return p.hasEvenBoundary && "width: ".concat((0, _utilities.getIconSize)(p.size), "}");
+  return p.hasEvenBoundary && "width: ".concat(getIconSize(p.size), "}");
 });
-
-var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+export var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
       _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)({
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     size: size,
     color: color,
     hasEvenBoundary: hasEvenBoundary,
     ref: ref
   }, props), icon && icon);
 });
-
-exports.Icon = Icon;
 Icon.propTypes = {
-  icon: _propTypes.PropTypes.node,
-  hasEvenBoundary: _propTypes.PropTypes.bool,
-  size: _types.types.iconSize,
-  color: _types.types.color
-};
-Icon.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Icon",
-  "props": {
-    "size": {
-      "defaultValue": {
-        "value": "'m'",
-        "computed": false
-      },
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "enum",
-          "value": [{
-            "value": "\"s\"",
-            "computed": false
-          }, {
-            "value": "\"m\"",
-            "computed": false
-          }, {
-            "value": "\"l\"",
-            "computed": false
-          }, {
-            "value": "\"xl\"",
-            "computed": false
-          }, {
-            "value": "\"xxl\"",
-            "computed": false
-          }]
-        }, {
-          "name": "number"
-        }, {
-          "name": "string"
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
-    "color": {
-      "defaultValue": {
-        "value": "'body'",
-        "computed": false
-      },
-      "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": ""
-    },
-    "icon": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    },
-    "hasEvenBoundary": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": ""
-    }
-  }
+  icon: PropTypes.node,
+  hasEvenBoundary: PropTypes.bool,
+  size: types.iconSize,
+  color: types.color
 };