@sproutsocial/racine 13.8.0 → 14.0.1

package/lib/Message/index.js

@@ -1,140 +1,5 @@
-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, MessageFooter, MessageHeader, MessageMeta } 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';
-  }
-};
-
-// $FlowIssue Upgrade 0.111.1
-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));
-};
-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(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(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(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(MessageMeta, _extends({
-      density: density,
-      borderColor: borderColor,
-      indentContent: indentContent
-    }, props));
-  });
-};
-Message.Meta.displayName = 'Message.Meta';
-Message.Button = function (props) {
-  return /*#__PURE__*/React.createElement(Button, _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, _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, _extends({
-        appearance: "pill",
-        density: density
-      }, props))
-    );
-  });
-};
-Message.Checkbox.displayName = 'Message.Checkbox';
-Message.Context = MessageContext;
-Message.DENSITIES = MESSAGE_DENSITIES;
-export default Message;
+import Message from "./Message";
+export default Message;
+export { Message };
+export * from "./MessageTypes";
+export * from "./constants";

package/lib/Message/styles.js

@@ -2,10 +2,10 @@ import { memo } from 'react';
 import styled from 'styled-components';
 import { focusRing } from "../utils/mixins";
 import Box from "../Box";
-import Message from "./";
+import { MESSAGE_DENSITIES } from "./constants";
 var Container = styled(Box).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) {
@@ -14,15 +14,13 @@ var Container = styled(Box).withConfig({
   return props.theme.colors[props.bg];
 }, focusRing);
 Container.displayName = 'Message.Container';
-
-// $FlowIssue Upgrade 0.111.1
 export var MessageHeader = /*#__PURE__*/memo(styled(Box).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 === Message.DENSITIES.CONDENSED ? "0 0 0 ".concat(props.theme.space[100]) : props.theme.space[300];
+  return props.density === MESSAGE_DENSITIES.CONDENSED ? "0 0 0 ".concat(props.theme.space[100]) : props.theme.space[300];
 }, function (props) {
-  return props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.borderWidths[500];
+  return props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.borderWidths[500];
 }, function (props) {
   return props.theme.radii.outer;
 }, function (props) {
@@ -35,22 +33,22 @@ var getContentPadding = function getContentPadding(props) {
     return props.theme.space[400];
   }
   switch (props.density) {
-    case Message.DENSITIES.LARGE:
+    case MESSAGE_DENSITIES.LARGE:
       {
         // 40 px avatar + 8px(message.header) + 16px(mr)
         return '64px';
       }
-    case Message.DENSITIES.COMPACT:
+    case MESSAGE_DENSITIES.COMPACT:
       {
         // 20px avatar plus space.300 margin plus space.400 margin
         return '40px';
       }
-    case Message.DENSITIES.CONDENSED:
+    case MESSAGE_DENSITIES.CONDENSED:
       {
         // 24px avatar plus space.200 margin plus space.350 margin
         return '40px';
       }
-    case Message.DENSITIES.SMALL:
+    case MESSAGE_DENSITIES.SMALL:
     default:
       {
         // 32px avatar plus space.300 margin plus space.400 margin
@@ -61,45 +59,45 @@ var getContentPadding = function getContentPadding(props) {
 var messagePadding = function messagePadding(_ref) {
   var density = _ref.density,
     theme = _ref.theme;
-  if (density === Message.DENSITIES.CONDENSED) {
+  if (density === MESSAGE_DENSITIES.CONDENSED) {
     return 0;
   }
-  if (density === Message.DENSITIES.COMPACT) {
+  if (density === MESSAGE_DENSITIES.COMPACT) {
     return theme.space[300];
   }
   return theme.space[400];
 };
 export var MessageBody = styled(Box).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 === Message.DENSITIES.COMPACT || props.density === Message.DENSITIES.CONDENSED ? props.theme.typography[200] : props.theme.typography[300];
+  return props.density === MESSAGE_DENSITIES.COMPACT || props.density === MESSAGE_DENSITIES.CONDENSED ? props.theme.typography[200] : props.theme.typography[300];
 });
 export var MessageFooter = styled(Box).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 === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
+  return props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);
 }, function (props) {
-  return props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
+  return props.density === 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 === Message.DENSITIES.CONDENSED ? 'nowrap' : 'wrap';
+  return props.density === MESSAGE_DENSITIES.CONDENSED ? 'nowrap' : 'wrap';
 }, function (props) {
   return props.theme.space[350];
 });
 export var MessageMeta = styled(Box).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/lib/Modal/Modal.flow.js

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

package/lib/Modal/Modal.js

@@ -0,0 +1,126 @@
+var _excluded = ["title", "subtitle", "children", "bordered"],
+  _excluded2 = ["children"],
+  _excluded3 = ["appElementSelector", "children", "isOpen", "label", "onClose", "closeButtonLabel", "width", "zIndex"];
+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 { useContext } from 'react';
+import Box from "../Box";
+import Button from "../Button";
+import Icon from "../Icon";
+import Text from "../Text";
+import { Container, Content, Header, Footer, Body } from "./styles";
+var ModalContext = /*#__PURE__*/React.createContext({});
+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(Header, _extends({
+    bordered: title || subtitle || bordered
+  }, rest), children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, null, title && /*#__PURE__*/React.createElement(Text, {
+    as: "h1",
+    fontSize: 400,
+    fontWeight: "semibold"
+  }, title), subtitle && /*#__PURE__*/React.createElement(Text, {
+    as: "div",
+    fontSize: 200
+  }, subtitle)), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    "justify-content": "flex-end"
+  }, /*#__PURE__*/React.createElement(ModalCloseButton, {
+    ml: 400
+  }))));
+};
+var ModalCloseButton = function ModalCloseButton(props) {
+  var _useContext = useContext(ModalContext),
+    onClose = _useContext.onClose,
+    closeButtonLabel = _useContext.closeButtonLabel;
+  if (!onClose) return null;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: onClose
+  }, props), /*#__PURE__*/React.createElement(Icon, {
+    name: "x",
+    ariaLabel: closeButtonLabel
+  }));
+};
+var ModalFooter = function ModalFooter(props) {
+  return /*#__PURE__*/React.createElement(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 = useContext(ModalContext),
+    label = _useContext2.label;
+  return /*#__PURE__*/React.createElement(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(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(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;
+export default Modal;

package/lib/Modal/ModalTypes.js

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

package/lib/Modal/index.flow.js

@@ -1,2 +1 @@
-import * as React from 'react';
-import Box from "../Box";
+export * from "./Modal.flow";

package/lib/Modal/index.js

@@ -1,136 +1,4 @@
-var _excluded = ["title", "subtitle", "children", "bordered"],
-  _excluded2 = ["children"],
-  _excluded3 = ["appElementSelector", "children", "isOpen", "label", "onClose", "closeButtonLabel", "width", "zIndex"];
-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 { useContext } from 'react';
-import Box from "../Box";
-import Button from "../Button";
-import Icon from "../Icon";
-import Text from "../Text";
-import { Container, Content, Header, Footer, Body } from "./styles";
-var ModalContext = /*#__PURE__*/React.createContext({});
-var ModalHeader = function ModalHeader(props) {
-  var title = props.title,
-    subtitle = props.subtitle,
-    children = props.children,
-    bordered = props.bordered,
-    rest = _objectWithoutProperties(props, _excluded);
-  return (
-    /*#__PURE__*/
-    // $FlowIssue - upgrade v0.112.0
-    React.createElement(Header, _extends({
-      bordered: title || subtitle || bordered
-    }, rest), children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, null, title && /*#__PURE__*/React.createElement(Text, {
-      as: "h1",
-      fontSize: 400,
-      fontWeight: "semibold"
-    }, title), subtitle && /*#__PURE__*/React.createElement(Text, {
-      as: "div",
-      fontSize: 200
-    }, subtitle)), /*#__PURE__*/React.createElement(Box, {
-      display: "flex",
-      alignItems: "center",
-      "justify-content": "flex-end"
-    }, /*#__PURE__*/React.createElement(ModalCloseButton, {
-      ml: 400
-    }))))
-  );
-};
-var ModalCloseButton = function ModalCloseButton(props) {
-  var _useContext = useContext(ModalContext),
-    onClose = _useContext.onClose,
-    closeButtonLabel = _useContext.closeButtonLabel;
-  if (!onClose) return null;
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    onClick: onClose
-  }, props), /*#__PURE__*/React.createElement(Icon, {
-    name: "x",
-    ariaLabel: closeButtonLabel
-  }));
-};
-var ModalFooter = function ModalFooter(props) {
-  return (
-    /*#__PURE__*/
-    // $FlowIssue - upgrade v0.112.0
-    React.createElement(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 = useContext(ModalContext),
-    label = _useContext2.label;
-  return /*#__PURE__*/React.createElement(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) : null;
-  return (
-    /*#__PURE__*/
-    // $FlowIssue - upgrade v0.112.0
-    React.createElement(Container, _extends({
-      appElement: appElement,
-      ariaHideApp: !!appElement,
-      isOpen: isOpen,
-      contentLabel: label,
-      onRequestClose: onClose || function () {},
-      shouldFocusAfterRender: true,
-      shouldCloseOnOverlayClick: isCloseable,
-      shouldCloseOnEsc: isCloseable,
-      shouldReturnFocusAfterClose: true,
-      closeTimeoutMS: 200,
-      role: "dialog",
-      width: width,
-      zIndex: zIndex,
-      data: {
-        'qa-modal': '',
-        'qa-modal-isopen': isOpen
-      }
-    }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Body, null), /*#__PURE__*/React.createElement(ModalContext.Provider, {
-      value: {
-        onClose: onClose,
-        closeButtonLabel: closeButtonLabel,
-        label: label
-      }
-    }, children)))
-  );
-};
-Modal.Header = ModalHeader;
-Modal.Footer = ModalFooter;
-Modal.Content = ModalContent;
-Modal.CloseButton = ModalCloseButton;
-Modal.Header.displayName = 'Modal.Header';
-Modal.Footer.displayName = 'Modal.Footer';
-Modal.Content.displayName = 'Modal.Content';
-Modal.CloseButton.displayName = 'Modal.CloseButton';
-Modal.defaultProps = {
-  width: '800px',
-  zIndex: 6
-};
-export default Modal;
+import Modal from "./Modal";
+export default Modal;
+export { Modal };
+export * from "./ModalTypes";

package/lib/Modal/styles.js

@@ -8,34 +8,32 @@ import { width, zIndex } from 'styled-system';
 import ReactModal from 'react-modal';
 import { COMMON } from "../utils/system-props";
 import Box from "../Box";
+
 // This is the max space allowed between the modal and the edge of the browser
 var BODY_PADDING = '64px';
-function ReactModalAdapter(_ref) {
-  var className = _ref.className,
+var ReactModalAdapter = function ReactModalAdapter(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
   // We want to create *__Content and *__Overlay class names on the subcomponents.
   // Because `className` could be a space-separated list of class names, we make
   // sure that we append `__Content` and `__Overlay` to every class name.
-  var contentClassName = (className || '').split(' ').map(function (className) {
+  var contentClassName = className.split(' ').map(function (className) {
     return "".concat(className, " ").concat(className, "__Content");
   }).join(' ');
-  var overlayClassName = (className || '').split(' ').map(function (className) {
+  var overlayClassName = className.split(' ').map(function (className) {
     return "".concat(className, " ").concat(className, "__Overlay");
   }).join(' ');
-  return (
-    /*#__PURE__*/
-    // $FlowIssue
-    React.createElement(ReactModal, _extends({
-      portalClassName: className,
-      className: contentClassName,
-      overlayClassName: overlayClassName
-    }, props))
-  );
-}
+  return /*#__PURE__*/React.createElement(ReactModal, _extends({
+    portalClassName: className,
+    className: contentClassName,
+    overlayClassName: overlayClassName
+  }, props));
+};
 export var Body = createGlobalStyle([".ReactModal__Body--open{overflow:hidden;}"]);
 export var Container = styled(ReactModalAdapter).withConfig({
   displayName: "styles__Container",
-  componentId: "sc-9lom4g-0"
+  componentId: "sc-qfi2g8-0"
 })(["&__Overlay{position:fixed;top:0px;left:0px;right:0px;bottom:0px;display:flex;align-items:center;justify-content:center;background-color:", ";opacity:0;will-change:opacity;transition:opacity ", " ", ";", " &.ReactModal__Overlay--after-open{opacity:1;}&.ReactModal__Overlay--before-close{opacity:0;}}&__Content{display:flex;flex-direction:column;background:", ";border-radius:", ";box-shadow:", ";filter:blur(0);color:", ";outline:none;max-width:calc(100vw - ", ");max-height:calc(100vh - ", ");@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:calc(100vh - ", ");}", " ", "}"], function (props) {
   return props.theme.colors.overlay.background.base;
 }, function (props) {
@@ -53,7 +51,7 @@ export var Container = styled(ReactModalAdapter).withConfig({
 }, BODY_PADDING, BODY_PADDING, BODY_PADDING, width, COMMON);
 export var Content = styled(Box).withConfig({
   displayName: "styles__Content",
-  componentId: "sc-9lom4g-1"
+  componentId: "sc-qfi2g8-1"
 })(["font-family:", ";min-height:80px;overflow-y:auto;flex:1 1 auto;padding:", " ", ";@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){flex-basis:100%;}"], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
@@ -63,7 +61,7 @@ export var Content = styled(Box).withConfig({
 });
 export var HeaderContainer = styled(Box).withConfig({
   displayName: "styles__HeaderContainer",
-  componentId: "sc-9lom4g-2"
+  componentId: "sc-qfi2g8-2"
 })(["font-family:", ";padding:", " ", ";"], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
@@ -73,7 +71,7 @@ export var HeaderContainer = styled(Box).withConfig({
 });
 export var Header = styled(HeaderContainer).withConfig({
   displayName: "styles__Header",
-  componentId: "sc-9lom4g-3"
+  componentId: "sc-qfi2g8-3"
 })(["display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;border-bottom-width:", ";border-bottom-color:", ";border-bottom-style:solid;"], function (props) {
   return props.theme.borderWidths[500];
 }, function (props) {
@@ -81,7 +79,7 @@ export var Header = styled(HeaderContainer).withConfig({
 });
 export var Footer = styled(Box).withConfig({
   displayName: "styles__Footer",
-  componentId: "sc-9lom4g-4"
+  componentId: "sc-qfi2g8-4"
 })(["flex:0 0 auto;font-family:", ";padding:", " ", ";border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], function (props) {
   return props.theme.fontFamily;
 }, function (props) {

package/lib/Numeral/Numeral.flow.js

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