@khanacademy/wonder-blocks-clickable 2.4.0 → 2.4.2

package/dist/index.js

@@ -1,1411 +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 = 11);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return isClientSideUrl; });
-/**
- * Returns:
- * - false for hrefs staring with http://, https://, //.
- * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
- * - true for all other values, e.g. /foo/bar
- */
-const isClientSideUrl = href => {
-  if (typeof href !== "string") {
-    return false;
-  }
-
-  return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
-};
-
-/***/ }),
-/* 2 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ClickableBehavior; });
-/* 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__);
- // NOTE: Potentially add to this as more cases come up.
-
-const getAppropriateTriggersForRole = role => {
-  switch (role) {
-    // Triggers on ENTER, but not SPACE
-    case "link":
-      return {
-        triggerOnEnter: true,
-        triggerOnSpace: false
-      };
-    // Triggers on SPACE, but not ENTER
-
-    case "checkbox":
-    case "radio":
-    case "listbox":
-      return {
-        triggerOnEnter: false,
-        triggerOnSpace: true
-      };
-    // Triggers on both ENTER and SPACE
-
-    case "button":
-    case "menuitem":
-    case "menu":
-    case "option":
-    default:
-      return {
-        triggerOnEnter: true,
-        triggerOnSpace: true
-      };
-  }
-};
-
-const disabledHandlers = {
-  onClick: () => void 0,
-  onMouseEnter: () => void 0,
-  onMouseLeave: () => void 0,
-  onMouseDown: () => void 0,
-  onMouseUp: () => void 0,
-  onDragStart: () => void 0,
-  onTouchStart: () => void 0,
-  onTouchEnd: () => void 0,
-  onTouchCancel: () => void 0,
-  onKeyDown: () => void 0,
-  onKeyUp: () => void 0
-};
-const keyCodes = {
-  enter: 13,
-  space: 32
-};
-const startState = {
-  hovered: false,
-  focused: false,
-  pressed: false,
-  waiting: false
-};
-/**
- * Add hover, focus, and active status updates to a clickable component.
- *
- * Via mouse:
- *
- * 1. Hover over button -> hover state
- * 2. Mouse down -> active state
- * 3. Mouse up -> default state
- * 4. Press tab -> focus state
- *
- * Via touch:
- *
- * 1. Touch down -> press state
- * 2. Touch up -> default state
- *
- * Via keyboard:
- *
- * 1. Tab to focus -> focus state
- * 2. Keydown (spacebar/enter) -> active state
- * 3. Keyup (spacebar/enter) -> focus state
- *
- * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel,
- * onKeyDown, onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the
- * component that has the ClickableBehavior. You cannot override these handlers
- * without potentially breaking the functionality of ClickableBehavior.
- *
- * There are internal props triggerOnEnter and triggerOnSpace that can be set to
- * false if one of those keys shouldn't count as a click on this component. Be
- * careful about setting those to false -- make certain that the component
- * shouldn't process that key.
- *
- * See [this
-   document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
-   for a more thorough explanation of expected behaviors and potential cavaets.
- *
- * `ClickableBehavior` accepts a function as `children` which is passed state
- * and an object containing event handlers and some other props. The `children`
- * function should return a clickable React Element of some sort.
- *
- * Example:
- *
- * ```jsx
- * function MyClickableComponent(props: Props) {
- *   const ClickableBehavior = getClickableBehavior();
- *
- *   return (
- *       <ClickableBehavior
- *           disabled={props.disabled}
- *           onClick={props.onClick}
- *           tabIndex={0}
- *        >
- *           {({hovered}, childrenProps) => (
- *               <RoundRect
- *                   textcolor="white"
- *                   backgroundColor={hovered ? "red" : "blue"}
- *                   {...childrenProps}
- *               >
- *                   {props.children}
- *               </RoundRect>
- *           )}
- *      </ClickableBehavior>
- *   );
- * }
- * ```
- *
- * This follows a pattern called [Function as Child
- * Components](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
- *
- * **WARNING:** Do not use this component directly, use getClickableBehavior
- * instead. getClickableBehavior takes three arguments (href, directtNav, and
- * router) and returns either the default ClickableBehavior or a react-router
- * aware version.
- *
- * The react-router aware version is returned if `router` is a react-router-dom
- * router, `skipClientNav` is not `true`, and `href` is an internal URL.
- *
- * The `router` can be accessed via __RouterContext (imported from
-   'react-router') from a component rendered as a descendant of a BrowserRouter.
-   See https://reacttraining.com/react-router/web/guides/basic-components.
- */
-
-class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  static getDerivedStateFromProps(props, state) {
-    // If new props are disabled, reset the hovered/pressed states
-    if (props.disabled) {
-      // Keep the focused state for enabling keyboard navigation.
-      return { ...startState,
-        focused: state.focused
-      };
-    } else {
-      // Cannot return undefined
-      return null;
-    }
-  }
-
-  constructor(props) {
-    super(props);
-
-    this.handleClick = e => {
-      const {
-        onClick = undefined,
-        beforeNav = undefined,
-        safeWithNav = undefined
-      } = this.props;
-
-      if (this.enterClick) {
-        return;
-      }
-
-      if (onClick || beforeNav || safeWithNav) {
-        this.waitingForClick = false;
-      }
-
-      this.runCallbackAndMaybeNavigate(e);
-    };
-
-    this.handleMouseEnter = e => {
-      // When the left button is pressed already, we want it to be pressed
-      if (e.buttons === 1) {
-        this.dragging = true;
-        this.setState({
-          pressed: true
-        });
-      } else if (!this.waitingForClick) {
-        this.setState({
-          hovered: true
-        });
-      }
-    };
-
-    this.handleMouseLeave = () => {
-      if (!this.waitingForClick) {
-        this.dragging = false;
-        this.setState({
-          hovered: false,
-          pressed: false,
-          focused: false
-        });
-      }
-    };
-
-    this.handleMouseDown = () => {
-      this.setState({
-        pressed: true
-      });
-    };
-
-    this.handleMouseUp = e => {
-      if (this.dragging) {
-        this.dragging = false;
-        this.handleClick(e);
-      }
-
-      this.setState({
-        pressed: false,
-        focused: false
-      });
-    };
-
-    this.handleDragStart = e => {
-      this.dragging = true;
-      e.preventDefault();
-    };
-
-    this.handleTouchStart = () => {
-      this.setState({
-        pressed: true
-      });
-    };
-
-    this.handleTouchEnd = () => {
-      this.setState({
-        pressed: false
-      });
-      this.waitingForClick = true;
-    };
-
-    this.handleTouchCancel = () => {
-      this.setState({
-        pressed: false
-      });
-      this.waitingForClick = true;
-    };
-
-    this.handleKeyDown = e => {
-      const {
-        onKeyDown,
-        role
-      } = this.props;
-
-      if (onKeyDown) {
-        onKeyDown(e);
-      }
-
-      const keyCode = e.which || e.keyCode;
-      const {
-        triggerOnEnter,
-        triggerOnSpace
-      } = getAppropriateTriggersForRole(role);
-
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        // This prevents space from scrolling down. It also prevents the
-        // space and enter keys from triggering click events. We manually
-        // call the supplied onClick and handle potential navigation in
-        // handleKeyUp instead.
-        e.preventDefault();
-        this.setState({
-          pressed: true
-        });
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        // If the component isn't supposed to trigger on enter, we have to
-        // keep track of the enter keydown to negate the onClick callback
-        this.enterClick = true;
-      }
-    };
-
-    this.handleKeyUp = e => {
-      const {
-        onKeyUp,
-        role
-      } = this.props;
-
-      if (onKeyUp) {
-        onKeyUp(e);
-      }
-
-      const keyCode = e.which || e.keyCode;
-      const {
-        triggerOnEnter,
-        triggerOnSpace
-      } = getAppropriateTriggersForRole(role);
-
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        this.setState({
-          pressed: false,
-          focused: true
-        });
-        this.runCallbackAndMaybeNavigate(e);
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        this.enterClick = false;
-      }
-    };
-
-    this.handleFocus = e => {
-      this.setState({
-        focused: true
-      });
-    };
-
-    this.handleBlur = e => {
-      this.setState({
-        focused: false,
-        pressed: false
-      });
-    };
-
-    this.state = startState;
-    this.waitingForClick = false;
-    this.enterClick = false;
-    this.dragging = false;
-  }
-
-  navigateOrReset(shouldNavigate) {
-    if (shouldNavigate) {
-      const {
-        history,
-        href,
-        skipClientNav,
-        target = undefined
-      } = this.props;
-
-      if (href) {
-        if (target === "_blank") {
-          window.open(href, "_blank");
-          this.setState({
-            waiting: false
-          });
-        } else if (history && !skipClientNav) {
-          history.push(href);
-          this.setState({
-            waiting: false
-          });
-        } else {
-          window.location.assign(href); // We don't bother clearing the waiting state, the full page
-          // load navigation will do that for us by loading a new page.
-        }
-      }
-    } else {
-      this.setState({
-        waiting: false
-      });
-    }
-  }
-
-  handleSafeWithNav(safeWithNav, shouldNavigate) {
-    const {
-      skipClientNav,
-      history
-    } = this.props;
-
-    if (history && !skipClientNav || this.props.target === "_blank") {
-      // client-side nav
-      safeWithNav();
-      this.navigateOrReset(shouldNavigate);
-      return Promise.resolve();
-    } else {
-      if (!this.state.waiting) {
-        // We only show the spinner for safeWithNav when doing
-        // a full page load navigation since since the spinner is
-        // indicating that we're waiting for navigation to occur.
-        this.setState({
-          waiting: true
-        });
-      }
-
-      return safeWithNav().then(() => {
-        if (!this.state.waiting) {
-          // We only show the spinner for safeWithNav when doing
-          // a full page load navigation since since the spinner is
-          // indicating that we're waiting for navigation to occur.
-          this.setState({
-            waiting: true
-          });
-        }
-
-        return;
-      }).catch(error => {// We ignore the error here so that we always
-        // navigate when using safeWithNav regardless of
-        // whether we're doing a client-side nav or not.
-      }).finally(() => {
-        this.navigateOrReset(shouldNavigate);
-      });
-    }
-  }
-
-  runCallbackAndMaybeNavigate(e) {
-    const {
-      onClick = undefined,
-      beforeNav = undefined,
-      safeWithNav = undefined,
-      href,
-      type
-    } = this.props;
-    let shouldNavigate = true;
-    let canSubmit = true;
-
-    if (onClick) {
-      onClick(e);
-    } // If onClick() has called e.preventDefault() then we shouldn't
-    // navigate.
-
-
-    if (e.defaultPrevented) {
-      shouldNavigate = false;
-      canSubmit = false;
-    }
-
-    e.preventDefault();
-
-    if (!href && type === "submit" && canSubmit) {
-      let target = e.currentTarget;
-
-      while (target) {
-        if (target instanceof window.HTMLFormElement) {
-          // This event must be marked as cancelable otherwise calling
-          // e.preventDefault() on it won't do anything in Firefox.
-          // Chrome and Safari allow calling e.preventDefault() on
-          // non-cancelable events, but really they shouldn't.
-          const event = new window.Event("submit", {
-            cancelable: true
-          });
-          target.dispatchEvent(event);
-          break;
-        } // All events should be typed as SyntheticEvent<HTMLElement>.
-        // Updating all of the places will take some time so I'll do
-        // this later
-        // $FlowFixMe[prop-missing]
-
-
-        target = target.parentElement;
-      }
-    }
-
-    if (beforeNav) {
-      this.setState({
-        waiting: true
-      });
-      beforeNav().then(() => {
-        if (safeWithNav) {
-          return this.handleSafeWithNav(safeWithNav, shouldNavigate);
-        } else {
-          return this.navigateOrReset(shouldNavigate);
-        }
-      }).catch(() => {});
-    } else if (safeWithNav) {
-      return this.handleSafeWithNav(safeWithNav, shouldNavigate);
-    } else {
-      this.navigateOrReset(shouldNavigate);
-    }
-  }
-
-  render() {
-    const childrenProps = this.props.disabled ? { ...disabledHandlers,
-      // Keep these handlers for keyboard accessibility.
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      tabIndex: this.props.tabIndex
-    } : {
-      onClick: this.handleClick,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave,
-      onMouseDown: this.handleMouseDown,
-      onMouseUp: this.handleMouseUp,
-      onDragStart: this.handleDragStart,
-      onTouchStart: this.handleTouchStart,
-      onTouchEnd: this.handleTouchEnd,
-      onTouchCancel: this.handleTouchCancel,
-      onKeyDown: this.handleKeyDown,
-      onKeyUp: this.handleKeyUp,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      tabIndex: this.props.tabIndex
-    }; // When the link is set to open in a new window, we want to set some
-    // `rel` attributes. This is to ensure that the links we're sending folks
-    // to can't hijack the existing page.  These defaults can be overriden
-    // by passing in a different value for the `rel` prop.
-    // More info: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
-
-    childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
-    const {
-      children
-    } = this.props;
-    return children && children(this.state, childrenProps);
-  }
-
-}
-ClickableBehavior.defaultProps = {
-  disabled: false
-};
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-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 = 1);
-  /******/
-}
-/************************************************************************/
-
-/******/
-([
-/* 0 */
-
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-  /* harmony export (binding) */
-
-  __webpack_require__.d(__webpack_exports__, "a", function () {
-    return fade;
-  });
-  /* harmony export (binding) */
-
-
-  __webpack_require__.d(__webpack_exports__, "b", function () {
-    return mix;
-  });
-  /**
-   * A color manipulation library useful for dynamically
-   * mixing colors together.
-   */
-
-
-  const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
-  const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
-  const rgbaRegexp = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i; // Parse a color in #abcdef, rgb(...), or rgba(...) form into an object
-  // with r,g,b,a keys.
-
-  const parse = color => {
-    if (typeof color !== "string") {
-      throw new Error(`Failed to parse color: ${color}`);
-    }
-
-    const color3Match = color.match(color3Regexp);
-
-    if (color3Match) {
-      return {
-        r: parseInt(`${color3Match[1]}${color3Match[1]}`, 16),
-        g: parseInt(`${color3Match[2]}${color3Match[2]}`, 16),
-        b: parseInt(`${color3Match[3]}${color3Match[3]}`, 16),
-        a: 1
-      };
-    }
-
-    const color6Match = color.match(color6Regexp);
-
-    if (color6Match) {
-      return {
-        r: parseInt(color6Match[1], 16),
-        g: parseInt(color6Match[2], 16),
-        b: parseInt(color6Match[3], 16),
-        a: 1
-      };
-    }
-
-    const rgbaMatch = color.match(rgbaRegexp);
-
-    if (rgbaMatch) {
-      return {
-        r: parseFloat(rgbaMatch[1]),
-        g: parseFloat(rgbaMatch[2]),
-        b: parseFloat(rgbaMatch[3]),
-        a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
-      };
-    }
-
-    throw new Error(`Failed to parse color: ${color}`);
-  }; // Stringify the color in an `rgba()` or `#abcdef` format.
-
-
-  const format = color => {
-    const r = Math.round(color.r);
-    const g = Math.round(color.g);
-    const b = Math.round(color.b);
-
-    if (color.a === 1) {
-      const _s = c => {
-        const asString = c.toString(16);
-        return asString.length === 1 ? asString + asString : asString;
-      };
-
-      return `#${_s(r)}${_s(g)}${_s(b)}`;
-    } else {
-      return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
-    }
-  }; // Adjust the alpha value of a color.
-
-
-  const fade = (color, percentage) => {
-    if (percentage < 0 || percentage > 1) {
-      throw new Error("Percentage must be between 0 and 1");
-    }
-
-    const components = parse(color);
-    return format({ ...components,
-      a: components.a * percentage
-    });
-  }; // Mix a color into a background color, using the alpha channel of the base
-  // color to determine the linear blend.
-
-
-  const mix = (color, background) => {
-    const colorObj = parse(color);
-    const bgObj = parse(background);
-    return format({
-      r: colorObj.r * colorObj.a + bgObj.r * (1 - colorObj.a),
-      g: colorObj.g * colorObj.a + bgObj.g * (1 - colorObj.a),
-      b: colorObj.b * colorObj.a + bgObj.b * (1 - colorObj.a),
-      a: bgObj.a
-    });
-  };
-  /***/
-
-},
-/* 1 */
-
-/***/
-function (module, __webpack_exports__, __webpack_require__) {
-  "use strict";
-
-  __webpack_require__.r(__webpack_exports__);
-  /* harmony export (binding) */
-
-
-  __webpack_require__.d(__webpack_exports__, "default", function () {
-    return Color;
-  });
-  /* harmony export (binding) */
-
-
-  __webpack_require__.d(__webpack_exports__, "SemanticColor", function () {
-    return SemanticColor;
-  });
-  /* harmony import */
-
-
-  var _util_utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-  /* harmony reexport (safe) */
-
-
-  __webpack_require__.d(__webpack_exports__, "mix", function () {
-    return _util_utils_js__WEBPACK_IMPORTED_MODULE_0__["b"];
-  });
-  /* harmony reexport (safe) */
-
-
-  __webpack_require__.d(__webpack_exports__, "fade", function () {
-    return _util_utils_js__WEBPACK_IMPORTED_MODULE_0__["a"];
-  });
-
-  const offBlack = "#21242c";
-  const white = "#ffffff";
-  const Color = {
-    // Product
-    blue: "#1865f2",
-    purple: "#9059ff",
-    green: "#00a60e",
-    gold: "#ffb100",
-    red: "#d92916",
-    // Neutral
-    offBlack,
-    offBlack64: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* fade */
-    "a"])(offBlack, 0.64),
-    offBlack50: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* fade */
-    "a"])(offBlack, 0.5),
-    offBlack32: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* fade */
-    "a"])(offBlack, 0.32),
-    offBlack16: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* fade */
-    "a"])(offBlack, 0.16),
-    offBlack8: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* fade */
-    "a"])(offBlack, 0.08),
-    offWhite: "#f7f8fa",
-    white,
-    white64: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* fade */
-    "a"])(white, 0.64),
-    white50: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
-    /* fade */
-    "a"])(white, 0.5),
-    // Brand
-    darkBlue: "#0b2149",
-    teal: "#14bf96",
-    lightBlue: "#37c5fd",
-    pink: "#fa50ae"
-  };
-  const SemanticColor = {
-    controlDefault: Color.blue,
-    controlDestructive: Color.red
-  };
-  /***/
-}
-/******/
-]);
-
-/***/ }),
-/* 4 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getClickableBehavior; });
-/* 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_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-/* harmony import */ var _is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
-/**
- * Returns either the default ClickableBehavior or a react-router aware version.
- *
- * The react-router aware version is returned if `router` is a react-router-dom
- * router, `skipClientNav` is not `true`, and `href` is an internal URL.
- *
- * The `router` can be accessed via __RouterContext (imported from 'react-router')
- * from a component rendered as a descendant of a BrowserRouter.
- * See https://reacttraining.com/react-router/web/guides/basic-components.
- */
-
-
-
-
-const ClickableBehaviorWithRouter = Object(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["withRouter"])(_components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"]);
-function getClickableBehavior(
-/**
- * The URL to navigate to.
- */
-href,
-/**
- * Should we skip using the react router and go to the page directly.
- */
-skipClientNav,
-/**
- * router object added to the React context object by react-router-dom.
- */
-router) {
-  if (router && skipClientNav !== true && href && Object(_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__[/* isClientSideUrl */ "a"])(href)) {
-    // We cast to `any` here since the type of ClickableBehaviorWithRouter
-    // is slightly different from the return type of this function.
-    // TODO(WB-1037): Always return the wrapped version once all routes have
-    // been ported to the app-shell in webapp.
-    return ClickableBehaviorWithRouter;
-  }
-
-  return _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"];
-}
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router-dom");
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
-/***/ }),
-/* 8 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Clickable; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4);
-/* harmony import */ var _util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(1);
-
-
-
-
-
-
-
-
-
-const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])("a");
-const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])("button");
-const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
-/**
- * A component to turn any custom component into a clickable one.
- *
- * Works by wrapping `ClickableBehavior` around the child element and styling
- * the child appropriately and encapsulates routing logic which can be
- * customized. Expects a function which returns an element as its child.
- *
- * Clickable allows your components to:
- *
- * - Handle mouse / touch / keyboard events
- * - Match the standard behavior of the given role
- * - Apply custom styles based on pressed / focused / hovered state
- * - Perform Client Side Navigation when href is passed and the component is a
- *   descendent of a react-router Router.
- *
- * ### Usage
- *
- * ```jsx
- * <Clickable onClick={() => alert("You clicked me!")}>
- *     {({hovered, focused, pressed}) =>
- *         <div
- *             style={[
- *                 hovered && styles.hovered,
- *                 focused && styles.focused,
- *                 pressed && styles.pressed,
- *             ]}
- *         >
- *             Click Me!
- *         </div>
- *     }
- * </Clickable>
- * ```
- */
-
-class Clickable extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  constructor(...args) {
-    super(...args);
-
-    this.getCorrectTag = (clickableState, router, commonProps) => {
-      const activeHref = this.props.href && !this.props.disabled;
-      const useClient = router && !this.props.skipClientNav && Object(_util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_8__[/* isClientSideUrl */ "a"])(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
-      // needs it to refine this.props.href to a string.
-
-      if (activeHref && useClient && this.props.href) {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledLink, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
-          to: this.props.href,
-          role: this.props.role,
-          target: this.props.target || undefined,
-          "aria-disabled": this.props.disabled ? "true" : undefined
-        }), this.props.children(clickableState));
-      } else if (activeHref && !useClient) {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledAnchor, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
-          href: this.props.href,
-          role: this.props.role,
-          target: this.props.target || undefined,
-          "aria-disabled": this.props.disabled ? "true" : undefined
-        }), this.props.children(clickableState));
-      } else {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledButton, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
-          type: "button",
-          "aria-disabled": this.props.disabled
-        }), this.props.children(clickableState));
-      }
-    };
-  }
-
-  renderClickableBehavior(router) {
-    const {
-      href,
-      onClick,
-      skipClientNav,
-      beforeNav = undefined,
-      safeWithNav = undefined,
-      style,
-      target = undefined,
-      testId,
-      onKeyDown,
-      onKeyUp,
-      hideDefaultFocusRing,
-      light,
-      disabled,
-      ...restProps
-    } = this.props;
-    const ClickableBehavior = Object(_util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"])(href, skipClientNav, router);
-
-    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
-
-    if (beforeNav) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
-        href: href,
-        onClick: onClick,
-        beforeNav: beforeNav,
-        safeWithNav: safeWithNav,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp,
-        disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, router, { ...restProps,
-        "data-test-id": testId,
-        style: getStyle(state),
-        ...childrenProps
-      }));
-    } else {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
-        href: href,
-        onClick: onClick,
-        safeWithNav: safeWithNav,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp,
-        target: target,
-        disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, router, { ...restProps,
-        "data-test-id": testId,
-        style: getStyle(state),
-        ...childrenProps
-      }));
-    }
-  }
-
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_4__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
-  }
-
-} // Source:  https://gist.github.com/MoOx/9137295
-
-Clickable.defaultProps = {
-  light: false,
-  disabled: false
-};
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
-  reset: {
-    border: "none",
-    margin: 0,
-    padding: 0,
-    width: "auto",
-    overflow: "visible",
-    background: "transparent",
-    textDecoration: "none",
-
-    /* inherit font & color from ancestor */
-    color: "inherit",
-    font: "inherit",
-    boxSizing: "border-box",
-    // This removes the 300ms click delay on mobile browsers by indicating that
-    // "double-tap to zoom" shouldn't be used on this element.
-    touchAction: "manipulation",
-    userSelect: "none",
-    // This is usual frowned upon b/c of accessibility.  We expect users of Clickable
-    // to define their own focus styles.
-    outline: "none",
-
-    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-    lineHeight: "normal",
-
-    /* Corrects font smoothing for webkit */
-    WebkitFontSmoothing: "inherit",
-    MozOsxFontSmoothing: "inherit"
-  },
-  link: {
-    cursor: "pointer"
-  },
-  focused: {
-    ":focus": {
-      outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a.blue}`
-    }
-  },
-  focusedLight: {
-    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a.white}`
-  },
-  disabled: {
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a.offBlack32,
-    cursor: "not-allowed",
-    ":focus": {
-      outline: "none"
-    },
-    ":focus-visible": {
-      outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a.blue}`
-    }
-  }
-});
-
-/***/ }),
-/* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("aphrodite");
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router");
-
-/***/ }),
-/* 11 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_clickable_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_clickable_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
-
-/* harmony import */ var _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ClickableBehavior", function() { return _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
-
-/* harmony import */ var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getClickableBehavior", function() { return _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
-
-/* harmony import */ var _util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "isClientSideUrl", function() { return _util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
-
-
-
-
-
-
-
-/***/ })
-/******/ ]);