@khanacademy/wonder-blocks-popover 1.1.0 → 1.1.1

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 12);
+/******/ 	return __webpack_require__(__webpack_require__.s = 22);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -117,100 +117,11 @@ module.exports = require("@khanacademy/wonder-blocks-color");
 
 /***/ }),
 /* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("aphrodite");
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-tooltip");
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-typography");
-
-/***/ }),
-/* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-modal");
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-icon");
-
-/***/ }),
-/* 11 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-icon-button");
-
-/***/ }),
-/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "Popover", function() { return /* reexport */ popover_Popover; });
-__webpack_require__.d(__webpack_exports__, "PopoverContent", function() { return /* reexport */ popover_content_PopoverContent; });
-__webpack_require__.d(__webpack_exports__, "PopoverContentCore", function() { return /* reexport */ popover_content_core_PopoverContentCore; });
-
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
-var helpers_extends = __webpack_require__(6);
-var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
-
-// EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(3);
-var external_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_react_dom_);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(2);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-tooltip"
-var wonder_blocks_tooltip_ = __webpack_require__(7);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-modal"
-var wonder_blocks_modal_ = __webpack_require__(9);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/popover-context.js
+/* 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 = {
   close: undefined,
@@ -227,70 +138,47 @@ const defaultContext = {
  *    of the following values: "top", "bottom", "left" or "right".
  */
 
-/* harmony default export */ var popover_context = (/*#__PURE__*/external_react_["createContext"](defaultContext));
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/popover-anchor.js
+/* harmony default export */ __webpack_exports__["a"] = (/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](defaultContext));
 
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
 
+module.exports = require("aphrodite");
 
+/***/ }),
+/* 7 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return findFocusableNodes; });
 /**
- * The element that triggers the popover dialog. This is also used as reference
- * to position the dialog itself.
+ * List of elements that can be focused
+ * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
  */
-class popover_anchor_PopoverAnchor extends external_react_["Component"] {
-  componentDidMount() {
-    const anchorNode = external_react_dom_["findDOMNode"](this);
-
-    if (anchorNode) {
-      this.props.anchorRef(anchorNode);
-    }
-  }
-
-  render() {
-    const {
-      children,
-      id,
-      onClick,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded
-    } = this.props; // props that will be injected to both children versions
-
-    const sharedProps = {
-      id: id,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded
-    };
-
-    if (typeof children === "function") {
-      const renderedChildren = children({
-        open: onClick
-      }); // we clone it to allow injecting the sharedProps defined before
-
-      return /*#__PURE__*/external_react_["cloneElement"](renderedChildren, sharedProps);
-    } else {
-      // add onClick handler to automatically open the dialog after
-      // clicking on this anchor element
-      return /*#__PURE__*/external_react_["cloneElement"](children, extends_default()({}, children.props, sharedProps, {
-        onClick: children.props.onClick ? e => {
-          e.stopPropagation(); // This is done to avoid overriding a custom onClick
-          // handler inside the children node
-
-          children.props.onClick();
-          onClick();
-        } : onClick
-      }));
-    }
-  }
-
+const FOCUSABLE_ELEMENTS = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function findFocusableNodes(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
-// EXTERNAL MODULE: external "aphrodite"
-var external_aphrodite_ = __webpack_require__(5);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
-var wonder_blocks_color_ = __webpack_require__(4);
-var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
+/***/ }),
+/* 8 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return PopoverContentCore; });
+/* 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__(6);
+/* 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 _close_button_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/popover-dialog.js
 
 
 
@@ -298,903 +186,1091 @@ var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_bloc
 
 
 /**
- * This is an internal component that we use to render the stuff that appears
- * when a popover shows. It's composed by two elements: The popover content,
- * that can be of type [PopoverContent](#PopoverContent) or
- * [PopoverContentCore](#PopoverContentCore), and the
- * [TooltipTail](#TooltipTail).
- *
- * The main difference with [TooltipBubble](#TooltipBubble) is that bubble
- * handles hover states and PopoverDialog doesn't need to handle any states at
- * all (for now). Also, PopoverDialog needs to coordinate different background
- * colors for the content and tail components.
- *
- * Note that without explicit positioning, the tail will not be centered.
+ * This is the base popover container. It’s used internally by all the variants.
+ * Also, it can be used to create flexible popovers.
  */
-class popover_dialog_PopoverDialog extends external_react_["Component"] {
-  componentDidUpdate(prevProps) {
-    // if the placement has changed, then we need to notify this to the
-    // parent component (`Popover`). This way, the context will update its
-    // `placement` value.
-    if (prevProps.placement !== this.props.placement) {
-      this.props.onUpdate(this.props.placement);
-    }
-  }
-
+class PopoverContentCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {
     const {
-      placement,
       children,
-      id,
-      isReferenceHidden,
-      updateBubbleRef,
-      updateTailRef,
-      tailOffset,
+      closeButtonLight,
+      closeButtonLabel,
+      closeButtonVisible,
+      color,
       style,
-      "aria-describedby": ariaDescribedby
+      testId
     } = this.props;
-    const contentProps = children.props; // extract the background color from the popover content
-
-    const color = contentProps.emphasized ? "blue" : contentProps.color;
-    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-      "aria-describedby": ariaDescribedby,
-      id: id,
-      role: "dialog",
-      ref: updateBubbleRef,
-      "data-placement": placement,
-      style: [isReferenceHidden && styles.hide, styles[`content-${placement}`], style]
-    }, children, /*#__PURE__*/external_react_["createElement"](wonder_blocks_tooltip_["TooltipTail"], {
-      color: color,
-      updateRef: updateTailRef,
-      placement: placement,
-      offset: tailOffset
-    })));
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      "data-test-id": testId,
+      style: [styles.content, color !== "white" && styles[color], style]
+    }, closeButtonVisible && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_close_button_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], {
+      "aria-label": closeButtonLabel,
+      light: closeButtonLight || color !== "white",
+      style: styles.closeButton,
+      testId: `${testId || "popover"}-close-btn`
+    }), children);
   }
 
 }
-const styles = external_aphrodite_["StyleSheet"].create({
-  /**
-   * The hide style ensures that the bounds of the popover stay unchanged.
-   * This is because popper.js calculates the bubble position based off its
-   * bounds and if we stopped rendering it entirely, it wouldn't know where to
-   * place it when it reappeared.
-   */
-  hide: {
-    pointerEvents: "none",
-    opacity: 0,
-    backgroundColor: "transparent",
-    color: "transparent"
+PopoverContentCore.defaultProps = {
+  color: "white",
+  closeButtonLight: false,
+  closeButtonVisible: false
+};
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  content: {
+    borderRadius: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xxxSmall_4,
+    border: `solid 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16}`,
+    backgroundColor: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white,
+    boxShadow: `0 ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8}px ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8}px 0 ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack8}`,
+    margin: 0,
+    maxWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16 * 18,
+    // 288px
+    padding: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.large_24,
+    overflow: "hidden",
+    justifyContent: "center"
   },
 
   /**
-   * Ensure the content and tail are properly arranged.
+   * Theming
    */
-  "content-top": {
-    flexDirection: "column"
-  },
-  "content-right": {
-    flexDirection: "row-reverse"
+  blue: {
+    backgroundColor: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.blue,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white
   },
-  "content-bottom": {
-    flexDirection: "column-reverse"
+  darkBlue: {
+    backgroundColor: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.darkBlue,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white
   },
-  "content-left": {
-    flexDirection: "row"
+
+  /**
+   * elements
+   */
+  closeButton: {
+    position: "absolute",
+    right: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8,
+    top: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8,
+    // Allows the button to be above the title and/or custom content
+    zIndex: 1
   }
 });
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/util/util.js
-/**
- * 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"])';
-function findFocusableNodes(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/initial-focus.js
 
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
 
+module.exports = require("@khanacademy/wonder-blocks-tooltip");
 
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
 
-/**
- * This component finds which element (from within the children) needs to
- * receive focus. After that, the children is rendered with the focus assigned.
- */
-class initial_focus_InitialFocus extends external_react_["Component"] {
-  constructor(...args) {
-    super(...args);
+module.exports = require("@khanacademy/wonder-blocks-typography");
 
-    this.setInitialFocusableElement = node => {
-      // 1. try to get element specified by the user
-      // 2. get first occurence from list of focusable elements
-      // 3. If no focusable elements are found, get the container itself
-      const firstFocusableElement = this.maybeGetInitialFocusElement(node) || this.maybeGetFirstFocusableElement(node) || node;
+/***/ }),
+/* 11 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-      if (firstFocusableElement === node) {
-        // add tabIndex to make the container focusable
-        node.tabIndex = -1;
-      } // using timeout to prevent page jumps when focusing on this element
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Popover; });
+/* 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__(3);
+/* 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__);
+/* harmony import */ var _khanacademy_wonder_blocks_tooltip__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
+/* harmony import */ var _khanacademy_wonder_blocks_tooltip__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_tooltip__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(13);
+/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _popover_context_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
+/* harmony import */ var _popover_anchor_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(14);
+/* harmony import */ var _popover_dialog_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(15);
+/* harmony import */ var _focus_manager_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(16);
+/* harmony import */ var _popover_event_listener_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(18);
+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); }
 
 
-      setTimeout(() => {
-        firstFocusableElement.focus();
-      }, 0);
-    };
-  }
 
-  componentDidMount() {
-    const node = external_react_dom_["findDOMNode"](this);
 
-    if (!node) {
-      return;
-    } // try to focus on the first focussable element
 
 
-    this.setInitialFocusableElement(node);
-  }
-  /**
-   * Gets the focusable element and applies focus to it
-   */
 
 
-  /**
-   * Returns an element specified by the user
-   */
-  maybeGetInitialFocusElement(node) {
-    const {
-      initialFocusId
-    } = this.props;
 
-    if (!initialFocusId) {
-      return null;
-    }
 
-    return node.querySelector(`#${initialFocusId}`);
+
+
+/**
+ * Popovers provide additional information that is related to a particular
+ * element and/or content. They can include text, links, icons and
+ * illustrations. The main difference with `Tooltip` is that they must be
+ * dismissed by clicking an element.
+ *
+ * This component uses the `PopoverPopper` component to position the
+ * `PopoverContentCore` component according to the children it is wrapping.
+ */
+class Popover extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      opened: !!this.props.opened,
+      anchorElement: null,
+      placement: this.props.placement
+    };
+    this.contentRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
+
+    this.handleClose = () => {
+      this.setState({
+        opened: false
+      }, () => {
+        this.props.onClose && this.props.onClose();
+      });
+    };
+
+    this.handleOpen = () => {
+      if (this.props.dismissEnabled && this.state.opened) {
+        this.setState({
+          opened: false
+        });
+      } else {
+        this.setState({
+          opened: true
+        });
+      }
+    };
+
+    this.updateRef = ref => {
+      const actualRef = ref && react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(ref);
+
+      if (actualRef && this.state.anchorElement !== actualRef) {
+        this.setState({
+          anchorElement: actualRef
+        });
+      }
+    };
   }
+
   /**
-   * Returns the first focusable element found inside the children
+   * Used to sync the `opened` state when Popover acts as a controlled
+   * component
    */
+  static getDerivedStateFromProps(props, state) {
+    return {
+      opened: typeof props.opened === "boolean" ? props.opened : state.opened
+    };
+  }
 
+  renderContent() {
+    const {
+      content
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](typeof content === "function" ? content({
+      close: this.handleClose
+    }) : content, {
+      ref: this.contentRef
+    });
+  }
 
-  maybeGetFirstFocusableElement(node) {
-    // get a collection of elements that can be focused
-    const focusableElements = findFocusableNodes(node);
-
-    if (!focusableElements.length) {
-      return null;
-    } // if found, return the first focusable element
-
+  renderPopper(uniqueId) {
+    const {
+      initialFocusId,
+      placement
+    } = this.props;
+    const {
+      anchorElement
+    } = this.state;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_focus_manager_js__WEBPACK_IMPORTED_MODULE_8__[/* default */ "a"], {
+      anchorElement: anchorElement,
+      initialFocusId: initialFocusId
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_tooltip__WEBPACK_IMPORTED_MODULE_3__["TooltipPopper"], {
+      anchorElement: anchorElement,
+      placement: placement
+    }, props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_popover_dialog_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"], _extends({}, props, {
+      "aria-describedby": `${uniqueId}-anchor`,
+      id: uniqueId,
+      onUpdate: placement => this.setState({
+        placement
+      })
+    }), this.renderContent())));
+  }
 
-    return focusableElements[0];
+  getHost() {
+    // If we are in a modal, we find where we should be portalling the
+    // popover by using the helper function from the modal package on the
+    // trigger element. If we are not in a modal, we use body as the
+    // location to portal to.
+    return Object(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_4__["maybeGetPortalMountedModalHostElement"])(this.state.anchorElement) || document.body;
   }
 
   render() {
-    return this.props.children;
+    const {
+      children,
+      dismissEnabled,
+      id
+    } = this.props;
+    const {
+      opened,
+      placement
+    } = this.state;
+    const popperHost = this.getHost();
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_popover_context_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].Provider, {
+      value: {
+        close: this.handleClose,
+        placement: placement
+      }
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["IDProvider"], {
+      id: id,
+      scope: "popover"
+    }, uniqueId => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_popover_anchor_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], {
+      anchorRef: this.updateRef,
+      id: `${uniqueId}-anchor`,
+      "aria-controls": uniqueId,
+      "aria-expanded": opened ? "true" : "false",
+      onClick: this.handleOpen
+    }, children), popperHost && opened && /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createPortal(this.renderPopper(uniqueId), popperHost))), dismissEnabled && opened && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_popover_event_listener_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"], {
+      onClose: this.handleClose,
+      contentRef: this.contentRef
+    }));
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/focus-manager.js
+Popover.defaultProps = {
+  placement: "top"
+};
+
+/***/ }),
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return PopoverContent; });
+/* 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__(6);
+/* 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_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _popover_content_core_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
+/* harmony import */ var _popover_context_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5);
+
 
 
 
 
 
+
+// Created to add custom styles to the icon or image elements
+const StyledImage = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["addStyle"])("img");
 /**
- * This component ensures that focus flows correctly when the popover is open.
- *
- * Inside the popover:
- * - `tab`: Moves focus to the next focusable element.
- * - `shift + tab`: Moves focus to the previous focusable element.
- *
- * After the focus reaches the start/end of the popover,  then we handle two
- * different scenarios:
- *
- * 1. If the focus has reached the last focusable element inside the popover,
- *    the next tab will set focus on the next focusable element that exists
- *    after the PopoverAnchor.
- * 2. If the focus is set to the first focusable element inside the popover, the
- *    next shift + tab will set focus on the PopoverAnchor element.
- *
+ * This is the container that is consumed by all the predefined variations. Its
+ * main responsibility is populate the contents depending on the variation used.
  */
-class focus_manager_FocusManager extends external_react_["Component"] {
+
+class PopoverContent extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(...args) {
     super(...args);
-    this.focusableElementsInPopover = [];
 
-    this.addEventListeners = () => {
+    this.maybeRenderImage = ({
+      placement
+    }) => {
       const {
-        anchorElement
+        image
       } = this.props;
 
-      if (anchorElement) {
-        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
-      } // tries to get the next focusable element outside of the popover
-
-
-      this.nextElementAfterPopover = this.getNextFocusableElement();
-
-      if (this.nextElementAfterPopover) {
-        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+      if (!image) {
+        return null;
       }
+
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+        style: [styles.image, placement === "bottom" && styles.imageToBottom]
+      }, image);
     };
 
-    this.getNextFocusableElement = () => {
+    this.maybeRenderIcon = () => {
       const {
-        anchorElement
+        icon
       } = this.props;
 
-      if (!anchorElement || this.nextElementAfterPopover) {
-        return;
-      } // get the total list of focusable elements within the document
-
-
-      const focusableElements = findFocusableNodes(document); // get anchor element index
-
-      const anchorIndex = focusableElements.indexOf(anchorElement);
-
-      if (anchorIndex >= 0) {
-        // guess next focusable element index
-        const nextElementIndex = anchorIndex < focusableElements.length - 1 ? anchorIndex + 1 : 0; // get next element's DOM reference
-
-        return focusableElements[nextElementIndex];
+      if (!icon) {
+        return null;
       }
 
-      return;
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+        style: styles.iconContainer
+      }, typeof icon !== "string" ? icon : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledImage, {
+        src: icon,
+        style: styles.icon
+      }));
     };
 
-    this.getComponentRootNode = node => {
-      if (!node) {
-        // The component is being umounted
-        return;
-      }
-
-      const rootNode = external_react_dom_["findDOMNode"](node);
+    this.maybeRenderActions = close => {
+      const {
+        actions
+      } = this.props;
 
-      if (!rootNode) {
-        throw new Error("Assertion error: root node should exist after mount");
+      if (!actions) {
+        return null;
       }
 
-      this.rootNode = rootNode; // store the list of possible focusable elements inside the popover
-
-      this.focusableElementsInPopover = findFocusableNodes(this.rootNode);
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+        style: styles.actions
+      }, typeof actions === "function" ? actions({
+        close: close
+      }) : actions);
     };
+  }
 
-    this.handleFocusPreviousFocusableElement = () => {
-      if (this.props.anchorElement) {
-        this.props.anchorElement.focus();
-      }
-    };
+  componentDidMount() {
+    const {
+      icon,
+      image
+    } = this.props; // this runtime check is added to support <svg> and <img> elements
+    // inside the image prop
 
-    this.handleFocusNextFocusableElement = () => {
-      if (this.nextElementAfterPopover) {
-        this.nextElementAfterPopover.focus();
-      }
-    };
+    if (image && icon) {
+      throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.");
+    }
+  }
+  /**
+   * Runtime validation in case we try to use an invalid shape
+   */
 
-    this.handleKeydownPreviousFocusableElement = e => {
-      // It will try focus only if the user is pressing `tab`
-      if (e.key === "Tab" && !e.shiftKey) {
-        e.preventDefault();
-        this.focusableElementsInPopover[0].focus();
-      }
-    };
 
-    this.handleKeydownNextFocusableElement = e => {
-      // It will try focus only if the user is pressing `Shift+tab`
-      if (e.key === "Tab" && e.shiftKey) {
-        e.preventDefault();
-        const lastElementIndex = this.focusableElementsInPopover.length - 1;
-        this.focusableElementsInPopover[lastElementIndex].focus();
-      }
-    };
+  validateProps({
+    placement
+  }) {
+    // illustration popover can't be placed horizontally
+    if (this.props.image && (placement === "left" || placement === "right")) {
+      throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.");
+    }
+  }
+
+  render() {
+    const {
+      closeButtonLabel,
+      closeButtonVisible,
+      content,
+      emphasized = undefined,
+      icon,
+      image,
+      style,
+      title,
+      testId
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_popover_context_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"].Consumer, null, ({
+      close,
+      placement
+    }) => {
+      // verify if the props are correct
+      this.validateProps({
+        close,
+        placement
+      });
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_popover_content_core_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], {
+        color: emphasized ? "blue" : "white",
+        closeButtonLight: image && placement === "top",
+        closeButtonLabel: closeButtonLabel,
+        closeButtonVisible: closeButtonVisible,
+        style: style,
+        testId: testId
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+        style: !!icon && styles.withIcon
+      }, this.maybeRenderImage({
+        placement
+      }), this.maybeRenderIcon(), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+        style: styles.text
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["HeadingSmall"], {
+        style: styles.title
+      }, title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["Body"], null, content))), this.maybeRenderActions(close));
+    });
   }
 
+}
+PopoverContent.defaultProps = {
+  closeButtonVisible: false
+};
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   /**
-   * The focusable element that is positioned after the trigger element
+   * Shared styles
    */
+  actions: {
+    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.large_24,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  },
+  text: {
+    justifyContent: "center"
+  },
+  title: {
+    marginBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.xSmall_8
+  },
 
   /**
-   * Tabbing is restricted to descendents of this element.
+   * Icon styles
    */
-  componentDidMount() {
-    this.addEventListeners();
-  }
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    height: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.xxxLarge_64,
+    width: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.xxxLarge_64,
+    minWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.xxxLarge_64,
+    marginRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.medium_16,
+    overflow: "hidden"
+  },
+  icon: {
+    width: "100%"
+  },
+  withIcon: {
+    flexDirection: "row"
+  },
 
-  componentDidUpdate() {
-    this.addEventListeners();
-  }
   /**
-   * Remove keydown listeners
+   * Illustration styles
    */
+  image: {
+    marginBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.large_24,
+    marginLeft: -_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.large_24,
+    marginRight: -_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.large_24,
+    marginTop: -_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.large_24,
+    width: `calc(100% + ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.large_24 * 2}px)`
+  },
+  imageToBottom: {
+    marginBottom: -_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.large_24,
+    marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.large_24,
+    order: 1
+  }
+});
 
+/***/ }),
+/* 13 */
+/***/ (function(module, exports) {
 
-  componentWillUnmount() {
-    const {
-      anchorElement
-    } = this.props;
+module.exports = require("@khanacademy/wonder-blocks-modal");
 
-    if (anchorElement) {
-      // wait for styles to applied, then return the focus to the anchor
-      setTimeout(() => anchorElement.focus(), 0);
-      anchorElement.removeEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
-    }
+/***/ }),
+/* 14 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-    if (this.nextElementAfterPopover) {
-      this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return PopoverAnchor; });
+/* 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__(3);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+
+
+
+/**
+ * The element that triggers the popover dialog. This is also used as reference
+ * to position the dialog itself.
+ */
+class PopoverAnchor extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  componentDidMount() {
+    const anchorNode = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](this);
+
+    if (anchorNode) {
+      this.props.anchorRef(anchorNode);
     }
   }
-  /**
-   * List of focusable elements within the popover content
-   */
-
 
   render() {
     const {
-      children
-    } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"]("div", {
-      tabIndex: "0",
-      onFocus: this.handleFocusPreviousFocusableElement,
-      style: {
-        position: "fixed"
-      }
-    }), /*#__PURE__*/external_react_["createElement"]("div", {
-      ref: this.getComponentRootNode
-    }, /*#__PURE__*/external_react_["createElement"](initial_focus_InitialFocus, {
-      initialFocusId: this.props.initialFocusId
-    }, children)), /*#__PURE__*/external_react_["createElement"]("div", {
-      tabIndex: "0",
-      onFocus: this.handleFocusNextFocusableElement,
-      style: {
-        position: "fixed"
-      }
-    }));
+      children,
+      id,
+      onClick,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded
+    } = this.props; // props that will be injected to both children versions
+
+    const sharedProps = {
+      id: id,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded
+    };
+
+    if (typeof children === "function") {
+      const renderedChildren = children({
+        open: onClick
+      }); // we clone it to allow injecting the sharedProps defined before
+
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](renderedChildren, sharedProps);
+    } else {
+      // add onClick handler to automatically open the dialog after
+      // clicking on this anchor element
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](children, { ...children.props,
+        ...sharedProps,
+        onClick: children.props.onClick ? e => {
+          e.stopPropagation(); // This is done to avoid overriding a custom onClick
+          // handler inside the children node
+
+          children.props.onClick();
+          onClick();
+        } : onClick
+      });
+    }
   }
 
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/popover-event-listener.js
 
+/***/ }),
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return PopoverDialog; });
+/* 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__(6);
+/* 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_tooltip__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
+/* harmony import */ var _khanacademy_wonder_blocks_tooltip__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_tooltip__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__);
 
-/**
- * A component that, when mounted, calls `onClose` when certain events occur.
- * This includes when pressing Escape or clicking outside the Popover.
- * @see @khanacademy/wonder-blocks-modal/components/modal-launcher.js
- */
-class popover_event_listener_PopoverEventListener extends external_react_["Component"] {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      isFirstClick: true
-    };
 
-    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();
-      }
-    };
 
-    this._handleClick = e => {
-      var _this$props$contentRe;
 
-      // Prevents the problem where clicking the trigger button
-      // triggers a click event and immediately closes the popover.
-      if (this.state.isFirstClick) {
-        this.setState({
-          isFirstClick: false
-        });
-        return;
-      }
 
-      const node = external_react_dom_default.a.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
 
-      if (node && !node.contains(e.target)) {
-        // Stop the event going any further.
-        // Only allow click to cancel one thing at a time.
-        e.preventDefault();
-        e.stopPropagation();
-        this.props.onClose();
-      }
-    };
+/**
+ * This is an internal component that we use to render the stuff that appears
+ * when a popover shows. It's composed by two elements: The popover content,
+ * that can be of type [PopoverContent](#PopoverContent) or
+ * [PopoverContentCore](#PopoverContentCore), and the
+ * [TooltipTail](#TooltipTail).
+ *
+ * The main difference with [TooltipBubble](#TooltipBubble) is that bubble
+ * handles hover states and PopoverDialog doesn't need to handle any states at
+ * all (for now). Also, PopoverDialog needs to coordinate different background
+ * colors for the content and tail components.
+ *
+ * Note that without explicit positioning, the tail will not be centered.
+ */
+class PopoverDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  componentDidUpdate(prevProps) {
+    // if the placement has changed, then we need to notify this to the
+    // parent component (`Popover`). This way, the context will update its
+    // `placement` value.
+    if (prevProps.placement !== this.props.placement) {
+      this.props.onUpdate(this.props.placement);
+    }
   }
 
-  componentDidMount() {
-    window.addEventListener("keyup", this._handleKeyup);
-    window.addEventListener("click", this._handleClick);
-  }
+  render() {
+    const {
+      placement,
+      children,
+      id,
+      isReferenceHidden,
+      updateBubbleRef,
+      updateTailRef,
+      tailOffset,
+      style,
+      "aria-describedby": ariaDescribedby
+    } = this.props;
+    const contentProps = children.props; // extract the background color from the popover content
 
-  componentWillUnmount() {
-    window.removeEventListener("keyup", this._handleKeyup);
-    window.removeEventListener("click", this._handleClick);
+    const color = contentProps.emphasized ? "blue" : contentProps.color;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+      "aria-describedby": ariaDescribedby,
+      id: id,
+      role: "dialog",
+      ref: updateBubbleRef,
+      "data-placement": placement,
+      style: [isReferenceHidden && styles.hide, styles[`content-${placement}`], style]
+    }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_tooltip__WEBPACK_IMPORTED_MODULE_3__["TooltipTail"], {
+      color: color,
+      updateRef: updateTailRef,
+      placement: placement,
+      offset: tailOffset
+    })));
   }
 
-  render() {
-    return null;
+}
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  /**
+   * The hide style ensures that the bounds of the popover stay unchanged.
+   * This is because popper.js calculates the bubble position based off its
+   * bounds and if we stopped rendering it entirely, it wouldn't know where to
+   * place it when it reappeared.
+   */
+  hide: {
+    pointerEvents: "none",
+    opacity: 0,
+    backgroundColor: "transparent",
+    color: "transparent"
+  },
+
+  /**
+   * Ensure the content and tail are properly arranged.
+   */
+  "content-top": {
+    flexDirection: "column"
+  },
+  "content-right": {
+    flexDirection: "row-reverse"
+  },
+  "content-bottom": {
+    flexDirection: "column-reverse"
+  },
+  "content-left": {
+    flexDirection: "row"
   }
+});
+
+/***/ }),
+/* 16 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FocusManager; });
+/* 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__(3);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _util_util_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _initial_focus_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
+
+
+
+
+
+/**
+ * This component ensures that focus flows correctly when the popover is open.
+ *
+ * Inside the popover:
+ * - `tab`: Moves focus to the next focusable element.
+ * - `shift + tab`: Moves focus to the previous focusable element.
+ *
+ * After the focus reaches the start/end of the popover,  then we handle two
+ * different scenarios:
+ *
+ * 1. If the focus has reached the last focusable element inside the popover,
+ *    the next tab will set focus on the next focusable element that exists
+ *    after the PopoverAnchor.
+ * 2. If the focus is set to the first focusable element inside the popover, the
+ *    next shift + tab will set focus on the PopoverAnchor element.
+ *
+ */
+class FocusManager extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
+    this.focusableElementsInPopover = [];
+
+    this.addEventListeners = () => {
+      const {
+        anchorElement
+      } = this.props;
+
+      if (anchorElement) {
+        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
+      } // tries to get the next focusable element outside of the popover
+
+
+      this.nextElementAfterPopover = this.getNextFocusableElement();
 
-}
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/popover.js
+      if (this.nextElementAfterPopover) {
+        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+      }
+    };
 
+    this.getNextFocusableElement = () => {
+      const {
+        anchorElement
+      } = this.props;
 
+      if (!anchorElement || this.nextElementAfterPopover) {
+        return;
+      } // get the total list of focusable elements within the document
 
 
+      const focusableElements = Object(_util_util_js__WEBPACK_IMPORTED_MODULE_2__[/* findFocusableNodes */ "a"])(document); // get anchor element index
 
+      const anchorIndex = focusableElements.indexOf(anchorElement);
 
+      if (anchorIndex >= 0) {
+        // guess next focusable element index
+        const nextElementIndex = anchorIndex < focusableElements.length - 1 ? anchorIndex + 1 : 0; // get next element's DOM reference
 
+        return focusableElements[nextElementIndex];
+      }
 
+      return;
+    };
 
+    this.getComponentRootNode = node => {
+      if (!node) {
+        // The component is being umounted
+        return;
+      }
 
+      const rootNode = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](node);
 
+      if (!rootNode) {
+        throw new Error("Assertion error: root node should exist after mount");
+      }
 
-/**
- * Popovers provide additional information that is related to a particular
- * element and/or content. They can include text, links, icons and
- * illustrations. The main difference with `Tooltip` is that they must be
- * dismissed by clicking an element.
- *
- * This component uses the `PopoverPopper` component to position the
- * `PopoverContentCore` component according to the children it is wrapping.
- */
-class popover_Popover extends external_react_["Component"] {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      opened: !!this.props.opened,
-      anchorElement: null,
-      placement: this.props.placement
+      this.rootNode = rootNode; // store the list of possible focusable elements inside the popover
+
+      this.focusableElementsInPopover = Object(_util_util_js__WEBPACK_IMPORTED_MODULE_2__[/* findFocusableNodes */ "a"])(this.rootNode);
     };
-    this.contentRef = /*#__PURE__*/external_react_["createRef"]();
 
-    this.handleClose = () => {
-      this.setState({
-        opened: false
-      }, () => {
-        this.props.onClose && this.props.onClose();
-      });
+    this.handleFocusPreviousFocusableElement = () => {
+      if (this.props.anchorElement) {
+        this.props.anchorElement.focus();
+      }
     };
 
-    this.handleOpen = () => {
-      if (this.props.dismissEnabled && this.state.opened) {
-        this.setState({
-          opened: false
-        });
-      } else {
-        this.setState({
-          opened: true
-        });
+    this.handleFocusNextFocusableElement = () => {
+      if (this.nextElementAfterPopover) {
+        this.nextElementAfterPopover.focus();
       }
     };
 
-    this.updateRef = ref => {
-      const actualRef = ref && external_react_dom_default.a.findDOMNode(ref);
+    this.handleKeydownPreviousFocusableElement = e => {
+      // It will try focus only if the user is pressing `tab`
+      if (e.key === "Tab" && !e.shiftKey) {
+        e.preventDefault();
+        this.focusableElementsInPopover[0].focus();
+      }
+    };
 
-      if (actualRef && this.state.anchorElement !== actualRef) {
-        this.setState({
-          anchorElement: actualRef
-        });
+    this.handleKeydownNextFocusableElement = e => {
+      // It will try focus only if the user is pressing `Shift+tab`
+      if (e.key === "Tab" && e.shiftKey) {
+        e.preventDefault();
+        const lastElementIndex = this.focusableElementsInPopover.length - 1;
+        this.focusableElementsInPopover[lastElementIndex].focus();
       }
     };
   }
 
   /**
-   * Used to sync the `opened` state when Popover acts as a controlled
-   * component
+   * The focusable element that is positioned after the trigger element
    */
-  static getDerivedStateFromProps(props, state) {
-    return {
-      opened: typeof props.opened === "boolean" ? props.opened : state.opened
-    };
+
+  /**
+   * Tabbing is restricted to descendents of this element.
+   */
+  componentDidMount() {
+    this.addEventListeners();
   }
 
-  renderContent() {
-    const {
-      content
-    } = this.props;
-    return /*#__PURE__*/external_react_["cloneElement"](typeof content === "function" ? content({
-      close: this.handleClose
-    }) : content, {
-      ref: this.contentRef
-    });
+  componentDidUpdate() {
+    this.addEventListeners();
   }
+  /**
+   * Remove keydown listeners
+   */
 
-  renderPopper(uniqueId) {
-    const {
-      initialFocusId,
-      placement
-    } = this.props;
+
+  componentWillUnmount() {
     const {
       anchorElement
-    } = this.state;
-    return /*#__PURE__*/external_react_["createElement"](focus_manager_FocusManager, {
-      anchorElement: anchorElement,
-      initialFocusId: initialFocusId
-    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_tooltip_["TooltipPopper"], {
-      anchorElement: anchorElement,
-      placement: placement
-    }, props => /*#__PURE__*/external_react_["createElement"](popover_dialog_PopoverDialog, extends_default()({}, props, {
-      "aria-describedby": `${uniqueId}-anchor`,
-      id: uniqueId,
-      onUpdate: placement => this.setState({
-        placement
-      })
-    }), this.renderContent())));
-  }
+    } = this.props;
 
-  getHost() {
-    // If we are in a modal, we find where we should be portalling the
-    // popover by using the helper function from the modal package on the
-    // trigger element. If we are not in a modal, we use body as the
-    // location to portal to.
-    return Object(wonder_blocks_modal_["maybeGetPortalMountedModalHostElement"])(this.state.anchorElement) || document.body;
+    if (anchorElement) {
+      // wait for styles to applied, then return the focus to the anchor
+      setTimeout(() => anchorElement.focus(), 0);
+      anchorElement.removeEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
+    }
+
+    if (this.nextElementAfterPopover) {
+      this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+    }
   }
+  /**
+   * List of focusable elements within the popover content
+   */
+
 
   render() {
     const {
-      children,
-      dismissEnabled,
-      id
+      children
     } = this.props;
-    const {
-      opened,
-      placement
-    } = this.state;
-    const popperHost = this.getHost();
-    return /*#__PURE__*/external_react_["createElement"](popover_context.Provider, {
-      value: {
-        close: this.handleClose,
-        placement: placement
+    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",
+      onFocus: this.handleFocusPreviousFocusableElement,
+      style: {
+        position: "fixed"
+      }
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+      ref: this.getComponentRootNode
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_initial_focus_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
+      initialFocusId: this.props.initialFocusId
+    }, children)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+      tabIndex: "0",
+      onFocus: this.handleFocusNextFocusableElement,
+      style: {
+        position: "fixed"
       }
-    }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["IDProvider"], {
-      id: id,
-      scope: "popover"
-    }, uniqueId => /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](popover_anchor_PopoverAnchor, {
-      anchorRef: this.updateRef,
-      id: `${uniqueId}-anchor`,
-      "aria-controls": uniqueId,
-      "aria-expanded": opened ? "true" : "false",
-      onClick: this.handleOpen
-    }, children), popperHost && opened && /*#__PURE__*/external_react_dom_default.a.createPortal(this.renderPopper(uniqueId), popperHost))), dismissEnabled && opened && /*#__PURE__*/external_react_["createElement"](popover_event_listener_PopoverEventListener, {
-      onClose: this.handleClose,
-      contentRef: this.contentRef
     }));
   }
 
 }
-popover_Popover.defaultProps = {
-  placement: "top"
-};
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-spacing"
-var wonder_blocks_spacing_ = __webpack_require__(1);
-var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_spacing_);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
-var wonder_blocks_typography_ = __webpack_require__(8);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
-var wonder_blocks_icon_ = __webpack_require__(10);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon-button"
-var wonder_blocks_icon_button_ = __webpack_require__(11);
-var wonder_blocks_icon_button_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_button_);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/close-button.js
+/***/ }),
+/* 17 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InitialFocus; });
+/* 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__(3);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _util_util_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 
 
 
 
 /**
- * This is the visual component rendering the close button that is rendered
- * inside the PopoverContentCore. It’s rendered if closeButtonVisible is set
- * true.
+ * This component finds which element (from within the children) needs to
+ * receive focus. After that, the children is rendered with the focus assigned.
  */
-class close_button_CloseButton extends external_react_["Component"] {
-  render() {
-    const {
-      light,
-      "aria-label": ariaLabel,
-      style,
-      testId
-    } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](popover_context.Consumer, null, ({
-      close
-    }) => {
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_button_default.a, {
-        icon: wonder_blocks_icon_["icons"].dismiss,
-        "aria-label": ariaLabel,
-        onClick: close,
-        kind: light ? "primary" : "tertiary",
-        light: light,
-        style: style,
-        testId: testId
-      });
-    });
-  }
-
-}
-close_button_CloseButton.defaultProps = {
-  light: true,
-  "aria-label": "Close Popover"
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/popover-content-core.js
-
+class InitialFocus extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
 
+    this.setInitialFocusableElement = node => {
+      // 1. try to get element specified by the user
+      // 2. get first occurence from list of focusable elements
+      // 3. If no focusable elements are found, get the container itself
+      const firstFocusableElement = this.maybeGetInitialFocusElement(node) || this.maybeGetFirstFocusableElement(node) || node;
 
+      if (firstFocusableElement === node) {
+        // add tabIndex to make the container focusable
+        node.tabIndex = -1;
+      } // using timeout to prevent page jumps when focusing on this element
 
 
+      setTimeout(() => {
+        firstFocusableElement.focus();
+      }, 0);
+    };
+  }
 
+  componentDidMount() {
+    const node = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](this);
 
-/**
- * This is the base popover container. It’s used internally by all the variants.
- * Also, it can be used to create flexible popovers.
- */
-class popover_content_core_PopoverContentCore extends external_react_["Component"] {
-  render() {
-    const {
-      children,
-      closeButtonLight,
-      closeButtonLabel,
-      closeButtonVisible,
-      color,
-      style,
-      testId
-    } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-      "data-test-id": testId,
-      style: [popover_content_core_styles.content, color !== "white" && popover_content_core_styles[color], style]
-    }, closeButtonVisible && /*#__PURE__*/external_react_["createElement"](close_button_CloseButton, {
-      "aria-label": closeButtonLabel,
-      light: closeButtonLight || color !== "white",
-      style: popover_content_core_styles.closeButton,
-      testId: `${testId || "popover"}-close-btn`
-    }), children);
+    if (!node) {
+      return;
+    } // try to focus on the first focussable element
+
+
+    this.setInitialFocusableElement(node);
   }
+  /**
+   * Gets the focusable element and applies focus to it
+   */
 
-}
-popover_content_core_PopoverContentCore.defaultProps = {
-  color: "white",
-  closeButtonLight: false,
-  closeButtonVisible: false
-};
-const popover_content_core_styles = external_aphrodite_["StyleSheet"].create({
-  content: {
-    borderRadius: wonder_blocks_spacing_default.a.xxxSmall_4,
-    border: `solid 1px ${wonder_blocks_color_default.a.offBlack16}`,
-    backgroundColor: wonder_blocks_color_default.a.white,
-    boxShadow: `0 ${wonder_blocks_spacing_default.a.xSmall_8}px ${wonder_blocks_spacing_default.a.xSmall_8}px 0 ${wonder_blocks_color_default.a.offBlack8}`,
-    margin: 0,
-    maxWidth: wonder_blocks_spacing_default.a.medium_16 * 18,
-    // 288px
-    padding: wonder_blocks_spacing_default.a.large_24,
-    overflow: "hidden",
-    justifyContent: "center"
-  },
 
   /**
-   * Theming
+   * Returns an element specified by the user
    */
-  blue: {
-    backgroundColor: wonder_blocks_color_default.a.blue,
-    color: wonder_blocks_color_default.a.white
-  },
-  darkBlue: {
-    backgroundColor: wonder_blocks_color_default.a.darkBlue,
-    color: wonder_blocks_color_default.a.white
-  },
+  maybeGetInitialFocusElement(node) {
+    const {
+      initialFocusId
+    } = this.props;
+
+    if (!initialFocusId) {
+      return null;
+    }
 
+    return node.querySelector(`#${initialFocusId}`);
+  }
   /**
-   * elements
+   * Returns the first focusable element found inside the children
    */
-  closeButton: {
-    position: "absolute",
-    right: wonder_blocks_spacing_default.a.xSmall_8,
-    top: wonder_blocks_spacing_default.a.xSmall_8,
-    // Allows the button to be above the title and/or custom content
-    zIndex: 1
+
+
+  maybeGetFirstFocusableElement(node) {
+    // get a collection of elements that can be focused
+    const focusableElements = Object(_util_util_js__WEBPACK_IMPORTED_MODULE_2__[/* findFocusableNodes */ "a"])(node);
+
+    if (!focusableElements.length) {
+      return null;
+    } // if found, return the first focusable element
+
+
+    return focusableElements[0];
   }
-});
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/components/popover-content.js
 
+  render() {
+    return this.props.children;
+  }
 
+}
 
+/***/ }),
+/* 18 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return PopoverEventListener; });
+/* 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__(3);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
 
 
 
-// Created to add custom styles to the icon or image elements
-const StyledImage = Object(wonder_blocks_core_["addStyle"])("img");
 /**
- * This is the container that is consumed by all the predefined variations. Its
- * main responsibility is populate the contents depending on the variation used.
+ * A component that, when mounted, calls `onClose` when certain events occur.
+ * This includes when pressing Escape or clicking outside the Popover.
+ * @see @khanacademy/wonder-blocks-modal/components/modal-launcher.js
  */
-
-class popover_content_PopoverContent extends external_react_["Component"] {
+class PopoverEventListener extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(...args) {
     super(...args);
+    this.state = {
+      isFirstClick: true
+    };
 
-    this.maybeRenderImage = ({
-      placement
-    }) => {
-      const {
-        image
-      } = this.props;
-
-      if (!image) {
-        return null;
+    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();
       }
-
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: [popover_content_styles.image, placement === "bottom" && popover_content_styles.imageToBottom]
-      }, image);
     };
 
-    this.maybeRenderIcon = () => {
-      const {
-        icon
-      } = this.props;
+    this._handleClick = e => {
+      var _this$props$contentRe;
 
-      if (!icon) {
-        return null;
+      // Prevents the problem where clicking the trigger button
+      // triggers a click event and immediately closes the popover.
+      if (this.state.isFirstClick) {
+        this.setState({
+          isFirstClick: false
+        });
+        return;
       }
 
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: popover_content_styles.iconContainer
-      }, typeof icon !== "string" ? icon : /*#__PURE__*/external_react_["createElement"](StyledImage, {
-        src: icon,
-        style: popover_content_styles.icon
-      }));
-    };
-
-    this.maybeRenderActions = close => {
-      const {
-        actions
-      } = this.props;
+      const node = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
 
-      if (!actions) {
-        return null;
+      if (node && !node.contains(e.target)) {
+        // Stop the event going any further.
+        // Only allow click to cancel one thing at a time.
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onClose();
       }
-
-      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: popover_content_styles.actions
-      }, typeof actions === "function" ? actions({
-        close: close
-      }) : actions);
     };
   }
 
   componentDidMount() {
-    const {
-      icon,
-      image
-    } = this.props; // this runtime check is added to support <svg> and <img> elements
-    // inside the image prop
-
-    if (image && icon) {
-      throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.");
-    }
+    window.addEventListener("keyup", this._handleKeyup);
+    window.addEventListener("click", this._handleClick);
   }
-  /**
-   * Runtime validation in case we try to use an invalid shape
-   */
 
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this._handleKeyup);
+    window.removeEventListener("click", this._handleClick);
+  }
 
-  validateProps({
-    placement
-  }) {
-    // illustration popover can't be placed horizontally
-    if (this.props.image && (placement === "left" || placement === "right")) {
-      throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.");
-    }
+  render() {
+    return null;
   }
 
+}
+
+/***/ }),
+/* 19 */
+/***/ (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__(20);
+/* 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__(21);
+/* 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 _popover_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
+
+
+
+
+
+/**
+ * This is the visual component rendering the close button that is rendered
+ * inside the PopoverContentCore. It’s rendered if closeButtonVisible is set
+ * true.
+ */
+class CloseButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {
     const {
-      closeButtonLabel,
-      closeButtonVisible,
-      content,
-      emphasized = undefined,
-      icon,
-      image,
+      light,
+      "aria-label": ariaLabel,
       style,
-      title,
       testId
     } = this.props;
-    return /*#__PURE__*/external_react_["createElement"](popover_context.Consumer, null, ({
-      close,
-      placement
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_popover_context_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].Consumer, null, ({
+      close
     }) => {
-      // verify if the props are correct
-      this.validateProps({
-        close,
-        placement
-      });
-      return /*#__PURE__*/external_react_["createElement"](popover_content_core_PopoverContentCore, {
-        color: emphasized ? "blue" : "white",
-        closeButtonLight: image && placement === "top",
-        closeButtonLabel: closeButtonLabel,
-        closeButtonVisible: closeButtonVisible,
+      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,
+        "aria-label": ariaLabel,
+        onClick: close,
+        kind: light ? "primary" : "tertiary",
+        light: light,
         style: style,
         testId: testId
-      }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: !!icon && popover_content_styles.withIcon
-      }, this.maybeRenderImage({
-        placement
-      }), this.maybeRenderIcon(), /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
-        style: popover_content_styles.text
-      }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["HeadingSmall"], {
-        style: popover_content_styles.title
-      }, title), /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["Body"], null, content))), this.maybeRenderActions(close));
+      });
     });
   }
 
 }
-popover_content_PopoverContent.defaultProps = {
-  closeButtonVisible: false
+CloseButton.defaultProps = {
+  light: true,
+  "aria-label": "Close Popover"
 };
-const popover_content_styles = external_aphrodite_["StyleSheet"].create({
-  /**
-   * Shared styles
-   */
-  actions: {
-    marginTop: wonder_blocks_spacing_default.a.large_24,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "flex-end"
-  },
-  text: {
-    justifyContent: "center"
-  },
-  title: {
-    marginBottom: wonder_blocks_spacing_default.a.xSmall_8
-  },
 
-  /**
-   * Icon styles
-   */
-  iconContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    height: wonder_blocks_spacing_default.a.xxxLarge_64,
-    width: wonder_blocks_spacing_default.a.xxxLarge_64,
-    minWidth: wonder_blocks_spacing_default.a.xxxLarge_64,
-    marginRight: wonder_blocks_spacing_default.a.medium_16,
-    overflow: "hidden"
-  },
-  icon: {
-    width: "100%"
-  },
-  withIcon: {
-    flexDirection: "row"
-  },
+/***/ }),
+/* 20 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-icon");
+
+/***/ }),
+/* 21 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-icon-button");
+
+/***/ }),
+/* 22 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_popover_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Popover", function() { return _components_popover_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
+
+/* harmony import */ var _components_popover_content_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PopoverContent", function() { return _components_popover_content_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
+
+/* harmony import */ var _components_popover_content_core_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PopoverContentCore", function() { return _components_popover_content_core_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
-  /**
-   * Illustration styles
-   */
-  image: {
-    marginBottom: wonder_blocks_spacing_default.a.large_24,
-    marginLeft: -wonder_blocks_spacing_default.a.large_24,
-    marginRight: -wonder_blocks_spacing_default.a.large_24,
-    marginTop: -wonder_blocks_spacing_default.a.large_24,
-    width: `calc(100% + ${wonder_blocks_spacing_default.a.large_24 * 2}px)`
-  },
-  imageToBottom: {
-    marginBottom: -wonder_blocks_spacing_default.a.large_24,
-    marginTop: wonder_blocks_spacing_default.a.large_24,
-    order: 1
-  }
-});
-// CONCATENATED MODULE: ./packages/wonder-blocks-popover/src/index.js