@sproutsocial/racine 15.0.1 → 15.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+## 15.1.0
+
+### Minor Changes
+
+- d5feb9c0: The `LoaderButton` component has been updated to have accessible visual contrast between the button and the loader. We've done this by applying an opacity directly to the `background-color` of the button, rather than the entire `button`.
+
+  | Mode  | Old                                                                                                                                 | New                                                                                                                                 |
+  | ----- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+  | Dark  | ![Screenshot 2023-06-01 at 1 46 55 PM](https://github.com/sproutsocial/racine/assets/29648040/eb54bdf0-8146-4846-9496-c074f3ca57e8) | ![Screenshot 2023-06-01 at 1 47 31 PM](https://github.com/sproutsocial/racine/assets/29648040/f8f27c6c-af53-4c51-8117-7b50be6952d7) |
+  | Light | ![Screenshot 2023-06-01 at 1 46 43 PM](https://github.com/sproutsocial/racine/assets/29648040/e2313590-51c6-4feb-adeb-6cde9087baf1) | ![Screenshot 2023-06-01 at 1 46 28 PM](https://github.com/sproutsocial/racine/assets/29648040/a7de5ef4-fe65-45e1-a7c9-9948f8eb1948) |
+
+- a75290d2: - Added screen reader support for the status of added and removed tokens.
+  - `iconProps` is now supported for tokens
+  - `iconName` on tokens now supports PartnerLogo names
+- b6ff36b9: `SpotIllustration` accessibility updates:
+  - type includes `svg` props, including `aria-label` and `aria-hidden`
+  - set default role to `img`
+- a31a7172: Label component now accepts the `required` prop which appends an asterisk to the end of the label
+
 ## 15.0.1
 
 ### Patch Changes

package/__flow__/TokenInput/TokenInput.flow.js

@@ -1,9 +1,12 @@
 // @flow
 import * as React from 'react';
-import type { EnumIconNames } from "../EnumIconNames.flow";
+import type { TypeIconProps, TypeIconName } from "../Icon/index.flow";
 export type TypeTokenSpec = {
   id: string,
-  iconName?: EnumIconNames,
+  iconName?: TypeIconName,
+  iconProps?: $Diff<TypeIconProps, {|
+    name: string
+  |}>,
   value: string,
   valid?: boolean,
   ...
@@ -12,7 +15,7 @@ export type TypeTokenInputProps = {
   /** ID of the form element, should match the "for" value of the associated label */
   id: string,
   name: string,
-  iconName?: EnumIconNames,
+  iconName?: TypeIconName,
   /** Array of delimiter key names */
   delimiters?: string[],
   /** Current input text. Required when controlling the input text */

package/__flow__/TokenInput/TokenScreenReaderStatus.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { VisuallyHidden } from "../VisuallyHidden";
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+export const TokenScreenReaderStatus = ({
+  tokens
+}) => {
+  const prevTokens = usePrevious(tokens);
+  const [tokenStatus, setTokenStatus] = useState('');
+
+  // TODO: Use callbacks so consumers can pass localized messaging to the screen reader
+  useEffect(() => {
+    if (prevTokens) {
+      if (prevTokens.length > tokens.length) {
+        setTokenStatus(`${prevTokens.filter(item => tokens.indexOf(item) === -1)[0].value} has been removed`);
+      }
+      if (prevTokens.length < tokens.length) {
+        setTokenStatus(`${tokens[tokens.length - 1].value} has been added.`);
+      }
+    }
+  }, [prevTokens, tokens, tokenStatus]);
+  return <VisuallyHidden as="div" role="status">
+      {tokenStatus}
+    </VisuallyHidden>;
+};

package/commonjs/Label/Label.js

@@ -35,6 +35,8 @@ var LabelBase = function LabelBase(_ref) {
     as: as
   }));
 };
+
+// TODO: Screen readers should read "required" instead of "*"
 var StyledLabel = (0, _styledComponents.default)(LabelBase).withConfig({
   displayName: "Label__StyledLabel",
   componentId: "sc-dh0olx-0"
@@ -49,12 +51,19 @@ var Label = /*#__PURE__*/function (_React$Component) {
   _createClass(Label, [{
     key: "render",
     value: function render() {
+      var _this$props = this.props,
+        htmlFor = _this$props.htmlFor,
+        required = _this$props.required,
+        children = _this$props.children;
       return /*#__PURE__*/React.createElement(StyledLabel, _extends({
         fontSize: 200,
         fontWeight: "semibold",
         color: "text.headline",
-        "data-qa-label": this.props.htmlFor
-      }, this.props));
+        "data-qa-label": htmlFor
+      }, this.props), children, required && /*#__PURE__*/React.createElement(_Text.default, {
+        ml: 100,
+        "aria-hidden": true
+      }, "*"));
     }
   }]);
   return Label;

package/commonjs/Loader/styles.js

@@ -13,10 +13,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var getSize = function getSize(size) {
   var spinnerSize = Math.round(size * 1);
   var borderWidth = Math.round(size * 0.1);
-  return (0, _styledComponents.css)(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;box-shadow:", ";}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, function (_ref) {
+  return (0, _styledComponents.css)(["width:", "px;height:", "px;box-shadow:", ";&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;}.no-cssanimations &::after{background-size:", "px;}"], size, size, function (_ref) {
     var theme = _ref.theme;
-    return "inset 0 0 0 2px ".concat(theme.colors.neutral[600]);
-  }, spinnerSize);
+    return "0 0 0 2px ".concat(theme.colors.neutral[600], ", \n      inset 0 0 0 ").concat(borderWidth + 2, "px ").concat(theme.colors.neutral[600]);
+  }, spinnerSize, spinnerSize, borderWidth, spinnerSize);
 };
 var spin = (0, _styledComponents.keyframes)(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
 var delayAnimation = (0, _styledComponents.keyframes)(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
@@ -25,13 +25,10 @@ var Container = _styledComponents.default.div.attrs({
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1edimrk-0"
-})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;box-shadow:", ";animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (_ref2) {
-  var theme = _ref2.theme;
-  return "0 0 0 2px ".concat(theme.colors.neutral[600]);
-}, function (props) {
+})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (props) {
   return props.delay ? (0, _styledComponents.css)(["", " 2s 1;"], delayAnimation) : 'none';
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, function (_ref2) {
+  var theme = _ref2.theme;
   return "".concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[600], " ").concat(theme.colors.neutral[600]);
 }, function (props) {
   return props.delay ? (0, _styledComponents.css)(["", " 2.25s infinite linear,", " 2s 1"], spin, delayAnimation) : (0, _styledComponents.css)(["", " 2.25s infinite linear"], spin);

package/commonjs/LoaderButton/LoaderButton.js

@@ -7,65 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.LoaderButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _polished = require("polished");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _seedsColor = require("@sproutsocial/seeds-color");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Loader = _interopRequireDefault(require("../Loader"));
-var _excluded = ["appearance", "isLoading", "disabled", "loaderLabel", "children"];
+var _excluded = ["isLoading", "disabled", "loaderLabel", "children", "appearance"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-// TODO: This is a temporary solution to get the loader button to work with dark mode
-var getColor = function getColor(appearance, themeColorMode) {
-  var selectColorBasedOnMode = themeColorMode === 'dark' ? 'light' : 'dark';
-  switch (appearance) {
-    case 'unstyled':
-      return selectColorBasedOnMode;
-    case 'primary':
-      return 'light';
-    case 'secondary':
-      return selectColorBasedOnMode;
-    case 'destructive':
-      return 'light';
-    case 'placeholder':
-      return selectColorBasedOnMode;
-    case 'pill':
-      return selectColorBasedOnMode;
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore - as noted below, this case shouldn't exist
-    case 'outline':
-      // This case doesn't even make sense.... There's no outline button
-      // TODO: investigate if this is even used anywhere
-      return 'light';
-    default:
-      return 'light';
-  }
-};
-var CustomLoader = (0, _styledComponents.default)(_Loader.default).withConfig({
-  displayName: "LoaderButton__CustomLoader",
+var StyledLoaderButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "LoaderButton__StyledLoaderButton",
   componentId: "sc-taipe0-0"
-})(["&:after{", " ", "}"], function (p) {
-  return p.color === 'light' && (0, _styledComponents.css)(["border-color:", " ", " ", " ", ";"], (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 1), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_0, 1.0));
-}, function (p) {
-  return p.color === 'dark' && (0, _styledComponents.css)(["border-color:", " ", " ", " ", ";"], (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 0.5), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 1), (0, _polished.rgba)(_seedsColor.COLOR_NEUTRAL_1000, 1.0));
+})(["background-color:", ";", ""], function (_ref) {
+  var _theme$colors$button, _theme$colors$button$;
+  var theme = _ref.theme,
+    appearance = _ref.appearance,
+    disabled = _ref.disabled;
+  var buttonBackgroundColor = (_theme$colors$button = theme.colors.button[appearance]) === null || _theme$colors$button === void 0 ? void 0 : (_theme$colors$button$ = _theme$colors$button.background) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$.base;
+  var isBackgroundColorTransparent = buttonBackgroundColor === 'transparent';
+
+  // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.
+  return disabled ? isBackgroundColorTransparent ? 'transparent' : (0, _polished.rgba)(buttonBackgroundColor, 0.4) : buttonBackgroundColor;
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled && 'opacity: 1;';
 });
-var LoaderButton = function LoaderButton(_ref) {
-  var _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'unstyled' : _ref$appearance,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    disabled = _ref.disabled,
-    loaderLabel = _ref.loaderLabel,
-    children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useTheme = (0, _styledComponents.useTheme)(),
-    themeColorMode = _useTheme.mode;
-  return /*#__PURE__*/React.createElement(_Button.default, _extends({
+var LoaderButton = function LoaderButton(_ref3) {
+  var _ref3$isLoading = _ref3.isLoading,
+    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
+    disabled = _ref3.disabled,
+    loaderLabel = _ref3.loaderLabel,
+    children = _ref3.children,
+    _ref3$appearance = _ref3.appearance,
+    appearance = _ref3$appearance === void 0 ? 'unstyled' : _ref3$appearance,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  return /*#__PURE__*/React.createElement(StyledLoaderButton, _extends({
     disabled: disabled || isLoading,
     appearance: appearance,
     "data-qa-button-isloading": isLoading === true
@@ -80,11 +59,10 @@ var LoaderButton = function LoaderButton(_ref) {
     left: 0,
     right: 0,
     bottom: 0
-  }, /*#__PURE__*/React.createElement(CustomLoader, {
+  }, /*#__PURE__*/React.createElement(_Loader.default, {
     text: loaderLabel,
     size: "small",
-    delay: false,
-    color: getColor(appearance, themeColorMode)
+    delay: false
   }))));
 };
 exports.LoaderButton = LoaderButton;

package/commonjs/SpotIllustration/SpotIllustration.js

@@ -8,11 +8,13 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var illustrationViewBoxes = _interopRequireWildcard(require("../IllustrationViewBoxes"));
+var _excluded = ["name", "customFill", "height", "width"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// eslint-disable-next-line no-restricted-syntax
-
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var StyledSVG = _styledComponents.default.svg.withConfig({
   displayName: "SpotIllustration__StyledSVG",
   componentId: "sc-1j3815-0"
@@ -25,18 +27,20 @@ var SpotIllustration = function SpotIllustration(_ref) {
   var name = _ref.name,
     customFill = _ref.customFill,
     height = _ref.height,
-    width = _ref.width;
+    width = _ref.width,
+    svgProps = _objectWithoutProperties(_ref, _excluded);
   var viewBox = illustrationViewBoxes[name];
   var viewBoxCoordinates = (viewBox === null || viewBox === void 0 ? void 0 : viewBox.split(' ')) || [];
   var defaultWidth = viewBoxCoordinates[2];
   var defaultHeight = viewBoxCoordinates[3];
-  return /*#__PURE__*/_react.default.createElement(StyledSVG, {
+  return /*#__PURE__*/_react.default.createElement(StyledSVG, _extends({
+    role: "img",
     width: width ? width : defaultWidth,
     height: height ? height : defaultHeight,
     viewBox: viewBox,
     focusable: false,
     customFill: customFill
-  }, /*#__PURE__*/_react.default.createElement("use", {
+  }, svgProps), /*#__PURE__*/_react.default.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#ssillustrationsvg-".concat(name)
   }));

package/commonjs/TokenInput/TokenInput.js

@@ -11,14 +11,15 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _Token = _interopRequireDefault(require("../Token"));
 var _styles2 = _interopRequireDefault(require("./styles"));
 var _util = require("./util");
+var _TokenScreenReaderStatus = require("./TokenScreenReaderStatus");
 var _excluded = ["autoFocus", "autocomplete", "disabled", "isInvalid", "hasWarning", "id", "name", "placeholder", "required", "elemBefore", "elemAfter", "maxLength", "ariaDescribedby", "ariaLabel", "innerRef", "value", "onAddToken", "onRemoveToken", "onChangeTokens", "onClickToken", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "tokens"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -183,6 +184,10 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       var activeId = this.state.activeToken;
       var id = token.id,
         tokenIconName = token.iconName,
+        _token$iconProps = token.iconProps,
+        iconProps = _token$iconProps === void 0 ? {
+          'aria-hidden': true
+        } : _token$iconProps,
         value = token.value,
         valid = token.valid;
       var iconName = tokenIconName || defaultIconName;
@@ -201,13 +206,11 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(_Box.default, {
         display: "flex",
         alignItems: "center"
-      },
-      // TODO: add the ability to take labels or aria props for accessibility
-      iconName && /*#__PURE__*/React.createElement(_Icon.default, {
+      }, iconName && /*#__PURE__*/React.createElement(_Icon.default, _extends({
         name: iconName,
         size: "mini",
         pr: 300
-      }), value));
+      }, iconProps)), value));
     }
   }, {
     key: "renderTokens",
@@ -266,7 +269,9 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
         focused: state.hasFocus
       }, rest), elemBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
         before: true
-      }, elemBefore), tokens && this.renderTokens(tokens), /*#__PURE__*/React.createElement("input", _extends({
+      }, elemBefore), tokens && this.renderTokens(tokens), /*#__PURE__*/React.createElement(_TokenScreenReaderStatus.TokenScreenReaderStatus, {
+        tokens: tokens
+      }), /*#__PURE__*/React.createElement("input", _extends({
         "aria-describedby": ariaDescribedby,
         "aria-invalid": !!isInvalid,
         "aria-label": ariaLabel,

package/commonjs/TokenInput/TokenScreenReaderStatus.js

@@ -0,0 +1,51 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TokenScreenReaderStatus = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _VisuallyHidden = require("../VisuallyHidden");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+var TokenScreenReaderStatus = function TokenScreenReaderStatus(_ref) {
+  var tokens = _ref.tokens;
+  var prevTokens = usePrevious(tokens);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    tokenStatus = _useState2[0],
+    setTokenStatus = _useState2[1];
+
+  // TODO: Use callbacks so consumers can pass localized messaging to the screen reader
+  (0, _react.useEffect)(function () {
+    if (prevTokens) {
+      if (prevTokens.length > tokens.length) {
+        setTokenStatus("".concat(prevTokens.filter(function (item) {
+          return tokens.indexOf(item) === -1;
+        })[0].value, " has been removed"));
+      }
+      if (prevTokens.length < tokens.length) {
+        setTokenStatus("".concat(tokens[tokens.length - 1].value, " has been added."));
+      }
+    }
+  }, [prevTokens, tokens, tokenStatus]);
+  return /*#__PURE__*/_react.default.createElement(_VisuallyHidden.VisuallyHidden, {
+    as: "div",
+    role: "status"
+  }, tokenStatus);
+};
+exports.TokenScreenReaderStatus = TokenScreenReaderStatus;

package/dist/types/Label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAWjD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAChE,MAAM;CAWP"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAYjD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAChE,MAAM;CAmBP"}

package/dist/types/Label/LabelTypes.d.ts

@@ -4,5 +4,6 @@ export interface TypeLabelProps extends TypeTextProps {
     /** ID of the associated form element */
     htmlFor: string;
     children: React.ReactNode;
+    required?: boolean;
 }
 //# sourceMappingURL=LabelTypes.d.ts.map

package/dist/types/Label/LabelTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelTypes.d.ts","sourceRoot":"","sources":["../../../src/Label/LabelTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"version":3,"file":"LabelTypes.d.ts","sourceRoot":"","sources":["../../../src/Label/LabelTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/types/Loader/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Loader/styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AA8CnD,UAAU,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,0HA0Cd,CAAC;AAEF,eAAO,MAAM,IAAI,oIAEhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Loader/styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AA+CnD,UAAU,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,0HAwCd,CAAC;AAEF,eAAO,MAAM,IAAI,oIAEhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/LoaderButton/LoaderButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { TypeLoaderButtonProps } from './LoaderButtonTypes';
-export declare const LoaderButton: ({ appearance, isLoading, disabled, loaderLabel, children, ...rest }: TypeLoaderButtonProps) => React.JSX.Element;
+export declare const LoaderButton: ({ isLoading, disabled, loaderLabel, children, appearance, ...rest }: TypeLoaderButtonProps) => React.JSX.Element;
 export default LoaderButton;
 //# sourceMappingURL=LoaderButton.d.ts.map

package/dist/types/LoaderButton/LoaderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoaderButton.d.ts","sourceRoot":"","sources":["../../../src/LoaderButton/LoaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAC;AA4D1D,eAAO,MAAM,YAAY,wEAOtB,qBAAqB,sBA2BvB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LoaderButton.d.ts","sourceRoot":"","sources":["../../../src/LoaderButton/LoaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAC;AAqB1D,eAAO,MAAM,YAAY,wEAOtB,qBAAqB,sBAoBvB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/types/SpotIllustration/SpotIllustration.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TypeSpotIllustrationProps } from './SpotIllustrationTypes';
-declare const SpotIllustration: ({ name, customFill, height, width, }: TypeSpotIllustrationProps) => React.JSX.Element;
+declare const SpotIllustration: ({ name, customFill, height, width, ...svgProps }: TypeSpotIllustrationProps) => React.JSX.Element;
 export default SpotIllustration;
 //# sourceMappingURL=SpotIllustration.d.ts.map

package/dist/types/SpotIllustration/SpotIllustration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpotIllustration.d.ts","sourceRoot":"","sources":["../../../src/SpotIllustration/SpotIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,yBAAyB,EAAC,MAAM,yBAAyB,CAAC;AAYlE,QAAA,MAAM,gBAAgB,yCAKnB,yBAAyB,sBAmB3B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SpotIllustration.d.ts","sourceRoot":"","sources":["../../../src/SpotIllustration/SpotIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,yBAAyB,EAAC,MAAM,yBAAyB,CAAC;AAYlE,QAAA,MAAM,gBAAgB,qDAMnB,yBAAyB,sBAqB3B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/types/SpotIllustration/SpotIllustrationTypes.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import type { EnumIllustrationNames } from '../EnumIllustrationNames';
-export interface TypeSpotIllustrationProps {
+export interface TypeSpotIllustrationProps extends React.ComponentPropsWithoutRef<'svg'> {
     name: EnumIllustrationNames;
     customFill?: 'red' | 'green' | 'yellow' | 'magenta' | 'purple' | 'aqua';
     height?: string;

package/dist/types/SpotIllustration/SpotIllustrationTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpotIllustrationTypes.d.ts","sourceRoot":"","sources":["../../../src/SpotIllustration/SpotIllustrationTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,4BAA4B,CAAC;AAEtE,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,qBAAqB,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"SpotIllustrationTypes.d.ts","sourceRoot":"","sources":["../../../src/SpotIllustration/SpotIllustrationTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,4BAA4B,CAAC;AAEtE,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC7C,IAAI,EAAE,qBAAqB,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/types/SpotIllustration/__tests__/SpotIllustrationTypes.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SpotIllustrationTypes.d.ts.map

package/dist/types/SpotIllustration/__tests__/SpotIllustrationTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpotIllustrationTypes.d.ts","sourceRoot":"","sources":["../../../../src/SpotIllustration/__tests__/SpotIllustrationTypes.tsx"],"names":[],"mappings":""}

package/dist/types/TokenInput/TokenInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenInput.d.ts","sourceRoot":"","sources":["../../../src/TokenInput/TokenInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAE1E,aAAK,SAAS,GAAG;IACf,SAAS,EAAE,mBAAmB,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AASF,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CACrD,mBAAmB,EACnB,SAAS,CACV;IACC,gBAAgB,EAAE,MAAM,CAAC;gBAEb,KAAK,EAAE,mBAAmB;IAYtC,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE,SAAS;IAelB,WAAW,CAAC,OAAO,EAAE,MAAM;IAK3B,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE;IAoB9B,WAAW,CAAC,OAAO,CAAC,EAAE,MAAM;IAiB5B,gBAAgB,MAAO,MAAM,cAAc,CAAC,gBAAgB,CAAC,UAO3D;IAEF,WAAW,MAAO,gBAAgB,CAAC,gBAAgB,CAAC,UAMlD;IAEF,UAAU,MAAO,gBAAgB,CAAC,gBAAgB,CAAC,UAMjD;IAEF,WAAW,MAAO,mBAAmB,CAAC,gBAAgB,CAAC,UAErD;IAEF,aAAa,MAAO,mBAAmB,CAAC,gBAAgB,CAAC,UAkBvD;IAEF,WAAW,MAAO,oBAAoB,CAAC,gBAAgB,CAAC,UAWtD;IAEF,gBAAgB,MACX,MAAM,cAAc,CAAC,iBAAiB,CAAC,SACnC,aAAa,UAQpB;IAEF,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS;IA2BlD,YAAY,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,SAAS;IAQtD,MAAM;CAmFP"}
+{"version":3,"file":"TokenInput.d.ts","sourceRoot":"","sources":["../../../src/TokenInput/TokenInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAG1E,aAAK,SAAS,GAAG;IACf,SAAS,EAAE,mBAAmB,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AASF,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CACrD,mBAAmB,EACnB,SAAS,CACV;IACC,gBAAgB,EAAE,MAAM,CAAC;gBAEb,KAAK,EAAE,mBAAmB;IAYtC,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE,SAAS;IAelB,WAAW,CAAC,OAAO,EAAE,MAAM;IAK3B,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE;IAoB9B,WAAW,CAAC,OAAO,CAAC,EAAE,MAAM;IAiB5B,gBAAgB,MAAO,MAAM,cAAc,CAAC,gBAAgB,CAAC,UAO3D;IAEF,WAAW,MAAO,gBAAgB,CAAC,gBAAgB,CAAC,UAMlD;IAEF,UAAU,MAAO,gBAAgB,CAAC,gBAAgB,CAAC,UAMjD;IAEF,WAAW,MAAO,mBAAmB,CAAC,gBAAgB,CAAC,UAErD;IAEF,aAAa,MAAO,mBAAmB,CAAC,gBAAgB,CAAC,UAkBvD;IAEF,WAAW,MAAO,oBAAoB,CAAC,gBAAgB,CAAC,UAWtD;IAEF,gBAAgB,MACX,MAAM,cAAc,CAAC,iBAAiB,CAAC,SACnC,aAAa,UAQpB;IAEF,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS;IAgClD,YAAY,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,SAAS;IAQtD,MAAM;CAqFP"}

package/dist/types/TokenInput/TokenInputTypes.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { EnumIconNames } from '../EnumIconNames';
 import type { TypeStyledComponentsCommonProps } from '../types/styled-components';
 import type { TypeSystemCommonProps } from '../types/system-props';
 import { TypeQaProps } from '../types/shared';
+import type { TypeIconProps, TypeIconName } from '../Icon';
 export interface TypeTokenSpec {
     id: string;
-    iconName?: EnumIconNames;
+    iconName?: TypeIconName;
+    iconProps?: Omit<TypeIconProps, 'name'>;
     value: string;
     valid?: boolean;
 }
@@ -13,7 +14,7 @@ export interface TypeBaseTokenInputProps {
     /** ID of the form element, should match the "for" value of the associated label */
     id: string;
     name: string;
-    iconName?: EnumIconNames;
+    iconName?: TypeIconName;
     /** Array of delimiter key names */
     delimiters?: string[];
     /** Current input text. Required when controlling the input text */

package/dist/types/TokenInput/TokenInputTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenInputTypes.d.ts","sourceRoot":"","sources":["../../../src/TokenInput/TokenInputTypes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TokenInputTypes.d.ts","sourceRoot":"","sources":["../../../src/TokenInput/TokenInputTypes.ts"],"names":[],"mappings":"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"}

package/lib/Label/Label.js

@@ -26,6 +26,8 @@ var LabelBase = function LabelBase(_ref) {
     as: as
   }));
 };
+
+// TODO: Screen readers should read "required" instead of "*"
 var StyledLabel = styled(LabelBase).withConfig({
   displayName: "Label__StyledLabel",
   componentId: "sc-dh0olx-0"
@@ -40,12 +42,19 @@ var Label = /*#__PURE__*/function (_React$Component) {
   _createClass(Label, [{
     key: "render",
     value: function render() {
+      var _this$props = this.props,
+        htmlFor = _this$props.htmlFor,
+        required = _this$props.required,
+        children = _this$props.children;
       return /*#__PURE__*/React.createElement(StyledLabel, _extends({
         fontSize: 200,
         fontWeight: "semibold",
         color: "text.headline",
-        "data-qa-label": this.props.htmlFor
-      }, this.props));
+        "data-qa-label": htmlFor
+      }, this.props), children, required && /*#__PURE__*/React.createElement(Text, {
+        ml: 100,
+        "aria-hidden": true
+      }, "*"));
     }
   }]);
   return Label;

package/lib/Loader/styles.js

@@ -4,10 +4,10 @@ import { COMMON } from "../utils/system-props";
 var getSize = function getSize(size) {
   var spinnerSize = Math.round(size * 1);
   var borderWidth = Math.round(size * 0.1);
-  return css(["width:", "px;height:", "px;&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;box-shadow:", ";}.no-cssanimations &::after{background-size:", "px;}"], size, size, spinnerSize, spinnerSize, borderWidth, function (_ref) {
+  return css(["width:", "px;height:", "px;box-shadow:", ";&:after{width:", "px;height:", "px;box-sizing:border-box;border-width:", "px;}.no-cssanimations &::after{background-size:", "px;}"], size, size, function (_ref) {
     var theme = _ref.theme;
-    return "inset 0 0 0 2px ".concat(theme.colors.neutral[600]);
-  }, spinnerSize);
+    return "0 0 0 2px ".concat(theme.colors.neutral[600], ", \n      inset 0 0 0 ").concat(borderWidth + 2, "px ").concat(theme.colors.neutral[600]);
+  }, spinnerSize, spinnerSize, borderWidth, spinnerSize);
 };
 var spin = keyframes(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
 var delayAnimation = keyframes(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
@@ -16,13 +16,10 @@ var Container = styled.div.attrs({
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1edimrk-0"
-})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;box-shadow:", ";animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (_ref2) {
-  var theme = _ref2.theme;
-  return "0 0 0 2px ".concat(theme.colors.neutral[600]);
-}, function (props) {
+})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (props) {
   return props.delay ? css(["", " 2s 1;"], delayAnimation) : 'none';
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, function (_ref2) {
+  var theme = _ref2.theme;
   return "".concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[600], " ").concat(theme.colors.neutral[600]);
 }, function (props) {
   return props.delay ? css(["", " 2.25s infinite linear,", " 2s 1"], spin, delayAnimation) : css(["", " 2.25s infinite linear"], spin);

package/lib/LoaderButton/LoaderButton.js

@@ -1,61 +1,40 @@
-var _excluded = ["appearance", "isLoading", "disabled", "loaderLabel", "children"];
+var _excluded = ["isLoading", "disabled", "loaderLabel", "children", "appearance"];
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { rgba } from 'polished';
-import styled, { css, useTheme } from 'styled-components';
-import { COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000 } from '@sproutsocial/seeds-color';
+import styled from 'styled-components';
 import Box from "../Box";
 import Button from "../Button";
 import Loader from "../Loader";
-// TODO: This is a temporary solution to get the loader button to work with dark mode
-var getColor = function getColor(appearance, themeColorMode) {
-  var selectColorBasedOnMode = themeColorMode === 'dark' ? 'light' : 'dark';
-  switch (appearance) {
-    case 'unstyled':
-      return selectColorBasedOnMode;
-    case 'primary':
-      return 'light';
-    case 'secondary':
-      return selectColorBasedOnMode;
-    case 'destructive':
-      return 'light';
-    case 'placeholder':
-      return selectColorBasedOnMode;
-    case 'pill':
-      return selectColorBasedOnMode;
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore - as noted below, this case shouldn't exist
-    case 'outline':
-      // This case doesn't even make sense.... There's no outline button
-      // TODO: investigate if this is even used anywhere
-      return 'light';
-    default:
-      return 'light';
-  }
-};
-var CustomLoader = styled(Loader).withConfig({
-  displayName: "LoaderButton__CustomLoader",
+var StyledLoaderButton = styled(Button).withConfig({
+  displayName: "LoaderButton__StyledLoaderButton",
   componentId: "sc-taipe0-0"
-})(["&:after{", " ", "}"], function (p) {
-  return p.color === 'light' && css(["border-color:", " ", " ", " ", ";"], rgba(COLOR_NEUTRAL_0, 0.5), rgba(COLOR_NEUTRAL_0, 0.5), rgba(COLOR_NEUTRAL_0, 1), rgba(COLOR_NEUTRAL_0, 1.0));
-}, function (p) {
-  return p.color === 'dark' && css(["border-color:", " ", " ", " ", ";"], rgba(COLOR_NEUTRAL_1000, 0.5), rgba(COLOR_NEUTRAL_1000, 0.5), rgba(COLOR_NEUTRAL_1000, 1), rgba(COLOR_NEUTRAL_1000, 1.0));
+})(["background-color:", ";", ""], function (_ref) {
+  var _theme$colors$button, _theme$colors$button$;
+  var theme = _ref.theme,
+    appearance = _ref.appearance,
+    disabled = _ref.disabled;
+  var buttonBackgroundColor = (_theme$colors$button = theme.colors.button[appearance]) === null || _theme$colors$button === void 0 ? void 0 : (_theme$colors$button$ = _theme$colors$button.background) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$.base;
+  var isBackgroundColorTransparent = buttonBackgroundColor === 'transparent';
+
+  // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.
+  return disabled ? isBackgroundColorTransparent ? 'transparent' : rgba(buttonBackgroundColor, 0.4) : buttonBackgroundColor;
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled && 'opacity: 1;';
 });
-export var LoaderButton = function LoaderButton(_ref) {
-  var _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'unstyled' : _ref$appearance,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    disabled = _ref.disabled,
-    loaderLabel = _ref.loaderLabel,
-    children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useTheme = useTheme(),
-    themeColorMode = _useTheme.mode;
-  return /*#__PURE__*/React.createElement(Button, _extends({
+export var LoaderButton = function LoaderButton(_ref3) {
+  var _ref3$isLoading = _ref3.isLoading,
+    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
+    disabled = _ref3.disabled,
+    loaderLabel = _ref3.loaderLabel,
+    children = _ref3.children,
+    _ref3$appearance = _ref3.appearance,
+    appearance = _ref3$appearance === void 0 ? 'unstyled' : _ref3$appearance,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  return /*#__PURE__*/React.createElement(StyledLoaderButton, _extends({
     disabled: disabled || isLoading,
     appearance: appearance,
     "data-qa-button-isloading": isLoading === true
@@ -70,11 +49,10 @@ export var LoaderButton = function LoaderButton(_ref) {
     left: 0,
     right: 0,
     bottom: 0
-  }, /*#__PURE__*/React.createElement(CustomLoader, {
+  }, /*#__PURE__*/React.createElement(Loader, {
     text: loaderLabel,
     size: "small",
-    delay: false,
-    color: getColor(appearance, themeColorMode)
+    delay: false
   }))));
 };
 export default LoaderButton;

package/lib/SpotIllustration/SpotIllustration.js

@@ -1,3 +1,7 @@
+var _excluded = ["name", "customFill", "height", "width"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import styled from 'styled-components';
 // eslint-disable-next-line no-restricted-syntax
@@ -14,18 +18,20 @@ var SpotIllustration = function SpotIllustration(_ref) {
   var name = _ref.name,
     customFill = _ref.customFill,
     height = _ref.height,
-    width = _ref.width;
+    width = _ref.width,
+    svgProps = _objectWithoutProperties(_ref, _excluded);
   var viewBox = illustrationViewBoxes[name];
   var viewBoxCoordinates = (viewBox === null || viewBox === void 0 ? void 0 : viewBox.split(' ')) || [];
   var defaultWidth = viewBoxCoordinates[2];
   var defaultHeight = viewBoxCoordinates[3];
-  return /*#__PURE__*/React.createElement(StyledSVG, {
+  return /*#__PURE__*/React.createElement(StyledSVG, _extends({
+    role: "img",
     width: width ? width : defaultWidth,
     height: height ? height : defaultHeight,
     viewBox: viewBox,
     focusable: false,
     customFill: customFill
-  }, /*#__PURE__*/React.createElement("use", {
+  }, svgProps), /*#__PURE__*/React.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#ssillustrationsvg-".concat(name)
   }));

package/lib/TokenInput/TokenInput.js

@@ -1,8 +1,8 @@
 var _excluded = ["autoFocus", "autocomplete", "disabled", "isInvalid", "hasWarning", "id", "name", "placeholder", "required", "elemBefore", "elemAfter", "maxLength", "ariaDescribedby", "ariaLabel", "innerRef", "value", "onAddToken", "onRemoveToken", "onChangeTokens", "onClickToken", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "tokens"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -23,6 +23,7 @@ import Icon from "../Icon";
 import Token from "../Token";
 import Container from "./styles";
 import { asTokenSpec, delimitersAsRegExp } from "./util";
+import { TokenScreenReaderStatus } from "./TokenScreenReaderStatus";
 var DefaultDelimiters = [',', 'Enter'];
 var ControlledPropNames = ['value', 'hasFocus', 'activeToken'];
 var TokenInput = /*#__PURE__*/function (_React$Component) {
@@ -174,6 +175,10 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       var activeId = this.state.activeToken;
       var id = token.id,
         tokenIconName = token.iconName,
+        _token$iconProps = token.iconProps,
+        iconProps = _token$iconProps === void 0 ? {
+          'aria-hidden': true
+        } : _token$iconProps,
         value = token.value,
         valid = token.valid;
       var iconName = tokenIconName || defaultIconName;
@@ -192,13 +197,11 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(Box, {
         display: "flex",
         alignItems: "center"
-      },
-      // TODO: add the ability to take labels or aria props for accessibility
-      iconName && /*#__PURE__*/React.createElement(Icon, {
+      }, iconName && /*#__PURE__*/React.createElement(Icon, _extends({
         name: iconName,
         size: "mini",
         pr: 300
-      }), value));
+      }, iconProps)), value));
     }
   }, {
     key: "renderTokens",
@@ -257,7 +260,9 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
         focused: state.hasFocus
       }, rest), elemBefore && /*#__PURE__*/React.createElement(Accessory, {
         before: true
-      }, elemBefore), tokens && this.renderTokens(tokens), /*#__PURE__*/React.createElement("input", _extends({
+      }, elemBefore), tokens && this.renderTokens(tokens), /*#__PURE__*/React.createElement(TokenScreenReaderStatus, {
+        tokens: tokens
+      }), /*#__PURE__*/React.createElement("input", _extends({
         "aria-describedby": ariaDescribedby,
         "aria-invalid": !!isInvalid,
         "aria-label": ariaLabel,

package/lib/TokenInput/TokenScreenReaderStatus.js

@@ -0,0 +1,43 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { VisuallyHidden } from "../VisuallyHidden";
+function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+export var TokenScreenReaderStatus = function TokenScreenReaderStatus(_ref) {
+  var tokens = _ref.tokens;
+  var prevTokens = usePrevious(tokens);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    tokenStatus = _useState2[0],
+    setTokenStatus = _useState2[1];
+
+  // TODO: Use callbacks so consumers can pass localized messaging to the screen reader
+  useEffect(function () {
+    if (prevTokens) {
+      if (prevTokens.length > tokens.length) {
+        setTokenStatus("".concat(prevTokens.filter(function (item) {
+          return tokens.indexOf(item) === -1;
+        })[0].value, " has been removed"));
+      }
+      if (prevTokens.length < tokens.length) {
+        setTokenStatus("".concat(tokens[tokens.length - 1].value, " has been added."));
+      }
+    }
+  }, [prevTokens, tokens, tokenStatus]);
+  return /*#__PURE__*/React.createElement(VisuallyHidden, {
+    as: "div",
+    role: "status"
+  }, tokenStatus);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "15.0.1",
+  "version": "15.1.0",
   "license": "MIT",
   "files": [
     "__flow__",