@khanacademy/wonder-blocks-clickable 2.1.2

package/dist/index.js

@@ -0,0 +1,1056 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 7);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+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;
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-router-dom");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 4 */
+/***/ (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;
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+/* 7 */
+/***/ (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: ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
+var objectWithoutPropertiesLoose = __webpack_require__(4);
+var objectWithoutPropertiesLoose_default = /*#__PURE__*/__webpack_require__.n(objectWithoutPropertiesLoose);
+
+// 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: external "react"
+var external_react_ = __webpack_require__(0);
+
+// EXTERNAL MODULE: external "aphrodite"
+var external_aphrodite_ = __webpack_require__(5);
+
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(6);
+
+// EXTERNAL MODULE: external "react-router-dom"
+var external_react_router_dom_ = __webpack_require__(2);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
+var wonder_blocks_core_ = __webpack_require__(3);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-color/dist/es/index.js
+
+/**
+ * A color manipulation library useful for dynamically
+ * mixing colors together.
+ */
+
+const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
+const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
+const rgbaRegexp = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i; // Parse a color in #abcdef, rgb(...), or rgba(...) form into an object
+// with r,g,b,a keys.
+
+const parse = color => {
+  if (typeof color !== "string") {
+    throw new Error(`Failed to parse color: ${color}`);
+  }
+
+  const color3Match = color.match(color3Regexp);
+
+  if (color3Match) {
+    return {
+      r: parseInt(`${color3Match[1]}${color3Match[1]}`, 16),
+      g: parseInt(`${color3Match[2]}${color3Match[2]}`, 16),
+      b: parseInt(`${color3Match[3]}${color3Match[3]}`, 16),
+      a: 1
+    };
+  }
+
+  const color6Match = color.match(color6Regexp);
+
+  if (color6Match) {
+    return {
+      r: parseInt(color6Match[1], 16),
+      g: parseInt(color6Match[2], 16),
+      b: parseInt(color6Match[3], 16),
+      a: 1
+    };
+  }
+
+  const rgbaMatch = color.match(rgbaRegexp);
+
+  if (rgbaMatch) {
+    return {
+      r: parseFloat(rgbaMatch[1]),
+      g: parseFloat(rgbaMatch[2]),
+      b: parseFloat(rgbaMatch[3]),
+      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
+    };
+  }
+
+  throw new Error(`Failed to parse color: ${color}`);
+}; // Stringify the color in an `rgba()` or `#abcdef` format.
+
+
+const format = color => {
+  const r = Math.round(color.r);
+  const g = Math.round(color.g);
+  const b = Math.round(color.b);
+
+  if (color.a === 1) {
+    const _s = c => {
+      const asString = c.toString(16);
+      return asString.length === 1 ? asString + asString : asString;
+    };
+
+    return `#${_s(r)}${_s(g)}${_s(b)}`;
+  } else {
+    return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
+  }
+}; // Adjust the alpha value of a color.
+
+
+const fade = (color, percentage) => {
+  if (percentage < 0 || percentage > 1) {
+    throw new Error("Percentage must be between 0 and 1");
+  }
+
+  const components = parse(color);
+  return format(extends_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 */ var es = (Color);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/components/clickable-behavior.js
+ // NOTE: Potentially add to this as more cases come up.
+
+const getAppropriateTriggersForRole = role => {
+  switch (role) {
+    // Triggers on ENTER, but not SPACE
+    case "link":
+      return {
+        triggerOnEnter: true,
+        triggerOnSpace: false
+      };
+    // Triggers on SPACE, but not ENTER
+
+    case "checkbox":
+    case "radio":
+    case "listbox":
+    case "option":
+      return {
+        triggerOnEnter: false,
+        triggerOnSpace: true
+      };
+    // Triggers on both ENTER and SPACE
+
+    case "button":
+    case "menuitem":
+    case "menu":
+    default:
+      return {
+        triggerOnEnter: true,
+        triggerOnSpace: true
+      };
+  }
+};
+
+const disabledHandlers = {
+  onClick: () => void 0,
+  onMouseEnter: () => void 0,
+  onMouseLeave: () => void 0,
+  onMouseDown: () => void 0,
+  onMouseUp: () => void 0,
+  onDragStart: () => void 0,
+  onTouchStart: () => void 0,
+  onTouchEnd: () => void 0,
+  onTouchCancel: () => void 0,
+  onKeyDown: () => void 0,
+  onKeyUp: () => void 0,
+  onFocus: () => void 0,
+  onBlur: () => void 0,
+  tabIndex: -1
+};
+const keyCodes = {
+  enter: 13,
+  space: 32
+};
+const startState = {
+  hovered: false,
+  focused: false,
+  pressed: false,
+  waiting: false
+};
+/**
+ * Add hover, focus, and active status updates to a clickable component.
+ *
+ * Via mouse:
+ *
+ * 1. Hover over button -> hover state
+ * 2. Mouse down -> active state
+ * 3. Mouse up -> default state
+ * 4. Press tab -> focus state
+ *
+ * Via touch:
+ *
+ * 1. Touch down -> press state
+ * 2. Touch up -> default state
+ *
+ * Via keyboard:
+ *
+ * 1. Tab to focus -> focus state
+ * 2. Keydown (spacebar/enter) -> active state
+ * 3. Keyup (spacebar/enter) -> focus state
+ *
+ * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
+ * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
+ * onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the component
+ * that has the ClickableBehavior. You cannot override these handlers without
+ * potentially breaking the functionality of ClickableBehavior.
+ *
+ * There are internal props triggerOnEnter and triggerOnSpace that can be set
+ * to false if one of those keys shouldn't count as a click on this component.
+ * Be careful about setting those to false -- make certain that the component
+ * shouldn't process that key.
+ *
+ * See [this document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
+ * for a more thorough explanation of expected behaviors and potential cavaets.
+ *
+ * `ClickableBehavior` accepts a function as `children` which is passed state
+ * and an object containing event handlers and some other props. The `children`
+ * function should return a clickable React Element of some sort.
+ *
+ * Example:
+ *
+ * ```js
+ * class MyClickableComponent extends React.Component<Props> {
+ *     render(): React.Node {
+ *         const ClickableBehavior = getClickableBehavior();
+ *         return <ClickableBehavior
+ *             disabled={this.props.disabled}
+ *             onClick={this.props.onClick}
+ *         >
+ *             {({hovered}, childrenProps) =>
+ *                 <RoundRect
+ *                      textcolor='white'
+ *                      backgroundColor={hovered ? 'red' : 'blue'}}
+ *                      {...childrenProps}
+ *                 >
+ *                      {this.props.children}
+ *                 </RoundRect>
+ *             }
+ *         </ClickableBehavior>
+ *     }
+ * }
+ * ```
+ *
+ * This follows a pattern called [Function as Child Components]
+ * (https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
+ *
+ * WARNING: Do not use this component directly, use getClickableBehavior
+ * instead. getClickableBehavior takes three arguments (href, directtNav, and
+ * router) and returns either the default ClickableBehavior or a react-router
+ * aware version.
+ *
+ * The react-router aware version is returned if `router` is a react-router-dom
+ * router, `skipClientNav` is not `true`, and `href` is an internal URL.
+ *
+ * The `router` can be accessed via this.context.router from a component
+ * rendered as a descendant of a BrowserRouter.
+ * See https://reacttraining.com/react-router/web/guides/basic-components.
+ */
+
+class clickable_behavior_ClickableBehavior extends external_react_["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;
+    }
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.handleClick = e => {
+      const {
+        onClick = undefined,
+        beforeNav = undefined,
+        safeWithNav = undefined
+      } = this.props;
+
+      if (this.enterClick) {
+        return;
+      }
+
+      if (onClick || beforeNav || safeWithNav) {
+        this.waitingForClick = false;
+      }
+
+      this.runCallbackAndMaybeNavigate(e);
+    };
+
+    this.handleMouseEnter = e => {
+      // When the left button is pressed already, we want it to be pressed
+      if (e.buttons === 1) {
+        this.dragging = true;
+        this.setState({
+          pressed: true
+        });
+      } else if (!this.waitingForClick) {
+        this.setState({
+          hovered: true
+        });
+      }
+    };
+
+    this.handleMouseLeave = () => {
+      if (!this.waitingForClick) {
+        this.dragging = false;
+        this.setState({
+          hovered: false,
+          pressed: false,
+          focused: false
+        });
+      }
+    };
+
+    this.handleMouseDown = () => {
+      this.setState({
+        pressed: true
+      });
+    };
+
+    this.handleMouseUp = e => {
+      if (this.dragging) {
+        this.dragging = false;
+        this.handleClick(e);
+      }
+
+      this.setState({
+        pressed: false,
+        focused: false
+      });
+    };
+
+    this.handleDragStart = e => {
+      this.dragging = true;
+      e.preventDefault();
+    };
+
+    this.handleTouchStart = () => {
+      this.setState({
+        pressed: true
+      });
+    };
+
+    this.handleTouchEnd = () => {
+      this.setState({
+        pressed: false
+      });
+      this.waitingForClick = true;
+    };
+
+    this.handleTouchCancel = () => {
+      this.setState({
+        pressed: false
+      });
+      this.waitingForClick = true;
+    };
+
+    this.handleKeyDown = e => {
+      const {
+        onKeyDown,
+        role
+      } = this.props;
+
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
+
+      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+        // This prevents space from scrolling down. It also prevents the
+        // space and enter keys from triggering click events. We manually
+        // call the supplied onClick and handle potential navigation in
+        // handleKeyUp instead.
+        e.preventDefault();
+        this.setState({
+          pressed: true
+        });
+      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        // If the component isn't supposed to trigger on enter, we have to
+        // keep track of the enter keydown to negate the onClick callback
+        this.enterClick = true;
+      }
+    };
+
+    this.handleKeyUp = e => {
+      const {
+        onKeyUp,
+        role
+      } = this.props;
+
+      if (onKeyUp) {
+        onKeyUp(e);
+      }
+
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
+
+      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+        this.setState({
+          pressed: false,
+          focused: true
+        });
+        this.runCallbackAndMaybeNavigate(e);
+      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        this.enterClick = false;
+      }
+    };
+
+    this.handleFocus = e => {
+      this.setState({
+        focused: true
+      });
+    };
+
+    this.handleBlur = e => {
+      this.setState({
+        focused: false,
+        pressed: false
+      });
+    };
+
+    this.state = startState;
+    this.waitingForClick = false;
+    this.enterClick = false;
+    this.dragging = false;
+  }
+
+  navigateOrReset(shouldNavigate) {
+    if (shouldNavigate) {
+      const {
+        history,
+        href,
+        skipClientNav,
+        target = undefined
+      } = this.props;
+
+      if (href) {
+        if (target === "_blank") {
+          window.open(href, "_blank");
+          this.setState({
+            waiting: false
+          });
+        } else if (history && !skipClientNav) {
+          history.push(href);
+          this.setState({
+            waiting: false
+          });
+        } else {
+          window.location.assign(href); // We don't bother clearing the waiting state, the full page
+          // load navigation will do that for us by loading a new page.
+        }
+      }
+    } else {
+      this.setState({
+        waiting: false
+      });
+    }
+  }
+
+  handleSafeWithNav(safeWithNav, shouldNavigate) {
+    const {
+      skipClientNav,
+      history
+    } = this.props;
+
+    if (history && !skipClientNav || this.props.target === "_blank") {
+      // client-side nav
+      safeWithNav();
+      this.navigateOrReset(shouldNavigate);
+      return Promise.resolve();
+    } else {
+      if (!this.state.waiting) {
+        // We only show the spinner for safeWithNav when doing
+        // a full page load navigation since since the spinner is
+        // indicating that we're waiting for navigation to occur.
+        this.setState({
+          waiting: true
+        });
+      }
+
+      return safeWithNav().then(() => {
+        if (!this.state.waiting) {
+          // We only show the spinner for safeWithNav when doing
+          // a full page load navigation since since the spinner is
+          // indicating that we're waiting for navigation to occur.
+          this.setState({
+            waiting: true
+          });
+        }
+
+        return;
+      }).catch(error => {// We ignore the error here so that we always
+        // navigate when using safeWithNav regardless of
+        // whether we're doing a client-side nav or not.
+      }).finally(() => {
+        this.navigateOrReset(shouldNavigate);
+      });
+    }
+  }
+
+  runCallbackAndMaybeNavigate(e) {
+    const {
+      onClick = undefined,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      href,
+      type
+    } = this.props;
+    let shouldNavigate = true;
+    let canSubmit = true;
+
+    if (onClick) {
+      onClick(e);
+    } // If onClick() has called e.preventDefault() then we shouldn't
+    // navigate.
+
+
+    if (e.defaultPrevented) {
+      shouldNavigate = false;
+      canSubmit = false;
+    }
+
+    e.preventDefault();
+
+    if (!href && type === "submit" && canSubmit) {
+      let target = e.currentTarget;
+
+      while (target) {
+        if (target instanceof window.HTMLFormElement) {
+          // This event must be marked as cancelable otherwise calling
+          // e.preventDefault() on it won't do anything in Firefox.
+          // Chrome and Safari allow calling e.preventDefault() on
+          // non-cancelable events, but really they shouldn't.
+          const event = new window.Event("submit", {
+            cancelable: true
+          });
+          target.dispatchEvent(event);
+          break;
+        } // All events should be typed as SyntheticEvent<HTMLElement>.
+        // Updating all of the places will take some time so I'll do
+        // this later
+        // $FlowFixMe[prop-missing]
+
+
+        target = target.parentElement;
+      }
+    }
+
+    if (beforeNav) {
+      this.setState({
+        waiting: true
+      });
+      beforeNav().then(() => {
+        if (safeWithNav) {
+          return this.handleSafeWithNav(safeWithNav, shouldNavigate);
+        } else {
+          return this.navigateOrReset(shouldNavigate);
+        }
+      }).catch(() => {});
+    } else if (safeWithNav) {
+      return this.handleSafeWithNav(safeWithNav, shouldNavigate);
+    } else {
+      this.navigateOrReset(shouldNavigate);
+    }
+  }
+
+  render() {
+    const childrenProps = this.props.disabled ? disabledHandlers : {
+      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_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
+ */
+const isClientSideUrl = href => {
+  if (typeof href !== "string") {
+    return false;
+  }
+
+  return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/util/get-clickable-behavior.js
+/**
+ * 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.
+ * See https://reacttraining.com/react-router/web/guides/basic-components.
+ */
+
+
+
+
+const ClickableBehaviorWithRouter = Object(external_react_router_dom_["withRouter"])(clickable_behavior_ClickableBehavior);
+function getClickableBehavior(
+/**
+ * The URL to navigate to.
+ */
+href,
+/**
+ * Should we skip using the react router and go to the page directly.
+ */
+skipClientNav,
+/**
+ * router object added to the React context object by react-router-dom.
+ */
+router) {
+  if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
+    // We cast to `any` here since the type of ClickableBehaviorWithRouter
+    // is slightly different from the return type of this function.
+    // TODO(WB-1037): Always return the wrapped version once all routes have
+    // been ported to the app-shell in webapp.
+    return ClickableBehaviorWithRouter;
+  }
+
+  return clickable_behavior_ClickableBehavior;
+}
+// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/components/clickable.js
+
+
+const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"];
+
+
+
+
+
+
+
+
+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"]);
+/**
+ * A component to turn any custom component into a clickable one.
+ *
+ * Works by wrapping ClickableBehavior around the child element and styling the
+ * child appropriately and encapsulates routing logic which can be customized.
+ * Expects a function which returns an element as it's child.
+ *
+ * Example usage:
+ * ```jsx
+ * <Clickable onClick={() => alert("You clicked me!")}>
+ *     {({hovered, focused, pressed}) =>
+ *         <div
+ *             style={[
+ *                 hovered && styles.hovered,
+ *                 focused && styles.focused,
+ *                 pressed && styles.pressed,
+ *             ]}
+ *         >
+ *             Click Me!
+ *         </div>
+ *     }
+ * </Clickable>
+ * ```
+ */
+
+class clickable_Clickable extends external_react_["Component"] {
+  constructor(...args) {
+    super(...args);
+
+    this.getCorrectTag = (clickableState, commonProps) => {
+      const activeHref = this.props.href && !this.props.disabled;
+      const useClient = this.context.router && !this.props.skipClientNav && isClientSideUrl(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_default()({}, commonProps, {
+          to: this.props.href,
+          role: this.props.role,
+          target: this.props.target || undefined,
+          "aria-disabled": this.props.disabled ? "true" : undefined
+        }), this.props.children(clickableState));
+      } else if (activeHref && !useClient) {
+        return /*#__PURE__*/external_react_["createElement"](StyledAnchor, extends_default()({}, commonProps, {
+          href: this.props.href,
+          role: this.props.role,
+          target: this.props.target || undefined,
+          "aria-disabled": this.props.disabled ? "true" : undefined
+        }), this.props.children(clickableState));
+      } else {
+        return /*#__PURE__*/external_react_["createElement"](StyledButton, extends_default()({}, commonProps, {
+          type: "button",
+          disabled: this.props.disabled
+        }), this.props.children(clickableState));
+      }
+    };
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      href,
+      onClick,
+      skipClientNav,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      style,
+      target = undefined,
+      testId,
+      onKeyDown,
+      onKeyUp,
+      hideDefaultFocusRing,
+      light,
+      disabled
+    } = _this$props,
+          restProps = objectWithoutPropertiesLoose_default()(_this$props, _excluded);
+
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
+
+    const getStyle = state => [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
+      }, (state, childrenProps) => this.getCorrectTag(state, extends_default()({}, 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
+      }, (state, childrenProps) => this.getCorrectTag(state, extends_default()({}, restProps, {
+        "data-test-id": testId,
+        style: getStyle(state)
+      }, childrenProps)));
+    }
+  }
+
+} // Source:  https://gist.github.com/MoOx/9137295
+
+clickable_Clickable.contextTypes = {
+  router: external_prop_types_["any"]
+};
+clickable_Clickable.defaultProps = {
+  light: false,
+  disabled: false,
+  "aria-label": ""
+};
+const styles = external_aphrodite_["StyleSheet"].create({
+  reset: {
+    border: "none",
+    margin: 0,
+    padding: 0,
+    width: "auto",
+    overflow: "visible",
+    background: "transparent",
+    textDecoration: "none",
+
+    /* inherit font & color from ancestor */
+    color: "inherit",
+    font: "inherit",
+    boxSizing: "border-box",
+    // This removes the 300ms click delay on mobile browsers by indicating that
+    // "double-tap to zoom" shouldn't be used on this element.
+    touchAction: "manipulation",
+    userSelect: "none",
+    // This is usual frowned upon b/c of accessibility.  We expect users of Clickable
+    // to define their own focus styles.
+    outline: "none",
+
+    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+    lineHeight: "normal",
+
+    /* Corrects font smoothing for webkit */
+    WebkitFontSmoothing: "inherit",
+    MozOsxFontSmoothing: "inherit"
+  },
+  link: {
+    cursor: "pointer"
+  },
+  focused: {
+    outline: `solid 2px ${es.blue}`
+  },
+  focusedLight: {
+    outline: `solid 2px ${es.white}`
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/src/index.js
+
+
+
+
+
+
+/***/ })
+/******/ ]);