@khanacademy/wonder-blocks-modal 2.1.41 → 2.1.45

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 10);
+/******/ 	return __webpack_require__(__webpack_require__.s = 25);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -129,80 +129,232 @@ module.exports = require("react-dom");
 
 /***/ }),
 /* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-typography");
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-icon");
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-/***/ }),
-/* 9 */
-/***/ (function(module, exports) {
+"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__);
 
-module.exports = require("@khanacademy/wonder-blocks-icon-button");
 
-/***/ }),
-/* 10 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
 
-// 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);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(2);
+/**
+ * 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;
+
+    if (subtitle && breadcrumbs) {
+      throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
+    }
 
-// 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_);
+    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)));
+  }
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-dialog.js
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+}
+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
+    }
+  })
+};
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+/***/ }),
+/* 8 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+"use strict";
+/* 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__);
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+/**
+ * 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__;
+  }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  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);
+  }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+}
+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}`
+  }
+});
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"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__);
 
 
 
@@ -219,65 +371,48 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * - 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.
  */
-var modal_dialog_ModalDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalDialog, _React$Component);
-
-  var _super = _createSuper(ModalDialog);
-
-  function ModalDialog() {
-    _classCallCheck(this, ModalDialog);
-
-    return _super.apply(this, arguments);
+class ModalDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  render() {
+    const {
+      above,
+      below,
+      role,
+      style,
+      children,
+      testId,
+      "aria-labelledby": ariaLabelledBy
+    } = this.props;
+    const contextValue = {
+      ssrSize: "large",
+      mediaSpec: _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MEDIA_MODAL_SPEC"]
+    };
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayoutContext"].Provider, {
+      value: contextValue
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayout"], {
+      styleSheets: styleSheets
+    }, ({
+      styles
+    }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: [styles.wrapper, style]
+    }, below && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: styles.below
+    }, 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__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: styles.above
+    }, above))));
   }
 
-  _createClass(ModalDialog, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          above = _this$props.above,
-          below = _this$props.below,
-          role = _this$props.role,
-          style = _this$props.style,
-          children = _this$props.children,
-          testId = _this$props.testId,
-          ariaLabelledBy = _this$props["aria-labelledby"];
-      var contextValue = {
-        ssrSize: "large",
-        mediaSpec: wonder_blocks_layout_["MEDIA_MODAL_SPEC"]
-      };
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayoutContext"].Provider, {
-        value: contextValue
-      }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayout"], {
-        styleSheets: styleSheets
-      }, function (_ref) {
-        var styles = _ref.styles;
-        return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-          style: [styles.wrapper, style]
-        }, below && /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-          style: styles.below
-        }, below), /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-          role: role,
-          "aria-modal": "true",
-          "aria-labelledby": ariaLabelledBy,
-          style: styles.dialog,
-          testId: testId
-        }, children), above && /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-          style: styles.above
-        }, above));
-      }));
-    }
-  }]);
-
-  return ModalDialog;
-}(external_react_["Component"]);
-
-_defineProperty(modal_dialog_ModalDialog, "defaultProps", {
+}
+ModalDialog.defaultProps = {
   role: "dialog"
-});
-
-
-var styleSheets = {
-  all: external_aphrodite_["StyleSheet"].create({
+};
+const styleSheets = {
+  all: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     wrapper: {
       display: "flex",
       flexDirection: "row",
@@ -315,41 +450,37 @@ var 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
-function modal_footer_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { modal_footer_typeof = function _typeof(obj) { return typeof obj; }; } else { modal_footer_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return modal_footer_typeof(obj); }
-
-function modal_footer_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function modal_footer_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function modal_footer_createClass(Constructor, protoProps, staticProps) { if (protoProps) modal_footer_defineProperties(Constructor.prototype, protoProps); if (staticProps) modal_footer_defineProperties(Constructor, staticProps); return Constructor; }
-
-function modal_footer_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) modal_footer_setPrototypeOf(subClass, superClass); }
 
-function modal_footer_setPrototypeOf(o, p) { modal_footer_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return modal_footer_setPrototypeOf(o, p); }
-
-function modal_footer_createSuper(Derived) { var hasNativeReflectConstruct = modal_footer_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = modal_footer_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = modal_footer_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return modal_footer_possibleConstructorReturn(this, result); }; }
-
-function modal_footer_possibleConstructorReturn(self, call) { if (call && (modal_footer_typeof(call) === "object" || typeof call === "function")) { return call; } return modal_footer_assertThisInitialized(self); }
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-function modal_footer_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+"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);
 
-function modal_footer_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
-function modal_footer_getPrototypeOf(o) { modal_footer_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return modal_footer_getPrototypeOf(o); }
 
-function modal_footer_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 
 
@@ -358,90 +489,230 @@ function modal_footer_defineProperty(obj, key, value) { if (key in obj) { Object
 
 
 /**
- * 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>
+ * ```
  */
-var modal_footer_ModalFooter = /*#__PURE__*/function (_React$Component) {
-  modal_footer_inherits(ModalFooter, _React$Component);
+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;
+    }
 
-  var _super = modal_footer_createSuper(ModalFooter);
+    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]
+    });
+  }
 
-  function ModalFooter() {
-    modal_footer_classCallCheck(this, ModalFooter);
+  render() {
+    const {
+      closeButtonVisible,
+      footer,
+      header,
+      light,
+      onClose,
+      style,
+      testId
+    } = this.props;
+    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));
+  }
 
-    return _super.apply(this, arguments);
+}
+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: "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
   }
+});
 
-  modal_footer_createClass(ModalFooter, [{
-    key: "render",
-    value: function render() {
-      var children = this.props.children;
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: modal_footer_styles.footer
-      }, children);
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-    }
-  }]);
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  return ModalFooter;
-}(external_react_["Component"]);
+"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";
 
-modal_footer_defineProperty(modal_footer_ModalFooter, "__IS_MODAL_FOOTER__", true);
 
+/***/ }),
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-var 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,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    boxShadow: "0px -1px 0px ".concat(wonder_blocks_color_default.a.offBlack16)
-  }
-});
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
-var wonder_blocks_typography_ = __webpack_require__(7);
+"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) {
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-header.js
-function modal_header_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { modal_header_typeof = function _typeof(obj) { return typeof obj; }; } else { modal_header_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return modal_header_typeof(obj); }
+module.exports = require("@khanacademy/wonder-blocks-typography");
 
-function modal_header_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+/***/ }),
+/* 14 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-function modal_header_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+"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__);
 
-function modal_header_createClass(Constructor, protoProps, staticProps) { if (protoProps) modal_header_defineProperties(Constructor.prototype, protoProps); if (staticProps) modal_header_defineProperties(Constructor, staticProps); return Constructor; }
 
-function modal_header_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) modal_header_setPrototypeOf(subClass, superClass); }
 
-function modal_header_setPrototypeOf(o, p) { modal_header_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return modal_header_setPrototypeOf(o, p); }
 
-function modal_header_createSuper(Derived) { var hasNativeReflectConstruct = modal_header_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = modal_header_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = modal_header_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return modal_header_possibleConstructorReturn(this, result); }; }
 
-function modal_header_possibleConstructorReturn(self, call) { if (call && (modal_header_typeof(call) === "object" || typeof call === "function")) { return call; } return modal_header_assertThisInitialized(self); }
 
-function modal_header_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+/**
+ * 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__;
+  }
 
-function modal_header_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  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)));
+  }
 
-function modal_header_getPrototypeOf(o) { modal_header_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return modal_header_getPrototypeOf(o); }
+}
+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`
+    }
+  })
+};
 
-function modal_header_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/***/ }),
+/* 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);
 
 
 
@@ -451,180 +722,362 @@ function modal_header_defineProperty(obj, key, value) { if (key in obj) { Object
 
 
 /**
- * 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`.
+ * 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.
  */
-var modal_header_ModalHeader = /*#__PURE__*/function (_React$Component) {
-  modal_header_inherits(ModalHeader, _React$Component);
+class ModalLauncher extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      opened: false
+    };
 
-  var _super = modal_header_createSuper(ModalHeader);
+    this._saveLastElementFocused = () => {
+      // keep a reference of the element that triggers the modal
+      this.lastElementFocusedOutsideModal = document.activeElement;
+    };
 
-  function ModalHeader() {
-    modal_header_classCallCheck(this, ModalHeader);
+    this._openModal = () => {
+      this._saveLastElementFocused();
 
-    return _super.apply(this, arguments);
-  }
+      this.setState({
+        opened: true
+      });
+    };
 
-  modal_header_createClass(ModalHeader, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          _this$props$breadcrum = _this$props.breadcrumbs,
-          breadcrumbs = _this$props$breadcrum === void 0 ? undefined : _this$props$breadcrum,
-          light = _this$props.light,
-          _this$props$subtitle = _this$props.subtitle,
-          subtitle = _this$props$subtitle === void 0 ? undefined : _this$props$subtitle,
-          testId = _this$props.testId,
-          title = _this$props.title,
-          titleId = _this$props.titleId;
-
-      if (subtitle && breadcrumbs) {
-        throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
-      }
+    this.handleCloseModal = () => {
+      this.setState({
+        opened: false
+      }, () => {
+        this.props.onClose && this.props.onClose();
 
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayout"], {
-        styleSheets: modal_header_styleSheets
-      }, function (_ref) {
-        var styles = _ref.styles;
-        return /*#__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,
-          id: titleId,
-          testId: testId && "".concat(testId, "-title")
-        }, title), subtitle && /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelSmall"], {
-          style: light && styles.subtitle,
-          testId: testId && "".concat(testId, "-subtitle")
-        }, subtitle));
+        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");
     }
-  }]);
 
-  return ModalHeader;
-}(external_react_["Component"]);
+    if (typeof props.opened === "boolean" && !props.onClose) {
+      // eslint-disable-next-line no-console
+      console.warn("'onClose' should be used with 'opened'");
+    }
 
-modal_header_defineProperty(modal_header_ModalHeader, "defaultProps", {
-  light: true
-});
+    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
+    };
+  }
 
-var modal_header_styleSheets = {
-  all: external_aphrodite_["StyleSheet"].create({
-    header: {
-      boxShadow: "0px 1px 0px ".concat(wonder_blocks_color_default.a.offBlack16),
-      display: "flex",
-      flexDirection: "column",
-      minHeight: 66,
-      padding: "".concat(wonder_blocks_spacing_default.a.large_24, "px ").concat(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
+  componentDidUpdate(prevProps) {
+    // ensures the element is stored only when the modal is opened
+    if (!prevProps.opened && this.props.opened) {
+      this._saveLastElementFocused();
     }
-  }),
-  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
+  }
+
+  _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
 };
-// EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(6);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/focus-trap.js
-function focus_trap_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { focus_trap_typeof = function _typeof(obj) { return typeof obj; }; } else { focus_trap_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return focus_trap_typeof(obj); }
+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);
+
+
+
 
-function focus_trap_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function focus_trap_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function focus_trap_createClass(Constructor, protoProps, staticProps) { if (protoProps) focus_trap_defineProperties(Constructor.prototype, protoProps); if (staticProps) focus_trap_defineProperties(Constructor, staticProps); return Constructor; }
 
-function focus_trap_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) focus_trap_setPrototypeOf(subClass, superClass); }
 
-function focus_trap_setPrototypeOf(o, p) { focus_trap_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return focus_trap_setPrototypeOf(o, p); }
+/**
+ * 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,
+      subtitle = undefined,
+      testId
+    } = this.props;
+
+    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`
+      });
+    }
+  }
+
+  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__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["IDProvider"], {
+      id: titleId,
+      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
+    }))));
+  }
+
+}
+OnePaneDialog.defaultProps = {
+  closeButtonVisible: true
+};
+const styleSheets = {
+  small: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    dialog: {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  }),
+  mdOrLarger: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+    dialog: {
+      width: "93.75%",
+      maxWidth: 576,
+      height: "81.25%",
+      maxHeight: 624
+    }
+  })
+};
 
-function focus_trap_createSuper(Derived) { var hasNativeReflectConstruct = focus_trap_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = focus_trap_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = focus_trap_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return focus_trap_possibleConstructorReturn(this, result); }; }
+/***/ }),
+/* 17 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-function focus_trap_possibleConstructorReturn(self, call) { if (call && (focus_trap_typeof(call) === "object" || typeof call === "function")) { return call; } return focus_trap_assertThisInitialized(self); }
+"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);
 
-function focus_trap_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+/**
+ * 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 focus_trap_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function maybeGetNextAncestorModalLauncherPortal(element) {
+  let candidateElement = element && element.parentElement;
 
-function focus_trap_getPrototypeOf(o) { focus_trap_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return focus_trap_getPrototypeOf(o); }
+  while (candidateElement && !candidateElement.hasAttribute(_constants_js__WEBPACK_IMPORTED_MODULE_0__[/* ModalLauncherPortalAttributeName */ "a"])) {
+    candidateElement = candidateElement.parentElement;
+  }
 
-function focus_trap_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+  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__);
 
-var focus_trap_FocusTrap = /*#__PURE__*/function (_React$Component) {
-  focus_trap_inherits(FocusTrap, _React$Component);
 
-  var _super = focus_trap_createSuper(FocusTrap);
 
+class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   /** The most recent node _inside this component_ to receive focus. */
 
   /**
@@ -635,49 +1088,39 @@ var focus_trap_FocusTrap = /*#__PURE__*/function (_React$Component) {
   /**
    * Tabbing is restricted to descendents of this element.
    */
-  function FocusTrap(props) {
-    var _this;
-
-    focus_trap_classCallCheck(this, FocusTrap);
-
-    _this = _super.call(this, props);
-
-    focus_trap_defineProperty(focus_trap_assertThisInitialized(_this), "lastNodeFocusedInModal", void 0);
-
-    focus_trap_defineProperty(focus_trap_assertThisInitialized(_this), "ignoreFocusChanges", void 0);
+  constructor(props) {
+    super(props);
 
-    focus_trap_defineProperty(focus_trap_assertThisInitialized(_this), "modalRoot", void 0);
-
-    focus_trap_defineProperty(focus_trap_assertThisInitialized(_this), "getModalRoot", function (node) {
+    this.getModalRoot = node => {
       if (!node) {
         // The component is being umounted
         return;
       }
 
-      var 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");
       }
 
-      _this.modalRoot = modalRoot;
-    });
+      this.modalRoot = modalRoot;
+    };
 
-    focus_trap_defineProperty(focus_trap_assertThisInitialized(_this), "handleGlobalFocus", function (e) {
+    this.handleGlobalFocus = e => {
       // If we're busy applying our own programmatic focus, we ignore focus
       // changes, to avoid an infinite loop.
-      if (_this.ignoreFocusChanges) {
+      if (this.ignoreFocusChanges) {
         return;
       }
 
-      var target = e.target;
+      const target = e.target;
 
       if (!(target instanceof Node)) {
         // Sometimes focus events trigger on the document itself. Ignore!
         return;
       }
 
-      var modalRoot = _this.modalRoot;
+      const modalRoot = this.modalRoot;
 
       if (!modalRoot) {
         return;
@@ -686,164 +1129,141 @@ var focus_trap_FocusTrap = /*#__PURE__*/function (_React$Component) {
       if (modalRoot.contains(target)) {
         // If the newly focused node is inside the modal, we just keep track
         // of that.
-        _this.lastNodeFocusedInModal = target;
+        this.lastNodeFocusedInModal = target;
       } else {
         // If the newly focused node is outside the modal, we try refocusing
         // the first focusable node of the modal. (This could be the user
         // pressing Tab on the last node of the modal, or focus escaping in
         // some other way.)
-        _this.focusFirstElementIn(modalRoot); // But, if it turns out that the first focusable node of the modal
+        this.focusFirstElementIn(modalRoot); // But, if it turns out that the first focusable node of the modal
         // was what we were previously focusing, then this is probably the
         // user pressing Shift-Tab on the first node, wanting to go to the
         // end. So, we instead try focusing the last focusable node of the
         // modal.
 
-
-        if (document.activeElement === _this.lastNodeFocusedInModal) {
-          _this.focusLastElementIn(modalRoot);
+        if (document.activeElement === this.lastNodeFocusedInModal) {
+          this.focusLastElementIn(modalRoot);
         } // Focus should now be inside the modal, so record the newly-focused
         // node as the last node focused in the modal.
 
 
-        _this.lastNodeFocusedInModal = document.activeElement;
+        this.lastNodeFocusedInModal = document.activeElement;
       }
-    });
+    };
 
-    _this.lastNodeFocusedInModal = null;
-    _this.ignoreFocusChanges = false;
-    return _this;
+    this.lastNodeFocusedInModal = null;
+    this.ignoreFocusChanges = false;
   }
 
-  focus_trap_createClass(FocusTrap, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener("focus", this.handleGlobalFocus, true);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener("focus", this.handleGlobalFocus, true);
-    }
-  }, {
-    key: "tryToFocus",
-
-    /** Try to focus the given node. Return true iff successful. */
-    value: function tryToFocus(node) {
-      if (node instanceof HTMLElement) {
-        this.ignoreFocusChanges = true;
-
-        try {
-          node.focus();
-        } catch (e) {// ignore error
-        }
-
-        this.ignoreFocusChanges = false;
-        return document.activeElement === node;
-      }
-    }
-    /**
-     * Focus the first focusable descendant of the given node.
-     *
-     * Return true if we succeed. Or, if the given node has no focusable
-     * descendants, return false.
-     */
+  componentDidMount() {
+    window.addEventListener("focus", this.handleGlobalFocus, true);
+  }
 
-  }, {
-    key: "focusFirstElementIn",
-    value: function focusFirstElementIn(currentParent) {
-      var children = currentParent.childNodes;
+  componentWillUnmount() {
+    window.removeEventListener("focus", this.handleGlobalFocus, true);
+  }
 
-      for (var i = 0; i < children.length; i++) {
-        var child = children[i];
+  /** Try to focus the given node. Return true iff successful. */
+  tryToFocus(node) {
+    if (node instanceof HTMLElement) {
+      this.ignoreFocusChanges = true;
 
-        if (this.tryToFocus(child) || this.focusFirstElementIn(child)) {
-          return true;
-        }
+      try {
+        node.focus();
+      } catch (e) {// ignore error
       }
 
-      return false;
+      this.ignoreFocusChanges = false;
+      return document.activeElement === node;
     }
-    /**
-     * Focus the last focusable descendant of the given node.
-     *
-     * Return true if we succeed. Or, if the given node has no focusable
-     * descendants, return false.
-     */
+  }
+  /**
+   * Focus the first focusable descendant of the given node.
+   *
+   * Return true if we succeed. Or, if the given node has no focusable
+   * descendants, return false.
+   */
 
-  }, {
-    key: "focusLastElementIn",
-    value: function focusLastElementIn(currentParent) {
-      var children = currentParent.childNodes;
 
-      for (var i = children.length - 1; i >= 0; i--) {
-        var child = children[i];
+  focusFirstElementIn(currentParent) {
+    const children = currentParent.childNodes;
 
-        if (this.tryToFocus(child) || this.focusLastElementIn(child)) {
-          return true;
-        }
-      }
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
 
-      return false;
-    }
-    /** This method is called when any node on the page is focused. */
-
-  }, {
-    key: "render",
-    value: function render() {
-      var style = this.props.style;
-      return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"]("div", {
-        tabIndex: "0",
-        style: {
-          position: "fixed"
-        }
-      }), /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: style,
-        ref: this.getModalRoot
-      }, this.props.children), /*#__PURE__*/external_react_["createElement"]("div", {
-        tabIndex: "0",
-        style: {
-          position: "fixed"
-        }
-      }));
+      if (this.tryToFocus(child) || this.focusFirstElementIn(child)) {
+        return true;
+      }
     }
-  }]);
-
-  return FocusTrap;
-}(external_react_["Component"]);
-
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/util/constants.js
-/**
- * The attribute used to identify a modal launcher portal.
- */
-var ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-backdrop.js
-function modal_backdrop_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { modal_backdrop_typeof = function _typeof(obj) { return typeof obj; }; } else { modal_backdrop_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return modal_backdrop_typeof(obj); }
 
-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); }
+    return false;
+  }
+  /**
+   * Focus the last focusable descendant of the given node.
+   *
+   * Return true if we succeed. Or, if the given node has no focusable
+   * descendants, return false.
+   */
 
-function modal_backdrop_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function modal_backdrop_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+  focusLastElementIn(currentParent) {
+    const children = currentParent.childNodes;
 
-function modal_backdrop_createClass(Constructor, protoProps, staticProps) { if (protoProps) modal_backdrop_defineProperties(Constructor.prototype, protoProps); if (staticProps) modal_backdrop_defineProperties(Constructor, staticProps); return Constructor; }
+    for (let i = children.length - 1; i >= 0; i--) {
+      const child = children[i];
 
-function modal_backdrop_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) modal_backdrop_setPrototypeOf(subClass, superClass); }
+      if (this.tryToFocus(child) || this.focusLastElementIn(child)) {
+        return true;
+      }
+    }
 
-function modal_backdrop_setPrototypeOf(o, p) { modal_backdrop_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return modal_backdrop_setPrototypeOf(o, p); }
+    return false;
+  }
+  /** This method is called when any node on the page is focused. */
 
-function modal_backdrop_createSuper(Derived) { var hasNativeReflectConstruct = modal_backdrop_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = modal_backdrop_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = modal_backdrop_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return modal_backdrop_possibleConstructorReturn(this, result); }; }
 
-function modal_backdrop_possibleConstructorReturn(self, call) { if (call && (modal_backdrop_typeof(call) === "object" || typeof call === "function")) { return call; } return modal_backdrop_assertThisInitialized(self); }
+  render() {
+    const {
+      style
+    } = this.props;
+    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__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+      style: style,
+      ref: this.getModalRoot
+    }, this.props.children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+      tabIndex: "0",
+      style: {
+        position: "fixed"
+      }
+    }));
+  }
 
-function modal_backdrop_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+}
 
-function modal_backdrop_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+/***/ }),
+/* 19 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-function modal_backdrop_getPrototypeOf(o) { modal_backdrop_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return modal_backdrop_getPrototypeOf(o); }
+"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); }
 
-function modal_backdrop_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 
 
@@ -852,11 +1272,6 @@ function modal_backdrop_defineProperty(obj, key, value) { if (key in obj) { Obje
 
 
 
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-var 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
@@ -867,127 +1282,105 @@ var FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not(
  * and adding an `onClose` prop that will call `onCloseModal`. If an
  * `onClose` prop is already provided, the two are merged.
  */
+class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
 
-var modal_backdrop_ModalBackdrop = /*#__PURE__*/function (_React$Component) {
-  modal_backdrop_inherits(ModalBackdrop, _React$Component);
-
-  var _super = modal_backdrop_createSuper(ModalBackdrop);
-
-  function ModalBackdrop() {
-    var _this;
-
-    modal_backdrop_classCallCheck(this, ModalBackdrop);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    modal_backdrop_defineProperty(modal_backdrop_assertThisInitialized(_this), "handleClick", function (e) {
+    this.handleClick = e => {
       // Was the lowest-level click target (`e.target`) the positioner element
       // (`e.currentTarget`)?
       if (e.target === e.currentTarget) {
-        _this.props.onCloseModal();
+        this.props.onCloseModal();
       }
-    });
-
-    return _this;
+    };
   }
 
-  modal_backdrop_createClass(ModalBackdrop, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var node = external_react_dom_["findDOMNode"](this);
+  componentDidMount() {
+    const node = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](this);
 
-      if (!node) {
-        return;
-      }
+    if (!node) {
+      return;
+    }
 
-      var firstFocusableElement = // 1. try to get element specified by the user
-      this._getInitialFocusElement(node) || // 2. get first occurence from list of focusable elements
-      this._getFirstFocusableElement(node) || // 3. get the dialog itself
-      this._getDialogElement(node); // wait for styles to applied
+    const firstFocusableElement = // 1. try to get element specified by the user
+    this._getInitialFocusElement(node) || // 2. get first occurence from list of focusable elements
+    this._getFirstFocusableElement(node) || // 3. get the dialog itself
+    this._getDialogElement(node); // wait for styles to applied
 
 
-      setTimeout(function () {
-        firstFocusableElement.focus();
-      }, 0);
-    }
-    /**
-     * Returns an element specified by the user
-     */
+    setTimeout(() => {
+      firstFocusableElement.focus();
+    }, 0);
+  }
+  /**
+   * Returns an element specified by the user
+   */
 
-  }, {
-    key: "_getInitialFocusElement",
-    value: function _getInitialFocusElement(node) {
-      var initialFocusId = this.props.initialFocusId;
 
-      if (!initialFocusId) {
-        return null;
-      }
+  _getInitialFocusElement(node) {
+    const {
+      initialFocusId
+    } = this.props;
 
-      return external_react_dom_["findDOMNode"](node.querySelector("#".concat(initialFocusId)));
+    if (!initialFocusId) {
+      return null;
     }
-    /**
-     * Returns the first focusable element found inside the Dialog
-     */
 
-  }, {
-    key: "_getFirstFocusableElement",
-    value: function _getFirstFocusableElement(node) {
-      // get a collection of elements that can be focused
-      var focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+    return react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](node.querySelector(`#${initialFocusId}`));
+  }
+  /**
+   * Returns the first focusable element found inside the Dialog
+   */
 
-      if (!focusableElements) {
-        return null;
-      } // if found, return the first focusable element
 
+  _getFirstFocusableElement(node) {
+    // get a collection of elements that can be focused
+    const focusableElements = Object(_util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__[/* findFocusableNodes */ "a"])(node);
 
-      return focusableElements[0];
-    }
-    /**
-     * Returns the dialog element
-     */
+    if (!focusableElements) {
+      return null;
+    } // if found, return the first focusable element
 
-  }, {
-    key: "_getDialogElement",
-    value: function _getDialogElement(node) {
-      // If no focusable elements are found,
-      // the dialog content element itself will receive focus.
-      var dialogElement = external_react_dom_["findDOMNode"](node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
 
-      dialogElement.tabIndex = -1;
-      return dialogElement;
-    }
-    /**
-     * When the user clicks on the gray backdrop area (i.e., the click came
-     * _directly_ from the positioner, not bubbled up from its children), close
-     * the modal.
-     */
+    return focusableElements[0];
+  }
+  /**
+   * Returns the dialog element
+   */
 
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          testId = _this$props.testId;
 
-      var backdropProps = modal_backdrop_defineProperty({}, ModalLauncherPortalAttributeName, true);
+  _getDialogElement(node) {
+    // If no focusable elements are found,
+    // the dialog content element itself will receive focus.
+    const dialogElement = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
 
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], _extends({
-        style: modal_backdrop_styles.modalPositioner,
-        onClick: this.handleClick,
-        testId: testId
-      }, backdropProps), children);
-    }
-  }]);
+    dialogElement.tabIndex = -1;
+    return dialogElement;
+  }
+  /**
+   * When the user clicks on the gray backdrop area (i.e., the click came
+   * _directly_ from the positioner, not bubbled up from its children), close
+   * the modal.
+   */
 
-  return ModalBackdrop;
-}(external_react_["Component"]);
 
+  render() {
+    const {
+      children,
+      testId
+    } = this.props;
+    const backdropProps = {
+      [_util_constants_js__WEBPACK_IMPORTED_MODULE_5__[/* ModalLauncherPortalAttributeName */ "a"]]: true
+    };
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], _extends({
+      style: styles.modalPositioner,
+      onClick: this.handleClick,
+      testId: testId
+    }, backdropProps), children);
+  }
 
-var modal_backdrop_styles = external_aphrodite_["StyleSheet"].create({
+}
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
   modalPositioner: {
     position: "fixed",
     left: 0,
@@ -1005,34 +1398,32 @@ var 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
-function scroll_disabler_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { scroll_disabler_typeof = function _typeof(obj) { return typeof obj; }; } else { scroll_disabler_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return scroll_disabler_typeof(obj); }
 
-function scroll_disabler_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function scroll_disabler_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function scroll_disabler_createClass(Constructor, protoProps, staticProps) { if (protoProps) scroll_disabler_defineProperties(Constructor.prototype, protoProps); if (staticProps) scroll_disabler_defineProperties(Constructor, staticProps); return Constructor; }
-
-function scroll_disabler_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) scroll_disabler_setPrototypeOf(subClass, superClass); }
-
-function scroll_disabler_setPrototypeOf(o, p) { scroll_disabler_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return scroll_disabler_setPrototypeOf(o, p); }
-
-function scroll_disabler_createSuper(Derived) { var hasNativeReflectConstruct = scroll_disabler_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = scroll_disabler_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = scroll_disabler_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return scroll_disabler_possibleConstructorReturn(this, result); }; }
-
-function scroll_disabler_possibleConstructorReturn(self, call) { if (call && (scroll_disabler_typeof(call) === "object" || typeof call === "function")) { return call; } return scroll_disabler_assertThisInitialized(self); }
-
-function scroll_disabler_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function scroll_disabler_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+/***/ }),
+/* 20 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-function scroll_disabler_getPrototypeOf(o) { scroll_disabler_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return scroll_disabler_getPrototypeOf(o); }
+"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));
+}
 
-function scroll_disabler_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/***/ }),
+/* 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.
  *
@@ -1045,895 +1436,171 @@ function scroll_disabler_defineProperty(obj, key, value) { if (key in obj) { Obj
  */
 
 
-var needsHackyMobileSafariScrollDisabler = function () {
+const needsHackyMobileSafariScrollDisabler = (() => {
   if (typeof window === "undefined") {
     return false;
   }
 
-  var userAgent = window.navigator.userAgent;
+  const userAgent = window.navigator.userAgent;
   return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
-}();
-
-var ScrollDisabler = /*#__PURE__*/function (_React$Component) {
-  scroll_disabler_inherits(ScrollDisabler, _React$Component);
+})();
 
-  var _super = scroll_disabler_createSuper(ScrollDisabler);
+class ScrollDisabler extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  componentDidMount() {
+    if (ScrollDisabler.numModalsOpened === 0) {
+      const body = document.body;
 
-  function ScrollDisabler() {
-    scroll_disabler_classCallCheck(this, ScrollDisabler);
-
-    return _super.apply(this, arguments);
-  }
-
-  scroll_disabler_createClass(ScrollDisabler, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (ScrollDisabler.numModalsOpened === 0) {
-        var body = document.body;
-
-        if (!body) {
-          throw new Error("couldn't find document.body");
-        } // Prevent scrolling of the background, the first time a modal is
-        // opened.
-
-
-        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 (!body) {
+        throw new Error("couldn't find document.body");
+      } // Prevent scrolling of the background, the first time a modal is
+      // opened.
 
-        if (needsHackyMobileSafariScrollDisabler) {
-          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:
-        // fixed is also required.  Setting style.top = -scollTop maintains
-        // the scroll position (without which we'd scroll to the top).
+      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) {
-          body.style.position = "fixed";
-          body.style.width = "100%";
-          body.style.top = "".concat(-ScrollDisabler.oldScrollY, "px");
-        }
+      if (needsHackyMobileSafariScrollDisabler) {
+        ScrollDisabler.oldPosition = body.style.position;
+        ScrollDisabler.oldWidth = body.style.width;
+        ScrollDisabler.oldTop = body.style.top;
       }
 
-      ScrollDisabler.numModalsOpened++;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      ScrollDisabler.numModalsOpened--;
-
-      if (ScrollDisabler.numModalsOpened === 0) {
-        var body = document.body;
-
-        if (!body) {
-          throw new Error("couldn't find document.body");
-        } // Reset all values on the closing of the final modal.
-
-
-        body.style.overflow = ScrollDisabler.oldOverflow;
-
-        if (needsHackyMobileSafariScrollDisabler) {
-          body.style.position = ScrollDisabler.oldPosition;
-          body.style.width = ScrollDisabler.oldWidth;
-          body.style.top = ScrollDisabler.oldTop;
-        }
+      body.style.overflow = "hidden"; // On mobile Safari, overflow: hidden is not enough, position:
+      // fixed is also required.  Setting style.top = -scollTop maintains
+      // the scroll position (without which we'd scroll to the top).
 
-        if (typeof window !== "undefined" && window.scrollTo) {
-          window.scrollTo(0, ScrollDisabler.oldScrollY);
-        }
+      if (needsHackyMobileSafariScrollDisabler) {
+        body.style.position = "fixed";
+        body.style.width = "100%";
+        body.style.top = `${-ScrollDisabler.oldScrollY}px`;
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }]);
-
-  return ScrollDisabler;
-}(external_react_["Component"]);
-
-scroll_disabler_defineProperty(ScrollDisabler, "oldOverflow", void 0);
-
-scroll_disabler_defineProperty(ScrollDisabler, "oldPosition", void 0);
-
-scroll_disabler_defineProperty(ScrollDisabler, "oldScrollY", void 0);
-
-scroll_disabler_defineProperty(ScrollDisabler, "oldWidth", void 0);
-
-scroll_disabler_defineProperty(ScrollDisabler, "oldTop", void 0);
-
-scroll_disabler_defineProperty(ScrollDisabler, "numModalsOpened", 0);
-
-/* harmony default export */ var scroll_disabler = (ScrollDisabler);
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-context.js
-
-var defaultContext = {
-  closeModal: undefined
-};
-/* harmony default export */ var modal_context = (external_react_["createContext"](defaultContext));
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-launcher.js
-function modal_launcher_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { modal_launcher_typeof = function _typeof(obj) { return typeof obj; }; } else { modal_launcher_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return modal_launcher_typeof(obj); }
-
-function modal_launcher_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function modal_launcher_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function modal_launcher_createClass(Constructor, protoProps, staticProps) { if (protoProps) modal_launcher_defineProperties(Constructor.prototype, protoProps); if (staticProps) modal_launcher_defineProperties(Constructor, staticProps); return Constructor; }
-
-function modal_launcher_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) modal_launcher_setPrototypeOf(subClass, superClass); }
-
-function modal_launcher_setPrototypeOf(o, p) { modal_launcher_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return modal_launcher_setPrototypeOf(o, p); }
-
-function modal_launcher_createSuper(Derived) { var hasNativeReflectConstruct = modal_launcher_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = modal_launcher_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = modal_launcher_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return modal_launcher_possibleConstructorReturn(this, result); }; }
-
-function modal_launcher_possibleConstructorReturn(self, call) { if (call && (modal_launcher_typeof(call) === "object" || typeof call === "function")) { return call; } return modal_launcher_assertThisInitialized(self); }
-
-function modal_launcher_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function modal_launcher_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function modal_launcher_getPrototypeOf(o) { modal_launcher_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return modal_launcher_getPrototypeOf(o); }
-
-function modal_launcher_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-
-
-
-
-
-
-/**
- * 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.
- */
-var modal_launcher_ModalLauncher = /*#__PURE__*/function (_React$Component) {
-  modal_launcher_inherits(ModalLauncher, _React$Component);
-
-  var _super = modal_launcher_createSuper(ModalLauncher);
-
-  function ModalLauncher() {
-    var _this;
-
-    modal_launcher_classCallCheck(this, ModalLauncher);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    modal_launcher_defineProperty(modal_launcher_assertThisInitialized(_this), "lastElementFocusedOutsideModal", void 0);
-
-    modal_launcher_defineProperty(modal_launcher_assertThisInitialized(_this), "state", {
-      opened: false
-    });
-
-    modal_launcher_defineProperty(modal_launcher_assertThisInitialized(_this), "_saveLastElementFocused", function () {
-      // keep a reference of the element that triggers the modal
-      _this.lastElementFocusedOutsideModal = document.activeElement;
-    });
-
-    modal_launcher_defineProperty(modal_launcher_assertThisInitialized(_this), "_openModal", function () {
-      _this._saveLastElementFocused();
 
-      _this.setState({
-        opened: true
-      });
-    });
-
-    modal_launcher_defineProperty(modal_launcher_assertThisInitialized(_this), "handleCloseModal", function () {
-      _this.setState({
-        opened: false
-      }, function () {
-        _this.props.onClose && _this.props.onClose();
-
-        if (_this.lastElementFocusedOutsideModal != null) {
-          // return focus to the element that triggered the modal
-          _this.lastElementFocusedOutsideModal.focus();
-        }
-      });
-    });
-
-    return _this;
+    ScrollDisabler.numModalsOpened++;
   }
 
-  modal_launcher_createClass(ModalLauncher, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      // ensures the element is stored only when the modal is opened
-      if (!prevProps.opened && this.props.opened) {
-        this._saveLastElementFocused();
-      }
-    }
-  }, {
-    key: "_renderModal",
-    value: function _renderModal() {
-      if (typeof this.props.modal === "function") {
-        return this.props.modal({
-          closeModal: this.handleCloseModal
-        });
-      } else {
-        return this.props.modal;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var renderedChildren = this.props.children ? this.props.children({
-        openModal: this._openModal
-      }) : null;
-      var _document = document,
-          body = _document.body;
+  componentWillUnmount() {
+    ScrollDisabler.numModalsOpened--;
+
+    if (ScrollDisabler.numModalsOpened === 0) {
+      const body = document.body;
 
       if (!body) {
-        return null;
-      }
+        throw new Error("couldn't find document.body");
+      } // Reset all values on the closing of the final modal.
 
-      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 && 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 : function () {}
-        }, this._renderModal())), body), this.state.opened && /*#__PURE__*/external_react_["createElement"](ModalLauncherKeypressListener, {
-          onClose: this.handleCloseModal
-        }), this.state.opened && /*#__PURE__*/external_react_["createElement"](scroll_disabler, null))
-      );
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function 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'");
-      }
+      body.style.overflow = ScrollDisabler.oldOverflow;
 
-      if (typeof props.opened !== "boolean" && !props.children) {
-        // eslint-disable-next-line no-console
-        console.warn("either 'children' or 'opened' must be set");
+      if (needsHackyMobileSafariScrollDisabler) {
+        body.style.position = ScrollDisabler.oldPosition;
+        body.style.width = ScrollDisabler.oldWidth;
+        body.style.top = ScrollDisabler.oldTop;
       }
 
-      return {
-        opened: typeof props.opened === "boolean" ? props.opened : state.opened
-      };
-    }
-  }]);
-
-  return ModalLauncher;
-}(external_react_["Component"]);
-/** A component that, when mounted, calls `onClose` when Escape is pressed. */
-
-
-modal_launcher_defineProperty(modal_launcher_ModalLauncher, "defaultProps", {
-  backdropDismissEnabled: true
-});
-
-
-
-var ModalLauncherKeypressListener = /*#__PURE__*/function (_React$Component2) {
-  modal_launcher_inherits(ModalLauncherKeypressListener, _React$Component2);
-
-  var _super2 = modal_launcher_createSuper(ModalLauncherKeypressListener);
-
-  function ModalLauncherKeypressListener() {
-    var _this2;
-
-    modal_launcher_classCallCheck(this, ModalLauncherKeypressListener);
-
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    _this2 = _super2.call.apply(_super2, [this].concat(args));
-
-    modal_launcher_defineProperty(modal_launcher_assertThisInitialized(_this2), "_handleKeyup", function (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();
-
-        _this2.props.onClose();
+      if (typeof window !== "undefined" && window.scrollTo) {
+        window.scrollTo(0, ScrollDisabler.oldScrollY);
       }
-    });
-
-    return _this2;
-  }
-
-  modal_launcher_createClass(ModalLauncherKeypressListener, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener("keyup", this._handleKeyup);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener("keyup", this._handleKeyup);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }]);
-
-  return ModalLauncherKeypressListener;
-}(external_react_["Component"]);
-
-var 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
-function modal_content_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { modal_content_typeof = function _typeof(obj) { return typeof obj; }; } else { modal_content_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return modal_content_typeof(obj); }
-
-function modal_content_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function modal_content_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function modal_content_createClass(Constructor, protoProps, staticProps) { if (protoProps) modal_content_defineProperties(Constructor.prototype, protoProps); if (staticProps) modal_content_defineProperties(Constructor, staticProps); return Constructor; }
-
-function modal_content_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) modal_content_setPrototypeOf(subClass, superClass); }
-
-function modal_content_setPrototypeOf(o, p) { modal_content_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return modal_content_setPrototypeOf(o, p); }
-
-function modal_content_createSuper(Derived) { var hasNativeReflectConstruct = modal_content_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = modal_content_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = modal_content_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return modal_content_possibleConstructorReturn(this, result); }; }
-
-function modal_content_possibleConstructorReturn(self, call) { if (call && (modal_content_typeof(call) === "object" || typeof call === "function")) { return call; } return modal_content_assertThisInitialized(self); }
-
-function modal_content_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function modal_content_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function modal_content_getPrototypeOf(o) { modal_content_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return modal_content_getPrototypeOf(o); }
-
-function modal_content_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-
-
-
 
-/**
- * The Modal content included after the header
- */
-var modal_content_ModalContent = /*#__PURE__*/function (_React$Component) {
-  modal_content_inherits(ModalContent, _React$Component);
-
-  var _super = modal_content_createSuper(ModalContent);
-
-  function ModalContent() {
-    modal_content_classCallCheck(this, ModalContent);
-
-    return _super.apply(this, arguments);
-  }
-
-  modal_content_createClass(ModalContent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          scrollOverflow = _this$props.scrollOverflow,
-          style = _this$props.style,
-          children = _this$props.children;
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayout"], {
-        styleSheets: modal_content_styleSheets
-      }, function (_ref) {
-        var styles = _ref.styles;
-        return /*#__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));
-      });
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-    }
-  }]);
-
-  return ModalContent;
-}(external_react_["Component"]);
-
-modal_content_defineProperty(modal_content_ModalContent, "defaultProps", {
-  scrollOverflow: true
-});
-
-modal_content_defineProperty(modal_content_ModalContent, "__IS_MODAL_CONTENT__", true);
-
-
-var 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: "".concat(wonder_blocks_spacing_default.a.xLarge_32, "px ").concat(wonder_blocks_spacing_default.a.medium_16, "px")
-    }
-  })
-};
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
-var wonder_blocks_icon_ = __webpack_require__(8);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon-button"
-var wonder_blocks_icon_button_ = __webpack_require__(9);
-var wonder_blocks_icon_button_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_button_);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/close-button.js
-function close_button_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { close_button_typeof = function _typeof(obj) { return typeof obj; }; } else { close_button_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return close_button_typeof(obj); }
-
-function close_button_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function close_button_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function close_button_createClass(Constructor, protoProps, staticProps) { if (protoProps) close_button_defineProperties(Constructor.prototype, protoProps); if (staticProps) close_button_defineProperties(Constructor, staticProps); return Constructor; }
-
-function close_button_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) close_button_setPrototypeOf(subClass, superClass); }
-
-function close_button_setPrototypeOf(o, p) { close_button_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return close_button_setPrototypeOf(o, p); }
-
-function close_button_createSuper(Derived) { var hasNativeReflectConstruct = close_button_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = close_button_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = close_button_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return close_button_possibleConstructorReturn(this, result); }; }
-
-function close_button_possibleConstructorReturn(self, call) { if (call && (close_button_typeof(call) === "object" || typeof call === "function")) { return call; } return close_button_assertThisInitialized(self); }
-
-function close_button_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function close_button_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function close_button_getPrototypeOf(o) { close_button_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return close_button_getPrototypeOf(o); }
-
-
-
-
-
-
-var close_button_CloseButton = /*#__PURE__*/function (_React$Component) {
-  close_button_inherits(CloseButton, _React$Component);
-
-  var _super = close_button_createSuper(CloseButton);
-
-  function CloseButton() {
-    close_button_classCallCheck(this, CloseButton);
-
-    return _super.apply(this, arguments);
+  render() {
+    return null;
   }
 
-  close_button_createClass(CloseButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          light = _this$props.light,
-          onClick = _this$props.onClick,
-          style = _this$props.style,
-          testId = _this$props.testId;
-      return /*#__PURE__*/external_react_["createElement"](modal_context.Consumer, null, function (_ref) {
-        var closeModal = _ref.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.
-          // TODO(kevinb): provide a way to set this label
-          ,
-          "aria-label": "Close modal",
-          onClick: onClick || closeModal,
-          kind: light ? "primary" : "tertiary",
-          light: light,
-          style: style,
-          testId: testId
-        });
-      });
-    }
-  }]);
-
-  return CloseButton;
-}(external_react_["Component"]);
-
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-modal/src/components/modal-panel.js
-function modal_panel_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { modal_panel_typeof = function _typeof(obj) { return typeof obj; }; } else { modal_panel_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return modal_panel_typeof(obj); }
-
-function modal_panel_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function modal_panel_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function modal_panel_createClass(Constructor, protoProps, staticProps) { if (protoProps) modal_panel_defineProperties(Constructor.prototype, protoProps); if (staticProps) modal_panel_defineProperties(Constructor, staticProps); return Constructor; }
-
-function modal_panel_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) modal_panel_setPrototypeOf(subClass, superClass); }
-
-function modal_panel_setPrototypeOf(o, p) { modal_panel_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return modal_panel_setPrototypeOf(o, p); }
-
-function modal_panel_createSuper(Derived) { var hasNativeReflectConstruct = modal_panel_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = modal_panel_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = modal_panel_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return modal_panel_possibleConstructorReturn(this, result); }; }
-
-function modal_panel_possibleConstructorReturn(self, call) { if (call && (modal_panel_typeof(call) === "object" || typeof call === "function")) { return call; } return modal_panel_assertThisInitialized(self); }
-
-function modal_panel_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function modal_panel_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function modal_panel_getPrototypeOf(o) { modal_panel_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return modal_panel_getPrototypeOf(o); }
-
-function modal_panel_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-
-
-
-
-
-
-
-
-/**
- * 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>
- * ```
- */
-var modal_panel_ModalPanel = /*#__PURE__*/function (_React$Component) {
-  modal_panel_inherits(ModalPanel, _React$Component);
-
-  var _super = modal_panel_createSuper(ModalPanel);
+}
 
-  function ModalPanel() {
-    modal_panel_classCallCheck(this, ModalPanel);
+ScrollDisabler.numModalsOpened = 0;
+/* harmony default export */ __webpack_exports__["a"] = (ScrollDisabler);
 
-    return _super.apply(this, arguments);
-  }
+/***/ }),
+/* 22 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  modal_panel_createClass(ModalPanel, [{
-    key: "renderMainContent",
-    value: function renderMainContent() {
-      var _this$props = this.props,
-          content = _this$props.content,
-          footer = _this$props.footer,
-          scrollOverflow = _this$props.scrollOverflow;
-      var mainContent = modal_content_ModalContent.isClassOf(content) ? content : /*#__PURE__*/external_react_["createElement"](modal_content_ModalContent, null, content);
-
-      if (!mainContent) {
-        return mainContent;
+"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 CloseButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  render() {
+    const {
+      light,
+      onClick,
+      style,
+      testId
+    } = this.props;
+    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 external_react_["cloneElement"](mainContent, {
-        // Pass the scrollOverflow and header in to the main content
-        scrollOverflow: 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]
+      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",
+        onClick: onClick || closeModal,
+        kind: light ? "primary" : "tertiary",
+        light: light,
+        style: style,
+        testId: testId
       });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          closeButtonVisible = _this$props2.closeButtonVisible,
-          footer = _this$props2.footer,
-          header = _this$props2.header,
-          light = _this$props2.light,
-          onClose = _this$props2.onClose,
-          style = _this$props2.style,
-          testId = _this$props2.testId;
-      var 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 && "".concat(testId, "-panel")
-      }, closeButtonVisible && /*#__PURE__*/external_react_["createElement"](close_button_CloseButton, {
-        light: !light,
-        onClick: onClose,
-        style: modal_panel_styles.closeButton,
-        testId: testId && "".concat(testId, "-close")
-      }), header, mainContent, !footer || modal_footer_ModalFooter.isClassOf(footer) ? footer : /*#__PURE__*/external_react_["createElement"](modal_footer_ModalFooter, null, footer));
-    }
-  }]);
-
-  return ModalPanel;
-}(external_react_["Component"]);
-
-modal_panel_defineProperty(modal_panel_ModalPanel, "defaultProps", {
-  closeButtonVisible: true,
-  scrollOverflow: true,
-  light: true
-});
-
-
-var 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
-function one_pane_dialog_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { one_pane_dialog_typeof = function _typeof(obj) { return typeof obj; }; } else { one_pane_dialog_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return one_pane_dialog_typeof(obj); }
-
-function one_pane_dialog_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function one_pane_dialog_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function one_pane_dialog_createClass(Constructor, protoProps, staticProps) { if (protoProps) one_pane_dialog_defineProperties(Constructor.prototype, protoProps); if (staticProps) one_pane_dialog_defineProperties(Constructor, staticProps); return Constructor; }
-
-function one_pane_dialog_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) one_pane_dialog_setPrototypeOf(subClass, superClass); }
-
-function one_pane_dialog_setPrototypeOf(o, p) { one_pane_dialog_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return one_pane_dialog_setPrototypeOf(o, p); }
-
-function one_pane_dialog_createSuper(Derived) { var hasNativeReflectConstruct = one_pane_dialog_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = one_pane_dialog_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = one_pane_dialog_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return one_pane_dialog_possibleConstructorReturn(this, result); }; }
-
-function one_pane_dialog_possibleConstructorReturn(self, call) { if (call && (one_pane_dialog_typeof(call) === "object" || typeof call === "function")) { return call; } return one_pane_dialog_assertThisInitialized(self); }
-
-function one_pane_dialog_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function one_pane_dialog_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function one_pane_dialog_getPrototypeOf(o) { one_pane_dialog_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return one_pane_dialog_getPrototypeOf(o); }
-
-function one_pane_dialog_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-
-
-
-
-
-
-/**
- * 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.
- */
-var one_pane_dialog_OnePaneDialog = /*#__PURE__*/function (_React$Component) {
-  one_pane_dialog_inherits(OnePaneDialog, _React$Component);
 
-  var _super = one_pane_dialog_createSuper(OnePaneDialog);
+}
 
-  function OnePaneDialog() {
-    one_pane_dialog_classCallCheck(this, OnePaneDialog);
+/***/ }),
+/* 23 */
+/***/ (function(module, exports) {
 
-    return _super.apply(this, arguments);
-  }
+module.exports = require("@khanacademy/wonder-blocks-icon");
 
-  one_pane_dialog_createClass(OnePaneDialog, [{
-    key: "renderHeader",
-    value: function renderHeader(uniqueId) {
-      var _this$props = this.props,
-          title = _this$props.title,
-          _this$props$breadcrum = _this$props.breadcrumbs,
-          breadcrumbs = _this$props$breadcrum === void 0 ? undefined : _this$props$breadcrum,
-          _this$props$subtitle = _this$props.subtitle,
-          subtitle = _this$props$subtitle === void 0 ? undefined : _this$props$subtitle,
-          testId = _this$props.testId;
-
-      if (breadcrumbs) {
-        return /*#__PURE__*/external_react_["createElement"](modal_header_ModalHeader, {
-          title: title,
-          breadcrumbs: breadcrumbs,
-          titleId: uniqueId,
-          testId: testId && "".concat(testId, "-header")
-        });
-      } else if (subtitle) {
-        return /*#__PURE__*/external_react_["createElement"](modal_header_ModalHeader, {
-          title: title,
-          subtitle: subtitle,
-          titleId: uniqueId,
-          testId: testId && "".concat(testId, "-header")
-        });
-      } else {
-        return /*#__PURE__*/external_react_["createElement"](modal_header_ModalHeader, {
-          title: title,
-          titleId: uniqueId,
-          testId: testId && "".concat(testId, "-header")
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var _this$props2 = this.props,
-          onClose = _this$props2.onClose,
-          footer = _this$props2.footer,
-          content = _this$props2.content,
-          above = _this$props2.above,
-          below = _this$props2.below,
-          style = _this$props2.style,
-          closeButtonVisible = _this$props2.closeButtonVisible,
-          testId = _this$props2.testId,
-          titleId = _this$props2.titleId,
-          role = _this$props2.role;
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["MediaLayout"], {
-        styleSheets: one_pane_dialog_styleSheets
-      }, function (_ref) {
-        var styles = _ref.styles;
-        return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["IDProvider"], {
-          id: titleId,
-          scope: "modal"
-        }, function (uniqueId) {
-          return /*#__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
-          }));
-        });
-      });
-    }
-  }]);
+/***/ }),
+/* 24 */
+/***/ (function(module, exports) {
 
-  return OnePaneDialog;
-}(external_react_["Component"]);
+module.exports = require("@khanacademy/wonder-blocks-icon-button");
 
-one_pane_dialog_defineProperty(one_pane_dialog_OnePaneDialog, "defaultProps", {
-  closeButtonVisible: true
-});
+/***/ }),
+/* 25 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"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"]; });
 
-var 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) {
-  var 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