@khanacademy/wonder-blocks-tooltip 1.4.1 → 1.4.3

package/dist/index.js

@@ -1,1495 +0,0 @@
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 19);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-spacing");
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-color");
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("aphrodite");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-dom");
-
-/***/ }),
-/* 6 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TooltipTail; });
-/* 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__(4);
-/* 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__(2);
-/* 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__(3);
-/* 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__);
-
-
-
-
-
-// TODO(somewhatabstract): Replace this really basic unique ID work with
-// something SSR-friendly and more robust.
-let tempIdCounter = 0;
-class TooltipTail extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  _calculateDimensionsFromPlacement() {
-    const {
-      placement
-    } = this.props; // The trimline, which we draw to make the tail flush to the bubble,
-    // has a thickness of 1. Since the line is drawn centered to the
-    // coordinates, we use an offset of 0.5 so that it properly covers what
-    // we want it to.
-
-    const trimlineOffset = 0.5; // Calculate the three points of the arrow. Depending on the tail's
-    // direction (i.e., the tooltip's "side"), we choose different points,
-    // and set our SVG's bounds differently.
-    //
-    // Note that when the tail points to the left or right, the width/height
-    // are inverted.
-
-    switch (placement) {
-      case "top":
-        return {
-          trimlinePoints: [`0,-${trimlineOffset}`, `${ARROW_WIDTH},-${trimlineOffset}`],
-          points: ["0,0", `${ARROW_WIDTH / 2},${ARROW_HEIGHT}`, `${ARROW_WIDTH},0`],
-          height: ARROW_HEIGHT,
-          width: ARROW_WIDTH
-        };
-
-      case "right":
-        return {
-          trimlinePoints: [`${ARROW_HEIGHT + trimlineOffset},0`, `${ARROW_HEIGHT + trimlineOffset},${ARROW_WIDTH}`],
-          points: [`${ARROW_HEIGHT},0`, `0,${ARROW_WIDTH / 2}`, `${ARROW_HEIGHT},${ARROW_WIDTH}`],
-          width: ARROW_HEIGHT,
-          height: ARROW_WIDTH
-        };
-
-      case "bottom":
-        return {
-          trimlinePoints: [`0, ${ARROW_HEIGHT + trimlineOffset}`, `${ARROW_WIDTH},${ARROW_HEIGHT + trimlineOffset}`],
-          points: [`0, ${ARROW_HEIGHT}`, `${ARROW_WIDTH / 2},0`, `${ARROW_WIDTH},${ARROW_HEIGHT}`],
-          width: ARROW_WIDTH,
-          height: ARROW_HEIGHT
-        };
-
-      case "left":
-        return {
-          trimlinePoints: [`-${trimlineOffset},0`, `-${trimlineOffset},${ARROW_WIDTH}`],
-          points: [`0,0`, `${ARROW_HEIGHT},${ARROW_WIDTH / 2}`, `0,${ARROW_WIDTH}`],
-          width: ARROW_HEIGHT,
-          height: ARROW_WIDTH
-        };
-
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-
-  _getFilterPositioning() {
-    const {
-      placement
-    } = this.props;
-
-    switch (placement) {
-      case "top":
-        return {
-          y: "-50%",
-          x: "-50%",
-          offsetShadowX: 0
-        };
-
-      case "bottom":
-        // No shadow on the arrow as it falls "under" the bubble.
-        return null;
-
-      case "left":
-        return {
-          y: "-50%",
-          x: "0%",
-          offsetShadowX: 1
-        };
-
-      case "right":
-        return {
-          y: "-50%",
-          x: "-100%",
-          offsetShadowX: -1
-        };
-
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-  /**
-   * Create an SVG filter that applies a blur to an element.
-   * We'll apply it to a dark shape outlining the tooltip, which
-   * will produce the overall effect of a drop-shadow.
-   *
-   * Also, scope its ID by side, so that tooltips with other
-   * "side" values don't end up using the wrong filter from
-   * elsewhere in the document. (The `height` value depends on
-   * which way the arrow is turned!)
-   */
-
-
-  _maybeRenderDropshadow(points) {
-    const position = this._getFilterPositioning();
-
-    if (!position) {
-      return null;
-    }
-
-    const {
-      placement
-    } = this.props;
-    const {
-      y,
-      x,
-      offsetShadowX
-    } = position;
-    const dropShadowFilterId = `tooltip-dropshadow-${placement}-${tempIdCounter++}`;
-    return [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("filter", {
-      key: "filter",
-      id: dropShadowFilterId // Height and width tell the filter how big of a canvas to
-      // draw based on its parent size. i.e. 2 times bigger.
-      // This is so that the diffuse gaussian blur has space to
-      // bleed into.
-      ,
-      width: "200%",
-      height: "200%" // The x and y values tell the filter where, relative to its
-      // parent, it should begin showing its canvas. Without these
-      // the filter would clip at 0,0, which would look really
-      // strange.
-      ,
-      x: x,
-      y: y
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("feGaussianBlur", {
-      in: "SourceAlpha",
-      stdDeviation: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xxSmall_6 / 2
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("feComponentTransfer", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("feFuncA", {
-      type: "linear",
-      slope: "0.3"
-    }))),
-    /*#__PURE__*/
-
-    /**
-     * Draw the tooltip arrow and apply the blur filter we created
-     * above, to produce a drop shadow effect.
-     * We move it down a bit with a translation, so that it is what
-     * we want.
-     *
-     * We offset the shadow on the X-axis because for left/right
-     * tails, we move the tail 1px toward the bubble. If we didn't
-     * offset the shadow, it would crash the bubble outline.
-     *
-     * See styles below for why we offset the arrow.
-     */
-    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("g", {
-      key: "dropshadow",
-      transform: `translate(${offsetShadowX},5.5)`
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("polyline", {
-      fill: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16,
-      points: points.join(" "),
-      stroke: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack32,
-      filter: `url(#${dropShadowFilterId})`
-    }))];
-  }
-
-  _minDistanceFromCorners(placement) {
-    const minDistanceFromCornersForTopBottom = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16;
-    const minDistanceFromCornersForLeftRight = 7;
-
-    switch (placement) {
-      case "top":
-      case "bottom":
-        return minDistanceFromCornersForTopBottom;
-
-      case "left":
-      case "right":
-        return minDistanceFromCornersForLeftRight;
-
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-
-  _getFullTailWidth() {
-    return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
-  }
-
-  _getFullTailHeight() {
-    return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
-  }
-
-  _getContainerStyle() {
-    const {
-      placement
-    } = this.props;
-    /**
-     * Ensure the container is sized properly for us to be placed correctly
-     * by the Popper.js code.
-     *
-     * Here we offset the arrow 1px toward the bubble. This ensures the arrow
-     * outline meets the bubble outline and allows the arrow to erase the bubble
-     * outline between the ends of the arrow outline. We do this so that the
-     * arrow outline and bubble outline create a single, seamless outline of
-     * the callout.
-     *
-     * NOTE: The widths and heights refer to the downward-pointing tail
-     * (i.e. placement="top"). When the tail points to the left or right
-     * instead, the width/height are inverted.
-     */
-
-    const fullTailWidth = this._getFullTailWidth();
-
-    const fullTailHeight = this._getFullTailHeight();
-
-    switch (placement) {
-      case "top":
-        return {
-          top: -1,
-          width: fullTailWidth,
-          height: fullTailHeight
-        };
-
-      case "right":
-        return {
-          left: 1,
-          width: fullTailHeight,
-          height: fullTailWidth
-        };
-
-      case "bottom":
-        return {
-          top: 1,
-          width: fullTailWidth,
-          height: fullTailHeight
-        };
-
-      case "left":
-        return {
-          left: -1,
-          width: fullTailHeight,
-          height: fullTailWidth
-        };
-
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-
-  _getArrowStyle() {
-    const {
-      placement
-    } = this.props;
-
-    switch (placement) {
-      case "top":
-        return {
-          marginLeft: MIN_DISTANCE_FROM_CORNERS,
-          marginRight: MIN_DISTANCE_FROM_CORNERS,
-          paddingBottom: DISTANCE_FROM_ANCHOR
-        };
-
-      case "right":
-        return {
-          marginTop: MIN_DISTANCE_FROM_CORNERS,
-          marginBottom: MIN_DISTANCE_FROM_CORNERS,
-          paddingLeft: DISTANCE_FROM_ANCHOR
-        };
-
-      case "bottom":
-        return {
-          marginLeft: MIN_DISTANCE_FROM_CORNERS,
-          marginRight: MIN_DISTANCE_FROM_CORNERS,
-          paddingTop: DISTANCE_FROM_ANCHOR
-        };
-
-      case "left":
-        return {
-          marginTop: MIN_DISTANCE_FROM_CORNERS,
-          marginBottom: MIN_DISTANCE_FROM_CORNERS,
-          paddingRight: DISTANCE_FROM_ANCHOR
-        };
-
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-
-  _renderArrow() {
-    const {
-      trimlinePoints,
-      points,
-      height,
-      width
-    } = this._calculateDimensionsFromPlacement();
-
-    const {
-      color
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", {
-      className: Object(aphrodite__WEBPACK_IMPORTED_MODULE_1__["css"])(styles.arrow),
-      style: this._getArrowStyle(),
-      width: width,
-      height: height,
-      "aria-hidden": true
-    }, this._maybeRenderDropshadow(points), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("polyline", {
-      fill: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a[color],
-      stroke: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a[color],
-      points: points.join(" ")
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("polyline", {
-      // Redraw the stroke on top of the background color,
-      // so that the ends aren't extra dark where they meet
-      // the border of the tooltip.
-      fill: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a[color],
-      points: points.join(" "),
-      stroke: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack16
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("polyline", {
-      stroke: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a[color],
-      points: trimlinePoints.join(" ")
-    }));
-  }
-
-  render() {
-    const {
-      offset,
-      placement,
-      updateRef
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: [styles.tailContainer, { ...offset
-      }, this._getContainerStyle()],
-      "data-placement": placement,
-      ref: updateRef
-    }, this._renderArrow());
-  }
-
-}
-/**
- * Some constants to make style generation easier to understand.
- * NOTE: The widths and heights refer to the downward-pointing tail
- * (i.e. placement="top"). When the tail points to the left or right instead,
- * the width/height are inverted.
- */
-
-TooltipTail.defaultProps = {
-  color: "white"
-};
-const DISTANCE_FROM_ANCHOR = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8;
-const MIN_DISTANCE_FROM_CORNERS = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8;
-const ARROW_WIDTH = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.large_24;
-const ARROW_HEIGHT = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.small_12;
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-  /**
-   * Container
-   */
-  tailContainer: {
-    position: "relative",
-    pointerEvents: "none"
-  },
-
-  /**
-   * Arrow
-   */
-  arrow: {
-    // Ensure the dropshadow bleeds outside our bounds.
-    overflow: "visible"
-  }
-});
-
-/***/ }),
-/* 7 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TooltipContent; });
-/* 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__(4);
-/* 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__(3);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
-/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__);
-
-
-
-
-
-
-
-/**
- * This component is used to provide the content that is to be rendered in the
- * tooltip bubble.
- *
- * ### Usage
- *
- * ```jsx
- * import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
- *
- * <TooltipContent title="Title text!">
- *  Some content in my tooltip.
- * </TooltipContent>
- * ```
- */
-class TooltipContent extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  _renderTitle() {
-    const {
-      title
-    } = this.props;
-
-    if (title) {
-      if (typeof title === "string") {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["HeadingSmall"], null, title);
-      } else {
-        return title;
-      }
-    }
-
-    return null;
-  }
-
-  _renderChildren() {
-    const {
-      children
-    } = this.props;
-
-    if (typeof children === "string") {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelMedium"], null, children);
-    } else {
-      return children;
-    }
-  }
-
-  render() {
-    const title = this._renderTitle();
-
-    const children = this._renderChildren();
-
-    const containerStyle = title ? styles.withTitle : styles.withoutTitle;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
-      style: containerStyle
-    }, title, title && children && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
-      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xxxSmall_4
-    }), children);
-  }
-
-}
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
-  withoutTitle: {
-    padding: `10px ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16}px`
-  },
-  withTitle: {
-    padding: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16
-  }
-});
-
-/***/ }),
-/* 8 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TooltipPopper; });
-/* 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_popper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18);
-/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_popper__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _util_ref_tracker_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
-/**
- * This component is a light wrapper for react-popper, allowing us to position
- * and control the tooltip bubble location and visibility as we need.
- */
-
-
-
-class TooltipPopper extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
-    this._bubbleRefTracker = new _util_ref_tracker_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"]();
-    this._tailRefTracker = new _util_ref_tracker_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"]();
-  }
-
-  _renderPositionedContent(popperProps) {
-    const {
-      children
-    } = this.props; // We'll hide some complexity from the children here and ensure
-    // that our placement always has a value.
-
-    const placement = // We know that popperProps.placement will only be one of our
-    // supported values, so just cast it.
-    popperProps.placement || this.props.placement; // Just in case the callbacks have changed, let's update our reference
-    // trackers.
-
-    this._bubbleRefTracker.setCallback(popperProps.ref);
-
-    this._tailRefTracker.setCallback(popperProps.arrowProps.ref); // Here we translate from the react-popper's PropperChildrenProps
-    // to our own TooltipBubbleProps.
-
-
-    const bubbleProps = {
-      placement,
-      style: {
-        // NOTE(jeresig): We can't just use `popperProps.style` here
-        // as the Flow type doesn't match Aphrodite's CSS flow props
-        // (as it doesn't camelCase props). So we just copy over the
-        // props that we need, instead.
-        top: popperProps.style.top,
-        left: popperProps.style.left,
-        bottom: popperProps.style.bottom,
-        right: popperProps.style.right,
-        position: popperProps.style.position,
-        transform: popperProps.style.transform
-      },
-      updateBubbleRef: this._bubbleRefTracker.updateRef,
-      tailOffset: {
-        bottom: popperProps.arrowProps.style.bottom,
-        right: popperProps.arrowProps.style.right,
-        top: popperProps.arrowProps.style.top,
-        left: popperProps.arrowProps.style.left,
-        transform: popperProps.arrowProps.style.transform
-      },
-      updateTailRef: this._tailRefTracker.updateRef,
-      isReferenceHidden: popperProps.isReferenceHidden
-    };
-    return children(bubbleProps);
-  }
-
-  render() {
-    const {
-      anchorElement,
-      placement
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_popper__WEBPACK_IMPORTED_MODULE_1__["Popper"], {
-      referenceElement: anchorElement,
-      strategy: "fixed",
-      placement: placement,
-      modifiers: [{
-        name: "preventOverflow",
-        options: {
-          rootBoundary: "viewport"
-        }
-      }]
-    }, props => this._renderPositionedContent(props));
-  }
-
-}
-
-/***/ }),
-/* 9 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* unused harmony export TooltipPortalAttributeName */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TooltipAppearanceDelay; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return TooltipDisappearanceDelay; });
-/**
- * The attribute used to identify a tooltip portal.
- */
-const TooltipPortalAttributeName = "data-tooltip-portal";
-const TooltipAppearanceDelay = 100;
-const TooltipDisappearanceDelay = 75;
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-typography");
-
-/***/ }),
-/* 11 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RefTracker; });
-/* 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__(5);
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
-/**
- * This is a little helper that we can use to wrap the react-popper reference
- * update methods so that we can convert a regular React ref into a DOM node
- * as react-popper expects, and also ensure we only update react-popper
- * on actual changes, and not just renders of the same thing.
- */
-
-
-class RefTracker {
-  constructor() {
-    this.updateRef = ref => {
-      if (ref) {
-        // We only want to update the reference if it is
-        // actually changed. Otherwise, we can trigger another render that
-        // would then update the reference again and just keep looping.
-        const domNode = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](ref);
-
-        if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
-          this._lastRef = domNode;
-          this._targetFn && this._targetFn(domNode);
-        }
-      }
-    };
-
-    this.setCallback = targetFn => {
-      if (this._targetFn !== targetFn) {
-        if (targetFn && typeof targetFn !== "function") {
-          throw new Error("targetFn must be a function");
-        }
-
-        this._targetFn = targetFn || null;
-
-        if (this._lastRef && this._targetFn) {
-          this._targetFn(this._lastRef);
-        }
-      }
-    };
-  }
-
-}
-
-/***/ }),
-/* 12 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Tooltip; });
-/* 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__(5);
-/* 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__(3);
-/* 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_modal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
-/* harmony import */ var _khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _tooltip_anchor_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14);
-/* harmony import */ var _tooltip_bubble_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
-/* harmony import */ var _tooltip_content_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
-/* harmony import */ var _tooltip_popper_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
-/**
- * The Tooltip component provides the means to anchor some additional
- * information to some content. The additional information is shown in a
- * callout that hovers above the page content. This additional information is
- * invoked by hovering over the anchored content, or focusing all or part of the
- * anchored content.
- *
- * This component is structured as follows:
- *
- * Tooltip (this component)
- * - TooltipAnchor (provides hover/focus behaviors on anchored content)
- *   - TooltipPortalMounter (creates portal into which the callout is rendered)
- * --------------------------- [PORTAL BOUNDARY] ------------------------------
- * - TooltipPopper (provides positioning for the callout using react-popper)
- *   - TooltipBubble (renders the callout borders, background and shadow)
- *     - TooltipContent (renders the callout content; the actual information)
- *     - TooltipTail (renders the callout tail and shadow that points from the
- *                     callout to the anchor content)
- */
-
-
-
-
-
-
-
-
-
-/**
- * Use a tooltip to help describe an on screen object.
- *
- * Tooltips:
- *  - contain text
- *  - (optional) contain small graphic elements to complement the text
- *  - appear on hover or focus (for non-assistive tech keyboard users)
- *  - must have a tail that points to a parent object
- *  - DO NOT include actions
- *
- * For more rich content see Popovers, for taking action on an object, see
- * Snackbars (proposed).
- *
- * ### Usage
- *
- * ```jsx
- * import Tooltip from "@khanacademy/wonder-blocks-tooltip";
- *
- * <Tooltip content="This is a text tooltip">
- *  Tooltip anchor
- * </Tooltip>
- * ```
- *
- */
-class Tooltip extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      active: false,
-      activeBubble: false,
-      anchorElement: null
-    };
-  }
-
-  /**
-   * Used to sync the `opened` state when Tooltip acts as a controlled
-   * component
-   */
-  static getDerivedStateFromProps(props, state) {
-    return {
-      active: typeof props.opened === "boolean" ? props.opened : state.active
-    };
-  }
-
-  _updateAnchorElement(ref) {
-    if (ref && ref !== this.state.anchorElement) {
-      this.setState({
-        anchorElement: ref
-      });
-    }
-  }
-
-  _renderBubbleContent() {
-    const {
-      title,
-      content
-    } = this.props;
-
-    if (typeof content === "string") {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_tooltip_content_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], {
-        title: title
-      }, content);
-    } else if (title) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](content, {
-        title
-      });
-    } else {
-      return content;
-    }
-  }
-
-  _renderPopper(ids) {
-    const {
-      id
-    } = this.props;
-    const bubbleId = ids ? ids.get(Tooltip.ariaContentId) : id;
-
-    if (!bubbleId) {
-      throw new Error("Did not get an identifier factory nor a id prop");
-    }
-
-    const {
-      placement
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_tooltip_popper_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"], {
-      anchorElement: this.state.anchorElement,
-      placement: placement
-    }, props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_tooltip_bubble_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], {
-      id: bubbleId,
-      style: props.style,
-      tailOffset: props.tailOffset,
-      isReferenceHidden: props.isReferenceHidden,
-      placement: props.placement,
-      updateTailRef: props.updateTailRef,
-      updateBubbleRef: props.updateBubbleRef,
-      onActiveChanged: active => this.setState({
-        activeBubble: active
-      })
-    }, this._renderBubbleContent()));
-  }
-
-  _getHost() {
-    const {
-      anchorElement
-    } = this.state;
-    return Object(_khanacademy_wonder_blocks_modal__WEBPACK_IMPORTED_MODULE_3__["maybeGetPortalMountedModalHostElement"])(anchorElement) || document.body;
-  }
-
-  _renderTooltipAnchor(ids) {
-    const {
-      children,
-      forceAnchorFocusivity
-    } = this.props;
-    const {
-      active,
-      activeBubble
-    } = this.state;
-
-    const popperHost = this._getHost(); // TODO(kevinb): update to use ReactPopper's React 16-friendly syntax
-
-
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_tooltip_anchor_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], {
-      forceAnchorFocusivity: forceAnchorFocusivity,
-      anchorRef: r => this._updateAnchorElement(r),
-      onActiveChanged: active => this.setState({
-        active
-      }),
-      ids: ids
-    }, children), popperHost && (active || activeBubble) && /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_1__["createPortal"](this._renderPopper(ids), popperHost));
-  }
-
-  render() {
-    const {
-      id
-    } = this.props;
-
-    if (id) {
-      // Let's bypass the extra weight of an id provider since we don't
-      // need it.
-      return this._renderTooltipAnchor();
-    } else {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["UniqueIDProvider"], {
-        scope: "tooltip",
-        mockOnFirstRender: true
-      }, ids => this._renderTooltipAnchor(ids));
-    }
-  }
-
-}
-Tooltip.defaultProps = {
-  forceAnchorFocusivity: true,
-  placement: "top"
-};
-Tooltip.ariaContentId = "aria-content";
-
-/***/ }),
-/* 13 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-modal");
-
-/***/ }),
-/* 14 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TooltipAnchor; });
-/* 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__(5);
-/* 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__(3);
-/* 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 _util_active_tracker_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9);
-/**
- * This component turns the given content into an accessible anchor for
- * positioning and displaying tooltips.
- */
-
-
-
-
-
-const TRACKER = new _util_active_tracker_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"]();
-class TooltipAnchor extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(props) {
-    super(props);
-
-    this.activeStateStolen = () => {
-      // Something wants the active state.
-      // Do we have it? If so, let's remember that.
-      // If we are already active, or we're inactive but have a timeoutID,
-      // then it was stolen from us.
-      this._stolenFromUs = this.state.active || !!this._timeoutID; // Let's first tell ourselves we're not focused (otherwise the tooltip
-      // will be sticky on the next hover of this anchor and that just looks
-      // weird).
-
-      this._focused = false; // Now update our actual state.
-
-      this._setActiveState(false, true);
-    };
-
-    this._handleFocusIn = () => {
-      this._updateActiveState(this._hovered, true);
-    };
-
-    this._handleFocusOut = () => {
-      this._updateActiveState(this._hovered, false);
-    };
-
-    this._handleMouseEnter = () => {
-      this._updateActiveState(true, this._focused);
-    };
-
-    this._handleMouseLeave = () => {
-      this._updateActiveState(false, this._focused);
-    };
-
-    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" && this.state.active) {
-        // 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.
-        //
-        // For example, using Escape to close a tooltip or a dropdown while
-        // displaying a modal and having the modal close as well. This would
-        // be annoyingly bad UX.
-        e.preventDefault();
-        e.stopPropagation();
-
-        this._updateActiveState(false, false);
-      }
-    };
-
-    this._focused = false;
-    this._hovered = false;
-    this.state = {
-      active: false
-    };
-  }
-
-  componentDidMount() {
-    const anchorNode = react_dom__WEBPACK_IMPORTED_MODULE_1__["findDOMNode"](this); // This should never happen, but we have this check here to make flow
-    // happy and ensure that if this does happen, we'll know about it.
-
-    if (anchorNode instanceof Text) {
-      throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.");
-    }
-
-    this._unsubscribeFromTracker = TRACKER.subscribe(this);
-    this._anchorNode = anchorNode;
-
-    this._updateFocusivity();
-
-    if (anchorNode) {
-      /**
-       * TODO(somewhatabstract): Work out how to allow pointer to go over
-       * the tooltip content to keep it active. This likely requires
-       * pointer events but that would break the obscurement checks we do.
-       * So, careful consideration required. See WB-302.
-       */
-      anchorNode.addEventListener("focusin", this._handleFocusIn);
-      anchorNode.addEventListener("focusout", this._handleFocusOut);
-      anchorNode.addEventListener("mouseenter", this._handleMouseEnter);
-      anchorNode.addEventListener("mouseleave", this._handleMouseLeave);
-      this.props.anchorRef(this._anchorNode);
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.forceAnchorFocusivity !== this.props.forceAnchorFocusivity || prevProps.children !== this.props.children) {
-      this._updateFocusivity();
-    }
-  }
-
-  componentWillUnmount() {
-    if (this._unsubscribeFromTracker) {
-      this._unsubscribeFromTracker();
-    }
-
-    this._clearPendingAction();
-
-    const anchorNode = this._anchorNode;
-
-    if (anchorNode) {
-      anchorNode.removeEventListener("focusin", this._handleFocusIn);
-      anchorNode.removeEventListener("focusout", this._handleFocusOut);
-      anchorNode.removeEventListener("mouseenter", this._handleMouseEnter);
-      anchorNode.removeEventListener("mouseleave", this._handleMouseLeave);
-    }
-
-    if (this.state.active) {
-      document.removeEventListener("keyup", this._handleKeyUp);
-    }
-  }
-
-  _updateFocusivity() {
-    const anchorNode = this._anchorNode;
-
-    if (!anchorNode) {
-      return;
-    }
-
-    const {
-      forceAnchorFocusivity
-    } = this.props;
-    const currentTabIndex = anchorNode.getAttribute("tabindex");
-
-    if (forceAnchorFocusivity && !currentTabIndex) {
-      // Ensure that the anchor point is keyboard focusable so that
-      // we can show the tooltip for visually impaired users that don't
-      // use pointer devices nor assistive technology like screen readers.
-      anchorNode.setAttribute("tabindex", "0");
-      this._weSetFocusivity = true;
-    } else if (!forceAnchorFocusivity && currentTabIndex) {
-      // We may not be forcing it, but we also want to ensure that if we
-      // did before, we remove it.
-      if (this._weSetFocusivity) {
-        anchorNode.removeAttribute("tabindex");
-        this._weSetFocusivity = false;
-      }
-    }
-  }
-
-  _updateActiveState(hovered, focused) {
-    // Update our stored values.
-    this._hovered = hovered;
-    this._focused = focused;
-
-    this._setActiveState(hovered || focused);
-  }
-
-  _clearPendingAction() {
-    if (this._timeoutID) {
-      clearTimeout(this._timeoutID);
-      this._timeoutID = null;
-    }
-  }
-
-  _setActiveState(active, instant) {
-    if (this._stolenFromUs || active !== this.state.active || !this.state.active && this._timeoutID) {
-      // If we are about to lose active state or change it, we need to
-      // cancel any pending action to show ourselves.
-      // So, if active is stolen from us, we are changing active state,
-      // or we are inactive and have a timer, clear the action.
-      this._clearPendingAction();
-    } else if (active === this.state.active && !this._timeoutID) {
-      // Nothing to do if we're already active.
-      return;
-    } // Determine if we are doing things immediately or not.
-
-
-    instant = instant || active && TRACKER.steal(this);
-
-    if (instant) {
-      if (active) {
-        document.addEventListener("keyup", this._handleKeyUp);
-      } else {
-        document.removeEventListener("keyup", this._handleKeyUp);
-      }
-
-      this.setState({
-        active
-      });
-      this.props.onActiveChanged(active);
-
-      if (!this._stolenFromUs && !active) {
-        // Only the very last thing going inactive will giveup
-        // the stolen active state.
-        TRACKER.giveup();
-      }
-
-      this._stolenFromUs = false;
-    } else {
-      const delay = active ? _util_constants_js__WEBPACK_IMPORTED_MODULE_4__[/* TooltipAppearanceDelay */ "a"] : _util_constants_js__WEBPACK_IMPORTED_MODULE_4__[/* TooltipDisappearanceDelay */ "b"];
-      this._timeoutID = setTimeout(() => {
-        this._timeoutID = null;
-
-        this._setActiveState(active, true);
-      }, delay);
-    }
-  }
-
-  _renderAnchorableChildren() {
-    const {
-      children
-    } = this.props;
-    return typeof children === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["Text"], null, children) : children;
-  }
-
-  _renderAccessibleChildren(ids) {
-    const anchorableChildren = this._renderAnchorableChildren();
-
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](anchorableChildren, {
-      "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
-    });
-  }
-
-  render() {
-    // We need to make sure we can anchor on our content.
-    // If the content is just a string, we wrap it in a Text element
-    // so as not to affect styling or layout but still have an element
-    // to anchor to.
-    if (this.props.ids) {
-      return this._renderAccessibleChildren(this.props.ids);
-    }
-
-    return this._renderAnchorableChildren();
-  }
-
-}
-TooltipAnchor.defaultProps = {
-  forceAnchorFocusivity: true
-};
-TooltipAnchor.ariaContentId = "aria-content";
-
-/***/ }),
-/* 15 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ActiveTracker; });
-/**
- * This interface should be implemented by types that are interested in the
- * notifications of active state being stolen. Generally, this would also be
- * subscribers that may also steal active state, but not necessarily.
- *
- * Once implemented, the type must call subscribe on a tracker to begin
- * receiving notifications.
- */
-
-/**
- * This class is used to track the concept of active state (though technically
- * that could be any boolean state). The tracker has a variety of subscribers
- * that receive notifications of state theft and can steal the state.
- *
- * For the tooltip, this enables us to have a single tooltip active at any one
- * time. The tracker allows tooltip anchors to coordinate which of them is
- * active, and to ensure that if a different one becomes active, all the others
- * know that they aren't.
- *
- * - When notified that the state has been stolen, subscribers can immediately
- * reflect that theft (in the case of a tooltip, they would hide themselves).
- * - The thief does not get notified if they were the one who stole the state
- * since they should already know that they did that (this avoids having to have
- * checks for reentrancy, for example).
- * - When the subscriber that owns the state no longer needs it, it can
- * voluntarily give it up.
- * - If the state is stolen while a subscriber owns the
- * state, that subscriber does not give up the state, as it doesn't have it
- * anymore (it was stolen).
- */
-class ActiveTracker {
-  constructor() {
-    this._subscribers = [];
-  }
-
-  _getIndex(who) {
-    return this._subscribers.findIndex(v => v === who);
-  }
-  /**
-   * Called when a tooltip anchor becomes active so that it can tell all other
-   * anchors that they are no longer the active tooltip. Returns true if
-   * the there was a steal of active state from another anchor; otherwise, if
-   * no other anchor had been active, returns false.
-   */
-
-
-  steal(who) {
-    const wasActive = !!this._active;
-    this._active = true;
-
-    for (const anchor of this._subscribers) {
-      if (anchor === who) {
-        // We don't need to notify the thief.
-        continue;
-      }
-
-      anchor.activeStateStolen();
-    }
-
-    return wasActive;
-  }
-  /**
-   * Called if a tooltip doesn't want to be active anymore.
-   * Should not be called when being told the active spot was stolen by
-   * another anchor, only when the anchor is unhovered and unfocused and they
-   * were active.
-   */
-
-
-  giveup() {
-    this._active = false;
-  }
-  /**
-   * Subscribes a tooltip anchor to the tracker so that it can be notified of
-   * steals. Returns a method that can be used to unsubscribe the anchor from
-   * notifications.
-   */
-
-
-  subscribe(who) {
-    if (this._getIndex(who) >= 0) {
-      throw new Error("Already subscribed.");
-    }
-
-    this._subscribers.push(who);
-
-    const unsubscribe = () => {
-      const index = this._getIndex(who);
-
-      this._subscribers.splice(index, 1);
-    };
-
-    return unsubscribe;
-  }
-
-}
-
-/***/ }),
-/* 16 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TooltipBubble; });
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-/* 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__(3);
-/* 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 _tooltip_tail_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
-
-
-
-
-
-
-class TooltipBubble extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      active: false
-    };
-
-    this.handleMouseEnter = () => {
-      this._setActiveState(true);
-    };
-
-    this.handleMouseLeave = () => {
-      this.props.onActiveChanged(false);
-    };
-  }
-
-  _setActiveState(active) {
-    this.setState({
-      active
-    });
-    this.props.onActiveChanged(active);
-  }
-
-  render() {
-    const {
-      id,
-      children,
-      updateBubbleRef,
-      placement,
-      isReferenceHidden,
-      style,
-      updateTailRef,
-      tailOffset
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      id: id,
-      role: "tooltip",
-      "data-placement": placement,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave,
-      ref: updateBubbleRef,
-      style: [isReferenceHidden && styles.hide, styles.bubble, styles[`content-${placement}`], style]
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
-      style: styles.content
-    }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_tooltip_tail_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], {
-      updateRef: updateTailRef,
-      placement: placement,
-      offset: tailOffset
-    }));
-  }
-
-}
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
-  bubble: {
-    position: "absolute"
-  },
-
-  /**
-   * The hide style ensures that the bounds of the bubble 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"
-  },
-  content: {
-    maxWidth: 472,
-    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}`,
-    justifyContent: "center"
-  }
-});
-
-/***/ }),
-/* 17 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-layout");
-
-/***/ }),
-/* 18 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-popper");
-
-/***/ }),
-/* 19 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_tooltip_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_tooltip_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
-
-/* harmony import */ var _components_tooltip_content_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TooltipContent", function() { return _components_tooltip_content_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
-
-/* harmony import */ var _components_tooltip_popper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TooltipPopper", function() { return _components_tooltip_popper_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
-
-/* harmony import */ var _components_tooltip_tail_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TooltipTail", function() { return _components_tooltip_tail_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
-
-
-
-
-
-
-
-/***/ })
-/******/ ]);