@sproutsocial/racine 12.24.0 → 13.1.1

package/lib/Message/index.js

@@ -3,17 +3,11 @@ 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, { MessageBody, MessageFooter, MessageHeader, MessageMeta } from "./styles";
-import Checkbox from "../Checkbox";
-import Button from "../Button";
 import Avatar from "../Avatar";
-var MESSAGE_DENSITIES = {
-  COMPACT: 'compact',
-  // Compact is deprecated. New applications should use condensed instead.
-  CONDENSED: 'condensed',
-  SMALL: 'small',
-  LARGE: 'large'
-};
+import Button from "../Button";
+import Checkbox from "../Checkbox";
+import Container, { MessageBody, MessageFooter, MessageHeader, MessageMeta } from "./styles";
+import { MESSAGE_DENSITIES } from "./constants";
 var avatarSizeMap = function avatarSizeMap(density) {
   switch (density) {
     case MESSAGE_DENSITIES.LARGE:
@@ -27,6 +21,7 @@ var avatarSizeMap = function avatarSizeMap(density) {
       return '32px';
   }
 };
+
 // $FlowIssue Upgrade 0.111.1
 var MessageContext = /*#__PURE__*/React.createContext({
   density: MESSAGE_DENSITIES.SMALL,

package/lib/Message/styles.js

@@ -1,9 +1,9 @@
 
 import { memo } from 'react';
 import styled from 'styled-components';
-import Box from "../Box";
 import { focusRing } from "../utils/mixins";
-import Message from "../Message";
+import Box from "../Box";
+import Message from "./";
 var Container = styled(Box).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1ju6d1v-0"

package/lib/Modal/index.flow.js

@@ -0,0 +1,3 @@
+
+import * as React from 'react';
+import Box from "../Box";

package/lib/Modal/index.js

@@ -7,8 +7,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import * as React from 'react';
 import { useContext } from 'react';
 import Box from "../Box";
-import Icon from "../Icon";
 import Button from "../Button";
+import Icon from "../Icon";
 import Text from "../Text";
 import { Container, Content, Header, Footer, Body } from "./styles";
 var ModalContext = /*#__PURE__*/React.createContext({});
@@ -64,9 +64,7 @@ var ModalFooter = function ModalFooter(props) {
 ModalFooter.defaultProps = {
   bg: 'container.background.base'
 };
-var ModalContent = /*#__PURE__*/React.forwardRef(
-// $FlowIssue - upgrade v0.112.0
-function (_ref, ref) {
+var ModalContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded2);
   var _useContext2 = useContext(ModalContext),
@@ -77,6 +75,7 @@ function (_ref, ref) {
     ref: ref
   }, rest), children);
 });
+
 /**
  * The modal you want
  */
@@ -92,32 +91,35 @@ var Modal = function Modal(props) {
     rest = _objectWithoutProperties(props, _excluded3);
   var isCloseable = Boolean(onClose);
   var appElement = appElementSelector && document ? document.querySelector(appElementSelector) : null;
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    appElement: appElement,
-    ariaHideApp: !!appElement,
-    isOpen: isOpen,
-    contentLabel: label,
-    onRequestClose: onClose || function () {},
-    shouldFocusAfterRender: true,
-    shouldCloseOnOverlayClick: isCloseable,
-    shouldCloseOnEsc: isCloseable,
-    shouldReturnFocusAfterClose: true,
-    closeTimeoutMS: 200,
-    role: "dialog",
-    width: width,
-    zIndex: zIndex,
-    data: {
-      'qa-modal': '',
-      'qa-modal-isopen': isOpen
-    }
+  return (
+    /*#__PURE__*/
     // $FlowIssue - upgrade v0.112.0
-  }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Body, null), /*#__PURE__*/React.createElement(ModalContext.Provider, {
-    value: {
-      onClose: onClose,
-      closeButtonLabel: closeButtonLabel,
-      label: label
-    }
-  }, children)));
+    React.createElement(Container, _extends({
+      appElement: appElement,
+      ariaHideApp: !!appElement,
+      isOpen: isOpen,
+      contentLabel: label,
+      onRequestClose: onClose || function () {},
+      shouldFocusAfterRender: true,
+      shouldCloseOnOverlayClick: isCloseable,
+      shouldCloseOnEsc: isCloseable,
+      shouldReturnFocusAfterClose: true,
+      closeTimeoutMS: 200,
+      role: "dialog",
+      width: width,
+      zIndex: zIndex,
+      data: {
+        'qa-modal': '',
+        'qa-modal-isopen': isOpen
+      }
+    }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Body, null), /*#__PURE__*/React.createElement(ModalContext.Provider, {
+      value: {
+        onClose: onClose,
+        closeButtonLabel: closeButtonLabel,
+        label: label
+      }
+    }, children)))
+  );
 };
 Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;

package/lib/Modal/styles.js

@@ -6,8 +6,8 @@ import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { width, zIndex } from 'styled-system';
 import ReactModal from 'react-modal';
-import Box from "../Box";
 import { COMMON } from "../utils/system-props";
+import Box from "../Box";
 // This is the max space allowed between the modal and the edge of the browser
 var BODY_PADDING = '64px';
 function ReactModalAdapter(_ref) {
@@ -22,12 +22,15 @@ function ReactModalAdapter(_ref) {
   var overlayClassName = (className || '').split(' ').map(function (className) {
     return "".concat(className, " ").concat(className, "__Overlay");
   }).join(' ');
-  return /*#__PURE__*/React.createElement(ReactModal, _extends({
-    portalClassName: className,
-    className: contentClassName,
-    overlayClassName: overlayClassName
+  return (
+    /*#__PURE__*/
     // $FlowIssue
-  }, props));
+    React.createElement(ReactModal, _extends({
+      portalClassName: className,
+      className: contentClassName,
+      overlayClassName: overlayClassName
+    }, props))
+  );
 }
 export var Body = createGlobalStyle([".ReactModal__Body--open{overflow:hidden;}"]);
 export var Container = styled(ReactModalAdapter).withConfig({

package/lib/Numeral/constants.js

@@ -1,3 +1,4 @@
+
 export var DEFAULT_THRESHOLD = 10000;
 export var MEMO_CACHE_SIZE = 10;
 export var COMPARE_OBJECTS = true;

package/lib/Numeral/index.js

@@ -10,10 +10,10 @@ 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 memoize from 'lru-memoize';
-import { AbbrContainer, Container } from "./styles";
+import { EM_DASH } from "../utils/constants";
 import Tooltip from "../Tooltip";
 import { DEFAULT_THRESHOLD, MEMO_CACHE_SIZE, COMPARE_OBJECTS, MAX_PRECISION, ABBREV_PRECISION, DefaultPrecisions } from "./constants";
-import { EM_DASH } from "../utils/constants";
+import { AbbrContainer, Container } from "./styles";
 var _getNumberFormatters = function _getNumberFormatters(options) {
   var locale = options.locale,
     format = options.format,
@@ -51,7 +51,6 @@ var _getNumberFormatters = function _getNumberFormatters(options) {
   };
 };
 // Memoize to reduce the energy of creating new instances of Intl.NumberFormat
-// $FlowIssue (https://github.com/erikras/lru-memoize/issues/92)
 var memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
 var getNumberFormatters = memoizer(_getNumberFormatters);
 var getThreshold = function getThreshold(abbreviate) {

package/lib/Numeral/tests/testNumeral.js

@@ -8,9 +8,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 /* eslint-env jest, node */
 import React from 'react';
-import { render, fireEvent } from "../../utils/react-testing-library";
-import 'jest-styled-components';
-import Numeral from '..';
+import { render, fireEvent, screen } from "../../utils/react-testing-library";
+import { Numeral } from "../..";
 jest.mock("../constants", function () {
   return _objectSpread(_objectSpread({}, jest.requireActual("../constants")), {}, {
     MEMO_CACHE_SIZE: 0,
@@ -24,24 +23,24 @@ var testNumeral = function testNumeral(value) {
     tooltipText = texts.tip;
   if (tooltipText) {
     test("Should display  ".concat(value, "  abbreviated as -> ").concat(mainText, "  with tooltip -> ").concat(tooltipText, "  "), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var _render, container, findByText, getByText, numeral, tooltip, content;
+      var _render, container, numeral, tooltip, content;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _render = render( /*#__PURE__*/React.createElement(Numeral, _extends({
                 number: value
-              }, options))), container = _render.container, findByText = _render.findByText, getByText = _render.getByText;
-              numeral = getByText(mainText);
+              }, options))), container = _render.container;
+              numeral = screen.getByText(mainText);
               tooltip = container.querySelector('[data-qa-tooltip]');
               fireEvent.mouseOver(numeral);
               _context.next = 6;
-              return findByText(tooltipText);
+              return screen.findByText(tooltipText);
             case 6:
               content = _context.sent;
-              expect(numeral).toBeTruthy();
+              expect(numeral).toBeInTheDocument();
               expect(tooltip).toBeTruthy();
-              expect(content).toBeTruthy();
+              expect(content).toBeInTheDocument();
             case 10:
             case "end":
               return _context.stop();
@@ -54,11 +53,10 @@ var testNumeral = function testNumeral(value) {
       var _render2 = render( /*#__PURE__*/React.createElement(Numeral, _extends({
           number: value
         }, options))),
-        container = _render2.container,
-        getByText = _render2.getByText;
-      var numeral = getByText(mainText);
+        container = _render2.container;
+      var numeral = screen.getByText(mainText);
       var tooltip = container.querySelector('[data-qa-tooltip]');
-      expect(numeral).toBeTruthy();
+      expect(numeral).toBeInTheDocument();
       expect(tooltip).toBeFalsy();
     });
   }

package/lib/OverflowList/index.js

@@ -1,8 +1,8 @@
 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); }
-import List from "./styles";
 import React, { useCallback, useMemo } from 'react';
 import { AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
 import Box from "../Box";
+import List from "./styles";
 var VirtualizedList = function VirtualizedList(_ref) {
   var items = _ref.items,
     ItemComponent = _ref.ItemComponent,

package/lib/OverflowList/styles.js

@@ -1,8 +1,8 @@
 
 import * as React from 'react';
+import { List } from 'react-virtualized';
 import styled from 'styled-components';
 import { COMMON, BORDER, LAYOUT, POSITION, FLEXBOX, GRID } from "../utils/system-props";
-import { List } from 'react-virtualized';
 var Container = styled(function (props) {
   return /*#__PURE__*/React.createElement(List, props);
 }).withConfig({

package/lib/PartnerLogo/index.js

@@ -3,8 +3,8 @@ 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 React from 'react';
-import logoViewBoxes from "../LogoViewBoxes";
 import { useTheme } from 'styled-components';
+import logoViewBoxes from "../LogoViewBoxes";
 import Container from "./styles";
 var PartnerLogo = function PartnerLogo(_ref) {
   var partnerName = _ref.partnerName,
@@ -32,20 +32,23 @@ var PartnerLogo = function PartnerLogo(_ref) {
   var viewBoxCoordinates = (logoViewBox === null || logoViewBox === void 0 ? void 0 : logoViewBox.split(' ')) || [];
   var defaultWidth = viewBoxCoordinates[2];
   var defaultHeight = viewBoxCoordinates[3];
-  return /*#__PURE__*/React.createElement(Container
-  //we add pixels here because view box coordinates are numbers
-  , _extends({
-    height: height ? height : defaultHeight + 'px',
-    width: width ? width : defaultWidth + 'px',
-    logoSize: size
+  return (
+    /*#__PURE__*/
     // $FlowIssue - upgrade v0.112.0
-  }, rest), /*#__PURE__*/React.createElement("svg", {
-    className: "logo-svg",
-    viewBox: logoViewBox,
-    focusable: false
-  }, /*#__PURE__*/React.createElement("use", {
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    xlinkHref: "#sslogosvg-".concat(whichLogo(backgroundType))
-  })));
+    React.createElement(Container
+    //we add pixels here because view box coordinates are numbers
+    , _extends({
+      height: height ? height : defaultHeight + 'px',
+      width: width ? width : defaultWidth + 'px',
+      logoSize: size
+    }, rest), /*#__PURE__*/React.createElement("svg", {
+      className: "logo-svg",
+      viewBox: logoViewBox,
+      focusable: false
+    }, /*#__PURE__*/React.createElement("use", {
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      xlinkHref: "#sslogosvg-".concat(whichLogo(backgroundType))
+    })))
+  );
 };
 export default PartnerLogo;

package/lib/PartnerLogo/styles.js

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
-import { COMMON, FLEXBOX } from "../utils/system-props";
 import { verticalAlign } from 'styled-system';
+import { COMMON, FLEXBOX } from "../utils/system-props";
 var sizes = {
   mini: '12px',
   small: '16px',

package/lib/Popout/index.flow.js

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

package/lib/Popout/index.js

@@ -16,13 +16,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import * as React from 'react';
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTransition, animated } from 'react-spring';
+import FocusLock from 'react-focus-lock';
+import { Popper } from 'react-popper';
 import { MOTION_DURATION_FAST } from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
-import { TargetWrapper } from "./styles";
+import { useMutationObserver } from "../utils/hooks";
 import Portal from "../Portal";
 import Box from "../Box";
-import { Popper } from 'react-popper';
-import { useMutationObserver } from "../utils/hooks";
-import FocusLock from 'react-focus-lock';
+import { TargetWrapper } from "./styles";
 export var placements = {
   auto: 'auto',
   top: 'top',
@@ -38,8 +38,6 @@ export var placements = {
   'bottom-end': 'bottom-end',
   'left-end': 'left-end'
 };
-// Seeds docs can't parse $Keys<typeof placements> yet
-
 var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
   return ref.current && event.target instanceof Node && ref.current.contains(event.target);
 };
@@ -237,25 +235,28 @@ export default function Popout(_ref) {
       };
       scheduleUpdateCallback.current = scheduleUpdate;
       scheduleUpdateRef(scheduleUpdate);
-      return /*#__PURE__*/React.createElement("div", _extends({
-        ref: interceptRef,
-        style: _objectSpread(_objectSpread({}, style), {}, {
-          zIndex: zIndex,
-          width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
-        }),
-        "data-placement": placement,
-        "data-qa-popout": "",
-        "data-qa-popout-isopen": isOpen === true
+      return (
+        /*#__PURE__*/
         // $FlowIssue - upgrade v0.112.0
-      }, rest), item && !outOfBoundaries && /*#__PURE__*/React.createElement(animated.div, {
-        style: props
-      }, /*#__PURE__*/React.createElement(FocusLock, _extends({
-        autoFocus: autoFocus,
-        returnFocus: returnFocus,
-        disabled: !focusOnContent
-      }, restFocusLockProps), typeof content === 'function' && content({
-        hide: hide
-      }), typeof content !== 'function' && content)));
+        React.createElement("div", _extends({
+          ref: interceptRef,
+          style: _objectSpread(_objectSpread({}, style), {}, {
+            zIndex: zIndex,
+            width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
+          }),
+          "data-placement": placement,
+          "data-qa-popout": "",
+          "data-qa-popout-isopen": isOpen === true
+        }, rest), item && !outOfBoundaries && /*#__PURE__*/React.createElement(animated.div, {
+          style: props
+        }, /*#__PURE__*/React.createElement(FocusLock, _extends({
+          autoFocus: autoFocus,
+          returnFocus: returnFocus,
+          disabled: !focusOnContent
+        }, restFocusLockProps), typeof content === 'function' && content({
+          hide: hide
+        }), typeof content !== 'function' && content)))
+      );
     }));
   }));
 }

package/lib/Portal/index.flow.js

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

package/lib/Radio/styles.js

@@ -1,8 +1,8 @@
 
 import styled, { css } from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { focusRing, disabled } from "../utils/mixins";
-import Text from "../Text/";
+import { COMMON } from "../utils/system-props";
+import Text from "../Text";
 var Container = styled.span.withConfig({
   displayName: "styles__Container",
   componentId: "sc-uyr445-0"

package/lib/SegmentedControl/index.flow.js

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

package/lib/SegmentedControl/index.js

@@ -11,8 +11,8 @@ 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, useContext } from 'react';
-import { SegmentedControlContainer, SegmentedControlItemContainer, SegmentedControlLabel } from "./styles";
 import Box from "../Box";
+import { SegmentedControlContainer, SegmentedControlItemContainer, SegmentedControlLabel } from "./styles";
 var nameCounter = 0;
 var idCounter = 0;
 var SegmentedControlContext = /*#__PURE__*/React.createContext(null);
@@ -32,24 +32,27 @@ var SegmentedControlItem = function SegmentedControlItem(_ref) {
     _useState2 = _slicedToArray(_useState, 1),
     id = _useState2[0];
   var isChecked = value === selectedValue;
-  return /*#__PURE__*/React.createElement(SegmentedControlItemContainer, _extends({
-    "data-segmentedcontrol-isactive": isChecked,
-    "data-qa-segmentedcontrol-item": value,
-    "data-qa-segmentedcontrol-ischecked": isChecked === true
+  return (
+    /*#__PURE__*/
     // $FlowIssue - upgrade v0.112.0
-  }, rest), /*#__PURE__*/React.createElement("input", {
-    type: "radio",
-    id: id,
-    name: name,
-    value: value,
-    checked: isChecked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(SegmentedControlLabel, {
-    as: "label",
-    htmlFor: id,
-    name: name,
-    isActive: isChecked
-  }, children));
+    React.createElement(SegmentedControlItemContainer, _extends({
+      "data-segmentedcontrol-isactive": isChecked,
+      "data-qa-segmentedcontrol-item": value,
+      "data-qa-segmentedcontrol-ischecked": isChecked === true
+    }, rest), /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      id: id,
+      name: name,
+      value: value,
+      checked: isChecked,
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(SegmentedControlLabel, {
+      as: "label",
+      htmlFor: id,
+      name: name,
+      isActive: isChecked
+    }, children))
+  );
 };
 var SegmentedControl = function SegmentedControl(_ref2) {
   var selectedValue = _ref2.selectedValue,
@@ -70,7 +73,6 @@ var SegmentedControl = function SegmentedControl(_ref2) {
     forwardedAs: "fieldset",
     "data-qa-segmentedcontrol": label,
     "data-qa-segmentedcontrol-value": selectedValue
-    // $FlowIssue - upgrade v0.112.0
   }, rest), /*#__PURE__*/React.createElement("legend", null, label), /*#__PURE__*/React.createElement(Box, {
     display: "flex"
   }, children)));

package/lib/SegmentedControl/styles.js

@@ -1,8 +1,8 @@
 
 import styled, { css } from 'styled-components';
+import { visuallyHidden, focusRing, disabled } from "../utils/mixins";
 import Box from "../Box";
 import Text from "../Text";
-import { visuallyHidden, focusRing, disabled } from "../utils/mixins";
 export var SegmentedControlContainer = styled(Box).withConfig({
   displayName: "styles__SegmentedControlContainer",
   componentId: "sc-1o18lau-0"

package/lib/Select/index.flow.js

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

package/lib/Select/index.js

@@ -15,8 +15,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import * as React from 'react';
-import Container, { Arrow } from "./styles";
 import Icon from "../Icon";
+import Container, { Arrow } from "./styles";
 var Select = /*#__PURE__*/function (_React$Component) {
   _inherits(Select, _React$Component);
   var _super = _createSuper(Select);

package/lib/Select/styles.js

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1j75x48-0"

package/lib/Skeleton/index.js

@@ -1,7 +1,7 @@
 
 import styled from 'styled-components';
-import Box from "../Box";
 import { transparentize } from 'polished';
+import Box from "../Box";
 var Skeleton = styled(Box).withConfig({
   displayName: "Skeleton",
   componentId: "sc-1fovt5u-0"

package/lib/SpotIllustration/illustrationNames.js

@@ -1,2 +1,2 @@
 
-export var illustrationNames = ['abacus', 'analytics-offering', 'asset-cards', 'astronaut', 'binoculars', 'brand-keyword', 'browser-doc', 'business', 'calendar-event', 'calendar-reporting', 'cat-error', 'cat-no-access', 'cat', 'checkbox-alert', 'coffee-cup', 'competitors', 'compose-window', 'compose', 'computer-error', 'connect', 'contact', 'conversation', 'custom-branding', 'customer-service', 'dashboard', 'exclamation-mark', 'face-happy', 'find-bookmark', 'flask', 'general-topic', 'global-features', 'global-trend', 'grow-large', 'grow', 'hands-raised', 'headset', 'heartbeat-connection', 'instagram-links', 'invoice', 'jewel', 'keyword-tracking', 'lightbulb-alt', 'lightbulb', 'like-conversation', 'link-broken', 'link-messages', 'link-sections', 'link-upload', 'listening-pendo', 'listening-sentiment', 'listening-topic-templates', 'listening-tour', 'listening', 'loading', 'mailbox-empty', 'mailbox-full', 'megaphone', 'message', 'molecule', 'network-data', 'no-messages-found', 'no-notifications', 'note', 'notification', 'notifications-onboarding', 'organize-message', 'outbox-queue', 'outbox-reviews', 'pdf', 'planning', 'podium', 'pointer', 'publish-assets', 'publish-links', 'publishing', 'puzzle-piece', 'question-mark', 'reporting-folder', 'reporting', 'review-location', 'review', 'robot-assembly', 'robot-error', 'robot-happy', 'rocket', 'schedule-date', 'schedule-messages', 'search-keywords', 'search-success', 'search-trends', 'search', 'security', 'sentiment', 'shopping-bag', 'spark-line', 'stamp', 'storefront', 'success', 'tag-message', 'tag', 'team-roles', 'team', 'telescope', 'tha-mel', 'thumbs-up', 'toggle-switch', 'toolset-strength', 'tracking-time', 'twitter-messages', 'twitter-profiles', 'under-construction', 'unsubscribe', 'upward-trend', 'user-task', 'view-connections', 'vip-list', 'warning', 'wifi', 'workflow-steps'];
+export var illustrationNames = Object.freeze(['abacus', 'analytics-offering', 'asset-cards', 'astronaut', 'binoculars', 'brand-keyword', 'browser-doc', 'business', 'calendar-event', 'calendar-reporting', 'cat-error', 'cat-no-access', 'cat', 'checkbox-alert', 'coffee-cup', 'competitors', 'compose-window', 'compose', 'computer-error', 'connect', 'contact', 'conversation', 'custom-branding', 'customer-service', 'dashboard', 'exclamation-mark', 'face-happy', 'find-bookmark', 'flask', 'general-topic', 'global-features', 'global-trend', 'grow-large', 'grow', 'hands-raised', 'headset', 'heartbeat-connection', 'instagram-links', 'invoice', 'jewel', 'keyword-tracking', 'lightbulb-alt', 'lightbulb', 'like-conversation', 'link-broken', 'link-messages', 'link-sections', 'link-upload', 'listening-pendo', 'listening-sentiment', 'listening-topic-templates', 'listening-tour', 'listening', 'loading', 'mailbox-empty', 'mailbox-full', 'megaphone', 'message', 'molecule', 'network-data', 'no-messages-found', 'no-notifications', 'note', 'notification', 'notifications-onboarding', 'organize-message', 'outbox-queue', 'outbox-reviews', 'pdf', 'planning', 'podium', 'pointer', 'publish-assets', 'publish-links', 'publishing', 'puzzle-piece', 'question-mark', 'reporting-folder', 'reporting', 'review-location', 'review', 'robot-assembly', 'robot-error', 'robot-happy', 'rocket', 'schedule-date', 'schedule-messages', 'search-keywords', 'search-success', 'search-trends', 'search', 'security', 'sentiment', 'shopping-bag', 'spark-line', 'stamp', 'storefront', 'success', 'tag-message', 'tag', 'team-roles', 'team', 'telescope', 'tha-mel', 'thumbs-up', 'toggle-switch', 'toolset-strength', 'tracking-time', 'twitter-messages', 'twitter-profiles', 'under-construction', 'unsubscribe', 'upward-trend', 'user-task', 'view-connections', 'vip-list', 'warning', 'wifi', 'workflow-steps']);

package/lib/SpotIllustration/index.js

@@ -1,6 +1,6 @@
 
-import styled from 'styled-components';
 import React from 'react';
+import styled from 'styled-components';
 import illustrationViewBoxes from "../IllustrationViewBoxes";
 // eslint-disable-next-line flowtype/generic-spacing
 var StyledSVG = styled.svg.withConfig({

package/lib/Stack/index.flow.js

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

package/lib/Stack/index.js

@@ -4,8 +4,8 @@ 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 { Children } from 'react';
-import Box from "../Box";
 import { normalizeResponsiveProp } from "../utils/responsiveProps";
+import Box from "../Box";
 var stackStyles = {
   horizontal: {
     left: {