@khanacademy/wonder-blocks-button 2.9.13 → 2.10.2

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { Component, createElement, Fragment } from 'react';
-import { any } from 'prop-types';
+import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
@@ -17,7 +17,7 @@ const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 class ButtonCore extends Component {
-  render() {
+  renderInner(router) {
     const _this$props = this.props,
           {
       children,
@@ -40,9 +40,6 @@ class ButtonCore extends Component {
     } = _this$props,
           restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    const {
-      router
-    } = this.context;
     const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
     const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
 
@@ -94,10 +91,11 @@ class ButtonCore extends Component {
     }
   }
 
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
+  }
+
 }
-ButtonCore.contextTypes = {
-  router: any
-};
 const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
@@ -311,17 +309,20 @@ const _excluded$1 = ["href", "type", "children", "skipClientNav", "spinner", "di
  * `ButtonCore` is a stateless component which displays the different states
  * the `Button` can take.
  *
- * Example usage:
+ * ### Usage
+ *
  * ```jsx
+ * import Button from "@khanacademy/wonder-blocks-button";
+ *
  * <Button
  *     onClick={(e) => console.log("Hello, world!")}
  * >
- *     Label
+ *     Hello, world!
  * </Button>
  * ```
  */
 class Button extends Component {
-  render() {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
           {
       href = undefined,
@@ -339,7 +340,7 @@ class Button extends Component {
     } = _this$props,
           sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
 
     const renderProp = (state, _ref) => {
       let {
@@ -386,10 +387,11 @@ class Button extends Component {
     }
   }
 
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-Button.contextTypes = {
-  router: any
-};
 Button.defaultProps = {
   color: "default",
   kind: "primary",

package/dist/index.js

@@ -95,169 +95,190 @@ module.exports = require("react");
 /* 1 */
 /***/ (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;
+module.exports = require("@khanacademy/wonder-blocks-color");
 
 /***/ }),
 /* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-color");
+module.exports = require("react-router");
 
 /***/ }),
 /* 3 */
 /***/ (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 = _objectWithoutPropertiesLoose;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
 module.exports = require("@khanacademy/wonder-blocks-clickable");
 
 /***/ }),
-/* 6 */
+/* 4 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-core");
 
 /***/ }),
-/* 7 */
+/* 5 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-spacing");
 
 /***/ }),
-/* 8 */
+/* 6 */
 /***/ (function(module, exports) {
 
 module.exports = require("aphrodite");
 
 /***/ }),
-/* 9 */
+/* 7 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-typography");
 
 /***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router-dom");
-
-/***/ }),
-/* 11 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-progress-spinner");
-
-/***/ }),
-/* 12 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-icon");
-
-/***/ }),
-/* 13 */
+/* 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 */ button_Button; });
-
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
-var helpers_extends = __webpack_require__(1);
-var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
-
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var objectWithoutPropertiesLoose = __webpack_require__(3);
-var objectWithoutPropertiesLoose_default = /*#__PURE__*/__webpack_require__.n(objectWithoutPropertiesLoose);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Button; });
+/* 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 _button_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
+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); }
 
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(0);
 
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(4);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-clickable"
-var wonder_blocks_clickable_ = __webpack_require__(5);
 
-// EXTERNAL MODULE: external "aphrodite"
-var external_aphrodite_ = __webpack_require__(8);
 
-// EXTERNAL MODULE: external "react-router-dom"
-var external_react_router_dom_ = __webpack_require__(10);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
-var wonder_blocks_typography_ = __webpack_require__(9);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
-var wonder_blocks_color_ = __webpack_require__(2);
-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__(6);
+/**
+ * Reusable button component.
+ *
+ * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
+ * `ButtonCore`. `ClickableBehavior` handles interactions and state changes.
+ * `ButtonCore` is a stateless component which displays the different states
+ * the `Button` can take.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import Button from "@khanacademy/wonder-blocks-button";
+ *
+ * <Button
+ *     onClick={(e) => console.log("Hello, world!")}
+ * >
+ *     Hello, world!
+ * </Button>
+ * ```
+ */
+class Button extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  renderClickableBehavior(router) {
+    const {
+      href = undefined,
+      type = undefined,
+      children,
+      skipClientNav,
+      spinner,
+      disabled,
+      onClick,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      tabIndex,
+      target,
+      rel,
+      ...sharedButtonCoreProps
+    } = this.props;
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, router);
+
+    const renderProp = (state, {
+      tabIndex: clickableTabIndex,
+      ...restChildProps
+    }) => {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_button_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({}, sharedButtonCoreProps, state, restChildProps, {
+        disabled: disabled,
+        spinner: spinner || state.waiting,
+        skipClientNav: skipClientNav,
+        href: href,
+        target: target,
+        type: type // If tabIndex is provide to the component we allow
+        // it to override the tabIndex provide to use by
+        // ClickableBehavior.
+        ,
+        tabIndex: tabIndex || clickableTabIndex
+      }), children);
+    };
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-progress-spinner"
-var wonder_blocks_progress_spinner_ = __webpack_require__(11);
+    if (beforeNav) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
+        disabled: spinner || disabled,
+        href: href,
+        role: "button",
+        type: type,
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        rel: rel
+      }, renderProp);
+    } else {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
+        disabled: spinner || disabled,
+        href: href,
+        role: "button",
+        type: type,
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        target: target,
+        rel: rel
+      }, renderProp);
+    }
+  }
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
-var wonder_blocks_icon_ = __webpack_require__(12);
-var wonder_blocks_icon_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_);
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_1__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-spacing"
-var wonder_blocks_spacing_ = __webpack_require__(7);
-var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_spacing_);
+}
+Button.defaultProps = {
+  color: "default",
+  kind: "primary",
+  light: false,
+  size: "medium",
+  disabled: false,
+  spinner: false
+};
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-button/src/components/button-core.js
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ButtonCore; });
+/* 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__(6);
+/* 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__(10);
+/* 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_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(11);
+/* harmony import */ var _khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(12);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_10__);
+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); }
 
-const _excluded = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "icon", "id", "waiting"];
 
 
 
@@ -269,13 +290,12 @@ const _excluded = ["children", "skipClientNav", "color", "disabled", "focused",
 
 
 
-const StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
-const StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
-const StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
-class button_core_ButtonCore extends external_react_["Component"] {
-  render() {
-    const _this$props = this.props,
-          {
+const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("a");
+const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("button");
+const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"]);
+class ButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  renderInner(router) {
+    const {
       children,
       skipClientNav,
       color,
@@ -292,14 +312,11 @@ class button_core_ButtonCore extends external_react_["Component"] {
       type = undefined,
       spinner,
       icon,
-      id
-    } = _this$props,
-          restProps = objectWithoutPropertiesLoose_default()(_this$props, _excluded);
-
-    const {
-      router
-    } = this.context;
-    const buttonColor = color === "destructive" ? wonder_blocks_color_["SemanticColor"].controlDestructive : wonder_blocks_color_["SemanticColor"].controlDefault;
+      id,
+      waiting: _,
+      ...restProps
+    } = this.props;
+    const buttonColor = color === "destructive" ? _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["SemanticColor"].controlDestructive : _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["SemanticColor"].controlDefault;
     const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
 
     const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
@@ -307,25 +324,24 @@ class button_core_ButtonCore extends external_react_["Component"] {
     const disabled = spinner || disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, // apply focus effect only to default and secondary buttons
     kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "xlarge" && sharedStyles.xlarge];
-
-    const commonProps = extends_default()({
+    const commonProps = {
       "data-test-id": testId,
       id: id,
       role: "button",
-      style: [defaultStyle, style]
-    }, restProps);
-
-    const Label = size === "small" ? wonder_blocks_typography_["LabelSmall"] : wonder_blocks_typography_["LabelLarge"];
-    const label = /*#__PURE__*/external_react_["createElement"](Label, {
+      style: [defaultStyle, style],
+      ...restProps
+    };
+    const Label = size === "small" ? _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"] : _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelLarge"];
+    const label = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Label, {
       style: [sharedStyles.text, size === "xlarge" && sharedStyles.xlargeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, // apply focus effect on the label instead
       kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)]
-    }, icon && /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
+    }, icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8___default.a, {
       size: size,
       color: "currentColor",
       icon: icon,
       style: sharedStyles.icon
     }), children);
-    const contents = /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, label, spinner && /*#__PURE__*/external_react_["createElement"](wonder_blocks_progress_spinner_["CircularSpinner"], {
+    const contents = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, label, spinner && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_7__["CircularSpinner"], {
       style: sharedStyles.spinner,
       size: {
         medium: "small",
@@ -336,13 +352,13 @@ class button_core_ButtonCore extends external_react_["Component"] {
     }));
 
     if (href && !disabled) {
-      return router && !skipClientNav && Object(wonder_blocks_clickable_["isClientSideUrl"])(href) ? /*#__PURE__*/external_react_["createElement"](StyledLink, extends_default()({}, commonProps, {
+      return router && !skipClientNav && Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_10__["isClientSideUrl"])(href) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLink, _extends({}, commonProps, {
         to: href
-      }), contents) : /*#__PURE__*/external_react_["createElement"](StyledAnchor, extends_default()({}, commonProps, {
+      }), contents) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledAnchor, _extends({}, commonProps, {
         href: href
       }), contents);
     } else {
-      return /*#__PURE__*/external_react_["createElement"](StyledButton, extends_default()({
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledButton, _extends({
         type: type || "button"
       }, commonProps, {
         disabled: disabled
@@ -350,11 +366,12 @@ class button_core_ButtonCore extends external_react_["Component"] {
     }
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderInner(router));
+  }
+
 }
-button_core_ButtonCore.contextTypes = {
-  router: external_prop_types_["any"]
-};
-const sharedStyles = external_aphrodite_["StyleSheet"].create({
+const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   shared: {
     position: "relative",
     display: "inline-flex",
@@ -423,7 +440,7 @@ const sharedStyles = external_aphrodite_["StyleSheet"].create({
     position: "absolute"
   },
   icon: {
-    paddingRight: wonder_blocks_spacing_default.a.xSmall_8
+    paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default.a.xSmall_8
   }
 });
 const styles = {};
@@ -442,10 +459,10 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
     offBlack32,
     offBlack50,
     darkBlue
-  } = wonder_blocks_color_default.a;
-  const fadedColor = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(color, 0.32), white);
-  const activeColor = Object(wonder_blocks_color_["mix"])(offBlack32, color);
-  const padding = size === "xlarge" ? wonder_blocks_spacing_default.a.xLarge_32 : wonder_blocks_spacing_default.a.medium_16;
+  } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a;
+  const fadedColor = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(color, 0.32), white);
+  const activeColor = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, color);
+  const padding = size === "xlarge" ? _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default.a.xLarge_32 : _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_9___default.a.medium_16;
   let newStyles = {};
 
   if (kind === "primary") {
@@ -552,115 +569,37 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
     throw new Error("Button 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-button/src/components/button.js
-
-
-const button_excluded = ["href", "type", "children", "skipClientNav", "spinner", "disabled", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel"],
-      _excluded2 = ["tabIndex"];
-
 
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
 
+module.exports = require("react-router-dom");
 
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
 
-/**
- * Reusable button component.
- *
- * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
- * `ButtonCore`. `ClickableBehavior` handles interactions and state changes.
- * `ButtonCore` is a stateless component which displays the different states
- * the `Button` can take.
- *
- * Example usage:
- * ```jsx
- * <Button
- *     onClick={(e) => console.log("Hello, world!")}
- * >
- *     Label
- * </Button>
- * ```
- */
-class button_Button extends external_react_["Component"] {
-  render() {
-    const _this$props = this.props,
-          {
-      href = undefined,
-      type = undefined,
-      children,
-      skipClientNav,
-      spinner,
-      disabled,
-      onClick,
-      beforeNav = undefined,
-      safeWithNav = undefined,
-      tabIndex,
-      target,
-      rel
-    } = _this$props,
-          sharedButtonCoreProps = objectWithoutPropertiesLoose_default()(_this$props, button_excluded);
+module.exports = require("@khanacademy/wonder-blocks-progress-spinner");
 
-    const ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])(href, skipClientNav, this.context.router);
+/***/ }),
+/* 12 */
+/***/ (function(module, exports) {
 
-    const renderProp = (state, _ref) => {
-      let {
-        tabIndex: clickableTabIndex
-      } = _ref,
-          restChildProps = objectWithoutPropertiesLoose_default()(_ref, _excluded2);
+module.exports = require("@khanacademy/wonder-blocks-icon");
 
-      return /*#__PURE__*/external_react_["createElement"](button_core_ButtonCore, extends_default()({}, sharedButtonCoreProps, state, restChildProps, {
-        disabled: disabled,
-        spinner: spinner || state.waiting,
-        skipClientNav: skipClientNav,
-        href: href,
-        target: target,
-        type: type // If tabIndex is provide to the component we allow
-        // it to override the tabIndex provide to use by
-        // ClickableBehavior.
-        ,
-        tabIndex: tabIndex || clickableTabIndex
-      }), children);
-    };
+/***/ }),
+/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-    if (beforeNav) {
-      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
-        disabled: spinner || disabled,
-        href: href,
-        role: "button",
-        type: type,
-        onClick: onClick,
-        beforeNav: beforeNav,
-        safeWithNav: safeWithNav,
-        rel: rel
-      }, renderProp);
-    } else {
-      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
-        disabled: spinner || disabled,
-        href: href,
-        role: "button",
-        type: type,
-        onClick: onClick,
-        safeWithNav: safeWithNav,
-        target: target,
-        rel: rel
-      }, renderProp);
-    }
-  }
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_button_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_button_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-}
-button_Button.contextTypes = {
-  router: external_prop_types_["any"]
-};
-button_Button.defaultProps = {
-  color: "default",
-  kind: "primary",
-  light: false,
-  size: "medium",
-  disabled: false,
-  spinner: false
-};
-// CONCATENATED MODULE: ./packages/wonder-blocks-button/src/index.js