@sproutsocial/racine 14.0.1 → 14.1.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 14.1.1
+
+### Patch Changes
+
+- 0c738bee: Update badgeColor Flow types in Badge component to include the new decorative palette colors
+
+## 14.1.0
+
+### Minor Changes
+
+- 09dc15ad: Add Alert Indicator colors to the Listening extended theme
+- 5f685503: Support flexbox gap via system props on the Box component
+- dee44d6f: Extend the available badge color options to reflect what is available in the Racine decorative palette
+
+### Patch Changes
+
+- 07a24e81: Remove dependency [reach/component-component](https://www.npmjs.com/package/@reach/component-component) in order to support React 17
+- 5cf19670: Add a new onClose prop to the Banner component
+- 2e9efed3: `CharacterCounter` component will now include `role="status"` attribute to provide a better experience to screen reader users
+- 0b9719ac: Adjust sizes on large Input and Select to match Figma UI Kit
+
 ## 14.0.1
 
 ### Patch Changes

package/__flow__/Badge/Badge.flow.js

@@ -7,7 +7,7 @@ export type TypeBadgeProps = {
   text?: React.Node,
   /** Size default is deprecated in favor of small and large */
   size?: 'small' | 'large' | 'default',
-  badgeColor?: 'green' | 'blue' | 'purple' | 'yellow' | 'orange' | 'red' | 'neutral',
+  badgeColor?: 'green' | 'blue' | 'purple' | 'yellow' | 'orange' | 'red' | 'neutral' | 'magenta' | 'pink' | 'aqua' | 'teal',
   iconName?: TypeIconName,
   /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
   tip?: React.Node,

package/__flow__/Banner/Banner.flow.js

@@ -5,6 +5,10 @@ export type TypeBannerProps = {
   text: React.Node,
   /** Type of banner. */
   type?: EnumBannerType,
+  /** Show the close icon in the banner with an action when clicked */
+  onClose?: () => void,
+  /** Close icon aria label */
+  closeButtonLabel?: string,
   ...
 };
 declare var Banner: React.StatelessFunctionalComponent<TypeBannerProps>;

package/__flow__/systemProps/flexbox.js

@@ -1,7 +1,7 @@
 // @flow strict-local
 
 import { flexbox } from 'styled-system';
-import type { Property$AlignItems, Property$AlignContent, Property$JustifyContent, Property$JustifyItems, Property$FlexWrap, Property$FlexDirection, Property$Flex, Property$FlexBasis, Property$JustifySelf, Property$AlignSelf, Globals } from 'csstype';
+import type { Property$AlignItems, Property$AlignContent, Property$JustifyContent, Property$JustifyItems, Property$FlexWrap, Property$FlexDirection, Property$Flex, Property$FlexBasis, Property$JustifySelf, Property$AlignSelf, Property$Gap, Property$ColumnGap, Property$RowGap, Globals } from 'csstype';
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow.js";
 
 // https://styled-system.com/table#flexbox
@@ -21,5 +21,8 @@ export type TypeFlexboxSystemProps = $ReadOnly<{|
   justifySelf?: TypeResponsiveBaseSystemProp<Property$JustifySelf>,
   alignSelf?: TypeResponsiveBaseSystemProp<Property$AlignSelf>,
   order?: TypeResponsiveBaseSystemProp<TypeGlobalsNumber>,
+  gap?: TypeResponsiveBaseSystemProp<Property$Gap<string | number>>,
+  columnGap?: TypeResponsiveBaseSystemProp<Property$ColumnGap<string | number>>,
+  rowGap?: TypeResponsiveBaseSystemProp<Property$RowGap<string | number>>,
 |}>;
 export const flexboxSystemProps: StyledSystemStyleFn = flexbox;

package/__flow__/types/system-props.flow.js

@@ -116,6 +116,9 @@ export type TypeSystemFlexboxProps = $ReadOnly<{|
   justifySelf?: TypeResponsiveString<>,
   alignSelf?: TypeResponsiveString<>,
   order?: TypeResponsiveBase<>,
+  gap?: TypeResponsiveBase<>,
+  rowGap?: TypeResponsiveBase<>,
+  columnGap?: TypeResponsiveBase<>,
 |}>;
 export type TypeSystemGridProps = $ReadOnly<{|
   gridArea?: TypeResponsiveBase<>,

package/__flow__/types/theme.flow.js

@@ -96,6 +96,33 @@ export type TypeAnalyticsTheme = {|
   },
 |};
 export type TypeListeningTheme = {|
+  chart: {
+    indicator: {
+      default: {
+        primary: string,
+        secondary: string,
+        ...
+      },
+      hover: {
+        primary: string,
+        secondary: string,
+        ...
+      },
+      ...
+    },
+    spike: {
+      background: {
+        base: string,
+        ...
+      },
+      icon: {
+        base: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
   topicTypes: {
     customTopic: string,
     brandHealth: string,

package/commonjs/Banner/Banner.js

@@ -7,49 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../Box"));
+var _Button = _interopRequireDefault(require("../Button"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _styles = _interopRequireDefault(require("./styles"));
-var _excluded = ["type", "text"];
+var _styles = _interopRequireWildcard(require("./styles"));
+var _excluded = ["type", "text", "onClose", "closeButtonLabel"];
 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; }
-var getBannerIcon = function getBannerIcon(type) {
+var getBannerIconName = function getBannerIconName(type) {
   switch (type) {
     case 'success':
-      return /*#__PURE__*/React.createElement(_Icon.default, {
-        name: "circle-check-no-fill",
-        className: "Icon",
-        fixedWidth: true
-      });
+      return 'circle-check-no-fill';
+    case 'error':
+      return 'triangle';
+    case 'warning':
+      return 'triangle';
+    case 'opportunity':
+      return 'sparkles';
     case 'info':
-      return /*#__PURE__*/React.createElement(_Icon.default, {
-        name: "info-white",
-        className: "Icon",
-        fixedWidth: true
-      });
+    default:
+      return 'info-white';
+  }
+};
+var getBannerIconColor = function getBannerIconColor(type) {
+  switch (type) {
+    case 'success':
+      return 'icon.success';
     case 'error':
-      return /*#__PURE__*/React.createElement(_Icon.default, {
-        name: "triangle",
-        className: "Icon",
-        fixedWidth: true
-      });
+      return 'icon.error';
     case 'warning':
-      return /*#__PURE__*/React.createElement(_Icon.default, {
-        name: "triangle",
-        className: "Icon",
-        fixedWidth: true
-      });
+      return 'icon.warning';
     case 'opportunity':
-      return /*#__PURE__*/React.createElement(_Icon.default, {
-        name: "sparkles",
-        className: "Icon",
-        fixedWidth: true
-      });
+      return 'icon.opportunity';
+    case 'info':
     default:
-      return;
+      return 'icon.info';
   }
 };
 
@@ -58,6 +53,9 @@ var Banner = function Banner(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'info' : _ref$type,
     text = _ref.text,
+    onClose = _ref.onClose,
+    _ref$closeButtonLabel = _ref.closeButtonLabel,
+    closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Close' : _ref$closeButtonLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     type: type,
@@ -68,7 +66,24 @@ var Banner = function Banner(_ref) {
     display: "flex",
     alignItems: "center",
     width: 1
-  }, getBannerIcon(type), text));
+  }, /*#__PURE__*/React.createElement(_styles.StyledBannerIcon, {
+    name: getBannerIconName(type),
+    color: getBannerIconColor(type),
+    className: "Icon",
+    fixedWidth: true,
+    mt: "3px",
+    mr: 400
+  }), text, onClose && /*#__PURE__*/React.createElement(_Box.default, {
+    ml: "auto",
+    pl: 400,
+    alignSelf: "flex-start"
+  }, /*#__PURE__*/React.createElement(_Button.default, {
+    p: 0,
+    onClick: onClose,
+    ariaLabel: closeButtonLabel
+  }, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "x"
+  })))));
 };
 var _default = Banner;
 exports.default = _default;

package/commonjs/Banner/styles.js

@@ -4,16 +4,23 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledBannerIcon = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _systemProps = require("../utils/system-props");
+var _Icon = _interopRequireDefault(require("../Icon"));
+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; }
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-r8d7e5-0"
 })(function (props) {
-  return (0, _styledComponents.css)(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";.Icon{align-self:flex-start;margin-top:3px;margin-right:", ";min-width:16px;color:", ";}a,button{font-weight:", ";color:", ";font-size:inherit;&:hover{color:", ";text-decoration:underline;}}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.body, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors.container.border[props.type], props.theme.colors.container.background[props.type], props.theme.space[400], props.theme.colors.icon[props.type], props.theme.fontWeights.semibold, props.theme.colors.text.body, props.theme.colors.text.body, _systemProps.COMMON, _systemProps.LAYOUT);
+  return (0, _styledComponents.css)(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";a,button{font-weight:", ";color:", ";font-size:inherit;&:hover{color:", ";text-decoration:underline;}}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.body, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors.container.border[props.type], props.theme.colors.container.background[props.type], props.theme.fontWeights.semibold, props.theme.colors.text.body, props.theme.colors.text.body, _systemProps.COMMON, _systemProps.LAYOUT);
 });
 var _default = Container;
-exports.default = _default;
+exports.default = _default;
+var StyledBannerIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
+  displayName: "styles__StyledBannerIcon",
+  componentId: "sc-r8d7e5-1"
+})(["align-self:flex-start;min-width:16px;"]);
+exports.StyledBannerIcon = StyledBannerIcon;

package/commonjs/CharacterCounter/CharacterCounter.js

@@ -42,6 +42,7 @@ var CharacterCounter = /*#__PURE__*/function (_React$Component) {
         rest = _objectWithoutProperties(_this$props, _excluded);
       var remaining = this.props.maxValue - this.props.currentValue;
       return /*#__PURE__*/React.createElement(_styles.default, _extends({
+        role: "status",
         mini: size === 'mini',
         overlimit: remaining <= 0
       }, rest), remaining);

package/commonjs/Input/styles.js

@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-4stdun-0"
-})(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;line-height:16px;margin:0;padding:", ";font-size:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";}", " ", "}", " ", " ", " ", " ", ""], function (props) {
+})(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;margin:0;padding:", ";font-size:", ";line-height:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&::placeholder{color:", ";}", " ", "}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.radii[500];
 }, function (props) {
   return props.theme.colors.form.background.base;
@@ -34,7 +34,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   switch (props.size) {
     case 'large':
-      return props.theme.space[400];
+      return "".concat(props.theme.space[350], " ").concat(props.theme.space[400]);
     case 'small':
       return props.theme.space[200];
     case 'default':
@@ -50,6 +50,17 @@ var Container = _styledComponents.default.div.withConfig({
     default:
       return props.theme.typography[200].fontSize;
   }
+}, function (props) {
+  switch (props.size) {
+    case 'large':
+      return props.theme.typography[300].lineHeight;
+
+    /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */
+    case 'small':
+    case 'default':
+    default:
+      return '16px';
+  }
 }, _mixins.focusRing, function (props) {
   return props.theme.colors.form.placeholder.base;
 }, function (props) {

package/commonjs/Select/styles.js

@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-egruk2-0"
-})(["position:relative;box-sizing:border-box;select{box-sizing:border-box;width:100%;border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";cursor:", ";outline:none;appearance:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";margin:0;visibility:visible;padding:", ";font-size:", ";&::-ms-expand{display:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}}@-moz-document url-prefix(){select{line-height:14px;}}", " ", " ", ""], function (props) {
+})(["position:relative;box-sizing:border-box;select{box-sizing:border-box;width:100%;border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";cursor:", ";outline:none;appearance:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";margin:0;visibility:visible;padding:", ";font-size:", ";line-height:", ";&::-ms-expand{display:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}}", " ", " ", ""], function (props) {
   return props.theme.colors.form.border.base;
 }, function (props) {
   return props.theme.radii[500];
@@ -38,7 +38,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   switch (props.size) {
     case 'large':
-      return "".concat(props.theme.space[400], " ").concat(props.theme.space[600], " ").concat(props.theme.space[400], " ").concat(props.theme.space[400]);
+      return "".concat(props.theme.space[350], " ").concat(props.theme.space[600], " ").concat(props.theme.space[350], " ").concat(props.theme.space[400]);
     case 'small':
       return "".concat(props.theme.space[200], " ").concat(props.theme.space[500], " ").concat(props.theme.space[200], " ").concat(props.theme.space[200]);
     case 'default':
@@ -54,6 +54,17 @@ var Container = _styledComponents.default.div.withConfig({
     default:
       return props.theme.typography[200].fontSize;
   }
+}, function (props) {
+  switch (props.size) {
+    case 'large':
+      return props.theme.typography[300].lineHeight;
+
+    /* hardcoded to 'normal' so the large change doesn't impact small/default */
+    case 'small':
+    case 'default':
+    default:
+      return 'normal';
+  }
 }, _mixins.focusRing, function (props) {
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]);
 }, function (props) {

package/commonjs/StatefulStory.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatefulStory = StatefulStory;
+var _react = require("react");
+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; }
+/**
+ * A wrapper component that allows you to pass in an initial state.
+ *
+ * This is useful for adding state inline for stories. Story functions are not intepretted as React components,
+ * so you can't use hooks in them. This component allows you to useState in a story without having to create a
+ * custom component for every story.
+ */
+function StatefulStory(_ref) {
+  var children = _ref.children,
+    initialState = _ref.initialState;
+  var _useState = (0, _react.useState)(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  return children({
+    state: state,
+    setState: setState
+  });
+}

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

@@ -92,6 +92,26 @@ var analytics = {
 };
 exports.analytics = analytics;
 var listening = {
+  chart: {
+    indicator: {
+      default: {
+        primary: _theme.default.colors.neutral[100],
+        secondary: _theme.default.colors.neutral[900]
+      },
+      hover: {
+        primary: _theme.default.colors.neutral[300],
+        secondary: _theme.default.colors.neutral[0]
+      }
+    },
+    spike: {
+      background: {
+        base: _theme.default.colors.teal[500]
+      },
+      icon: {
+        base: _theme.default.colors.neutral[0]
+      }
+    }
+  },
   topicTypes: {
     customTopic: _theme.default.colors.teal[400],
     brandHealth: _theme.default.colors.red[400],

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

@@ -89,6 +89,26 @@ var analytics = {
 };
 exports.analytics = analytics;
 var listening = {
+  chart: {
+    indicator: {
+      default: {
+        primary: _theme.default.colors.neutral[400],
+        secondary: _theme.default.colors.neutral[0]
+      },
+      hover: {
+        primary: _theme.default.colors.neutral[1000],
+        secondary: _theme.default.colors.neutral[0]
+      }
+    },
+    spike: {
+      background: {
+        base: _theme.default.colors.teal[500]
+      },
+      icon: {
+        base: _theme.default.colors.neutral[0]
+      }
+    }
+  },
   topicTypes: {
     customTopic: _theme.default.colors.blue[400],
     brandHealth: _theme.default.colors.red[400],

package/commonjs/utils/system-props/gap.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gap = void 0;
+var _styledSystem = require("styled-system");
+var gap = (0, _styledSystem.system)({
+  gap: {
+    property: 'gap',
+    scale: 'space'
+  },
+  rowGap: {
+    property: 'rowGap',
+    scale: 'space'
+  },
+  columnGap: {
+    property: 'columnGap',
+    scale: 'space'
+  }
+});
+exports.gap = gap;

package/commonjs/utils/system-props/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _systemProps = require("./system-props");
+Object.keys(_systemProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _systemProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _systemProps[key];
+    }
+  });
+});

package/commonjs/utils/{system-props.js → system-props/system-props.js}

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TYPOGRAPHY = exports.POSITION = exports.LAYOUT = exports.GRID = exports.FLEXBOX = exports.COMMON = exports.BORDER = void 0;
 var styles = _interopRequireWildcard(require("styled-system"));
+var _gap = require("./gap");
 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; }
 // eslint-disable-next-line no-restricted-syntax
@@ -33,7 +34,7 @@ var LAYOUT = styles.compose(styles.display, styles.size, styles.width, styles.he
 exports.LAYOUT = LAYOUT;
 var POSITION = styles.compose(styles.position, styles.zIndex, styles.top, styles.right, styles.bottom, styles.left);
 exports.POSITION = POSITION;
-var FLEXBOX = styles.compose(styles.flexBasis, styles.flexDirection, styles.flexWrap, styles.alignContent, styles.alignItems, styles.justifyContent, styles.justifyItems, styles.order, styles.flex, styles.flexShrink, styles.flexGrow, styles.justifySelf, styles.alignSelf);
+var FLEXBOX = styles.compose(styles.flexBasis, styles.flexDirection, styles.flexWrap, styles.alignContent, styles.alignItems, styles.justifyContent, styles.justifyItems, styles.order, styles.flex, styles.flexShrink, styles.flexGrow, styles.justifySelf, styles.alignSelf, _gap.gap);
 exports.FLEXBOX = FLEXBOX;
 var GRID = styles.grid;
 exports.GRID = GRID;

package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss

@@ -548,6 +548,26 @@ $theme: (
         )
       ),
       "listening": (
+        "chart": (
+          "indicator": (
+            "default": (
+              "primary": #f3f4f4,
+              "secondary": #273333
+            ),
+            "hover": (
+              "primary": #c8cccc,
+              "secondary": #FFFFFF
+            )
+          ),
+          "spike": (
+            "background": (
+              "base": #08c4b2
+            ),
+            "icon": (
+              "base": #FFFFFF
+            )
+          )
+        ),
         "topicTypes": (
           "customTopic": #24e0c5,
           "brandHealth": #ff7f6e,
@@ -920,6 +940,26 @@ $theme: (
     )
   ),
   "listening": (
+    "chart": (
+      "indicator": (
+        "default": (
+          "primary": #f3f4f4,
+          "secondary": #273333
+        ),
+        "hover": (
+          "primary": #c8cccc,
+          "secondary": #FFFFFF
+        )
+      ),
+      "spike": (
+        "background": (
+          "base": #08c4b2
+        ),
+        "icon": (
+          "base": #FFFFFF
+        )
+      )
+    ),
     "topicTypes": (
       "customTopic": #24e0c5,
       "brandHealth": #ff7f6e,

package/dist/themes/extendedThemes/sproutTheme/light/theme.scss

@@ -547,6 +547,26 @@ $theme: (
         )
       ),
       "listening": (
+        "chart": (
+          "indicator": (
+            "default": (
+              "primary": #b0b6b7,
+              "secondary": #FFFFFF
+            ),
+            "hover": (
+              "primary": #162020,
+              "secondary": #FFFFFF
+            )
+          ),
+          "spike": (
+            "background": (
+              "base": #08c4b2
+            ),
+            "icon": (
+              "base": #FFFFFF
+            )
+          )
+        ),
         "topicTypes": (
           "customTopic": #56adf5,
           "brandHealth": #ff7f6e,
@@ -919,6 +939,26 @@ $theme: (
     )
   ),
   "listening": (
+    "chart": (
+      "indicator": (
+        "default": (
+          "primary": #b0b6b7,
+          "secondary": #FFFFFF
+        ),
+        "hover": (
+          "primary": #162020,
+          "secondary": #FFFFFF
+        )
+      ),
+      "spike": (
+        "background": (
+          "base": #08c4b2
+        ),
+        "icon": (
+          "base": #FFFFFF
+        )
+      )
+    ),
     "topicTypes": (
       "customTopic": #56adf5,
       "brandHealth": #ff7f6e,

package/dist/types/Badge/BadgeTypes.d.ts

@@ -10,7 +10,7 @@ export interface TypeBadgeProps extends TypeBaseBadgeProps {
     text?: React.ReactNode;
     /** Size default is deprecated in favor of small and large */
     size?: 'small' | 'large' | 'default';
-    badgeColor?: 'green' | 'blue' | 'purple' | 'yellow' | 'orange' | 'red' | 'neutral';
+    badgeColor?: 'green' | 'blue' | 'purple' | 'yellow' | 'orange' | 'red' | 'neutral' | 'magenta' | 'pink' | 'aqua' | 'teal';
     iconName?: TypeIconName;
     /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
     tip?: React.ReactNode;

package/dist/types/Badge/BadgeTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeTypes.d.ts","sourceRoot":"","sources":["../../../src/Badge/BadgeTypes.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAElF,MAAM,WAAW,kBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EACtC,MAAM,qBAAqB,CAC5B,EACD,qBAAqB,EACrB,+BAA+B;CAAG;AAEtC,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IACrC,UAAU,CAAC,EACP,OAAO,GACP,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,oGAAoG;IACpG,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"BadgeTypes.d.ts","sourceRoot":"","sources":["../../../src/Badge/BadgeTypes.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAElF,MAAM,WAAW,kBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EACtC,MAAM,qBAAqB,CAC5B,EACD,qBAAqB,EACrB,+BAA+B;CAAG;AAEtC,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IACrC,UAAU,CAAC,EACP,OAAO,GACP,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,oGAAoG;IACpG,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/types/Banner/Banner.d.ts

@@ -1,5 +1,5 @@
 import type { TypeBannerProps } from './BannerTypes';
 /** TODO: change to 'info' type by default in future version */
-declare const Banner: ({ type, text, ...rest }: TypeBannerProps) => JSX.Element;
+declare const Banner: ({ type, text, onClose, closeButtonLabel, ...rest }: TypeBannerProps) => JSX.Element;
 export default Banner;
 //# sourceMappingURL=Banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,eAAe,EAAiB,MAAM,eAAe,CAAC;AAmBnE,+DAA+D;AAC/D,QAAA,MAAM,MAAM,4BAAoC,eAAe,gBAe9D,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,eAAe,EAAiB,MAAM,eAAe,CAAC;AAkCnE,+DAA+D;AAC/D,QAAA,MAAM,MAAM,uDAMT,eAAe,gBA6BjB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/types/Banner/BannerTypes.d.ts

@@ -6,5 +6,9 @@ export interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<'di
     text: React.ReactNode;
     /** Type of banner. */
     type?: EnumBannerType;
+    /** Show the close icon in the banner with an action when clicked */
+    onClose?: () => void;
+    /** Close icon aria label */
+    closeButtonLabel?: string;
 }
 //# sourceMappingURL=BannerTypes.d.ts.map

package/dist/types/Banner/BannerTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerTypes.d.ts","sourceRoot":"","sources":["../../../src/Banner/BannerTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAClF,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,cAAc,GACtB,SAAS,GACT,MAAM,GACN,OAAO,GACP,SAAS,GACT,aAAa,CAAC;AAElB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAC1D,qBAAqB,EACrB,qBAAqB,EACrB,+BAA+B;IACjC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,sBAAsB;IACtB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB"}
+{"version":3,"file":"BannerTypes.d.ts","sourceRoot":"","sources":["../../../src/Banner/BannerTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAClF,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,cAAc,GACtB,SAAS,GACT,MAAM,GACN,OAAO,GACP,SAAS,GACT,aAAa,CAAC;AAElB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAC1D,qBAAqB,EACrB,qBAAqB,EACrB,+BAA+B;IACjC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,sBAAsB;IACtB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}