@khanacademy/wonder-blocks-clickable 2.1.3 → 2.2.3

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ 	return __webpack_require__(__webpack_require__.s = 10);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -166,7 +166,9 @@ const disabledHandlers = {
   onKeyUp: () => void 0,
   onFocus: () => void 0,
   onBlur: () => void 0,
-  tabIndex: -1
+  // Clickable components should still be tabbable so they can
+  // be used as anchors.
+  tabIndex: 0
 };
 const keyCodes = {
   enter: 13,
@@ -252,8 +254,8 @@ const startState = {
  * 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 this.context.router from a component
- * rendered as a descendant of a BrowserRouter.
+ * 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.
  */
 
@@ -628,8 +630,8 @@ ClickableBehavior.defaultProps = {
  * 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 this.context.router from a component rendered
- * as a descendant of a BrowserRouter.
+ * 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.
  */
 
@@ -675,141 +677,458 @@ module.exports = require("@khanacademy/wonder-blocks-core");
 
 /***/ }),
 /* 6 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/***/ (function(module, exports) {
 
-"use strict";
-/* unused harmony export SemanticColor */
-/* unused harmony export fade */
-/* unused harmony export mix */
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+module.exports =
+/******/
+function (modules) {
+  // webpackBootstrap
 
-/**
- * A color manipulation library useful for dynamically
- * mixing colors together.
- */
+  /******/
+  // The module cache
 
-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.
+  /******/
+  var installedModules = {};
+  /******/
 
-const parse = color => {
-  if (typeof color !== "string") {
-    throw new Error(`Failed to parse color: ${color}`);
-  }
+  /******/
+  // The require function
 
-  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
-    };
-  }
+  function __webpack_require__(moduleId) {
+    /******/
 
-  const color6Match = color.match(color6Regexp);
+    /******/
+    // Check if module is in cache
+
+    /******/
+    if (installedModules[moduleId]) {
+      /******/
+      return installedModules[moduleId].exports;
+      /******/
+    }
+    /******/
+    // Create a new module (and put it into the cache)
+
+    /******/
 
-  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);
+    var module = installedModules[moduleId] = {
+      /******/
+      i: moduleId,
+
+      /******/
+      l: false,
+
+      /******/
+      exports: {}
+      /******/
 
-  if (rgbaMatch) {
-    return {
-      r: parseFloat(rgbaMatch[1]),
-      g: parseFloat(rgbaMatch[2]),
-      b: parseFloat(rgbaMatch[3]),
-      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
     };
+    /******/
+
+    /******/
+    // 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
+      });
+      /******/
+    }
+    /******/
+
+  };
+  /******/
 
-  throw new Error(`Failed to parse color: ${color}`);
-}; // Stringify the color in an `rgba()` or `#abcdef` format.
+  /******/
+  // define __esModule on exports
 
+  /******/
 
-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;
+  __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;
     };
+    /******/
 
-    return `#${_s(r)}${_s(g)}${_s(b)}`;
-  } else {
-    return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
-  }
-}; // Adjust the alpha value of a color.
+    __webpack_require__.d(getter, 'a', getter);
+    /******/
 
 
-const fade = (color, percentage) => {
-  if (percentage < 0 || percentage > 1) {
-    throw new Error("Percentage must be between 0 and 1");
-  }
+    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) */
 
-  const components = parse(color);
-  return format(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, 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
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return fade;
   });
-};
+  /* harmony export (binding) */
 
-const offBlack = "#21242c";
-const white = "#ffffff";
-const Color = {
-  // Product
-  blue: "#1865f2",
-  purple: "#9059ff",
-  green: "#00a60e",
-  gold: "#ffb100",
-  red: "#d92916",
-  // Neutral
-  offBlack,
-  offBlack64: fade(offBlack, 0.64),
-  offBlack50: fade(offBlack, 0.5),
-  offBlack32: fade(offBlack, 0.32),
-  offBlack16: fade(offBlack, 0.16),
-  offBlack8: fade(offBlack, 0.08),
-  offWhite: "#f7f8fa",
-  white,
-  white64: fade(white, 0.64),
-  white50: fade(white, 0.5),
-  // Brand
-  darkBlue: "#0a2a66",
-  teal: "#14bf96",
-  lightBlue: "#37c5fd",
-  pink: "#fa50ae"
-};
-const SemanticColor = {
-  controlDefault: Color.blue,
-  controlDestructive: Color.red
-};
-/* harmony default export */ __webpack_exports__["a"] = (Color);
 
+  __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: "#0a2a66",
+    teal: "#14bf96",
+    lightBlue: "#37c5fd",
+    pink: "#fa50ae"
+  };
+  const SemanticColor = {
+    controlDefault: Color.blue,
+    controlDestructive: Color.red
+  };
+  /***/
+}
+/******/
+]);
 
 /***/ }),
 /* 7 */
@@ -821,13 +1140,14 @@ const SemanticColor = {
 /* 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__(8);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* 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_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
 /* harmony import */ var _util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -842,7 +1162,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("a");
 const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("button");
-const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
+const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"]);
 /**
  * A component to turn any custom component into a clickable one.
  *
@@ -872,9 +1192,9 @@ class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(...args) {
     super(...args);
 
-    this.getCorrectTag = (clickableState, commonProps) => {
+    this.getCorrectTag = (clickableState, router, commonProps) => {
       const activeHref = this.props.href && !this.props.disabled;
-      const useClient = this.context.router && !this.props.skipClientNav && Object(_util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_7__[/* isClientSideUrl */ "a"])(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
+      const useClient = router && !this.props.skipClientNav && Object(_util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_7__[/* 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) {
@@ -900,7 +1220,7 @@ class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     };
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const {
       href,
       onClick,
@@ -917,7 +1237,7 @@ class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       disabled,
       ...restProps
     } = this.props;
-    const ClickableBehavior = Object(_util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"])(href, skipClientNav, this.context.router);
+    const ClickableBehavior = Object(_util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"])(href, skipClientNav, router);
 
     const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
 
@@ -930,7 +1250,7 @@ class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, { ...restProps,
+      }, (state, childrenProps) => this.getCorrectTag(state, router, { ...restProps,
         "data-test-id": testId,
         style: getStyle(state),
         ...childrenProps
@@ -944,7 +1264,7 @@ class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         onKeyUp: onKeyUp,
         target: target,
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, { ...restProps,
+      }, (state, childrenProps) => this.getCorrectTag(state, router, { ...restProps,
         "data-test-id": testId,
         style: getStyle(state),
         ...childrenProps
@@ -952,11 +1272,12 @@ class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     }
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 } // Source:  https://gist.github.com/MoOx/9137295
 
-Clickable.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_2__["any"]
-};
 Clickable.defaultProps = {
   light: false,
   disabled: false,
@@ -995,10 +1316,10 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     cursor: "pointer"
   },
   focused: {
-    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].blue}`
+    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.blue}`
   },
   focusedLight: {
-    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].white}`
+    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.white}`
   }
 });
 
@@ -1012,36 +1333,10 @@ module.exports = require("aphrodite");
 /* 9 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react-router");
 
 /***/ }),
 /* 10 */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
-
-/***/ }),
-/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";