@sproutsocial/racine 19.0.1 → 20.1.0

package/lib/ThemeProvider/index.js

@@ -2,6 +2,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from 'react';
 import { ThemeProvider as BaseThemeProvider } from 'styled-components';
 import theme from "../themes/light/theme";
+
+// We can append additional themes types here
+
 var ThemeProvider = function ThemeProvider(props) {
   return /*#__PURE__*/React.createElement(BaseThemeProvider, _extends({}, props, {
     theme: props.theme || theme

package/lib/Toast/Toast.js

@@ -29,10 +29,10 @@ var ToastContainer = function ToastContainer() {
   }));
 };
 var themeIcon = {
-  success: 'circle-check-filled',
-  info: 'info',
-  warning: 'triangle',
-  error: 'triangle'
+  success: 'circle-check-outline',
+  info: 'circle-i-outline',
+  warning: 'triangle-exclamation-outline',
+  error: 'triangle-exclamation-outline'
 };
 export function toast(options) {
   var props = {
@@ -102,7 +102,7 @@ var Toast = function Toast(_ref) {
       color: "text.body",
       "data-qa-toast-content": ""
     }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(Icon, {
-      name: "x",
+      name: "x-outline",
       ml: 400,
       color: "icon.base",
       "aria-hidden": true

package/lib/ToggleHint/ToggleHint.js

@@ -1,5 +1,5 @@
 var _excluded = ["icon", "isOpen", "openString", "closeString", "qa", "className", "color"];
-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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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; }
@@ -35,12 +35,12 @@ var ToggleHint = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getIcon", function () {
       if (_this.props.icon === 'chevron') {
         return /*#__PURE__*/React.createElement(Icon, {
-          name: "chevron-down",
+          name: "chevron-down-outline",
           "aria-hidden": true
         });
       }
       return /*#__PURE__*/React.createElement(Icon, {
-        name: _this.props.isOpen ? 'minus' : 'plus',
+        name: _this.props.isOpen ? 'minus-outline' : 'plus-outline',
         "aria-hidden": true
       });
     });

package/lib/Token/Token.js

@@ -44,7 +44,7 @@ var Token = function Token(_ref) {
   }, "This is an invalid token"), /*#__PURE__*/React.createElement(Icon, {
     "aria-hidden": true,
     pr: 300,
-    name: "error",
+    name: "circle-exclamation-solid",
     size: "mini"
   }), /*#__PURE__*/React.createElement(VisuallyHidden, null, "Invalid")), closeable ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
@@ -57,7 +57,7 @@ var Token = function Token(_ref) {
   }, children), /*#__PURE__*/React.createElement(Icon, {
     "aria-hidden": true,
     pl: 300,
-    name: "x",
+    name: "x-solid",
     size: "mini"
   })) : children);
 };

package/lib/TokenInput/TokenInput.js

@@ -1,5 +1,5 @@
 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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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); }
@@ -39,14 +39,14 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         value: value
       });
-      onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+      onChange === null || onChange === void 0 || onChange(e, value);
     });
     _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
       var onFocus = _this.props.onFocus;
       _this.setState({
         hasFocus: true
       });
-      onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+      onFocus === null || onFocus === void 0 || onFocus(e);
     });
     _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
       var onBlur = _this.props.onBlur;
@@ -57,7 +57,7 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (e) {
       var _this$props$onKeyUp, _this$props;
-      (_this$props$onKeyUp = (_this$props = _this.props).onKeyUp) === null || _this$props$onKeyUp === void 0 ? void 0 : _this$props$onKeyUp.call(_this$props, e, e.currentTarget.value);
+      (_this$props$onKeyUp = (_this$props = _this.props).onKeyUp) === null || _this$props$onKeyUp === void 0 || _this$props$onKeyUp.call(_this$props, e, e.currentTarget.value);
     });
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
       var onKeyDown = _this.props.onKeyDown;

package/lib/TokenInput/TokenScreenReaderStatus.js

@@ -1,8 +1,8 @@
 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 _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /* eslint-disable react/prop-types */
 import React from 'react';

package/lib/Tooltip/Tooltip.js

@@ -1,16 +1,17 @@
 var _excluded = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated"],
-  _excluded2 = ["appearance", "children"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  _excluded2 = ["appearance", "children", "onMouseEnter", "onMouseLeave"];
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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 _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
@@ -21,31 +22,47 @@ import MOTION from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
 import Popout from "../Popout";
 import { TooltipContent } from "./styles";
 var idCounter = 0;
-var wrapContent = function wrapContent(content, show, hide, Wrapper, appearance, ariaProps, wrapperStyles) {
+var wrapContent = function wrapContent(_ref) {
+  var isOpen = _ref.isOpen,
+    content = _ref.content,
+    contentId = _ref.contentId,
+    show = _ref.show,
+    hide = _ref.hide,
+    Wrapper = _ref.Wrapper,
+    appearance = _ref.appearance,
+    ariaProps = _ref.ariaProps,
+    wrapperStyles = _ref.wrapperStyles,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
   return /*#__PURE__*/React.createElement(Wrapper, _extends({
     appearance: appearance,
     onMouseOver: show,
     onMouseOut: hide,
     onFocus: show,
     onBlur: hide,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     style: Object.keys(wrapperStyles).length === 0 ? undefined : wrapperStyles
-  }, ariaProps), /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.cloneElement(content) : content);
+  }, ariaProps), /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.cloneElement(content, {
+    'aria-expanded': isOpen,
+    'aria-describedby': contentId
+  }) : content);
 };
-var Tooltip = function Tooltip(_ref) {
-  var content = _ref.content,
-    children = _ref.children,
-    _ref$enterDelay = _ref.enterDelay,
-    enterDelay = _ref$enterDelay === void 0 ? MOTION.MOTION_DURATION_FAST * 1000 : _ref$enterDelay,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
-    appearance = _ref.appearance,
-    _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
-    qa = _ref.qa,
-    popoutProps = _ref.popoutProps,
-    _ref$truncated = _ref.truncated,
-    truncated = _ref$truncated === void 0 ? false : _ref$truncated,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var Tooltip = function Tooltip(_ref2) {
+  var content = _ref2.content,
+    children = _ref2.children,
+    _ref2$enterDelay = _ref2.enterDelay,
+    enterDelay = _ref2$enterDelay === void 0 ? MOTION.MOTION_DURATION_FAST * 1000 : _ref2$enterDelay,
+    _ref2$placement = _ref2.placement,
+    placement = _ref2$placement === void 0 ? 'auto' : _ref2$placement,
+    appearance = _ref2.appearance,
+    _ref2$zIndex = _ref2.zIndex,
+    zIndex = _ref2$zIndex === void 0 ? 7 : _ref2$zIndex,
+    qa = _ref2.qa,
+    popoutProps = _ref2.popoutProps,
+    _ref2$truncated = _ref2.truncated,
+    truncated = _ref2$truncated === void 0 ? false : _ref2$truncated,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     shouldShow = _useState2[0],
@@ -54,46 +71,91 @@ var Tooltip = function Tooltip(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var _useState5 = useState("Racine-tooltip-".concat(idCounter++)),
-    _useState6 = _slicedToArray(_useState5, 1),
-    id = _useState6[0];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isTooltipHovered = _useState6[0],
+    setIsTooltipHovered = _useState6[1];
+  var _useState7 = useState("Racine-tooltip-".concat(idCounter++)),
+    _useState8 = _slicedToArray(_useState7, 1),
+    id = _useState8[0];
   var isInvalidContent = content === null || content === undefined;
   var show = function show() {
     return setShouldShow(true);
   };
   var hide = function hide() {
-    return setShouldShow(false);
+    if (!isTooltipHovered) {
+      setShouldShow(false);
+    }
   };
   var exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
   var defaultAppearance = appearance || (_typeof(content) === 'object' ? 'box' : 'pill');
   var shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
   useEffect(function () {
+    var documentBody = document.body;
     var timeout;
+    var onEsc = function onEsc(e) {
+      // older browsers use "Esc"
+      if (['Escape', 'Esc'].includes(e.key)) {
+        e.stopPropagation();
+        setIsOpen(false);
+        setShouldShow(false);
+      }
+    };
     if (shouldShow) {
       timeout = setTimeout(function () {
         return setIsOpen(true);
       }, enterDelay);
     } else {
       timeout = setTimeout(function () {
-        return setIsOpen(false);
+        if (!isTooltipHovered) {
+          setIsOpen(false);
+        }
       }, exitDelay);
     }
+    documentBody.addEventListener('keydown', onEsc, false);
     return function () {
-      return clearTimeout(timeout);
+      documentBody.removeEventListener('keydown', onEsc, false);
+      clearTimeout(timeout);
     };
-  }, [isOpen, shouldShow, enterDelay, exitDelay]);
-  var wrappedContent = wrapContent(content, shouldTooltipContentsBeInteractive ? show : undefined, shouldTooltipContentsBeInteractive ? hide : undefined, Content, defaultAppearance, _objectSpread({
-    id: id
-  }, rest), {});
-  var ariaPropsForWrappedChildren = isOpen ? {
-    'aria-describedby': id
-  } : {};
+  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay, isTooltipHovered]);
+  var wrappedContent = wrapContent({
+    isOpen: isOpen,
+    content: content,
+    contentId: id,
+    show: shouldTooltipContentsBeInteractive ? show : undefined,
+    hide: shouldTooltipContentsBeInteractive ? hide : undefined,
+    Wrapper: Content,
+    appearance: defaultAppearance,
+    ariaProps: _objectSpread(_objectSpread({}, rest), {}, {
+      id: id,
+      tabIndex: 0
+    }),
+    wrapperStyles: {},
+    onMouseEnter: function onMouseEnter() {
+      return setIsTooltipHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsTooltipHovered(false);
+    }
+  });
+  _objectDestructuringEmpty(isOpen ? {} : {});
   var wrapperStylesForWrappedChildren = truncated ? {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
   } : {};
-  var wrappedChildren = wrapContent(children, show, hide, 'span', defaultAppearance, ariaPropsForWrappedChildren, wrapperStylesForWrappedChildren);
+  // Wraps the triggering element and passes props down
+  var wrappedChildren = wrapContent({
+    isOpen: isOpen,
+    content: children,
+    contentId: id,
+    show: show,
+    hide: hide,
+    Wrapper: 'span',
+    appearance: defaultAppearance,
+    ariaProps: {},
+    wrapperStyles: wrapperStylesForWrappedChildren
+  });
   return /*#__PURE__*/React.createElement(Popout, _extends({
     content: !isInvalidContent ? wrappedContent : undefined,
     isOpen: isOpen,
@@ -101,17 +163,23 @@ var Tooltip = function Tooltip(_ref) {
     qa: _objectSpread({
       'data-qa-tooltip': id
     }, qa),
+    id: id + '-wrapper',
     focusOnContent: false,
     zIndex: zIndex,
-    display: truncated ? 'flex' : undefined
+    "aria-haspopup": "false",
+    display: truncated ? 'flex' : undefined,
+    disableWrapperAria: true // required so that the child span doesnt take in redundant aria props
   }, popoutProps), wrappedChildren);
 };
-var Content = function Content(_ref2) {
-  var _ref2$appearance = _ref2.appearance,
-    appearance = _ref2$appearance === void 0 ? 'pill' : _ref2$appearance,
-    children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
+var Content = function Content(_ref4) {
+  var _ref4$appearance = _ref4.appearance,
+    appearance = _ref4$appearance === void 0 ? 'pill' : _ref4$appearance,
+    children = _ref4.children,
+    onMouseEnter = _ref4.onMouseEnter,
+    onMouseLeave = _ref4.onMouseLeave,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
   return /*#__PURE__*/React.createElement(TooltipContent, _extends({
+    role: "tooltip",
     appearance: appearance,
     borderRadius: appearance === 'box' ? 500 : '5000em',
     px: 400,
@@ -121,7 +189,9 @@ var Content = function Content(_ref2) {
     bg: "container.background.base",
     boxShadow: "medium",
     border: 500,
-    borderColor: "container.border.base"
+    borderColor: "container.border.base",
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
   }, rest), children);
 };
 export default Tooltip;

package/lib/index.flow.js

@@ -28,7 +28,7 @@ export { default as Drawer } from "./Drawer/index.flow";
 export { default as EmptyState } from "./EmptyState/index.flow";
 export { default as Fieldset } from "./Fieldset/index.flow";
 export { default as FormField } from "./FormField/index.flow";
-export { default as Icon } from "./Icon/index.flow";
+export * from "./Icon/index.flow";
 export { default as Image } from "./Image/index.flow";
 export { default as Indicator } from "./Indicator/index.flow";
 export { default as Input } from "./Input/index.flow";

package/lib/index.js

@@ -1,6 +1,5 @@
 /* Asset types */
 
-export { default as IconNames } from "./iconNames";
 export { default as SpotIllustrationNames } from "./illustrationNames";
 export { default as PartnerLogoNames } from "./logoNames";
 

package/lib/logoNames.js

@@ -1 +1 @@
-export default ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bynder", "canva", "dropbox", "facebook-audience-network", "facebook", "facebook-groups", "facebook-shops", "feedly", "github", "glassdoor", "google-analytics", "google-business-messages", "google-drive", "google-my-business", "google-play-store", "hubspot", "instagram", "linkedin-audience-network", "linkedin", "marketo", "messenger", "microsoft-dynamics", "pinterest", "reddit-alien", "reddit", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "tiktok", "tripadvisor", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "yelp", "youtube", "zendesk"];
+export default ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bynder", "canva", "dropbox", "facebook-audience-network", "facebook", "facebook-groups", "facebook-shops", "feedly", "github", "glassdoor", "google-analytics", "google-business-messages", "google-drive", "google-my-business", "google-play-store", "hubspot", "instagram", "linkedin-audience-network", "linkedin", "marketo", "messenger", "microsoft-dynamics", "pinterest", "reddit", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "tiktok", "tripadvisor", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "yelp", "youtube", "zendesk"];

package/lib/systemProps/background.flow.js

@@ -1,2 +1,5 @@
 import { background } from 'styled-system';
+
+// https://styled-system.com/table#background
+
 export var backgroundSystemProps = background;

package/lib/systemProps/border.flow.js

@@ -1,2 +1,5 @@
 import { border } from 'styled-system';
+
+// https://styled-system.com/table#border
+
 export var borderSystemProps = border;

package/lib/systemProps/color.flow.js

@@ -1,2 +1,5 @@
 import { color } from 'styled-system';
+
+// https://styled-system.com/table#color
+
 export var colorSystemProps = color;

package/lib/systemProps/custom.flow.js

@@ -1,4 +1,7 @@
 import { compose, system } from 'styled-system';
+
+// https://styled-system.com/custom-props
+
 export var customSystemProps = compose(system({
   cursor: true,
   whiteSpace: true

package/lib/systemProps/flexbox.flow.js

@@ -1,2 +1,5 @@
 import { flexbox } from 'styled-system';
+
+// https://styled-system.com/table#flexbox
+
 export var flexboxSystemProps = flexbox;

package/lib/systemProps/grid.flow.js

@@ -1,2 +1,5 @@
 import { grid } from 'styled-system';
+
+// https://styled-system.com/table#grid-layout
+
 export var gridSystemProps = grid;

package/lib/systemProps/index.js

@@ -3,6 +3,9 @@ import {
 background, border, color, flexbox, grid, layout, position, shadow, space, typography,
 // utilities and related types
 compose, system, variant } from 'styled-system';
+
+// https://styled-system.com/custom-props
+
 export var customSystemProps = compose(system({
   cursor: true,
   whiteSpace: true
@@ -17,4 +20,7 @@ export var variantSystemProps = compose(variant({
 export var systemProps = compose(customSystemProps, variantSystemProps, background, border, color, flexbox, grid, layout, position, shadow, space, typography);
 
 // including deprecated support for old type names in case they are needed for the intial TS release
-export { background as backgroundSystemProps, border as borderSystemProps, color as colorSystemProps, flexbox as flexboxSystemProps, grid as gridSystemProps, layout as layoutSystemProps, position as positionSystemProps, shadow as shadowSystemProps, space as spaceSystemProps, typography as typographySystemProps };
+export { background as backgroundSystemProps, border as borderSystemProps
+/**
+  @deprecated: Use TypeColorSystemProps instead.
+*/, color as colorSystemProps, flexbox as flexboxSystemProps, grid as gridSystemProps, layout as layoutSystemProps, position as positionSystemProps, shadow as shadowSystemProps, space as spaceSystemProps, typography as typographySystemProps };

package/lib/systemProps/layout.flow.js

@@ -1,2 +1,5 @@
 import { layout } from 'styled-system';
+
+// https://styled-system.com/table#layout
+
 export var layoutSystemProps = layout;

package/lib/systemProps/position.flow.js

@@ -1,2 +1,5 @@
 import { position } from 'styled-system';
+
+// https://styled-system.com/table#position
+
 export var positionSystemProps = position;

package/lib/systemProps/shadow.flow.js

@@ -1,2 +1,5 @@
 import { shadow } from 'styled-system';
+
+// https://styled-system.com/table#shadow
+
 export var shadowSystemProps = shadow;

package/lib/systemProps/space.flow.js

@@ -1,2 +1,18 @@
 /* eslint-disable prettier/prettier */import { space } from 'styled-system';
+
+// https://styled-system.com/table#space
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
+// prettier-ignore
 export var spaceSystemProps = space;

package/lib/systemProps/typography.flow.js

@@ -1,2 +1,5 @@
 import { typography } from 'styled-system';
+
+// https://styled-system.com/table#typography
+
 export var typographySystemProps = typography;

package/lib/systemProps/variant.flow.js

@@ -1,4 +1,7 @@
 import { compose, variant } from 'styled-system';
+
+// https://styled-system.com/variants
+
 export var variantSystemProps = compose(variant({
   key: 'typography',
   prop: 'typeScale'

package/lib/themes/dark/theme.js

@@ -1,6 +1,6 @@
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -180,6 +180,19 @@ var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
     background: {
       highlight: COLORS.COLOR_YELLOW_900,
       selection: COLORS.COLOR_BLUE_800
+    },
+    decorative: {
+      green: green.foreground,
+      blue: blue.foreground,
+      purple: purple.foreground,
+      yellow: yellow.foreground,
+      orange: orange.foreground,
+      red: red.foreground,
+      neutral: neutral.foreground,
+      magenta: magenta.foreground,
+      pink: pink.foreground,
+      aqua: aqua.foreground,
+      teal: teal.foreground
     }
   },
   icon: {

package/lib/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,6 +1,6 @@
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }

package/lib/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,6 +1,6 @@
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }