@khanacademy/wonder-blocks-modal 2.2.3 → 2.3.0

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 25);
+/******/ 	return __webpack_require__(__webpack_require__.s = 26);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -477,7 +477,7 @@ const styleSheets = {
 /* harmony import */ var _modal_content_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
 /* harmony import */ var _modal_header_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
 /* harmony import */ var _modal_footer_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
-/* harmony import */ var _close_button_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(22);
+/* harmony import */ var _close_button_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(23);
 
 
 
@@ -702,17 +702,19 @@ const styleSheets = {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalLauncher; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _focus_trap_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(18);
-/* harmony import */ var _modal_backdrop_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
-/* harmony import */ var _scroll_disabler_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(21);
-/* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(12);
+/* 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__(22);
+/* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(12);
+
 
 
 
@@ -757,16 +759,45 @@ class ModalLauncher extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       });
     };
 
+    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
       }, () => {
-        this.props.onClose && this.props.onClose();
+        const {
+          onClose
+        } = this.props;
+        onClose && onClose();
 
-        if (this.lastElementFocusedOutsideModal != null) {
-          // return focus to the element that triggered the modal
-          this.lastElementFocusedOutsideModal.focus();
-        }
+        this._returnFocus();
       });
     };
   }
@@ -826,7 +857,7 @@ class ModalLauncher extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       // This flow check is valid, it's the babel plugin which is broken,
       // see modal-context.js for details.
       // $FlowFixMe
-      react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_context_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"].Provider, {
+      react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_context_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"].Provider, {
         value: {
           closeModal: this.handleCloseModal
         }
@@ -835,21 +866,22 @@ class ModalLauncher extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
       /* We need the container View that FocusTrap creates to be at the
          correct z-index so that it'll be above the global nav in webapp. */
-      react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_focus_trap_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
+      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_4__[/* default */ "a"], {
+      }, /*#__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_5__[/* default */ "a"], null))
+      }), 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
 };
@@ -900,6 +932,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
     zIndex: 1080
   }
 });
+/* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__["withActionScheduler"])(ModalLauncher));
 
 /***/ }),
 /* 16 */
@@ -1064,6 +1097,1342 @@ function maybeGetPortalMountedModalHostElement(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 = 13);
+  /******/
+}
+/************************************************************************/
+
+/******/
+([
+/* 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 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 _action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+  /**
+   * 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_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_action_scheduler_provider_js__WEBPACK_IMPORTED_MODULE_1__[
+    /* default */
+    "a"], null, schedule => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](WrappedComponent, _extends({}, 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, __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__(9);
+  /**
+   * 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);
+    }
+
+  }
+  /***/
+
+},
+/* 9 */
+
+/***/
+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__(10);
+  /* harmony import */
+
+
+  var _interval_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
+  /* harmony import */
+
+
+  var _animation_frame_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
+  /**
+   * 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: () => {}
+  };
+  /***/
+},
+/* 10 */
+
+/***/
+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();
+      }
+    }
+
+  }
+  /***/
+
+},
+/* 11 */
+
+/***/
+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();
+      }
+    }
+
+  }
+  /***/
+
+},
+/* 12 */
+
+/***/
+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());
+      }
+    }
+
+  }
+  /***/
+
+},
+/* 13 */
+
+/***/
+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";
@@ -1245,7 +2614,7 @@ class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1261,7 +2630,7 @@ class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
-/* harmony import */ var _util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(20);
+/* harmony import */ var _util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(21);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -1411,7 +2780,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 20 */
+/* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1426,7 +2795,7 @@ function findFocusableNodes(root) {
 }
 
 /***/ }),
-/* 21 */
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1523,16 +2892,16 @@ ScrollDisabler.numModalsOpened = 0;
 /* harmony default export */ __webpack_exports__["a"] = (ScrollDisabler);
 
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CloseButton; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(24);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24);
+/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(25);
 /* 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);
 
@@ -1571,19 +2940,19 @@ class CloseButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon");
 
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon-button");
 
 /***/ }),
-/* 25 */
+/* 26 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";