@planningcenter/tapestry-react 2.6.0-rc.1 → 2.6.0-rc.12

package/dist/cjs/Tooltip/Tooltip.js

@@ -60,8 +60,8 @@ function Tooltip(props, ref) {
   var isPageInView = true;
   var isFocused = false;
   var isMouseDown = false;
-  var openTimeoutId = null;
-  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+  var openTimeoutId = (0, _react.useRef)(null);
+  var closeTimeoutId = (0, _react.useRef)(null); // prevents tooltips showing when focused and navigating back to a page after leaving
 
   var cleanupPageViewChange = (0, _react.useCallback)((0, _utils.pageViewChange)(function (inView) {
     return setTimeout(function () {
@@ -77,21 +77,21 @@ function Tooltip(props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
-      clearTimeout(openTimeoutId);
-      clearTimeout(closeTimeoutId);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
       cleanupPageViewChange();
     };
   }, []);
 
   var open = function open() {
-    clearTimeout(closeTimeoutId);
-    closeTimeoutId = null;
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
     setIsPopoverOpen(true);
   };
 
   var close = function close() {
-    clearTimeout(openTimeoutId);
-    openTimeoutId = null;
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
     setIsPopoverOpen(false);
   };
 
@@ -119,13 +119,13 @@ function Tooltip(props, ref) {
   var createOpenTimeout = (0, _react.useCallback)(function () {
     clearGlobalTimeout();
 
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId);
-      closeTimeoutId = null;
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
 
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS');
-        openTimeoutId = setTimeout(function () {
+        openTimeoutId.current = setTimeout(function () {
           return open();
         }, instantDelay ? 0 : openDelay);
       }
@@ -134,11 +134,11 @@ function Tooltip(props, ref) {
   var createCloseTimeout = (0, _react.useCallback)(function () {
     startGlobalTimeout();
 
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId);
-      openTimeoutId = null;
-      closeTimeoutId = setTimeout(function () {
-        close();
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
       }, closeDelay);
     }
   });

package/dist/cjs/index.d.js

@@ -9,7 +9,6 @@ var _exportNames = {
   Avatar: true,
   Badge: true,
   Calendar: true,
-  Checkbox: true,
   CheckboxCard: true,
   CheckboxGroup: true,
   ChurchCenterStatus: true,
@@ -31,11 +30,19 @@ var _exportNames = {
   Icon: true,
   Link: true,
   LinkList: true,
-  List: true,
   Logo: true,
   Menu: true,
   Modal: true,
   NumberField: true,
+  PageActions: true,
+  PageBody: true,
+  PageButton: true,
+  PageDropdown: true,
+  PageHeader: true,
+  PageTab: true,
+  PageTabList: true,
+  PageTitle: true,
+  PageToolbar: true,
   PagerView: true,
   Pagination: true,
   Progress: true,
@@ -46,9 +53,7 @@ var _exportNames = {
   HeadingUppercase: true,
   SegmentedControl: true,
   SegmentedTabs: true,
-  Select: true,
   Sidebar: true,
-  Sortable: true,
   StepperField: true,
   StepperProgress: true,
   Summary: true,
@@ -60,9 +65,14 @@ var _exportNames = {
   TokenInput: true,
   Tooltip: true,
   VariantProvider: true,
-  Wizard: true
+  Wizard: true,
+  Checkbox: true,
+  Input: true,
+  List: true,
+  Select: true,
+  Sortable: true
 };
-exports.Wizard = exports.VariantProvider = exports.Tooltip = exports.TokenInput = exports.Toolbar = exports.TimeField = exports.TextArea = exports.Tabs = exports.Table = exports.Summary = exports.StepperProgress = exports.StepperField = exports.Sortable = exports.Sidebar = exports.Select = exports.SegmentedTabs = exports.SegmentedControl = exports.HeadingUppercase = exports.Section = exports.ScreenReader = exports.RangeSlider = exports.Radio = exports.Progress = exports.Pagination = exports.PagerView = exports.NumberField = exports.Modal = exports.Menu = exports.Logo = exports.List = exports.LinkList = exports.Link = exports.Icon = exports.Highlight = exports.HelperDrawer = exports.Heading = exports.FieldSet = exports.Form = exports.Field = exports.EditActions = exports.Dropdown = exports.Drawer = exports.DragDrop = exports.DateField = exports.DataTable = exports.Combobox = exports.ColumnView = exports.Collapse = exports.ChurchCenterStatus = exports.CheckboxGroup = exports.CheckboxCard = exports.Checkbox = exports.Calendar = exports.Badge = exports.Avatar = exports.utils = exports.server = exports.hooks = exports.designSystem = void 0;
+exports.Sortable = exports.Select = exports.List = exports.Input = exports.Checkbox = exports.Wizard = exports.VariantProvider = exports.Tooltip = exports.TokenInput = exports.Toolbar = exports.TimeField = exports.TextArea = exports.Tabs = exports.Table = exports.Summary = exports.StepperProgress = exports.StepperField = exports.Sidebar = exports.SegmentedTabs = exports.SegmentedControl = exports.HeadingUppercase = exports.Section = exports.ScreenReader = exports.RangeSlider = exports.Radio = exports.Progress = exports.Pagination = exports.PagerView = exports.PageToolbar = exports.PageTitle = exports.PageTabList = exports.PageTab = exports.PageHeader = exports.PageDropdown = exports.PageButton = exports.PageBody = exports.PageActions = exports.NumberField = exports.Modal = exports.Menu = exports.Logo = exports.LinkList = exports.Link = exports.Icon = exports.Highlight = exports.HelperDrawer = exports.Heading = exports.FieldSet = exports.Form = exports.Field = exports.EditActions = exports.Dropdown = exports.Drawer = exports.DragDrop = exports.DateField = exports.DataTable = exports.Combobox = exports.ColumnView = exports.Collapse = exports.ChurchCenterStatus = exports.CheckboxGroup = exports.CheckboxCard = exports.Calendar = exports.Badge = exports.Avatar = exports.utils = exports.server = exports.hooks = exports.designSystem = void 0;
 
 var _Alert = require("./Alert");
 
@@ -136,15 +146,6 @@ Object.keys(_Group).forEach(function (key) {
   exports[key] = _Group[key];
 });
 
-var _Input = require("./Input");
-
-Object.keys(_Input).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Input[key]) return;
-  exports[key] = _Input[key];
-});
-
 var _Popover = require("./Popover");
 
 Object.keys(_Popover).forEach(function (key) {
@@ -248,8 +249,6 @@ var Badge;
 exports.Badge = Badge;
 var Calendar;
 exports.Calendar = Calendar;
-var Checkbox;
-exports.Checkbox = Checkbox;
 var CheckboxCard;
 exports.CheckboxCard = CheckboxCard;
 var CheckboxGroup;
@@ -292,8 +291,6 @@ var Link;
 exports.Link = Link;
 var LinkList;
 exports.LinkList = LinkList;
-var List;
-exports.List = List;
 var Logo;
 exports.Logo = Logo;
 var Menu;
@@ -302,6 +299,24 @@ var Modal;
 exports.Modal = Modal;
 var NumberField;
 exports.NumberField = NumberField;
+var PageActions;
+exports.PageActions = PageActions;
+var PageBody;
+exports.PageBody = PageBody;
+var PageButton;
+exports.PageButton = PageButton;
+var PageDropdown;
+exports.PageDropdown = PageDropdown;
+var PageHeader;
+exports.PageHeader = PageHeader;
+var PageTab;
+exports.PageTab = PageTab;
+var PageTabList;
+exports.PageTabList = PageTabList;
+var PageTitle;
+exports.PageTitle = PageTitle;
+var PageToolbar;
+exports.PageToolbar = PageToolbar;
 var PagerView;
 exports.PagerView = PagerView;
 var Pagination;
@@ -322,12 +337,8 @@ var SegmentedControl;
 exports.SegmentedControl = SegmentedControl;
 var SegmentedTabs;
 exports.SegmentedTabs = SegmentedTabs;
-var Select;
-exports.Select = Select;
 var Sidebar;
 exports.Sidebar = Sidebar;
-var Sortable;
-exports.Sortable = Sortable;
 var StepperField;
 exports.StepperField = StepperField;
 var StepperProgress;
@@ -350,5 +361,39 @@ var Tooltip;
 exports.Tooltip = Tooltip;
 var VariantProvider;
 exports.VariantProvider = VariantProvider;
-var Wizard;
-exports.Wizard = Wizard;
+var Wizard; // ============
+// Manual Types
+// ===========
+// These are components written in JS, where we can provide very small (one prop at a time) useful
+// typings for consumers.
+// ============
+
+exports.Wizard = Wizard;
+// ========
+// Checkbox
+// ========
+var Checkbox; // =====
+// Input
+// =====
+
+exports.Checkbox = Checkbox;
+var Input; // ====
+// List
+// ====
+
+exports.Input = Input;
+var List; // ======
+// Select
+// ======
+
+exports.List = List;
+var Select; // ========
+// Sortable
+// ========
+
+exports.Select = Select;
+var Sortable; // =====================
+// Typescript Components
+// =====================
+
+exports.Sortable = Sortable;

package/dist/cjs/system/split-styles.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = _default;
+exports["default"] = SplitStyles;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -17,7 +17,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _default(_ref) {
+function SplitStyles(_ref) {
   var className = _ref.className,
       _ref$mediaQueries = _ref.mediaQueries,
       mediaQueries = _ref$mediaQueries === void 0 ? {} : _ref$mediaQueries,

package/dist/esm/Button/Button.js

@@ -210,6 +210,13 @@ export function Button(_ref) {
 
   if (to) {
     restProps['href'] = to;
+  } // remove `type` if either `to` or `href` is specified
+
+
+  if (to || restProps.href) {
+    buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
+      type: null
+    });
   } // apply stroke defaults and higher z-index when hovering to show outline in group properly
 
 
@@ -244,7 +251,7 @@ export function Button(_ref) {
       restProps = mergeProps(restProps, wrapperProps);
     }
 
-    if (type && restProps.as && restProps.as !== "button") {
+    if (buttonProps.type && restProps.as && restProps.as !== "button") {
       console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }

package/dist/esm/Button/Button.test.js

@@ -1,25 +1,83 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Button } from './Button';
+
+var _ref = /*#__PURE__*/React.createElement(Button, null);
+
+it("should render as <button> with type=\"button\" by default", function () {
+  var _render = render(_ref),
+      container = _render.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('button');
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+});
+
+it("should render as <button> with type=\"submit\"", function () {
+  var _render2 = render(_ref2),
+      container = _render2.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('submit');
+});
 it("should render title", function () {
   var title = 'Hello';
 
-  var _render = render( /*#__PURE__*/React.createElement(Button, {
+  var _render3 = render( /*#__PURE__*/React.createElement(Button, {
     title: title
   })),
-      getByText = _render.getByText;
+      getByText = _render3.getByText;
 
   getByText(title);
 });
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, {
+  to: "#"
+});
+
+it("should render <a> without a type if \"to\" is provided", function () {
+  var _render4 = render(_ref3),
+      container = _render4.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Button, {
+  href: "#"
+});
+
+it("should render <a> without a type if \"href\" is provided", function () {
+  var _render5 = render(_ref4),
+      container = _render5.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Button, {
+  to: "#"
+});
+
+it("should render <a> with \"href\" if \"to\" is specifed", function () {
+  var _render6 = render(_ref5),
+      container = _render6.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('href')).toEqual('#');
+});
 it("should render href and external link values", function () {
   var title = 'Hello';
 
-  var _render2 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render7 = render( /*#__PURE__*/React.createElement(Button, {
     external: true,
     title: title,
     to: "https://www.planningcenter.com"
   })),
-      getByText = _render2.getByText;
+      getByText = _render7.getByText;
 
   var button = getByText(title);
   expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -29,20 +87,20 @@ it("should render href and external link values", function () {
 it("should call onClick when clicked or Enter or Space key is pressed", function () {
   var onClick = jest.fn();
 
-  var _render3 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render8 = render( /*#__PURE__*/React.createElement(Button, {
     onClick: onClick
   })),
-      container = _render3.container;
+      container = _render8.container;
 
   fireEvent.click(container.firstChild);
   expect(onClick).toHaveBeenCalledTimes(1);
 });
 
-var _ref = /*#__PURE__*/React.createElement(Button, null);
+var _ref6 = /*#__PURE__*/React.createElement(Button, null);
 
 it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
-  var _render4 = render(_ref),
-      container = _render4.container;
+  var _render9 = render(_ref6),
+      container = _render9.container;
 
   fireEvent.keyDown(container.firstChild, {
     key: 'Enter'

package/dist/esm/DataTable/components/BodyRow.js

@@ -29,8 +29,8 @@ function BodyRow(_ref) {
 
   var props = _objectSpread({
     ref: innerRef,
-    onClick: onRowClick && function () {
-      return onRowClick(rowData, rowIndex);
+    onClick: function onClick(event) {
+      return onRowClick && onRowClick(rowData, rowIndex, event);
     },
     onMouseEnter: bindKeyboardShortcuts,
     onMouseLeave: unbindKeyboardShortcuts,

package/dist/esm/DataTable/components/CheckboxCell.js

@@ -94,7 +94,7 @@ function CheckboxCell(_ref) {
     stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.minus,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Minus"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Fill"
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.checked,
     className: "tapestry-react-reset tapestry-react-Checkbox-Checked"

package/dist/esm/DataTable/hooks/useCollapsibleRows.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { createContext, useCallback, useContext, useEffect } from 'react';
 import useConstant from '../../hooks/useConstant';
-import create from 'zustand';
+import { create } from 'zustand';
 import { range } from '../../utils';
 export var CollapsibleRowsContext = /*#__PURE__*/createContext(null);
 export function useCollapsibleRowsStore(selector) {

package/dist/esm/DragDrop/DragDrop.js

@@ -10,6 +10,8 @@ import React, { Children, Fragment, createElement, createContext, useContext, us
 import { createPortal } from 'react-dom';
 import * as RBDND from '@planningcenter/react-beautiful-dnd';
 import mitt from 'mitt';
+import { getThemeDataAttribute } from '../ThemeProvider/styles';
+import { useThemeValue } from '../system';
 import StackView from '../StackView';
 var DragDropContext = /*#__PURE__*/createContext(false);
 var DroppableContext = /*#__PURE__*/createContext(false);
@@ -36,10 +38,13 @@ function Provider(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, ["onDragStart", "onDragEnd"]);
 
   var hasParentDragDrop = useDragDrop();
+  var themeId = useThemeValue('id');
 
   if (typeof document !== 'undefined' && portalNode === null) {
     portalNode = document.createElement('div');
     portalNode.id = 'rbd-portal';
+    portalNode.className = 'tapestry-react-reset';
+    portalNode.setAttribute(getThemeDataAttribute(themeId), 'true');
     document.body.appendChild(portalNode);
   }
 

package/dist/esm/Dropdown/Dropdown.js

@@ -16,7 +16,7 @@ import Menu from '../Menu';
 import Popover from '../Popover';
 import { cloneChildren, generateId } from '../utils';
 import Item, { ITEM_DISPLAY_NAME } from './Item';
-import Link, { LINK_DISPLAY_NAME, LINK_DATA } from './Link';
+import Link, { LINK_DISPLAY_NAME } from './Link';
 
 var Dropdown = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Dropdown, _Component);
@@ -67,7 +67,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         _this.popover.focusAnchor();
       }
 
-      if (data === LINK_DATA) {
+      if (node.tagName === 'A' && event.type !== 'click') {
         node.click();
       } else if (_this.props.onSelect) {
         _this.props.onSelect(data);
@@ -96,7 +96,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         keepInView = _this$props.keepInView,
         lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
         matchWidths = _this$props.matchWidths,
-        onClick = _this$props.onClick,
+        _onClick = _this$props.onClick,
         onClose = _this$props.onClose,
         onKeyDown = _this$props.onKeyDown,
         onOpen = _this$props.onOpen,
@@ -179,12 +179,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
               }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
                 name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                 size: 'sm'
-              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick() {
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick(event) {
                 _this2.togglePopover();
 
                 if (!isPopoverOpen) {
                   _this2.popover.focusAnchor();
                 }
+
+                _onClick && _onClick(event);
               }, _objectSpread2.onKeyDown = function onKeyDown(event) {
                 anchorProps.onKeyDown(event);
 

package/dist/esm/Dropdown/Link.js

@@ -6,7 +6,6 @@ import React, { Component } from 'react';
 import { ItemListItem } from '../ItemList';
 import Menu from '../Menu';
 export var LINK_DISPLAY_NAME = 'Dropdown.Link';
-export var LINK_DATA = 'link';
 
 var Link = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Link, _Component);
@@ -33,7 +32,7 @@ var Link = /*#__PURE__*/function (_Component) {
     }
 
     return /*#__PURE__*/React.createElement(ItemListItem, {
-      data: LINK_DATA,
+      data: "link",
       text: text,
       disabled: disabled,
       index: index

package/dist/esm/Input/InputLabel.js

@@ -1,79 +1,56 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+import React, { useCallback, useRef, useEffect } from 'react';
 import { getColor } from '../system';
 import Text from '../Text';
+import { useThemeProps } from '../system';
 import { inputs, inputLabels } from './utils';
 
-var InputLabel = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(InputLabel, _Component);
+function InputLabel(_ref) {
+  var controls = _ref.controls,
+      state = _ref.state,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["controls", "state"]);
 
-  function InputLabel() {
-    var _this;
+  var _useThemeProps = useThemeProps('inputLabel', restProps),
+      themeProps = _extends({}, _useThemeProps);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var input = useRef(null);
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+  if (controls) {
+    themeProps.id = controls + "-label";
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "focusInput", function () {
-      _this.input && _this.input.focus();
-    });
+  if (state) {
+    themeProps.color = getColor(state);
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOver", function () {
-      _this.input && _this.input.setState({
-        isHovered: true
-      });
+  useEffect(function () {
+    input.current = inputs[controls];
+    inputLabels[controls] = true;
+    return function () {
+      delete inputLabels[controls];
+    };
+  }, []);
+  var focusInput = useCallback(function () {
+    input.current && input.current.focus();
+  }, [input]);
+  var handleMouseOver = useCallback(function () {
+    input.current && input.current.setState({
+      isHovered: true
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOut", function () {
-      _this.input && _this.input.setState({
-        isHovered: false
-      });
+  }, [input]);
+  var handleMouseOut = useCallback(function () {
+    input.current && input.current.setState({
+      isHovered: false
     });
-
-    return _this;
-  }
-
-  var _proto = InputLabel.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.input = inputs[this.props.controls];
-    inputLabels[this.props.controls] = true;
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    delete inputLabels[this.props.controls];
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        controls = _this$props.controls,
-        state = _this$props.state,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["controls", "state"]);
-
-    if (controls) {
-      restProps.id = controls + "-label";
-    }
-
-    if (state) {
-      restProps.color = getColor(state);
-    }
-
-    return /*#__PURE__*/React.createElement(Text, _extends({
-      as: "label",
-      onMouseOver: this.handleMouseOver,
-      onMouseOut: this.handleMouseOut,
-      onClick: this.focusInput
-    }, restProps));
-  };
-
-  return InputLabel;
-}(Component);
+  }, [input]);
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "label",
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onClick: focusInput
+  }, themeProps));
+}
 
 InputLabel.displayName = 'Input.InputLabel';
 export default InputLabel;