@khanacademy/wonder-blocks-modal 2.1.42 → 2.2.0

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ 	return __webpack_require__(__webpack_require__.s = 25);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -129,82 +129,232 @@ module.exports = require("react-dom");
 
 /***/ }),
 /* 7 */
-/***/ (function(module, exports) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-module.exports = require("@khanacademy/wonder-blocks-typography");
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalHeader; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(13);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__);
 
-/***/ }),
-/* 8 */
-/***/ (function(module, exports) {
 
-function _extends() {
-  module.exports = _extends = Object.assign || 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;
-  };
 
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
 
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
 
-/***/ }),
-/* 9 */
-/***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-icon");
+/**
+ * This is a helper component that is never rendered by itself. It is always
+ * pinned to the top of the dialog, is responsive using the same behavior as its
+ * parent dialog, and has the following properties:
+ * - title
+ * - breadcrumb OR subtitle, but not both.
+ *
+ * **Accessibility notes:**
+ *
+ * - By default (e.g. using [OnePaneDialog](/#onepanedialog)), `titleId` is
+ *   populated automatically by the parent container.
+ * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the
+ *   ModalHeader doesn’t have to have the `titleId` prop however this is
+ *   recommended. It should match the `aria-labelledby` prop of the
+ *   [ModalDialog](/#modaldialog) component. If you want to see an example of
+ *   how to generate this ID, check [IDProvider](/#idprovider).
+ *
+ * **Implementation notes:**
+ *
+ * If you are creating a custom Dialog, make sure to follow these guidelines:
+ * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the
+ *   `header` prop.
+ * - Add a title (required).
+ * - Optionally add a subtitle or breadcrumbs.
+ * - We encourage you to add `titleId` (see Accessibility notes).
+ * - If the `ModalPanel` has a dark background, make sure to set `light` to
+ *   `false`.
+ * - If you need to create e2e tests, make sure to pass a `testId` prop and
+ *   add a sufix to scope the testId to this component: e.g.
+ *   `some-random-id-ModalHeader`. This scope will also be passed to the title
+ *   and subtitle elements: e.g. `some-random-id-ModalHeader-title`.
+ *
+ * Example:
+ *
+ * ```js
+ * <ModalHeader
+ *      title="Sidebar using ModalHeader"
+ *      subtitle="subtitle"
+ *      titleId="uniqueTitleId"
+ *      light={false}
+ *  />
+ * ```
+ */
+class ModalHeader extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  render() {
+    const {
+      breadcrumbs = undefined,
+      light,
+      subtitle = undefined,
+      testId,
+      title,
+      titleId
+    } = this.props;
 
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
+    if (subtitle && breadcrumbs) {
+      throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
+    }
 
-module.exports = require("@khanacademy/wonder-blocks-icon-button");
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["MediaLayout"], {
+      styleSheets: styleSheets
+    }, ({
+      styles
+    }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: [styles.header, !light && styles.dark],
+      testId: testId
+    }, breadcrumbs && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: styles.breadcrumbs
+    }, breadcrumbs), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["HeadingMedium"], {
+      style: styles.title,
+      id: titleId,
+      testId: testId && `${testId}-title`
+    }, title), subtitle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
+      style: light && styles.subtitle,
+      testId: testId && `${testId}-subtitle`
+    }, subtitle)));
+  }
+
+}
+ModalHeader.defaultProps = {
+  light: true
+};
+const styleSheets = {
+  all: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    header: {
+      boxShadow: `0px 1px 0px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 66,
+      padding: `${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.large_24}px ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xLarge_32}px`,
+      position: "relative",
+      width: "100%"
+    },
+    dark: {
+      background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.darkBlue,
+      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white
+    },
+    breadcrumbs: {
+      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64,
+      marginBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xSmall_8
+    },
+    title: {
+      // Prevent title from overlapping the close button
+      paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.medium_16
+    },
+    subtitle: {
+      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64,
+      marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xSmall_8
+    }
+  }),
+  small: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    header: {
+      paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.medium_16,
+      paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.medium_16
+    },
+    title: {
+      paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xLarge_32
+    }
+  })
+};
 
 /***/ }),
-/* 11 */
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalFooter; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
+
+
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "ModalHeader", function() { return /* reexport */ modal_header_ModalHeader; });
-__webpack_require__.d(__webpack_exports__, "ModalFooter", function() { return /* reexport */ modal_footer_ModalFooter; });
-__webpack_require__.d(__webpack_exports__, "ModalDialog", function() { return /* reexport */ modal_dialog_ModalDialog; });
-__webpack_require__.d(__webpack_exports__, "ModalPanel", function() { return /* reexport */ modal_panel_ModalPanel; });
-__webpack_require__.d(__webpack_exports__, "ModalLauncher", function() { return /* reexport */ modal_launcher_ModalLauncher; });
-__webpack_require__.d(__webpack_exports__, "OnePaneDialog", function() { return /* reexport */ one_pane_dialog_OnePaneDialog; });
-__webpack_require__.d(__webpack_exports__, "maybeGetPortalMountedModalHostElement", function() { return /* reexport */ maybeGetPortalMountedModalHostElement; });
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
 
-// EXTERNAL MODULE: external "aphrodite"
-var external_aphrodite_ = __webpack_require__(3);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-layout"
-var wonder_blocks_layout_ = __webpack_require__(5);
+/**
+ * Modal footer included after the content.
+ *
+ * **Implementation notes**:
+ *
+ * If you are creating a custom Dialog, make sure to follow these guidelines:
+ * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the `footer` prop.
+ * - The footer is completely flexible. Meaning the developer needs to add its own custom layout to match design specs.
+ */
+class ModalFooter extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: styles.footer
+    }, children);
+  }
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(2);
+}
+ModalFooter.__IS_MODAL_FOOTER__ = true;
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  footer: {
+    flex: "0 0 auto",
+    boxSizing: "border-box",
+    minHeight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xxxLarge_64,
+    paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
+    paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
+    paddingTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8,
+    paddingBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    boxShadow: `0px -1px 0px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`
+  }
+});
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-spacing"
-var wonder_blocks_spacing_ = __webpack_require__(1);
-var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_spacing_);
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-dialog.js
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalDialog; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
 
 
 
@@ -221,7 +371,7 @@ var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_bl
  * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
  * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
  */
-class modal_dialog_ModalDialog extends external_react_["Component"] {
+class ModalDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {
     const {
       above,
@@ -234,35 +384,35 @@ class modal_dialog_ModalDialog extends external_react_["Component"] {
     } = this.props;
     const contextValue = {
       ssrSize: "large",
-      mediaSpec: wonder_blocks_layout_["MEDIA_MODAL_SPEC"]
+      mediaSpec: _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MEDIA_MODAL_SPEC"]
     };
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayoutContext"].Provider, {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayoutContext"].Provider, {
       value: contextValue
-    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayout"], {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayout"], {
       styleSheets: styleSheets
     }, ({
       styles
-    }) => /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+    }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
       style: [styles.wrapper, style]
-    }, below && /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+    }, below && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
       style: styles.below
-    }, below), /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+    }, below), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
       role: role,
       "aria-modal": "true",
       "aria-labelledby": ariaLabelledBy,
       style: styles.dialog,
       testId: testId
-    }, children), above && /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+    }, children), above && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
       style: styles.above
     }, above))));
   }
 
 }
-modal_dialog_ModalDialog.defaultProps = {
+ModalDialog.defaultProps = {
   role: "dialog"
 };
 const styleSheets = {
-  all: external_aphrodite_["StyleSheet"].create({
+  all: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     wrapper: {
       display: "flex",
       flexDirection: "row",
@@ -300,18 +450,38 @@ const styleSheets = {
       zIndex: -1
     }
   }),
-  small: external_aphrodite_["StyleSheet"].create({
+  small: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     wrapper: {
-      padding: wonder_blocks_spacing_default.a.medium_16,
+      padding: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
       flexDirection: "column"
     }
   })
 };
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
-var wonder_blocks_color_ = __webpack_require__(4);
-var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-footer.js
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalPanel; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _modal_content_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
+/* harmony import */ var _modal_header_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
+/* harmony import */ var _modal_footer_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
+/* harmony import */ var _close_button_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(22);
+
+
+
+
 
 
 
@@ -319,52 +489,153 @@ var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_bloc
 
 
 /**
- * Modal footer included after the content.
+ * ModalPanel is  the content container.
  *
- * **Implementation notes**:
+ * **Implementation notes:**
  *
  * If you are creating a custom Dialog, make sure to follow these guidelines:
- * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the `footer` prop.
- * - The footer is completely flexible. Meaning the developer needs to add its own custom layout to match design specs.
+ * - Make sure to add this component inside the [ModalDialog](/#modaldialog).
+ * - If needed, you can also add a [ModalHeader](/#modalheader) using the
+ *   `header` prop. Same goes for [ModalFooter](/#modalfooter).
+ * - If you need to create e2e tests, make sure to pass a `testId` prop. This
+ *   will be passed down to this component using a sufix: e.g.
+ *   `some-random-id-ModalPanel`. This scope will be propagated to the
+ *   CloseButton element as well: e.g. `some-random-id-CloseButton`.
+ *
+ * ```js
+ * <ModalDialog>
+ *      <ModalPanel content={"custom content goes here"} />
+ * </ModalDialog>
+ * ```
  */
-class modal_footer_ModalFooter extends external_react_["Component"] {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+class ModalPanel extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  renderMainContent() {
+    const {
+      content,
+      footer,
+      scrollOverflow
+    } = this.props;
+    const mainContent = _modal_content_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].isClassOf(content) ? content : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_content_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], null, content);
+
+    if (!mainContent) {
+      return mainContent;
+    }
+
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](mainContent, {
+      // Pass the scrollOverflow and header in to the main content
+      scrollOverflow,
+      // We override the styling of the main content to help position
+      // it if there is a footer or close button being
+      // shown. We have to do this here as the ModalContent doesn't
+      // know about things being positioned around it.
+      style: [!!footer && styles.hasFooter, mainContent.props.style]
+    });
   }
 
   render() {
     const {
-      children
+      closeButtonVisible,
+      footer,
+      header,
+      light,
+      onClose,
+      style,
+      testId
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-      style: modal_footer_styles.footer
-    }, children);
+    const mainContent = this.renderMainContent();
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: [styles.wrapper, !light && styles.dark, style],
+      testId: testId && `${testId}-panel`
+    }, closeButtonVisible && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_close_button_js__WEBPACK_IMPORTED_MODULE_8__[/* default */ "a"], {
+      light: !light,
+      onClick: onClose,
+      style: styles.closeButton,
+      testId: testId && `${testId}-close`
+    }), header, mainContent, !footer || _modal_footer_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"].isClassOf(footer) ? footer : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_footer_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"], null, footer));
   }
 
 }
-modal_footer_ModalFooter.__IS_MODAL_FOOTER__ = true;
-const modal_footer_styles = external_aphrodite_["StyleSheet"].create({
-  footer: {
-    flex: "0 0 auto",
-    boxSizing: "border-box",
-    minHeight: wonder_blocks_spacing_default.a.xxxLarge_64,
-    paddingLeft: wonder_blocks_spacing_default.a.medium_16,
-    paddingRight: wonder_blocks_spacing_default.a.medium_16,
-    paddingTop: wonder_blocks_spacing_default.a.xSmall_8,
-    paddingBottom: wonder_blocks_spacing_default.a.xSmall_8,
+ModalPanel.defaultProps = {
+  closeButtonVisible: true,
+  scrollOverflow: true,
+  light: true
+};
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  wrapper: {
+    flex: "1 1 auto",
+    position: "relative",
     display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    boxShadow: `0px -1px 0px ${wonder_blocks_color_default.a.offBlack16}`
+    flexDirection: "column",
+    background: "white",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    height: "100%",
+    width: "100%"
+  },
+  closeButton: {
+    position: "absolute",
+    right: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
+    top: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
+    // This is to allow the button to be tab-ordered before the modal
+    // content but still be above the header and content.
+    zIndex: 1
+  },
+  dark: {
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.darkBlue,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white
+  },
+  hasFooter: {
+    paddingBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xLarge_32
   }
 });
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
-var wonder_blocks_typography_ = __webpack_require__(7);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-header.js
 
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalLauncherPortalAttributeName; });
+/**
+ * The attribute used to identify a modal launcher portal.
+ */
+const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
+
+
+/***/ }),
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+const defaultContext = {
+  closeModal: undefined
+};
+/* harmony default export */ __webpack_exports__["a"] = (/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](defaultContext));
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-typography");
+
+/***/ }),
+/* 14 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalContent; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
 
 
 
@@ -372,132 +643,441 @@ var wonder_blocks_typography_ = __webpack_require__(7);
 
 
 /**
- * This is a helper component that is never rendered by itself. It is always
- * pinned to the top of the dialog, is responsive using the same behavior as its
- * parent dialog, and has the following properties:
- * - title
- * - breadcrumb OR subtitle, but not both.
- *
- * **Accessibility notes:**
- *
- * - By default (e.g. using [OnePaneDialog](/#onepanedialog)), `titleId` is
- *   populated automatically by the parent container.
- * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the
- *   ModalHeader doesn’t have to have the `titleId` prop however this is
- *   recommended. It should match the `aria-labelledby` prop of the
- *   [ModalDialog](/#modaldialog) component. If you want to see an example of
- *   how to generate this ID, check [IDProvider](/#idprovider).
- *
- * **Implementation notes:**
- *
- * If you are creating a custom Dialog, make sure to follow these guidelines:
- * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the
- *   `header` prop.
- * - Add a title (required).
- * - Optionally add a subtitle or breadcrumbs.
- * - We encourage you to add `titleId` (see Accessibility notes).
- * - If the `ModalPanel` has a dark background, make sure to set `light` to
- *   `false`.
- * - If you need to create e2e tests, make sure to pass a `testId` prop and
- *   add a sufix to scope the testId to this component: e.g.
- *   `some-random-id-ModalHeader`. This scope will also be passed to the title
- *   and subtitle elements: e.g. `some-random-id-ModalHeader-title`.
+ * The Modal content included after the header
+ */
+class ModalContent extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+  }
+
+  render() {
+    const {
+      scrollOverflow,
+      style,
+      children
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["MediaLayout"], {
+      styleSheets: styleSheets
+    }, ({
+      styles
+    }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+      style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+      style: [styles.content, style]
+    }, children)));
+  }
+
+}
+ModalContent.defaultProps = {
+  scrollOverflow: true
+};
+ModalContent.__IS_MODAL_CONTENT__ = true;
+const styleSheets = {
+  all: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    wrapper: {
+      flex: 1,
+      // This helps to ensure that the paddingBottom is preserved when
+      // the contents start to overflow, this goes away on display: flex
+      display: "block"
+    },
+    scrollOverflow: {
+      overflow: "auto"
+    },
+    content: {
+      flex: 1,
+      minHeight: "100%",
+      padding: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xLarge_32,
+      boxSizing: "border-box"
+    }
+  }),
+  small: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    content: {
+      padding: `${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xLarge_32}px ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16}px`
+    }
+  })
+};
+
+/***/ }),
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalLauncher; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _focus_trap_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(18);
+/* harmony import */ var _modal_backdrop_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
+/* harmony import */ var _scroll_disabler_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(21);
+/* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(12);
+
+
+
+
+
+
+
+
+/**
+ * This component enables you to launch a modal, covering the screen.
  *
- * Example:
+ * Children have access to `openModal` function via the function-as-children
+ * pattern, so one common use case is for this component to wrap a button:
  *
  * ```js
- * <ModalHeader
- *      title="Sidebar using ModalHeader"
- *      subtitle="subtitle"
- *      titleId="uniqueTitleId"
- *      light={false}
- *  />
+ * <ModalLauncher modal={<TwoColumnModal ... />}>
+ *     {({openModal}) => <button onClick={openModal}>Learn more</button>}
+ * </ModalLauncher>
  * ```
+ *
+ * The actual modal itself is constructed separately, using a layout component
+ * like OnePaneDialog and is provided via
+ * the `modal` prop.
  */
-class modal_header_ModalHeader extends external_react_["Component"] {
+class ModalLauncher extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      opened: false
+    };
+
+    this._saveLastElementFocused = () => {
+      // keep a reference of the element that triggers the modal
+      this.lastElementFocusedOutsideModal = document.activeElement;
+    };
+
+    this._openModal = () => {
+      this._saveLastElementFocused();
+
+      this.setState({
+        opened: true
+      });
+    };
+
+    this.handleCloseModal = () => {
+      this.setState({
+        opened: false
+      }, () => {
+        this.props.onClose && this.props.onClose();
+
+        if (this.lastElementFocusedOutsideModal != null) {
+          // return focus to the element that triggered the modal
+          this.lastElementFocusedOutsideModal.focus();
+        }
+      });
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (typeof props.opened === "boolean" && props.children) {
+      // eslint-disable-next-line no-console
+      console.warn("'children' and 'opened' can't be used together");
+    }
+
+    if (typeof props.opened === "boolean" && !props.onClose) {
+      // eslint-disable-next-line no-console
+      console.warn("'onClose' should be used with 'opened'");
+    }
+
+    if (typeof props.opened !== "boolean" && !props.children) {
+      // eslint-disable-next-line no-console
+      console.warn("either 'children' or 'opened' must be set");
+    }
+
+    return {
+      opened: typeof props.opened === "boolean" ? props.opened : state.opened
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    // ensures the element is stored only when the modal is opened
+    if (!prevProps.opened && this.props.opened) {
+      this._saveLastElementFocused();
+    }
+  }
+
+  _renderModal() {
+    if (typeof this.props.modal === "function") {
+      return this.props.modal({
+        closeModal: this.handleCloseModal
+      });
+    } else {
+      return this.props.modal;
+    }
+  }
+
+  render() {
+    const renderedChildren = this.props.children ? this.props.children({
+      openModal: this._openModal
+    }) : null;
+    const {
+      body
+    } = document;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      /*#__PURE__*/
+      // This flow check is valid, it's the babel plugin which is broken,
+      // see modal-context.js for details.
+      // $FlowFixMe
+      react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_context_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"].Provider, {
+        value: {
+          closeModal: this.handleCloseModal
+        }
+      }, renderedChildren, this.state.opened && /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1__["createPortal"](
+      /*#__PURE__*/
+
+      /* We need the container View that FocusTrap creates to be at the
+         correct z-index so that it'll be above the global nav in webapp. */
+      react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_focus_trap_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
+        style: styles.container
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_backdrop_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], {
+        initialFocusId: this.props.initialFocusId,
+        testId: this.props.testId,
+        onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
+      }, this._renderModal())), body), this.state.opened && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ModalLauncherKeypressListener, {
+        onClose: this.handleCloseModal
+      }), this.state.opened && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_scroll_disabler_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], null))
+    );
+  }
+
+}
+/** A component that, when mounted, calls `onClose` when Escape is pressed. */
+
+ModalLauncher.defaultProps = {
+  backdropDismissEnabled: true
+};
+
+class ModalLauncherKeypressListener extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
+
+    this._handleKeyup = e => {
+      // We check the key as that's keyboard layout agnostic and also avoids
+      // the minefield of deprecated number type properties like keyCode and
+      // which, with the replacement code, which uses a string instead.
+      if (e.key === "Escape") {
+        // Stop the event going any further.
+        // For cancellation events, like the Escape key, we generally should
+        // air on the side of caution and only allow it to cancel one thing.
+        // So, it's polite for us to stop propagation of the event.
+        // Otherwise, we end up with UX where one Escape key press
+        // unexpectedly cancels multiple things.
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onClose();
+      }
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener("keyup", this._handleKeyup);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this._handleKeyup);
+  }
+
   render() {
+    return null;
+  }
+
+}
+
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
+  container: {
+    // This z-index is copied from the Khan Academy webapp.
+    //
+    // TODO(mdr): Should we keep this in a constants file somewhere? Or
+    //     not hardcode it at all, and provide it to Wonder Blocks via
+    //     configuration?
+    zIndex: 1080
+  }
+});
+
+/***/ }),
+/* 16 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return OnePaneDialog; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _modal_dialog_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
+/* harmony import */ var _modal_panel_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
+/* harmony import */ var _modal_header_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
+
+
+
+
+
+
+
+
+/**
+ * This is the standard layout for most straightforward modal experiences.
+ *
+ * The ModalHeader is required, but the ModalFooter is optional.
+ * The content of the dialog itself is fully customizable, but the left/right/top/bottom padding is fixed.
+ */
+class OnePaneDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  renderHeader(uniqueId) {
     const {
+      title,
       breadcrumbs = undefined,
-      light,
       subtitle = undefined,
-      testId,
-      title,
-      titleId
+      testId
     } = this.props;
 
-    if (subtitle && breadcrumbs) {
-      throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
+    if (breadcrumbs) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_header_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], {
+        title: title,
+        breadcrumbs: breadcrumbs,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
+      });
+    } else if (subtitle) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_header_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], {
+        title: title,
+        subtitle: subtitle,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
+      });
+    } else {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_header_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], {
+        title: title,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
+      });
     }
+  }
 
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayout"], {
-      styleSheets: modal_header_styleSheets
+  render() {
+    const {
+      onClose,
+      footer,
+      content,
+      above,
+      below,
+      style,
+      closeButtonVisible,
+      testId,
+      titleId,
+      role
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayout"], {
+      styleSheets: styleSheets
     }, ({
       styles
-    }) => /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-      style: [styles.header, !light && styles.dark],
-      testId: testId
-    }, breadcrumbs && /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-      style: styles.breadcrumbs
-    }, breadcrumbs), /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["HeadingMedium"], {
-      style: styles.title,
+    }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["IDProvider"], {
       id: titleId,
-      testId: testId && `${testId}-title`
-    }, title), subtitle && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-      style: light && styles.subtitle,
-      testId: testId && `${testId}-subtitle`
-    }, subtitle)));
+      scope: "modal"
+    }, uniqueId => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_dialog_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], {
+      style: [styles.dialog, style],
+      above: above,
+      below: below,
+      testId: testId,
+      "aria-labelledby": uniqueId,
+      role: role
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_panel_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], {
+      onClose: onClose,
+      header: this.renderHeader(uniqueId),
+      content: content,
+      footer: footer,
+      closeButtonVisible: closeButtonVisible,
+      testId: testId
+    }))));
   }
 
 }
-modal_header_ModalHeader.defaultProps = {
-  light: true
+OnePaneDialog.defaultProps = {
+  closeButtonVisible: true
 };
-const modal_header_styleSheets = {
-  all: external_aphrodite_["StyleSheet"].create({
-    header: {
-      boxShadow: `0px 1px 0px ${wonder_blocks_color_default.a.offBlack16}`,
-      display: "flex",
-      flexDirection: "column",
-      minHeight: 66,
-      padding: `${wonder_blocks_spacing_default.a.large_24}px ${wonder_blocks_spacing_default.a.xLarge_32}px`,
-      position: "relative",
-      width: "100%"
-    },
-    dark: {
-      background: wonder_blocks_color_default.a.darkBlue,
-      color: wonder_blocks_color_default.a.white
-    },
-    breadcrumbs: {
-      color: wonder_blocks_color_default.a.offBlack64,
-      marginBottom: wonder_blocks_spacing_default.a.xSmall_8
-    },
-    title: {
-      // Prevent title from overlapping the close button
-      paddingRight: wonder_blocks_spacing_default.a.medium_16
-    },
-    subtitle: {
-      color: wonder_blocks_color_default.a.offBlack64,
-      marginTop: wonder_blocks_spacing_default.a.xSmall_8
+const styleSheets = {
+  small: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    dialog: {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
     }
   }),
-  small: external_aphrodite_["StyleSheet"].create({
-    header: {
-      paddingLeft: wonder_blocks_spacing_default.a.medium_16,
-      paddingRight: wonder_blocks_spacing_default.a.medium_16
-    },
-    title: {
-      paddingRight: wonder_blocks_spacing_default.a.xLarge_32
+  mdOrLarger: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    dialog: {
+      width: "93.75%",
+      maxWidth: 576,
+      height: "81.25%",
+      maxHeight: 624
     }
   })
 };
-// EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(6);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/focus-trap.js
+/***/ }),
+/* 17 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return maybeGetPortalMountedModalHostElement; });
+/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
+
+/**
+ * From a given element, finds its next ancestor that is a modal launcher portal
+ * element.
+ * @param {?(Element | Text)} element The element whose ancestors are to be
+ * walked.
+ * @returns {?Element} The nearest parent modal launcher portal.
+ */
+
+function maybeGetNextAncestorModalLauncherPortal(element) {
+  let candidateElement = element && element.parentElement;
+
+  while (candidateElement && !candidateElement.hasAttribute(_constants_js__WEBPACK_IMPORTED_MODULE_0__[/* ModalLauncherPortalAttributeName */ "a"])) {
+    candidateElement = candidateElement.parentElement;
+  }
+
+  return candidateElement;
+}
+/**
+ * From a given element, finds the next modal host that has been mounted in
+ * a modal portal.
+ * @param {?(Element | Text)} element The element whose ancestors are to be
+ * walked.
+ * @returns {?Element} The next portal-mounted modal host element.
+ * TODO(kevinb): look into getting rid of this
+ */
+
+
+function maybeGetPortalMountedModalHostElement(element) {
+  return maybeGetNextAncestorModalLauncherPortal(element);
+}
+
+/***/ }),
+/* 18 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FocusTrap; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
 
 
 
-class focus_trap_FocusTrap extends external_react_["Component"] {
+class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   /** The most recent node _inside this component_ to receive focus. */
 
   /**
@@ -517,7 +1097,7 @@ class focus_trap_FocusTrap extends external_react_["Component"] {
         return;
       }
 
-      const modalRoot = external_react_dom_["findDOMNode"](node);
+      const modalRoot = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](node);
 
       if (!modalRoot) {
         throw new Error("Assertion error: modal root should exist after mount");
@@ -646,15 +1226,15 @@ class focus_trap_FocusTrap extends external_react_["Component"] {
     const {
       style
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"]("div", {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
       tabIndex: "0",
       style: {
         position: "fixed"
       }
-    }), /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
       style: style,
       ref: this.getModalRoot
-    }, this.props.children), /*#__PURE__*/external_react_["createElement"]("div", {
+    }, this.props.children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
       tabIndex: "0",
       style: {
         position: "fixed"
@@ -663,17 +1243,27 @@ class focus_trap_FocusTrap extends external_react_["Component"] {
   }
 
 }
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
-var helpers_extends = __webpack_require__(8);
-var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/util/constants.js
-/**
- * The attribute used to identify a modal launcher portal.
- */
-const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
+/***/ }),
+/* 19 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalBackdrop; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
+/* harmony import */ var _util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(20);
+function _extends() { _extends = Object.assign || 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); }
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-backdrop.js
 
 
 
@@ -682,11 +1272,6 @@ const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
 
 
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
 /**
  * A private component used by ModalLauncher. This is the fixed-position
  * container element that gets mounted outside the DOM. It overlays the modal
@@ -697,22 +1282,29 @@ const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:no
  * and adding an `onClose` prop that will call `onCloseModal`. If an
  * `onClose` prop is already provided, the two are merged.
  */
-
-class modal_backdrop_ModalBackdrop extends external_react_["Component"] {
+class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(...args) {
     super(...args);
+    this._mousePressedOutside = false;
+
+    this.handleMouseDown = e => {
+      // Confirm that it is the backdrop that is being clicked, not the child
+      this._mousePressedOutside = e.target === e.currentTarget;
+    };
 
-    this.handleClick = e => {
-      // Was the lowest-level click target (`e.target`) the positioner element
-      // (`e.currentTarget`)?
-      if (e.target === e.currentTarget) {
+    this.handleMouseUp = e => {
+      // Confirm that it is the backdrop that is being clicked, not the child
+      // and that the mouse was pressed in the backdrop first.
+      if (e.target === e.currentTarget && this._mousePressedOutside) {
         this.props.onCloseModal();
       }
+
+      this._mousePressedOutside = false;
     };
   }
 
   componentDidMount() {
-    const node = external_react_dom_["findDOMNode"](this);
+    const node = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](this);
 
     if (!node) {
       return;
@@ -728,11 +1320,10 @@ class modal_backdrop_ModalBackdrop extends external_react_["Component"] {
       firstFocusableElement.focus();
     }, 0);
   }
+
   /**
    * Returns an element specified by the user
    */
-
-
   _getInitialFocusElement(node) {
     const {
       initialFocusId
@@ -742,7 +1333,7 @@ class modal_backdrop_ModalBackdrop extends external_react_["Component"] {
       return null;
     }
 
-    return external_react_dom_["findDOMNode"](node.querySelector(`#${initialFocusId}`));
+    return react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](node.querySelector(`#${initialFocusId}`));
   }
   /**
    * Returns the first focusable element found inside the Dialog
@@ -751,7 +1342,7 @@ class modal_backdrop_ModalBackdrop extends external_react_["Component"] {
 
   _getFirstFocusableElement(node) {
     // get a collection of elements that can be focused
-    const focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+    const focusableElements = Object(_util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__[/* findFocusableNodes */ "a"])(node);
 
     if (!focusableElements) {
       return null;
@@ -768,7 +1359,7 @@ class modal_backdrop_ModalBackdrop extends external_react_["Component"] {
   _getDialogElement(node) {
     // If no focusable elements are found,
     // the dialog content element itself will receive focus.
-    const dialogElement = external_react_dom_["findDOMNode"](node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
+    const dialogElement = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
 
     dialogElement.tabIndex = -1;
     return dialogElement;
@@ -786,17 +1377,18 @@ class modal_backdrop_ModalBackdrop extends external_react_["Component"] {
       testId
     } = this.props;
     const backdropProps = {
-      [ModalLauncherPortalAttributeName]: true
+      [_util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* ModalLauncherPortalAttributeName */ "a"]]: true
     };
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], extends_default()({
-      style: modal_backdrop_styles.modalPositioner,
-      onClick: this.handleClick,
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], _extends({
+      style: styles.modalPositioner,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
   }
 
 }
-const modal_backdrop_styles = external_aphrodite_["StyleSheet"].create({
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
   modalPositioner: {
     position: "fixed",
     left: 0,
@@ -814,10 +1406,32 @@ const modal_backdrop_styles = external_aphrodite_["StyleSheet"].create({
     //     turns out to be necessary. That sounds hard to do; punting for
     //     now!
     overflow: "auto",
-    background: wonder_blocks_color_default.a.offBlack64
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
   }
 });
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/scroll-disabler.js
+
+/***/ }),
+/* 20 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return findFocusableNodes; });
+/**
+ * List of elements that can be focused
+ * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
+ */
+const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+function findFocusableNodes(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
+}
+
+/***/ }),
+/* 21 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /**
  * A UI-less component that lets `ModalLauncher` disable page scroll.
  *
@@ -839,9 +1453,9 @@ const needsHackyMobileSafariScrollDisabler = (() => {
   return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
 })();
 
-class scroll_disabler_ScrollDisabler extends external_react_["Component"] {
+class ScrollDisabler extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   componentDidMount() {
-    if (scroll_disabler_ScrollDisabler.numModalsOpened === 0) {
+    if (ScrollDisabler.numModalsOpened === 0) {
       const body = document.body;
 
       if (!body) {
@@ -850,14 +1464,14 @@ class scroll_disabler_ScrollDisabler extends external_react_["Component"] {
       // opened.
 
 
-      scroll_disabler_ScrollDisabler.oldOverflow = body.style.overflow;
-      scroll_disabler_ScrollDisabler.oldScrollY = window.scrollY; // We need to grab all of the original style properties before we
+      ScrollDisabler.oldOverflow = body.style.overflow;
+      ScrollDisabler.oldScrollY = window.scrollY; // We need to grab all of the original style properties before we
       // modified any of them.
 
       if (needsHackyMobileSafariScrollDisabler) {
-        scroll_disabler_ScrollDisabler.oldPosition = body.style.position;
-        scroll_disabler_ScrollDisabler.oldWidth = body.style.width;
-        scroll_disabler_ScrollDisabler.oldTop = body.style.top;
+        ScrollDisabler.oldPosition = body.style.position;
+        ScrollDisabler.oldWidth = body.style.width;
+        ScrollDisabler.oldTop = body.style.top;
       }
 
       body.style.overflow = "hidden"; // On mobile Safari, overflow: hidden is not enough, position:
@@ -867,17 +1481,17 @@ class scroll_disabler_ScrollDisabler extends external_react_["Component"] {
       if (needsHackyMobileSafariScrollDisabler) {
         body.style.position = "fixed";
         body.style.width = "100%";
-        body.style.top = `${-scroll_disabler_ScrollDisabler.oldScrollY}px`;
+        body.style.top = `${-ScrollDisabler.oldScrollY}px`;
       }
     }
 
-    scroll_disabler_ScrollDisabler.numModalsOpened++;
+    ScrollDisabler.numModalsOpened++;
   }
 
   componentWillUnmount() {
-    scroll_disabler_ScrollDisabler.numModalsOpened--;
+    ScrollDisabler.numModalsOpened--;
 
-    if (scroll_disabler_ScrollDisabler.numModalsOpened === 0) {
+    if (ScrollDisabler.numModalsOpened === 0) {
       const body = document.body;
 
       if (!body) {
@@ -885,296 +1499,47 @@ class scroll_disabler_ScrollDisabler extends external_react_["Component"] {
       } // Reset all values on the closing of the final modal.
 
 
-      body.style.overflow = scroll_disabler_ScrollDisabler.oldOverflow;
+      body.style.overflow = ScrollDisabler.oldOverflow;
 
       if (needsHackyMobileSafariScrollDisabler) {
-        body.style.position = scroll_disabler_ScrollDisabler.oldPosition;
-        body.style.width = scroll_disabler_ScrollDisabler.oldWidth;
-        body.style.top = scroll_disabler_ScrollDisabler.oldTop;
-      }
-
-      if (typeof window !== "undefined" && window.scrollTo) {
-        window.scrollTo(0, scroll_disabler_ScrollDisabler.oldScrollY);
-      }
-    }
-  }
-
-  render() {
-    return null;
-  }
-
-}
-
-scroll_disabler_ScrollDisabler.numModalsOpened = 0;
-/* harmony default export */ var scroll_disabler = (scroll_disabler_ScrollDisabler);
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-context.js
-
-const defaultContext = {
-  closeModal: undefined
-};
-/* harmony default export */ var modal_context = (/*#__PURE__*/external_react_["createContext"](defaultContext));
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-launcher.js
-
-
-
-
-
-
-
-
-/**
- * This component enables you to launch a modal, covering the screen.
- *
- * Children have access to `openModal` function via the function-as-children
- * pattern, so one common use case is for this component to wrap a button:
- *
- * ```js
- * <ModalLauncher modal={<TwoColumnModal ... />}>
- *     {({openModal}) => <button onClick={openModal}>Learn more</button>}
- * </ModalLauncher>
- * ```
- *
- * The actual modal itself is constructed separately, using a layout component
- * like OnePaneDialog and is provided via
- * the `modal` prop.
- */
-class modal_launcher_ModalLauncher extends external_react_["Component"] {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      opened: false
-    };
-
-    this._saveLastElementFocused = () => {
-      // keep a reference of the element that triggers the modal
-      this.lastElementFocusedOutsideModal = document.activeElement;
-    };
-
-    this._openModal = () => {
-      this._saveLastElementFocused();
-
-      this.setState({
-        opened: true
-      });
-    };
-
-    this.handleCloseModal = () => {
-      this.setState({
-        opened: false
-      }, () => {
-        this.props.onClose && this.props.onClose();
-
-        if (this.lastElementFocusedOutsideModal != null) {
-          // return focus to the element that triggered the modal
-          this.lastElementFocusedOutsideModal.focus();
-        }
-      });
-    };
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (typeof props.opened === "boolean" && props.children) {
-      // eslint-disable-next-line no-console
-      console.warn("'children' and 'opened' can't be used together");
-    }
-
-    if (typeof props.opened === "boolean" && !props.onClose) {
-      // eslint-disable-next-line no-console
-      console.warn("'onClose' should be used with 'opened'");
-    }
-
-    if (typeof props.opened !== "boolean" && !props.children) {
-      // eslint-disable-next-line no-console
-      console.warn("either 'children' or 'opened' must be set");
-    }
-
-    return {
-      opened: typeof props.opened === "boolean" ? props.opened : state.opened
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    // ensures the element is stored only when the modal is opened
-    if (!prevProps.opened && this.props.opened) {
-      this._saveLastElementFocused();
-    }
-  }
-
-  _renderModal() {
-    if (typeof this.props.modal === "function") {
-      return this.props.modal({
-        closeModal: this.handleCloseModal
-      });
-    } else {
-      return this.props.modal;
-    }
-  }
-
-  render() {
-    const renderedChildren = this.props.children ? this.props.children({
-      openModal: this._openModal
-    }) : null;
-    const {
-      body
-    } = document;
-
-    if (!body) {
-      return null;
-    }
-
-    return (
-      /*#__PURE__*/
-      // This flow check is valid, it's the babel plugin which is broken,
-      // see modal-context.js for details.
-      // $FlowFixMe
-      external_react_["createElement"](modal_context.Provider, {
-        value: {
-          closeModal: this.handleCloseModal
-        }
-      }, renderedChildren, this.state.opened && /*#__PURE__*/external_react_dom_["createPortal"](
-      /*#__PURE__*/
-
-      /* We need the container View that FocusTrap creates to be at the
-         correct z-index so that it'll be above the global nav in webapp. */
-      external_react_["createElement"](focus_trap_FocusTrap, {
-        style: modal_launcher_styles.container
-      }, /*#__PURE__*/external_react_["createElement"](modal_backdrop_ModalBackdrop, {
-        initialFocusId: this.props.initialFocusId,
-        testId: this.props.testId,
-        onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
-      }, this._renderModal())), body), this.state.opened && /*#__PURE__*/external_react_["createElement"](modal_launcher_ModalLauncherKeypressListener, {
-        onClose: this.handleCloseModal
-      }), this.state.opened && /*#__PURE__*/external_react_["createElement"](scroll_disabler, null))
-    );
-  }
-
-}
-/** A component that, when mounted, calls `onClose` when Escape is pressed. */
-
-modal_launcher_ModalLauncher.defaultProps = {
-  backdropDismissEnabled: true
-};
-
-class modal_launcher_ModalLauncherKeypressListener extends external_react_["Component"] {
-  constructor(...args) {
-    super(...args);
-
-    this._handleKeyup = e => {
-      // We check the key as that's keyboard layout agnostic and also avoids
-      // the minefield of deprecated number type properties like keyCode and
-      // which, with the replacement code, which uses a string instead.
-      if (e.key === "Escape") {
-        // Stop the event going any further.
-        // For cancellation events, like the Escape key, we generally should
-        // air on the side of caution and only allow it to cancel one thing.
-        // So, it's polite for us to stop propagation of the event.
-        // Otherwise, we end up with UX where one Escape key press
-        // unexpectedly cancels multiple things.
-        e.preventDefault();
-        e.stopPropagation();
-        this.props.onClose();
+        body.style.position = ScrollDisabler.oldPosition;
+        body.style.width = ScrollDisabler.oldWidth;
+        body.style.top = ScrollDisabler.oldTop;
       }
-    };
-  }
-
-  componentDidMount() {
-    window.addEventListener("keyup", this._handleKeyup);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("keyup", this._handleKeyup);
-  }
-
-  render() {
-    return null;
-  }
-
-}
-
-const modal_launcher_styles = external_aphrodite_["StyleSheet"].create({
-  container: {
-    // This z-index is copied from the Khan Academy webapp.
-    //
-    // TODO(mdr): Should we keep this in a constants file somewhere? Or
-    //     not hardcode it at all, and provide it to Wonder Blocks via
-    //     configuration?
-    zIndex: 1080
-  }
-});
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-content.js
-
-
-
-
-
 
-/**
- * The Modal content included after the header
- */
-class modal_content_ModalContent extends external_react_["Component"] {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+      if (typeof window !== "undefined" && window.scrollTo) {
+        window.scrollTo(0, ScrollDisabler.oldScrollY);
+      }
+    }
   }
 
   render() {
-    const {
-      scrollOverflow,
-      style,
-      children
-    } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayout"], {
-      styleSheets: modal_content_styleSheets
-    }, ({
-      styles
-    }) => /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-      style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
-    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-      style: [styles.content, style]
-    }, children)));
+    return null;
   }
 
 }
-modal_content_ModalContent.defaultProps = {
-  scrollOverflow: true
-};
-modal_content_ModalContent.__IS_MODAL_CONTENT__ = true;
-const modal_content_styleSheets = {
-  all: external_aphrodite_["StyleSheet"].create({
-    wrapper: {
-      flex: 1,
-      // This helps to ensure that the paddingBottom is preserved when
-      // the contents start to overflow, this goes away on display: flex
-      display: "block"
-    },
-    scrollOverflow: {
-      overflow: "auto"
-    },
-    content: {
-      flex: 1,
-      minHeight: "100%",
-      padding: wonder_blocks_spacing_default.a.xLarge_32,
-      boxSizing: "border-box"
-    }
-  }),
-  small: external_aphrodite_["StyleSheet"].create({
-    content: {
-      padding: `${wonder_blocks_spacing_default.a.xLarge_32}px ${wonder_blocks_spacing_default.a.medium_16}px`
-    }
-  })
-};
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
-var wonder_blocks_icon_ = __webpack_require__(9);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon-button"
-var wonder_blocks_icon_button_ = __webpack_require__(10);
-var wonder_blocks_icon_button_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_button_);
+ScrollDisabler.numModalsOpened = 0;
+/* harmony default export */ __webpack_exports__["a"] = (ScrollDisabler);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/close-button.js
+/***/ }),
+/* 22 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CloseButton; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24);
+/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
 
 
 
 
-class close_button_CloseButton extends external_react_["Component"] {
+class CloseButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {
     const {
       light,
@@ -1182,15 +1547,15 @@ class close_button_CloseButton extends external_react_["Component"] {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](modal_context.Consumer, null, ({
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].Consumer, null, ({
       closeModal
     }) => {
       if (closeModal && onClick) {
         throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
       }
 
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_button_default.a, {
-        icon: wonder_blocks_icon_["icons"].dismiss // TODO(mdr): Translate this string for i18n.
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2___default.a, {
+        icon: _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__["icons"].dismiss // TODO(mdr): Translate this string for i18n.
         // TODO(kevinb): provide a way to set this label
         ,
         "aria-label": "Close modal",
@@ -1204,255 +1569,46 @@ class close_button_CloseButton extends external_react_["Component"] {
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-panel.js
-
-
-
-
-
-
-
-
-
-
-/**
- * ModalPanel is  the content container.
- *
- * **Implementation notes:**
- *
- * If you are creating a custom Dialog, make sure to follow these guidelines:
- * - Make sure to add this component inside the [ModalDialog](/#modaldialog).
- * - If needed, you can also add a [ModalHeader](/#modalheader) using the
- *   `header` prop. Same goes for [ModalFooter](/#modalfooter).
- * - If you need to create e2e tests, make sure to pass a `testId` prop. This
- *   will be passed down to this component using a sufix: e.g.
- *   `some-random-id-ModalPanel`. This scope will be propagated to the
- *   CloseButton element as well: e.g. `some-random-id-CloseButton`.
- *
- * ```js
- * <ModalDialog>
- *      <ModalPanel content={"custom content goes here"} />
- * </ModalDialog>
- * ```
- */
-class modal_panel_ModalPanel extends external_react_["Component"] {
-  renderMainContent() {
-    const {
-      content,
-      footer,
-      scrollOverflow
-    } = this.props;
-    const mainContent = modal_content_ModalContent.isClassOf(content) ? content : /*#__PURE__*/external_react_["createElement"](modal_content_ModalContent, null, content);
-
-    if (!mainContent) {
-      return mainContent;
-    }
-
-    return /*#__PURE__*/external_react_["cloneElement"](mainContent, {
-      // Pass the scrollOverflow and header in to the main content
-      scrollOverflow,
-      // We override the styling of the main content to help position
-      // it if there is a footer or close button being
-      // shown. We have to do this here as the ModalContent doesn't
-      // know about things being positioned around it.
-      style: [!!footer && modal_panel_styles.hasFooter, mainContent.props.style]
-    });
-  }
-
-  render() {
-    const {
-      closeButtonVisible,
-      footer,
-      header,
-      light,
-      onClose,
-      style,
-      testId
-    } = this.props;
-    const mainContent = this.renderMainContent();
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-      style: [modal_panel_styles.wrapper, !light && modal_panel_styles.dark, style],
-      testId: testId && `${testId}-panel`
-    }, closeButtonVisible && /*#__PURE__*/external_react_["createElement"](close_button_CloseButton, {
-      light: !light,
-      onClick: onClose,
-      style: modal_panel_styles.closeButton,
-      testId: testId && `${testId}-close`
-    }), header, mainContent, !footer || modal_footer_ModalFooter.isClassOf(footer) ? footer : /*#__PURE__*/external_react_["createElement"](modal_footer_ModalFooter, null, footer));
-  }
-
-}
-modal_panel_ModalPanel.defaultProps = {
-  closeButtonVisible: true,
-  scrollOverflow: true,
-  light: true
-};
-const modal_panel_styles = external_aphrodite_["StyleSheet"].create({
-  wrapper: {
-    flex: "1 1 auto",
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    background: "white",
-    boxSizing: "border-box",
-    overflow: "hidden",
-    height: "100%",
-    width: "100%"
-  },
-  closeButton: {
-    position: "absolute",
-    right: wonder_blocks_spacing_default.a.medium_16,
-    top: wonder_blocks_spacing_default.a.medium_16,
-    // This is to allow the button to be tab-ordered before the modal
-    // content but still be above the header and content.
-    zIndex: 1
-  },
-  dark: {
-    background: wonder_blocks_color_default.a.darkBlue,
-    color: wonder_blocks_color_default.a.white
-  },
-  hasFooter: {
-    paddingBottom: wonder_blocks_spacing_default.a.xLarge_32
-  }
-});
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/one-pane-dialog.js
-
-
-
-
 
+/***/ }),
+/* 23 */
+/***/ (function(module, exports) {
 
+module.exports = require("@khanacademy/wonder-blocks-icon");
 
+/***/ }),
+/* 24 */
+/***/ (function(module, exports) {
 
-/**
- * This is the standard layout for most straightforward modal experiences.
- *
- * The ModalHeader is required, but the ModalFooter is optional.
- * The content of the dialog itself is fully customizable, but the left/right/top/bottom padding is fixed.
- */
-class one_pane_dialog_OnePaneDialog extends external_react_["Component"] {
-  renderHeader(uniqueId) {
-    const {
-      title,
-      breadcrumbs = undefined,
-      subtitle = undefined,
-      testId
-    } = this.props;
+module.exports = require("@khanacademy/wonder-blocks-icon-button");
 
-    if (breadcrumbs) {
-      return /*#__PURE__*/external_react_["createElement"](modal_header_ModalHeader, {
-        title: title,
-        breadcrumbs: breadcrumbs,
-        titleId: uniqueId,
-        testId: testId && `${testId}-header`
-      });
-    } else if (subtitle) {
-      return /*#__PURE__*/external_react_["createElement"](modal_header_ModalHeader, {
-        title: title,
-        subtitle: subtitle,
-        titleId: uniqueId,
-        testId: testId && `${testId}-header`
-      });
-    } else {
-      return /*#__PURE__*/external_react_["createElement"](modal_header_ModalHeader, {
-        title: title,
-        titleId: uniqueId,
-        testId: testId && `${testId}-header`
-      });
-    }
-  }
+/***/ }),
+/* 25 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  render() {
-    const {
-      onClose,
-      footer,
-      content,
-      above,
-      below,
-      style,
-      closeButtonVisible,
-      testId,
-      titleId,
-      role
-    } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayout"], {
-      styleSheets: one_pane_dialog_styleSheets
-    }, ({
-      styles
-    }) => /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["IDProvider"], {
-      id: titleId,
-      scope: "modal"
-    }, uniqueId => /*#__PURE__*/external_react_["createElement"](modal_dialog_ModalDialog, {
-      style: [styles.dialog, style],
-      above: above,
-      below: below,
-      testId: testId,
-      "aria-labelledby": uniqueId,
-      role: role
-    }, /*#__PURE__*/external_react_["createElement"](modal_panel_ModalPanel, {
-      onClose: onClose,
-      header: this.renderHeader(uniqueId),
-      content: content,
-      footer: footer,
-      closeButtonVisible: closeButtonVisible,
-      testId: testId
-    }))));
-  }
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_modal_dialog_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ModalDialog", function() { return _components_modal_dialog_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-}
-one_pane_dialog_OnePaneDialog.defaultProps = {
-  closeButtonVisible: true
-};
-const one_pane_dialog_styleSheets = {
-  small: external_aphrodite_["StyleSheet"].create({
-    dialog: {
-      width: "100%",
-      height: "100%",
-      overflow: "hidden"
-    }
-  }),
-  mdOrLarger: external_aphrodite_["StyleSheet"].create({
-    dialog: {
-      width: "93.75%",
-      maxWidth: 576,
-      height: "81.25%",
-      maxHeight: 624
-    }
-  })
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/util/maybe-get-portal-mounted-modal-host-element.js
+/* harmony import */ var _components_modal_footer_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ModalFooter", function() { return _components_modal_footer_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
-/**
- * From a given element, finds its next ancestor that is a modal launcher portal
- * element.
- * @param {?(Element | Text)} element The element whose ancestors are to be
- * walked.
- * @returns {?Element} The nearest parent modal launcher portal.
- */
+/* harmony import */ var _components_modal_header_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ModalHeader", function() { return _components_modal_header_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
-function maybeGetNextAncestorModalLauncherPortal(element) {
-  let candidateElement = element && element.parentElement;
+/* harmony import */ var _components_modal_launcher_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ModalLauncher", function() { return _components_modal_launcher_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-  while (candidateElement && !candidateElement.hasAttribute(ModalLauncherPortalAttributeName)) {
-    candidateElement = candidateElement.parentElement;
-  }
+/* harmony import */ var _components_modal_panel_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ModalPanel", function() { return _components_modal_panel_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
-  return candidateElement;
-}
-/**
- * From a given element, finds the next modal host that has been mounted in
- * a modal portal.
- * @param {?(Element | Text)} element The element whose ancestors are to be
- * walked.
- * @returns {?Element} The next portal-mounted modal host element.
- * TODO(kevinb): look into getting rid of this
- */
+/* harmony import */ var _components_one_pane_dialog_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "OnePaneDialog", function() { return _components_one_pane_dialog_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
+/* harmony import */ var _util_maybe_get_portal_mounted_modal_host_element_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(17);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "maybeGetPortalMountedModalHostElement", function() { return _util_maybe_get_portal_mounted_modal_host_element_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
-function maybeGetPortalMountedModalHostElement(element) {
-  return maybeGetNextAncestorModalLauncherPortal(element);
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/index.js