@flodesk/grain 2.20.0 → 2.20.1

package/es/components/index.js

@@ -1,107 +1,11 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Text", {
-  enumerable: true,
-  get: function get() {
-    return _text.Text;
-  }
-});
-Object.defineProperty(exports, "Box", {
-  enumerable: true,
-  get: function get() {
-    return _box.Box;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function get() {
-    return _button.Button;
-  }
-});
-Object.defineProperty(exports, "TextInput", {
-  enumerable: true,
-  get: function get() {
-    return _textInput.TextInput;
-  }
-});
-Object.defineProperty(exports, "Arrange", {
-  enumerable: true,
-  get: function get() {
-    return _arrange.Arrange;
-  }
-});
-Object.defineProperty(exports, "Icon", {
-  enumerable: true,
-  get: function get() {
-    return _icon.Icon;
-  }
-});
-Object.defineProperty(exports, "IconButton", {
-  enumerable: true,
-  get: function get() {
-    return _iconButton.IconButton;
-  }
-});
-Object.defineProperty(exports, "TextButton", {
-  enumerable: true,
-  get: function get() {
-    return _textButton.TextButton;
-  }
-});
-Object.defineProperty(exports, "IconToggleGroup", {
-  enumerable: true,
-  get: function get() {
-    return _iconToggle.IconToggleGroup;
-  }
-});
-Object.defineProperty(exports, "IconToggle", {
-  enumerable: true,
-  get: function get() {
-    return _iconToggle.IconToggle;
-  }
-});
-Object.defineProperty(exports, "TextToggleGroup", {
-  enumerable: true,
-  get: function get() {
-    return _textToggle.TextToggleGroup;
-  }
-});
-Object.defineProperty(exports, "TextToggle", {
-  enumerable: true,
-  get: function get() {
-    return _textToggle.TextToggle;
-  }
-});
-Object.defineProperty(exports, "Stack", {
-  enumerable: true,
-  get: function get() {
-    return _stack.Stack;
-  }
-});
-
-var _text = require("./text");
-
-var _box = require("./box");
-
-var _button = require("./button");
-
-var _textInput = require("./text-input");
-
-var _arrange = require("./arrange");
-
-var _icon = require("./icon");
-
-var _iconButton = require("./icon-button");
-
-var _textButton = require("./text-button");
-
-var _iconToggle = require("./icon-toggle");
-
-var _textToggle = require("./text-toggle");
-
-var _stack = require("./stack");
+export { Text } from "./text";
+export { Box } from "./box";
+export { Button } from "./button";
+export { TextInput } from "./text-input";
+export { Arrange } from "./arrange";
+export { Icon } from "./icon";
+export { IconButton } from "./icon-button";
+export { TextButton } from "./text-button";
+export { IconToggleGroup, IconToggle } from "./icon-toggle";
+export { TextToggleGroup, TextToggle } from "./text-toggle";
+export { Stack } from "./stack";

package/es/components/stack.js

@@ -1,94 +1,39 @@
-"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.Stack = 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 _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", "gap"];
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _templateObject;
 
-var _types = require("../types");
+import "core-js/modules/es.object.assign.js";
 
-var _excluded = ["children", "gap"];
+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.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > * + * {\n    ", ";\n  }\n"])), function (p) {
-  return (0, _utilities.getResponsiveSpace)('margin-top', p.gap);
+import { getColor, getIconSize, getResponsiveSpace } from '../utilities';
+import { PropTypes } from 'prop-types';
+import React from "react";
+import styled from "@emotion/styled";
+import { types } from '../types';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > * + * {\n    ", ";\n  }\n"])), function (p) {
+  return getResponsiveSpace('margin-top', p.gap);
 });
-
-var Stack = function Stack(_ref) {
+export var Stack = function Stack(_ref) {
   var children = _ref.children,
       gap = _ref.gap,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return __jsx(Wrapper, (0, _extends2.default)({
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     gap: gap
   }, props), children);
 };
-
-exports.Stack = Stack;
-Stack.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Stack",
-  "props": {
-    "children": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    },
-    "gap": {
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "enum",
-          "value": [{
-            "value": "\"xs\"",
-            "computed": false
-          }, {
-            "value": "\"s\"",
-            "computed": false
-          }, {
-            "value": "\"m\"",
-            "computed": false
-          }, {
-            "value": "\"l\"",
-            "computed": false
-          }, {
-            "value": "\"xl\"",
-            "computed": false
-          }, {
-            "value": "\"xxl\"",
-            "computed": false
-          }]
-        }, {
-          "name": "number"
-        }, {
-          "name": "string"
-        }, {
-          "name": "object"
-        }]
-      },
-      "required": false,
-      "description": ""
-    }
-  }
+Stack.propTypes = {
+  children: PropTypes.node,
+  gap: types.space
 };

package/es/components/text-button.js

@@ -1,81 +1,43 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextButton = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _components = require("../components");
+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"];
 
-var _react = _interopRequireDefault(require("react"));
+var _templateObject;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+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"];
+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  padding: 0 8px;\n  gap: 8px;\n"])));
-
-var TextButton = function TextButton(_ref) {
+import { Icon } from '../components';
+import React from "react";
+import styled from "@emotion/styled";
+import PropTypes from "prop-types";
+import { ClearButtonBox } from '../foundational';
+var Wrapper = styled(ClearButtonBox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 8px;\n  gap: 8px;\n"])));
+export var TextButton = function TextButton(_ref) {
   var children = _ref.children,
       isDisabled = _ref.isDisabled,
       icon = _ref.icon,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return __jsx(Wrapper, (0, _extends2.default)({
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     disabled: isDisabled,
     icon: icon
-  }, props), icon && __jsx(_components.Icon, {
+  }, props), icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon
   }), children && children);
 };
-
-exports.TextButton = TextButton;
-TextButton.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "TextButton",
-  "props": {
-    "children": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    },
-    "icon": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    },
-    "onClick": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": ""
-    },
-    "isDisabled": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": ""
-    }
-  }
+TextButton.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  onClick: PropTypes.func,
+  isDisabled: PropTypes.bool
 };

package/es/components/text-input.js

@@ -1,88 +1,86 @@
-"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.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"));
+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";
+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";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.regexp.exec.js";
+var _excluded = ["value", "placeholder", "size", "label", "id", "icon"];
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var _utilities = require("../utilities");
+import "core-js/modules/es.object.assign.js";
 
-var _react = _interopRequireDefault(require("react"));
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-var _types = require("../types");
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-var _react2 = require("@emotion/react");
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-var _box = require("./box");
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-var _icon = require("./icon");
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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 = ["value", "placeholder", "size", "label", "id", "icon"];
+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, _templateObject5;
+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-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 inputSizesStyles = {
+import { getColor, getRadius, getTextSize } from '../utilities';
+import { PropTypes } from 'prop-types';
+import React from "react";
+import styled from "@emotion/styled";
+import { types } from '../types';
+import { css } from '@emotion/react';
+import { Box } from './box';
+import { Icon } from './icon';
+import { transitions } from '../foundational';
+var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-color-fieldBorder: var(--grn-color-fade3);\n  --grn-color-fieldBorder-hover: var(--grn-color-fade6);\n"])));
+var sizesStyles = {
   s: {
     height: 'var(--grn-textBoxHeight-s)',
-    padding: '0 var(--grn-fieldTextBoxPaddingX-s)'
+    padding: '0 8px',
+    labelGap: '2px',
+    iconOffsetPx: 8,
+    iconTextGapPx: 4
   },
   m: {
     height: 'var(--grn-textBoxHeight-m)',
-    padding: '0 var(--grn-fieldTextBoxPaddingX-m)'
-  }
-};
-var sizesStyles = {
-  s: {
-    labelGap: 2,
-    iconOffset: 8,
-    iconTextGap: 4
-  },
-  m: {
-    labelGap: 4,
-    iconOffset: 12,
-    iconTextGap: 8
+    padding: '0 12px',
+    labelGap: '4px',
+    iconOffsetPx: 12,
+    iconTextGapPx: 8
   }
 };
-
-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 Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  font-size: ", ";\n"])), variables, function (p) {
+  return getTextSize(p.size);
 });
-
-var Label = _styled.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin-bottom: ", "px;\n"])), function (p) {
+var Label = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  margin-bottom: ", ";\n"])), function (p) {
   return sizesStyles[p.size].labelGap;
 });
-
-var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;  \n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  border-radius: ", ";\n  ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), _foundational.transitions, function (p) {
-  return (0, _utilities.getRadius)('s');
+var InputField = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition-property: border-color;  \n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  border-radius: ", ";\n  height: ", ";\n  padding: ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), transitions, function (p) {
+  return getRadius('s');
 }, function (p) {
-  return inputSizesStyles[p.size];
+  return sizesStyles[p.size].height;
+}, function (p) {
+  return sizesStyles[p.size].padding;
 }, function (p) {
   return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");
-}, (0, _utilities.getColor)('grey5'));
-
-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  pointer-events: none;\n"])), function (p) {
-  return sizesStyles[p.size].iconOffset;
+}, getColor('grey5'));
+var IconSection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  margin: auto;\n  left: ", "px;\n  top: 0; \n  bottom: 0;\n  height: fit-content;\n  pointer-events: none;\n"])), function (p) {
+  return sizesStyles[p.size].iconOffsetPx;
 });
-
-var TextInput = function TextInput(_ref) {
+export var TextInput = function TextInput(_ref) {
   var value = _ref.value,
       placeholder = _ref.placeholder,
       _ref$size = _ref.size,
@@ -90,37 +88,36 @@ var TextInput = function TextInput(_ref) {
       label = _ref.label,
       id = _ref.id,
       icon = _ref.icon,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  var iconRef = _react.default.useRef(null);
+  var iconRef = React.useRef(null);
 
-  var _React$useState = _react.default.useState(),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
       iconWidth = _React$useState2[0],
       setIconWidth = _React$useState2[1];
 
-  _react.default.useEffect(function () {
+  React.useEffect(function () {
     if (iconRef.current) {
       setIconWidth(iconRef.current.getBoundingClientRect().width);
     }
   }, []);
-
-  var paddingLeft = icon && sizesStyles[size].iconOffset + iconWidth + sizesStyles[size].iconTextGap;
-  return __jsx(Wrapper, {
+  var paddingLeft = icon && sizesStyles[size].iconOffsetPx + iconWidth + sizesStyles[size].iconTextGapPx;
+  return /*#__PURE__*/React.createElement(Wrapper, {
     size: size,
     type: "text"
-  }, label && __jsx(Label, {
+  }, label && /*#__PURE__*/React.createElement(Label, {
     htmlFor: id,
     size: size
-  }, label), __jsx(_box.Box, {
+  }, label), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
-  }, icon && __jsx(IconSection, {
+  }, icon && /*#__PURE__*/React.createElement(IconSection, {
     size: size
-  }, __jsx(_icon.Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     ref: iconRef,
     icon: icon,
     size: size
-  })), __jsx(InputField, (0, _extends2.default)({
+  })), /*#__PURE__*/React.createElement(InputField, Object.assign({
     value: value,
     placeholder: placeholder,
     size: size,
@@ -130,70 +127,11 @@ var TextInput = function TextInput(_ref) {
     paddingLeft: paddingLeft
   }, props))));
 };
-
-exports.TextInput = TextInput;
-TextInput.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "TextInput",
-  "props": {
-    "size": {
-      "defaultValue": {
-        "value": "'m'",
-        "computed": false
-      },
-      "type": {
-        "name": "enum",
-        "value": [{
-          "value": "\"s\"",
-          "computed": false
-        }, {
-          "value": "\"m\"",
-          "computed": false
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
-    "id": {
-      "type": {
-        "name": "string"
-      },
-      "required": true,
-      "description": ""
-    },
-    "placeholder": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "value": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "label": {
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "string"
-        }, {
-          "name": "node"
-        }]
-      },
-      "required": false,
-      "description": ""
-    },
-    "icon": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": ""
-    }
-  }
+TextInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  size: types.fieldSize,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.node
 };