@sproutsocial/racine 12.20.0 → 12.21.1

package/lib/ToggleHint/index.js

@@ -1,72 +1,54 @@
 var _excluded = ["icon", "isOpen", "openString", "closeString", "qa", "className"];
-
-function _extends() { _extends = Object.assign || 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); }
-
+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); }
 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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-import * as React from "react";
-import Icon from "../Icon";
-import Container, { IconText } from "./styles";
-
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import * as React from 'react';
+import Icon from '../Icon';
+import Container, { IconText } from './styles';
 /**
  * Icon (either chevron or plus/minus) indicating whether an element is open or closed.
- */
-var ToggleHint = /*#__PURE__*/function (_React$Component) {
+ */var ToggleHint = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ToggleHint, _React$Component);
-
   function ToggleHint() {
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
     _this.getIcon = function () {
-      if (_this.props.icon === "chevron") {
+      if (_this.props.icon === 'chevron') {
         return /*#__PURE__*/React.createElement(Icon, {
           name: "chevron-down"
         });
       }
-
       return /*#__PURE__*/React.createElement(Icon, {
-        name: _this.props.isOpen ? "minus" : "plus"
+        name: _this.props.isOpen ? 'minus' : 'plus'
       });
     };
-
     return _this;
   }
-
   var _proto = ToggleHint.prototype;
-
   _proto.render = function render() {
     var _this$props = this.props,
-        icon = _this$props.icon,
-        isOpen = _this$props.isOpen,
-        openString = _this$props.openString,
-        closeString = _this$props.closeString,
-        qa = _this$props.qa,
-        className = _this$props.className,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
+      icon = _this$props.icon,
+      isOpen = _this$props.isOpen,
+      openString = _this$props.openString,
+      closeString = _this$props.closeString,
+      qa = _this$props.qa,
+      className = _this$props.className,
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
     return /*#__PURE__*/React.createElement(Container, _extends({
       icon: icon,
       isOpen: isOpen,
-      "data-qa-togglehint-isopen": isOpen // $FlowIssue - upgrade v0.112.0
-
+      "data-qa-togglehint-isopen": isOpen
+      // $FlowIssue - upgrade v0.112.0
     }, qa, rest), this.getIcon(), /*#__PURE__*/React.createElement(IconText, null, isOpen ? closeString : openString));
   };
-
   return ToggleHint;
 }(React.Component);
-
 ToggleHint.defaultProps = {
   isOpen: false,
-  icon: "chevron"
+  icon: 'chevron'
 };
 export { ToggleHint as default };

package/lib/ToggleHint/styles.js

@@ -1,15 +1,16 @@
-import styled, { css } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { visuallyHidden } from "../utils/mixins";
+
+import styled, { css } from 'styled-components';
+import { COMMON } from '../utils/system-props';
+import { visuallyHidden } from '../utils/mixins';
 var Container = styled.div.attrs({
-  className: "ToggleHint"
+  className: 'ToggleHint'
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-9dc46e-0"
 })(["position:relative;display:inline-block;padding:", ";color:currentColor;", " ", ""], function (props) {
   return props.theme.space[100];
 }, function (props) {
-  return props.icon === "chevron" && css(["transition:transform ", ";", ""], function (props) {
+  return props.icon === 'chevron' && css(["transition:transform ", ";", ""], function (props) {
     return props.theme.duration.medium + " " + props.theme.easing.ease_inout;
   }, props.isOpen && css(["transform:rotateX(180deg);"]));
 }, COMMON);

package/lib/Token/index.js

@@ -1,36 +1,31 @@
 var _excluded = ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"];
-
-function _extends() { _extends = Object.assign || 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); }
-
+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); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import * as React from "react";
-import { useTextContent } from "../utils/hooks";
-import Container from "./styles";
-import Icon from "../Icon";
-import Box from "../Box";
-
+import * as React from 'react';
+import { useTextContent } from '../utils/hooks';
+import Container from './styles';
+import Icon from '../Icon';
+import Box from '../Box';
 var Token = function Token(_ref) {
   var children = _ref.children,
-      _ref$closeable = _ref.closeable,
-      closeable = _ref$closeable === void 0 ? true : _ref$closeable,
-      onClick = _ref.onClick,
-      qa = _ref.qa,
-      _ref$valid = _ref.valid,
-      valid = _ref$valid === void 0 ? true : _ref$valid,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$palette = _ref.palette,
-      palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var textContainer = useTextContent("");
+    _ref$closeable = _ref.closeable,
+    closeable = _ref$closeable === void 0 ? true : _ref$closeable,
+    onClick = _ref.onClick,
+    qa = _ref.qa,
+    _ref$valid = _ref.valid,
+    valid = _ref$valid === void 0 ? true : _ref$valid,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$palette = _ref.palette,
+    palette = _ref$palette === void 0 ? 'neutral' : _ref$palette,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var textContainer = useTextContent('');
   return /*#__PURE__*/React.createElement(Container, _extends({
     ref: textContainer,
     valid: valid,
     palette: palette,
-    type: closeable || onClick ? "button" : undefined,
-    as: closeable || onClick ? "button" : "div",
+    type: closeable || onClick ? 'button' : undefined,
+    as: closeable || onClick ? 'button' : 'div',
     closeable: closeable || onClick,
     disabled: disabled,
     onClick: onClick,
@@ -48,5 +43,4 @@ var Token = function Token(_ref) {
     size: "mini"
   })) : children);
 };
-
 export default Token;

package/lib/Token/styles.js

@@ -1,7 +1,8 @@
-import styled, { css } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing } from "../utils/mixins";
-import { useInteractiveColor } from "../utils/useInteractiveColor";
+
+import styled, { css } from 'styled-components';
+import { COMMON } from '../utils/system-props';
+import { focusRing } from '../utils/mixins';
+import { useInteractiveColor } from '../utils/useInteractiveColor';
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "sc-nyn5zy-0"
@@ -10,19 +11,19 @@ var Container = styled.button.withConfig({
   return css(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
 }, focusRing, function (_ref2) {
   var closeable = _ref2.closeable,
-      theme = _ref2.theme;
+    theme = _ref2.theme;
   return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, useInteractiveColor(theme.colors.container.border.base));
 }, function (_ref3) {
   var theme = _ref3.theme,
-      palette = _ref3.palette;
-  return palette === "blue" && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, useInteractiveColor(theme.colors.container.border.decorative.blue));
+    palette = _ref3.palette;
+  return palette === 'blue' && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, useInteractiveColor(theme.colors.container.border.decorative.blue));
 }, function (_ref4) {
   var disabled = _ref4.disabled,
-      theme = _ref4.theme;
+    theme = _ref4.theme;
   return disabled && css(["opacity:0.4;cursor:not-allowed;&:hover,&:active{box-shadow:none;border:1px solid ", ";}"], theme.colors.container.border.base);
 }, function (_ref5) {
   var valid = _ref5.valid,
-      theme = _ref5.theme;
+    theme = _ref5.theme;
   return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, useInteractiveColor(theme.colors.container.border.error));
 }, COMMON);
 export default Container;

package/lib/TokenInput/index.js

@@ -1,134 +1,110 @@
 var _excluded = ["autoFocus", "autocomplete", "disabled", "isInvalid", "hasWarning", "id", "name", "placeholder", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaDescribedby", "ariaLabel", "innerRef", "onAddToken", "onRemoveToken", "onChangeTokens", "onClickToken", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "tokens"];
-
-function _extends() { _extends = Object.assign || 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); }
-
+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); }
 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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-import * as React from "react";
-import Container from "./styles";
-import { asTokenSpec, delimitersAsRegExp } from "./util";
-import { Accessory } from "../Input/styles";
-import Box from "../Box";
-import Icon from "../Icon";
-import Token from "../Token";
-var DefaultDelimiters = [",", "Enter"];
-var ControlledPropNames = ["value", "hasFocus", "activeToken"];
-
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+import * as React from 'react';
+import Container from './styles';
+import { asTokenSpec, delimitersAsRegExp } from './util';
+import { Accessory } from '../Input/styles';
+import Box from '../Box';
+import Icon from '../Icon';
+import Token from '../Token';
+var DefaultDelimiters = [',', 'Enter'];
+var ControlledPropNames = ['value', 'hasFocus', 'activeToken'];
 var TokenInput = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(TokenInput, _React$Component);
-
   function TokenInput(props) {
     var _this;
-
     _this = _React$Component.call(this, props) || this;
     _this.delimiterMatcher = void 0;
-
     _this.handleChangeText = function (e) {
       var value = e.currentTarget.value;
       var onChange = _this.props.onChange;
-
       _this.setState({
         value: value
       });
-
       onChange == null ? void 0 : onChange(e, value);
     };
-
     _this.handleFocus = function (e) {
       var onFocus = _this.props.onFocus;
-
       _this.setState({
         hasFocus: true
       });
-
       onFocus == null ? void 0 : onFocus(e);
     };
-
     _this.handleBlur = function (e) {
       var onBlur = _this.props.onBlur;
       if (onBlur) onBlur(e);
-
       _this.setState({
         hasFocus: false
       });
     };
-
     _this.handleKeyUp = function (e) {
       _this.props.onKeyUp == null ? void 0 : _this.props.onKeyUp(e, e.currentTarget.value);
     };
-
     _this.handleKeyDown = function (e) {
       var onKeyDown = _this.props.onKeyDown;
       var key = e.key,
-          currentTarget = e.currentTarget;
+        currentTarget = e.currentTarget;
       var text = currentTarget.value;
-      if (onKeyDown) onKeyDown(e, text); // keyPress event runs before change
+      if (onKeyDown) onKeyDown(e, text);
+
+      // keyPress event runs before change
       // Prevent event from bubbling up and calling change, which can lead to comma in value
 
       if (_this.isDelimiter(key)) {
         if (text) {
           _this.spawnNewTokens([text]);
-
           e.preventDefault();
         }
-      } else if (key === "Backspace") {
-        if (text === "") {
+      } else if (key === 'Backspace') {
+        if (text === '') {
           _this.deleteToken();
         }
       }
     };
-
     _this.handlePaste = function (e) {
-      var text = e.clipboardData.getData("text");
+      var text = e.clipboardData.getData('text');
       var onPaste = _this.props.onPaste;
       if (onPaste) onPaste(e, text);
       var subtexts = text.split(_this.delimiterMatcher);
       var texts = subtexts.filter(function (subtext) {
         return subtext.length;
       });
-
       if (texts.length > 1) {
         _this.spawnNewTokens(texts);
-
         e.preventDefault();
       }
     };
-
     _this.handleClickToken = function (e, token) {
       var _this$props = _this.props,
-          onClickToken = _this$props.onClickToken,
-          disabled = _this$props.disabled;
+        onClickToken = _this$props.onClickToken,
+        disabled = _this$props.disabled;
       if (onClickToken) onClickToken(e, token.id);
-
       if (!disabled) {
         _this.deleteToken(token.id);
       }
     };
-
     var hasFocus = props.hasFocus,
-        activeToken = props.activeToken,
-        _value = props.value,
-        delimiters = props.delimiters;
+      activeToken = props.activeToken,
+      _value = props.value,
+      delimiters = props.delimiters;
     _this.delimiterMatcher = delimitersAsRegExp(delimiters || DefaultDelimiters);
     _this.state = {
       prevProps: props,
       hasFocus: hasFocus || false,
       activeToken: activeToken,
-      value: _value || ""
+      value: _value || ''
     };
     return _this;
   }
-
   TokenInput.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
     var prevProps = state.prevProps;
     var modifiedState = {};
     ControlledPropNames.forEach(function (propName) {
       var currentProp = props[propName];
-
       if (currentProp !== prevProps[propName]) {
         modifiedState[propName] = currentProp;
       }
@@ -136,48 +112,41 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
     modifiedState.prevProps = props;
     return modifiedState;
   };
-
   var _proto = TokenInput.prototype;
-
   _proto.isDelimiter = function isDelimiter(keyName) {
     var _this$props$delimiter = this.props.delimiters,
-        delimiters = _this$props$delimiter === void 0 ? DefaultDelimiters : _this$props$delimiter;
+      delimiters = _this$props$delimiter === void 0 ? DefaultDelimiters : _this$props$delimiter;
     return delimiters.includes(keyName);
   };
-
   _proto.spawnNewTokens = function spawnNewTokens(texts) {
     var _this$props2 = this.props,
-        onAddToken = _this$props2.onAddToken,
-        onChangeTokens = _this$props2.onChangeTokens,
-        _this$props2$tokenMax = _this$props2.tokenMaxLength,
-        max = _this$props2$tokenMax === void 0 ? Infinity : _this$props2$tokenMax,
-        _this$props2$tokens = _this$props2.tokens,
-        tokens = _this$props2$tokens === void 0 ? [] : _this$props2$tokens;
+      onAddToken = _this$props2.onAddToken,
+      onChangeTokens = _this$props2.onChangeTokens,
+      _this$props2$tokenMax = _this$props2.tokenMaxLength,
+      max = _this$props2$tokenMax === void 0 ? Infinity : _this$props2$tokenMax,
+      _this$props2$tokens = _this$props2.tokens,
+      tokens = _this$props2$tokens === void 0 ? [] : _this$props2$tokens;
     var tokenSpecs = texts.map(function (text) {
       return asTokenSpec(text.slice(0, max));
     });
-
     if (onAddToken) {
       tokenSpecs.forEach(onAddToken);
     } else if (onChangeTokens) {
       onChangeTokens(tokens.concat(tokenSpecs));
     }
-
     this.setState({
-      value: ""
+      value: ''
     });
   };
-
   _proto.deleteToken = function deleteToken(tokenId) {
     var _this$props3 = this.props,
-        onRemoveToken = _this$props3.onRemoveToken,
-        onChangeTokens = _this$props3.onChangeTokens,
-        _this$props3$tokens = _this$props3.tokens,
-        tokens = _this$props3$tokens === void 0 ? [] : _this$props3$tokens;
+      onRemoveToken = _this$props3.onRemoveToken,
+      onChangeTokens = _this$props3.onChangeTokens,
+      _this$props3$tokens = _this$props3.tokens,
+      tokens = _this$props3$tokens === void 0 ? [] : _this$props3$tokens;
     var count = tokens.length;
     if (count === 0) return;
     var id = tokenId != null ? tokenId : tokens[count - 1].id;
-
     if (onRemoveToken) {
       onRemoveToken(id);
     } else if (onChangeTokens) {
@@ -185,23 +154,20 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
         return tokenSpec.id !== id;
       }));
     }
-
     this.setState({
-      value: ""
+      value: ''
     });
   };
-
   _proto.renderToken = function renderToken(token) {
     var _this2 = this;
-
     var _this$props4 = this.props,
-        defaultIconName = _this$props4.iconName,
-        disabled = _this$props4.disabled;
+      defaultIconName = _this$props4.iconName,
+      disabled = _this$props4.disabled;
     var activeId = this.state.activeToken;
     var id = token.id,
-        tokenIconName = token.iconName,
-        value = token.value,
-        valid = token.valid;
+      tokenIconName = token.iconName,
+      value = token.value,
+      valid = token.valid;
     var iconName = tokenIconName || defaultIconName;
     var isActive = activeId === id;
     return /*#__PURE__*/React.createElement(Token, {
@@ -221,10 +187,8 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       pr: 300
     }), value));
   };
-
   _proto.renderTokens = function renderTokens(tokens) {
     var _this3 = this;
-
     return tokens.map(function (token) {
       return /*#__PURE__*/React.createElement("div", {
         key: token.id,
@@ -232,42 +196,40 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       }, _this3.renderToken(token));
     });
   };
-
   _proto.render = function render() {
     var _this$props5 = this.props,
-        autoFocus = _this$props5.autoFocus,
-        autocomplete = _this$props5.autocomplete,
-        disabled = _this$props5.disabled,
-        isInvalid = _this$props5.isInvalid,
-        hasWarning = _this$props5.hasWarning,
-        id = _this$props5.id,
-        name = _this$props5.name,
-        placeholder = _this$props5.placeholder,
-        required = _this$props5.required,
-        value = _this$props5.value,
-        elemBefore = _this$props5.elemBefore,
-        elemAfter = _this$props5.elemAfter,
-        maxLength = _this$props5.maxLength,
-        ariaDescribedby = _this$props5.ariaDescribedby,
-        ariaLabel = _this$props5.ariaLabel,
-        innerRef = _this$props5.innerRef,
-        onAddToken = _this$props5.onAddToken,
-        onRemoveToken = _this$props5.onRemoveToken,
-        onChangeTokens = _this$props5.onChangeTokens,
-        onClickToken = _this$props5.onClickToken,
-        onBlur = _this$props5.onBlur,
-        onChange = _this$props5.onChange,
-        onFocus = _this$props5.onFocus,
-        onKeyDown = _this$props5.onKeyDown,
-        onKeyUp = _this$props5.onKeyUp,
-        onPaste = _this$props5.onPaste,
-        _this$props5$inputPro = _this$props5.inputProps,
-        inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro,
-        _this$props5$qa = _this$props5.qa,
-        qa = _this$props5$qa === void 0 ? {} : _this$props5$qa,
-        tokens = _this$props5.tokens,
-        rest = _objectWithoutPropertiesLoose(_this$props5, _excluded);
-
+      autoFocus = _this$props5.autoFocus,
+      autocomplete = _this$props5.autocomplete,
+      disabled = _this$props5.disabled,
+      isInvalid = _this$props5.isInvalid,
+      hasWarning = _this$props5.hasWarning,
+      id = _this$props5.id,
+      name = _this$props5.name,
+      placeholder = _this$props5.placeholder,
+      required = _this$props5.required,
+      value = _this$props5.value,
+      elemBefore = _this$props5.elemBefore,
+      elemAfter = _this$props5.elemAfter,
+      maxLength = _this$props5.maxLength,
+      ariaDescribedby = _this$props5.ariaDescribedby,
+      ariaLabel = _this$props5.ariaLabel,
+      innerRef = _this$props5.innerRef,
+      onAddToken = _this$props5.onAddToken,
+      onRemoveToken = _this$props5.onRemoveToken,
+      onChangeTokens = _this$props5.onChangeTokens,
+      onClickToken = _this$props5.onClickToken,
+      onBlur = _this$props5.onBlur,
+      onChange = _this$props5.onChange,
+      onFocus = _this$props5.onFocus,
+      onKeyDown = _this$props5.onKeyDown,
+      onKeyUp = _this$props5.onKeyUp,
+      onPaste = _this$props5.onPaste,
+      _this$props5$inputPro = _this$props5.inputProps,
+      inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro,
+      _this$props5$qa = _this$props5.qa,
+      qa = _this$props5$qa === void 0 ? {} : _this$props5$qa,
+      tokens = _this$props5.tokens,
+      rest = _objectWithoutPropertiesLoose(_this$props5, _excluded);
     var state = this.state;
     return /*#__PURE__*/React.createElement(Container, _extends({
       hasBeforeElement: !!elemBefore,
@@ -275,8 +237,8 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       disabled: disabled,
       invalid: !!isInvalid,
       warning: hasWarning,
-      focused: state.hasFocus // $FlowIssue - upgrade v0.112.0
-
+      focused: state.hasFocus
+      // $FlowIssue - upgrade v0.112.0
     }, rest), elemBefore && /*#__PURE__*/React.createElement(Accessory, {
       before: true
     }, elemBefore), tokens && this.renderTokens(tokens), /*#__PURE__*/React.createElement("input", _extends({
@@ -300,15 +262,13 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       onKeyUp: this.handleKeyUp,
       onPaste: this.handlePaste,
       ref: innerRef,
-      "data-qa-input": name || "",
+      "data-qa-input": name || '',
       "data-qa-input-isdisabled": !!disabled,
       "data-qa-input-isrequired": !!required
     }, qa, inputProps)), elemAfter && /*#__PURE__*/React.createElement(Accessory, {
       after: true
     }, elemAfter));
   };
-
   return TokenInput;
 }(React.Component);
-
 export { TokenInput as default };

package/lib/TokenInput/styles.js

@@ -1,6 +1,7 @@
-import styled, { css } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing } from "../utils/mixins";
+
+import styled, { css } from 'styled-components';
+import { COMMON } from '../utils/system-props';
+import { focusRing } from '../utils/mixins';
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-19um4n4-0"
@@ -69,5 +70,5 @@ var Container = styled.div.withConfig({
     return props.theme.colors.form.border.warning;
   });
 }, COMMON);
-Container.displayName = "TokenInputContainer";
+Container.displayName = 'TokenInputContainer';
 export default Container;

package/lib/TokenInput/util.js

@@ -1,4 +1,6 @@
-import uniqueId from "lodash.uniqueid";
+
+
+import uniqueId from 'lodash.uniqueid';
 export var asTokenSpec = function asTokenSpec(text) {
   return {
     id: uniqueId(text + "-"),
@@ -6,12 +8,12 @@ export var asTokenSpec = function asTokenSpec(text) {
   };
 };
 var KeyNameToRegExpChar = {
-  Enter: "\\n"
+  Enter: '\\n'
 };
 export var delimitersAsRegExp = function delimitersAsRegExp(delimiters) {
   if (!delimiters) return /[,\n]/;
   var chars = delimiters.map(function (key) {
     return KeyNameToRegExpChar[key] || key;
-  }).join("");
+  }).join('');
   return RegExp("[" + chars + "]");
 };