@khanacademy/wonder-blocks-dropdown 2.3.19

package/dist/index.js

@@ -0,0 +1,3966 @@
+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 = 18);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-color");
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-spacing");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-icon");
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-typography");
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-dom");
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-clickable");
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-timing");
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-window");
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-router-dom");
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-popper");
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-modal");
+
+/***/ }),
+/* 15 */
+/***/ (function(module, exports) {
+
+module.exports = require("popper.js");
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-icon-button");
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-layout");
+
+/***/ }),
+/* 18 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "ActionItem", function() { return /* reexport */ action_item_ActionItem; });
+__webpack_require__.d(__webpack_exports__, "OptionItem", function() { return /* reexport */ option_item_OptionItem; });
+__webpack_require__.d(__webpack_exports__, "SeparatorItem", function() { return /* reexport */ separator_item_SeparatorItem; });
+__webpack_require__.d(__webpack_exports__, "ActionMenu", function() { return /* reexport */ action_menu_ActionMenu; });
+__webpack_require__.d(__webpack_exports__, "SingleSelect", function() { return /* reexport */ single_select_SingleSelect; });
+__webpack_require__.d(__webpack_exports__, "MultiSelect", function() { return /* reexport */ multi_select_MultiSelect; });
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(0);
+
+// EXTERNAL MODULE: external "aphrodite"
+var external_aphrodite_ = __webpack_require__(3);
+
+// EXTERNAL MODULE: external "react-router-dom"
+var external_react_router_dom_ = __webpack_require__(12);
+
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(9);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
+var wonder_blocks_color_ = __webpack_require__(1);
+var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-spacing"
+var wonder_blocks_spacing_ = __webpack_require__(2);
+var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_spacing_);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
+var wonder_blocks_typography_ = __webpack_require__(6);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-clickable"
+var wonder_blocks_clickable_ = __webpack_require__(8);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
+var wonder_blocks_core_ = __webpack_require__(4);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/util/constants.js
+
+var keyCodes = {
+  tab: 9,
+  enter: 13,
+  escape: 27,
+  space: 32,
+  up: 38,
+  down: 40
+};
+var selectDropdownStyle = {
+  marginTop: wonder_blocks_spacing_default.a.xSmall_8,
+  marginBottom: wonder_blocks_spacing_default.a.xSmall_8
+}; // Filterable dropdown has minimum dimensions requested from Design.
+// Note that these can be overridden by the provided style if needed.
+
+var filterableDropdownStyle = {
+  minHeight: 100,
+  maxHeight: 384
+};
+var searchInputStyle = {
+  margin: wonder_blocks_spacing_default.a.xSmall_8,
+  marginTop: wonder_blocks_spacing_default.a.xxxSmall_4
+}; // The default item height
+
+var DROPDOWN_ITEM_HEIGHT = 40;
+var SEPARATOR_ITEM_HEIGHT = 9;
+var SEARCH_ITEM_HEIGHT = DROPDOWN_ITEM_HEIGHT + searchInputStyle.margin + searchInputStyle.marginTop; // The default labels that will be used by different components
+
+var defaultLabels = {
+  clearSearch: "Clear search",
+  filter: "Filter",
+  noResults: "No results",
+  selectNoneLabel: "Select none",
+  selectAllLabel: function selectAllLabel(numOptions) {
+    return "Select all (".concat(numOptions, ")");
+  },
+  noneSelected: "0 items",
+  someSelected: function someSelected(numSelectedValues) {
+    return "".concat(numSelectedValues, " items");
+  },
+  allSelected: "All items"
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/action-item.js
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _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; }
+
+
+
+
+
+
+
+
+
+
+
+var blue = wonder_blocks_color_default.a.blue,
+    white = wonder_blocks_color_default.a.white,
+    offBlack = wonder_blocks_color_default.a.offBlack,
+    action_item_offBlack32 = wonder_blocks_color_default.a.offBlack32;
+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"]);
+/**
+ * The action item trigger actions, such as navigating to a different page or
+ * opening a modal. Supply the href and/or onClick props. Used as a child of
+ * ActionMenu.
+ */
+
+var action_item_ActionItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(ActionItem, _React$Component);
+
+  var _super = _createSuper(ActionItem);
+
+  function ActionItem() {
+    _classCallCheck(this, ActionItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ActionItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          skipClientNav = _this$props.skipClientNav,
+          disabled = _this$props.disabled,
+          href = _this$props.href,
+          target = _this$props.target,
+          indent = _this$props.indent,
+          label = _this$props.label,
+          onClick = _this$props.onClick,
+          role = _this$props.role,
+          style = _this$props.style,
+          testId = _this$props.testId;
+      var router = this.context.router;
+      var ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])(href, skipClientNav, router);
+      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+        disabled: disabled,
+        onClick: onClick,
+        href: href,
+        role: role,
+        target: target
+      }, function (state, childrenProps) {
+        var pressed = state.pressed,
+            hovered = state.hovered,
+            focused = state.focused;
+        var defaultStyle = [styles.shared, disabled && styles.disabled, !disabled && (pressed ? styles.active : (hovered || focused) && styles.focus), // pass optional styles from react-window (if applies)
+        style];
+
+        var props = _objectSpread({
+          "data-test-id": testId,
+          disabled: disabled,
+          role: role,
+          style: [defaultStyle]
+        }, childrenProps);
+
+        var children = /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], {
+          style: [indent && styles.indent, styles.label]
+        }, label));
+
+        if (href && !disabled) {
+          return router && !skipClientNav && Object(wonder_blocks_clickable_["isClientSideUrl"])(href) ? /*#__PURE__*/external_react_["createElement"](StyledLink, _extends({}, props, {
+            to: href
+          }), children) : /*#__PURE__*/external_react_["createElement"](StyledAnchor, _extends({}, props, {
+            href: href,
+            target: target
+          }), children);
+        } else {
+          return /*#__PURE__*/external_react_["createElement"](StyledButton, _extends({
+            type: "button"
+          }, props, {
+            disabled: disabled
+          }), children);
+        }
+      });
+    }
+  }], [{
+    key: "isClassOf",
+    value: function isClassOf(instance) {
+      return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
+    }
+  }]);
+
+  return ActionItem;
+}(external_react_["Component"]);
+
+_defineProperty(action_item_ActionItem, "contextTypes", {
+  router: external_prop_types_["any"]
+});
+
+_defineProperty(action_item_ActionItem, "defaultProps", {
+  disabled: false,
+  indent: false,
+  role: "menuitem"
+});
+
+_defineProperty(action_item_ActionItem, "__IS_ACTION_ITEM__", true);
+
+
+var styles = external_aphrodite_["StyleSheet"].create({
+  shared: {
+    background: white,
+    color: offBlack,
+    textDecoration: "none",
+    border: "none",
+    outline: "none",
+    flexDirection: "row",
+    alignItems: "center",
+    display: "flex",
+    height: DROPDOWN_ITEM_HEIGHT,
+    minHeight: DROPDOWN_ITEM_HEIGHT,
+    paddingLeft: wonder_blocks_spacing_default.a.medium_16,
+    paddingRight: wonder_blocks_spacing_default.a.medium_16,
+    // 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"
+  },
+  label: {
+    whiteSpace: "nowrap",
+    userSelect: "none"
+  },
+  indent: {
+    marginLeft: wonder_blocks_spacing_default.a.medium_16
+  },
+  // hover and focus states
+  focus: {
+    color: white,
+    background: blue
+  },
+  // active and pressed states
+  active: {
+    color: Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(blue, 0.32), white),
+    background: Object(wonder_blocks_color_["mix"])(action_item_offBlack32, blue)
+  },
+  // disabled state
+  disabled: {
+    color: action_item_offBlack32,
+    cursor: "default"
+  }
+});
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
+var wonder_blocks_icon_ = __webpack_require__(5);
+var wonder_blocks_icon_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/check.js
+
+
+
+
+var check_offBlack = wonder_blocks_color_default.a.offBlack,
+    check_offBlack32 = wonder_blocks_color_default.a.offBlack32,
+    check_white = wonder_blocks_color_default.a.white;
+/**
+ * Props describing the state of the OptionItem, shared by the checkbox
+ * component,
+ */
+
+/**
+ * The check component used by OptionItem.
+ */
+function Check(props) {
+  var disabled = props.disabled,
+      selected = props.selected,
+      pressed = props.pressed,
+      hovered = props.hovered,
+      focused = props.focused;
+  return /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
+    icon: wonder_blocks_icon_["icons"].check,
+    size: "small",
+    color: disabled ? check_offBlack32 : pressed || hovered || focused ? check_white : check_offBlack,
+    style: [check_styles.bounds, !selected && check_styles.hide]
+  });
+}
+var check_styles = external_aphrodite_["StyleSheet"].create({
+  bounds: {
+    // Semantically, this are the constants for a small-sized icon
+    minHeight: 16,
+    minWidth: 16
+  },
+  hide: {
+    visibility: "hidden"
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/checkbox.js
+
+
+
+
+
+// NOTE(sophie): This is a smaller check specifically for use in checkboxes.
+// Please don't copy it automatically and check with designers before using.
+// If the intended icon is a check without a checkbox, you should be using
+// icons.check from the Wonder Blocks Icon package.
+var checkboxCheck = {
+  small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
+};
+var checkbox_blue = wonder_blocks_color_default.a.blue,
+    checkbox_white = wonder_blocks_color_default.a.white,
+    offBlack16 = wonder_blocks_color_default.a.offBlack16,
+    checkbox_offBlack32 = wonder_blocks_color_default.a.offBlack32,
+    offBlack50 = wonder_blocks_color_default.a.offBlack50,
+    offWhite = wonder_blocks_color_default.a.offWhite;
+/**
+ * Props describing the state of the OptionItem, shared by the check
+ * component,
+ */
+
+/**
+ * The checkbox component used by OptionItem.
+ */
+function Checkbox(props) {
+  var disabled = props.disabled,
+      selected = props.selected,
+      pressed = props.pressed,
+      hovered = props.hovered,
+      focused = props.focused;
+  var activeBlue = Object(wonder_blocks_color_["mix"])(checkbox_offBlack32, checkbox_blue);
+  var clickInteraction = pressed || hovered || focused;
+  var bgColor = disabled ? offWhite : selected && !clickInteraction ? checkbox_blue : checkbox_white;
+  var checkColor = disabled ? checkbox_offBlack32 : clickInteraction ? pressed ? activeBlue : checkbox_blue : checkbox_white;
+  return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+    style: [checkbox_styles.checkbox, (clickInteraction || selected && !disabled) && checkbox_styles.noBorder, disabled && checkbox_styles.disabledCheckbox, {
+      backgroundColor: bgColor
+    }]
+  }, selected && /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
+    icon: checkboxCheck,
+    size: "small",
+    color: checkColor,
+    style: [disabled && selected && checkbox_styles.disabledCheckFormatting]
+  }));
+}
+var checkbox_styles = external_aphrodite_["StyleSheet"].create({
+  checkbox: {
+    // Semantically, this are the constants for a small-sized icon
+    minHeight: 16,
+    minWidth: 16,
+    borderRadius: 3,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: offBlack50
+  },
+  noBorder: {
+    borderWidth: 0
+  },
+  disabledCheckbox: {
+    borderColor: offBlack16,
+    backgroundColor: offWhite
+  },
+  // The border of 1px on the selected, disabled checkbox pushes the check out
+  // of place. Move it back.
+  disabledCheckFormatting: {
+    position: "absolute",
+    top: -1,
+    left: -1
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/option-item.js
+function option_item_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { option_item_typeof = function _typeof(obj) { return typeof obj; }; } else { option_item_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return option_item_typeof(obj); }
+
+function option_item_extends() { option_item_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 option_item_extends.apply(this, arguments); }
+
+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 option_item_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function option_item_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 option_item_createClass(Constructor, protoProps, staticProps) { if (protoProps) option_item_defineProperties(Constructor.prototype, protoProps); if (staticProps) option_item_defineProperties(Constructor, staticProps); return Constructor; }
+
+function option_item_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) option_item_setPrototypeOf(subClass, superClass); }
+
+function option_item_setPrototypeOf(o, p) { option_item_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return option_item_setPrototypeOf(o, p); }
+
+function option_item_createSuper(Derived) { var hasNativeReflectConstruct = option_item_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = option_item_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = option_item_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return option_item_possibleConstructorReturn(this, result); }; }
+
+function option_item_possibleConstructorReturn(self, call) { if (call && (option_item_typeof(call) === "object" || typeof call === "function")) { return call; } return option_item_assertThisInitialized(self); }
+
+function option_item_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function option_item_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 option_item_getPrototypeOf(o) { option_item_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return option_item_getPrototypeOf(o); }
+
+function option_item_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; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * For option items that can be selected in a dropdown, selection denoted either
+ * with a check ✔️ or a checkbox ☑️. Use as children in SingleSelect or
+ * MultiSelect.
+ */
+var option_item_OptionItem = /*#__PURE__*/function (_React$Component) {
+  option_item_inherits(OptionItem, _React$Component);
+
+  var _super = option_item_createSuper(OptionItem);
+
+  function OptionItem() {
+    var _this;
+
+    option_item_classCallCheck(this, OptionItem);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    option_item_defineProperty(option_item_assertThisInitialized(_this), "handleClick", function () {
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          onToggle = _this$props.onToggle,
+          value = _this$props.value;
+      onToggle(value);
+
+      if (onClick) {
+        onClick();
+      }
+    });
+
+    return _this;
+  }
+
+  option_item_createClass(OptionItem, [{
+    key: "getCheckComponent",
+    value: function getCheckComponent() {
+      if (this.props.variant === "check") {
+        return Check;
+      } else {
+        return Checkbox;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          disabled = _this$props2.disabled,
+          label = _this$props2.label,
+          role = _this$props2.role,
+          selected = _this$props2.selected,
+          testId = _this$props2.testId,
+          style = _this$props2.style,
+          value = _this$props2.value,
+          onClick = _this$props2.onClick,
+          onToggle = _this$props2.onToggle,
+          variant = _this$props2.variant,
+          sharedProps = _objectWithoutProperties(_this$props2, ["disabled", "label", "role", "selected", "testId", "style", "value", "onClick", "onToggle", "variant"]);
+
+      var ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])();
+      var CheckComponent = this.getCheckComponent();
+      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+        disabled: disabled,
+        onClick: this.handleClick,
+        role: role
+      }, function (state, childrenProps) {
+        var pressed = state.pressed,
+            hovered = state.hovered,
+            focused = state.focused;
+        var defaultStyle = [option_item_styles.itemContainer, pressed ? option_item_styles.active : (hovered || focused) && option_item_styles.focus, disabled && option_item_styles.disabled, // pass optional styles from react-window (if applies)
+        style];
+        return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], option_item_extends({}, sharedProps, {
+          testId: testId,
+          style: defaultStyle,
+          "aria-selected": selected ? "true" : "false",
+          role: role
+        }, childrenProps), /*#__PURE__*/external_react_["createElement"](CheckComponent, {
+          disabled: disabled,
+          selected: selected,
+          pressed: pressed,
+          hovered: hovered,
+          focused: focused
+        }), /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], {
+          style: option_item_styles.label
+        }, label));
+      });
+    }
+  }], [{
+    key: "isClassOf",
+    value: function isClassOf(instance) {
+      return instance && instance.type && instance.type.__IS_OPTION_ITEM__;
+    }
+  }]);
+
+  return OptionItem;
+}(external_react_["Component"]);
+
+option_item_defineProperty(option_item_OptionItem, "contextTypes", {
+  router: external_prop_types_["any"]
+});
+
+option_item_defineProperty(option_item_OptionItem, "defaultProps", {
+  disabled: false,
+  onToggle: function onToggle() {
+    return void 0;
+  },
+  role: "option",
+  selected: false
+});
+
+option_item_defineProperty(option_item_OptionItem, "__IS_OPTION_ITEM__", true);
+
+
+var option_item_blue = wonder_blocks_color_default.a.blue,
+    option_item_white = wonder_blocks_color_default.a.white,
+    option_item_offBlack = wonder_blocks_color_default.a.offBlack,
+    option_item_offBlack32 = wonder_blocks_color_default.a.offBlack32;
+var option_item_styles = external_aphrodite_["StyleSheet"].create({
+  itemContainer: {
+    flexDirection: "row",
+    backgroundColor: option_item_white,
+    color: option_item_offBlack,
+    alignItems: "center",
+    height: DROPDOWN_ITEM_HEIGHT,
+    minHeight: DROPDOWN_ITEM_HEIGHT,
+    border: 0,
+    outline: 0,
+    paddingLeft: wonder_blocks_spacing_default.a.xSmall_8,
+    paddingRight: wonder_blocks_spacing_default.a.medium_16,
+    whiteSpace: "nowrap",
+    cursor: "default"
+  },
+  focus: {
+    color: option_item_white,
+    background: option_item_blue
+  },
+  active: {
+    color: Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(option_item_blue, 0.32), option_item_white),
+    background: Object(wonder_blocks_color_["mix"])(option_item_offBlack32, option_item_blue)
+  },
+  disabled: {
+    color: option_item_offBlack32,
+    background: option_item_white
+  },
+  label: {
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    marginLeft: wonder_blocks_spacing_default.a.xSmall_8,
+    // added to truncate strings that are longer than expected
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  hide: {
+    visibility: "hidden"
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/separator-item.js
+function separator_item_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { separator_item_typeof = function _typeof(obj) { return typeof obj; }; } else { separator_item_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return separator_item_typeof(obj); }
+
+function separator_item_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function separator_item_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 separator_item_createClass(Constructor, protoProps, staticProps) { if (protoProps) separator_item_defineProperties(Constructor.prototype, protoProps); if (staticProps) separator_item_defineProperties(Constructor, staticProps); return Constructor; }
+
+function separator_item_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) separator_item_setPrototypeOf(subClass, superClass); }
+
+function separator_item_setPrototypeOf(o, p) { separator_item_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return separator_item_setPrototypeOf(o, p); }
+
+function separator_item_createSuper(Derived) { var hasNativeReflectConstruct = separator_item_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = separator_item_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = separator_item_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return separator_item_possibleConstructorReturn(this, result); }; }
+
+function separator_item_possibleConstructorReturn(self, call) { if (call && (separator_item_typeof(call) === "object" || typeof call === "function")) { return call; } return separator_item_assertThisInitialized(self); }
+
+function separator_item_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function separator_item_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 separator_item_getPrototypeOf(o) { separator_item_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return separator_item_getPrototypeOf(o); }
+
+function separator_item_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; }
+
+// Separator item in a dropdown, used to denote a semantic break.
+// Actualized as a horizontal line with surrounding whitespace. -----
+
+
+
+
+
+
+/**
+ * A separator used in a dropdown menu.
+ */
+var separator_item_SeparatorItem = /*#__PURE__*/function (_React$Component) {
+  separator_item_inherits(SeparatorItem, _React$Component);
+
+  var _super = separator_item_createSuper(SeparatorItem);
+
+  function SeparatorItem() {
+    separator_item_classCallCheck(this, SeparatorItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  separator_item_createClass(SeparatorItem, [{
+    key: "render",
+    value: function render() {
+      return (
+        /*#__PURE__*/
+        // pass optional styles from react-window (if applies)
+        external_react_["createElement"](wonder_blocks_core_["View"], {
+          style: [separator_item_styles.separator, this.props.style],
+          "aria-hidden": "true"
+        })
+      );
+    }
+  }], [{
+    key: "isClassOf",
+    value: function isClassOf(instance) {
+      return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
+    }
+  }]);
+
+  return SeparatorItem;
+}(external_react_["Component"]);
+
+separator_item_defineProperty(separator_item_SeparatorItem, "__IS_SEPARATOR_ITEM__", true);
+
+
+var separator_item_styles = external_aphrodite_["StyleSheet"].create({
+  separator: {
+    boxShadow: "0 -1px ".concat(wonder_blocks_color_default.a.offBlack16),
+    height: 1,
+    minHeight: 1,
+    marginTop: wonder_blocks_spacing_default.a.xxxSmall_4,
+    marginBottom: wonder_blocks_spacing_default.a.xxxSmall_4
+  }
+});
+// EXTERNAL MODULE: external "react-dom"
+var external_react_dom_ = __webpack_require__(7);
+var external_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_react_dom_);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/dropdown-opener.js
+function dropdown_opener_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { dropdown_opener_typeof = function _typeof(obj) { return typeof obj; }; } else { dropdown_opener_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return dropdown_opener_typeof(obj); }
+
+function dropdown_opener_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 dropdown_opener_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { dropdown_opener_ownKeys(Object(source), true).forEach(function (key) { dropdown_opener_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { dropdown_opener_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function dropdown_opener_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function dropdown_opener_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 dropdown_opener_createClass(Constructor, protoProps, staticProps) { if (protoProps) dropdown_opener_defineProperties(Constructor.prototype, protoProps); if (staticProps) dropdown_opener_defineProperties(Constructor, staticProps); return Constructor; }
+
+function dropdown_opener_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) dropdown_opener_setPrototypeOf(subClass, superClass); }
+
+function dropdown_opener_setPrototypeOf(o, p) { dropdown_opener_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return dropdown_opener_setPrototypeOf(o, p); }
+
+function dropdown_opener_createSuper(Derived) { var hasNativeReflectConstruct = dropdown_opener_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = dropdown_opener_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = dropdown_opener_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return dropdown_opener_possibleConstructorReturn(this, result); }; }
+
+function dropdown_opener_possibleConstructorReturn(self, call) { if (call && (dropdown_opener_typeof(call) === "object" || typeof call === "function")) { return call; } return dropdown_opener_assertThisInitialized(self); }
+
+function dropdown_opener_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function dropdown_opener_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 dropdown_opener_getPrototypeOf(o) { dropdown_opener_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return dropdown_opener_getPrototypeOf(o); }
+
+function dropdown_opener_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; }
+
+
+
+
+var dropdown_opener_DropdownOpener = /*#__PURE__*/function (_React$Component) {
+  dropdown_opener_inherits(DropdownOpener, _React$Component);
+
+  var _super = dropdown_opener_createSuper(DropdownOpener);
+
+  function DropdownOpener() {
+    var _this;
+
+    dropdown_opener_classCallCheck(this, DropdownOpener);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    dropdown_opener_defineProperty(dropdown_opener_assertThisInitialized(_this), "getTestIdFromProps", function (childrenProps) {
+      return childrenProps.testId || childrenProps["data-test-id"];
+    });
+
+    return _this;
+  }
+
+  dropdown_opener_createClass(DropdownOpener, [{
+    key: "renderAnchorChildren",
+    value: function renderAnchorChildren(eventState, clickableChildrenProps) {
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          testId = _this$props.testId,
+          text = _this$props.text;
+      var renderedChildren = this.props.children(dropdown_opener_objectSpread(dropdown_opener_objectSpread({}, eventState), {}, {
+        text: text
+      }));
+      var childrenProps = renderedChildren.props;
+      var childrenTestId = this.getTestIdFromProps(childrenProps);
+      return external_react_["cloneElement"](renderedChildren, dropdown_opener_objectSpread(dropdown_opener_objectSpread({}, clickableChildrenProps), {}, {
+        disabled: disabled,
+        onClick: childrenProps.onClick ? function (e) {
+          // This is done to avoid overriding a
+          // custom onClick handler inside the
+          // children node
+          childrenProps.onClick(e);
+          clickableChildrenProps.onClick(e);
+        } : clickableChildrenProps.onClick,
+        // try to get the testId from the child element
+        // If it's not set, try to fallback to the parent's testId
+        "data-test-id": childrenTestId || testId
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_clickable_["ClickableBehavior"], {
+        onClick: this.props.onClick,
+        disabled: this.props.disabled
+      }, function (eventState, handlers) {
+        return _this2.renderAnchorChildren(eventState, handlers);
+      });
+    }
+  }]);
+
+  return DropdownOpener;
+}(external_react_["Component"]);
+
+dropdown_opener_defineProperty(dropdown_opener_DropdownOpener, "defaultProps", {
+  disabled: false
+});
+
+/* harmony default export */ var dropdown_opener = (dropdown_opener_DropdownOpener);
+// EXTERNAL MODULE: external "react-popper"
+var external_react_popper_ = __webpack_require__(13);
+
+// EXTERNAL MODULE: external "react-window"
+var external_react_window_ = __webpack_require__(11);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-modal"
+var wonder_blocks_modal_ = __webpack_require__(14);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-timing"
+var wonder_blocks_timing_ = __webpack_require__(10);
+
+// EXTERNAL MODULE: external "popper.js"
+var external_popper_js_ = __webpack_require__(15);
+var external_popper_js_default = /*#__PURE__*/__webpack_require__.n(external_popper_js_);
+
+// CONCATENATED MODULE: ./shared-unpackaged/get-edges.js
+var EmptySizes = Object.freeze({
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+});
+/**
+ * Get the margin, padding, and border edges for a given element.
+ */
+
+function getEdges(element, withoutEdges) {
+  if (!withoutEdges && element instanceof Element) {
+    var style = element.currentStyle || window.getComputedStyle(element);
+    return {
+      margin: {
+        left: parseFloat(style.marginLeft),
+        top: parseFloat(style.marginTop),
+        right: parseFloat(style.marginRight),
+        bottom: parseFloat(style.marginBottom)
+      },
+      padding: {
+        left: parseFloat(style.paddingLeft),
+        top: parseFloat(style.paddingTop),
+        right: parseFloat(style.paddingRight),
+        bottom: parseFloat(style.paddingBottom)
+      },
+      border: {
+        left: parseFloat(style.borderLeftWidth),
+        top: parseFloat(style.borderTopWidth),
+        right: parseFloat(style.borderRightWidth),
+        bottom: parseFloat(style.borderBottomWidth)
+      }
+    };
+  }
+
+  return {
+    margin: EmptySizes,
+    padding: EmptySizes,
+    border: EmptySizes
+  };
+}
+// CONCATENATED MODULE: ./shared-unpackaged/get-bounds.js
+
+function getBounds(element) {
+  var withoutEdges = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var elementRect = element.getBoundingClientRect();
+  var edges = getEdges(element, withoutEdges);
+  return {
+    left: elementRect.left + edges.margin.left + edges.padding.left + edges.border.left,
+    top: elementRect.top + edges.margin.top + edges.padding.top + edges.border.top,
+    right: elementRect.right - edges.margin.right - edges.padding.right - edges.border.right,
+    bottom: elementRect.bottom - edges.margin.bottom - edges.padding.bottom - edges.border.bottom
+  };
+}
+// CONCATENATED MODULE: ./shared-unpackaged/get-axis-intersection.js
+function getAxisIntersection(intersectingRect, boundsRect, axis) {
+  var start = function start(rect) {
+    return axis === "horizontal" ? rect.left : rect.top;
+  };
+
+  var end = function end(rect) {
+    return axis === "horizontal" ? rect.right : rect.bottom;
+  };
+
+  if (end(intersectingRect) <= start(boundsRect)) {
+    return "before";
+  } else if (start(intersectingRect) >= end(boundsRect)) {
+    return "after";
+  }
+
+  return "within";
+}
+// CONCATENATED MODULE: ./shared-unpackaged/get-intersection.js
+
+/**
+ * Determine how one rectangle intersects another.
+ *
+ * The intersection should be interpreted as whether the first rectangle is
+ * within the second.
+ */
+
+function getIntersection(intersectingRect, boundsRect) {
+  var horizontal = getAxisIntersection(intersectingRect, boundsRect, "horizontal");
+  var vertical = getAxisIntersection(intersectingRect, boundsRect, "vertical");
+  return {
+    horizontal: horizontal,
+    vertical: vertical
+  };
+}
+// CONCATENATED MODULE: ./shared-unpackaged/is-obscured.js
+
+
+/**
+ * Determine if an element is obscured by other elements.
+ *
+ * This uses document.elementFromPoint to see if the given element is being
+ * overdrawn by another element. Note that this won't work if the given element
+ * has `pointer-events: none`.
+ */
+
+function isObscured(anchorElement, popperElement) {
+  // TODO(somewhatabstract): We should be smarter in this algorithm and
+  // actually look at the intersection of the elements doing the obscuring
+  // just as we already do with our scroll parent intersections. That way we
+  // can not only check that the entire element is obscured, but think about
+  // partial obscurement so we can move the tooltip bubble when it's anchor
+  // point is not visible.
+  // Before we assume we're visible let's check to see if something else
+  // is obscuring us. Here we check a variety of points of the element
+  // like topleft, bottomright, and center to see if they are covered by
+  // something, and if so, assume we're not visible.
+  // There are ways that this can still not work, such as different
+  // elements only covering those points and the remainder being visible,
+  // or if some covering element has none for pointer-events style, but
+  // those edge cases shouldn't bother the main usages for this method.
+  // NOTE: If the anchor element has `pointer-events: none`, we're always
+  // going to end up hiding, so, you know, probably don't do that.
+  // We're not explicitly checking for that CSS since it's a corner-case and
+  // would impact perf of the regular cases if we were always checking it.
+  // TODO(somewhatabstract, WB-300): Need to cater to the case where the
+  // viewport is zoomed such that both corners are off screen but the rest
+  // isn't. In this case some browsers don't return the element from
+  // `elementFromPoint` then doesn't return the element.
+  // Also, consider how we might mitigate the pointer-events issue and make
+  // this call more robust.
+  var bounds = getBounds(anchorElement); // This method does the main work, taking some coordinates and determining
+  // if our element is visible at that point or not.
+
+  var isVisible = function isVisible(x, y) {
+    var elAtPoint = document.elementFromPoint(x, y);
+
+    if (elAtPoint != null && (elAtPoint === popperElement || popperElement.contains(elAtPoint))) {
+      // Oh no, we're being obscured by our own popper.
+      // We need to look behind it. Shenanigans time.
+      var pointerEventsStyle = elAtPoint.style.pointerEvents; // Remove pointer events so that we can look through it.
+
+      elAtPoint.style.pointerEvents = "none";
+
+      try {
+        var visible = isVisible(x, y);
+        return visible;
+      } finally {
+        // Make sure we put things back the way we found them. :)
+        elAtPoint.style.pointerEvents = pointerEventsStyle;
+      }
+    }
+
+    if (anchorElement instanceof Element) {
+      // If we are working with an element, then we can do some decendency checks
+      // to ensure we're not just hitting a child. We're ok with saying that
+      // we're visible if we hit a parent because we check them for visibility
+      // elsewhere.
+      return elAtPoint != null && (anchorElement.contains(elAtPoint) || elAtPoint.contains(anchorElement));
+    } // If element is a reference object, all we have to work with is
+    // intersection for checking obscurity. Since this doesn't cover
+    // parent/child relationships in the DOM, it's not really effective
+    // on its own and is possibly about as good as just returning `true`.
+
+
+    var intersection = elAtPoint && getIntersection(bounds, getBounds(elAtPoint, true));
+    return (intersection === null || intersection === void 0 ? void 0 : intersection.horizontal) !== "within" || (intersection === null || intersection === void 0 ? void 0 : intersection.vertical) !== "within";
+  }; // NOTE: We are using functions here so that we only do as much work
+  // as we need to, short-circuiting as soon as we have a definitive
+  // answer.
+
+
+  var isTopLeftVisible = function isTopLeftVisible() {
+    return isVisible(bounds.left, bounds.top);
+  };
+
+  var isBottomRightVisible = function isBottomRightVisible() {
+    return isVisible(bounds.right, bounds.bottom);
+  };
+
+  var isCenterVisible = function isCenterVisible() {
+    return isVisible(bounds.left + (bounds.right - bounds.left) / 2, bounds.top + (bounds.bottom - bounds.top) / 2);
+  };
+
+  return !isTopLeftVisible() && !isBottomRightVisible() && !isCenterVisible();
+}
+// CONCATENATED MODULE: ./shared-unpackaged/visibility-modifier.js
+var _PopperJS$Defaults$mo, _PopperJS$Defaults$mo2;
+
+/**
+ * A modifier for use with popper.js or react-popper.
+ *
+ * This looks at the scroll parents of the reference element to determine
+ * overall visibility.
+ *
+ * See https://popper.js.org/popper-documentation.html#modifiers for more
+ * details on popper.js modifiers.
+ */
+
+
+
+/**
+ * The function that implements the modifier.
+ */
+
+function visibilityModifierFn(data) {
+  var anchorElement = data.instance.reference; // First, we see how the element intersects with its scroll parents.
+  // If it doesn't, then we should hide it.
+  // Otherwise, we check to see if anything else obscures the component (like
+  // a fixed or absolute positioned element).
+
+  var _getElementIntersecti = Object(wonder_blocks_core_["getElementIntersection"])(anchorElement),
+      horizontal = _getElementIntersecti.horizontal,
+      vertical = _getElementIntersecti.vertical;
+
+  var hide = horizontal !== "within" || vertical !== "within" || isObscured(anchorElement, data.instance.popper); // If we're hidden, we mimic what the built-in hide method does,
+  // and set the hide flag and the OOB attribute with appropriate
+  // short-circuiting.
+  // https://github.com/FezVrasta/popper.js/blob/08c5d6010346bf9df06e9f81a54fa6c2c51e3639/packages/popper/src/modifiers/hide.js#L29-L42
+
+  if (hide) {
+    if (data.hide) {
+      return data;
+    }
+
+    data.hide = true;
+    data.attributes["x-out-of-boundaries"] = "";
+  } else {
+    // Avoid unnecessary DOM access if visibility hasn't changed
+    if (!data.hide) {
+      return data;
+    }
+
+    data.hide = false;
+    data.attributes["x-out-of-boundaries"] = false;
+  } // Always have to return the data object to ensure the modifier chain
+  // in popper.js is unbroken.
+
+
+  return data;
+}
+/**
+ * Default configuration that sets things up how usually want them.
+ * Usage:
+ * ```js
+ *     import visibilityModifier from "visibility-modifier.js";
+ *     const modifiers = [
+ *         wbvisibility: visibilityModifier,
+ *     ];
+ * ```
+ *
+ * Where `wbvisibility` is a unique name to give the modifier entry,
+ * and `modifiers` is the popper.js or react-popper modifiers array.
+ */
+
+
+/* harmony default export */ var visibility_modifier = ({
+  enabled: true,
+  // We want this to run after the "hide" modifier, by default.
+  order: (((_PopperJS$Defaults$mo = external_popper_js_default.a.Defaults.modifiers) === null || _PopperJS$Defaults$mo === void 0 ? void 0 : (_PopperJS$Defaults$mo2 = _PopperJS$Defaults$mo.hide) === null || _PopperJS$Defaults$mo2 === void 0 ? void 0 : _PopperJS$Defaults$mo2.order) || 0) + 1,
+  fn: visibilityModifierFn
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/dropdown-core-virtualized-item.js
+function dropdown_core_virtualized_item_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { dropdown_core_virtualized_item_typeof = function _typeof(obj) { return typeof obj; }; } else { dropdown_core_virtualized_item_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return dropdown_core_virtualized_item_typeof(obj); }
+
+function dropdown_core_virtualized_item_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 dropdown_core_virtualized_item_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { dropdown_core_virtualized_item_ownKeys(Object(source), true).forEach(function (key) { dropdown_core_virtualized_item_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { dropdown_core_virtualized_item_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function dropdown_core_virtualized_item_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 dropdown_core_virtualized_item_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function dropdown_core_virtualized_item_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 dropdown_core_virtualized_item_createClass(Constructor, protoProps, staticProps) { if (protoProps) dropdown_core_virtualized_item_defineProperties(Constructor.prototype, protoProps); if (staticProps) dropdown_core_virtualized_item_defineProperties(Constructor, staticProps); return Constructor; }
+
+function dropdown_core_virtualized_item_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) dropdown_core_virtualized_item_setPrototypeOf(subClass, superClass); }
+
+function dropdown_core_virtualized_item_setPrototypeOf(o, p) { dropdown_core_virtualized_item_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return dropdown_core_virtualized_item_setPrototypeOf(o, p); }
+
+function dropdown_core_virtualized_item_createSuper(Derived) { var hasNativeReflectConstruct = dropdown_core_virtualized_item_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = dropdown_core_virtualized_item_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = dropdown_core_virtualized_item_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return dropdown_core_virtualized_item_possibleConstructorReturn(this, result); }; }
+
+function dropdown_core_virtualized_item_possibleConstructorReturn(self, call) { if (call && (dropdown_core_virtualized_item_typeof(call) === "object" || typeof call === "function")) { return call; } return dropdown_core_virtualized_item_assertThisInitialized(self); }
+
+function dropdown_core_virtualized_item_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function dropdown_core_virtualized_item_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 dropdown_core_virtualized_item_getPrototypeOf(o) { dropdown_core_virtualized_item_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return dropdown_core_virtualized_item_getPrototypeOf(o); }
+
+
+
+
+/**
+ * A virtualized list item - It's created by decorating the DropdownItem
+ * (ActionItem, OptionItem, SeparatorItem) with custom styles to let
+ * react-window make its own calculations.
+ */
+var dropdown_core_virtualized_item_DropdownVirtualizedItem = /*#__PURE__*/function (_React$Component) {
+  dropdown_core_virtualized_item_inherits(DropdownVirtualizedItem, _React$Component);
+
+  var _super = dropdown_core_virtualized_item_createSuper(DropdownVirtualizedItem);
+
+  function DropdownVirtualizedItem() {
+    dropdown_core_virtualized_item_classCallCheck(this, DropdownVirtualizedItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  dropdown_core_virtualized_item_createClass(DropdownVirtualizedItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          data = _this$props.data,
+          index = _this$props.index,
+          style = _this$props.style;
+      var item = data[index];
+
+      if (separator_item_SeparatorItem.isClassOf(item.component)) {
+        // add react-window style to the separator to preserve the correct
+        // position
+        return external_react_["cloneElement"](item.component, {
+          style: style
+        });
+      } else {
+        var component = item.component,
+            populatedProps = item.populatedProps,
+            onClick = item.onClick,
+            role = item.role,
+            ref = item.ref;
+        return external_react_["cloneElement"](component, dropdown_core_virtualized_item_objectSpread(dropdown_core_virtualized_item_objectSpread({
+          style: style
+        }, populatedProps), {}, {
+          key: index,
+          onClick: onClick,
+          ref: item.focusable && ref,
+          role: role
+        }));
+      }
+    }
+  }]);
+
+  return DropdownVirtualizedItem;
+}(external_react_["Component"]);
+
+/* harmony default export */ var dropdown_core_virtualized_item = (dropdown_core_virtualized_item_DropdownVirtualizedItem);
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon-button"
+var wonder_blocks_icon_button_ = __webpack_require__(16);
+var wonder_blocks_icon_button_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_button_);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/search-text-input.js
+function search_text_input_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { search_text_input_typeof = function _typeof(obj) { return typeof obj; }; } else { search_text_input_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return search_text_input_typeof(obj); }
+
+function search_text_input_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 search_text_input_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { search_text_input_ownKeys(Object(source), true).forEach(function (key) { search_text_input_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { search_text_input_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function search_text_input_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function search_text_input_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 search_text_input_createClass(Constructor, protoProps, staticProps) { if (protoProps) search_text_input_defineProperties(Constructor.prototype, protoProps); if (staticProps) search_text_input_defineProperties(Constructor, staticProps); return Constructor; }
+
+function search_text_input_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) search_text_input_setPrototypeOf(subClass, superClass); }
+
+function search_text_input_setPrototypeOf(o, p) { search_text_input_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return search_text_input_setPrototypeOf(o, p); }
+
+function search_text_input_createSuper(Derived) { var hasNativeReflectConstruct = search_text_input_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = search_text_input_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = search_text_input_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return search_text_input_possibleConstructorReturn(this, result); }; }
+
+function search_text_input_possibleConstructorReturn(self, call) { if (call && (search_text_input_typeof(call) === "object" || typeof call === "function")) { return call; } return search_text_input_assertThisInitialized(self); }
+
+function search_text_input_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function search_text_input_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 search_text_input_getPrototypeOf(o) { search_text_input_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return search_text_input_getPrototypeOf(o); }
+
+function search_text_input_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; }
+
+// A TextField with a search icon on its left side and X icon on its right side
+
+
+
+
+
+
+
+
+
+
+var search_text_input_SearchTextInput = /*#__PURE__*/function (_React$Component) {
+  search_text_input_inherits(SearchTextInput, _React$Component);
+
+  var _super = search_text_input_createSuper(SearchTextInput);
+
+  function SearchTextInput() {
+    var _this;
+
+    search_text_input_classCallCheck(this, SearchTextInput);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    search_text_input_defineProperty(search_text_input_assertThisInitialized(_this), "state", {
+      focused: false,
+      labels: search_text_input_objectSpread({
+        clearSearch: defaultLabels.clearSearch,
+        filter: defaultLabels.filter
+      }, _this.props.labels)
+    });
+
+    search_text_input_defineProperty(search_text_input_assertThisInitialized(_this), "handleChange", function (e) {
+      e.preventDefault();
+
+      _this.props.onChange(e.target.value);
+    });
+
+    search_text_input_defineProperty(search_text_input_assertThisInitialized(_this), "handleDismiss", function () {
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          onChange = _this$props.onChange; // Empty the search text and focus the SearchTextInput
+
+      onChange("");
+
+      if (onClick) {
+        onClick();
+      }
+    });
+
+    search_text_input_defineProperty(search_text_input_assertThisInitialized(_this), "handleBlur", function (e) {
+      _this.setState({
+        focused: false
+      });
+    });
+
+    search_text_input_defineProperty(search_text_input_assertThisInitialized(_this), "handleFocus", function (e) {
+      _this.setState({
+        focused: true
+      });
+    });
+
+    return _this;
+  }
+
+  search_text_input_createClass(SearchTextInput, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.labels !== prevProps.labels) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          labels: search_text_input_objectSpread(search_text_input_objectSpread({}, this.state.labels), this.props.labels)
+        });
+      }
+    }
+  }, {
+    key: "maybeRenderDismissIconButton",
+    value: function maybeRenderDismissIconButton() {
+      var searchText = this.props.searchText;
+      var clearSearch = this.state.labels.clearSearch;
+
+      if (searchText.length > 0) {
+        return /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_button_default.a, {
+          icon: wonder_blocks_icon_["icons"].dismiss,
+          kind: "tertiary",
+          onClick: this.handleDismiss,
+          style: search_text_input_styles.dismissIcon,
+          "aria-label": clearSearch
+        });
+      }
+
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          onClick = _this$props2.onClick,
+          itemRef = _this$props2.itemRef,
+          searchText = _this$props2.searchText,
+          style = _this$props2.style,
+          testId = _this$props2.testId;
+      var filter = this.state.labels.filter;
+      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+        onClick: onClick,
+        style: [search_text_input_styles.inputContainer, this.state.focused && search_text_input_styles.focused, style]
+      }, /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
+        icon: wonder_blocks_icon_["icons"].search,
+        size: "medium",
+        color: wonder_blocks_color_default.a.offBlack64,
+        style: search_text_input_styles.searchIcon,
+        "aria-hidden": "true"
+      }), /*#__PURE__*/external_react_["createElement"]("input", {
+        type: "text",
+        onChange: this.handleChange,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        ref: itemRef,
+        placeholder: filter,
+        value: searchText,
+        className: Object(external_aphrodite_["css"])(search_text_input_styles.inputStyleReset, wonder_blocks_typography_["styles"].LabelMedium),
+        "data-test-id": testId
+      }), this.maybeRenderDismissIconButton());
+    }
+  }], [{
+    key: "isClassOf",
+    value: function isClassOf(instance) {
+      return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
+    }
+  }]);
+
+  return SearchTextInput;
+}(external_react_["Component"]);
+
+search_text_input_defineProperty(search_text_input_SearchTextInput, "defaultProps", {
+  labels: {
+    clearSearch: defaultLabels.clearSearch,
+    filter: defaultLabels.filter
+  }
+});
+
+search_text_input_defineProperty(search_text_input_SearchTextInput, "__IS_SEARCH_TEXT_INPUT__", true);
+
+
+var search_text_input_styles = external_aphrodite_["StyleSheet"].create({
+  inputContainer: {
+    flexDirection: "row",
+    border: "1px solid ".concat(wonder_blocks_color_default.a.offBlack16),
+    borderRadius: wonder_blocks_spacing_default.a.xxxSmall_4,
+    alignItems: "center",
+    // The height of the text input is 40 in design spec and we need to
+    // specify the height as well as minHeight to make sure the search text
+    // input takes enough height to render. (otherwise, it will get
+    // squashed)
+    height: DROPDOWN_ITEM_HEIGHT,
+    minHeight: DROPDOWN_ITEM_HEIGHT
+  },
+  focused: {
+    border: "1px solid ".concat(wonder_blocks_color_default.a.blue)
+  },
+  searchIcon: {
+    marginLeft: wonder_blocks_spacing_default.a.xSmall_8,
+    marginRight: wonder_blocks_spacing_default.a.xSmall_8
+  },
+  dismissIcon: {
+    margin: 0,
+    ":hover": {
+      border: "none"
+    }
+  },
+  inputStyleReset: {
+    display: "flex",
+    flex: 1,
+    background: "inherit",
+    border: "none",
+    outline: "none",
+    "::placeholder": {
+      color: wonder_blocks_color_default.a.offBlack64
+    },
+    width: "100%",
+    color: "inherit"
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/dropdown-core-virtualized.js
+function dropdown_core_virtualized_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { dropdown_core_virtualized_typeof = function _typeof(obj) { return typeof obj; }; } else { dropdown_core_virtualized_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return dropdown_core_virtualized_typeof(obj); }
+
+function dropdown_core_virtualized_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function dropdown_core_virtualized_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 dropdown_core_virtualized_createClass(Constructor, protoProps, staticProps) { if (protoProps) dropdown_core_virtualized_defineProperties(Constructor.prototype, protoProps); if (staticProps) dropdown_core_virtualized_defineProperties(Constructor, staticProps); return Constructor; }
+
+function dropdown_core_virtualized_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) dropdown_core_virtualized_setPrototypeOf(subClass, superClass); }
+
+function dropdown_core_virtualized_setPrototypeOf(o, p) { dropdown_core_virtualized_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return dropdown_core_virtualized_setPrototypeOf(o, p); }
+
+function dropdown_core_virtualized_createSuper(Derived) { var hasNativeReflectConstruct = dropdown_core_virtualized_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = dropdown_core_virtualized_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = dropdown_core_virtualized_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return dropdown_core_virtualized_possibleConstructorReturn(this, result); }; }
+
+function dropdown_core_virtualized_possibleConstructorReturn(self, call) { if (call && (dropdown_core_virtualized_typeof(call) === "object" || typeof call === "function")) { return call; } return dropdown_core_virtualized_assertThisInitialized(self); }
+
+function dropdown_core_virtualized_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function dropdown_core_virtualized_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 dropdown_core_virtualized_getPrototypeOf(o) { dropdown_core_virtualized_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return dropdown_core_virtualized_getPrototypeOf(o); }
+
+function dropdown_core_virtualized_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; }
+
+
+
+
+
+
+
+
+
+
+/**
+ * Maximum visible items inside the dropdown list
+ */
+var MAX_VISIBLE_ITEMS = 10;
+/**
+ * A react-window's List wrapper that instantiates the virtualized list and
+ * dynamically calculates the item height depending on the type
+ */
+
+var dropdown_core_virtualized_DropdownCoreVirtualized = /*#__PURE__*/function (_React$Component) {
+  dropdown_core_virtualized_inherits(DropdownCoreVirtualized, _React$Component);
+
+  var _super = dropdown_core_virtualized_createSuper(DropdownCoreVirtualized);
+
+  function DropdownCoreVirtualized() {
+    var _this;
+
+    dropdown_core_virtualized_classCallCheck(this, DropdownCoreVirtualized);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    dropdown_core_virtualized_defineProperty(dropdown_core_virtualized_assertThisInitialized(_this), "state", {
+      height: _this.getHeight(),
+      width: _this.props.width
+    });
+
+    dropdown_core_virtualized_defineProperty(dropdown_core_virtualized_assertThisInitialized(_this), "getItemSize", function (index) {
+      // get the current item in the list
+      var item = _this.props.data[index];
+
+      if (separator_item_SeparatorItem.isClassOf(item.component)) {
+        // this is the separator's height (1px) + vertical margin (8px)
+        return SEPARATOR_ITEM_HEIGHT;
+      } else if (search_text_input_SearchTextInput.isClassOf(item.component)) {
+        // search text input height
+        return SEARCH_ITEM_HEIGHT;
+      } else {
+        // default dropdown item height
+        return DROPDOWN_ITEM_HEIGHT;
+      }
+    });
+
+    return _this;
+  }
+
+  dropdown_core_virtualized_createClass(DropdownCoreVirtualized, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var schedule = this.props.schedule; // Wait for styles to be applied. This way, we can get a more precise
+      // value of the container dimensions.
+
+      schedule.animationFrame(function () {
+        _this2.setWidth();
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+          data = _this$props.data,
+          listRef = _this$props.listRef; // if the items size has changed, then recalculate each item position
+
+      if (prevProps.data.length !== data.length) {
+        this.setHeight();
+
+        if (listRef && listRef.current) {
+          // the ref can't associate this instance method
+          // $FlowIgnore
+          listRef.current.resetAfterIndex(1);
+        }
+      }
+    }
+    /**
+     * Update container width
+     */
+
+  }, {
+    key: "setWidth",
+    value: function setWidth() {
+      var rootNode = external_react_dom_default.a.findDOMNode(this);
+      var parentNode = rootNode === null || rootNode === void 0 ? void 0 : rootNode.parentElement; // after the non-virtualized items are rendered, we get the container
+      //  width to pass it to react-window's List
+
+      if (parentNode) {
+        var width = parentNode.getBoundingClientRect().width;
+        this.setState({
+          width: width
+        });
+      }
+    }
+    /**
+     * Update container height
+     */
+
+  }, {
+    key: "setHeight",
+    value: function setHeight() {
+      // calculate dropdown's height depending on the type of items
+      var height = this.getHeight();
+      this.setState({
+        height: height
+      });
+    }
+    /**
+     * The list height that is automatically calculated depending on the
+     * component's type of each item (e.g. Separator, Option, Search, etc)
+     */
+
+  }, {
+    key: "getHeight",
+    value: function getHeight() {
+      // calculate using the first 10 items on the array as we want to display
+      // this number of elements in the visible area
+      return this.props.data.slice(0, MAX_VISIBLE_ITEMS).reduce(function (sum, item) {
+        if (separator_item_SeparatorItem.isClassOf(item.component)) {
+          return sum + SEPARATOR_ITEM_HEIGHT;
+        } else if (search_text_input_SearchTextInput.isClassOf(item.component)) {
+          // search text input height
+          return sum + SEARCH_ITEM_HEIGHT;
+        } else {
+          return sum + DROPDOWN_ITEM_HEIGHT;
+        }
+      }, 0);
+    }
+    /**
+     * Calculates item height
+     */
+
+  }, {
+    key: "renderInitialItems",
+
+    /**
+     * render non virtualized items to calculate the container max-width that
+     * will be used by DropdownCoreVirtualized
+     */
+    value: function renderInitialItems() {
+      var data = this.props.data;
+      var allComponents = data.map(function (e) {
+        return e.component;
+      }); // 1. get the children opaque data structure to sort each item by its
+      //    label length
+
+      var longestItems = external_react_["Children"].toArray(allComponents).filter(Boolean).sort(function (a, b) {
+        // 2. only sort elements that contain a `label` prop
+        if (b.props.label && a.props.label) {
+          return b.props.label.length - a.props.label.length;
+        }
+
+        return -1;
+      }) // 3. only render the possible visible items to minimize layout
+      //    jumps
+      .slice(0, MAX_VISIBLE_ITEMS); // Append longest items to calculate the container width.
+      // We need to hide these sorted elements to avoid any FOUC.
+
+      return longestItems.map(function (item) {
+        return external_react_["cloneElement"](item, {
+          style: {
+            visibility: "hidden"
+          }
+        });
+      });
+    }
+  }, {
+    key: "renderVirtualizedList",
+    value: function renderVirtualizedList() {
+      var _this$props2 = this.props,
+          data = _this$props2.data,
+          listRef = _this$props2.listRef;
+      var _this$state = this.state,
+          height = _this$state.height,
+          width = _this$state.width;
+      return (
+        /*#__PURE__*/
+        // react-window has some issues for typing lists when passing refs
+        // $FlowIgnore
+        external_react_["createElement"](external_react_window_["VariableSizeList"] // react-window doesn't accept maybe numbers. It wants numbers
+        // or strings.
+        // $FlowFixMe
+        , {
+          height: height,
+          itemCount: data.length,
+          itemSize: this.getItemSize,
+          itemData: data,
+          style: {
+            overflowX: "hidden"
+          } // react-window doesn't accept maybe numbers. It wants numbers
+          // or strings.
+          // $FlowFixMe
+          ,
+          width: width,
+          overscanCount: 5,
+          ref: listRef
+        }, dropdown_core_virtualized_item)
+      );
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.width === undefined) {
+        // if we don't pass a fixed value, then we need to render
+        // non-virtualized items to calculate width
+        return this.renderInitialItems();
+      } else {
+        // width has been provided, then render the virtualized list
+        return this.renderVirtualizedList();
+      }
+    }
+  }]);
+
+  return DropdownCoreVirtualized;
+}(external_react_["Component"]);
+
+/* harmony default export */ var dropdown_core_virtualized = (Object(wonder_blocks_timing_["withActionScheduler"])(dropdown_core_virtualized_DropdownCoreVirtualized));
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/dropdown-core.js
+function dropdown_core_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { dropdown_core_typeof = function _typeof(obj) { return typeof obj; }; } else { dropdown_core_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return dropdown_core_typeof(obj); }
+
+function dropdown_core_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = dropdown_core_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 dropdown_core_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 dropdown_core_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 dropdown_core_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { dropdown_core_ownKeys(Object(source), true).forEach(function (key) { dropdown_core_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { dropdown_core_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function dropdown_core_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function dropdown_core_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 dropdown_core_createClass(Constructor, protoProps, staticProps) { if (protoProps) dropdown_core_defineProperties(Constructor.prototype, protoProps); if (staticProps) dropdown_core_defineProperties(Constructor, staticProps); return Constructor; }
+
+function dropdown_core_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) dropdown_core_setPrototypeOf(subClass, superClass); }
+
+function dropdown_core_setPrototypeOf(o, p) { dropdown_core_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return dropdown_core_setPrototypeOf(o, p); }
+
+function dropdown_core_createSuper(Derived) { var hasNativeReflectConstruct = dropdown_core_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = dropdown_core_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = dropdown_core_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return dropdown_core_possibleConstructorReturn(this, result); }; }
+
+function dropdown_core_possibleConstructorReturn(self, call) { if (call && (dropdown_core_typeof(call) === "object" || typeof call === "function")) { return call; } return dropdown_core_assertThisInitialized(self); }
+
+function dropdown_core_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function dropdown_core_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 dropdown_core_getPrototypeOf(o) { dropdown_core_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return dropdown_core_getPrototypeOf(o); }
+
+function dropdown_core_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; }
+
+// A menu that consists of action items
+
+
+
+
+
+
+
+
+
+
+
+// NOTE(jeff): Here we share some code for use with PopperJS. Long term,
+// we should either contribute this code to the PopperJS component, or its
+// own non-wonder-blocks package.
+// $FlowIgnore
+ // eslint-disable-line import/no-restricted-paths
+
+
+
+
+
+
+/**
+ * A core dropdown component that takes an opener and children to display as
+ * part of the dropdown menu. Renders the dropdown as a portal to avoid clipping
+ * in overflow: auto containers.
+ */
+var dropdown_core_DropdownCore = /*#__PURE__*/function (_React$Component) {
+  dropdown_core_inherits(DropdownCore, _React$Component);
+
+  var _super = dropdown_core_createSuper(DropdownCore);
+
+  dropdown_core_createClass(DropdownCore, null, [{
+    key: "sameItemsFocusable",
+    // Keeps track of the index of the focused item, out of a list of focusable items
+    // Keeps track of the index of the focused item in the context of all the
+    // items contained by this menu, whether focusable or not, used for figuring
+    // out focus correctly when the items have changed in terms of whether
+    // they're focusable or not
+    // Whether any items have been selected since the menu was opened
+    // Keeps a reference of the virtualized list instance
+    // Figure out if the same items are focusable. If an item has been added or
+    // removed, this method will return false.
+    value: function sameItemsFocusable(prevItems, currentItems) {
+      if (prevItems.length !== currentItems.length) {
+        return false;
+      }
+
+      for (var i = 0; i < prevItems.length; i++) {
+        if (prevItems[i].focusable !== currentItems[i].focusable) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+  }, {
+    key: "getDerivedStateFromProps",
+    // This is here to avoid calling React.createRef on each rerender. Instead,
+    // we create the itemRefs only if it's the first time or if the set of items
+    // that are focusable has changed.
+    value: function getDerivedStateFromProps(props, state) {
+      if (state.itemRefs.length === 0 && props.open || !DropdownCore.sameItemsFocusable(state.prevItems, props.items)) {
+        var itemRefs = [];
+
+        for (var i = 0; i < props.items.length; i++) {
+          if (props.items[i].focusable) {
+            var ref = external_react_["createRef"]();
+            itemRefs.push({
+              ref: ref,
+              originalIndex: i
+            });
+          }
+        }
+
+        return {
+          itemRefs: itemRefs,
+          prevItems: props.items,
+          sameItemsFocusable: false
+        };
+      } else {
+        return {
+          prevItems: props.items,
+          sameItemsFocusable: true
+        };
+      }
+    }
+  }]);
+
+  function DropdownCore(props) {
+    var _this;
+
+    dropdown_core_classCallCheck(this, DropdownCore);
+
+    _this = _super.call(this, props);
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "focusedIndex", void 0);
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "focusedOriginalIndex", void 0);
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "itemsClicked", void 0);
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "popperElement", void 0);
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "listRef", void 0);
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "handleInteract", function (event) {
+      var _this$props = _this.props,
+          open = _this$props.open,
+          onOpenChanged = _this$props.onOpenChanged;
+      var target = event.target;
+      var thisElement = external_react_dom_default.a.findDOMNode(dropdown_core_assertThisInitialized(_this));
+
+      if (open && thisElement && !thisElement.contains(target) && _this.popperElement && !_this.popperElement.contains(target)) {
+        onOpenChanged(false);
+      }
+    });
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      var _this$props2 = _this.props,
+          onOpenChanged = _this$props2.onOpenChanged,
+          open = _this$props2.open,
+          onSearchTextChanged = _this$props2.onSearchTextChanged,
+          searchText = _this$props2.searchText;
+      var keyCode = event.which || event.keyCode; // If menu isn't open and user presses down, open the menu
+
+      if (!open) {
+        if (keyCode === keyCodes.down) {
+          event.preventDefault();
+          onOpenChanged(true);
+          return;
+        }
+
+        return;
+      }
+
+      var showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string"; // Handle all other key behavior
+
+      switch (keyCode) {
+        case keyCodes.tab:
+          // When we show SearchTextInput and that is focused and the
+          // searchText is entered at least one character, dismiss button
+          // is displayed. When user presses tab, we should move focus
+          // to the dismiss button.
+          if (showSearchTextInput && _this.focusedIndex === 0 && searchText) {
+            return;
+          }
+
+          _this.restoreTabOrder();
+
+          onOpenChanged(false);
+          return;
+
+        case keyCodes.space:
+          // When we display SearchTextInput and the focus is on it,
+          // we should let the user type space.
+          if (showSearchTextInput && _this.focusedIndex === 0) {
+            return;
+          } // Prevent space from scrolling down the page
+
+
+          event.preventDefault();
+          return;
+
+        case keyCodes.up:
+          event.preventDefault();
+
+          _this.focusPreviousItem();
+
+          return;
+
+        case keyCodes.down:
+          event.preventDefault();
+
+          _this.focusNextItem();
+
+          return;
+      }
+    });
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "handleKeyUp", function (event) {
+      var _this$props3 = _this.props,
+          onOpenChanged = _this$props3.onOpenChanged,
+          open = _this$props3.open,
+          onSearchTextChanged = _this$props3.onSearchTextChanged,
+          searchText = _this$props3.searchText;
+      var keyCode = event.which || event.keyCode;
+      var showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string";
+
+      switch (keyCode) {
+        case keyCodes.space:
+          // When we display SearchTextInput and the focus is on it,
+          // we should let the user type space.
+          if (showSearchTextInput && _this.focusedIndex === 0) {
+            return;
+          } // Prevent space from scrolling down the page
+
+
+          event.preventDefault();
+          return;
+
+        case keyCodes.escape:
+          // Close only the dropdown, not other elements that are
+          // listening for an escape press
+          if (open) {
+            event.stopPropagation();
+
+            _this.restoreTabOrder();
+
+            onOpenChanged(false);
+          }
+
+          return;
+      }
+    });
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "handleClickFocus", function (index) {
+      // Turn itemsClicked on so pressing up or down would focus the
+      // appropriate item in handleKeyDown
+      _this.itemsClicked = true;
+      _this.focusedIndex = index;
+      _this.focusedOriginalIndex = _this.state.itemRefs[_this.focusedIndex].originalIndex;
+    });
+
+    dropdown_core_defineProperty(dropdown_core_assertThisInitialized(_this), "handleDropdownMouseUp", function (event) {
+      // $FlowIgnore[method-unbinding]
+      if (event.nativeEvent.stopImmediatePropagation) {
+        event.nativeEvent.stopImmediatePropagation();
+      } else {
+        // Workaround for jsdom
+        event.stopPropagation();
+      }
+    });
+
+    _this.focusedIndex = _this.props.initialFocusedIndex;
+    _this.state = {
+      prevItems: _this.props.items,
+      itemRefs: [],
+      sameItemsFocusable: false,
+      labels: dropdown_core_objectSpread({
+        noResults: defaultLabels.noResults
+      }, props.labels)
+    };
+    _this.listRef = external_react_["createRef"]();
+    return _this;
+  }
+
+  dropdown_core_createClass(DropdownCore, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.updateEventListeners();
+      this.initialFocusItem();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      var open = this.props.open;
+
+      if (prevProps.open !== open) {
+        this.updateEventListeners();
+        this.initialFocusItem();
+      } // If the menu changed, but from open to open, figure out if we need
+      // to recalculate the focus somehow.
+      else if (open) {
+          var _this$state = this.state,
+              itemRefs = _this$state.itemRefs,
+              sameItemsFocusable = _this$state.sameItemsFocusable; // Check if the same items are focused by comparing the items at
+          // each index and seeing if the {focusable} property is the same.
+          // Very rarely do the set of focusable items change if the menu
+          // hasn't been re-opened. This is for cases like a {Select all}
+          // option that becomes disabled iff all the options are selected.
+
+          if (sameItemsFocusable) {
+            return;
+          } else {
+            // If the set of items that was focusabled changed, it's very
+            // likely that the previously focused item no longer has the
+            // same index relative to the list of focusable items. Instead,
+            // use the focusedOriginalIndex to find the new index of the
+            // last item that was focused before this change
+            var newFocusableIndex = itemRefs.findIndex(function (ref) {
+              return ref.originalIndex === _this2.focusedOriginalIndex;
+            });
+
+            if (newFocusableIndex === -1) {
+              // Can't find the originally focused item, return focus to
+              // the first item that IS focusable
+              this.focusedIndex = 0; // Reset the knowlege that things had been clicked
+
+              this.itemsClicked = false;
+              this.scheduleToFocusCurrentItem();
+            } else {
+              this.focusedIndex = newFocusableIndex;
+            }
+          }
+
+          if (this.props.labels !== prevProps.labels) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({
+              labels: dropdown_core_objectSpread(dropdown_core_objectSpread({}, this.state.labels), this.props.labels)
+            });
+          }
+        }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.removeEventListeners();
+    } // Figure out focus states for the dropdown after it has changed from open
+    // to closed or vice versa
+
+  }, {
+    key: "initialFocusItem",
+    value: function initialFocusItem() {
+      var _this$props4 = this.props,
+          initialFocusedIndex = _this$props4.initialFocusedIndex,
+          open = _this$props4.open;
+
+      if (open) {
+        // Reset focused index
+        this.focusedIndex = initialFocusedIndex;
+        this.scheduleToFocusCurrentItem();
+      } else if (!open) {
+        this.itemsClicked = false;
+      }
+    }
+  }, {
+    key: "updateEventListeners",
+    value: function updateEventListeners() {
+      if (this.props.open) {
+        this.addEventListeners();
+      } else {
+        this.removeEventListeners();
+      }
+    }
+  }, {
+    key: "addEventListeners",
+    value: function addEventListeners() {
+      document.addEventListener("mouseup", this.handleInteract);
+      document.addEventListener("touchend", this.handleInteract);
+    }
+  }, {
+    key: "removeEventListeners",
+    value: function removeEventListeners() {
+      document.removeEventListener("mouseup", this.handleInteract);
+      document.removeEventListener("touchend", this.handleInteract);
+    }
+  }, {
+    key: "scheduleToFocusCurrentItem",
+    value: function scheduleToFocusCurrentItem() {
+      var _this3 = this;
+
+      // wait for windowed items to be recalculated
+      this.props.schedule.animationFrame(function () {
+        return _this3.focusCurrentItem();
+      });
+    }
+  }, {
+    key: "focusCurrentItem",
+    value: function focusCurrentItem() {
+      var node = external_react_dom_default.a.findDOMNode(this.state.itemRefs[this.focusedIndex].ref.current);
+
+      if (node) {
+        node.focus(); // Keep track of the original index of the newly focused item.
+        // To be used if the set of focusable items in the menu changes
+
+        this.focusedOriginalIndex = this.state.itemRefs[this.focusedIndex].originalIndex;
+      }
+    }
+  }, {
+    key: "focusPreviousItem",
+    value: function focusPreviousItem() {
+      if (this.focusedIndex === 0) {
+        this.focusedIndex = this.state.itemRefs.length - 1;
+      } else {
+        this.focusedIndex -= 1;
+      } // force react-window to scroll on the correct position
+
+
+      if (this.listRef.current) {
+        this.listRef.current.scrollToItem(this.focusedIndex);
+      }
+
+      this.scheduleToFocusCurrentItem();
+    }
+  }, {
+    key: "focusNextItem",
+    value: function focusNextItem() {
+      if (this.focusedIndex === this.state.itemRefs.length - 1) {
+        this.focusedIndex = 0;
+      } else {
+        this.focusedIndex += 1;
+      } // force react-window to scroll on the correct position
+
+
+      if (this.listRef.current) {
+        this.listRef.current.scrollToItem(this.focusedIndex);
+      }
+
+      this.scheduleToFocusCurrentItem();
+    }
+  }, {
+    key: "restoreTabOrder",
+    value: function restoreTabOrder() {
+      // NOTE: Because the dropdown is portalled out of its natural
+      // position in the DOM, we need to manually return focus to the
+      // opener element before we let the natural propagation of tab
+      // shift the focus to the next element in the tab order.
+      if (this.props.openerElement) {
+        this.props.openerElement.focus();
+      }
+    }
+  }, {
+    key: "getItemRole",
+    value: function getItemRole() {
+      var role = this.props.role;
+
+      switch (role) {
+        case "listbox":
+          return "option";
+
+        case "menu":
+          return "menuitem";
+
+        default:
+          throw new Error("Expected \"listbox\" or \"menu\" for role, but receieved \"".concat(role, "\" instead."));
+      }
+    }
+  }, {
+    key: "maybeRenderNoResults",
+    value: function maybeRenderNoResults() {
+      var _this$props5 = this.props,
+          items = _this$props5.items,
+          onSearchTextChanged = _this$props5.onSearchTextChanged,
+          searchText = _this$props5.searchText,
+          noResults = _this$props5.labels.noResults;
+      var showSearchTextInput = !!onSearchTextChanged && typeof searchText === "string";
+      var includeSearchCount = showSearchTextInput ? 1 : 0; // Verify if there are items to be rendered or not
+
+      var numResults = items.length - includeSearchCount;
+
+      if (numResults === 0) {
+        return /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], {
+          style: dropdown_core_styles.noResult,
+          testId: "dropdown-core-no-results"
+        }, noResults);
+      }
+
+      return null;
+    }
+    /**
+     * Process the items and wrap them into an array that react-window can
+     * interpret
+     */
+
+  }, {
+    key: "parseItemsList",
+    value: function parseItemsList() {
+      var _this4 = this;
+
+      var focusCounter = 0;
+      var itemRole = this.getItemRole();
+      return this.props.items.map(function (item, index) {
+        if (!separator_item_SeparatorItem.isClassOf(item.component) && item.focusable) {
+          focusCounter += 1;
+        }
+
+        var focusIndex = focusCounter - 1;
+
+        if (search_text_input_SearchTextInput.isClassOf(item.component)) {
+          return dropdown_core_objectSpread(dropdown_core_objectSpread({}, item), {}, {
+            // override to avoid losing focus when pressing a key
+            onClick: function onClick() {
+              _this4.handleClickFocus(0);
+
+              _this4.focusCurrentItem();
+            },
+            populatedProps: {
+              style: searchInputStyle,
+              // pass the current ref down to the input element
+              itemRef: _this4.state.itemRefs[focusIndex] ? _this4.state.itemRefs[focusIndex].ref : null
+            }
+          });
+        }
+
+        return dropdown_core_objectSpread(dropdown_core_objectSpread({}, item), {}, {
+          role: itemRole,
+          ref: item.focusable ? _this4.state.itemRefs[focusIndex] ? _this4.state.itemRefs[focusIndex].ref : null : null,
+          onClick: function onClick() {
+            _this4.handleClickFocus(focusIndex);
+
+            if (item.component.props.onClick) {
+              item.component.props.onClick();
+            }
+
+            if (item.populatedProps.onClick) {
+              item.populatedProps.onClick();
+            }
+          }
+        });
+      });
+    }
+  }, {
+    key: "renderItems",
+    value: function renderItems(outOfBoundaries) {
+      var _this$props6 = this.props,
+          dropdownStyle = _this$props6.dropdownStyle,
+          light = _this$props6.light,
+          openerElement = _this$props6.openerElement; // The dropdown width is at least the width of the opener.
+      // It's only used if the element exists in the DOM
+
+      var openerStyle = openerElement && window.getComputedStyle(openerElement);
+      var minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0; // preprocess items data to pass it to the renderer
+
+      var itemsList = this.parseItemsList();
+      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"] // Stop propagation to prevent the mouseup listener on the
+      // document from closing the menu.
+      , {
+        onMouseUp: this.handleDropdownMouseUp,
+        role: this.props.role,
+        style: [dropdown_core_styles.dropdown, light && dropdown_core_styles.light, outOfBoundaries && dropdown_core_styles.hidden, {
+          minWidth: minDropdownWidth
+        }, dropdownStyle]
+      }, /*#__PURE__*/external_react_["createElement"](dropdown_core_virtualized, {
+        data: itemsList,
+        listRef: this.listRef
+      }), this.maybeRenderNoResults());
+    }
+  }, {
+    key: "renderDropdown",
+    value: function renderDropdown() {
+      var _this5 = this;
+
+      var _this$props7 = this.props,
+          alignment = _this$props7.alignment,
+          openerElement = _this$props7.openerElement; // If we are in a modal, we find where we should be portalling the menu
+      // by using the helper function from the modal package on the opener
+      // element.
+      // If we are not in a modal, we use body as the location to portal to.
+
+      var modalHost = Object(wonder_blocks_modal_["maybeGetPortalMountedModalHostElement"])(openerElement) || document.querySelector("body");
+
+      if (modalHost) {
+        return external_react_dom_default.a.createPortal( /*#__PURE__*/external_react_["createElement"](external_react_popper_["Popper"], {
+          innerRef: function innerRef(node) {
+            if (node) {
+              _this5.popperElement = node;
+            }
+          },
+          referenceElement: this.props.openerElement,
+          placement: alignment === "left" ? "bottom-start" : "bottom-end",
+          modifiers: {
+            wbVisibility: visibility_modifier,
+            preventOverflow: {
+              boundariesElement: "viewport",
+              escapeWithReference: true
+            }
+          }
+        }, function (_ref) {
+          var placement = _ref.placement,
+              ref = _ref.ref,
+              style = _ref.style,
+              outOfBoundaries = _ref.outOfBoundaries;
+
+          // For some reason react-popper includes `pointerEvents: "none"`
+          // in the `style` it passes to us, but only when running the tests.
+          var _ = style.pointerEvents,
+              restStyle = dropdown_core_objectWithoutProperties(style, ["pointerEvents"]);
+
+          return /*#__PURE__*/external_react_["createElement"]("div", {
+            ref: ref,
+            style: restStyle,
+            "data-placement": placement
+          }, _this5.renderItems(outOfBoundaries));
+        }), modalHost);
+      }
+
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props8 = this.props,
+          open = _this$props8.open,
+          opener = _this$props8.opener,
+          style = _this$props8.style,
+          className = _this$props8.className;
+      return /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
+        style: [dropdown_core_styles.menuWrapper, style],
+        className: className
+      }, opener, open && this.renderDropdown());
+    }
+  }]);
+
+  return DropdownCore;
+}(external_react_["Component"]);
+
+dropdown_core_defineProperty(dropdown_core_DropdownCore, "defaultProps", {
+  alignment: "left",
+  initialFocusedIndex: 0,
+  labels: {
+    noResults: defaultLabels.noResults
+  },
+  light: false
+});
+
+var dropdown_core_styles = external_aphrodite_["StyleSheet"].create({
+  menuWrapper: {
+    width: "fit-content"
+  },
+  dropdown: {
+    backgroundColor: wonder_blocks_color_default.a.white,
+    borderRadius: 4,
+    paddingTop: wonder_blocks_spacing_default.a.xxxSmall_4,
+    paddingBottom: wonder_blocks_spacing_default.a.xxxSmall_4,
+    border: "solid 1px ".concat(wonder_blocks_color_default.a.offBlack16),
+    boxShadow: "0px 8px 8px 0px ".concat(Object(wonder_blocks_color_["fade"])(wonder_blocks_color_default.a.offBlack, 0.1)),
+    overflowY: "auto"
+  },
+  light: {
+    // Pretty much just remove the border
+    border: "none"
+  },
+  hidden: {
+    visibility: "hidden"
+  },
+  noResult: {
+    color: wonder_blocks_color_default.a.offBlack64,
+    alignSelf: "center",
+    marginTop: wonder_blocks_spacing_default.a.xxSmall_6
+  }
+});
+/* harmony default export */ var dropdown_core = (Object(wonder_blocks_timing_["withActionScheduler"])(dropdown_core_DropdownCore));
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-layout"
+var wonder_blocks_layout_ = __webpack_require__(17);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/action-menu-opener-core.js
+function action_menu_opener_core_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { action_menu_opener_core_typeof = function _typeof(obj) { return typeof obj; }; } else { action_menu_opener_core_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return action_menu_opener_core_typeof(obj); }
+
+function action_menu_opener_core_extends() { action_menu_opener_core_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 action_menu_opener_core_extends.apply(this, arguments); }
+
+function action_menu_opener_core_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = action_menu_opener_core_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 action_menu_opener_core_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 action_menu_opener_core_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function action_menu_opener_core_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 action_menu_opener_core_createClass(Constructor, protoProps, staticProps) { if (protoProps) action_menu_opener_core_defineProperties(Constructor.prototype, protoProps); if (staticProps) action_menu_opener_core_defineProperties(Constructor, staticProps); return Constructor; }
+
+function action_menu_opener_core_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) action_menu_opener_core_setPrototypeOf(subClass, superClass); }
+
+function action_menu_opener_core_setPrototypeOf(o, p) { action_menu_opener_core_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return action_menu_opener_core_setPrototypeOf(o, p); }
+
+function action_menu_opener_core_createSuper(Derived) { var hasNativeReflectConstruct = action_menu_opener_core_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = action_menu_opener_core_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = action_menu_opener_core_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return action_menu_opener_core_possibleConstructorReturn(this, result); }; }
+
+function action_menu_opener_core_possibleConstructorReturn(self, call) { if (call && (action_menu_opener_core_typeof(call) === "object" || typeof call === "function")) { return call; } return action_menu_opener_core_assertThisInitialized(self); }
+
+function action_menu_opener_core_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function action_menu_opener_core_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 action_menu_opener_core_getPrototypeOf(o) { action_menu_opener_core_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return action_menu_opener_core_getPrototypeOf(o); }
+
+function action_menu_opener_core_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; }
+
+
+
+
+
+
+
+
+
+
+
+var action_menu_opener_core_StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
+/**
+ * Although this component shares a lot with ButtonCore there are a couple
+ * of differences:
+ * - the down caret icon appears on the right instead of the left
+ * - the down caret icon is smaller that the one that would be used by ButtonCore
+ */
+
+var action_menu_opener_core_ActionMenuOpenerCore = /*#__PURE__*/function (_React$Component) {
+  action_menu_opener_core_inherits(ActionMenuOpenerCore, _React$Component);
+
+  var _super = action_menu_opener_core_createSuper(ActionMenuOpenerCore);
+
+  function ActionMenuOpenerCore() {
+    action_menu_opener_core_classCallCheck(this, ActionMenuOpenerCore);
+
+    return _super.apply(this, arguments);
+  }
+
+  action_menu_opener_core_createClass(ActionMenuOpenerCore, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          disabledProp = _this$props.disabled,
+          focused = _this$props.focused,
+          hovered = _this$props.hovered,
+          pressed = _this$props.pressed,
+          _ = _this$props.waiting,
+          testId = _this$props.testId,
+          opened = _this$props.opened,
+          ariaLabel = _this$props["aria-label"],
+          restProps = action_menu_opener_core_objectWithoutProperties(_this$props, ["children", "disabled", "focused", "hovered", "pressed", "waiting", "testId", "opened", "aria-label"]);
+
+      var buttonColor = wonder_blocks_color_["SemanticColor"].controlDefault;
+
+      var buttonStyles = action_menu_opener_core_generateStyles(buttonColor);
+
+      var disabled = disabledProp;
+      var defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && pressed && buttonStyles.active];
+      var label = /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelLarge"], {
+        style: sharedStyles.text
+      }, children);
+      return /*#__PURE__*/external_react_["createElement"](action_menu_opener_core_StyledButton, action_menu_opener_core_extends({
+        "aria-expanded": opened ? "true" : "false",
+        "aria-haspopup": "menu",
+        "aria-label": ariaLabel,
+        disabled: disabled,
+        style: defaultStyle,
+        type: "button"
+      }, restProps, {
+        "data-test-id": testId
+      }), /*#__PURE__*/external_react_["createElement"](wonder_blocks_core_["View"], {
+        style: !disabled && (hovered || focused) && buttonStyles.focus
+      }, label), /*#__PURE__*/external_react_["createElement"](wonder_blocks_layout_["Strut"], {
+        size: wonder_blocks_spacing_default.a.xxxSmall_4
+      }), /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
+        size: "small",
+        color: "currentColor",
+        icon: wonder_blocks_icon_["icons"].caretDown
+      }));
+    }
+  }]);
+
+  return ActionMenuOpenerCore;
+}(external_react_["Component"]);
+
+action_menu_opener_core_defineProperty(action_menu_opener_core_ActionMenuOpenerCore, "contextTypes", {
+  router: external_prop_types_["any"]
+});
+
+
+var sharedStyles = external_aphrodite_["StyleSheet"].create({
+  shared: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: DROPDOWN_ITEM_HEIGHT,
+    border: "none",
+    borderRadius: wonder_blocks_spacing_default.a.xxxSmall_4,
+    cursor: "pointer",
+    outline: "none",
+    textDecoration: "none",
+    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",
+    ":focus": {
+      // Mobile: Removes a blue highlight style shown when the user clicks a button
+      WebkitTapHighlightColor: "rgba(0,0,0,0)"
+    }
+  },
+  disabled: {
+    cursor: "auto"
+  },
+  small: {
+    height: wonder_blocks_spacing_default.a.xLarge_32
+  },
+  text: {
+    textAlign: "left",
+    display: "inline-block",
+    alignItems: "center",
+    fontWeight: "bold",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
+
+  },
+  hiddenText: {
+    visibility: "hidden"
+  },
+  spinner: {
+    position: "absolute"
+  }
+});
+var action_menu_opener_core_styles = {};
+
+var action_menu_opener_core_generateStyles = function _generateStyles(color) {
+  var buttonType = color;
+
+  if (action_menu_opener_core_styles[buttonType]) {
+    return action_menu_opener_core_styles[buttonType];
+  }
+
+  var offBlack32 = wonder_blocks_color_default.a.offBlack32;
+  var activeColor = Object(wonder_blocks_color_["mix"])(offBlack32, color);
+  var newStyles = {};
+  newStyles = {
+    default: {
+      background: "none",
+      color: color
+    },
+    focus: {
+      ":after": {
+        content: "''",
+        position: "absolute",
+        height: 2,
+        left: 0,
+        right: 0,
+        bottom: -1,
+        background: "currentColor",
+        borderRadius: 2
+      }
+    },
+    active: {
+      color: activeColor
+    },
+    disabled: {
+      color: offBlack32,
+      cursor: "default"
+    }
+  };
+  action_menu_opener_core_styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
+  return action_menu_opener_core_styles[buttonType];
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/action-menu.js
+function action_menu_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { action_menu_typeof = function _typeof(obj) { return typeof obj; }; } else { action_menu_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return action_menu_typeof(obj); }
+
+function action_menu_extends() { action_menu_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 action_menu_extends.apply(this, arguments); }
+
+function action_menu_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = action_menu_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 action_menu_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 action_menu_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 action_menu_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { action_menu_ownKeys(Object(source), true).forEach(function (key) { action_menu_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { action_menu_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function action_menu_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function action_menu_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 action_menu_createClass(Constructor, protoProps, staticProps) { if (protoProps) action_menu_defineProperties(Constructor.prototype, protoProps); if (staticProps) action_menu_defineProperties(Constructor, staticProps); return Constructor; }
+
+function action_menu_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) action_menu_setPrototypeOf(subClass, superClass); }
+
+function action_menu_setPrototypeOf(o, p) { action_menu_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return action_menu_setPrototypeOf(o, p); }
+
+function action_menu_createSuper(Derived) { var hasNativeReflectConstruct = action_menu_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = action_menu_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = action_menu_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return action_menu_possibleConstructorReturn(this, result); }; }
+
+function action_menu_possibleConstructorReturn(self, call) { if (call && (action_menu_typeof(call) === "object" || typeof call === "function")) { return call; } return action_menu_assertThisInitialized(self); }
+
+function action_menu_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function action_menu_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 action_menu_getPrototypeOf(o) { action_menu_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return action_menu_getPrototypeOf(o); }
+
+function action_menu_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; }
+
+
+
+
+
+
+
+
+
+
+/**
+ * A menu that consists of various types of items.
+ */
+var action_menu_ActionMenu = /*#__PURE__*/function (_React$Component) {
+  action_menu_inherits(ActionMenu, _React$Component);
+
+  var _super = action_menu_createSuper(ActionMenu);
+
+  function ActionMenu() {
+    var _this;
+
+    action_menu_classCallCheck(this, ActionMenu);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    action_menu_defineProperty(action_menu_assertThisInitialized(_this), "openerElement", void 0);
+
+    action_menu_defineProperty(action_menu_assertThisInitialized(_this), "state", {
+      opened: false
+    });
+
+    action_menu_defineProperty(action_menu_assertThisInitialized(_this), "handleItemSelected", function () {
+      // close menu
+      _this.handleOpenChanged(false); // Bring focus back to the opener element.
+
+
+      if (_this.openerElement) {
+        _this.openerElement.focus();
+      }
+    });
+
+    action_menu_defineProperty(action_menu_assertThisInitialized(_this), "handleOpenChanged", function (opened) {
+      _this.setState({
+        opened: opened
+      });
+
+      if (_this.props.onToggle) {
+        _this.props.onToggle(opened);
+      }
+    });
+
+    action_menu_defineProperty(action_menu_assertThisInitialized(_this), "handleOptionSelected", function (selectedValue) {
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          selectedValues = _this$props.selectedValues; // If either of these are not defined, return.
+
+      if (!onChange || !selectedValues) {
+        return;
+      }
+
+      if (selectedValues.includes(selectedValue)) {
+        var index = selectedValues.indexOf(selectedValue);
+        var updatedSelection = [].concat(_toConsumableArray(selectedValues.slice(0, index)), _toConsumableArray(selectedValues.slice(index + 1)));
+        onChange(updatedSelection);
+      } else {
+        // Item was newly selected
+        onChange([].concat(_toConsumableArray(selectedValues), [selectedValue]));
+      }
+
+      _this.handleItemSelected();
+    });
+
+    action_menu_defineProperty(action_menu_assertThisInitialized(_this), "handleOpenerRef", function (node) {
+      _this.openerElement = external_react_dom_default.a.findDOMNode(node);
+    });
+
+    action_menu_defineProperty(action_menu_assertThisInitialized(_this), "handleClick", function (e) {
+      _this.handleOpenChanged(!_this.state.opened);
+    });
+
+    return _this;
+  }
+
+  action_menu_createClass(ActionMenu, [{
+    key: "getMenuItems",
+    value: function getMenuItems() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          selectedValues = _this$props2.selectedValues;
+      var allChildren = external_react_["Children"].toArray(children).filter(Boolean); // verify if there's at least one OptionItem element to indent the
+      // possible Action items
+
+      var isOptionItemIncluded = allChildren.some(function (item) {
+        return option_item_OptionItem.isClassOf(item);
+      });
+      return allChildren.map(function (item) {
+        var _item$props = item.props,
+            value = _item$props.value,
+            disabled = _item$props.disabled;
+        var itemObject = {
+          component: item,
+          focusable: action_item_ActionItem.isClassOf(item) || option_item_OptionItem.isClassOf(item) ? !disabled : false,
+          populatedProps: {}
+        };
+
+        if (action_item_ActionItem.isClassOf(item)) {
+          return action_menu_objectSpread(action_menu_objectSpread({}, itemObject), {}, {
+            populatedProps: {
+              indent: isOptionItemIncluded,
+              onClick: _this2.handleItemSelected
+            }
+          });
+        } else if (option_item_OptionItem.isClassOf(item)) {
+          return action_menu_objectSpread(action_menu_objectSpread({}, itemObject), {}, {
+            populatedProps: {
+              onToggle: _this2.handleOptionSelected,
+              selected: selectedValues ? selectedValues.includes(value) : false,
+              variant: "check"
+            }
+          });
+        } else {
+          return itemObject;
+        }
+      });
+    }
+  }, {
+    key: "renderOpener",
+    value: function renderOpener(numItems) {
+      var _this$props3 = this.props,
+          disabled = _this$props3.disabled,
+          menuText = _this$props3.menuText,
+          opened = _this$props3.opened,
+          opener = _this$props3.opener,
+          testId = _this$props3.testId;
+      return /*#__PURE__*/external_react_["createElement"](dropdown_opener, {
+        onClick: this.handleClick,
+        disabled: numItems === 0 || disabled,
+        text: menuText,
+        ref: this.handleOpenerRef,
+        testId: opener ? undefined : testId
+      }, opener ? opener : function (openerProps) {
+        var text = openerProps.text,
+            eventState = action_menu_objectWithoutProperties(openerProps, ["text"]);
+
+        return /*#__PURE__*/external_react_["createElement"](action_menu_opener_core_ActionMenuOpenerCore, action_menu_extends({}, eventState, {
+          disabled: disabled,
+          opened: !!opened,
+          testId: testId
+        }), menuText);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+          alignment = _this$props4.alignment,
+          dropdownStyle = _this$props4.dropdownStyle,
+          style = _this$props4.style,
+          className = _this$props4.className;
+      var items = this.getMenuItems();
+      var dropdownOpener = this.renderOpener(items.length);
+      return /*#__PURE__*/external_react_["createElement"](dropdown_core, {
+        role: "menu",
+        style: style,
+        className: className,
+        opener: dropdownOpener,
+        alignment: alignment,
+        open: this.state.opened,
+        items: items,
+        openerElement: this.openerElement,
+        onOpenChanged: this.handleOpenChanged,
+        dropdownStyle: [action_menu_styles.menuTopSpace, dropdownStyle]
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+
+    /**
+     * Used to sync the `opened` state when this component acts as a controlled
+     * component
+     */
+    value: function getDerivedStateFromProps(props, state) {
+      return {
+        opened: typeof props.opened === "boolean" ? props.opened : state.opened
+      };
+    }
+  }]);
+
+  return ActionMenu;
+}(external_react_["Component"]);
+
+action_menu_defineProperty(action_menu_ActionMenu, "defaultProps", {
+  alignment: "left",
+  disabled: false
+});
+
+
+var action_menu_styles = external_aphrodite_["StyleSheet"].create({
+  caret: {
+    marginLeft: 4
+  },
+  // The design calls for additional offset around the opener.
+  opener: {
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  // This is to adjust the space between the menu and the opener.
+  menuTopSpace: {
+    top: -4
+  }
+});
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/select-opener.js
+function select_opener_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { select_opener_typeof = function _typeof(obj) { return typeof obj; }; } else { select_opener_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return select_opener_typeof(obj); }
+
+function select_opener_extends() { select_opener_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 select_opener_extends.apply(this, arguments); }
+
+function select_opener_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = select_opener_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 select_opener_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 select_opener_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function select_opener_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 select_opener_createClass(Constructor, protoProps, staticProps) { if (protoProps) select_opener_defineProperties(Constructor.prototype, protoProps); if (staticProps) select_opener_defineProperties(Constructor, staticProps); return Constructor; }
+
+function select_opener_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) select_opener_setPrototypeOf(subClass, superClass); }
+
+function select_opener_setPrototypeOf(o, p) { select_opener_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return select_opener_setPrototypeOf(o, p); }
+
+function select_opener_createSuper(Derived) { var hasNativeReflectConstruct = select_opener_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = select_opener_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = select_opener_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return select_opener_possibleConstructorReturn(this, result); }; }
+
+function select_opener_possibleConstructorReturn(self, call) { if (call && (select_opener_typeof(call) === "object" || typeof call === "function")) { return call; } return select_opener_assertThisInitialized(self); }
+
+function select_opener_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function select_opener_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 select_opener_getPrototypeOf(o) { select_opener_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return select_opener_getPrototypeOf(o); }
+
+function select_opener_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; }
+
+
+
+
+
+
+
+
+
+
+
+var select_opener_StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
+var select_opener_blue = wonder_blocks_color_default.a.blue,
+    select_opener_white = wonder_blocks_color_default.a.white,
+    white50 = wonder_blocks_color_default.a.white50,
+    select_opener_offBlack = wonder_blocks_color_default.a.offBlack,
+    select_opener_offBlack16 = wonder_blocks_color_default.a.offBlack16,
+    select_opener_offBlack32 = wonder_blocks_color_default.a.offBlack32,
+    offBlack64 = wonder_blocks_color_default.a.offBlack64;
+
+/**
+ * An opener that opens select boxes.
+ */
+var select_opener_SelectOpener = /*#__PURE__*/function (_React$Component) {
+  select_opener_inherits(SelectOpener, _React$Component);
+
+  var _super = select_opener_createSuper(SelectOpener);
+
+  function SelectOpener() {
+    var _this;
+
+    select_opener_classCallCheck(this, SelectOpener);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    select_opener_defineProperty(select_opener_assertThisInitialized(_this), "handleClick", function (e) {
+      var open = _this.props.open;
+
+      _this.props.onOpenChanged(!open);
+    });
+
+    return _this;
+  }
+
+  select_opener_createClass(SelectOpener, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          disabled = _this$props.disabled,
+          id = _this$props.id,
+          isPlaceholder = _this$props.isPlaceholder,
+          light = _this$props.light,
+          open = _this$props.open,
+          testId = _this$props.testId,
+          onOpenChanged = _this$props.onOpenChanged,
+          sharedProps = select_opener_objectWithoutProperties(_this$props, ["children", "disabled", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"]);
+
+      var ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])(this.context.router);
+      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+        disabled: disabled,
+        onClick: this.handleClick
+      }, function (state, childrenProps) {
+        var stateStyles = select_opener_generateStyles(light, isPlaceholder);
+
+        var hovered = state.hovered,
+            focused = state.focused,
+            pressed = state.pressed; // The icon colors are kind of fickle. This is just logic
+        // based on the zeplin design.
+
+        var iconColor = light ? disabled || pressed ? "currentColor" : select_opener_white : disabled ? select_opener_offBlack32 : offBlack64;
+        var style = [select_opener_styles.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
+        return /*#__PURE__*/external_react_["createElement"](select_opener_StyledButton, select_opener_extends({}, sharedProps, {
+          "aria-expanded": open ? "true" : "false",
+          "aria-haspopup": "listbox",
+          "data-test-id": testId,
+          disabled: disabled,
+          id: id,
+          style: style,
+          type: "button"
+        }, childrenProps), /*#__PURE__*/external_react_["createElement"](wonder_blocks_typography_["LabelMedium"], {
+          style: select_opener_styles.text
+        }, children), /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
+          icon: wonder_blocks_icon_["icons"].caretDown,
+          color: iconColor,
+          size: "small",
+          style: select_opener_styles.caret,
+          "aria-hidden": "true"
+        }));
+      });
+    }
+  }]);
+
+  return SelectOpener;
+}(external_react_["Component"]);
+
+select_opener_defineProperty(select_opener_SelectOpener, "contextTypes", {
+  router: external_prop_types_["any"]
+});
+
+select_opener_defineProperty(select_opener_SelectOpener, "defaultProps", {
+  disabled: false,
+  light: false,
+  isPlaceholder: false
+});
+
+
+var buttonRadius = 4;
+var select_opener_styles = external_aphrodite_["StyleSheet"].create({
+  // TODO: Dedupe with Button styles
+  shared: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    color: select_opener_offBlack,
+    height: DROPDOWN_ITEM_HEIGHT,
+    // This asymmetry arises from the Icon on the right side, which has
+    // extra padding built in. To have the component look more balanced,
+    // we need to take off some paddingRight here.
+    paddingLeft: 16,
+    paddingRight: 12,
+    borderWidth: 0,
+    borderRadius: buttonRadius,
+    borderStyle: "solid",
+    outline: "none",
+    textDecoration: "none",
+    boxSizing: "border-box",
+    whiteSpace: "nowrap",
+    // 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"
+  },
+  text: {
+    marginRight: wonder_blocks_spacing_default.a.xSmall_8,
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  caret: {
+    minWidth: 16
+  }
+}); // These values are default padding (16 and 12) minus 1, because
+// changing the borderWidth to 2 messes up the button width
+// and causes it to move a couple pixels. This fixes that.
+
+var adjustedPaddingLeft = 16 - 1;
+var adjustedPaddingRight = 12 - 1;
+var select_opener_stateStyles = {};
+
+var select_opener_generateStyles = function _generateStyles(light, placeholder) {
+  // "hash" the parameters
+  var styleKey = "".concat(String(light), "-").concat(String(placeholder));
+
+  if (select_opener_stateStyles[styleKey]) {
+    return select_opener_stateStyles[styleKey];
+  }
+
+  var newStyles = {};
+
+  if (light) {
+    newStyles = {
+      default: {
+        backgroundColor: "transparent",
+        color: placeholder ? white50 : select_opener_white,
+        borderColor: white50,
+        borderWidth: 1
+      },
+      focus: {
+        borderColor: select_opener_white,
+        borderWidth: 2,
+        paddingLeft: adjustedPaddingLeft,
+        paddingRight: adjustedPaddingRight
+      },
+      active: {
+        paddingLeft: adjustedPaddingLeft,
+        paddingRight: adjustedPaddingRight,
+        borderColor: Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(select_opener_blue, 0.32), select_opener_white),
+        borderWidth: 2,
+        color: placeholder ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(select_opener_white, 0.32), select_opener_blue) : Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(select_opener_blue, 0.32), select_opener_white),
+        backgroundColor: Object(wonder_blocks_color_["mix"])(select_opener_offBlack32, select_opener_blue)
+      },
+      disabled: {
+        borderColor: Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(select_opener_white, 0.32), select_opener_blue),
+        color: Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(select_opener_white, 0.32), select_opener_blue),
+        cursor: "auto"
+      }
+    };
+  } else {
+    newStyles = {
+      default: {
+        backgroundColor: select_opener_white,
+        borderColor: select_opener_offBlack16,
+        borderWidth: 1,
+        color: placeholder ? offBlack64 : select_opener_offBlack
+      },
+      focus: {
+        borderColor: select_opener_blue,
+        borderWidth: 2,
+        paddingLeft: adjustedPaddingLeft,
+        paddingRight: adjustedPaddingRight
+      },
+      active: {
+        background: Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(select_opener_blue, 0.32), select_opener_white),
+        borderColor: Object(wonder_blocks_color_["mix"])(select_opener_offBlack32, select_opener_blue),
+        borderWidth: 2,
+        paddingLeft: adjustedPaddingLeft,
+        paddingRight: adjustedPaddingRight
+      },
+      disabled: {
+        backgroundColor: "transparent",
+        borderColor: select_opener_offBlack16,
+        color: offBlack64,
+        cursor: "auto"
+      }
+    };
+  }
+
+  select_opener_stateStyles[styleKey] = external_aphrodite_["StyleSheet"].create(newStyles);
+  return select_opener_stateStyles[styleKey];
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/single-select.js
+function single_select_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { single_select_typeof = function _typeof(obj) { return typeof obj; }; } else { single_select_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return single_select_typeof(obj); }
+
+function single_select_toConsumableArray(arr) { return single_select_arrayWithoutHoles(arr) || single_select_iterableToArray(arr) || single_select_unsupportedIterableToArray(arr) || single_select_nonIterableSpread(); }
+
+function single_select_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function single_select_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return single_select_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return single_select_arrayLikeToArray(o, minLen); }
+
+function single_select_iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function single_select_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return single_select_arrayLikeToArray(arr); }
+
+function single_select_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function single_select_extends() { single_select_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 single_select_extends.apply(this, arguments); }
+
+function single_select_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = single_select_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 single_select_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 single_select_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function single_select_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 single_select_createClass(Constructor, protoProps, staticProps) { if (protoProps) single_select_defineProperties(Constructor.prototype, protoProps); if (staticProps) single_select_defineProperties(Constructor, staticProps); return Constructor; }
+
+function single_select_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) single_select_setPrototypeOf(subClass, superClass); }
+
+function single_select_setPrototypeOf(o, p) { single_select_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return single_select_setPrototypeOf(o, p); }
+
+function single_select_createSuper(Derived) { var hasNativeReflectConstruct = single_select_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = single_select_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = single_select_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return single_select_possibleConstructorReturn(this, result); }; }
+
+function single_select_possibleConstructorReturn(self, call) { if (call && (single_select_typeof(call) === "object" || typeof call === "function")) { return call; } return single_select_assertThisInitialized(self); }
+
+function single_select_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function single_select_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 single_select_getPrototypeOf(o) { single_select_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return single_select_getPrototypeOf(o); }
+
+function single_select_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; }
+
+
+
+
+
+
+
+
+
+/**
+ * The single select allows the selection of one item. Clients are responsible
+ * for keeping track of the selected item in the select.
+ *
+ * The single select dropdown closes after the selection of an item. If the same
+ * item is selected, there is no callback.
+ *
+ * *NOTE:* The component automatically uses
+ * [react-window](https://github.com/bvaughn/react-window) to improve
+ * performance when rendering these elements and is capable of handling many
+ * hundreds of items without performance problems.
+ *
+ */
+var single_select_SingleSelect = /*#__PURE__*/function (_React$Component) {
+  single_select_inherits(SingleSelect, _React$Component);
+
+  var _super = single_select_createSuper(SingleSelect);
+
+  function SingleSelect(props) {
+    var _this;
+
+    single_select_classCallCheck(this, SingleSelect);
+
+    _this = _super.call(this, props);
+
+    single_select_defineProperty(single_select_assertThisInitialized(_this), "selectedIndex", void 0);
+
+    single_select_defineProperty(single_select_assertThisInitialized(_this), "handleOpenChanged", function (opened) {
+      _this.setState({
+        open: opened,
+        searchText: ""
+      });
+
+      if (_this.props.onToggle) {
+        _this.props.onToggle(opened);
+      }
+    });
+
+    single_select_defineProperty(single_select_assertThisInitialized(_this), "handleToggle", function (selectedValue) {
+      // Call callback if selection changed.
+      if (selectedValue !== _this.props.selectedValue) {
+        _this.props.onChange(selectedValue);
+      } // Bring focus back to the opener element.
+
+
+      if (_this.state.open && _this.state.openerElement) {
+        _this.state.openerElement.focus();
+      }
+
+      _this.setState({
+        open: false // close the menu upon selection
+
+      });
+
+      if (_this.props.onToggle) {
+        _this.props.onToggle(false);
+      }
+    });
+
+    single_select_defineProperty(single_select_assertThisInitialized(_this), "mapOptionItemsToDropdownItems", function (children) {
+      // Figure out which index should receive focus when this select opens
+      // Needs to exclude counting items that are disabled
+      var indexCounter = 0;
+      _this.selectedIndex = 0;
+      return children.map(function (option) {
+        var selectedValue = _this.props.selectedValue;
+        var _option$props = option.props,
+            disabled = _option$props.disabled,
+            value = _option$props.value;
+        var selected = selectedValue === value;
+
+        if (!disabled) {
+          indexCounter += 1;
+        }
+
+        if (selected) {
+          _this.selectedIndex = indexCounter;
+        }
+
+        return {
+          component: option,
+          focusable: !disabled,
+          populatedProps: {
+            onToggle: _this.handleToggle,
+            selected: selected,
+            variant: "check"
+          }
+        };
+      });
+    });
+
+    single_select_defineProperty(single_select_assertThisInitialized(_this), "handleSearchTextChanged", function (searchText) {
+      _this.setState({
+        searchText: searchText
+      });
+    });
+
+    single_select_defineProperty(single_select_assertThisInitialized(_this), "handleOpenerRef", function (node) {
+      var openerElement = external_react_dom_default.a.findDOMNode(node);
+
+      _this.setState({
+        openerElement: openerElement
+      });
+    });
+
+    single_select_defineProperty(single_select_assertThisInitialized(_this), "handleClick", function (e) {
+      _this.handleOpenChanged(!_this.state.open);
+    });
+
+    _this.selectedIndex = 0;
+    _this.state = {
+      open: false,
+      searchText: "",
+      openerElement: null
+    };
+    return _this;
+  }
+  /**
+   * Used to sync the `opened` state when this component acts as a controlled
+   * component
+   */
+
+
+  single_select_createClass(SingleSelect, [{
+    key: "filterChildren",
+    value: function filterChildren(children) {
+      var searchText = this.state.searchText;
+      var lowercasedSearchText = searchText.toLowerCase(); // Filter the children with the searchText if any.
+
+      return children.filter(function (_ref) {
+        var props = _ref.props;
+        return !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1;
+      });
+    }
+  }, {
+    key: "getMenuItems",
+    value: function getMenuItems(children) {
+      var isFilterable = this.props.isFilterable; // If it's not filterable, no need to do any extra besides mapping the
+      // option items to dropdown items.
+
+      return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
+    }
+  }, {
+    key: "getSearchField",
+    value: function getSearchField() {
+      if (!this.props.isFilterable) {
+        return null;
+      }
+
+      return {
+        component: /*#__PURE__*/external_react_["createElement"](search_text_input_SearchTextInput, {
+          key: "search-text-input",
+          onChange: this.handleSearchTextChanged,
+          searchText: this.state.searchText,
+          labels: {
+            clearSearch: defaultLabels.clearSearch,
+            filter: defaultLabels.filter
+          }
+        }),
+        focusable: true,
+        populatedProps: {}
+      };
+    }
+  }, {
+    key: "renderOpener",
+    value: function renderOpener(numItems) {
+      var _this$props = this.props,
+          children = _this$props.children,
+          disabled = _this$props.disabled,
+          id = _this$props.id,
+          light = _this$props.light,
+          opener = _this$props.opener,
+          placeholder = _this$props.placeholder,
+          selectedValue = _this$props.selectedValue,
+          testId = _this$props.testId,
+          alignment = _this$props.alignment,
+          dropdownStyle = _this$props.dropdownStyle,
+          isFilterable = _this$props.isFilterable,
+          onChange = _this$props.onChange,
+          onToggle = _this$props.onToggle,
+          opened = _this$props.opened,
+          style = _this$props.style,
+          className = _this$props.className,
+          sharedProps = single_select_objectWithoutProperties(_this$props, ["children", "disabled", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "dropdownStyle", "isFilterable", "onChange", "onToggle", "opened", "style", "className"]);
+
+      var selectedItem = external_react_["Children"].toArray(children).find(function (option) {
+        return option.props.value === selectedValue;
+      }); // If nothing is selected, or if the selectedValue doesn't match any
+      // item in the menu, use the placeholder.
+
+      var menuText = selectedItem ? selectedItem.props.label : placeholder;
+      var dropdownOpener = opener ? /*#__PURE__*/external_react_["createElement"](dropdown_opener, {
+        onClick: this.handleClick,
+        disabled: numItems === 0 || disabled,
+        ref: this.handleOpenerRef,
+        text: menuText
+      }, opener) : /*#__PURE__*/external_react_["createElement"](select_opener_SelectOpener, single_select_extends({}, sharedProps, {
+        disabled: numItems === 0 || disabled,
+        id: id,
+        isPlaceholder: !selectedItem,
+        light: light,
+        onOpenChanged: this.handleOpenChanged,
+        open: this.state.open,
+        ref: this.handleOpenerRef,
+        testId: testId
+      }), menuText);
+      return dropdownOpener;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          alignment = _this$props2.alignment,
+          children = _this$props2.children,
+          dropdownStyle = _this$props2.dropdownStyle,
+          isFilterable = _this$props2.isFilterable,
+          light = _this$props2.light,
+          style = _this$props2.style,
+          className = _this$props2.className;
+      var searchText = this.state.searchText;
+      var allChildren = external_react_["Children"].toArray(children).filter(Boolean);
+      var filteredItems = this.getMenuItems(allChildren);
+      var opener = this.renderOpener(allChildren.length);
+      var searchField = this.getSearchField();
+      var items = searchField ? [searchField].concat(single_select_toConsumableArray(filteredItems)) : filteredItems;
+      return /*#__PURE__*/external_react_["createElement"](dropdown_core, {
+        role: "listbox",
+        alignment: alignment,
+        dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
+        initialFocusedIndex: this.selectedIndex,
+        items: items,
+        light: light,
+        onOpenChanged: this.handleOpenChanged,
+        open: this.state.open,
+        opener: opener,
+        openerElement: this.state.openerElement,
+        style: style,
+        className: className,
+        onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
+        searchText: isFilterable ? searchText : ""
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      return {
+        open: typeof props.opened === "boolean" ? props.opened : state.open
+      };
+    }
+  }]);
+
+  return SingleSelect;
+}(external_react_["Component"]);
+
+single_select_defineProperty(single_select_SingleSelect, "defaultProps", {
+  alignment: "left",
+  disabled: false,
+  light: false
+});
+
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/components/multi-select.js
+function multi_select_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { multi_select_typeof = function _typeof(obj) { return typeof obj; }; } else { multi_select_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return multi_select_typeof(obj); }
+
+function multi_select_extends() { multi_select_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 multi_select_extends.apply(this, arguments); }
+
+function multi_select_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = multi_select_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 multi_select_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 _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = multi_select_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (_e) { function e(_x) { return _e.apply(this, arguments); } e.toString = function () { return _e.toString(); }; return e; }(function (e) { throw e; }), f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function (_e2) { function e(_x2) { return _e2.apply(this, arguments); } e.toString = function () { return _e2.toString(); }; return e; }(function (e) { didErr = true; err = e; }), f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function multi_select_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 multi_select_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { multi_select_ownKeys(Object(source), true).forEach(function (key) { multi_select_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { multi_select_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function multi_select_toConsumableArray(arr) { return multi_select_arrayWithoutHoles(arr) || multi_select_iterableToArray(arr) || multi_select_unsupportedIterableToArray(arr) || multi_select_nonIterableSpread(); }
+
+function multi_select_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function multi_select_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return multi_select_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return multi_select_arrayLikeToArray(o, minLen); }
+
+function multi_select_iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function multi_select_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return multi_select_arrayLikeToArray(arr); }
+
+function multi_select_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function multi_select_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function multi_select_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 multi_select_createClass(Constructor, protoProps, staticProps) { if (protoProps) multi_select_defineProperties(Constructor.prototype, protoProps); if (staticProps) multi_select_defineProperties(Constructor, staticProps); return Constructor; }
+
+function multi_select_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) multi_select_setPrototypeOf(subClass, superClass); }
+
+function multi_select_setPrototypeOf(o, p) { multi_select_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return multi_select_setPrototypeOf(o, p); }
+
+function multi_select_createSuper(Derived) { var hasNativeReflectConstruct = multi_select_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = multi_select_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = multi_select_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return multi_select_possibleConstructorReturn(this, result); }; }
+
+function multi_select_possibleConstructorReturn(self, call) { if (call && (multi_select_typeof(call) === "object" || typeof call === "function")) { return call; } return multi_select_assertThisInitialized(self); }
+
+function multi_select_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function multi_select_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 multi_select_getPrototypeOf(o) { multi_select_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return multi_select_getPrototypeOf(o); }
+
+function multi_select_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; }
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * A dropdown that consists of multiple selection items. This select allows
+ * multiple options to be selected. Clients are responsible for keeping track
+ * of the selected items.
+ *
+ * The multi select stays open until closed by the user. The onChange callback
+ * happens every time there is a change in the selection of the items.
+ */
+var multi_select_MultiSelect = /*#__PURE__*/function (_React$Component) {
+  multi_select_inherits(MultiSelect, _React$Component);
+
+  var _super = multi_select_createSuper(MultiSelect);
+
+  function MultiSelect(props) {
+    var _this;
+
+    multi_select_classCallCheck(this, MultiSelect);
+
+    _this = _super.call(this, props);
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "labels", void 0);
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "handleOpenChanged", function (opened) {
+      _this.setState({
+        open: opened,
+        searchText: "",
+        lastSelectedValues: _this.props.selectedValues
+      });
+
+      if (_this.props.onToggle) {
+        _this.props.onToggle(opened);
+      }
+    });
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "handleToggle", function (selectedValue) {
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          selectedValues = _this$props.selectedValues;
+
+      if (selectedValues.includes(selectedValue)) {
+        var index = selectedValues.indexOf(selectedValue);
+        var updatedSelection = [].concat(multi_select_toConsumableArray(selectedValues.slice(0, index)), multi_select_toConsumableArray(selectedValues.slice(index + 1)));
+        onChange(updatedSelection);
+      } else {
+        // Item was newly selected
+        onChange([].concat(multi_select_toConsumableArray(selectedValues), [selectedValue]));
+      }
+    });
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "handleSelectAll", function () {
+      var _this$props2 = _this.props,
+          children = _this$props2.children,
+          onChange = _this$props2.onChange;
+      var selected = external_react_["Children"].toArray(children).filter(Boolean).map(function (option) {
+        return option.props.value;
+      });
+      onChange(selected);
+    });
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "handleSelectNone", function () {
+      var onChange = _this.props.onChange;
+      onChange([]);
+    });
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "mapOptionItemToDropdownItem", function (option) {
+      var selectedValues = _this.props.selectedValues;
+      var _option$props = option.props,
+          disabled = _option$props.disabled,
+          value = _option$props.value;
+      return {
+        component: option,
+        focusable: !disabled,
+        populatedProps: {
+          onToggle: _this.handleToggle,
+          selected: selectedValues.includes(value),
+          variant: "checkbox"
+        }
+      };
+    });
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "handleOpenerRef", function (node) {
+      var openerElement = external_react_dom_default.a.findDOMNode(node);
+
+      _this.setState({
+        openerElement: openerElement
+      });
+    });
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "handleSearchTextChanged", function (searchText) {
+      _this.setState({
+        searchText: searchText
+      });
+    });
+
+    multi_select_defineProperty(multi_select_assertThisInitialized(_this), "handleClick", function (e) {
+      _this.handleOpenChanged(!_this.state.open);
+    });
+
+    _this.state = {
+      open: false,
+      searchText: "",
+      lastSelectedValues: [],
+      // merge custom labels with the default ones
+      labels: multi_select_objectSpread(multi_select_objectSpread({}, defaultLabels), props.labels),
+      openerElement: null
+    }; // merge custom labels with the default ones
+
+    _this.labels = multi_select_objectSpread(multi_select_objectSpread({}, defaultLabels), props.labels);
+    return _this;
+  }
+  /**
+   * Used to sync the `opened` state when this component acts as a controlled
+   * component
+   */
+
+
+  multi_select_createClass(MultiSelect, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.labels !== prevProps.labels) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          labels: multi_select_objectSpread(multi_select_objectSpread({}, this.state.labels), this.props.labels)
+        });
+      }
+    }
+  }, {
+    key: "getMenuText",
+    value: function getMenuText(children) {
+      var _this$props3 = this.props,
+          implicitAllEnabled = _this$props3.implicitAllEnabled,
+          selectedValues = _this$props3.selectedValues;
+      var _this$state$labels = this.state.labels,
+          noneSelected = _this$state$labels.noneSelected,
+          someSelected = _this$state$labels.someSelected,
+          allSelected = _this$state$labels.allSelected; // When implicit all enabled, use `labels.allSelected` when no selection
+      // otherwise, use the `labels.noneSelected` value
+
+      var noSelectionText = implicitAllEnabled ? allSelected : noneSelected;
+
+      switch (selectedValues.length) {
+        case 0:
+          return noSelectionText;
+
+        case 1:
+          // If there is one item selected, we display its label. If for
+          // some reason we can't find the selected item, we use the
+          // display text for the case where nothing is selected.
+          var selectedItem = children.find(function (option) {
+            return option.props.value === selectedValues[0];
+          });
+          return selectedItem ? selectedItem.props.label : noSelectionText;
+
+        case children.length:
+          return allSelected;
+
+        default:
+          return someSelected(selectedValues.length);
+      }
+    }
+  }, {
+    key: "getSearchField",
+    value: function getSearchField() {
+      if (!this.props.isFilterable) {
+        return [];
+      }
+
+      var _this$state$labels2 = this.state.labels,
+          clearSearch = _this$state$labels2.clearSearch,
+          filter = _this$state$labels2.filter;
+      return [{
+        component: /*#__PURE__*/external_react_["createElement"](search_text_input_SearchTextInput, {
+          key: "search-text-input",
+          onChange: this.handleSearchTextChanged,
+          searchText: this.state.searchText,
+          labels: {
+            clearSearch: clearSearch,
+            filter: filter
+          }
+        }),
+        focusable: true,
+        populatedProps: {}
+      }];
+    }
+  }, {
+    key: "getShortcuts",
+    value: function getShortcuts(numOptions) {
+      var _this$props4 = this.props,
+          selectedValues = _this$props4.selectedValues,
+          shortcuts = _this$props4.shortcuts;
+      var _this$state$labels3 = this.state.labels,
+          selectAllLabel = _this$state$labels3.selectAllLabel,
+          selectNoneLabel = _this$state$labels3.selectNoneLabel; // When there's search text input to filter, shortcuts should be hidden
+
+      if (shortcuts && !this.state.searchText) {
+        var selectAllDisabled = numOptions === selectedValues.length;
+        var selectAll = {
+          component: /*#__PURE__*/external_react_["createElement"](action_item_ActionItem, {
+            disabled: selectAllDisabled,
+            label: selectAllLabel(numOptions),
+            indent: true,
+            onClick: this.handleSelectAll
+          }),
+          focusable: !selectAllDisabled,
+          populatedProps: {}
+        };
+        var selectNoneDisabled = selectedValues.length === 0;
+        var selectNone = {
+          component: /*#__PURE__*/external_react_["createElement"](action_item_ActionItem, {
+            disabled: selectNoneDisabled,
+            label: selectNoneLabel,
+            indent: true,
+            onClick: this.handleSelectNone
+          }),
+          focusable: !selectNoneDisabled,
+          populatedProps: {}
+        };
+        var separator = {
+          component: /*#__PURE__*/external_react_["createElement"](separator_item_SeparatorItem, {
+            key: "shortcuts-separator"
+          }),
+          focusable: false,
+          populatedProps: {}
+        };
+        return [selectAll, selectNone, separator];
+      } else {
+        return [];
+      }
+    }
+  }, {
+    key: "getMenuItems",
+    value: function getMenuItems(children) {
+      var isFilterable = this.props.isFilterable; // If it's not filterable, no need to do any extra besides mapping the
+      // option items to dropdown items.
+
+      if (!isFilterable) {
+        return children.map(this.mapOptionItemToDropdownItem);
+      }
+
+      var _this$state = this.state,
+          searchText = _this$state.searchText,
+          lastSelectedValues = _this$state.lastSelectedValues;
+      var lowercasedSearchText = searchText.toLowerCase(); // Filter the children with the searchText if any.
+
+      var filteredChildren = children.filter(function (_ref) {
+        var props = _ref.props;
+        return !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1;
+      });
+      var lastSelectedChildren = [];
+      var restOfTheChildren = [];
+
+      var _iterator = _createForOfIteratorHelper(filteredChildren),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+
+          if (lastSelectedValues.includes(child.props.value)) {
+            lastSelectedChildren.push(child);
+          } else {
+            restOfTheChildren.push(child);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      var lastSelectedItems = lastSelectedChildren.map(this.mapOptionItemToDropdownItem); // We want to add SeparatorItem in between last selected items and the
+      // rest of the items only when both of them exists.
+
+      if (lastSelectedChildren.length && restOfTheChildren.length) {
+        lastSelectedItems.push({
+          component: /*#__PURE__*/external_react_["createElement"](separator_item_SeparatorItem, {
+            key: "selected-separator"
+          }),
+          focusable: false,
+          populatedProps: {}
+        });
+      }
+
+      return [].concat(multi_select_toConsumableArray(lastSelectedItems), multi_select_toConsumableArray(restOfTheChildren.map(this.mapOptionItemToDropdownItem)));
+    }
+  }, {
+    key: "renderOpener",
+    value: function renderOpener(allChildren) {
+      var _this$props5 = this.props,
+          disabled = _this$props5.disabled,
+          id = _this$props5.id,
+          light = _this$props5.light,
+          opener = _this$props5.opener,
+          testId = _this$props5.testId,
+          alignment = _this$props5.alignment,
+          dropdownStyle = _this$props5.dropdownStyle,
+          implicitAllEnabled = _this$props5.implicitAllEnabled,
+          isFilterable = _this$props5.isFilterable,
+          labels = _this$props5.labels,
+          onChange = _this$props5.onChange,
+          onToggle = _this$props5.onToggle,
+          opened = _this$props5.opened,
+          selectedValues = _this$props5.selectedValues,
+          shortcuts = _this$props5.shortcuts,
+          style = _this$props5.style,
+          className = _this$props5.className,
+          sharedProps = multi_select_objectWithoutProperties(_this$props5, ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className"]);
+
+      var noneSelected = this.state.labels.noneSelected;
+      var menuText = this.getMenuText(allChildren);
+      var numOptions = allChildren.length;
+      var dropdownOpener = opener ? /*#__PURE__*/external_react_["createElement"](dropdown_opener, {
+        onClick: this.handleClick,
+        disabled: numOptions === 0 || disabled,
+        ref: this.handleOpenerRef,
+        text: menuText
+      }, opener) : /*#__PURE__*/external_react_["createElement"](select_opener_SelectOpener, multi_select_extends({}, sharedProps, {
+        disabled: numOptions === 0 || disabled,
+        id: id,
+        isPlaceholder: menuText === noneSelected,
+        light: light,
+        onOpenChanged: this.handleOpenChanged,
+        open: this.state.open,
+        ref: this.handleOpenerRef,
+        testId: testId
+      }), menuText);
+      return dropdownOpener;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props6 = this.props,
+          alignment = _this$props6.alignment,
+          light = _this$props6.light,
+          style = _this$props6.style,
+          className = _this$props6.className,
+          dropdownStyle = _this$props6.dropdownStyle,
+          children = _this$props6.children,
+          isFilterable = _this$props6.isFilterable;
+      var _this$state2 = this.state,
+          open = _this$state2.open,
+          searchText = _this$state2.searchText;
+      var noResults = this.state.labels.noResults;
+      var allChildren = external_react_["Children"].toArray(children).filter(Boolean);
+      var numOptions = allChildren.length;
+      var filteredItems = this.getMenuItems(allChildren);
+      var opener = this.renderOpener(allChildren);
+      return /*#__PURE__*/external_react_["createElement"](dropdown_core, {
+        role: "listbox",
+        alignment: alignment,
+        dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
+        items: [].concat(multi_select_toConsumableArray(this.getSearchField()), multi_select_toConsumableArray(this.getShortcuts(numOptions)), multi_select_toConsumableArray(filteredItems)),
+        light: light,
+        onOpenChanged: this.handleOpenChanged,
+        open: open,
+        opener: opener,
+        openerElement: this.state.openerElement,
+        style: style,
+        className: className,
+        onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
+        searchText: isFilterable ? searchText : "",
+        labels: {
+          noResults: noResults
+        }
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      return {
+        open: typeof props.opened === "boolean" ? props.opened : state.open
+      };
+    }
+  }]);
+
+  return MultiSelect;
+}(external_react_["Component"]);
+
+multi_select_defineProperty(multi_select_MultiSelect, "defaultProps", {
+  alignment: "left",
+  disabled: false,
+  light: false,
+  shortcuts: false,
+  selectedValues: []
+});
+
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-dropdown/src/index.js
+
+
+
+
+
+
+
+
+/***/ })
+/******/ ]);