@sproutsocial/racine 12.24.0 → 13.1.1

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

@@ -158,6 +158,7 @@ module.exports = {
   "full-access": "0 0 16 16",
   "gear": "0 0 16 16",
   "gears": "0 0 16 16",
+  "github": "0 0 18 18",
   "glassdoor": "0 0 16 16",
   "glasses": "0 0 18 14",
   "globe": "0 0 16 16",
@@ -295,6 +296,8 @@ module.exports = {
   "saved-reply-outline": "0 0 16 12",
   "saved-reply": "0 0 16 12",
   "search": "0 0 16 16",
+  "send-again-outline": "0 0 18 18",
+  "send-again": "0 0 18 18",
   "sent-message-outline": "0 0 16 14",
   "sent-message": "0 0 16 14",
   "share": "0 0 16 14",

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';

package/lib/Input/index.js

@@ -15,12 +15,12 @@ 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, { Accessory } from "./styles";
-import Button from "../Button";
-import Icon from "../Icon";
 import styled from 'styled-components';
-import { mergeRefs } from "../utils";
 import { useInteractiveColor } from "../utils/useInteractiveColor";
+import { mergeRefs } from "../utils";
+import Button from "../Button";
+import Icon from "../Icon";
+import Container, { Accessory } from "./styles";
 var InputContext = /*#__PURE__*/React.createContext({});
 var StyledButton = styled(Button).withConfig({
   displayName: "Input__StyledButton",
@@ -192,53 +192,56 @@ var Input = /*#__PURE__*/function (_React$Component) {
       }) : elemBefore;
       // Do not add a ClearButton if an elemAfter prop was passed.
       var elementAfter = type === 'search' && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
-      return /*#__PURE__*/React.createElement(Container, _extends({
-        hasBeforeElement: !!elementBefore,
-        hasAfterElement: !!elementAfter,
-        disabled: disabled,
-        invalid: !!isInvalid,
-        warning: hasWarning,
-        appearance: appearance,
-        size: size
+      return (
+        /*#__PURE__*/
         // $FlowIssue - upgrade v0.112.0
-      }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
-        value: {
-          handleClear: this.handleClear,
-          hasValue: this.state.hasValue,
-          clearButtonLabel: clearButtonLabel,
+        React.createElement(Container, _extends({
+          hasBeforeElement: !!elementBefore,
+          hasAfterElement: !!elementAfter,
+          disabled: disabled,
+          invalid: !!isInvalid,
+          warning: hasWarning,
+          appearance: appearance,
           size: size
-        }
-      }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
-        before: true
-      }, elementBefore), /*#__PURE__*/React.createElement("input", _extends({
-        "aria-invalid": !!isInvalid,
-        "aria-label": ariaLabel,
-        "aria-describedby": ariaDescribedby,
-        autoComplete: autoCompleteValue,
-        autoFocus: autoFocus,
-        disabled: disabled,
-        readOnly: readOnly,
-        id: id,
-        name: name,
-        placeholder: placeholder,
-        type: type,
-        required: required,
-        value: value,
-        maxLength: maxLength,
-        onBlur: this.handleBlur,
-        onChange: this.handleChange,
-        onFocus: this.handleFocus,
-        onKeyDown: this.handleKeyDown,
-        onKeyUp: this.handleKeyUp,
-        onPaste: this.handlePaste,
-        ref: mergeRefs([innerRef, this.inputRef]),
-        "data-qa-input": name || '',
-        "data-qa-input-isdisabled": disabled === true,
-        "data-qa-input-isrequired": required === true
-      }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(Accessory, {
-        after: true,
-        isClearButton: isClearButton(elementAfter)
-      }, elementAfter)));
+        }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
+          value: {
+            handleClear: this.handleClear,
+            hasValue: this.state.hasValue,
+            clearButtonLabel: clearButtonLabel,
+            size: size
+          }
+        }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
+          before: true
+        }, elementBefore), /*#__PURE__*/React.createElement("input", _extends({
+          "aria-invalid": !!isInvalid,
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedby,
+          autoComplete: autoCompleteValue,
+          autoFocus: autoFocus,
+          disabled: disabled,
+          readOnly: readOnly,
+          id: id,
+          name: name,
+          placeholder: placeholder,
+          type: type,
+          required: required,
+          value: value,
+          maxLength: maxLength,
+          onBlur: this.handleBlur,
+          onChange: this.handleChange,
+          onFocus: this.handleFocus,
+          onKeyDown: this.handleKeyDown,
+          onKeyUp: this.handleKeyUp,
+          onPaste: this.handlePaste,
+          ref: mergeRefs([innerRef, this.inputRef]),
+          "data-qa-input": name || '',
+          "data-qa-input-isdisabled": disabled === true,
+          "data-qa-input-isrequired": required === true
+        }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(Accessory, {
+          after: true,
+          isClearButton: isClearButton(elementAfter)
+        }, elementAfter)))
+      );
     }
   }]);
   return Input;

package/lib/Input/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-uozj0s-0"

package/lib/Label/index.flow.js

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

package/lib/Label/index.js

@@ -40,13 +40,16 @@ var Label = /*#__PURE__*/function (_React$Component) {
   _createClass(Label, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(StyledLabel, _extends({
-        fontSize: 200,
-        fontWeight: "semibold",
-        color: "text.headline",
-        "data-qa-label": this.props.htmlFor
+      return (
+        /*#__PURE__*/
         // $FlowIssue - upgrade v0.112.0
-      }, this.props));
+        React.createElement(StyledLabel, _extends({
+          fontSize: 200,
+          fontWeight: "semibold",
+          color: "text.headline",
+          "data-qa-label": this.props.htmlFor
+        }, this.props))
+      );
     }
   }]);
   return Label;

package/lib/Link/index.flow.js

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

package/lib/Link/styles.js

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

package/lib/Listbox/index.flow.js

@@ -0,0 +1,4 @@
+
+import * as React from 'react';
+import Button from "../Button";
+import Popout from "../Popout";

package/lib/Listbox/index.js

@@ -8,10 +8,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 styled, { css } from 'styled-components';
-import Menu, { MenuButton } from "../Menu";
+import { MENU_ROLES } from "../Menu/constants";
 import { Arrow } from "../Select/styles";
 import Icon from "../Icon";
-import { MENU_ROLES } from "../Menu/constants";
+import Menu, { MenuButton } from "../Menu";
 export var Listbox = function Listbox(_ref) {
   var _ref$role = _ref.role,
     role = _ref$role === void 0 ? MENU_ROLES.LISTBOX : _ref$role,

package/lib/Loader/index.js

@@ -33,15 +33,19 @@ var Loader = /*#__PURE__*/function (_React$Component) {
         color = _this$props.color,
         qa = _this$props.qa,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(Container, _extends({
-        small: size === 'small',
-        dark: color === 'dark',
-        delay: delay,
-        "data-qa-loader": ""
-      }, qa, rest), /*#__PURE__*/React.createElement(Text, {
-        as: "div",
-        fontSize: 200
-      }, text || 'Loading'));
+      return (
+        /*#__PURE__*/
+        // $FlowIssue - upgrade v0.112.0
+        React.createElement(Container, _extends({
+          small: size === 'small',
+          dark: color === 'dark',
+          delay: delay,
+          "data-qa-loader": ""
+        }, qa, rest), /*#__PURE__*/React.createElement(Text, {
+          as: "div",
+          fontSize: 200
+        }, text || 'Loading'))
+      );
     }
   }]);
   return Loader;

package/lib/Loader/styles.js

@@ -1,8 +1,8 @@
 
+import { rgba } from 'polished';
 import styled, { css, keyframes } from 'styled-components';
-import { COMMON } from "../utils/system-props";
 import { visuallyHidden } from "../utils/mixins";
-import { rgba } from 'polished';
+import { COMMON } from "../utils/system-props";
 var getSize = function getSize(size) {
   var spinnerSize = Math.ceil(size * 0.9);
   var borderWidth = Math.ceil(size * 0.1);

package/lib/LoaderButton/index.js

@@ -3,20 +3,16 @@ 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 styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+import styled, { css, useTheme } from 'styled-components';
+import { COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000 } from '@sproutsocial/seeds-color';
 import Box from "../Box";
 import Button from "../Button";
 import Loader from "../Loader";
-import { useTheme } from 'styled-components';
-import { rgba } from 'polished';
-import { COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000 } from '@sproutsocial/seeds-color';
 // TODO: This is a temporary solution to get the loader button to work with dark mode
 var getColor = function getColor(appearance, themeColorMode) {
   var selectColorBasedOnMode = themeColorMode === 'dark' ? 'light' : 'dark';
   switch (appearance) {
-    /** "default" is @deprecated in favour of unstyled */
-    case 'default':
-      return selectColorBasedOnMode;
     case 'unstyled':
       return selectColorBasedOnMode;
     case 'primary':
@@ -61,7 +57,6 @@ export var LoaderButton = function LoaderButton(_ref) {
     disabled: disabled || isLoading,
     appearance: appearance,
     "data-qa-button-isloading": isLoading === true
-    // $FlowIssue - upgrade v0.112.0
   }, rest), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(Box, {

package/lib/LogoViewBoxes.js

@@ -1,4 +1,6 @@
 module.exports = {
+  "apple-app-store-dark": "0 0 140 140",
+  "apple-app-store": "0 0 140 140",
   "bigcommerce-dark": "0 0 140 140",
   "bigcommerce-lockup-dark": "0 0 291 66",
   "bigcommerce-lockup": "0 0 291 66",
@@ -33,6 +35,8 @@ module.exports = {
   "google-drive": "0 0 140 126",
   "google-my-business-dark": "0 0 140 123",
   "google-my-business": "0 0 140 123",
+  "google-play-store-dark": "0 0 140 155",
+  "google-play-store": "0 0 140 155",
   "hubspot-dark": "0 0 140 156",
   "hubspot": "0 0 140 156",
   "instagram-dark": "0 0 140 140",

package/lib/Menu/index.js

@@ -17,11 +17,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
 import uniqueId from 'lodash.uniqueid';
-import { MenuItemContainer, MenuItemsContainer } from "./styles";
-import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
+import { useTextContent } from "../utils/hooks";
+import innerText from "../utils/innerText";
+import { disabled } from "../utils/mixins";
 import Box from "../Box";
 import Button from "../Button";
 import Checkbox from "../Checkbox";
@@ -30,11 +31,10 @@ import Input from "../Input";
 import Popout from "../Popout";
 import Radio from "../Radio";
 import Text from "../Text";
-import { disabled } from "../utils/mixins";
-import innerText from "../utils/innerText";
-import { useTextContent } from "../utils/hooks";
+import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
 import { DescendantProvider, useDescendant, useDescendants } from "./descendants";
 import { MenuButtonContext, MenuContext, MenuDescendantContext, useMenuKeyDown } from "./hooks";
+import { MenuItemContainer, MenuItemsContainer } from "./styles";
 var noop = function noop() {};
 var getMenuItemRole = function getMenuItemRole(menuRole) {
   switch (menuRole) {
@@ -333,31 +333,29 @@ export var Menu = function Menu(_ref4) {
   var setContextState = useCallback(function (newState) {
     setState(_objectSpread(_objectSpread({}, state), newState));
   }, [state]);
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/React.createElement(DescendantProvider, {
+    context: MenuDescendantContext,
+    items:
     // $FlowIssue
-    React.createElement(DescendantProvider, {
-      context: MenuDescendantContext,
-      items: descendants,
-      set: setDescendants
-    }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
-      value: {
-        // $FlowIssue
-        menuRef: innerRef || menuRef,
-        role: role,
-        onChange: onChange,
-        value: value,
-        multiselect: multiselect,
-        state: state,
-        setState: setContextState,
-        selectCallbacks: selectCallbacks
-      }
-    }, /*#__PURE__*/React.createElement(MenuItems, _extends({}, props, {
+    descendants,
+    set: setDescendants
+  }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: {
+      // $FlowIssue
+      menuRef: innerRef || menuRef,
       role: role,
+      onChange: onChange,
+      value: value,
       multiselect: multiselect,
-      innerRef: menuRef
-    }), children)))
-  );
+      state: state,
+      setState: setContextState,
+      selectCallbacks: selectCallbacks
+    }
+  }, /*#__PURE__*/React.createElement(MenuItems, _extends({}, props, {
+    role: role,
+    multiselect: multiselect,
+    innerRef: menuRef
+  }), children)));
 };
 Menu.Group = MenuGroup;
 Menu.Item = MenuItem;
@@ -407,8 +405,9 @@ export var MenuButton = function MenuButton(_ref5) {
     content: /*#__PURE__*/React.createElement(CustomPopoutContent, null, content),
     placement: placement
   }, popoutProps, {
-    // $FlowIssue
-    width: props.width
+    width:
+    // $FlowIssue - both types are inexact, so this should work
+    props.width
   }), /*#__PURE__*/React.createElement(Button, _extends({}, props, {
     id: id,
     "aria-labelledby": ariaLabelledBy === null || ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy.trim(),

package/lib/Menu/styles.js

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
-import Box from "../Box";
 import { disabled, focusRing } from "../utils/mixins";
+import Box from "../Box";
 export var MenuItemContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemContainer",
   componentId: "sc-fjvae4-0"

package/lib/Message/constants.js

@@ -0,0 +1,9 @@
+
+
+export var MESSAGE_DENSITIES = {
+  COMPACT: 'compact',
+  // Compact is deprecated. New applications should use condensed instead.
+  CONDENSED: 'condensed',
+  SMALL: 'small',
+  LARGE: 'large'
+};

package/lib/Message/index.flow.js

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