@sproutsocial/racine 14.0.0 → 14.1.0

package/dist/types/types/system-props.d.ts

@@ -1,4 +1,4 @@
-import type { BorderProps, BoxShadowProps, ColorProps as TypeColorProps, FlexboxProps, GridProps, Theme, RequiredTheme, WidthProps, HeightProps, MinWidthProps, MinHeightProps, MaxWidthProps, MaxHeightProps, DisplayProps, VerticalAlignProps, SizeProps, PositionProps, ResponsiveValue, SpaceProps as TypeSpaceProps, TextShadowProps, TypographyProps } from 'styled-system';
+import type { BorderProps, BoxShadowProps, ColorProps as TypeColorProps, FlexboxProps, GridProps, Theme, RequiredTheme, WidthProps, HeightProps, MinWidthProps, MinHeightProps, MaxWidthProps, MaxHeightProps, DisplayProps, VerticalAlignProps, SizeProps, PositionProps, ResponsiveValue, SpaceProps as TypeSpaceProps, TextShadowProps, TypographyProps, ThemeValue } from 'styled-system';
 import type { Property } from 'csstype';
 import type { TypeTypography } from '../types/theme';
 import { LiteralAsNumberOrString } from '../types/shared';
@@ -17,6 +17,28 @@ export interface TypeSystemLayoutProps<ThemeType extends Theme = RequiredTheme>
     overflow?: ResponsiveValue<Property.Overflow, ThemeType> | undefined;
 }
 export declare type TypeSystemPositionProps = PositionProps;
-export declare type TypeSystemFlexboxProps = FlexboxProps;
+export interface GapProps<ThemeType extends Theme = RequiredTheme, TVal = Property.Gap<ThemeValue<'space', ThemeType>>> {
+    /**
+     * The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap
+     * and column-gap.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+     */
+    gap?: ResponsiveValue<TVal, ThemeType> | undefined;
+    /**
+     * The column-gap CSS property sets the size of the gap (gutter) between an element's columns.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+     */
+    columnGap?: ResponsiveValue<TVal, ThemeType> | undefined;
+    /**
+     * The row-gap CSS property sets the size of the gap (gutter) between an element's rows.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+     */
+    rowGap?: ResponsiveValue<TVal, ThemeType> | undefined;
+}
+export interface TypeSystemFlexboxProps<ThemeType extends Theme = RequiredTheme> extends FlexboxProps<ThemeType>, GapProps<ThemeType> {
+}
 export declare type TypeSystemGridProps = GridProps;
 //# sourceMappingURL=system-props.d.ts.map

package/dist/types/types/system-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"system-props.d.ts","sourceRoot":"","sources":["../../../src/types/system-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,cAAc,EACd,UAAU,IAAI,cAAc,EAC5B,YAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAa,EACb,UAAU,EACV,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,aAAa,EACb,eAAe,EACf,UAAU,IAAI,cAAc,EAC5B,eAAe,EACf,eAAe,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAC,uBAAuB,EAAC,MAAM,mBAAmB,CAAC;AAE1D,YAAY,EAAC,eAAe,IAAI,cAAc,EAAC,MAAM,eAAe,CAAC;AACrE,MAAM,WAAW,qBAAsB,SAAQ,cAAc,EAAE,cAAc;IAC3E,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3C;AACD,MAAM,WAAW,qBACf,SAAQ,WAAW,EACjB,cAAc,EACd,eAAe;CAAG;AAEtB,oBAAY,4BAA4B,GAAG,eAAe,CAExD,uBAAuB,CAAC,MAAM,cAAc,CAAC,CAC9C,CAAC;AACF,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzC,QAAQ,CAAC,EAAE,4BAA4B,CAAC;IACxC,SAAS,CAAC,EAAE,4BAA4B,CAAC;CAC1C;AACD,MAAM,WAAW,qBAAqB,CAAC,SAAS,SAAS,KAAK,GAAG,aAAa,CAC5E,SAAQ,UAAU,CAAC,SAAS,CAAC,EAC3B,WAAW,CAAC,SAAS,CAAC,EACtB,aAAa,CAAC,SAAS,CAAC,EACxB,cAAc,CAAC,SAAS,CAAC,EACzB,aAAa,CAAC,SAAS,CAAC,EACxB,cAAc,CAAC,SAAS,CAAC,EACzB,YAAY,CAAC,SAAS,CAAC,EACvB,kBAAkB,CAAC,SAAS,CAAC,EAC7B,SAAS,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;CACtE;AACD,oBAAY,uBAAuB,GAAG,aAAa,CAAC;AACpD,oBAAY,sBAAsB,GAAG,YAAY,CAAC;AAClD,oBAAY,mBAAmB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"system-props.d.ts","sourceRoot":"","sources":["../../../src/types/system-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,cAAc,EACd,UAAU,IAAI,cAAc,EAC5B,YAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAa,EACb,UAAU,EACV,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,aAAa,EACb,eAAe,EACf,UAAU,IAAI,cAAc,EAC5B,eAAe,EACf,eAAe,EACf,UAAU,EACX,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAC,uBAAuB,EAAC,MAAM,mBAAmB,CAAC;AAE1D,YAAY,EAAC,eAAe,IAAI,cAAc,EAAC,MAAM,eAAe,CAAC;AACrE,MAAM,WAAW,qBAAsB,SAAQ,cAAc,EAAE,cAAc;IAC3E,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3C;AACD,MAAM,WAAW,qBACf,SAAQ,WAAW,EACjB,cAAc,EACd,eAAe;CAAG;AAEtB,oBAAY,4BAA4B,GAAG,eAAe,CAExD,uBAAuB,CAAC,MAAM,cAAc,CAAC,CAC9C,CAAC;AACF,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzC,QAAQ,CAAC,EAAE,4BAA4B,CAAC;IACxC,SAAS,CAAC,EAAE,4BAA4B,CAAC;CAC1C;AACD,MAAM,WAAW,qBAAqB,CAAC,SAAS,SAAS,KAAK,GAAG,aAAa,CAC5E,SAAQ,UAAU,CAAC,SAAS,CAAC,EAC3B,WAAW,CAAC,SAAS,CAAC,EACtB,aAAa,CAAC,SAAS,CAAC,EACxB,cAAc,CAAC,SAAS,CAAC,EACzB,aAAa,CAAC,SAAS,CAAC,EACxB,cAAc,CAAC,SAAS,CAAC,EACzB,YAAY,CAAC,SAAS,CAAC,EACvB,kBAAkB,CAAC,SAAS,CAAC,EAC7B,SAAS,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;CACtE;AACD,oBAAY,uBAAuB,GAAG,aAAa,CAAC;AAEpD,MAAM,WAAW,QAAQ,CACvB,SAAS,SAAS,KAAK,GAAG,aAAa,EACvC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAEnD;;;;;OAKG;IACH,GAAG,CAAC,EAAE,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;IACnD;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;IACzD;;;;OAIG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;CACvD;AAED,MAAM,WAAW,sBAAsB,CAAC,SAAS,SAAS,KAAK,GAAG,aAAa,CAC7E,SAAQ,YAAY,CAAC,SAAS,CAAC,EAC7B,QAAQ,CAAC,SAAS,CAAC;CAAG;AAE1B,oBAAY,mBAAmB,GAAG,SAAS,CAAC"}

package/dist/types/utils/system-props/gap.d.ts

@@ -0,0 +1,2 @@
+export declare const gap: import("styled-system").styleFn;
+//# sourceMappingURL=gap.d.ts.map

package/dist/types/utils/system-props/gap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gap.d.ts","sourceRoot":"","sources":["../../../../src/utils/system-props/gap.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,iCAad,CAAC"}

package/dist/types/utils/system-props/index.d.ts

@@ -0,0 +1,2 @@
+export * from './system-props';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/utils/system-props/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/system-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/types/utils/system-props/system-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-props.d.ts","sourceRoot":"","sources":["../../../../src/utils/system-props/system-props.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAQxC,eAAO,MAAM,MAAM,gBAOlB,CAAC;AAEF,eAAO,MAAM,MAAM,gBAgBlB,CAAC;AAEF,eAAO,MAAM,UAAU,gBAOtB,CAAC;AAEF,eAAO,MAAM,MAAM,gBAWlB,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAOpB,CAAC;AAEF,eAAO,MAAM,OAAO,gBAenB,CAAC;AAEF,eAAO,MAAM,IAAI,gBAAc,CAAC"}

package/lib/Banner/Banner.js

@@ -1,45 +1,40 @@
-var _excluded = ["type", "text"];
+var _excluded = ["type", "text", "onClose", "closeButtonLabel"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import Box from "../Box";
+import Button from "../Button";
 import Icon from "../Icon";
-import Container from "./styles";
-var getBannerIcon = function getBannerIcon(type) {
+import Container, { StyledBannerIcon } from "./styles";
+var getBannerIconName = function getBannerIconName(type) {
   switch (type) {
     case 'success':
-      return /*#__PURE__*/React.createElement(Icon, {
-        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, {
-        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, {
-        name: "triangle",
-        className: "Icon",
-        fixedWidth: true
-      });
+      return 'icon.error';
     case 'warning':
-      return /*#__PURE__*/React.createElement(Icon, {
-        name: "triangle",
-        className: "Icon",
-        fixedWidth: true
-      });
+      return 'icon.warning';
     case 'opportunity':
-      return /*#__PURE__*/React.createElement(Icon, {
-        name: "sparkles",
-        className: "Icon",
-        fixedWidth: true
-      });
+      return 'icon.opportunity';
+    case 'info':
     default:
-      return;
+      return 'icon.info';
   }
 };
 
@@ -48,6 +43,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(Container, _extends({
     type: type,
@@ -58,6 +56,23 @@ var Banner = function Banner(_ref) {
     display: "flex",
     alignItems: "center",
     width: 1
-  }, getBannerIcon(type), text));
+  }, /*#__PURE__*/React.createElement(StyledBannerIcon, {
+    name: getBannerIconName(type),
+    color: getBannerIconColor(type),
+    className: "Icon",
+    fixedWidth: true,
+    mt: "3px",
+    mr: 400
+  }), text, onClose && /*#__PURE__*/React.createElement(Box, {
+    ml: "auto",
+    pl: 400,
+    alignSelf: "flex-start"
+  }, /*#__PURE__*/React.createElement(Button, {
+    p: 0,
+    onClick: onClose,
+    ariaLabel: closeButtonLabel
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "x"
+  })))));
 };
 export default Banner;

package/lib/Banner/styles.js

@@ -1,9 +1,14 @@
 import styled, { css } from 'styled-components';
 import { COMMON, LAYOUT } from "../utils/system-props";
+import Icon from "../Icon";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-r8d7e5-0"
 })(function (props) {
-  return 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, COMMON, LAYOUT);
+  return 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, COMMON, LAYOUT);
 });
-export default Container;
+export default Container;
+export var StyledBannerIcon = styled(Icon).withConfig({
+  displayName: "styles__StyledBannerIcon",
+  componentId: "sc-r8d7e5-1"
+})(["align-self:flex-start;min-width:16px;"]);

package/lib/CharacterCounter/CharacterCounter.js

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

package/lib/DatePicker/DateRangePicker/DateRangePicker.js

@@ -13,12 +13,12 @@ var DateRangePicker = function DateRangePicker(_ref) {
     endDate = _ref$endDate === void 0 ? null : _ref$endDate,
     onDatesChange = _ref.onDatesChange,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ReactDatesCssOverrides, null), /*#__PURE__*/React.createElement(DayPickerRangeController, _extends({}, commonDatePickerProps, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ReactDatesCssOverrides, null), /*#__PURE__*/React.createElement(DayPickerRangeController, _extends({
     startDate: startDate,
     endDate: endDate,
     onDatesChange: onDatesChange,
     numberOfMonths: 2,
     initialVisibleMonth: null
-  }, rest)));
+  }, commonDatePickerProps, rest)));
 };
 export default DateRangePicker;

package/lib/Input/styles.js

@@ -4,7 +4,7 @@ import { COMMON } from "../utils/system-props";
 var Container = styled.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;
@@ -25,7 +25,7 @@ var Container = styled.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':
@@ -41,6 +41,17 @@ var Container = styled.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';
+  }
 }, focusRing, function (props) {
   return props.theme.colors.form.placeholder.base;
 }, function (props) {

package/lib/Label/Label.js

@@ -1,8 +1,5 @@
 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); }
 var _excluded = ["as"];
-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; }
@@ -15,10 +12,21 @@ 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); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import styled from 'styled-components';
 import Text from "../Text";
-var StyledLabel = styled(Text).withConfig({
+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, _extends({}, rest, {
+    as: as
+  }));
+};
+var StyledLabel = styled(LabelBase).withConfig({
   displayName: "Label__StyledLabel",
   componentId: "sc-dh0olx-0"
 })(["display:flex;align-items:center;"]);
@@ -32,17 +40,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/lib/PartnerLogo/PartnerLogo.js

@@ -13,8 +13,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 = useTheme(),

package/lib/Select/styles.js

@@ -4,7 +4,7 @@ import { COMMON } from "../utils/system-props";
 var Container = styled.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];
@@ -29,7 +29,7 @@ var Container = styled.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':
@@ -45,6 +45,17 @@ var Container = styled.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';
+  }
 }, focusRing, function (props) {
   return props.disabled && css(["opacity:0.4;"]);
 }, function (props) {

package/lib/StatefulStory.js

@@ -0,0 +1,33 @@
+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; }
+import { useState } from 'react';
+
+/**
+ * Props for the StatefulStory component.
+ *
+ * This type automatically detects the type of the `initialState` prop and passes it to the `children` when rendered.
+ */
+
+/**
+ * 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.
+ */
+export function StatefulStory(_ref) {
+  var children = _ref.children,
+    initialState = _ref.initialState;
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  return children({
+    state: state,
+    setState: setState
+  });
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { system } from 'styled-system';
+export var gap = system({
+  gap: {
+    property: 'gap',
+    scale: 'space'
+  },
+  rowGap: {
+    property: 'rowGap',
+    scale: 'space'
+  },
+  columnGap: {
+    property: 'columnGap',
+    scale: 'space'
+  }
+});

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

@@ -0,0 +1 @@
+export * from "./system-props";

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

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-syntax
 import * as styles from 'styled-system';
+import { gap } from "./gap";
 var typeScale = styles.variant({
   key: 'typography',
   prop: 'typeScale'
@@ -18,5 +19,5 @@ styles.boxShadow);
 export var TYPOGRAPHY = styles.compose(typeScale, styles.fontFamily, styles.fontStyle, styles.fontWeight, styles.lineHeight, styles.textAlign);
 export var LAYOUT = styles.compose(styles.display, styles.size, styles.width, styles.height, styles.minWidth, styles.minHeight, styles.maxWidth, styles.maxHeight, styles.overflow, styles.verticalAlign);
 export var POSITION = styles.compose(styles.position, styles.zIndex, styles.top, styles.right, styles.bottom, styles.left);
-export 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);
+export 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);
 export var GRID = styles.grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "14.0.0",
+  "version": "14.1.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -100,7 +100,6 @@
     "@babel/preset-typescript": "^7.18.6",
     "@changesets/cli": "^2.12.0",
     "@khanacademy/flow-to-ts": "^0.5.2",
-    "@reach/component-component": "^0.1.3",
     "@sproutsocial/seeds-border": "^1.1.0",
     "@sproutsocial/seeds-color": "^1.5.3",
     "@sproutsocial/seeds-depth": "^3.0.0",

package/dist/types/utils/system-props.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"system-props.d.ts","sourceRoot":"","sources":["../../../src/utils/system-props.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAOxC,eAAO,MAAM,MAAM,gBAOlB,CAAC;AAEF,eAAO,MAAM,MAAM,gBAgBlB,CAAC;AAEF,eAAO,MAAM,UAAU,gBAOtB,CAAC;AAEF,eAAO,MAAM,MAAM,gBAWlB,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAOpB,CAAC;AAEF,eAAO,MAAM,OAAO,gBAcnB,CAAC;AAEF,eAAO,MAAM,IAAI,gBAAc,CAAC"}