@sproutsocial/racine 14.0.0 → 14.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Change Log
 
+## 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
+
+- 32d0513a: Revert default set on `PartnerLogo.size` (should have no default)
+- 32d0513a: Revert a markup and styled component change on `Label` that broke the font family and styles used
+- 32d0513a: Fix `TypeDrawerCloseButtonProps` for `Drawer.CloseButton` to correctly extend `TypeButtonProps`
+
 ## 14.0.0
 
 ### Major Changes

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/DatePicker/DateRangePicker/DateRangePicker.js

@@ -23,13 +23,13 @@ var DateRangePicker = function DateRangePicker(_ref) {
     endDate = _ref$endDate === void 0 ? null : _ref$endDate,
     onDatesChange = _ref.onDatesChange,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ReactDatesCssOverrides, null), /*#__PURE__*/_react.default.createElement(_DayPickerRangeController.default, _extends({}, _common.commonDatePickerProps, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ReactDatesCssOverrides, null), /*#__PURE__*/_react.default.createElement(_DayPickerRangeController.default, _extends({
     startDate: startDate,
     endDate: endDate,
     onDatesChange: onDatesChange,
     numberOfMonths: 2,
     initialVisibleMonth: null
-  }, rest)));
+  }, _common.commonDatePickerProps, rest)));
 };
 var _default = DateRangePicker;
 exports.default = _default;

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/Label/Label.js

@@ -12,9 +12,6 @@ var _excluded = ["as"];
 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; }
 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; }
@@ -27,7 +24,18 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-var StyledLabel = (0, _styledComponents.default)(_Text.default).withConfig({
+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 LabelBase = function LabelBase(_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'label' : _ref$as,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_Text.default, _extends({}, rest, {
+    as: as
+  }));
+};
+var StyledLabel = (0, _styledComponents.default)(LabelBase).withConfig({
   displayName: "Label__StyledLabel",
   componentId: "sc-dh0olx-0"
 })(["display:flex;align-items:center;"]);
@@ -41,17 +49,12 @@ var Label = /*#__PURE__*/function (_React$Component) {
   _createClass(Label, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        _this$props$as = _this$props.as,
-        as = _this$props$as === void 0 ? 'label' : _this$props$as,
-        rest = _objectWithoutProperties(_this$props, _excluded);
       return /*#__PURE__*/React.createElement(StyledLabel, _extends({
-        as: as,
         fontSize: 200,
         fontWeight: "semibold",
         color: "text.headline",
         "data-qa-label": this.props.htmlFor
-      }, rest));
+      }, this.props));
     }
   }]);
   return Label;

package/commonjs/PartnerLogo/PartnerLogo.js

@@ -22,8 +22,7 @@ var PartnerLogo = function PartnerLogo(_ref) {
     logoType = _ref.logoType,
     height = _ref.height,
     width = _ref.width,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    size = _ref.size,
     color = _ref.color,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = (0, _styledComponents.useTheme)(),

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,