@instructure/ui-modal 11.6.0 → 11.6.1-snapshot-129

package/es/Modal/v2/index.js

@@ -0,0 +1,259 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["open", "onOpen", "onClose", "mountNode", "insertAt", "transition", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "constrain", "overflow"];
+var _dec, _class, _Modal;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, Component, isValidElement } from 'react';
+import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils';
+import { createChainedFunction } from '@instructure/ui-utils';
+import { Transition } from '@instructure/ui-motion';
+import { Portal } from '@instructure/ui-portal';
+import { Dialog } from '@instructure/ui-dialog';
+import { Mask } from '@instructure/ui-overlays/latest';
+import { ModalHeader } from "./ModalHeader/index.js";
+import { ModalBody } from "./ModalBody/index.js";
+import { ModalFooter } from "./ModalFooter/index.js";
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import ModalContext from "./ModalContext.js";
+/**
+---
+category: components
+tags: overlay, portal, dialog
+---
+**/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+let Modal = (_dec = withStyle(generateStyle), _dec(_class = (_Modal = class Modal extends Component {
+  constructor(props) {
+    var _props$open;
+    super(props);
+    this._DOMNode = null;
+    this._content = null;
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.updateHeight = () => {
+      this.setState({
+        windowHeight: window.innerHeight
+      });
+    };
+    this.handlePortalOpen = DOMNode => {
+      this.DOMNode = DOMNode;
+    };
+    this.handleTransitionComplete = () => {
+      this.setState({
+        transitioning: false
+      });
+    };
+    this.contentRef = el => {
+      this._content = el;
+      if (typeof this.props.contentRef === 'function') {
+        this.props.contentRef(el);
+      }
+    };
+    this.state = {
+      transitioning: false,
+      open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false,
+      windowHeight: 99999,
+      bodyScrollAriaLabel: void 0
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    window.addEventListener('resize', this.updateHeight);
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props2;
+    if (this.props.open !== prevProps.open) {
+      this.setState({
+        transitioning: true,
+        open: !!this.props.open
+      });
+    }
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  }
+  get defaultFocusElement() {
+    return this.props.defaultFocusElement;
+  }
+  get DOMNode() {
+    return this._DOMNode;
+  }
+  set DOMNode(el) {
+    this._DOMNode = el;
+  }
+  get maskPlacement() {
+    if (this.props.overflow === 'fit') {
+      return 'stretch';
+    } else {
+      return 'center';
+    }
+  }
+  renderChildren() {
+    const _this$props3 = this.props,
+      children = _this$props3.children,
+      variant = _this$props3.variant,
+      overflow = _this$props3.overflow,
+      styles = _this$props3.styles;
+    const childrenArray = Children.toArray(children);
+    const headerAndBody = [];
+    const others = [];
+    childrenArray.forEach(child => {
+      if (/*#__PURE__*/isValidElement(child)) {
+        if (child.type === Modal.Header || child.type === Modal.Body) {
+          headerAndBody.push(this.cloneChildWithProps(child, variant, overflow));
+        } else {
+          others.push(this.cloneChildWithProps(child, variant, overflow));
+        }
+      }
+    });
+
+    // Putting ModalHeader and ModalBody into the same container, so they can be styled together;
+    // this is needed to apply a media query breakpoint
+    const wrappedHeaderAndBody = headerAndBody.length > 0 ? _jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody,
+      children: headerAndBody
+    }, "header-and-body") : null;
+    return [...(wrappedHeaderAndBody ? [wrappedHeaderAndBody] : []), ...others];
+  }
+  cloneChildWithProps(child, variant, overflow) {
+    if (/*#__PURE__*/isValidElement(child)) {
+      var _child$props;
+      return safeCloneElement(child, {
+        variant: variant,
+        overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
+      });
+    } else {
+      return child;
+    }
+  }
+  renderDialog(props) {
+    const _this$props4 = this.props,
+      onDismiss = _this$props4.onDismiss,
+      label = _this$props4.label,
+      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+      shouldReturnFocus = _this$props4.shouldReturnFocus,
+      liveRegion = _this$props4.liveRegion,
+      size = _this$props4.size,
+      constrain = _this$props4.constrain,
+      as = _this$props4.as,
+      styles = _this$props4.styles;
+    const isFullScreen = size === 'fullscreen';
+    const dialog = _jsx(Dialog, {
+      ...passthroughProps(props),
+      as: as,
+      open: true,
+      label: label,
+      defaultFocusElement: this.defaultFocusElement,
+      shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+      shouldCloseOnEscape: true,
+      shouldContainFocus: true,
+      shouldReturnFocus: shouldReturnFocus,
+      liveRegion: liveRegion,
+      onDismiss: onDismiss,
+      css: styles === null || styles === void 0 ? void 0 : styles.modal,
+      ref: this.contentRef
+      // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
+      ,
+      children: this.renderChildren()
+    });
+    return _jsx(Mask, {
+      placement: this.maskPlacement,
+      fullscreen: constrain === 'window',
+      themeOverride: isFullScreen ? {
+        borderRadius: '0em',
+        borderWidth: '0em'
+      } : {},
+      children: dialog
+    });
+  }
+  render() {
+    var _this$props$styles;
+    const _this$props5 = this.props,
+      open = _this$props5.open,
+      onOpen = _this$props5.onOpen,
+      onClose = _this$props5.onClose,
+      mountNode = _this$props5.mountNode,
+      insertAt = _this$props5.insertAt,
+      transition = _this$props5.transition,
+      onEnter = _this$props5.onEnter,
+      onEntering = _this$props5.onEntering,
+      onEntered = _this$props5.onEntered,
+      onExit = _this$props5.onExit,
+      onExiting = _this$props5.onExiting,
+      onExited = _this$props5.onExited,
+      constrain = _this$props5.constrain,
+      overflow = _this$props5.overflow,
+      passthroughProps = _objectWithoutProperties(_this$props5, _excluded);
+    const portalIsOpen = this.state.open || this.state.transitioning;
+    return _jsx(Portal, {
+      mountNode: mountNode,
+      insertAt: insertAt,
+      open: portalIsOpen,
+      onOpen: this.handlePortalOpen,
+      "data-cid": "Modal",
+      children: _jsx(Transition, {
+        in: open,
+        transitionOnMount: true,
+        type: transition,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
+        children: _jsx(ModalContext.Provider, {
+          value: {
+            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+            setBodyScrollAriaLabel: txt => this.setState({
+              bodyScrollAriaLabel: txt
+            })
+          },
+          children: constrain === 'parent' ? _jsx("span", {
+            css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext,
+            children: this.renderDialog(passthroughProps)
+          }) : this.renderDialog(passthroughProps)
+        })
+      })
+    });
+  }
+}, _Modal.displayName = "Modal", _Modal.componentId = 'Modal', _Modal.allowedProps = allowedProps, _Modal.defaultProps = {
+  open: false,
+  size: 'auto',
+  variant: 'default',
+  transition: 'fade',
+  insertAt: 'bottom',
+  shouldCloseOnDocumentClick: true,
+  shouldReturnFocus: true,
+  constrain: 'window',
+  overflow: 'scroll'
+}, _Modal.Header = ModalHeader, _Modal.Body = ModalBody, _Modal.Footer = ModalFooter, _Modal)) || _class);
+export default Modal;
+export { Modal, ModalHeader, ModalBody, ModalFooter };

package/es/Modal/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['label', 'children', 'as', 'size', 'variant', 'open', 'defaultFocusElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'onOpen', 'onClose', 'onDismiss', 'contentRef', 'mountNode', 'insertAt', 'liveRegion', 'transition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'constrain', 'overflow'];
+export { allowedProps };

package/es/Modal/v2/styles.js

@@ -0,0 +1,119 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const size = props.size,
+    variant = props.variant,
+    overflow = props.overflow;
+  const commonSizeStyleExceptForFullscreen = {
+    maxWidth: '95%',
+    maxHeight: '95%',
+    ...(overflow === 'fit' && {
+      transform: 'translateY(2.5%)'
+    })
+  };
+  const sizeStyles = {
+    auto: {
+      flex: '0 1 auto',
+      minWidth: componentTheme.autoMinWidth,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    small: {
+      flex: `0 1 ${componentTheme.smallMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    medium: {
+      flex: `0 1 ${componentTheme.mediumMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    large: {
+      flex: `0 1 ${componentTheme.largeMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    fullscreen: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+      boxShadow: 'none',
+      border: 'none',
+      borderRadius: 0
+    }
+  };
+  const backgroundStyles = variant === 'inverse' ? {
+    background: componentTheme.inverseBackgroundColor,
+    border: `${componentTheme.borderWidth} solid ${componentTheme.inverseBorderColor}`,
+    color: componentTheme.inverseTextColor
+  } : {
+    background: componentTheme.backgroundColor,
+    border: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`,
+    color: componentTheme.textColor
+  };
+  return {
+    modal: {
+      label: 'modal',
+      fontFamily: componentTheme.fontFamily,
+      display: 'flex',
+      minWidth: '1px',
+      flexDirection: 'column',
+      position: 'relative',
+      boxSizing: 'border-box',
+      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
+      borderRadius: componentTheme.borderRadius,
+      overflow: 'hidden',
+      ...sizeStyles[size],
+      ...backgroundStyles
+    },
+    constrainContext: {
+      label: 'modal__constrainContext',
+      display: 'block',
+      position: 'relative',
+      width: '100%',
+      height: '100%'
+    },
+    joinedHeaderAndBody: {
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flex: '1 1 auto',
+      // ModalHeader and ModalBody is set to scrollable above 20rem height instead of just the ModalBody
+      '@media (max-height: 20rem)': {
+        overflowY: 'auto',
+        maxHeight: '20rem'
+      }
+    }
+  };
+};
+export default generateStyle;

package/es/exports/a.js

@@ -0,0 +1,24 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Modal, ModalBody, ModalFooter, ModalHeader } from "../Modal/v1/index.js";

package/es/exports/b.js

@@ -0,0 +1,24 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Modal, ModalBody, ModalFooter, ModalHeader } from "../Modal/v2/index.js";

package/lib/Modal/{ModalBody → v1/ModalBody}/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ModalBody = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-view/v11_6");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
 var _emotion = require("@instructure/emotion");
@@ -47,7 +47,7 @@ parent: Modal
 id: Modal.Body
 ---
 **/
-let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ModalBody = class ModalBody extends _react.Component {
+let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_ModalBody = class ModalBody extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -98,7 +98,7 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
       padding = _this$props3.padding,
       children = _this$props3.children,
       rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
+    const passthroughProps = _v11_.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
     // this recursive function is needed because `ref` can be a React component.
     // TODO rethink, the 'as' prop, likely its not a good idea to allow React
@@ -108,7 +108,7 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     return (0, _jsxRuntime.jsx)(_ModalContext.default.Consumer, {
       children: value => {
         var _this$props$styles;
-        return (0, _jsxRuntime.jsx)(_View.View, {
+        return (0, _jsxRuntime.jsx)(_v11_.View, {
           ...passthroughProps,
           display: "block",
           "data-cid": "ModalBody",

package/lib/Modal/{ModalFooter → v1/ModalFooter}/index.js

@@ -44,7 +44,7 @@ parent: Modal
 id: Modal.Footer
 ---
 **/
-let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ModalFooter = class ModalFooter extends _react.Component {
+let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_ModalFooter = class ModalFooter extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;

package/lib/Modal/{ModalHeader → v1/ModalHeader}/index.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _emotion = require("@instructure/emotion");
-var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
+var _v11_ = require("@instructure/ui-buttons/v11_6");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
@@ -47,7 +47,7 @@ parent: Modal
 id: Modal.Header
 ---
 **/
-let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ModalHeader = class ModalHeader extends _react.Component {
+let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_ModalHeader = class ModalHeader extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -93,7 +93,7 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
   get usesCloseButton() {
     let hasCloseButton = false;
     _react.Children.forEach(this.props.children, child => {
-      if (child && (0, _matchComponentTypes.matchComponentTypes)(child, [_CloseButton.CloseButton])) {
+      if (child && (0, _matchComponentTypes.matchComponentTypes)(child, [_v11_.CloseButton])) {
         hasCloseButton = true;
       }
     });