@sproutsocial/racine 13.8.0 → 14.0.0

package/lib/Menu/utils/descendants.js

@@ -0,0 +1,337 @@
+var _excluded = ["context", "element"],
+  _excluded2 = ["element"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* eslint-disable */
+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
+ * pre-release and unstable, so instead of importing it, we copied it here and changed the types from TypeScript to
+ * Flow. If the package ever stabilizes, we can import these functions from there and remove this file.
+ */
+
+var noop = function noop() {};
+
+/**
+ * Returns the previous value of a reference after a component update.
+ *
+ * @param value
+ */
+export function usePrevious(value) {
+  var ref = useRef(null);
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+/**
+ * Wraps a lib-defined event handler and a user-defined event handler, returning
+ * a single handler that allows a user to prevent lib-defined handlers from
+ * firing.
+ *
+ * @param theirHandler User-supplied event handler
+ * @param ourHandler Library-supplied event handler
+ */
+export function wrapEvent(theirHandler, ourHandler) {
+  return function (event) {
+    theirHandler && theirHandler(event);
+    if (!event.defaultPrevented) {
+      return ourHandler(event);
+    }
+  };
+}
+export function canUseDOM() {
+  return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+}
+var useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
+export function createNamedContext(name, defaultValue) {
+  var Ctx = /*#__PURE__*/createContext(defaultValue);
+  Ctx.displayName = name;
+  return Ctx;
+}
+export function createDescendantContext(name) {
+  var initialValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    descendants: [],
+    registerDescendant: noop,
+    unregisterDescendant: noop
+  };
+  return createNamedContext(name, _objectSpread({}, initialValue));
+}
+
+/**
+ * This hook registers our descendant by passing it into an array. We can then
+ * search that array by to find its index when registering it in the component.
+ * We use this for focus management, keyboard navigation, and typeahead
+ * functionality for some components.
+ *
+ * The hook accepts the element node and (optionally) a key. The key is useful
+ * if multiple descendants have identical text values and we need to
+ * differentiate siblings for some reason.
+ *
+ * Our main goals with this are:
+ *   1) maximum composability,
+ *   2) minimal API friction
+ *   3) SSR compatibility*
+ *   4) concurrent safe
+ *   5) index always up-to-date with the tree despite changes
+ *   6) works with memoization of any component in the tree (hopefully)
+ *
+ * * As for SSR, the good news is that we don't actually need the index on the
+ * server for most use-cases, as we are only using it to determine the order of
+ * composed descendants for keyboard navigation. However, in the few cases where
+ * this is not the case, we can require an explicit index from the app.
+ */
+export function useDescendant(_ref, indexProp) {
+  var context = _ref.context,
+    element = _ref.element,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    forceUpdate = _useState2[1];
+  var _useContext = useContext(context),
+    registerDescendant = _useContext.registerDescendant,
+    unregisterDescendant = _useContext.unregisterDescendant,
+    descendants = _useContext.descendants;
+  // Prevent any flashing
+  useIsomorphicLayoutEffect(function () {
+    if (!element) forceUpdate({});
+    registerDescendant(_objectSpread({
+      element: element
+    }, rest));
+    return function () {
+      return unregisterDescendant(element);
+    };
+  }, [element].concat(_toConsumableArray(Object.values(rest))));
+  return indexProp ? indexProp : descendants.findIndex(function (item) {
+    return item.element === element;
+  });
+}
+export function useDescendants() {
+  return useState([]);
+}
+export function DescendantProvider(_ref2) {
+  var Ctx = _ref2.context,
+    children = _ref2.children,
+    items = _ref2.items,
+    set = _ref2.set;
+  var registerDescendant = useCallback(function (_ref3) {
+    var element = _ref3.element,
+      rest = _objectWithoutProperties(_ref3, _excluded2);
+    if (!element) {
+      return;
+    }
+    set(function (items) {
+      var newItem;
+      var newItems;
+
+      // If there are no items, register at index 0 and bail.
+      if (items.length === 0) {
+        newItem = _objectSpread({
+          element: element,
+          index: 0
+        }, rest);
+        newItems = [].concat(_toConsumableArray(items), [newItem]);
+      } else if (items.find(function (item) {
+        return item.element === element;
+      })) {
+        // If the element is already registered, just use the same array
+        newItems = items;
+      } else {
+        // When registering a descendant, we need to make sure we insert in
+        // into the array in the same order that it appears in the DOM. So as
+        // new descendants are added or maybe some are removed, we always know
+        // that the array is up-to-date and correct.
+        //
+        // So here we look at our registered descendants and see if the new
+        // element we are adding appears earlier than an existing descendant's
+        // DOM node via `node.compareDocumentPosition`. If it does, we insert
+        // the new element at this index. Because `registerDescendant` will be
+        // called in an effect every time the descendants state value changes,
+        // we should be sure that this index is accurate when descendent
+        // elements come or go from our component.
+        var index = items.findIndex(function (item) {
+          if (!item.element || !element) {
+            return false;
+          }
+
+          // Does this element's DOM node appear before another item in the
+          // array in our DOM tree? If so, return true to grab the index at
+          // this point in the array so we know where to insert the new
+          // element.
+          return Boolean(item.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
+        });
+        newItem = _objectSpread({
+          element: element,
+          index: index
+        }, rest);
+
+        // If an index is not found we will push the element to the end.
+        if (index === -1) {
+          newItems = [].concat(_toConsumableArray(items), [newItem]);
+        } else {
+          newItems = [].concat(_toConsumableArray(items.slice(0, index)), [newItem], _toConsumableArray(items.slice(index)));
+        }
+      }
+      return newItems.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          index: index
+        });
+      });
+    });
+  },
+  // set is a state setter initialized by the useDescendants hook.
+  // We can safely ignore the lint warning here because it will not change
+  // between renders.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var unregisterDescendant = useCallback(function (element) {
+    if (!element) {
+      return;
+    }
+    set(function (items) {
+      return items.filter(function (item) {
+        return element !== item.element;
+      }).map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          index: index
+        });
+      });
+    });
+  },
+  // set is a state setter initialized by the useDescendants hook.
+  // We can safely ignore the lint warning here because it will not change
+  // between renders.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var value = useMemo(function () {
+    return {
+      descendants: items,
+      registerDescendant: registerDescendant,
+      unregisterDescendant: unregisterDescendant
+    };
+  }, [items, registerDescendant, unregisterDescendant]);
+  return /*#__PURE__*/React.createElement(Ctx.Provider, {
+    value: value
+  }, children);
+}
+export function useDescendantKeyDown(context, options) {
+  var _useContext2 = useContext(context),
+    descendants = _useContext2.descendants;
+  var callback = options.callback,
+    currentIndex = options.currentIndex,
+    filter = options.filter,
+    _options$key = options.key,
+    key = _options$key === void 0 ? 'index' : _options$key,
+    _options$orientation = 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)) {
+      return;
+    }
+
+    // If we use a filter function, we need to re-index our descendants array
+    // so that filtered descendent elements aren't selected.
+    var selectableDescendants = filter ? descendants.filter(filter) : descendants;
+
+    // Current index should map to the updated array vs. the original
+    // descendants array.
+    if (filter) {
+      index = selectableDescendants.findIndex(function (descendant) {
+        return descendant.index === currentIndex;
+      });
+    }
+
+    // We need some options for any of this to work!
+    if (!selectableDescendants.length) {
+      return;
+    }
+    function getNextOption() {
+      var atBottom = index === selectableDescendants.length - 1;
+      return atBottom ? rotate ? getFirstOption() : selectableDescendants[index] : selectableDescendants[(index + 1) % selectableDescendants.length];
+    }
+    function getPreviousOption() {
+      var atTop = index === 0;
+      return atTop ? rotate ? getLastOption() : selectableDescendants[index] : selectableDescendants[(index - 1 + selectableDescendants.length) % selectableDescendants.length];
+    }
+    function getFirstOption() {
+      return selectableDescendants[0];
+    }
+    function getLastOption() {
+      return selectableDescendants[selectableDescendants.length - 1];
+    }
+    switch (event.key) {
+      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]);
+        }
+        break;
+      case 'ArrowUp':
+        if (orientation === 'vertical' || orientation === 'both') {
+          event.preventDefault();
+          var prev = getPreviousOption();
+          callback(key === 'option' ? prev : prev[key]);
+        }
+        break;
+      case 'ArrowLeft':
+        if (orientation === 'horizontal' || orientation === 'both') {
+          event.preventDefault();
+          var nextOrPrev = (rtl ? getNextOption : getPreviousOption)();
+          callback(key === 'option' ? nextOrPrev : nextOrPrev[key]);
+        }
+        break;
+      case 'ArrowRight':
+        if (orientation === 'horizontal' || orientation === 'both') {
+          event.preventDefault();
+          var prevOrNext = (rtl ? getPreviousOption : getNextOption)();
+          callback(key === 'option' ? prevOrNext : prevOrNext[key]);
+        }
+        break;
+      case 'PageUp':
+        event.preventDefault();
+        var prevOrFirst = (event.ctrlKey ? getPreviousOption : getFirstOption)();
+        callback(key === 'option' ? prevOrFirst : prevOrFirst[key]);
+        break;
+      case 'Home':
+        event.preventDefault();
+        var first = getFirstOption();
+        callback(key === 'option' ? first : first[key]);
+        break;
+      case 'PageDown':
+        event.preventDefault();
+        var nextOrLast = (event.ctrlKey ? getNextOption : getLastOption)();
+        callback(key === 'option' ? nextOrLast : nextOrLast[key]);
+        break;
+      case 'End':
+        event.preventDefault();
+        var last = getLastOption();
+        callback(key === 'option' ? last : last[key]);
+        break;
+    }
+  };
+}

package/lib/Menu/utils/hooks.js

@@ -0,0 +1,156 @@
+// eslint-disable @typescript-eslint/no-explicit-any
+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({
+  role: MENU_ROLES.MENU,
+  menuRef: {
+    current: null
+  },
+  value: undefined,
+  multiselect: false,
+  onChange: undefined,
+  state: {
+    selectionIndex: 0,
+    filterQuery: '',
+    filteredItems: null,
+    isFilterInputFocused: false
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setState: function setState() {},
+  selectCallbacks: {
+    current: []
+  }
+});
+export var MenuButtonContext = /*#__PURE__*/createContext({
+  closeOnItemClick: undefined,
+  closePopout: undefined
+});
+export var MenuDescendantContext = createDescendantContext('MenuDescendantContext');
+
+/**
+ * When a user's typed input matches the string displayed in a menu item, it is
+ * expected that the matching menu item is selected. This is our matching
+ * function.
+ */
+function filterItemsFromTypeahead(items) {
+  var string = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  if (!string) {
+    return null;
+  }
+  return items.filter(function (_ref) {
+    var value = _ref.value,
+      label = _ref.label;
+    return (value === null || value === void 0 ? void 0 : value.toLowerCase().includes(string.toLocaleLowerCase())) || (label === null || label === void 0 ? void 0 : label.toLowerCase().includes(string.toLocaleLowerCase()));
+  }).map(function (_ref2) {
+    var index = _ref2.index;
+    return index;
+  });
+}
+export function useMenuKeyDown() {
+  var _useContext = useContext(MenuContext),
+    onChange = _useContext.onChange,
+    selectCallbacks = _useContext.selectCallbacks,
+    setState = _useContext.setState,
+    multiselect = _useContext.multiselect,
+    _useContext$state = _useContext.state,
+    filterQuery = _useContext$state.filterQuery,
+    selectionIndex = _useContext$state.selectionIndex,
+    filteredItems = _useContext$state.filteredItems,
+    isFilterInputFocused = _useContext$state.isFilterInputFocused;
+  var _useContext2 = useContext(MenuButtonContext),
+    closePopout = _useContext2.closePopout,
+    closeOnItemClick = _useContext2.closeOnItemClick;
+  var _useContext3 = useContext(MenuDescendantContext),
+    items = _useContext3.descendants;
+  var shouldClosePopout = closeOnItemClick && !multiselect;
+  var prevMenuItemsLength = usePrevious(items.length);
+  var prevSelected = usePrevious(items[selectionIndex]);
+  var prevSelectionIndex = usePrevious(selectionIndex);
+  useEffect(function () {
+    if (items.length && selectionIndex > items.length - 1) {
+      // If for some reason our selection index is larger than our possible
+      // index range (let's say the last item is selected and the list
+      // dynamically updates), we need to select the last item in the list.
+      setState({
+        selectionIndex: items.length - 1
+      });
+    } else if (
+    // Checks if
+    //  - menu length has changed
+    //  - selection index has not changed BUT selected item has changed
+    //
+    // This prevents any dynamic adding/removing of menu items from actually
+    // changing a user's expected selection.
+    prevMenuItemsLength !== items.length && selectionIndex > -1 && prevSelected && prevSelectionIndex === selectionIndex && items[selectionIndex] !== prevSelected) {
+      setState({
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore I'm just going to ignore this one because its really hard to estimate where this stuff is coming from at any given time
+        selectionIndex: items.findIndex(function (i) {
+          return i.index === prevSelected.index;
+        })
+      });
+    }
+  }, [setState, items, prevMenuItemsLength, prevSelected, prevSelectionIndex, selectionIndex]);
+  useEffect(function () {
+    var newFilteredItems = filterItemsFromTypeahead(items, filterQuery);
+    if (filterQuery && newFilteredItems && (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.length) !== (newFilteredItems === null || newFilteredItems === void 0 ? void 0 : newFilteredItems.length)) {
+      setState({
+        filteredItems: newFilteredItems,
+        selectionIndex: newFilteredItems[0]
+      });
+    } else if (!filterQuery && filteredItems !== null) {
+      setState({
+        filteredItems: null
+      });
+    }
+  }, [filterQuery, items, setState, filteredItems]);
+  var index = items.findIndex(function (_ref3) {
+    var index = _ref3.index;
+    return index === selectionIndex;
+  });
+  return {
+    activeDescendent: items[selectionIndex],
+    handleKeyDown: wrapEvent(function (event) {
+      var key = event.key;
+      switch (key) {
+        case ' ':
+          if (isFilterInputFocused) {
+            return;
+          }
+
+        // falls through
+        // eslint-disable-next-line no-fallthrough
+        case 'Enter':
+          var selected = items[selectionIndex];
+          if (selected) {
+            event.preventDefault();
+            var func = selectCallbacks.current[selected.index];
+            (func === null || func === void 0 ? void 0 : func.call) && func();
+            onChange && selected.value && onChange(selected.value);
+            shouldClosePopout && closePopout && closePopout();
+          }
+          return;
+        default:
+          return;
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    useDescendantKeyDown(MenuDescendantContext, {
+      currentIndex: index,
+      orientation: 'vertical',
+      key: 'option',
+      rotate: true,
+      filter: function filter(option) {
+        return !option.disabled && (!filteredItems || filteredItems.includes(option.index));
+      },
+      callback: function callback(item) {
+        item.element && scrollIntoViewIfNeeded(item.element, false);
+        setState({
+          selectionIndex: item.index
+        });
+      }
+    }))
+  };
+}

package/lib/Menu/utils/index.js

@@ -0,0 +1,4 @@
+export * from "./constants";
+export * from "./descendants";
+export * from "./hooks";
+export * from "./names";

package/lib/Message/Message.flow.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export var MESSAGE_DENSITIES = {
+  COMPACT: 'compact',
+  // Compact is deprecated. New applications should use condensed instead.
+  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
+var MESSAGE_DENSITIES_FROZEN = Object.freeze(MESSAGE_DENSITIES);

package/lib/Message/Message.js

@@ -0,0 +1,144 @@
+var _excluded = ["children", "density", "borderColor", "bg", "indentContent", "innerRef", "qa"];
+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 Avatar from "../Avatar";
+import Button from "../Button";
+import Checkbox from "../Checkbox";
+import Container, { MessageBody as StyledMessageBody, MessageFooter as StyledMessageFooter, MessageHeader as StyledMessageHeader, MessageMeta as StyledMessageMeta } from "./styles";
+import { MESSAGE_DENSITIES } from "./constants";
+var avatarSizeMap = function avatarSizeMap(density) {
+  switch (density) {
+    case MESSAGE_DENSITIES.LARGE:
+      return '40px';
+    case MESSAGE_DENSITIES.COMPACT:
+      return '20px';
+    case MESSAGE_DENSITIES.CONDENSED:
+      return '24px';
+    case MESSAGE_DENSITIES.SMALL:
+    default:
+      return '32px';
+  }
+};
+var MessageContext = /*#__PURE__*/React.createContext({
+  density: MESSAGE_DENSITIES.SMALL,
+  borderColor: 'container.border.base',
+  bg: 'container.background.base',
+  indentContent: true
+});
+var Message = function Message(_ref) {
+  var children = _ref.children,
+    _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,
+    _ref$bg = _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,
+    qa = _ref.qa,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(MessageContext.Provider, {
+    value: {
+      density: density,
+      borderColor: borderColor,
+      indentContent: indentContent
+    }
+  }, /*#__PURE__*/React.createElement(Container, _extends({
+    borderColor: borderColor,
+    bg: bg,
+    ref: innerRef,
+    tabIndex: 0
+  }, qa, rest), children));
+};
+var MessageBody = function MessageBody(props) {
+  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref2) {
+    var density = _ref2.density,
+      borderColor = _ref2.borderColor,
+      indentContent = _ref2.indentContent;
+    return /*#__PURE__*/React.createElement(StyledMessageBody, _extends({
+      "data-qa-message-body": true,
+      density: density,
+      borderColor: borderColor,
+      indentContent: indentContent
+    }, props));
+  });
+};
+MessageBody.displayName = 'Message.Body';
+Message.Body = MessageBody;
+var MessageHeader = function MessageHeader(props) {
+  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref3) {
+    var density = _ref3.density,
+      borderColor = _ref3.borderColor;
+    return /*#__PURE__*/React.createElement(StyledMessageHeader, _extends({
+      density: density,
+      borderColor: borderColor
+    }, props));
+  });
+};
+MessageHeader.displayName = 'Message.Header';
+Message.Header = MessageHeader;
+var MessageFooter = function MessageFooter(props) {
+  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref4) {
+    var density = _ref4.density,
+      borderColor = _ref4.borderColor,
+      indentContent = _ref4.indentContent;
+    return /*#__PURE__*/React.createElement(StyledMessageFooter, _extends({
+      density: density,
+      borderColor: borderColor,
+      indentContent: indentContent
+    }, props));
+  });
+};
+MessageFooter.displayName = 'Message.Footer';
+Message.Footer = MessageFooter;
+var MessageMeta = function MessageMeta(props) {
+  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref5) {
+    var density = _ref5.density,
+      borderColor = _ref5.borderColor,
+      indentContent = _ref5.indentContent;
+    return /*#__PURE__*/React.createElement(StyledMessageMeta, _extends({
+      density: density,
+      borderColor: borderColor,
+      indentContent: indentContent
+    }, props));
+  });
+};
+MessageMeta.displayName = 'Message.Meta';
+Message.Meta = MessageMeta;
+var MessageButton = function MessageButton(props) {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+    appearance: props.appearance || 'pill'
+  }));
+};
+MessageButton.displayName = 'Message.Button';
+Message.Button = MessageButton;
+var MessageAvatar = function MessageAvatar(props) {
+  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref6) {
+    var density = _ref6.density;
+    return /*#__PURE__*/React.createElement(Avatar, _extends({
+      size: avatarSizeMap(density)
+    }, props));
+  });
+};
+MessageAvatar.displayName = 'Message.Avatar';
+Message.Avatar = MessageAvatar;
+var MessageCheckbox = function MessageCheckbox(props) {
+  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref7) {
+    var density = _ref7.density;
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+      appearance: "pill"
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore - `density` is not a valid prop for `Checkbox`
+      ,
+      density: density // @ts-notes - not sure what's intended here so address during refactor
+    }, props));
+  });
+};
+MessageCheckbox.displayName = 'Message.Checkbox';
+Message.Checkbox = MessageCheckbox;
+Message.Context = MessageContext;
+Message.DENSITIES = MESSAGE_DENSITIES;
+export default Message;

package/lib/Message/MessageTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/Message/index.flow.js

@@ -1,2 +1 @@
-import * as React from 'react';
-import { MESSAGE_DENSITIES } from "./constants";
+export * from "./Message.flow";