@sproutsocial/racine 13.8.0 → 14.0.1

package/commonjs/Message/Message.js

@@ -0,0 +1,155 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _styles = _interopRequireWildcard(require("./styles"));
+var _constants = require("./constants");
+var _excluded = ["children", "density", "borderColor", "bg", "indentContent", "innerRef", "qa"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
+var avatarSizeMap = function avatarSizeMap(density) {
+  switch (density) {
+    case _constants.MESSAGE_DENSITIES.LARGE:
+      return '40px';
+    case _constants.MESSAGE_DENSITIES.COMPACT:
+      return '20px';
+    case _constants.MESSAGE_DENSITIES.CONDENSED:
+      return '24px';
+    case _constants.MESSAGE_DENSITIES.SMALL:
+    default:
+      return '32px';
+  }
+};
+var MessageContext = /*#__PURE__*/React.createContext({
+  density: _constants.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 ? _constants.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(_styles.default, _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(_styles.MessageBody, _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(_styles.MessageHeader, _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(_styles.MessageFooter, _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(_styles.MessageMeta, _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.default, _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.default, _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.default, _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 = _constants.MESSAGE_DENSITIES;
+var _default = Message;
+exports.default = _default;

package/commonjs/Message/MessageTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/commonjs/Message/index.flow.js

@@ -1,7 +1,16 @@
 "use strict";
 
-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); }
-var React = _interopRequireWildcard(require("react"));
-var _constants = require("./constants");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Message = require("./Message.flow");
+Object.keys(_Message).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Message[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Message[key];
+    }
+  });
+});

package/commonjs/Message/index.js

@@ -1,151 +1,43 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Avatar = _interopRequireDefault(require("../Avatar"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Checkbox = _interopRequireDefault(require("../Checkbox"));
-var _styles = _interopRequireWildcard(require("./styles"));
-var _constants = require("./constants");
-var _excluded = ["children", "density", "borderColor", "bg", "indentContent", "innerRef", "qa"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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; }
-var avatarSizeMap = function avatarSizeMap(density) {
-  switch (density) {
-    case _constants.MESSAGE_DENSITIES.LARGE:
-      return '40px';
-    case _constants.MESSAGE_DENSITIES.COMPACT:
-      return '20px';
-    case _constants.MESSAGE_DENSITIES.CONDENSED:
-      return '24px';
-    case _constants.MESSAGE_DENSITIES.SMALL:
-    default:
-      return '32px';
-  }
+var _exportNames = {
+  Message: true
 };
-
-// $FlowIssue Upgrade 0.111.1
-var MessageContext = /*#__PURE__*/React.createContext({
-  density: _constants.MESSAGE_DENSITIES.SMALL,
-  borderColor: 'container.border.base',
-  bg: 'container.background.base',
-  indentContent: true
+Object.defineProperty(exports, "Message", {
+  enumerable: true,
+  get: function get() {
+    return _Message.default;
+  }
 });
-var Message = function Message(_ref) {
-  var children = _ref.children,
-    _ref$density = _ref.density,
-    density = _ref$density === void 0 ? _constants.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
+exports.default = void 0;
+var _Message = _interopRequireDefault(require("./Message"));
+var _MessageTypes = require("./MessageTypes");
+Object.keys(_MessageTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _MessageTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MessageTypes[key];
     }
-  }, /*#__PURE__*/React.createElement(_styles.default, _extends({
-    borderColor: borderColor,
-    bg: bg,
-    ref: innerRef,
-    tabIndex: 0
-  }, qa, rest), children));
-};
-Message.Body = function (props) {
-  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref2) {
-    var density = _ref2.density,
-      borderColor = _ref2.borderColor,
-      indentContent = _ref2.indentContent;
-    return /*#__PURE__*/React.createElement(_styles.MessageBody, _extends({
-      "data-qa-message-body": true,
-      density: density,
-      borderColor: borderColor,
-      indentContent: indentContent
-    }, props));
-  });
-};
-Message.Body.displayName = 'Message.Body';
-Message.Header = function (props) {
-  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref3) {
-    var density = _ref3.density,
-      borderColor = _ref3.borderColor;
-    return /*#__PURE__*/React.createElement(_styles.MessageHeader, _extends({
-      density: density,
-      borderColor: borderColor
-    }, props));
-  });
-};
-Message.Header.displayName = 'Message.Header';
-Message.Footer = function (props) {
-  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref4) {
-    var density = _ref4.density,
-      borderColor = _ref4.borderColor,
-      indentContent = _ref4.indentContent;
-    return /*#__PURE__*/React.createElement(_styles.MessageFooter, _extends({
-      density: density,
-      borderColor: borderColor,
-      indentContent: indentContent
-    }, props));
   });
-};
-Message.Footer.displayName = 'Message.Footer';
-Message.Meta = function (props) {
-  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref5) {
-    var density = _ref5.density,
-      borderColor = _ref5.borderColor,
-      indentContent = _ref5.indentContent;
-    return /*#__PURE__*/React.createElement(_styles.MessageMeta, _extends({
-      density: density,
-      borderColor: borderColor,
-      indentContent: indentContent
-    }, props));
-  });
-};
-Message.Meta.displayName = 'Message.Meta';
-Message.Button = function (props) {
-  return /*#__PURE__*/React.createElement(_Button.default, _extends({}, props, {
-    appearance: props.appearance || 'pill'
-  }));
-};
-Message.Button.displayName = 'Message.Button';
-Message.Avatar = function (props) {
-  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref6) {
-    var density = _ref6.density;
-    return /*#__PURE__*/React.createElement(_Avatar.default, _extends({
-      size: avatarSizeMap(density)
-    }, props));
-  });
-};
-Message.Avatar.displayName = 'Message.Avatar';
-Message.Checkbox = function (props) {
-  return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref7) {
-    var density = _ref7.density;
-    return (
-      /*#__PURE__*/
-      // $FlowIssue - upgrade v0.112.0
-      React.createElement(_Checkbox.default, _extends({
-        appearance: "pill",
-        density: density
-      }, props))
-    );
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
   });
-};
-Message.Checkbox.displayName = 'Message.Checkbox';
-Message.Context = MessageContext;
-Message.DENSITIES = _constants.MESSAGE_DENSITIES;
-var _default = Message;
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _Message.default;
 exports.default = _default;

package/commonjs/Message/styles.js

@@ -8,11 +8,11 @@ var _react = require("react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _mixins = require("../utils/mixins");
 var _Box = _interopRequireDefault(require("../Box"));
-var _ = _interopRequireDefault(require("./"));
+var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Container = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__Container",
-  componentId: "sc-1ju6d1v-0"
+  componentId: "sc-161ezbx-0"
 })(["border-radius:", ";border-width:", ";border-style:solid;background-color:", ";&:focus{", " transition:box-shadow 0.15s;}"], function (props) {
   return props.theme.radii.outer;
 }, function (props) {
@@ -21,15 +21,13 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
   return props.theme.colors[props.bg];
 }, _mixins.focusRing);
 Container.displayName = 'Message.Container';
-
-// $FlowIssue Upgrade 0.111.1
 var MessageHeader = /*#__PURE__*/(0, _react.memo)((0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageHeader",
-  componentId: "sc-1ju6d1v-1"
+  componentId: "sc-161ezbx-1"
 })(["padding:", ";display:flex;justify-content:space-between;align-items:center;border-bottom-width:", ";border-bottom-style:solid;border-radius:", " ", " 0 0;", ";"], function (props) {
-  return props.density === _.default.DENSITIES.CONDENSED ? "0 0 0 ".concat(props.theme.space[100]) : props.theme.space[300];
+  return props.density === _constants.MESSAGE_DENSITIES.CONDENSED ? "0 0 0 ".concat(props.theme.space[100]) : props.theme.space[300];
 }, function (props) {
-  return props.density === _.default.DENSITIES.CONDENSED ? 0 : props.theme.borderWidths[500];
+  return props.density === _constants.MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.borderWidths[500];
 }, function (props) {
   return props.theme.radii.outer;
 }, function (props) {
@@ -43,22 +41,22 @@ var getContentPadding = function getContentPadding(props) {
     return props.theme.space[400];
   }
   switch (props.density) {
-    case _.default.DENSITIES.LARGE:
+    case _constants.MESSAGE_DENSITIES.LARGE:
       {
         // 40 px avatar + 8px(message.header) + 16px(mr)
         return '64px';
       }
-    case _.default.DENSITIES.COMPACT:
+    case _constants.MESSAGE_DENSITIES.COMPACT:
       {
         // 20px avatar plus space.300 margin plus space.400 margin
         return '40px';
       }
-    case _.default.DENSITIES.CONDENSED:
+    case _constants.MESSAGE_DENSITIES.CONDENSED:
       {
         // 24px avatar plus space.200 margin plus space.350 margin
         return '40px';
       }
-    case _.default.DENSITIES.SMALL:
+    case _constants.MESSAGE_DENSITIES.SMALL:
     default:
       {
         // 32px avatar plus space.300 margin plus space.400 margin
@@ -69,47 +67,47 @@ var getContentPadding = function getContentPadding(props) {
 var messagePadding = function messagePadding(_ref) {
   var density = _ref.density,
     theme = _ref.theme;
-  if (density === _.default.DENSITIES.CONDENSED) {
+  if (density === _constants.MESSAGE_DENSITIES.CONDENSED) {
     return 0;
   }
-  if (density === _.default.DENSITIES.COMPACT) {
+  if (density === _constants.MESSAGE_DENSITIES.COMPACT) {
     return theme.space[300];
   }
   return theme.space[400];
 };
 var MessageBody = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageBody",
-  componentId: "sc-1ju6d1v-2"
+  componentId: "sc-161ezbx-2"
 })(["padding:", " ", " ", " ", ";font-family:", ";", ";"], messagePadding, messagePadding, messagePadding, function (props) {
   return getContentPadding(props);
 }, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.density === _.default.DENSITIES.COMPACT || props.density === _.default.DENSITIES.CONDENSED ? props.theme.typography[200] : props.theme.typography[300];
+  return props.density === _constants.MESSAGE_DENSITIES.COMPACT || props.density === _constants.MESSAGE_DENSITIES.CONDENSED ? props.theme.typography[200] : props.theme.typography[300];
 });
 exports.MessageBody = MessageBody;
 var MessageFooter = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageFooter",
-  componentId: "sc-1ju6d1v-3"
+  componentId: "sc-161ezbx-3"
 })(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
-  return props.density === _.default.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
+  return props.density === _constants.MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);
 }, function (props) {
-  return props.density === _.default.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
+  return props.density === _constants.MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return props.theme.radii.outer;
 }, function (props) {
   return props.theme.radii.outer;
 }, function (props) {
-  return props.density === _.default.DENSITIES.CONDENSED ? 'nowrap' : 'wrap';
+  return props.density === _constants.MESSAGE_DENSITIES.CONDENSED ? 'nowrap' : 'wrap';
 }, function (props) {
   return props.theme.space[350];
 });
 exports.MessageFooter = MessageFooter;
 var MessageMeta = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageMeta",
-  componentId: "sc-1ju6d1v-4"
+  componentId: "sc-161ezbx-4"
 })(["background:none;border-width:0;border-style:none;border-top-width:1px;border-top-style:solid;display:block;width:100%;text-align:start;border-radius:0 0 ", " ", ";", ";margin:", " 0 ", ";padding:", " ", ";padding-left:", ";cursor:", ";color:", ";&:focus{", ";}"], function (props) {
   return props.theme.radii.outer;
 }, function (props) {

package/commonjs/Modal/Modal.flow.js

@@ -0,0 +1,8 @@
+"use strict";
+
+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); }
+var React = _interopRequireWildcard(require("react"));
+var _index = _interopRequireDefault(require("../Box/index.flow"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/commonjs/Modal/Modal.js

@@ -0,0 +1,136 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../Box"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Text = _interopRequireDefault(require("../Text"));
+var _styles = require("./styles");
+var _excluded = ["title", "subtitle", "children", "bordered"],
+  _excluded2 = ["children"],
+  _excluded3 = ["appElementSelector", "children", "isOpen", "label", "onClose", "closeButtonLabel", "width", "zIndex"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
+var ModalContext = /*#__PURE__*/React.createContext({});
+var ModalHeader = function ModalHeader(props) {
+  var title = props.title,
+    subtitle = props.subtitle,
+    children = props.children,
+    bordered = props.bordered,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(_styles.Header, _extends({
+    bordered: title || subtitle || bordered
+  }, rest), children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Box.default, null, title && /*#__PURE__*/React.createElement(_Text.default, {
+    as: "h1",
+    fontSize: 400,
+    fontWeight: "semibold"
+  }, title), subtitle && /*#__PURE__*/React.createElement(_Text.default, {
+    as: "div",
+    fontSize: 200
+  }, subtitle)), /*#__PURE__*/React.createElement(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    "justify-content": "flex-end"
+  }, /*#__PURE__*/React.createElement(ModalCloseButton, {
+    ml: 400
+  }))));
+};
+var ModalCloseButton = function ModalCloseButton(props) {
+  var _useContext = (0, React.useContext)(ModalContext),
+    onClose = _useContext.onClose,
+    closeButtonLabel = _useContext.closeButtonLabel;
+  if (!onClose) return null;
+  return /*#__PURE__*/React.createElement(_Button.default, _extends({
+    onClick: onClose
+  }, props), /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "x",
+    ariaLabel: closeButtonLabel
+  }));
+};
+var ModalFooter = function ModalFooter(props) {
+  return /*#__PURE__*/React.createElement(_styles.Footer, _extends({
+    borderTop: 500,
+    borderColor: "container.border.base"
+  }, props));
+};
+ModalFooter.defaultProps = {
+  bg: 'container.background.base'
+};
+var ModalContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  var _useContext2 = (0, React.useContext)(ModalContext),
+    label = _useContext2.label;
+  return /*#__PURE__*/React.createElement(_styles.Content, _extends({
+    "data-qa-modal": true,
+    "data-qa-label": label,
+    ref: ref
+  }, rest), children);
+});
+
+/**
+ * The modal you want
+ */
+var Modal = function Modal(props) {
+  var appElementSelector = props.appElementSelector,
+    children = props.children,
+    isOpen = props.isOpen,
+    label = props.label,
+    onClose = props.onClose,
+    closeButtonLabel = props.closeButtonLabel,
+    width = props.width,
+    zIndex = props.zIndex,
+    rest = _objectWithoutProperties(props, _excluded3);
+  var isCloseable = Boolean(onClose);
+  var appElement = appElementSelector && document ? document.querySelector(appElementSelector) : undefined;
+  return /*#__PURE__*/React.createElement(_styles.Container, _extends({
+    appElement: appElement,
+    ariaHideApp: !!appElement,
+    isOpen: isOpen,
+    contentLabel: label
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ,
+    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(_styles.Body, null), /*#__PURE__*/React.createElement(ModalContext.Provider, {
+    value: {
+      onClose: onClose,
+      closeButtonLabel: closeButtonLabel,
+      label: label
+    }
+  }, children)));
+};
+Modal.defaultProps = {
+  width: '800px',
+  zIndex: 6
+};
+ModalHeader.displayName = 'Modal.Header';
+ModalFooter.displayName = 'Modal.Footer';
+ModalContent.displayName = 'Modal.Content';
+ModalCloseButton.displayName = 'Modal.CloseButton';
+Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
+Modal.Content = ModalContent;
+Modal.CloseButton = ModalCloseButton;
+var _default = Modal;
+exports.default = _default;

package/commonjs/Modal/ModalTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});