@khanacademy/wonder-blocks-icon-button 3.3.12 → 3.4.1

package/dist/es/index.js

@@ -1,5 +1,7 @@
-import { createElement, Component } from 'react';
-import { any } from 'prop-types';
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { Component, createElement } from 'react';
+import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
@@ -7,284 +9,66 @@ import Color, { SemanticColor, mix, fade } from '@khanacademy/wonder-blocks-colo
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import Icon from '@khanacademy/wonder-blocks-icon';
 
-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 _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 _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);
-}
-
-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;
+const _excluded = ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"];
+const StyledAnchor = addStyle("a");
+const StyledButton = addStyle("button");
+const StyledLink = addStyle(Link);
+class IconButtonCore extends Component {
+  renderInner(router) {
+    const _this$props = this.props,
+          {
+      skipClientNav,
+      color,
+      disabled,
+      focused,
+      hovered,
+      href,
+      icon,
+      kind,
+      light,
+      pressed,
+      style,
+      testId
+    } = _this$props,
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
+
+    const buttonStyles = _generateStyles(buttonColor, kind, light);
+
+    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
+    const child = /*#__PURE__*/createElement(Icon, {
+      size: "medium",
+      color: "currentColor",
+      icon: icon
     });
-    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));
+    const commonProps = _extends({
+      "data-test-id": testId,
+      style: [defaultStyle, style]
+    }, restProps);
+
+    if (href && !disabled) {
+      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
+        to: href
+      }), child) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
+        href: href
+      }), child);
     } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
-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 _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-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 _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;
-}
-
-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 /*#__PURE__*/createElement(StyledButton, _extends({
+        type: "button"
+      }, commonProps, {
+        disabled: disabled
+      }), child);
     }
   }
 
-  return target;
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
   }
 
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-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);
-  };
 }
-
-var StyledAnchor = addStyle("a");
-var StyledButton = addStyle("button");
-var StyledLink = addStyle(Link);
-
-var IconButtonCore = /*#__PURE__*/function (_React$Component) {
-  _inherits(IconButtonCore, _React$Component);
-
-  var _super = _createSuper(IconButtonCore);
-
-  function IconButtonCore() {
-    _classCallCheck(this, IconButtonCore);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(IconButtonCore, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          skipClientNav = _this$props.skipClientNav,
-          color = _this$props.color,
-          disabled = _this$props.disabled,
-          focused = _this$props.focused,
-          hovered = _this$props.hovered,
-          href = _this$props.href,
-          icon = _this$props.icon,
-          kind = _this$props.kind,
-          light = _this$props.light,
-          pressed = _this$props.pressed,
-          style = _this$props.style,
-          testId = _this$props.testId,
-          _ = _this$props.waiting,
-          restProps = _objectWithoutProperties(_this$props, ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"]);
-
-      var router = this.context.router;
-      var buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
-
-      var buttonStyles = _generateStyles(buttonColor, kind, light);
-
-      var defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
-      var child = /*#__PURE__*/createElement(Icon, {
-        size: "medium",
-        color: "currentColor",
-        icon: icon
-      });
-
-      var commonProps = _objectSpread2({
-        "data-test-id": testId,
-        style: [defaultStyle, style]
-      }, restProps);
-
-      if (href && !disabled) {
-        return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
-          to: href
-        }), child) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
-          href: href
-        }), child);
-      } else {
-        return /*#__PURE__*/createElement(StyledButton, _extends({
-          type: "button"
-        }, commonProps, {
-          disabled: disabled
-        }), child);
-      }
-    }
-  }]);
-
-  return IconButtonCore;
-}(Component);
-
-_defineProperty(IconButtonCore, "contextTypes", {
-  router: any
-});
-var sharedStyles = StyleSheet.create({
+const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
     display: "inline-flex",
@@ -312,10 +96,10 @@ var sharedStyles = StyleSheet.create({
     cursor: "default"
   }
 });
-var styles = {};
+const styles = {};
 
-var _generateStyles = function _generateStyles(color, kind, light) {
-  var buttonType = color + kind + light.toString();
+const _generateStyles = (color, kind, light) => {
+  const buttonType = color + kind + light.toString();
 
   if (styles[buttonType]) {
     return styles[buttonType];
@@ -325,11 +109,13 @@ var _generateStyles = function _generateStyles(color, kind, light) {
     throw new Error("Light is only supported for primary IconButtons");
   }
 
-  var white = Color.white,
-      offBlack32 = Color.offBlack32,
-      offBlack64 = Color.offBlack64,
-      offBlack = Color.offBlack;
-  var newStyles = {
+  const {
+    white,
+    offBlack32,
+    offBlack64,
+    offBlack
+  } = Color;
+  const newStyles = {
     default: {},
     focus: {
       color: light ? white : color,
@@ -371,6 +157,9 @@ var _generateStyles = function _generateStyles(color, kind, light) {
   return styles[buttonType];
 };
 
+const _excluded$1 = ["onClick", "href", "skipClientNav", "tabIndex", "target"],
+      _excluded2 = ["tabIndex"];
+
 /**
  * An IconButton is a button whose contents are an SVG image.
  *
@@ -407,64 +196,53 @@ var _generateStyles = function _generateStyles(color, kind, light) {
  * />
  * ```
  */
-var IconButton = /*#__PURE__*/function (_React$Component) {
-  _inherits(IconButton, _React$Component);
-
-  var _super = _createSuper(IconButton);
-
-  function IconButton() {
-    _classCallCheck(this, IconButton);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(IconButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          onClick = _this$props.onClick,
-          href = _this$props.href,
-          skipClientNav = _this$props.skipClientNav,
-          tabIndex = _this$props.tabIndex,
-          target = _this$props.target,
-          sharedProps = _objectWithoutProperties(_this$props, ["onClick", "href", "skipClientNav", "tabIndex", "target"]);
-
-      var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
-      return /*#__PURE__*/createElement(ClickableBehavior, {
-        disabled: sharedProps.disabled,
+class IconButton extends Component {
+  renderClickableBehavior(router) {
+    const _this$props = this.props,
+          {
+      onClick,
+      href,
+      skipClientNav,
+      tabIndex,
+      target
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
+    return /*#__PURE__*/createElement(ClickableBehavior, {
+      disabled: sharedProps.disabled,
+      href: href,
+      onClick: onClick,
+      role: "button",
+      target: target
+    }, (state, _ref) => {
+      let {
+        tabIndex: clickableTabIndex
+      } = _ref,
+          childrenProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+
+      return /*#__PURE__*/createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
+        skipClientNav: skipClientNav,
         href: href,
-        onClick: onClick,
-        role: "button",
-        target: target
-      }, function (state, _ref) {
-        var clickableTabIndex = _ref.tabIndex,
-            childrenProps = _objectWithoutProperties(_ref, ["tabIndex"]);
-
-        return /*#__PURE__*/createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
-          skipClientNav: skipClientNav,
-          href: href,
-          target: target // If tabIndex is provide to the component we allow
-          // it to override the tabIndex provide to use by
-          // ClickableBehavior.
-          ,
-          tabIndex: tabIndex || clickableTabIndex
-        }));
-      });
-    }
-  }]);
-
-  return IconButton;
-}(Component);
+        target: target // If tabIndex is provide to the component we allow
+        // it to override the tabIndex provide to use by
+        // ClickableBehavior.
+        ,
+        tabIndex: tabIndex || clickableTabIndex
+      }));
+    });
+  }
 
-_defineProperty(IconButton, "contextTypes", {
-  router: any
-});
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
 
-_defineProperty(IconButton, "defaultProps", {
+}
+IconButton.defaultProps = {
   color: "default",
   kind: "primary",
   light: false,
   disabled: false
-});
+};
 
 export default IconButton;

package/dist/index.js

@@ -82,26 +82,26 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 8);
+/******/ 	return __webpack_require__(__webpack_require__.s = 10);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-color");
+module.exports = require("react");
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("@khanacademy/wonder-blocks-color");
 
 /***/ }),
 /* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react-router");
 
 /***/ }),
 /* 3 */
@@ -123,89 +123,128 @@ module.exports = require("aphrodite");
 
 /***/ }),
 /* 6 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router-dom");
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-icon");
-
-/***/ }),
-/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ icon_button_IconButton; });
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1);
-
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(2);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-clickable"
-var wonder_blocks_clickable_ = __webpack_require__(3);
-
-// EXTERNAL MODULE: external "aphrodite"
-var external_aphrodite_ = __webpack_require__(5);
-
-// EXTERNAL MODULE: external "react-router-dom"
-var external_react_router_dom_ = __webpack_require__(6);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
-var wonder_blocks_color_ = __webpack_require__(0);
-var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(4);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
-var wonder_blocks_icon_ = __webpack_require__(7);
-var wonder_blocks_icon_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_);
-
-// CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/src/components/icon-button-core.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); }
-
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return IconButton; });
+/* 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__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _icon_button_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
 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); }
 
-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 _objectSpread(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; }
-
-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; }
-
-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; }
-
-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; } }
+/**
+ * An IconButton is a button whose contents are an SVG image.
+ *
+ * To use, supply an onClick function, a wonder-blocks icon asset (see
+ * the Icon section) and an aria-label to describe the button functionality.
+ * Optionally specify href (URL), clientSideNav, color
+ * (Wonder Blocks Blue or Red), kind ("primary", "secondary", or "tertiary"),
+ * light (whether the IconButton will be rendered on a dark background),
+ * disabled , test ID, and custom styling.
+ *
+ * The size of an IconButton matches the size of icon it wraps which is 24x24
+ * pixels.  The focus ring which is displayed on hover and focus is much
+ * larger but does not affect its size.  This matches the behavior of Button.
+ *
+ * IconButtons require a certain amount of space between them to ensure the
+ * focus rings don't overlap.  The minimum amount of spacing is 16px, but
+ * you should refer to the mocks provided by design.  Using a Strut in between
+ * IconButtons is the preferred way to for adding this spacing.
+ *
+ * Many layouts require alignment of visual left (or right) side of an
+ * IconButton.  This requires a little bit of pixel nudging since each icon
+ * as a different amount of internal padding.
+ *
+ * See the Toolbar documentation for examples of IconButton use that follow
+ * the best practices described above.
+ *
+ * ```js
+ * import {icons} from "@khanacademy/wonder-blocks-icon";
+ *
+ * <IconButton
+ *     icon={icons.anIcon}
+ *     aria-label="An Icon"
+ *     onClick={(e) => console.log("Hello, world!")}
+ * />
+ * ```
+ */
+class IconButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  renderClickableBehavior(router) {
+    const {
+      onClick,
+      href,
+      skipClientNav,
+      tabIndex,
+      target,
+      ...sharedProps
+    } = this.props;
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, router);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
+      disabled: sharedProps.disabled,
+      href: href,
+      onClick: onClick,
+      role: "button",
+      target: target
+    }, (state, {
+      tabIndex: clickableTabIndex,
+      ...childrenProps
+    }) => {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_icon_button_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({}, sharedProps, state, childrenProps, {
+        skipClientNav: skipClientNav,
+        href: href,
+        target: target // If tabIndex is provide to the component we allow
+        // it to override the tabIndex provide to use by
+        // ClickableBehavior.
+        ,
+        tabIndex: tabIndex || clickableTabIndex
+      }));
+    });
+  }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_1__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
 
-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; }
+}
+IconButton.defaultProps = {
+  color: "default",
+  kind: "primary",
+  light: false,
+  disabled: false
+};
 
+/***/ }),
+/* 7 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return IconButtonCore; });
+/* 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__(5);
+/* 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__(8);
+/* 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__(2);
+/* 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_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4);
+/* 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_clickable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_7__);
+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); }
 
 
 
@@ -213,82 +252,66 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-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"]);
 
-var icon_button_core_IconButtonCore = /*#__PURE__*/function (_React$Component) {
-  _inherits(IconButtonCore, _React$Component);
 
-  var _super = _createSuper(IconButtonCore);
+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_2__["Link"]);
+class IconButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  renderInner(router) {
+    const {
+      skipClientNav,
+      color,
+      disabled,
+      focused,
+      hovered,
+      href,
+      icon,
+      kind,
+      light,
+      pressed,
+      style,
+      testId,
+      waiting: _,
+      ...restProps
+    } = this.props;
+    const buttonColor = color === "destructive" ? _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["SemanticColor"].controlDestructive : _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["SemanticColor"].controlDefault;
 
-  function IconButtonCore() {
-    _classCallCheck(this, IconButtonCore);
+    const buttonStyles = _generateStyles(buttonColor, kind, light);
 
-    return _super.apply(this, arguments);
-  }
+    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
+    const child = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_7___default.a, {
+      size: "medium",
+      color: "currentColor",
+      icon: icon
+    });
+    const commonProps = {
+      "data-test-id": testId,
+      style: [defaultStyle, style],
+      ...restProps
+    };
 
-  _createClass(IconButtonCore, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          skipClientNav = _this$props.skipClientNav,
-          color = _this$props.color,
-          disabled = _this$props.disabled,
-          focused = _this$props.focused,
-          hovered = _this$props.hovered,
-          href = _this$props.href,
-          icon = _this$props.icon,
-          kind = _this$props.kind,
-          light = _this$props.light,
-          pressed = _this$props.pressed,
-          style = _this$props.style,
-          testId = _this$props.testId,
-          _ = _this$props.waiting,
-          restProps = _objectWithoutProperties(_this$props, ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"]);
-
-      var router = this.context.router;
-      var buttonColor = color === "destructive" ? wonder_blocks_color_["SemanticColor"].controlDestructive : wonder_blocks_color_["SemanticColor"].controlDefault;
-
-      var buttonStyles = icon_button_core_generateStyles(buttonColor, kind, light);
-
-      var defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
-      var child = /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
-        size: "medium",
-        color: "currentColor",
-        icon: icon
-      });
-
-      var commonProps = _objectSpread({
-        "data-test-id": testId,
-        style: [defaultStyle, style]
-      }, restProps);
-
-      if (href && !disabled) {
-        return router && !skipClientNav && Object(wonder_blocks_clickable_["isClientSideUrl"])(href) ? /*#__PURE__*/external_react_["createElement"](StyledLink, _extends({}, commonProps, {
-          to: href
-        }), child) : /*#__PURE__*/external_react_["createElement"](StyledAnchor, _extends({}, commonProps, {
-          href: href
-        }), child);
-      } else {
-        return /*#__PURE__*/external_react_["createElement"](StyledButton, _extends({
-          type: "button"
-        }, commonProps, {
-          disabled: disabled
-        }), child);
-      }
+    if (href && !disabled) {
+      return router && !skipClientNav && Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__["isClientSideUrl"])(href) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLink, _extends({}, commonProps, {
+        to: href
+      }), child) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledAnchor, _extends({}, commonProps, {
+        href: href
+      }), child);
+    } else {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledButton, _extends({
+        type: "button"
+      }, commonProps, {
+        disabled: disabled
+      }), child);
     }
-  }]);
-
-  return IconButtonCore;
-}(external_react_["Component"]);
-
-_defineProperty(icon_button_core_IconButtonCore, "contextTypes", {
-  router: external_prop_types_["any"]
-});
+  }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderInner(router));
+  }
 
-var sharedStyles = external_aphrodite_["StyleSheet"].create({
+}
+const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   shared: {
     position: "relative",
     display: "inline-flex",
@@ -316,10 +339,10 @@ var sharedStyles = external_aphrodite_["StyleSheet"].create({
     cursor: "default"
   }
 });
-var styles = {};
+const styles = {};
 
-var icon_button_core_generateStyles = function _generateStyles(color, kind, light) {
-  var buttonType = color + kind + light.toString();
+const _generateStyles = (color, kind, light) => {
+  const buttonType = color + kind + light.toString();
 
   if (styles[buttonType]) {
     return styles[buttonType];
@@ -329,11 +352,13 @@ var icon_button_core_generateStyles = function _generateStyles(color, kind, ligh
     throw new Error("Light is only supported for primary IconButtons");
   }
 
-  var white = wonder_blocks_color_default.a.white,
-      offBlack32 = wonder_blocks_color_default.a.offBlack32,
-      offBlack64 = wonder_blocks_color_default.a.offBlack64,
-      offBlack = wonder_blocks_color_default.a.offBlack;
-  var newStyles = {
+  const {
+    white,
+    offBlack32,
+    offBlack64,
+    offBlack
+  } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a;
+  const newStyles = {
     default: {},
     focus: {
       color: light ? white : color,
@@ -343,14 +368,14 @@ var icon_button_core_generateStyles = function _generateStyles(color, kind, ligh
       borderRadius: 4
     },
     active: {
-      color: light ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(color, 0.32), white) : Object(wonder_blocks_color_["mix"])(offBlack32, color),
+      color: light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(color, 0.32), white) : Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["mix"])(offBlack32, color),
       borderWidth: 2,
-      borderColor: light ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(color, 0.32), white) : Object(wonder_blocks_color_["mix"])(offBlack32, color),
+      borderColor: light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(color, 0.32), white) : Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["mix"])(offBlack32, color),
       borderStyle: "solid",
       borderRadius: 4
     },
     disabled: {
-      color: light ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(white, 0.32), color) : offBlack32,
+      color: light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(white, 0.32), color) : offBlack32,
       cursor: "default"
     }
   };
@@ -371,143 +396,31 @@ var icon_button_core_generateStyles = function _generateStyles(color, kind, ligh
     throw new Error("IconButton kind not recognized");
   }
 
-  styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
+  styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create(newStyles);
   return styles[buttonType];
 };
-// CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/src/components/icon-button.js
-function icon_button_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { icon_button_typeof = function _typeof(obj) { return typeof obj; }; } else { icon_button_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return icon_button_typeof(obj); }
-
-function icon_button_extends() { icon_button_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 icon_button_extends.apply(this, arguments); }
-
-function icon_button_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = icon_button_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; }
-
-function icon_button_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; }
-
-function icon_button_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function icon_button_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 icon_button_createClass(Constructor, protoProps, staticProps) { if (protoProps) icon_button_defineProperties(Constructor.prototype, protoProps); if (staticProps) icon_button_defineProperties(Constructor, staticProps); return Constructor; }
-
-function icon_button_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) icon_button_setPrototypeOf(subClass, superClass); }
-
-function icon_button_setPrototypeOf(o, p) { icon_button_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return icon_button_setPrototypeOf(o, p); }
-
-function icon_button_createSuper(Derived) { var hasNativeReflectConstruct = icon_button_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = icon_button_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = icon_button_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return icon_button_possibleConstructorReturn(this, result); }; }
-
-function icon_button_possibleConstructorReturn(self, call) { if (call && (icon_button_typeof(call) === "object" || typeof call === "function")) { return call; } return icon_button_assertThisInitialized(self); }
-
-function icon_button_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function icon_button_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 icon_button_getPrototypeOf(o) { icon_button_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return icon_button_getPrototypeOf(o); }
-
-function icon_button_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; }
-
-
-
-
-
-
-/**
- * An IconButton is a button whose contents are an SVG image.
- *
- * To use, supply an onClick function, a wonder-blocks icon asset (see
- * the Icon section) and an aria-label to describe the button functionality.
- * Optionally specify href (URL), clientSideNav, color
- * (Wonder Blocks Blue or Red), kind ("primary", "secondary", or "tertiary"),
- * light (whether the IconButton will be rendered on a dark background),
- * disabled , test ID, and custom styling.
- *
- * The size of an IconButton matches the size of icon it wraps which is 24x24
- * pixels.  The focus ring which is displayed on hover and focus is much
- * larger but does not affect its size.  This matches the behavior of Button.
- *
- * IconButtons require a certain amount of space between them to ensure the
- * focus rings don't overlap.  The minimum amount of spacing is 16px, but
- * you should refer to the mocks provided by design.  Using a Strut in between
- * IconButtons is the preferred way to for adding this spacing.
- *
- * Many layouts require alignment of visual left (or right) side of an
- * IconButton.  This requires a little bit of pixel nudging since each icon
- * as a different amount of internal padding.
- *
- * See the Toolbar documentation for examples of IconButton use that follow
- * the best practices described above.
- *
- * ```js
- * import {icons} from "@khanacademy/wonder-blocks-icon";
- *
- * <IconButton
- *     icon={icons.anIcon}
- *     aria-label="An Icon"
- *     onClick={(e) => console.log("Hello, world!")}
- * />
- * ```
- */
-var icon_button_IconButton = /*#__PURE__*/function (_React$Component) {
-  icon_button_inherits(IconButton, _React$Component);
-
-  var _super = icon_button_createSuper(IconButton);
 
-  function IconButton() {
-    icon_button_classCallCheck(this, IconButton);
-
-    return _super.apply(this, arguments);
-  }
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
 
-  icon_button_createClass(IconButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          onClick = _this$props.onClick,
-          href = _this$props.href,
-          skipClientNav = _this$props.skipClientNav,
-          tabIndex = _this$props.tabIndex,
-          target = _this$props.target,
-          sharedProps = icon_button_objectWithoutProperties(_this$props, ["onClick", "href", "skipClientNav", "tabIndex", "target"]);
-
-      var ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])(href, skipClientNav, this.context.router);
-      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
-        disabled: sharedProps.disabled,
-        href: href,
-        onClick: onClick,
-        role: "button",
-        target: target
-      }, function (state, _ref) {
-        var clickableTabIndex = _ref.tabIndex,
-            childrenProps = icon_button_objectWithoutProperties(_ref, ["tabIndex"]);
-
-        return /*#__PURE__*/external_react_["createElement"](icon_button_core_IconButtonCore, icon_button_extends({}, sharedProps, state, childrenProps, {
-          skipClientNav: skipClientNav,
-          href: href,
-          target: target // If tabIndex is provide to the component we allow
-          // it to override the tabIndex provide to use by
-          // ClickableBehavior.
-          ,
-          tabIndex: tabIndex || clickableTabIndex
-        }));
-      });
-    }
-  }]);
+module.exports = require("react-router-dom");
 
-  return IconButton;
-}(external_react_["Component"]);
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
 
-icon_button_defineProperty(icon_button_IconButton, "contextTypes", {
-  router: external_prop_types_["any"]
-});
+module.exports = require("@khanacademy/wonder-blocks-icon");
 
-icon_button_defineProperty(icon_button_IconButton, "defaultProps", {
-  color: "default",
-  kind: "primary",
-  light: false,
-  disabled: false
-});
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_icon_button_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_icon_button_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/src/index.js
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "3.3.12",
+  "version": "3.4.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,19 +15,20 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "^2.1.1",
-    "@khanacademy/wonder-blocks-color": "^1.1.17",
-    "@khanacademy/wonder-blocks-core": "^3.1.3",
-    "@khanacademy/wonder-blocks-icon": "^1.2.20"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-router-dom": "^4.2.2"
+    "react": "16.14.0",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.0.4"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "b7d7425c7f2e02cd9b9ac6ac7e9fe12ead2bd8ab"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

package/src/components/__tests__/icon-button.test.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import {mount, shallow} from "enzyme";
+import {mount} from "enzyme";
 
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {icons} from "@khanacademy/wonder-blocks-icon";
@@ -9,8 +9,19 @@ import expectRenderError from "../../../../../utils/testing/expect-render-error.
 import IconButton from "../icon-button.js";
 
 describe("IconButton", () => {
+    const {location} = window;
+
+    beforeAll(() => {
+        delete window.location;
+        window.location = {assign: jest.fn()};
+    });
+
+    afterAll(() => {
+        window.location = location;
+    });
+
     test("render an icon", (done) => {
-        const wrapper = shallow(
+        const wrapper = mount(
             <IconButton
                 icon={icons.search}
                 aria-label="search"

package/src/components/icon-button-core.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 
 import Color, {
     SemanticColor,
@@ -33,18 +33,12 @@ type Props = {|
     href?: string,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 
 export default class IconButtonCore extends React.Component<Props> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
-
-    render(): React.Node {
+    renderInner(router: any): React.Node {
         const {
             skipClientNav,
             color,
@@ -61,7 +55,6 @@ export default class IconButtonCore extends React.Component<Props> {
             waiting: _,
             ...restProps
         } = this.props;
-        const {router} = this.context;
 
         const buttonColor =
             color === "destructive"
@@ -111,6 +104,14 @@ export default class IconButtonCore extends React.Component<Props> {
             );
         }
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderInner(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }
 
 const sharedStyles = StyleSheet.create({

package/src/components/icon-button.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
@@ -126,10 +126,6 @@ export type SharedProps = {|
     onClick?: (e: SyntheticEvent<>) => mixed,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 type DefaultProps = {|
     color: $PropertyType<SharedProps, "color">,
     kind: $PropertyType<SharedProps, "kind">,
@@ -174,7 +170,6 @@ type DefaultProps = {|
  * ```
  */
 export default class IconButton extends React.Component<SharedProps> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
     static defaultProps: DefaultProps = {
         color: "default",
         kind: "primary",
@@ -182,20 +177,14 @@ export default class IconButton extends React.Component<SharedProps> {
         disabled: false,
     };
 
-    render(): React.Node {
-        const {
-            onClick,
-            href,
-            skipClientNav,
-            tabIndex,
-            target,
-            ...sharedProps
-        } = this.props;
+    renderClickableBehavior(router: any): React.Node {
+        const {onClick, href, skipClientNav, tabIndex, target, ...sharedProps} =
+            this.props;
 
         const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
-            this.context.router,
+            router,
         );
 
         return (
@@ -225,4 +214,12 @@ export default class IconButton extends React.Component<SharedProps> {
             </ClickableBehavior>
         );
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderClickableBehavior(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }

package/src/__tests__/index.test.js

@@ -1,13 +0,0 @@
-// @flow
-describe("@khanacademy/wonder-blocks-icon-button", () => {
-    test("package exports default", async () => {
-        // Arrange
-        const importedModule = import("../index.js");
-
-        // Act
-        const result = await importedModule;
-
-        // Assert
-        expect(Object.keys(result).sort()).toEqual(["default"].sort());
-    });
-});