@khanacademy/wonder-blocks-clickable 2.1.1 → 2.2.1

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ 	return __webpack_require__(__webpack_require__.s = 11);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -93,261 +93,35 @@ module.exports = require("react");
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router-dom");
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("aphrodite");
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-/* 5 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "ClickableBehavior", function() { return /* reexport */ clickable_behavior_ClickableBehavior; });
-__webpack_require__.d(__webpack_exports__, "getClickableBehavior", function() { return /* reexport */ getClickableBehavior; });
-__webpack_require__.d(__webpack_exports__, "isClientSideUrl", function() { return /* reexport */ isClientSideUrl; });
-__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ clickable_Clickable; });
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
-
-// EXTERNAL MODULE: external "aphrodite"
-var external_aphrodite_ = __webpack_require__(3);
-
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(4);
-
-// EXTERNAL MODULE: external "react-router-dom"
-var external_react_router_dom_ = __webpack_require__(1);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(2);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-color/dist/es/index.js
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return isClientSideUrl; });
 /**
- * A color manipulation library useful for dynamically
- * mixing colors together.
+ * Returns:
+ * - false for hrefs staring with http://, https://, //.
+ * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
+ * - true for all other values, e.g. /foo/bar
  */
-
-
-var color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
-var color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
-var 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 parse = function parse(color) {
-  if (typeof color !== "string") {
-    throw new Error("Failed to parse color: ".concat(color));
-  }
-
-  var color3Match = color.match(color3Regexp);
-
-  if (color3Match) {
-    return {
-      r: parseInt("".concat(color3Match[1]).concat(color3Match[1]), 16),
-      g: parseInt("".concat(color3Match[2]).concat(color3Match[2]), 16),
-      b: parseInt("".concat(color3Match[3]).concat(color3Match[3]), 16),
-      a: 1
-    };
-  }
-
-  var color6Match = color.match(color6Regexp);
-
-  if (color6Match) {
-    return {
-      r: parseInt(color6Match[1], 16),
-      g: parseInt(color6Match[2], 16),
-      b: parseInt(color6Match[3], 16),
-      a: 1
-    };
-  }
-
-  var 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: ".concat(color));
-}; // Stringify the color in an `rgba()` or `#abcdef` format.
-
-
-var format = function format(color) {
-  var r = Math.round(color.r);
-  var g = Math.round(color.g);
-  var b = Math.round(color.b);
-
-  if (color.a === 1) {
-    var _s = function _s(c) {
-      var asString = c.toString(16);
-      return asString.length === 1 ? asString + asString : asString;
-    };
-
-    return "#".concat(_s(r)).concat(_s(g)).concat(_s(b));
-  } else {
-    return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(color.a.toFixed(2), ")");
-  }
-}; // Adjust the alpha value of a color.
-
-
-var fade = function fade(color, percentage) {
-  if (percentage < 0 || percentage > 1) {
-    throw new Error("Percentage must be between 0 and 1");
+const isClientSideUrl = href => {
+  if (typeof href !== "string") {
+    return false;
   }
 
-  var components = parse(color);
-  return format(_objectSpread2(_objectSpread2({}, 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.
-
-
-var mix = function mix(color, background) {
-  var colorObj = parse(color);
-  var 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
-  });
-};
-
-var offBlack = "#21242c";
-var white = "#ffffff";
-var Color = {
-  // Product
-  blue: "#1865f2",
-  purple: "#9059ff",
-  green: "#00a60e",
-  gold: "#ffb100",
-  red: "#d92916",
-  // Neutral
-  offBlack: 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: white,
-  white64: fade(white, 0.64),
-  white50: fade(white, 0.5),
-  // Brand
-  darkBlue: "#0a2a66",
-  teal: "#14bf96",
-  lightBlue: "#37c5fd",
-  pink: "#fa50ae"
-};
-var SemanticColor = {
-  controlDefault: Color.blue,
-  controlDestructive: Color.red
+  return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
 };
-/* harmony default export */ var es = (Color);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/components/clickable-behavior.js
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function clickable_behavior_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/***/ }),
+/* 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.
 
-var getAppropriateTriggersForRole = function getAppropriateTriggersForRole(role) {
+const getAppropriateTriggersForRole = role => {
   switch (role) {
     // Triggers on ENTER, but not SPACE
     case "link":
@@ -378,53 +152,27 @@ var getAppropriateTriggersForRole = function getAppropriateTriggersForRole(role)
   }
 };
 
-var disabledHandlers = {
-  onClick: function onClick() {
-    return void 0;
-  },
-  onMouseEnter: function onMouseEnter() {
-    return void 0;
-  },
-  onMouseLeave: function onMouseLeave() {
-    return void 0;
-  },
-  onMouseDown: function onMouseDown() {
-    return void 0;
-  },
-  onMouseUp: function onMouseUp() {
-    return void 0;
-  },
-  onDragStart: function onDragStart() {
-    return void 0;
-  },
-  onTouchStart: function onTouchStart() {
-    return void 0;
-  },
-  onTouchEnd: function onTouchEnd() {
-    return void 0;
-  },
-  onTouchCancel: function onTouchCancel() {
-    return void 0;
-  },
-  onKeyDown: function onKeyDown() {
-    return void 0;
-  },
-  onKeyUp: function onKeyUp() {
-    return void 0;
-  },
-  onFocus: function onFocus() {
-    return void 0;
-  },
-  onBlur: function onBlur() {
-    return void 0;
-  },
+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,
+  onFocus: () => void 0,
+  onBlur: () => void 0,
   tabIndex: -1
 };
-var keyCodes = {
+const keyCodes = {
   enter: 13,
   space: 32
 };
-var startState = {
+const startState = {
   hovered: false,
   focused: false,
   pressed: false,
@@ -504,149 +252,126 @@ var 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.
  */
 
-var clickable_behavior_ClickableBehavior = /*#__PURE__*/function (_React$Component) {
-  _inherits(ClickableBehavior, _React$Component);
-
-  var _super = _createSuper(ClickableBehavior);
-
-  _createClass(ClickableBehavior, null, [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      // If new props are disabled, reset the hovered/focused/pressed states
-      if (props.disabled) {
-        return startState;
-      } else {
-        // Cannot return undefined
-        return null;
-      }
+class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  static getDerivedStateFromProps(props, state) {
+    // If new props are disabled, reset the hovered/focused/pressed states
+    if (props.disabled) {
+      return startState;
+    } else {
+      // Cannot return undefined
+      return null;
     }
-  }]);
-
-  function ClickableBehavior(props) {
-    var _this;
-
-    _classCallCheck(this, ClickableBehavior);
-
-    _this = _super.call(this, props);
-
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "waitingForClick", void 0);
-
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "enterClick", void 0);
+  }
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "dragging", void 0);
+  constructor(props) {
+    super(props);
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      var _this$props = _this.props,
-          _this$props$onClick = _this$props.onClick,
-          onClick = _this$props$onClick === void 0 ? undefined : _this$props$onClick,
-          _this$props$beforeNav = _this$props.beforeNav,
-          beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
-          _this$props$safeWithN = _this$props.safeWithNav,
-          safeWithNav = _this$props$safeWithN === void 0 ? undefined : _this$props$safeWithN;
+    this.handleClick = e => {
+      const {
+        onClick = undefined,
+        beforeNav = undefined,
+        safeWithNav = undefined
+      } = this.props;
 
-      if (_this.enterClick) {
+      if (this.enterClick) {
         return;
       }
 
       if (onClick || beforeNav || safeWithNav) {
-        _this.waitingForClick = false;
+        this.waitingForClick = false;
       }
 
-      _this.runCallbackAndMaybeNavigate(e);
-    });
+      this.runCallbackAndMaybeNavigate(e);
+    };
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (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({
+        this.dragging = true;
+        this.setState({
           pressed: true
         });
-      } else if (!_this.waitingForClick) {
-        _this.setState({
+      } else if (!this.waitingForClick) {
+        this.setState({
           hovered: true
         });
       }
-    });
-
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
-      if (!_this.waitingForClick) {
-        _this.dragging = false;
+    };
 
-        _this.setState({
+    this.handleMouseLeave = () => {
+      if (!this.waitingForClick) {
+        this.dragging = false;
+        this.setState({
           hovered: false,
           pressed: false,
           focused: false
         });
       }
-    });
+    };
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () {
-      _this.setState({
+    this.handleMouseDown = () => {
+      this.setState({
         pressed: true
       });
-    });
-
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) {
-      if (_this.dragging) {
-        _this.dragging = false;
+    };
 
-        _this.handleClick(e);
+    this.handleMouseUp = e => {
+      if (this.dragging) {
+        this.dragging = false;
+        this.handleClick(e);
       }
 
-      _this.setState({
+      this.setState({
         pressed: false,
         focused: false
       });
-    });
+    };
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) {
-      _this.dragging = true;
+    this.handleDragStart = e => {
+      this.dragging = true;
       e.preventDefault();
-    });
+    };
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleTouchStart", function () {
-      _this.setState({
+    this.handleTouchStart = () => {
+      this.setState({
         pressed: true
       });
-    });
+    };
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function () {
-      _this.setState({
+    this.handleTouchEnd = () => {
+      this.setState({
         pressed: false
       });
+      this.waitingForClick = true;
+    };
 
-      _this.waitingForClick = true;
-    });
-
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleTouchCancel", function () {
-      _this.setState({
+    this.handleTouchCancel = () => {
+      this.setState({
         pressed: false
       });
+      this.waitingForClick = true;
+    };
 
-      _this.waitingForClick = true;
-    });
-
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
-      var _this$props2 = _this.props,
-          onKeyDown = _this$props2.onKeyDown,
-          role = _this$props2.role;
+    this.handleKeyDown = e => {
+      const {
+        onKeyDown,
+        role
+      } = this.props;
 
       if (onKeyDown) {
         onKeyDown(e);
       }
 
-      var keyCode = e.which || e.keyCode;
-
-      var _getAppropriateTrigge = getAppropriateTriggersForRole(role),
-          triggerOnEnter = _getAppropriateTrigge.triggerOnEnter,
-          triggerOnSpace = _getAppropriateTrigge.triggerOnSpace;
+      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
@@ -654,112 +379,116 @@ var clickable_behavior_ClickableBehavior = /*#__PURE__*/function (_React$Compone
         // call the supplied onClick and handle potential navigation in
         // handleKeyUp instead.
         e.preventDefault();
-
-        _this.setState({
+        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.enterClick = true;
       }
-    });
+    };
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (e) {
-      var _this$props3 = _this.props,
-          onKeyUp = _this$props3.onKeyUp,
-          role = _this$props3.role;
+    this.handleKeyUp = e => {
+      const {
+        onKeyUp,
+        role
+      } = this.props;
 
       if (onKeyUp) {
         onKeyUp(e);
       }
 
-      var keyCode = e.which || e.keyCode;
-
-      var _getAppropriateTrigge2 = getAppropriateTriggersForRole(role),
-          triggerOnEnter = _getAppropriateTrigge2.triggerOnEnter,
-          triggerOnSpace = _getAppropriateTrigge2.triggerOnSpace;
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
 
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        _this.setState({
+        this.setState({
           pressed: false,
           focused: true
         });
-
-        _this.runCallbackAndMaybeNavigate(e);
+        this.runCallbackAndMaybeNavigate(e);
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        _this.enterClick = false;
+        this.enterClick = false;
       }
-    });
+    };
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
-      _this.setState({
+    this.handleFocus = e => {
+      this.setState({
         focused: true
       });
-    });
+    };
 
-    clickable_behavior_defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
-      _this.setState({
+    this.handleBlur = e => {
+      this.setState({
         focused: false,
         pressed: false
       });
-    });
+    };
 
-    _this.state = startState;
-    _this.waitingForClick = false;
-    _this.enterClick = false;
-    _this.dragging = false;
-    return _this;
+    this.state = startState;
+    this.waitingForClick = false;
+    this.enterClick = false;
+    this.dragging = false;
   }
 
-  _createClass(ClickableBehavior, [{
-    key: "navigateOrReset",
-    value: function navigateOrReset(shouldNavigate) {
-      if (shouldNavigate) {
-        var _this$props4 = this.props,
-            history = _this$props4.history,
-            href = _this$props4.href,
-            skipClientNav = _this$props4.skipClientNav,
-            _this$props4$target = _this$props4.target,
-            target = _this$props4$target === void 0 ? undefined : _this$props4$target;
-
-        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.
-          }
+  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 {
+      }
+    } 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: false
+          waiting: true
         });
       }
-    }
-  }, {
-    key: "handleSafeWithNav",
-    value: function handleSafeWithNav(safeWithNav, shouldNavigate) {
-      var _this2 = this;
-
-      var _this$props5 = this.props,
-          skipClientNav = _this$props5.skipClientNav,
-          history = _this$props5.history;
-
-      if (history && !skipClientNav || this.props.target === "_blank") {
-        // client-side nav
-        safeWithNav();
-        this.navigateOrReset(shouldNavigate);
-        return Promise.resolve();
-      } else {
+
+      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
@@ -769,166 +498,145 @@ var clickable_behavior_ClickableBehavior = /*#__PURE__*/function (_React$Compone
           });
         }
 
-        return safeWithNav().then(function () {
-          if (!_this2.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.
-            _this2.setState({
-              waiting: true
-            });
-          }
-
-          return;
-        }).catch(function (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(function () {
-          _this2.navigateOrReset(shouldNavigate);
-        });
-      }
+        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);
+      });
     }
-  }, {
-    key: "runCallbackAndMaybeNavigate",
-    value: function runCallbackAndMaybeNavigate(e) {
-      var _this3 = this;
-
-      var _this$props6 = this.props,
-          _this$props6$onClick = _this$props6.onClick,
-          onClick = _this$props6$onClick === void 0 ? undefined : _this$props6$onClick,
-          _this$props6$beforeNa = _this$props6.beforeNav,
-          beforeNav = _this$props6$beforeNa === void 0 ? undefined : _this$props6$beforeNa,
-          _this$props6$safeWith = _this$props6.safeWithNav,
-          safeWithNav = _this$props6$safeWith === void 0 ? undefined : _this$props6$safeWith,
-          href = _this$props6.href,
-          type = _this$props6.type;
-      var shouldNavigate = true;
-      var 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();
+  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;
+    }
 
-      if (!href && type === "submit" && canSubmit) {
-        var 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.
-            var 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;
-        }
-      }
+    e.preventDefault();
 
-      if (beforeNav) {
-        this.setState({
-          waiting: true
-        });
-        beforeNav().then(function () {
-          if (safeWithNav) {
-            return _this3.handleSafeWithNav(safeWithNav, shouldNavigate);
-          } else {
-            return _this3.navigateOrReset(shouldNavigate);
-          }
-        }).catch(function () {});
-      } else if (safeWithNav) {
-        return this.handleSafeWithNav(safeWithNav, shouldNavigate);
-      } else {
-        this.navigateOrReset(shouldNavigate);
+    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;
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var childrenProps = this.props.disabled ? disabledHandlers : {
-        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,
-        // We set tabIndex to 0 so that users can tab to clickable
-        // things that aren't buttons or anchors.
-        tabIndex: 0
-      }; // 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);
-      var children = this.props.children;
-      return children && children(this.state, childrenProps);
+
+    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);
     }
-  }]);
+  }
 
-  return ClickableBehavior;
-}(external_react_["Component"]);
+  render() {
+    const childrenProps = this.props.disabled ? disabledHandlers : {
+      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,
+      // We set tabIndex to 0 so that users can tab to clickable
+      // things that aren't buttons or anchors.
+      tabIndex: 0
+    }; // 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);
+  }
 
-clickable_behavior_defineProperty(clickable_behavior_ClickableBehavior, "defaultProps", {
+}
+ClickableBehavior.defaultProps = {
   disabled: false
-});
-
+};
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/util/is-client-side-url.js
-/**
- * Returns:
- * - false for hrefs staring with http://, https://, //.
- * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
- * - true for all other values, e.g. /foo/bar
- */
-var isClientSideUrl = function isClientSideUrl(href) {
-  if (typeof href !== "string") {
-    return false;
-  }
+/***/ }),
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/util/get-clickable-behavior.js
+"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__(4);
+/* 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 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.
  */
 
 
 
 
-var ClickableBehaviorWithRouter = Object(external_react_router_dom_["withRouter"])(clickable_behavior_ClickableBehavior);
+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.
@@ -942,7 +650,7 @@ skipClientNav,
  * router object added to the React context object by react-router-dom.
  */
 router) {
-  if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
+  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
@@ -950,42 +658,179 @@ router) {
     return ClickableBehaviorWithRouter;
   }
 
-  return clickable_behavior_ClickableBehavior;
+  return _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"];
 }
-// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/components/clickable.js
-function clickable_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { clickable_typeof = function _typeof(obj) { return typeof obj; }; } else { clickable_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return clickable_typeof(obj); }
 
-function clickable_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { clickable_ownKeys(Object(source), true).forEach(function (key) { clickable_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { clickable_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+module.exports = require("react-router-dom");
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+module.exports = require("@khanacademy/wonder-blocks-core");
 
-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); }
+/***/ }),
+/* 6 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"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__);
+
+/**
+ * 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
+    };
+  }
 
-function clickable_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  throw new Error(`Failed to parse color: ${color}`);
+}; // Stringify the color in an `rgba()` or `#abcdef` format.
 
-function clickable_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function clickable_createClass(Constructor, protoProps, staticProps) { if (protoProps) clickable_defineProperties(Constructor.prototype, protoProps); if (staticProps) clickable_defineProperties(Constructor, staticProps); return Constructor; }
+const format = color => {
+  const r = Math.round(color.r);
+  const g = Math.round(color.g);
+  const b = Math.round(color.b);
 
-function clickable_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) clickable_setPrototypeOf(subClass, superClass); }
+  if (color.a === 1) {
+    const _s = c => {
+      const asString = c.toString(16);
+      return asString.length === 1 ? asString + asString : asString;
+    };
 
-function clickable_setPrototypeOf(o, p) { clickable_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return clickable_setPrototypeOf(o, p); }
+    return `#${_s(r)}${_s(g)}${_s(b)}`;
+  } else {
+    return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
+  }
+}; // Adjust the alpha value of a color.
 
-function clickable_createSuper(Derived) { var hasNativeReflectConstruct = clickable_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = clickable_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = clickable_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return clickable_possibleConstructorReturn(this, result); }; }
 
-function clickable_possibleConstructorReturn(self, call) { if (call && (clickable_typeof(call) === "object" || typeof call === "function")) { return call; } return clickable_assertThisInitialized(self); }
+const fade = (color, percentage) => {
+  if (percentage < 0 || percentage > 1) {
+    throw new Error("Percentage must be between 0 and 1");
+  }
 
-function clickable_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+  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
+  });
+};
+
+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);
 
-function clickable_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
-function clickable_getPrototypeOf(o) { clickable_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return clickable_getPrototypeOf(o); }
+/***/ }),
+/* 7 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-function clickable_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Clickable; });
+/* 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__(8);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* 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 _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); }
 
 
 
@@ -995,9 +840,9 @@ function clickable_defineProperty(obj, key, value) { if (key in obj) { Object.de
 
 
 
-var StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
-var StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
-var StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
+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_2__["Link"]);
 /**
  * A component to turn any custom component into a clickable one.
  *
@@ -1023,132 +868,102 @@ var StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_d
  * ```
  */
 
-var clickable_Clickable = /*#__PURE__*/function (_React$Component) {
-  clickable_inherits(Clickable, _React$Component);
-
-  var _super = clickable_createSuper(Clickable);
+class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  constructor(...args) {
+    super(...args);
 
-  function Clickable() {
-    var _this;
-
-    clickable_classCallCheck(this, Clickable);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    clickable_defineProperty(clickable_assertThisInitialized(_this), "getCorrectTag", function (clickableState, commonProps) {
-      var activeHref = _this.props.href && !_this.props.disabled;
-      var useClient = _this.context.router && !_this.props.skipClientNav && isClientSideUrl(_this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
+    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_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) {
-        return /*#__PURE__*/external_react_["createElement"](StyledLink, _extends({}, 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));
+      if (activeHref && useClient && this.props.href) {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLink, _extends({}, 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__*/external_react_["createElement"](StyledAnchor, _extends({}, 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));
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledAnchor, _extends({}, 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__*/external_react_["createElement"](StyledButton, _extends({}, commonProps, {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledButton, _extends({}, commonProps, {
           type: "button",
-          disabled: _this.props.disabled
-        }), _this.props.children(clickableState));
+          disabled: this.props.disabled
+        }), this.props.children(clickableState));
       }
-    });
-
-    return _this;
+    };
   }
 
-  clickable_createClass(Clickable, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          href = _this$props.href,
-          onClick = _this$props.onClick,
-          skipClientNav = _this$props.skipClientNav,
-          _this$props$beforeNav = _this$props.beforeNav,
-          beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
-          _this$props$safeWithN = _this$props.safeWithNav,
-          safeWithNav = _this$props$safeWithN === void 0 ? undefined : _this$props$safeWithN,
-          style = _this$props.style,
-          _this$props$target = _this$props.target,
-          target = _this$props$target === void 0 ? undefined : _this$props$target,
-          testId = _this$props.testId,
-          onKeyDown = _this$props.onKeyDown,
-          onKeyUp = _this$props.onKeyUp,
-          hideDefaultFocusRing = _this$props.hideDefaultFocusRing,
-          light = _this$props.light,
-          disabled = _this$props.disabled,
-          restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"]);
-
-      var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
-
-      var getStyle = function getStyle(state) {
-        return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
-      };
-
-      if (beforeNav) {
-        return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
-          href: href,
-          onClick: onClick,
-          beforeNav: beforeNav,
-          safeWithNav: safeWithNav,
-          onKeyDown: onKeyDown,
-          onKeyUp: onKeyUp,
-          disabled: disabled
-        }, function (state, childrenProps) {
-          return _this2.getCorrectTag(state, _objectSpread(_objectSpread({}, restProps), {}, {
-            "data-test-id": testId,
-            style: getStyle(state)
-          }, childrenProps));
-        });
-      } else {
-        return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
-          href: href,
-          onClick: onClick,
-          safeWithNav: safeWithNav,
-          onKeyDown: onKeyDown,
-          onKeyUp: onKeyUp,
-          target: target,
-          disabled: disabled
-        }, function (state, childrenProps) {
-          return _this2.getCorrectTag(state, _objectSpread(_objectSpread({}, restProps), {}, {
-            "data-test-id": testId,
-            style: getStyle(state)
-          }, childrenProps));
-        });
-      }
+  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_6__[/* default */ "a"])(href, skipClientNav, router);
+
+    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
+
+    if (beforeNav) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["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_0__["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
+      }));
     }
-  }]);
-
-  return Clickable;
-}(external_react_["Component"]); // Source:  https://gist.github.com/MoOx/9137295
+  }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
 
-clickable_defineProperty(clickable_Clickable, "contextTypes", {
-  router: external_prop_types_["any"]
-});
+} // Source:  https://gist.github.com/MoOx/9137295
 
-clickable_defineProperty(clickable_Clickable, "defaultProps", {
+Clickable.defaultProps = {
   light: false,
   disabled: false,
   "aria-label": ""
-});
-
-
-var styles = external_aphrodite_["StyleSheet"].create({
+};
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   reset: {
     border: "none",
     margin: 0,
@@ -1181,13 +996,69 @@ var styles = external_aphrodite_["StyleSheet"].create({
     cursor: "pointer"
   },
   focused: {
-    outline: "solid 2px ".concat(es.blue)
+    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].blue}`
   },
   focusedLight: {
-    outline: "solid 2px ".concat(es.white)
+    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].white}`
   }
 });
-// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/index.js
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+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";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_clickable_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
+/* 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__(3);
+/* 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"]; });
+