npm - @khanacademy/wonder-blocks-modal - Versions diffs - 3.0.2 → 3.0.3 - Mend

@khanacademy/wonder-blocks-modal 3.0.2 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md +14 -0
package/package.json +8 -8
package/src/components/__tests__/close-button.test.js +7 -5
package/src/components/__tests__/modal-backdrop.test.js +45 -83
package/src/components/__tests__/modal-header.test.js +20 -21
package/src/components/__tests__/modal-launcher.test.js +121 -137
package/src/util/maybe-get-portal-mounted-modal-host-element.test.js +13 -14
package/dist/index.js +0 -3013
package/dist/index.js.flow +0 -2
package/docs.md +0 -5

package/dist/index.js DELETED Viewed

@@ -1,3013 +0,0 @@
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 27);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-module.exports = require("react");
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-module.exports = require("@khanacademy/wonder-blocks-spacing");
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-module.exports = require("@khanacademy/wonder-blocks-core");
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-module.exports = require("aphrodite");
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-module.exports = require("@khanacademy/wonder-blocks-color");
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-module.exports = require("@khanacademy/wonder-blocks-layout");
-/***/ }),
-/* 6 */
-/***/ (function(module, exports) {
-module.exports = require("react-dom");
-/***/ }),
-/* 7 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"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__);
-/**
- * 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");
-    }
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["MediaLayout"], {
-      styleSheets: styleSheets
-    }, ({
-      styles
-    }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: [styles.header, !light && styles.dark],
-      testId: testId
-    }, breadcrumbs && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: styles.breadcrumbs
-    }, breadcrumbs), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["HeadingMedium"], {
-      style: styles.title,
-      id: titleId,
-      testId: testId && `${testId}-title`
-    }, title), subtitle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
-      style: light && styles.subtitle,
-      testId: testId && `${testId}-subtitle`
-    }, subtitle)));
-  }
-}
-ModalHeader.defaultProps = {
-  light: true
-};
-const styleSheets = {
-  all: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-    header: {
-      boxShadow: `0px 1px 0px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`,
-      display: "flex",
-      flexDirection: "column",
-      minHeight: 66,
-      padding: `${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.large_24}px ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xLarge_32}px`,
-      position: "relative",
-      width: "100%"
-    },
-    dark: {
-      background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.darkBlue,
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white
-    },
-    breadcrumbs: {
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64,
-      marginBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xSmall_8
-    },
-    title: {
-      // Prevent title from overlapping the close button
-      paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.medium_16
-    },
-    subtitle: {
-      color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64,
-      marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xSmall_8
-    }
-  }),
-  small: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-    header: {
-      paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.medium_16,
-      paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.medium_16
-    },
-    title: {
-      paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xLarge_32
-    }
-  })
-};
-/***/ }),
-/* 8 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"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__);
-/**
- * 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.
- *
- * **Usage**
- *
- * ```js
- * <ModalFooter>
- *     <Button onClick={() => {}}>Submit</Button>
- * </ModalFooter>
- * ```
- */
-class ModalFooter extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-  }
-  render() {
-    const {
-      children
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: styles.footer
-    }, children);
-  }
-}
-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}`
-  }
-});
-/***/ }),
-/* 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__);
-/**
- * `ModalDialog` is a component that contains these elements:
- * - The visual dialog element itself (`<div role="dialog"/>`)
- * - The custom contents below and/or above the Dialog itself (e.g. decorative graphics).
- *
- * **Accessibility notes:**
- * - By default (e.g. using `OnePaneDialog`), `aria-labelledby` is populated automatically using the dialog title `id`.
- * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
- * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
- */
-class ModalDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  render() {
-    const {
-      above,
-      below,
-      role,
-      style,
-      children,
-      testId,
-      /* eslint-disable react/prop-types */
-      // the react/prop-types plugin does not like these
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy
-      /* eslint-enable react/prop-types */
-    } = 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,
-      "aria-describedby": ariaDescribedBy,
-      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))));
-  }
-}
-ModalDialog.defaultProps = {
-  role: "dialog"
-};
-const styleSheets = {
-  all: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-    wrapper: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "stretch",
-      width: "100%",
-      height: "100%",
-      position: "relative"
-    },
-    /**
-     * Ensures the dialog container uses the container size
-     */
-    dialog: {
-      width: "100%",
-      height: "100%",
-      borderRadius: 4,
-      overflow: "hidden"
-    },
-    above: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: 1
-    },
-    below: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: -1
-    }
-  }),
-  small: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-    wrapper: {
-      padding: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
-      flexDirection: "column"
-    }
-  })
-};
-/***/ }),
-/* 10 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalPanel; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _modal_content_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
-/* harmony import */ var _modal_header_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
-/* harmony import */ var _modal_footer_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
-/* harmony import */ var _close_button_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(24);
-/**
- * ModalPanel is  the content container.
- *
- * **Implementation notes:**
- *
- * If you are creating a custom Dialog, make sure to follow these guidelines:
- * - Make sure to add this component inside the [ModalDialog](/#modaldialog).
- * - If needed, you can also add a [ModalHeader](/#modalheader) using the
- *   `header` prop. Same goes for [ModalFooter](/#modalfooter).
- * - If you need to create e2e tests, make sure to pass a `testId` prop. This
- *   will be passed down to this component using a sufix: e.g.
- *   `some-random-id-ModalPanel`. This scope will be propagated to the
- *   CloseButton element as well: e.g. `some-random-id-CloseButton`.
- *
- * ```js
- * <ModalDialog>
- *      <ModalPanel content={"custom content goes here"} />
- * </ModalDialog>
- * ```
- */
-class ModalPanel extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  renderMainContent() {
-    const {
-      content,
-      footer,
-      scrollOverflow
-    } = this.props;
-    const mainContent = _modal_content_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].isClassOf(content) ? content : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_content_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], null, content);
-    if (!mainContent) {
-      return mainContent;
-    }
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](mainContent, {
-      // Pass the scrollOverflow and header in to the main content
-      scrollOverflow,
-      // We override the styling of the main content to help position
-      // it if there is a footer or close button being
-      // shown. We have to do this here as the ModalContent doesn't
-      // know about things being positioned around it.
-      style: [!!footer && styles.hasFooter, mainContent.props.style]
-    });
-  }
-  render() {
-    const {
-      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));
-  }
-}
-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
-  }
-});
-/***/ }),
-/* 11 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalLauncherPortalAttributeName; });
-/**
- * The attribute used to identify a modal launcher portal.
- */
-const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
-/***/ }),
-/* 12 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-const defaultContext = {
-  closeModal: undefined
-};
-/* harmony default export */ __webpack_exports__["a"] = (/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](defaultContext));
-/***/ }),
-/* 13 */
-/***/ (function(module, exports) {
-module.exports = require("@khanacademy/wonder-blocks-typography");
-/***/ }),
-/* 14 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalContent; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
-/**
- * The Modal content included after the header
- */
-class ModalContent extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-  }
-  render() {
-    const {
-      scrollOverflow,
-      style,
-      children
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["MediaLayout"], {
-      styleSheets: styleSheets
-    }, ({
-      styles
-    }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
-      style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
-      style: [styles.content, style]
-    }, children)));
-  }
-}
-ModalContent.defaultProps = {
-  scrollOverflow: true
-};
-ModalContent.__IS_MODAL_CONTENT__ = true;
-const styleSheets = {
-  all: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-    wrapper: {
-      flex: 1,
-      // This helps to ensure that the paddingBottom is preserved when
-      // the contents start to overflow, this goes away on display: flex
-      display: "block"
-    },
-    scrollOverflow: {
-      overflow: "auto"
-    },
-    content: {
-      flex: 1,
-      minHeight: "100%",
-      padding: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xLarge_32,
-      boxSizing: "border-box"
-    }
-  }),
-  small: aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-    content: {
-      padding: `${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xLarge_32}px ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16}px`
-    }
-  })
-};
-/***/ }),
-/* 15 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony 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_timing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(18);
-/* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _focus_trap_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
-/* harmony import */ var _modal_backdrop_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(20);
-/* harmony import */ var _scroll_disabler_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(23);
-/* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(12);
-/**
- * This component enables you to launch a modal, covering the screen.
- *
- * Children have access to `openModal` function via the function-as-children
- * pattern, so one common use case is for this component to wrap a button:
- *
- * ```js
- * <ModalLauncher modal={<TwoColumnModal ... />}>
- *     {({openModal}) => <button onClick={openModal}>Learn more</button>}
- * </ModalLauncher>
- * ```
- *
- * The actual modal itself is constructed separately, using a layout component
- * like OnePaneDialog and is provided via
- * the `modal` prop.
- */
-class ModalLauncher extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      opened: false
-    };
-    this._saveLastElementFocused = () => {
-      // keep a reference of the element that triggers the modal
-      this.lastElementFocusedOutsideModal = document.activeElement;
-    };
-    this._openModal = () => {
-      this._saveLastElementFocused();
-      this.setState({
-        opened: true
-      });
-    };
-    this._returnFocus = () => {
-      const {
-        closedFocusId,
-        schedule
-      } = this.props;
-      const lastElement = this.lastElementFocusedOutsideModal; // Focus on the specified element after closing the modal.
-      if (closedFocusId) {
-        const focusElement = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](document.getElementById(closedFocusId));
-        if (focusElement) {
-          // Wait for the modal to leave the DOM before trying
-          // to focus on the specified element.
-          schedule.animationFrame(() => {
-            focusElement.focus();
-          });
-          return;
-        }
-      }
-      if (lastElement != null) {
-        // Wait for the modal to leave the DOM before trying to
-        // return focus to the element that triggered the modal.
-        schedule.animationFrame(() => {
-          lastElement.focus();
-        });
-      }
-    };
-    this.handleCloseModal = () => {
-      this.setState({
-        opened: false
-      }, () => {
-        const {
-          onClose
-        } = this.props;
-        onClose && onClose();
-        this._returnFocus();
-      });
-    };
-  }
-  static getDerivedStateFromProps(props, state) {
-    if (typeof props.opened === "boolean" && props.children) {
-      // eslint-disable-next-line no-console
-      console.warn("'children' and 'opened' can't be used together");
-    }
-    if (typeof props.opened === "boolean" && !props.onClose) {
-      // eslint-disable-next-line no-console
-      console.warn("'onClose' should be used with 'opened'");
-    }
-    if (typeof props.opened !== "boolean" && !props.children) {
-      // eslint-disable-next-line no-console
-      console.warn("either 'children' or 'opened' must be set");
-    }
-    return {
-      opened: typeof props.opened === "boolean" ? props.opened : state.opened
-    };
-  }
-  componentDidUpdate(prevProps) {
-    // ensures the element is stored only when the modal is opened
-    if (!prevProps.opened && this.props.opened) {
-      this._saveLastElementFocused();
-    }
-  }
-  _renderModal() {
-    if (typeof this.props.modal === "function") {
-      return this.props.modal({
-        closeModal: this.handleCloseModal
-      });
-    } else {
-      return this.props.modal;
-    }
-  }
-  render() {
-    const renderedChildren = this.props.children ? this.props.children({
-      openModal: this._openModal
-    }) : null;
-    const {
-      body
-    } = document;
-    if (!body) {
-      return null;
-    }
-    return (
-      /*#__PURE__*/
-      // This flow check is valid, it's the babel plugin which is broken,
-      // see modal-context.js for details.
-      // $FlowFixMe
-      react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_context_js__WEBPACK_IMPORTED_MODULE_7__[/* 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_4__[/* default */ "a"], {
-        style: styles.container
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_backdrop_js__WEBPACK_IMPORTED_MODULE_5__[/* 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_6__[/* default */ "a"], null))
-    );
-  }
-}
-/** A component that, when mounted, calls `onClose` when Escape is pressed. */
-ModalLauncher.defaultProps = {
-  backdropDismissEnabled: true
-};
-class ModalLauncherKeypressListener extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
-    this._handleKeyup = e => {
-      // We check the key as that's keyboard layout agnostic and also avoids
-      // the minefield of deprecated number type properties like keyCode and
-      // which, with the replacement code, which uses a string instead.
-      if (e.key === "Escape") {
-        // Stop the event going any further.
-        // For cancellation events, like the Escape key, we generally should
-        // air on the side of caution and only allow it to cancel one thing.
-        // So, it's polite for us to stop propagation of the event.
-        // Otherwise, we end up with UX where one Escape key press
-        // unexpectedly cancels multiple things.
-        e.preventDefault();
-        e.stopPropagation();
-        this.props.onClose();
-      }
-    };
-  }
-  componentDidMount() {
-    window.addEventListener("keyup", this._handleKeyup);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("keyup", this._handleKeyup);
-  }
-  render() {
-    return null;
-  }
-}
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
-  container: {
-    // This z-index is copied from the Khan Academy webapp.
-    //
-    // TODO(mdr): Should we keep this in a constants file somewhere? Or
-    //     not hardcode it at all, and provide it to Wonder Blocks via
-    //     configuration?
-    zIndex: 1080
-  }
-});
-/* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__["withActionScheduler"])(ModalLauncher));
-/***/ }),
-/* 16 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return OnePaneDialog; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _modal_dialog_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
-/* harmony import */ var _modal_panel_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
-/* harmony import */ var _modal_header_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
-/**
- * This is the standard layout for most straightforward modal experiences.
- *
- * The ModalHeader is required, but the ModalFooter is optional.
- * The content of the dialog itself is fully customizable, but the
- * left/right/top/bottom padding is fixed.
- *
- * ### Usage
- *
- * ```jsx
- * import {OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
- * import {Body} from "@khanacademy/wonder-blocks-typography";
- *
- * <OnePaneDialog
- *     title="Some title"
- *     content={
- *         <Body>
- *             {`Lorem ipsum dolor sit amet, consectetur adipiscing
- *             elit, sed do eiusmod tempor incididunt ut labore et
- *             dolore magna aliqua. Ut enim ad minim veniam,
- *             quis nostrud exercitation ullamco laboris nisi ut
- *             aliquip ex ea commodo consequat. Duis aute irure
- *             dolor in reprehenderit in voluptate velit esse
- *             cillum dolore eu fugiat nulla pariatur. Excepteur
- *             sint occaecat cupidatat non proident, sunt in culpa
- *             qui officia deserunt mollit anim id est.`}
- *         </Body>
- *     }
- * />
- * ```
- */
-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,
-      "aria-describedby": ariaDescribedBy
-    } = 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,
-      "aria-describedby": ariaDescribedBy,
-      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
-    }
-  })
-};
-/***/ }),
-/* 17 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return maybeGetPortalMountedModalHostElement; });
-/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
-/**
- * From a given element, finds its next ancestor that is a modal launcher portal
- * element.
- * @param {?(Element | Text)} element The element whose ancestors are to be
- * walked.
- * @returns {?Element} The nearest parent modal launcher portal.
- */
-function maybeGetNextAncestorModalLauncherPortal(element) {
-  let candidateElement = element && element.parentElement;
-  while (candidateElement && !candidateElement.hasAttribute(_constants_js__WEBPACK_IMPORTED_MODULE_0__[/* ModalLauncherPortalAttributeName */ "a"])) {
-    candidateElement = candidateElement.parentElement;
-  }
-  return candidateElement;
-}
-/**
- * From a given element, finds the next modal host that has been mounted in
- * a modal portal.
- * @param {?(Element | Text)} element The element whose ancestors are to be
- * walked.
- * @returns {?Element} The next portal-mounted modal host element.
- * TODO(kevinb): look into getting rid of this
- */
-function maybeGetPortalMountedModalHostElement(element) {
-  return maybeGetNextAncestorModalLauncherPortal(element);
-}
-/***/ }),
-/* 18 */
-/***/ (function(module, exports, __webpack_require__) {
-module.exports =
-/******/
-function (modules) {
-  // webpackBootstrap
-  /******/
-  // The module cache
-  /******/
-  var installedModules = {};
-  /******/
-  /******/
-  // The require function
-  /******/
-  function __webpack_require__(moduleId) {
-    /******/
-    /******/
-    // Check if module is in cache
-    /******/
-    if (installedModules[moduleId]) {
-      /******/
-      return installedModules[moduleId].exports;
-      /******/
-    }
-    /******/
-    // Create a new module (and put it into the cache)
-    /******/
-    var module = installedModules[moduleId] = {
-      /******/
-      i: moduleId,
-      /******/
-      l: false,
-      /******/
-      exports: {}
-      /******/
-    };
-    /******/
-    /******/
-    // Execute the module function
-    /******/
-    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-    /******/
-    /******/
-    // Flag the module as loaded
-    /******/
-    module.l = true;
-    /******/
-    /******/
-    // Return the exports of the module
-    /******/
-    return module.exports;
-    /******/
-  }
-  /******/
-  /******/
-  /******/
-  // expose the modules object (__webpack_modules__)
-  /******/
-  __webpack_require__.m = modules;
-  /******/
-  /******/
-  // expose the module cache
-  /******/
-  __webpack_require__.c = installedModules;
-  /******/
-  /******/
-  // define getter function for harmony exports
-  /******/
-  __webpack_require__.d = function (exports, name, getter) {
-    /******/
-    if (!__webpack_require__.o(exports, name)) {
-      /******/
-      Object.defineProperty(exports, name, {
-        enumerable: true,
-        get: getter
-      });
-      /******/
-    }
-    /******/
-  };
-  /******/
-  /******/
-  // define __esModule on exports
-  /******/
-  __webpack_require__.r = function (exports) {
-    /******/
-    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-      /******/
-      Object.defineProperty(exports, Symbol.toStringTag, {
-        value: 'Module'
-      });
-      /******/
-    }
-    /******/
-    Object.defineProperty(exports, '__esModule', {
-      value: true
-    });
-    /******/
-  };
-  /******/
-  /******/
-  // create a fake namespace object
-  /******/
-  // mode & 1: value is a module id, require it
-  /******/
-  // mode & 2: merge all properties of value into the ns
-  /******/
-  // mode & 4: return value when already ns object
-  /******/
-  // mode & 8|1: behave like require
-  /******/
-  __webpack_require__.t = function (value, mode) {
-    /******/
-    if (mode & 1) value = __webpack_require__(value);
-    /******/
-    if (mode & 8) return value;
-    /******/
-    if (mode & 4 && typeof value === 'object' && value && value.__esModule) return value;
-    /******/
-    var ns = Object.create(null);
-    /******/
-    __webpack_require__.r(ns);
-    /******/
-    Object.defineProperty(ns, 'default', {
-      enumerable: true,
-      value: value
-    });
-    /******/
-    if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) {
-      return value[key];
-    }.bind(null, key));
-    /******/
-    return ns;
-    /******/
-  };
-  /******/
-  /******/
-  // getDefaultExport function for compatibility with non-harmony modules
-  /******/
-  __webpack_require__.n = function (module) {
-    /******/
-    var getter = module && module.__esModule ?
-    /******/
-    function getDefault() {
-      return module['default'];
-    } :
-    /******/
-    function getModuleExports() {
-      return module;
-    };
-    /******/
-    __webpack_require__.d(getter, 'a', getter);
-    /******/
-    return getter;
-    /******/
-  };
-  /******/
-  /******/
-  // Object.prototype.hasOwnProperty.call
-  /******/
-  __webpack_require__.o = function (object, property) {
-    return Object.prototype.hasOwnProperty.call(object, property);
-  };
-  /******/
-  /******/
-  // __webpack_public_path__
-  /******/
-  __webpack_require__.p = "";
-  /******/
-  /******/
-  /******/
-  // Load entry module and return exports
-  /******/
-  return __webpack_require__(__webpack_require__.s = 14);
-  /******/
-}
-/************************************************************************/
-/******/
-([
-/* 0 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "b", function () {
-    return SchedulePolicy;
-  });
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return ClearPolicy;
-  });
-  const SchedulePolicy = {
-    Immediately: "schedule-immediately",
-    OnDemand: "schedule-on-demand"
-  };
-  const ClearPolicy = {
-    Resolve: "resolve-on-clear",
-    Cancel: "cancel-on-clear"
-  };
-  /***/
-},
-/* 1 */
-/***/
-function (module, exports) {
-  module.exports = __webpack_require__(0);
-  /***/
-},
-/* 2 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return useUpdatingRef;
-  });
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-  /**
-   * Returns a ref whose .current value is updated whenever
-   * the `value` passed to this hook changes.
-   *
-   * this is great for values that you want to reference from
-   * within a useCallback or useEffect event listener, without
-   * re-triggering the effect when the value changes
-   *
-   * @returns {{current: T}}
-   */
-  const useUpdatingRef = value => {
-    const ref = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(value);
-    Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-      ref.current = value;
-    }, [value]);
-    return ref;
-  };
-  /***/
-},
-/* 3 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return useInterval;
-  });
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-  /* harmony import */
-  var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-  /**
-   * A simple hook for using `setInterval`.
-   *
-   * @param action called every `intervalMs` when `active` is true
-   * @param intervalMs the duration between calls to `action`
-   * @param active whether or not the interval is active
-   */
-  function useInterval(action, intervalMs, active) {
-    // We using a ref instead of a callback for `action` to avoid resetting
-    // the interval whenever the `action` changes.
-    const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__[
-    /* useUpdatingRef */
-    "a"])(action);
-    Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-      if (active) {
-        const intervalId = setInterval(() => {
-          actionRef.current();
-        }, intervalMs);
-        return () => {
-          clearInterval(intervalId);
-        };
-      } // actionRef isn't actually required, but react-hooks/exhaustive-deps
-      // doesn't recognize it as a ref and thus complains if it isn't in the
-      // deps list.  It isn't a big deal though since the value ofactionRef
-      // never changes (only its contents do).
-    }, [intervalMs, active, actionRef]);
-  }
-  /***/
-},
-/* 4 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return useTimeout;
-  });
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-  /* harmony import */
-  var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-  /**
-   * A simple hook for using `setTimeout`.
-   *
-   * @param action called after `timeoutMs` when `active` is true
-   * @param timeoutMs the duration after which `action` is called
-   * @param active whether or not the interval is active
-   */
-  function useTimeout(action, timeoutMs, active) {
-    // We using a ref instead of a callback for `action` to avoid resetting
-    // the interval whenever the `action` changes.
-    const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_1__[
-    /* useUpdatingRef */
-    "a"])(action);
-    Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-      if (active) {
-        const timeoutId = setTimeout(() => {
-          actionRef.current();
-        }, timeoutMs);
-        return () => {
-          clearTimeout(timeoutId);
-        };
-      } // actionRef isn't actually required, but react-hooks/exhaustive-deps
-      // doesn't recognize it as a ref and thus complains if it isn't in the
-      // deps list.  It isn't a big deal though since the value ofactionRef
-      // never changes (only its contents do).
-    }, [timeoutMs, active, actionRef]);
-  }
-  /***/
-},
-/* 5 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return withActionScheduler;
-  });
-  /* harmony import */
-  var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
-  /* harmony import */
-  var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-  /* harmony import */
-  var _action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
-  /**
-   * A higher order component that attaches the given component to an
-   * `IScheduleActions` instance. Any actions scheduled will automatically be
-   * cleared on unmount.
-   *
-   * @template TOwnProps The own props of the component being rendered, without
-   * the additional action scheduler prop. To attach the additional prop to
-   * these props use the `WithActionScheduler` type.
-   */
-  function withActionScheduler(WrappedComponent) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_2__[
-    /* default */
-    "a"], null, schedule => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](WrappedComponent, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, props, {
-      ref: ref,
-      schedule: schedule
-    }))));
-  }
-  /***/
-},
-/* 6 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return useScheduledInterval;
-  });
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-  /* harmony import */
-  var _util_policies_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-  /* harmony import */
-  var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-  /* harmony import */
-  var _use_interval_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
-  function useScheduledInterval(action, intervalMs, options) {
-    var _options$schedulePoli;
-    if (typeof action !== "function") {
-      throw new Error("Action must be a function");
-    }
-    if (intervalMs < 1) {
-      throw new Error("Interval period must be >= 1");
-    }
-    const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[
-    /* SchedulePolicy */
-    "b"].Immediately;
-    const [isSet, setIsSet] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(schedulePolicy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[
-    /* SchedulePolicy */
-    "b"].Immediately);
-    const set = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => setIsSet(true), []);
-    const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[
-    /* useUpdatingRef */
-    "a"])(action);
-    const clear = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(policy => {
-      var _policy;
-      policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
-      if (isSet && policy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[
-      /* ClearPolicy */
-      "a"].Resolve) {
-        actionRef.current();
-      }
-      setIsSet(false);
-    }, // react-hooks/exhaustive-deps doesn't require refs to be
-    // listed in the deps array.  Unfortunately, in this situation
-    // it doesn't recognized actionRef as a ref.
-    [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
-    const runOnUnmountRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[
-    /* useUpdatingRef */
-    "a"])(isSet && (options == null ? void 0 : options.clearPolicy) === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[
-    /* ClearPolicy */
-    "a"].Resolve);
-    Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-      return () => {
-        // This code will only run with the component using this
-        // hook is unmounted.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        if (runOnUnmountRef.current) {
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          actionRef.current();
-        }
-      }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
-      // a both refs and thus do not have to be listed as deps.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    Object(_use_interval_js__WEBPACK_IMPORTED_MODULE_3__[
-    /* useInterval */
-    "a"])(action, intervalMs, isSet);
-    return {
-      isSet,
-      set,
-      clear
-    };
-  }
-  /***/
-},
-/* 7 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return useScheduledTimeout;
-  });
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-  /* harmony import */
-  var _util_policies_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-  /* harmony import */
-  var _internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-  /* harmony import */
-  var _use_timeout_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-  function useScheduledTimeout(action, timeoutMs, options) {
-    var _options$schedulePoli;
-    if (typeof action !== "function") {
-      throw new Error("Action must be a function");
-    }
-    if (timeoutMs < 0) {
-      throw new Error("Timeout period must be >= 0");
-    }
-    const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[
-    /* SchedulePolicy */
-    "b"].Immediately;
-    const [isSet, setIsSet] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(schedulePolicy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[
-    /* SchedulePolicy */
-    "b"].Immediately);
-    const set = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => setIsSet(true), []); // This wrapper isn't present in useScheduledInterval because we
-    // don't need to update `isSet` in that situations.
-    const wrappedAction = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => {
-      setIsSet(false);
-      action();
-    }, [action]);
-    const actionRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[
-    /* useUpdatingRef */
-    "a"])(wrappedAction);
-    const clear = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(policy => {
-      var _policy;
-      policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
-      if (isSet && policy === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[
-      /* ClearPolicy */
-      "a"].Resolve) {
-        actionRef.current();
-      }
-      setIsSet(false);
-    }, // react-hooks/exhaustive-deps doesn't require refs to be
-    // listed in the deps array.  Unfortunately, in this situation
-    // it doesn't recognized actionRef as a ref.
-    [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
-    const runOnUnmountRef = Object(_internal_use_updating_ref_js__WEBPACK_IMPORTED_MODULE_2__[
-    /* useUpdatingRef */
-    "a"])(isSet && (options == null ? void 0 : options.clearPolicy) === _util_policies_js__WEBPACK_IMPORTED_MODULE_1__[
-    /* ClearPolicy */
-    "a"].Resolve);
-    Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-      return () => {
-        // This code will only run with the component using this
-        // hook is unmounted.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        if (runOnUnmountRef.current) {
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          actionRef.current();
-        }
-      }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
-      // a both refs and thus do not have to be listed as deps.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    Object(_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__[
-    /* useTimeout */
-    "a"])(wrappedAction, timeoutMs, isSet);
-    return {
-      isSet,
-      set,
-      clear
-    };
-  }
-  /***/
-},
-/* 8 */
-/***/
-function (module, exports) {
-  function _extends() {
-    module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-    return _extends.apply(this, arguments);
-  }
-  module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  /***/
-},
-/* 9 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return ActionSchedulerProvider;
-  });
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-  /* harmony import */
-  var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-  /* harmony import */
-  var _util_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
-  /**
-   * A provider component that passes our action scheduling API to its children
-   * and ensures that all scheduled actions are cleared on unmount.
-   *
-   * ```jsx
-   * <ActionSchedulerProvider>
-   *     {schedule => this.renderThingThatNeedsTimers(schedule)}
-   * </ActionSchedulerProvider>
-   * ```
-   */
-  class ActionSchedulerProvider extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-    constructor(...args) {
-      super(...args);
-      this._actionScheduler = new _util_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__[
-      /* default */
-      "a"]();
-    }
-    componentWillUnmount() {
-      this._actionScheduler.disable();
-    }
-    render() {
-      const {
-        children
-      } = this.props;
-      return children(this._actionScheduler);
-    }
-  }
-  /***/
-},
-/* 10 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return ActionScheduler;
-  });
-  /* harmony import */
-  var _timeout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
-  /* harmony import */
-  var _interval_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
-  /* harmony import */
-  var _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
-  /**
-   * Implements the `IScheduleActions` API to provide timeout, interval, and
-   * animation frame support. This is not intended for direct use, but instead
-   * is to be used solely by the `ActionSchedulerProvider` to provide an
-   * `IScheduleActions` instance.
-   */
-  class ActionScheduler {
-    constructor() {
-      this._disabled = false;
-      this._registeredActions = [];
-    }
-    timeout(action, period, options) {
-      if (this._disabled) {
-        return ActionScheduler.NoopAction;
-      }
-      const timeout = new _timeout_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* default */
-      "a"](action, period, options == null ? void 0 : options.schedulePolicy);
-      this._registeredActions.push(() => timeout.clear(options == null ? void 0 : options.clearPolicy));
-      return timeout;
-    }
-    interval(action, period, options) {
-      if (this._disabled) {
-        return ActionScheduler.NoopAction;
-      }
-      const interval = new _interval_js__WEBPACK_IMPORTED_MODULE_1__[
-      /* default */
-      "a"](action, period, options == null ? void 0 : options.schedulePolicy);
-      this._registeredActions.push(() => interval.clear(options == null ? void 0 : options.clearPolicy));
-      return interval;
-    }
-    animationFrame(action, options) {
-      if (this._disabled) {
-        return ActionScheduler.NoopAction;
-      }
-      const animationFrame = new _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__[
-      /* default */
-      "a"](action, options == null ? void 0 : options.schedulePolicy);
-      this._registeredActions.push(() => animationFrame.clear(options == null ? void 0 : options.clearPolicy));
-      return animationFrame;
-    }
-    clearAll() {
-      const registered = [].concat(this._registeredActions);
-      this._registeredActions = [];
-      registered.forEach(clearFn => clearFn());
-    }
-    /**
-     * Prevents this scheduler from creating any additional actions.
-     * This also clears any pending actions.
-     */
-    disable() {
-      this._disabled = true;
-      this.clearAll();
-    }
-  }
-  ActionScheduler.NoopAction = {
-    set: () => {},
-    get isSet() {
-      return false;
-    },
-    clear: () => {}
-  };
-  /***/
-},
-/* 11 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return Timeout;
-  });
-  /* harmony import */
-  var _policies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-  /**
-   * Encapsulates everything associated with calling setTimeout/clearTimeout, and
-   * managing the lifecycle of that timer, including the ability to resolve or
-   * cancel a pending timeout action.
-   *
-   * @export
-   * @class Timeout
-   * @implements {ITimeout}
-   */
-  class Timeout {
-    /**
-     * Creates a timeout that will invoke the given action after
-     * the given period. The timeout does not start until set is called.
-     *
-     * @param {() => mixed} action The action to be invoked when the timeout
-     * period has passed.
-     * @param {number} timeoutMs The timeout period.
-     * @param {SchedulePolicy} [schedulePolicy] When SchedulePolicy.Immediately,
-     * the timer is set immediately on instantiation; otherwise, `set` must be
-     * called to set the timeout.
-     * Defaults to `SchedulePolicy.Immediately`.
-     * @memberof Timeout
-     */
-    constructor(action, timeoutMs, schedulePolicy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* SchedulePolicy */
-    "b"].Immediately) {
-      if (typeof action !== "function") {
-        throw new Error("Action must be a function");
-      }
-      if (timeoutMs < 0) {
-        throw new Error("Timeout period must be >= 0");
-      }
-      this._action = action;
-      this._timeoutMs = timeoutMs;
-      if (schedulePolicy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* SchedulePolicy */
-      "b"].Immediately) {
-        this.set();
-      }
-    }
-    /**
-     * Determine if the timeout is set or not.
-     *
-     * @returns {boolean} true if the timeout is set (aka pending), otherwise
-     * false.
-     * @memberof Timeout
-     */
-    get isSet() {
-      return this._timeoutId != null;
-    }
-    /**
-     * Set the timeout.
-     *
-     * If the timeout is pending, this cancels that pending timeout and
-     * sets the timeout afresh. If the timeout is not pending, this
-     * sets a new timeout.
-     *
-     * @memberof Timeout
-     */
-    set() {
-      if (this.isSet) {
-        this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[
-        /* ClearPolicy */
-        "a"].Cancel);
-      }
-      this._timeoutId = setTimeout(() => this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* ClearPolicy */
-      "a"].Resolve), this._timeoutMs);
-    }
-    /**
-     * Clear the set timeout.
-     *
-     * If the timeout is pending, this cancels that pending timeout without
-     * invoking the action. If no timeout is pending, this does nothing.
-     *
-     * @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
-     * was set when called, the request action is invoked after cancelling
-     * the request; otherwise, the pending action is cancelled.
-     * Defaults to `ClearPolicy.Cancel`.
-     *
-     * @returns {void}
-     * @memberof Timeout
-     */
-    clear(policy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* ClearPolicy */
-    "a"].Cancel) {
-      const timeoutId = this._timeoutId;
-      this._timeoutId = null;
-      if (timeoutId == null) {
-        return;
-      }
-      clearTimeout(timeoutId);
-      if (policy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* ClearPolicy */
-      "a"].Resolve) {
-        this._action();
-      }
-    }
-  }
-  /***/
-},
-/* 12 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return Interval;
-  });
-  /* harmony import */
-  var _policies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-  /**
-   * Encapsulates everything associated with calling setInterval/clearInterval,
-   * and managing the lifecycle of that interval. This includes the ability to
-   * cancel the interval, and knowing if the interval is active.
-   *
-   * @export
-   * @class Interval
-   * @implements {IInterval}
-   */
-  class Interval {
-    /**
-     * Creates an interval that will invoke the given action after
-     * the given period. The interval does not start until set is called.
-     *
-     * @param {() => mixed} action The action to be invoked each time the
-     * interval period has passed.
-     * @param {number} intervalMs The interval period.
-     * @param {SchedulePolicy} [schedulePolicy] When SchedulePolicy.Immediately,
-     * the interval is set immediately on instantiation; otherwise, `set` must be
-     * called to set the interval.
-     * Defaults to `SchedulePolicy.Immediately`.
-     * @memberof Interval
-     */
-    constructor(action, intervalMs, schedulePolicy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* SchedulePolicy */
-    "b"].Immediately) {
-      if (typeof action !== "function") {
-        throw new Error("Action must be a function");
-      }
-      if (intervalMs < 1) {
-        throw new Error("Interval period must be >= 1");
-      }
-      this._action = action;
-      this._intervalMs = intervalMs;
-      if (schedulePolicy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* SchedulePolicy */
-      "b"].Immediately) {
-        this.set();
-      }
-    }
-    /**
-     * Determine if the interval is active or not.
-     *
-     * @returns {boolean} true if the interval is active, otherwise false.
-     * @memberof Interval
-     */
-    get isSet() {
-      return this._intervalId != null;
-    }
-    /**
-     * Activate the interval.
-     *
-     * If the interval is active, this cancels that interval and starts the
-     * interval afresh. If the interval is not active, this starts it.
-     *
-     * @memberof Interval
-     */
-    set() {
-      if (this.isSet) {
-        this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[
-        /* ClearPolicy */
-        "a"].Cancel);
-      }
-      this._intervalId = setInterval(() => this._action(), this._intervalMs);
-    }
-    /**
-     * Clear the active interval.
-     *
-     * If the interval is active, this cancels that interval. If no interval is
-     * pending, this does nothing.
-     *
-     * @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
-     * was set when called, the request action is invoked after cancelling
-     * the request; otherwise, the pending action is cancelled.
-     * Defaults to `ClearPolicy.Cancel`.
-     *
-     * @returns {void}
-     * @memberof Interval
-     */
-    clear(policy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* ClearPolicy */
-    "a"].Cancel) {
-      const intervalId = this._intervalId;
-      this._intervalId = null;
-      if (intervalId == null) {
-        return;
-      }
-      clearInterval(intervalId);
-      if (policy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* ClearPolicy */
-      "a"].Resolve) {
-        this._action();
-      }
-    }
-  }
-  /***/
-},
-/* 13 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return AnimationFrame;
-  });
-  /* harmony import */
-  var _policies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-  /**
-   * Encapsulates everything associated with calling requestAnimationFrame/
-   * cancelAnimationFrame, and managing the lifecycle of that request, including
-   * the ability to resolve or cancel a pending request action.
-   *
-   * @export
-   * @class AnimationFrame
-   * @implements {IAnimationFrame}
-   */
-  class AnimationFrame {
-    /**
-     * Creates an animation frame request that will invoke the given action.
-     * The request is not made until set is called.
-     *
-     * @param {DOMHighResTimeStamp => mixed} action The action to be invoked.
-     * @param {SchedulePolicy} [schedulePolicy] When SchedulePolicy.Immediately,
-     * the interval is set immediately on instantiation; otherwise, `set` must be
-     * called to set the interval.
-     * Defaults to `SchedulePolicy.Immediately`.
-     * @memberof AnimationFrame
-     */
-    constructor(action, schedulePolicy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* SchedulePolicy */
-    "b"].Immediately) {
-      if (typeof action !== "function") {
-        throw new Error("Action must be a function");
-      }
-      this._action = action;
-      if (schedulePolicy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* SchedulePolicy */
-      "b"].Immediately) {
-        this.set();
-      }
-    }
-    /**
-     * Determine if the request is pending or not.
-     *
-     * @returns {boolean} true if the request is pending, otherwise
-     * false.
-     * @memberof AnimationFrame
-     */
-    get isSet() {
-      return this._animationFrameId != null;
-    }
-    /**
-     * Make the animation frame request.
-     *
-     * If the request is pending, this cancels that pending request and
-     * makes the request afresh. If the request is not pending, this
-     * makes a new request.
-     *
-     * @memberof AnimationFrame
-     */
-    set() {
-      if (this.isSet) {
-        this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[
-        /* ClearPolicy */
-        "a"].Cancel);
-      }
-      this._animationFrameId = requestAnimationFrame(time => this.clear(_policies_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* ClearPolicy */
-      "a"].Resolve, time));
-    }
-    /**
-     * Clear the pending request.
-     *
-     * If the request is pending, this cancels that pending request without
-     * invoking the action. If no request is pending, this does nothing.
-     *
-     * @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
-     * was set when called, the request action is invoked after cancelling
-     * the request; otherwise, the pending action is cancelled.
-     * Defaults to `ClearPolicy.Cancel`.
-     * @param {DOMHighResTimeStamp} [time] Timestamp to pass to the action when
-     * ClearPolicy.Resolve is specified. Ignored when ClearPolicy.Cancel is
-     * specified.
-     *
-     * @returns {void}
-     * @memberof AnimationFrame
-     */
-    clear(policy = _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* ClearPolicy */
-    "a"].Cancel, time) {
-      const animationFrameId = this._animationFrameId;
-      this._animationFrameId = null;
-      if (animationFrameId == null) {
-        return;
-      }
-      cancelAnimationFrame(animationFrameId);
-      if (policy === _policies_js__WEBPACK_IMPORTED_MODULE_0__[
-      /* ClearPolicy */
-      "a"].Resolve) {
-        this._action(time || performance.now());
-      }
-    }
-  }
-  /***/
-},
-/* 14 */
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  __webpack_require__.r(__webpack_exports__);
-  /* harmony import */
-  var _util_policies_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-  /* harmony reexport (safe) */
-  __webpack_require__.d(__webpack_exports__, "SchedulePolicy", function () {
-    return _util_policies_js__WEBPACK_IMPORTED_MODULE_0__["b"];
-  });
-  /* harmony reexport (safe) */
-  __webpack_require__.d(__webpack_exports__, "ClearPolicy", function () {
-    return _util_policies_js__WEBPACK_IMPORTED_MODULE_0__["a"];
-  });
-  /* harmony import */
-  var _components_with_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
-  /* harmony reexport (safe) */
-  __webpack_require__.d(__webpack_exports__, "withActionScheduler", function () {
-    return _components_with_action_scheduler_js__WEBPACK_IMPORTED_MODULE_1__["a"];
-  });
-  /* harmony import */
-  var _hooks_use_interval_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
-  /* harmony reexport (safe) */
-  __webpack_require__.d(__webpack_exports__, "useInterval", function () {
-    return _hooks_use_interval_js__WEBPACK_IMPORTED_MODULE_2__["a"];
-  });
-  /* harmony import */
-  var _hooks_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-  /* harmony reexport (safe) */
-  __webpack_require__.d(__webpack_exports__, "useTimeout", function () {
-    return _hooks_use_timeout_js__WEBPACK_IMPORTED_MODULE_3__["a"];
-  });
-  /* harmony import */
-  var _hooks_use_scheduled_interval_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
-  /* harmony reexport (safe) */
-  __webpack_require__.d(__webpack_exports__, "useScheduledInterval", function () {
-    return _hooks_use_scheduled_interval_js__WEBPACK_IMPORTED_MODULE_4__["a"];
-  });
-  /* harmony import */
-  var _hooks_use_scheduled_timeout_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
-  /* harmony reexport (safe) */
-  __webpack_require__.d(__webpack_exports__, "useScheduledTimeout", function () {
-    return _hooks_use_scheduled_timeout_js__WEBPACK_IMPORTED_MODULE_5__["a"];
-  });
-  /***/
-}
-/******/
-]);
-/***/ }),
-/* 19 */
-/***/ (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__);
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-const FOCUSABLE_ELEMENTS = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-/**
- * This component ensures that focus stays within itself. If the user uses Tab
- * at the end of the modal, or Shift-Tab at the start of the modal, then this
- * component wraps focus to the start/end respectively.
- *
- * We use this in `ModalBackdrop` to ensure that focus stays within the launched
- * modal.
- *
- * Adapted from the WAI-ARIA dialog behavior example.
- * https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html
- *
- * NOTE(mdr): This component frequently references the "modal" and the "modal
- *     root", to aid readability in this package. But this component isn't
- *     actually coupled to the modal, and these could be renamed "children"
- *     instead if we were to generalize!
- */
-class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
-    this.getModalRoot = node => {
-      if (!node) {
-        // The component is being umounted
-        return;
-      }
-      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.handleFocusMoveToLast = () => {
-      this.focusElementIn(false);
-    };
-    this.handleFocusMoveToFirst = () => {
-      this.focusElementIn(true);
-    };
-  }
-  /**
-   * Try to focus the given node. Return true if successful.
-   */
-  tryToFocus(node) {
-    if (node instanceof HTMLElement) {
-      try {
-        node.focus();
-      } catch (e) {// ignore error
-      }
-      return document.activeElement === node;
-    }
-  }
-  /**
-   * Focus the next available focusable element within the modal root.
-   *
-   * @param {boolean} isLast Used to determine the next available item. true =
-   * First element within the modal, false = Last element within the modal.
-   */
-  focusElementIn(isLast) {
-    const modalRootAsHtmlEl = this.modalRoot; // Get the list of available focusable elements within the modal.
-    const focusableNodes = Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS));
-    const nodeIndex = !isLast ? focusableNodes.length - 1 : 0;
-    const focusableNode = focusableNodes[nodeIndex];
-    this.tryToFocus(focusableNode);
-  }
-  /**
-   * Triggered when the focus is set to the first sentinel. This way, the
-   * focus will be redirected to the last element inside the modal dialog.
-   */
-  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",
-      className: "modal-focus-trap-first",
-      onFocus: this.handleFocusMoveToLast,
-      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",
-      className: "modal-focus-trap-last",
-      onFocus: this.handleFocusMoveToFirst,
-      style: {
-        position: "fixed"
-      }
-    }));
-  }
-}
-/***/ }),
-/* 20 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalBackdrop; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(21);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(11);
-/* harmony import */ var _util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(22);
-/**
- * A private component used by ModalLauncher. This is the fixed-position
- * container element that gets mounted outside the DOM. It overlays the modal
- * content (provided as `children`) over the content, with a gray backdrop
- * behind it.
- *
- * This component is also responsible for cloning the provided modal `children`,
- * 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_1__["Component"] {
-  constructor(...args) {
-    super(...args);
-    this._mousePressedOutside = false;
-    this.handleMouseDown = e => {
-      // Confirm that it is the backdrop that is being clicked, not the child
-      this._mousePressedOutside = e.target === e.currentTarget;
-    };
-    this.handleMouseUp = e => {
-      // Confirm that it is the backdrop that is being clicked, not the child
-      // and that the mouse was pressed in the backdrop first.
-      if (e.target === e.currentTarget && this._mousePressedOutside) {
-        this.props.onCloseModal();
-      }
-      this._mousePressedOutside = false;
-    };
-  }
-  componentDidMount() {
-    const node = react_dom__WEBPACK_IMPORTED_MODULE_2__["findDOMNode"](this);
-    if (!node) {
-      return;
-    }
-    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(() => {
-      firstFocusableElement.focus();
-    }, 0);
-  }
-  /**
-   * Returns an element specified by the user
-   */
-  _getInitialFocusElement(node) {
-    const {
-      initialFocusId
-    } = this.props;
-    if (!initialFocusId) {
-      return null;
-    }
-    return react_dom__WEBPACK_IMPORTED_MODULE_2__["findDOMNode"](node.querySelector(`#${initialFocusId}`));
-  }
-  /**
-   * Returns the first focusable element found inside the Dialog
-   */
-  _getFirstFocusableElement(node) {
-    // get a collection of elements that can be focused
-    const focusableElements = Object(_util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_7__[/* findFocusableNodes */ "a"])(node);
-    if (!focusableElements) {
-      return null;
-    } // if found, return the first focusable element
-    return focusableElements[0];
-  }
-  /**
-   * Returns the dialog element
-   */
-  _getDialogElement(node) {
-    // If no focusable elements are found,
-    // the dialog content element itself will receive focus.
-    const dialogElement = react_dom__WEBPACK_IMPORTED_MODULE_2__["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.
-   */
-  render() {
-    const {
-      children,
-      testId
-    } = this.props;
-    const backdropProps = {
-      [_util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* ModalLauncherPortalAttributeName */ "a"]]: true
-    };
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["View"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-      style: styles.modalPositioner,
-      onMouseDown: this.handleMouseDown,
-      onMouseUp: this.handleMouseUp,
-      testId: testId
-    }, backdropProps), children);
-  }
-}
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_3__["StyleSheet"].create({
-  modalPositioner: {
-    position: "fixed",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    // If the modal ends up being too big for the viewport (e.g., the min
-    // height is triggered), add another scrollbar specifically for
-    // scrolling modal content.
-    //
-    // TODO(mdr): The specified behavior is that the modal should scroll
-    //     with the rest of the page, rather than separately, if overflow
-    //     turns out to be necessary. That sounds hard to do; punting for
-    //     now!
-    overflow: "auto",
-    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64
-  }
-});
-/***/ }),
-/* 21 */
-/***/ (function(module, exports) {
-function _extends() {
-  module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  return _extends.apply(this, arguments);
-}
-module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-/***/ }),
-/* 22 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return findFocusableNodes; });
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
-function findFocusableNodes(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
-}
-/***/ }),
-/* 23 */
-/***/ (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.
- *
- * The positioning of the modal requires some global page state changed
- * unfortunately, and this handles that in an encapsulated way.
- *
- * NOTE(mdr): This component was copied from webapp. Be wary of sync issues. It
- *     also doesn't have unit tests, and we haven't added any, since it's a
- *     relatively stable component that has now been stress-tested lots in prod.
- */
-const needsHackyMobileSafariScrollDisabler = (() => {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  const userAgent = window.navigator.userAgent;
-  return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
-})();
-class ScrollDisabler extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  componentDidMount() {
-    if (ScrollDisabler.numModalsOpened === 0) {
-      const 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 (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).
-      if (needsHackyMobileSafariScrollDisabler) {
-        body.style.position = "fixed";
-        body.style.width = "100%";
-        body.style.top = `${-ScrollDisabler.oldScrollY}px`;
-      }
-    }
-    ScrollDisabler.numModalsOpened++;
-  }
-  componentWillUnmount() {
-    ScrollDisabler.numModalsOpened--;
-    if (ScrollDisabler.numModalsOpened === 0) {
-      const 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;
-      }
-      if (typeof window !== "undefined" && window.scrollTo) {
-        window.scrollTo(0, ScrollDisabler.oldScrollY);
-      }
-    }
-  }
-  render() {
-    return null;
-  }
-}
-ScrollDisabler.numModalsOpened = 0;
-/* harmony default export */ __webpack_exports__["a"] = (ScrollDisabler);
-/***/ }),
-/* 24 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CloseButton; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
-/* 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__(26);
-/* 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 /*#__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
-      });
-    });
-  }
-}
-/***/ }),
-/* 25 */
-/***/ (function(module, exports) {
-module.exports = require("@khanacademy/wonder-blocks-icon");
-/***/ }),
-/* 26 */
-/***/ (function(module, exports) {
-module.exports = require("@khanacademy/wonder-blocks-icon-button");
-/***/ }),
-/* 27 */
-/***/ (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"]; });
-/* 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"]; });
-/* 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"]; });
-/* 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"]; });
-/* 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"]; });
-/* 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"]; });
-/***/ })
-/******/ ]);