@sproutsocial/racine 20.16.0 → 20.17.0

package/lib/Menu/Menu.js

@@ -21,10 +21,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 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 { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import uniqueId from 'lodash.uniqueid';
+import * as React from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import uniqueId from "lodash.uniqueid";
 import { useTextContent } from "../utils/hooks";
 import innerText from "../utils/innerText";
 import { disabled } from "../utils/mixins";
@@ -55,7 +55,7 @@ var getMenuItemRole = function getMenuItemRole(menuRole) {
 };
 function isValueSelected(menuValue, value) {
   if (!menuValue) return false;
-  if (typeof menuValue === 'string') {
+  if (typeof menuValue === "string") {
     return Boolean(menuValue && value && menuValue === value);
   } else if (Array.isArray(menuValue)) {
     return menuValue.includes(value);
@@ -95,9 +95,9 @@ export var MenuItem = function MenuItem(_ref) {
   var shouldClosePopout = closeOnItemClick && !multiselect;
   var itemRole = roleProp || getMenuItemRole(menuRole);
   var id = useMemo(function () {
-    return idProp || uniqueId('MenuItem-');
+    return idProp || uniqueId("MenuItem-");
   }, [idProp]);
-  var textContent = useTextContent('');
+  var textContent = useTextContent("");
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   var label = labelProp || textContent.current;
@@ -131,7 +131,7 @@ export var MenuItem = function MenuItem(_ref) {
    */
   useEffect(function () {
     if (isCheckboxOrRadio && ref.current) {
-      var input = ref.current.querySelector('input');
+      var input = ref.current.querySelector("input");
       if (input) {
         input.tabIndex = -1;
       }
@@ -195,7 +195,7 @@ export var MenuItem = function MenuItem(_ref) {
     "aria-label": labelProp,
     value: valueProp,
     "data-value": valueProp,
-    forwardedAs: as || 'li',
+    forwardedAs: as || "li",
     "aria-checked": isCheckboxOrRadio ? isSelected : undefined,
     "aria-selected": itemRole === MENU_ITEM_ROLES.OPTION ? isSelected : undefined,
     disabled: disabled,
@@ -214,14 +214,14 @@ export var MenuItem = function MenuItem(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: {
-      display: 'flex',
-      alignItems: props.alignItems || 'center',
-      justifyContent: 'space-between'
+      display: "flex",
+      alignItems: props.alignItems || "center",
+      justifyContent: "space-between"
     }
   }, before, /*#__PURE__*/React.createElement("div", {
     style: {
       flexGrow: 1,
-      wordBreak: 'break-word',
+      wordBreak: "break-word",
       minWidth: 0
     }
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -253,7 +253,7 @@ export var MenuSwitch = function MenuSwitch(props) {
     label = props.label,
     rest = _objectWithoutProperties(props, _excluded2);
   var menuItemId = useMemo(function () {
-    return id || uniqueId('MenuItem-');
+    return id || uniqueId("MenuItem-");
   }, [id]);
   var labelId = "".concat(menuItemId, "-label");
   var switchElement = /*#__PURE__*/React.createElement(Switch, _extends({
@@ -262,7 +262,7 @@ export var MenuSwitch = function MenuSwitch(props) {
     "aria-hidden": "true",
     tabIndex: -1,
     "aria-labelledby": labelId
-  }, placement === 'before' ? {
+  }, placement === "before" ? {
     mr: 300
   } : {
     ml: 300
@@ -273,9 +273,9 @@ export var MenuSwitch = function MenuSwitch(props) {
   var menuItemProps = _objectSpread({
     id: menuItemId,
     label: label,
-    elemBefore: placement === 'before' ? switchElement : undefined,
+    elemBefore: placement === "before" ? switchElement : undefined,
     // Empty fragment prevents a check icon in elemAfter when the switch is checked. Can be overridden.
-    elemAfter: placement === 'before' ? /*#__PURE__*/React.createElement(React.Fragment, null) : switchElement
+    elemAfter: placement === "before" ? /*#__PURE__*/React.createElement(React.Fragment, null) : switchElement
   }, rest);
   return /*#__PURE__*/React.createElement(MenuItem, menuItemProps, /*#__PURE__*/React.createElement(Text, _extends({
     id: labelId
@@ -315,7 +315,7 @@ export var MenuGroup = function MenuGroup(_ref6) {
     isDisabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
     props = _objectWithoutProperties(_ref6, _excluded3);
   var menuTitleId = useMemo(function () {
-    return uniqueId('menu-title-');
+    return uniqueId("menu-title-");
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({
     p: 300,
@@ -327,7 +327,7 @@ export var MenuGroup = function MenuGroup(_ref6) {
     id: menuTitleId,
     role: "presentation",
     fontSize: 200,
-    forwardedAs: titleAs || 'li',
+    forwardedAs: titleAs || "li",
     $_css: isDisabled ? disabled : undefined
   }, title), children));
 };
@@ -341,7 +341,7 @@ export var MenuDivider = function MenuDivider(props) {
 };
 var MenuFilterInput = function MenuFilterInput(_ref7) {
   var _ref7$type = _ref7.type,
-    type = _ref7$type === void 0 ? 'search' : _ref7$type,
+    type = _ref7$type === void 0 ? "search" : _ref7$type,
     props = _objectWithoutProperties(_ref7, _excluded4);
   var onChange = props.onChange,
     onFocus = props.onFocus,
@@ -435,7 +435,7 @@ export var Menu = function Menu(_ref10) {
     setDescendants = _useDescendants2[1];
   var _useState3 = useState({
       selectionIndex: 0,
-      filterQuery: '',
+      filterQuery: "",
       filteredItems: null,
       isFilterInputFocused: false,
       isFooterFocused: false
@@ -471,14 +471,14 @@ export var Menu = function Menu(_ref10) {
     innerRef: menuRef
   }), children), footerContent ? /*#__PURE__*/React.createElement(MenuFooter, null, footerContent) : null));
 };
-MenuGroup.displayName = 'Menu.Group';
-MenuItem.displayName = 'Menu.Item';
-MenuCheckbox.displayName = 'Menu.Checkbox';
-MenuRadio.displayName = 'Menu.Radio';
-MenuSwitch.displayName = 'Menu.Switch';
-MenuDivider.displayName = 'Menu.Divider';
-MenuFilterInput.displayName = 'Menu.FilterInput';
-Menu.displayName = 'Menu';
+MenuGroup.displayName = "Menu.Group";
+MenuItem.displayName = "Menu.Item";
+MenuCheckbox.displayName = "Menu.Checkbox";
+MenuRadio.displayName = "Menu.Radio";
+MenuSwitch.displayName = "Menu.Switch";
+MenuDivider.displayName = "Menu.Divider";
+MenuFilterInput.displayName = "Menu.FilterInput";
+Menu.displayName = "Menu";
 Menu.Group = MenuGroup;
 Menu.Item = MenuItem;
 Menu.Checkbox = MenuCheckbox;
@@ -498,9 +498,9 @@ export var MenuButton = function MenuButton(_ref11) {
     _ref11$closeOnItemCli = _ref11.closeOnItemClick,
     closeOnItemClick = _ref11$closeOnItemCli === void 0 ? true : _ref11$closeOnItemCli,
     _ref11$id = _ref11.id,
-    id = _ref11$id === void 0 ? uniqueId('MenuButton-') : _ref11$id,
+    id = _ref11$id === void 0 ? uniqueId("MenuButton-") : _ref11$id,
     _ref11$placement = _ref11.placement,
-    placement = _ref11$placement === void 0 ? 'bottom' : _ref11$placement,
+    placement = _ref11$placement === void 0 ? "bottom" : _ref11$placement,
     isOpen = _ref11.isOpen,
     setIsOpen = _ref11.setIsOpen,
     props = _objectWithoutProperties(_ref11, _excluded7);
@@ -508,7 +508,7 @@ export var MenuButton = function MenuButton(_ref11) {
     _useState6 = _slicedToArray(_useState5, 2),
     isInternalShown = _useState6[0],
     setIsInternalShown = _useState6[1];
-  var isControlled = typeof isOpen === 'boolean';
+  var isControlled = typeof isOpen === "boolean";
   var isShown = isControlled ? isOpen : isInternalShown;
   var setIsShown = useMemo(function () {
     return isControlled && setIsOpen ? setIsOpen : function (nextIsShown) {
@@ -518,8 +518,8 @@ export var MenuButton = function MenuButton(_ref11) {
   var closePopout = useCallback(function () {
     return setIsShown(false);
   }, [setIsShown]);
-  var ariaLabelledBy = props['aria-labelledby'] ? "".concat(props['aria-labelledby'], " ").concat(id) : undefined;
-  var ariaLabel = props['aria-label'] ? "".concat(props['aria-label'], " ").concat(innerText(children)) : undefined;
+  var ariaLabelledBy = props["aria-labelledby"] ? "".concat(props["aria-labelledby"], " ").concat(id) : undefined;
+  var ariaLabel = props["aria-label"] ? "".concat(props["aria-label"], " ").concat(innerText(children)) : undefined;
   return /*#__PURE__*/React.createElement(MenuButtonContext.Provider, {
     value: {
       closePopout: closePopout,
@@ -538,7 +538,7 @@ export var MenuButton = function MenuButton(_ref11) {
     "aria-label": ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim(),
     active: isShown,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _onClick && _onClick(e); // @ts-notes unfortunately we're passing in a keyboard event here and not the mouse event it expects, so no way to coerce it
         setIsShown(true);

package/lib/Menu/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { disabled, focusRing } from "../utils/mixins";
 import Box from "../Box";
 import { StyledSwitchButton as Switch } from "../Switch/styles";
@@ -49,4 +49,4 @@ export var MenuItemContainer = styled(Box).withConfig({
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "sc-168zlb1-1"
-})(["list-style-type:none;&:focus{", "}& > div[role='group']:first-of-type{border-top:none;}"], focusRing);
+})(["list-style-type:none;&:focus{", "}& > div[role=\"group\"]:first-of-type{border-top:none;}"], focusRing);

package/lib/Menu/utils/constants.flow.js

@@ -1,12 +1,12 @@
 export var MENU_ROLES = Object.freeze({
-  MENU: 'menu',
-  LIST: 'list',
-  LISTBOX: 'listbox'
+  MENU: "menu",
+  LIST: "list",
+  LISTBOX: "listbox"
 });
 export var MENU_ITEM_ROLES = Object.freeze({
-  MENUITEM: 'menuitem',
-  LISTITEM: 'listitem',
-  OPTION: 'option',
-  RADIO: 'menuitemradio',
-  CHECKBOX: 'menuitemcheckbox'
+  MENUITEM: "menuitem",
+  LISTITEM: "listitem",
+  OPTION: "option",
+  RADIO: "menuitemradio",
+  CHECKBOX: "menuitemcheckbox"
 });

package/lib/Menu/utils/constants.js

@@ -1,12 +1,12 @@
 export var MENU_ROLES = Object.freeze({
-  MENU: 'menu',
-  LIST: 'list',
-  LISTBOX: 'listbox'
+  MENU: "menu",
+  LIST: "list",
+  LISTBOX: "listbox"
 });
 export var MENU_ITEM_ROLES = Object.freeze({
-  MENUITEM: 'menuitem',
-  LISTITEM: 'listitem',
-  OPTION: 'option',
-  RADIO: 'menuitemradio',
-  CHECKBOX: 'menuitemcheckbox'
+  MENUITEM: "menuitem",
+  LISTITEM: "listitem",
+  OPTION: "option",
+  RADIO: "menuitemradio",
+  CHECKBOX: "menuitemcheckbox"
 });

package/lib/Menu/utils/descendants.js

@@ -19,8 +19,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /* eslint-disable */
-import * as React from 'react';
-import { createContext, useState, useLayoutEffect, useEffect, useContext, useCallback, useMemo, useRef } from 'react';
+import * as React from "react";
+import { createContext, useState, useLayoutEffect, useEffect, useContext, useCallback, useMemo, useRef } from "react";
 
 /**
  * These hooks and utilities are largely copied from the @reach-ui/descendents package. They consider the package
@@ -60,7 +60,7 @@ export function wrapEvent(theirHandler, ourHandler) {
   };
 }
 export function canUseDOM() {
-  return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+  return typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 }
 var useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
 export function createNamedContext(name, defaultValue) {
@@ -240,16 +240,16 @@ export function useDescendantKeyDown(context, options) {
     currentIndex = options.currentIndex,
     filter = options.filter,
     _options$key = options.key,
-    key = _options$key === void 0 ? 'index' : _options$key,
+    key = _options$key === void 0 ? "index" : _options$key,
     _options$orientation = options.orientation,
-    orientation = _options$orientation === void 0 ? 'vertical' : _options$orientation,
+    orientation = _options$orientation === void 0 ? "vertical" : _options$orientation,
     _options$rotate = options.rotate,
     rotate = _options$rotate === void 0 ? true : _options$rotate,
     _options$rtl = options.rtl,
     rtl = _options$rtl === void 0 ? false : _options$rtl;
   var index = currentIndex ? currentIndex : -1;
   return function handleKeyDown(event) {
-    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
+    if (!["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) {
       return;
     }
 
@@ -284,53 +284,53 @@ export function useDescendantKeyDown(context, options) {
       return selectableDescendants[selectableDescendants.length - 1];
     }
     switch (event.key) {
-      case 'ArrowDown':
-        if (orientation === 'vertical' || orientation === 'both') {
+      case "ArrowDown":
+        if (orientation === "vertical" || orientation === "both") {
           event.preventDefault();
           var next = getNextOption(); // @ts-notes: sincerely dont understand the intent of the original library here, since the supposed reference has been completely refactored
-          callback(key === 'option' ? next : next[key]);
+          callback(key === "option" ? next : next[key]);
         }
         break;
-      case 'ArrowUp':
-        if (orientation === 'vertical' || orientation === 'both') {
+      case "ArrowUp":
+        if (orientation === "vertical" || orientation === "both") {
           event.preventDefault();
           var prev = getPreviousOption();
-          callback(key === 'option' ? prev : prev[key]);
+          callback(key === "option" ? prev : prev[key]);
         }
         break;
-      case 'ArrowLeft':
-        if (orientation === 'horizontal' || orientation === 'both') {
+      case "ArrowLeft":
+        if (orientation === "horizontal" || orientation === "both") {
           event.preventDefault();
           var nextOrPrev = (rtl ? getNextOption : getPreviousOption)();
-          callback(key === 'option' ? nextOrPrev : nextOrPrev[key]);
+          callback(key === "option" ? nextOrPrev : nextOrPrev[key]);
         }
         break;
-      case 'ArrowRight':
-        if (orientation === 'horizontal' || orientation === 'both') {
+      case "ArrowRight":
+        if (orientation === "horizontal" || orientation === "both") {
           event.preventDefault();
           var prevOrNext = (rtl ? getPreviousOption : getNextOption)();
-          callback(key === 'option' ? prevOrNext : prevOrNext[key]);
+          callback(key === "option" ? prevOrNext : prevOrNext[key]);
         }
         break;
-      case 'PageUp':
+      case "PageUp":
         event.preventDefault();
         var prevOrFirst = (event.ctrlKey ? getPreviousOption : getFirstOption)();
-        callback(key === 'option' ? prevOrFirst : prevOrFirst[key]);
+        callback(key === "option" ? prevOrFirst : prevOrFirst[key]);
         break;
-      case 'Home':
+      case "Home":
         event.preventDefault();
         var first = getFirstOption();
-        callback(key === 'option' ? first : first[key]);
+        callback(key === "option" ? first : first[key]);
         break;
-      case 'PageDown':
+      case "PageDown":
         event.preventDefault();
         var nextOrLast = (event.ctrlKey ? getNextOption : getLastOption)();
-        callback(key === 'option' ? nextOrLast : nextOrLast[key]);
+        callback(key === "option" ? nextOrLast : nextOrLast[key]);
         break;
-      case 'End':
+      case "End":
         event.preventDefault();
         var last = getLastOption();
-        callback(key === 'option' ? last : last[key]);
+        callback(key === "option" ? last : last[key]);
         break;
     }
   };

package/lib/Menu/utils/hooks.js

@@ -1,6 +1,6 @@
 // eslint-disable @typescript-eslint/no-explicit-any
-import { createContext, useContext, useEffect } from 'react';
-import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
+import { createContext, useContext, useEffect } from "react";
+import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
 import { MENU_ROLES } from "./constants";
 import { createDescendantContext, useDescendantKeyDown, usePrevious, wrapEvent } from "./descendants";
 export var MenuContext = /*#__PURE__*/createContext({
@@ -13,7 +13,7 @@ export var MenuContext = /*#__PURE__*/createContext({
   onChange: undefined,
   state: {
     selectionIndex: 0,
-    filterQuery: '',
+    filterQuery: "",
     filteredItems: null,
     isFilterInputFocused: false,
     isFooterFocused: false
@@ -28,7 +28,7 @@ export var MenuButtonContext = /*#__PURE__*/createContext({
   closeOnItemClick: undefined,
   closePopout: undefined
 });
-export var MenuDescendantContext = createDescendantContext('MenuDescendantContext');
+export var MenuDescendantContext = createDescendantContext("MenuDescendantContext");
 
 /**
  * When a user's typed input matches the string displayed in a menu item, it is
@@ -36,7 +36,7 @@ export var MenuDescendantContext = createDescendantContext('MenuDescendantContex
  * function.
  */
 function filterItemsFromTypeahead(items) {
-  var string = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var string = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
   if (!string) {
     return null;
   }
@@ -121,14 +121,14 @@ export function useMenuKeyDown() {
         return;
       }
       switch (key) {
-        case ' ':
+        case " ":
           if (isFilterInputFocused) {
             return;
           }
 
         // falls through
         // eslint-disable-next-line no-fallthrough
-        case 'Enter':
+        case "Enter":
           var selected = items[selectionIndex];
           if (selected && !selected.disabled) {
             event.preventDefault();
@@ -145,8 +145,8 @@ export function useMenuKeyDown() {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     useDescendantKeyDown(MenuDescendantContext, {
       currentIndex: index,
-      orientation: 'vertical',
-      key: 'option',
+      orientation: "vertical",
+      key: "option",
       rotate: true,
       filter: function filter(option) {
         return !option.disabled && (!filteredItems || filteredItems.includes(option.index));
@@ -154,8 +154,8 @@ export function useMenuKeyDown() {
       callback: function callback(item) {
         if (item.element) {
           scrollIntoViewIfNeeded(item.element, {
-            block: 'nearest',
-            scrollMode: 'if-needed'
+            block: "nearest",
+            scrollMode: "if-needed"
           });
         }
         setState({

package/lib/Message/Message.flow.js

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
 export var MESSAGE_DENSITIES = {
-  COMPACT: 'compact',
+  COMPACT: "compact",
   // Compact is deprecated. New applications should use condensed instead.
-  CONDENSED: 'condensed',
-  SMALL: 'small',
-  LARGE: 'large'
+  CONDENSED: "condensed",
+  SMALL: "small",
+  LARGE: "large"
 };
 // Using `Object.freeze` on MESSAGE_DENSITIES causes breaking type changes, but this is needed for typing Message.DENSITIES
 // This should be improved in the future during a major version bump and Message refactor

package/lib/Message/Message.js

@@ -2,7 +2,7 @@ var _excluded = ["children", "density", "borderColor", "bg", "indentContent", "i
 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 * as React from "react";
 import Avatar from "../Avatar";
 import Button from "../Button";
 import Checkbox from "../Checkbox";
@@ -11,20 +11,20 @@ import { MESSAGE_DENSITIES } from "./constants";
 var avatarSizeMap = function avatarSizeMap(density) {
   switch (density) {
     case MESSAGE_DENSITIES.LARGE:
-      return '40px';
+      return "40px";
     case MESSAGE_DENSITIES.COMPACT:
-      return '20px';
+      return "20px";
     case MESSAGE_DENSITIES.CONDENSED:
-      return '24px';
+      return "24px";
     case MESSAGE_DENSITIES.SMALL:
     default:
-      return '32px';
+      return "32px";
   }
 };
 var MessageContext = /*#__PURE__*/React.createContext({
   density: MESSAGE_DENSITIES.SMALL,
-  borderColor: 'container.border.base',
-  bg: 'container.background.base',
+  borderColor: "container.border.base",
+  bg: "container.background.base",
   indentContent: true
 });
 var Message = function Message(_ref) {
@@ -32,9 +32,9 @@ var Message = function Message(_ref) {
     _ref$density = _ref.density,
     density = _ref$density === void 0 ? MESSAGE_DENSITIES.SMALL : _ref$density,
     _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? 'container.border.base' : _ref$borderColor,
+    borderColor = _ref$borderColor === void 0 ? "container.border.base" : _ref$borderColor,
     _ref$bg = _ref.bg,
-    bg = _ref$bg === void 0 ? 'container.background.base' : _ref$bg,
+    bg = _ref$bg === void 0 ? "container.background.base" : _ref$bg,
     _ref$indentContent = _ref.indentContent,
     indentContent = _ref$indentContent === void 0 ? true : _ref$indentContent,
     innerRef = _ref.innerRef,
@@ -66,7 +66,7 @@ var MessageBody = function MessageBody(props) {
     }, props));
   });
 };
-MessageBody.displayName = 'Message.Body';
+MessageBody.displayName = "Message.Body";
 Message.Body = MessageBody;
 var MessageHeader = function MessageHeader(props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref3) {
@@ -78,7 +78,7 @@ var MessageHeader = function MessageHeader(props) {
     }, props));
   });
 };
-MessageHeader.displayName = 'Message.Header';
+MessageHeader.displayName = "Message.Header";
 Message.Header = MessageHeader;
 var MessageFooter = function MessageFooter(props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref4) {
@@ -92,7 +92,7 @@ var MessageFooter = function MessageFooter(props) {
     }, props));
   });
 };
-MessageFooter.displayName = 'Message.Footer';
+MessageFooter.displayName = "Message.Footer";
 Message.Footer = MessageFooter;
 var MessageMeta = function MessageMeta(props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref5) {
@@ -106,14 +106,14 @@ var MessageMeta = function MessageMeta(props) {
     }, props));
   });
 };
-MessageMeta.displayName = 'Message.Meta';
+MessageMeta.displayName = "Message.Meta";
 Message.Meta = MessageMeta;
 var MessageButton = function MessageButton(props) {
   return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-    appearance: props.appearance || 'pill'
+    appearance: props.appearance || "pill"
   }));
 };
-MessageButton.displayName = 'Message.Button';
+MessageButton.displayName = "Message.Button";
 Message.Button = MessageButton;
 var MessageAvatar = function MessageAvatar(props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref6) {
@@ -123,7 +123,7 @@ var MessageAvatar = function MessageAvatar(props) {
     }, props));
   });
 };
-MessageAvatar.displayName = 'Message.Avatar';
+MessageAvatar.displayName = "Message.Avatar";
 Message.Avatar = MessageAvatar;
 var MessageCheckbox = function MessageCheckbox(props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref7) {
@@ -137,7 +137,7 @@ var MessageCheckbox = function MessageCheckbox(props) {
     }, props));
   });
 };
-MessageCheckbox.displayName = 'Message.Checkbox';
+MessageCheckbox.displayName = "Message.Checkbox";
 Message.Checkbox = MessageCheckbox;
 Message.Context = MessageContext;
 Message.DENSITIES = MESSAGE_DENSITIES;

package/lib/Message/constants.js

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

package/lib/Message/styles.js

@@ -1,5 +1,5 @@
-import { memo } from 'react';
-import styled from 'styled-components';
+import { memo } from "react";
+import styled from "styled-components";
 import { focusRing } from "../utils/mixins";
 import Box from "../Box";
 import { MESSAGE_DENSITIES } from "./constants";
@@ -13,7 +13,7 @@ var Container = styled(Box).withConfig({
 }, function (props) {
   return props.theme.colors[props.bg];
 }, focusRing);
-Container.displayName = 'Message.Container';
+Container.displayName = "Message.Container";
 export var MessageHeader = /*#__PURE__*/memo(styled(Box).withConfig({
   displayName: "styles__MessageHeader",
   componentId: "sc-161ezbx-1"
@@ -36,23 +36,23 @@ var getContentPadding = function getContentPadding(props) {
     case MESSAGE_DENSITIES.LARGE:
       {
         // 40 px avatar + 8px(message.header) + 16px(mr)
-        return '64px';
+        return "64px";
       }
     case MESSAGE_DENSITIES.COMPACT:
       {
         // 20px avatar plus space.300 margin plus space.400 margin
-        return '40px';
+        return "40px";
       }
     case MESSAGE_DENSITIES.CONDENSED:
       {
         // 24px avatar plus space.200 margin plus space.350 margin
-        return '40px';
+        return "40px";
       }
     case MESSAGE_DENSITIES.SMALL:
     default:
       {
         // 32px avatar plus space.300 margin plus space.400 margin
-        return '56px';
+        return "56px";
       }
   }
 };
@@ -91,7 +91,7 @@ export var MessageFooter = styled(Box).withConfig({
 }, function (props) {
   return props.theme.radii.outer;
 }, function (props) {
-  return props.density === MESSAGE_DENSITIES.CONDENSED ? 'nowrap' : 'wrap';
+  return props.density === MESSAGE_DENSITIES.CONDENSED ? "nowrap" : "wrap";
 }, function (props) {
   return props.theme.space[350];
 });
@@ -115,7 +115,7 @@ export var MessageMeta = styled(Box).withConfig({
 }, function (props) {
   return getContentPadding(props);
 }, function (props) {
-  return props.onClick ? 'pointer' : 'default';
+  return props.onClick ? "pointer" : "default";
 }, function (props) {
   return props.theme.colors.text.subtext;
 }, focusRing);