@sproutsocial/racine 12.24.0 → 13.0.2

package/lib/Button/styles.js

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
-import { COMMON, LAYOUT } from "../utils/system-props";
 import { focusRing, disabled, pill } from "../utils/mixins";
+import { COMMON, LAYOUT } from "../utils/system-props";
 import Icon from "../Icon/styles";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",

package/lib/Card/index.flow.js

@@ -0,0 +1,3 @@
+
+import * as React from 'react';
+import { Container } from "./styles";

package/lib/Card/styles.js

@@ -1,7 +1,7 @@
 
 import styled from 'styled-components';
-import Button from "../Button";
 import Box from "../Box";
+import Button from "../Button";
 var Container = styled(Box).withConfig({
   displayName: "styles__Container",
   componentId: "sc-p098yi-0"

package/lib/ChartLegend/index.js

@@ -3,9 +3,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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 Container, { Label, Swatch } from "./styles";
-import Text from "../Text";
 import { THEME_MAP } from "../utils/chartColors";
+import Text from "../Text";
+import Container, { Label, Swatch } from "./styles";
 function getSwatchColor(theme, index) {
   return THEME_MAP[theme.toUpperCase()][index];
 }
@@ -30,9 +30,13 @@ var ChartLegend = function ChartLegend(props) {
     _props$theme = props.theme,
     theme = _props$theme === void 0 ? 'compare' : _props$theme,
     rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    inline: !stacked,
-    "data-qa-chartlegend": ""
-  }, props.qa, rest), getLabels(legendLabels, theme));
+  return (
+    /*#__PURE__*/
+    // $FlowIssue - upgrade v0.112.0
+    React.createElement(Container, _extends({
+      inline: !stacked,
+      "data-qa-chartlegend": ""
+    }, props.qa, rest), getLabels(legendLabels, theme))
+  );
 };
 export default ChartLegend;

package/lib/Checkbox/index.js

@@ -72,31 +72,34 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
 
       // TODO: Refactor pill checkboxes to use fewer elements for performance gains
       if (!isPill) {
-        return /*#__PURE__*/React.createElement(CheckboxContainer, _extends({
-          as: label && 'label',
-          disabled: disabled,
-          indeterminate: indeterminate,
-          checked: checked
+        return (
+          /*#__PURE__*/
           // $FlowIssue - upgrade v0.112.0
-        }, rest), /*#__PURE__*/React.createElement("input", _extends({
-          type: "checkbox",
-          id: id,
-          "aria-label": ariaLabel,
-          value: value,
-          name: name,
-          checked: checked,
-          ref: function ref(el) {
-            return _this2.el = el;
-          },
-          disabled: disabled,
-          onChange: this.handleChange,
-          "data-qa-checkbox": id,
-          "data-qa-checkbox-ischecked": indeterminate ? 'indeterminate' : checked === true,
-          "data-qa-checkbox-isdisabled": disabled === true,
-          tabIndex: tabIndex
-        }, qa, inputProps)), label && /*#__PURE__*/React.createElement(LabelText, _extends({}, labelProps, {
-          disabled: disabled
-        }), label));
+          React.createElement(CheckboxContainer, _extends({
+            as: label && 'label',
+            disabled: disabled,
+            indeterminate: indeterminate,
+            checked: checked
+          }, rest), /*#__PURE__*/React.createElement("input", _extends({
+            type: "checkbox",
+            id: id,
+            "aria-label": ariaLabel,
+            value: value,
+            name: name,
+            checked: checked,
+            ref: function ref(el) {
+              return _this2.el = el;
+            },
+            disabled: disabled,
+            onChange: this.handleChange,
+            "data-qa-checkbox": id,
+            "data-qa-checkbox-ischecked": indeterminate ? 'indeterminate' : checked === true,
+            "data-qa-checkbox-isdisabled": disabled === true,
+            tabIndex: tabIndex
+          }, qa, inputProps)), label && /*#__PURE__*/React.createElement(LabelText, _extends({}, labelProps, {
+            disabled: disabled
+          }), label))
+        );
       }
       return (
         /*#__PURE__*/

package/lib/Checkbox/styles.js

@@ -2,8 +2,8 @@
 import * as React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import styled, { css } from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { focusRing, pill } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
 import Box from "../Box";
 import Icon from "../Icon";
 import Text from "../Text";

package/lib/Collapsible/index.flow.js

@@ -0,0 +1,2 @@
+
+import * as React from 'react';

package/lib/Collapsible/index.js

@@ -14,9 +14,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as React from 'react';
 import { useState, useRef, useContext, useEffect } from 'react';
-import { CollapsingBox } from "./styles";
 import useMeasure from 'use-measure';
 import Box from "../Box";
+import { CollapsingBox } from "./styles";
 var idCounter = 0;
 var CollapsibleContext = /*#__PURE__*/React.createContext({});
 var Collapsible = function Collapsible(_ref) {

package/lib/DatePicker/StatefulDateRangePicker.js

@@ -40,12 +40,15 @@ export var StatefulDateRangePicker = function StatefulDateRangePicker(_ref) {
     // respond to click or keyboard events
     nextFocusedInput === null ? START_DATE : nextFocusedInput);
   };
-  return /*#__PURE__*/React.createElement(DateRangePicker, _extends({
-    startDate: dates.startDate,
-    endDate: dates.endDate,
-    focusedInput: focusedInput,
-    onDatesChange: handleDatesChange,
-    onFocusChange: handleFocusChange
+  return (
+    /*#__PURE__*/
     // $FlowIssue
-  }, rest));
+    React.createElement(DateRangePicker, _extends({
+      startDate: dates.startDate,
+      endDate: dates.endDate,
+      focusedInput: focusedInput,
+      onDatesChange: handleDatesChange,
+      onFocusChange: handleFocusChange
+    }, rest))
+  );
 };

package/lib/DatePicker/StatefulSingleDatePicker.js

@@ -22,9 +22,12 @@ export var StatefulSingleDatePicker = function StatefulSingleDatePicker(_ref) {
     onDateChange && onDateChange(date);
     setDate(date);
   };
-  return /*#__PURE__*/React.createElement(SingleDatePicker, _extends({
-    date: stateDate,
-    onDateChange: handleDateChange
+  return (
+    /*#__PURE__*/
     // $FlowIssue
-  }, rest));
+    React.createElement(SingleDatePicker, _extends({
+      date: stateDate,
+      onDateChange: handleDateChange
+    }, rest))
+  );
 };

package/lib/DatePicker/common.js

@@ -1,9 +1,9 @@
 
 import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
 import React from 'react';
 import Icon from "../Icon";
 import { CalendarDay } from "./styles";
-import 'react-dates/lib/css/_datepicker.css';
 var iconNames = {
   left: 'arrow-left',
   right: 'arrow-right'

package/lib/DatePicker/styles.js

@@ -1,8 +1,9 @@
 
 import styled, { createGlobalStyle, css } from 'styled-components';
 import moment from 'moment';
-import Box from "../Box";
 import { disabled } from "../utils/mixins";
+import Box from "../Box";
+
 /*
  * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.
  *

package/lib/Drawer/index.flow.js

@@ -0,0 +1,2 @@
+
+import * as React from 'react';

package/lib/Drawer/index.js

@@ -11,15 +11,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from 'react';
 import { useContext, useEffect, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
-import { SlideTransition } from "./SlideTransition";
-import Container, { Content } from "./styles";
 import { animated } from 'react-spring';
-import Portal from "../Portal";
 import Box from "../Box";
-import Text from "../Text";
 import Button from "../Button";
 import Icon from "../Icon";
-
+import Text from "../Text";
+import Portal from "../Portal";
+import { SlideTransition } from "./SlideTransition";
+import Container, { Content } from "./styles";
 // If ever we needed to make drawer width configurable, move this to a default prop
 var DRAWER_WIDTH = 600;
 var AnimatedDrawer = animated(Container);
@@ -59,20 +58,23 @@ var DrawerHeader = function DrawerHeader(_ref) {
   if (render) {
     return render(drawerContext);
   }
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    display: "flex",
-    flex: "0 0 auto",
-    justifyContent: "space-between",
-    alignItems: "center",
-    pt: 400,
-    px: 450
+  return (
+    /*#__PURE__*/
     // $FlowIssue - upgrade v0.112.0
-  }, rest), children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-    as: "h2",
-    fontSize: 400,
-    fontWeight: "semibold",
-    color: "text.headline"
-  }, title), /*#__PURE__*/React.createElement(DrawerCloseButton, null)));
+    React.createElement(Box, _extends({
+      display: "flex",
+      flex: "0 0 auto",
+      justifyContent: "space-between",
+      alignItems: "center",
+      pt: 400,
+      px: 450
+    }, rest), children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+      as: "h2",
+      fontSize: 400,
+      fontWeight: "semibold",
+      color: "text.headline"
+    }, title), /*#__PURE__*/React.createElement(DrawerCloseButton, null)))
+  );
 };
 var DrawerContent = function DrawerContent(_ref2) {
   var children = _ref2.children,
@@ -143,7 +145,6 @@ var Drawer = function Drawer(_ref3) {
     offset: offset,
     direction: direction,
     "data-qa-drawer": id
-    // $FlowIssue - upgrade v0.112.0
   }, rest), children));
 };
 var DrawerContainer = function DrawerContainer(_ref4) {
@@ -178,7 +179,10 @@ var DrawerContainer = function DrawerContainer(_ref4) {
     var isVisible = _ref5.isVisible,
       style = _ref5.style,
       key = _ref5.key;
-    return isVisible && /*#__PURE__*/React.createElement(Drawer, _extends({
+    return isVisible &&
+    /*#__PURE__*/
+    // $FlowIssue - upgrade v0.112.0
+    React.createElement(Drawer, _extends({
       key: key,
       id: id,
       style: _objectSpread(_objectSpread({}, style), {}, {
@@ -192,7 +196,6 @@ var DrawerContainer = function DrawerContainer(_ref4) {
       closeTargets: closeTargets,
       "data-qa-drawer": id || '',
       "data-qa-drawer-isopen": isOpen === true
-      // $FlowIssue - upgrade v0.112.0
     }, rest), children);
   })));
 };

package/lib/EmptyState/index.flow.js

@@ -0,0 +1,2 @@
+
+import * as React from 'react';

package/lib/EmptyState/index.js

@@ -46,7 +46,7 @@ var EmptyState = function EmptyState(_ref) {
     }), secondaryAction && /*#__PURE__*/React.createElement(Box, {
       mt: 400
     }, /*#__PURE__*/React.cloneElement(secondaryAction, {
-      appearance: 'default'
+      appearance: 'unstyled'
     })))))
   );
 };

package/lib/Fieldset/index.flow.js

@@ -0,0 +1,2 @@
+
+import * as React from 'react';

package/lib/FormField/index.flow.js

@@ -0,0 +1,4 @@
+'no babel-plugin-flow-react-proptypes';
+
+import * as React from 'react';
+import Box from "../Box";

package/lib/FormField/index.js

@@ -12,13 +12,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { useState } from 'react';
-
-// Components
+import { useTextContent } from "../utils/hooks";
 import Box from "../Box";
 import Label from "../Label";
 import Text from "../Text";
 import { VisuallyHidden } from "../VisuallyHidden";
-import { useTextContent } from "../utils/hooks";
 var idCounter = 0;
 var FormField = function FormField(_ref) {
   var children = _ref.children,

package/lib/Icon/deprecatedIcons.js

@@ -1,5 +1,6 @@
+
 // In February of 2020, the Design Systems team renamed and consolidated some icons in an effort to introduce consistency in the naming of our icons. This object maps old, deprecated icon names to the "correct" name of the icon {"deprecated key": "correct icon name value"}
-export default {
+export default Object.freeze({
   backtotop: 'back-to-top',
   'circle-check-filled': 'circle-check',
   'circle-check-no-fill': 'circle-check',
@@ -36,4 +37,4 @@ export default {
   'twitter-business-mention': 'search',
   'verified-nofill': 'verified',
   'window-maximize-solid': 'window-maximize'
-};
+});

package/lib/Icon/index.flow.js

@@ -0,0 +1,3 @@
+
+
+import deprecatedIcons from "./deprecatedIcons";

package/lib/Icon/index.js

@@ -5,9 +5,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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, { css } from 'styled-components';
+import Box from "../Box";
 import iconViewBoxes from "../IconViewBoxes";
 import Container from "./styles";
-import Box from "../Box";
 import deprecatedIcons from "./deprecatedIcons";
 var Icon = function Icon(_ref) {
   var name = _ref.name,
@@ -17,23 +17,27 @@ var Icon = function Icon(_ref) {
     fixedWidth = _ref$fixedWidth === void 0 ? false : _ref$fixedWidth,
     ariaLabel = _ref.ariaLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
+  // $FlowIssue
   var iconName = deprecatedIcons[name] || name;
   var iconViewBox = iconViewBoxes[iconName];
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    iconSize: size,
-    fixedWidth: !!fixedWidth,
-    key: name,
-    "aria-label": ariaLabel,
-    "data-qa-icon": name
+  return (
+    /*#__PURE__*/
     // $FlowIssue - upgrade v0.112.0
-  }, rest), /*#__PURE__*/React.createElement("svg", {
-    className: "Icon-svg",
-    viewBox: iconViewBox,
-    focusable: false
-  }, /*#__PURE__*/React.createElement("use", {
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    xlinkHref: "#ssiconsvg-".concat(iconName)
-  })));
+    React.createElement(Container, _extends({
+      iconSize: size,
+      fixedWidth: !!fixedWidth,
+      key: name,
+      "aria-label": ariaLabel,
+      "data-qa-icon": name
+    }, rest), /*#__PURE__*/React.createElement("svg", {
+      className: "Icon-svg",
+      viewBox: iconViewBox,
+      focusable: false
+    }, /*#__PURE__*/React.createElement("use", {
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      xlinkHref: "#ssiconsvg-".concat(iconName)
+    })))
+  );
 };
 var ToggleableIcon = styled(Icon).withConfig({
   displayName: "Icon__ToggleableIcon",

package/lib/Icon/styles.js

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { verticalAlign } from 'styled-system';
+import { COMMON } from "../utils/system-props";
 var sizes = {
   mini: '12px',
   /** TODO: deprecate default  in favor of small in future release */

package/lib/Image/index.js

@@ -85,20 +85,24 @@ var Image = /*#__PURE__*/function (_React$Component) {
         src = _this$props.src,
         qa = _this$props.qa,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(ImageContainer, _extends({
-        isLoading: !this.state.didLoad,
-        ref: function ref(img) {
-          return _this2.imageRef = img;
-        },
-        onClick: this.onClick,
-        src: this.state.imageUrl,
-        onError: this.onError,
-        onLoad: this.onLoad,
-        alt: alt,
-        title: title,
-        "data-qa-image": title ? title : alt ? alt : '',
-        "data-qa-image-src": src || ''
-      }, qa, rest));
+      return (
+        /*#__PURE__*/
+        // $FlowIssue - upgrade v0.112.0
+        React.createElement(ImageContainer, _extends({
+          isLoading: !this.state.didLoad,
+          ref: function ref(img) {
+            return _this2.imageRef = img;
+          },
+          onClick: this.onClick,
+          src: this.state.imageUrl,
+          onError: this.onError,
+          onLoad: this.onLoad,
+          alt: alt,
+          title: title,
+          "data-qa-image": title ? title : alt ? alt : '',
+          "data-qa-image-src": src || ''
+        }, qa, rest))
+      );
     }
   }]);
   return Image;

package/lib/Indicator/index.js

@@ -30,16 +30,19 @@ var Indicator = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         tooltip = _this$props.tooltip,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(Container, _extends({
-        "data-tip": tooltip,
-        "data-qa-indicator": "",
-        "aria-label": tooltip,
-        tabIndex: 0
+      return (
+        /*#__PURE__*/
         // $FlowIssue - upgrade v0.112.0
-      }, rest), tooltip && /*#__PURE__*/React.createElement("div", null, tooltip), /*#__PURE__*/React.createElement(Icon, {
-        name: "indicator",
-        size: "mini"
-      }));
+        React.createElement(Container, _extends({
+          "data-tip": tooltip,
+          "data-qa-indicator": "",
+          "aria-label": tooltip,
+          tabIndex: 0
+        }, rest), tooltip && /*#__PURE__*/React.createElement("div", null, tooltip), /*#__PURE__*/React.createElement(Icon, {
+          name: "indicator",
+          size: "mini"
+        }))
+      );
     }
   }]);
   return Indicator;

package/lib/Indicator/styles.js

@@ -1,7 +1,7 @@
 
 import styled from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { visuallyHidden } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
 var Container = styled.span.attrs({
   className: 'Indicator'
 }).withConfig({

package/lib/Input/index.flow.js

@@ -0,0 +1,2 @@
+
+import * as React from 'react';