@splunk/react-ui 4.1.0 → 4.4.1

package/Multiselect.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 113);
+/******/ 	return __webpack_require__(__webpack_require__.s = 118);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 113:
+/***/ 118:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -138,30 +138,8 @@ var i18n_ = __webpack_require__(5);
 // EXTERNAL MODULE: external "@splunk/react-ui/Menu"
 var Menu_ = __webpack_require__(13);
 
-// EXTERNAL MODULE: external "@splunk/ui-utils/filter"
-var filter_ = __webpack_require__(22);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(10);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-var keyboard_ = __webpack_require__(9);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Dropdown"
-var Dropdown_ = __webpack_require__(16);
-var Dropdown_default = /*#__PURE__*/__webpack_require__.n(Dropdown_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Link"
-var Link_ = __webpack_require__(32);
-var Link_default = /*#__PURE__*/__webpack_require__.n(Link_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
-var ResultsMenu_ = __webpack_require__(35);
-var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Text"
-var Text_ = __webpack_require__(24);
-var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
+// EXTERNAL MODULE: ./src/Select/OptionBase.tsx
+var OptionBase = __webpack_require__(28);
 
 // CONCATENATED MODULE: ./src/Multiselect/Option.tsx
 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); }
@@ -259,19 +237,6 @@ var Option_Option = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "c", null);
 
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      var _this$props = _this.props,
-          onClick = _this$props.onClick,
-          value = _this$props.value,
-          disabled = _this$props.disabled;
-
-      if (!disabled) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(e, {
-          value: value
-        });
-      }
-    });
-
     _defineProperty(_assertThisInitialized(_this), "handleMount", function (c) {
       _this.c = c;
     });
@@ -286,31 +251,28 @@ var Option_Option = /*#__PURE__*/function (_PureComponent) {
 
       (_this$c = this.c) === null || _this$c === void 0 ? void 0 : _this$c.scrollIntoViewIfNeeded();
     }
+    /**
+     * Place focus on the button.
+     */
+
+  }, {
+    key: "focus",
+    value: function focus() {
+      var _this$c2;
+
+      (_this$c2 = this.c) === null || _this$c2 === void 0 ? void 0 : _this$c2.focus();
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          children = _this$props2.children,
-          compact = _this$props2.compact,
-          label = _this$props2.label,
-          otherProps = _objectWithoutProperties(_this$props2, ["value", "children", "compact", "label"]);
+      var _this$props = this.props,
+          compact = _this$props.compact,
+          otherProps = _objectWithoutProperties(_this$props, ["compact"]);
 
-      var ariaProps = _defineProperty({}, compact ? 'aria-checked' : 'aria-selected', this.props.selected);
-
-      return /*#__PURE__*/external_react_default.a.createElement(Menu_["Item"], _extends({
-        "data-test-value": value,
-        "data-test": "option",
+      return /*#__PURE__*/external_react_default.a.createElement(OptionBase["a" /* default */], _extends({}, otherProps, {
+        multiple: compact,
         ref: this.handleMount
-      }, otherProps, {
-        onClick: this.handleClick,
-        selectable: compact,
-        selectableAppearance: compact ? 'checkbox' : undefined // ariaProps contains the required attributes
-        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-        ,
-        role: "option",
-        value: value.toString()
-      }, ariaProps), children || label);
+      }), this.props.children || this.props.label);
     }
   }]);
 
@@ -322,85 +284,17 @@ _defineProperty(Option_Option, "propTypes", propTypes);
 _defineProperty(Option_Option, "defaultProps", defaultProps);
 
 /* harmony default export */ var Multiselect_Option = (Option_Option);
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(3);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(17);
-var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
-
-// EXTERNAL MODULE: external "@splunk/themes"
-var themes_ = __webpack_require__(0);
-
-// CONCATENATED MODULE: ./src/Multiselect/CompactStyles.ts
-
-
-
-var StyledButton = external_styled_components_default()(Button_default.a).withConfig({
-  displayName: "CompactStyles__StyledButton",
-  componentId: "sc-1ebm9az-0"
-})(["&[data-inline]{width:400px;}"]);
-var StyledFilter = external_styled_components_default.a.div.withConfig({
-  displayName: "CompactStyles__StyledFilter",
-  componentId: "sc-1ebm9az-1"
-})(["padding:", ";min-width:160px;", ""], Object(themes_["pick"])({
-  enterprise: '8px',
-  prisma: '10px 16px'
-}), Object(themes_["pickVariant"])('$placement', {
-  above: {
-    enterprise: Object(external_styled_components_["css"])(["border-top:", ";"], themes_["variables"].border),
-    prisma: Object(external_styled_components_["css"])(["border-top:1px solid ", ";"], themes_["variables"].neutral200)
-  },
-  below: {
-    enterprise: Object(external_styled_components_["css"])(["border-bottom:", ";"], themes_["variables"].border),
-    prisma: Object(external_styled_components_["css"])(["border-bottom:1px solid ", ";"], themes_["variables"].neutral200)
-  }
-}));
-var StyledCount = external_styled_components_default.a.span.withConfig({
-  displayName: "CompactStyles__StyledCount",
-  componentId: "sc-1ebm9az-2"
-})(["padding-right:", ";"], Object(themes_["pick"])({
-  enterprise: themes_["variables"].spacingQuarter,
-  prisma: themes_["variables"].spacingXSmall
-}));
-var StyledToggleAllControls = external_styled_components_default.a.div.withConfig({
-  displayName: "CompactStyles__StyledToggleAllControls",
-  componentId: "sc-1ebm9az-3"
-})(["padding:", ";", ""], Object(themes_["pick"])({
-  enterprise: "5px 8px",
-  prisma: '10px 16px'
-}), Object(themes_["pickVariant"])('$placement', {
-  above: {
-    enterprise: Object(external_styled_components_["css"])(["border-top:", ";"], themes_["variables"].border),
-    prisma: Object(external_styled_components_["css"])(["border-top:1px solid ", ";"], themes_["variables"].neutral200)
-  },
-  below: {
-    enterprise: Object(external_styled_components_["css"])(["border-bottom:", ";"], themes_["variables"].border),
-    prisma: Object(external_styled_components_["css"])(["border-bottom:1px solid ", ";"], themes_["variables"].neutral200)
-  }
-}));
+// EXTERNAL MODULE: ./src/Select/SelectBase.tsx + 1 modules
+var SelectBase = __webpack_require__(42);
 
 // CONCATENATED MODULE: ./src/Multiselect/Compact.tsx
 function Compact_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Compact_typeof = function _typeof(obj) { return typeof obj; }; } else { Compact_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Compact_typeof(obj); }
 
-function Compact_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Compact_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 Compact_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 Compact_extends() { Compact_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 Compact_extends.apply(this, arguments); }
 
-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 Compact_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Compact_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 _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 Compact_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 Compact_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -431,13 +325,6 @@ function Compact_defineProperty(obj, key, value) { if (key in obj) { Object.defi
 
 
 
-
-
-
-
-
-
-
 var Compact_propTypes = {
   allowNewValues: external_prop_types_default.a.bool,
   animateLoading: external_prop_types_default.a.bool,
@@ -451,6 +338,7 @@ var Compact_propTypes = {
   error: external_prop_types_default.a.bool,
   footerMessage: external_prop_types_default.a.node,
   inline: external_prop_types_default.a.bool,
+  inputId: external_prop_types_default.a.string,
   inputRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   isLoadingOptions: external_prop_types_default.a.bool,
   labelledBy: external_prop_types_default.a.string,
@@ -480,702 +368,230 @@ var Compact_defaultProps = {
   tabConfirmsNewValue: false
 }; // TS: not typed controlled/uncontrolled, handled by Multiselect wrapper component
 
-function isOption(child) {
-  return child && Object(external_lodash_["has"])(child.props, 'value');
-}
-
 var Compact_Compact = /*#__PURE__*/function (_Component) {
   Compact_inherits(Compact, _Component);
 
   var _super = Compact_createSuper(Compact);
 
-  // @docs-props-type CompactPropsBase
-  function Compact(props) {
-    var _this;
-
+  function Compact() {
     Compact_classCallCheck(this, Compact);
 
-    _this = _super.call(this, props);
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "controlledExternally", void 0);
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "activeItemId", void 0);
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "displayedValues", void 0);
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "activeValue", void 0);
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "availableOptionCount", void 0);
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "selectedOptionCount", void 0);
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleSelectAll", function (e) {
-      var _this$getCurrentValue, _this$props$onChange, _this$props2;
+    return _super.apply(this, arguments);
+  }
 
-      var values = Object(external_lodash_["uniq"])(((_this$getCurrentValue = _this.getCurrentValues()) !== null && _this$getCurrentValue !== void 0 ? _this$getCurrentValue : []).concat(_this.displayedValues));
-      var _this$props = _this.props,
-          name = _this$props.name,
-          children = _this$props.children;
+  Compact_createClass(Compact, [{
+    key: "render",
+    // @docs-props-type CompactPropsBase
+    value: function render() {
+      var _this$props = this.props,
+          defaultValues = _this$props.defaultValues,
+          children = _this$props.children,
+          controlledFilter = _this$props.controlledFilter,
+          values = _this$props.values,
+          otherProps = Compact_objectWithoutProperties(_this$props, ["defaultValues", "children", "controlledFilter", "values"]);
+
+      var convertedProps = {
+        children: external_react_["Children"].toArray(children).map(function (item) {
+          if (Object(SelectBase["d" /* isOption */])(item)) {
+            return /*#__PURE__*/external_react_default.a.createElement(OptionBase["a" /* default */], Compact_extends({}, item.props, {
+              multiple: true
+            }));
+          }
 
-      if (!_this.isControlled()) {
-        values = external_react_default.a.Children.toArray(children).filter(function (child) {
-          return isOption(child) && Object(external_lodash_["includes"])(values, child.props.value) && !child.props.disabled;
-        }).map(function (child) {
-          return child.props.value;
-        });
+          return item;
+        }),
+        filter: controlledFilter ? 'controlled' : true
+      };
 
-        _this.setState({
-          values: values
-        });
+      if (defaultValues != null) {
+        convertedProps.defaultValues = defaultValues;
       }
 
-      (_this$props$onChange = (_this$props2 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, e, {
-        values: values,
-        name: name
-      });
-    });
+      if (values != null) {
+        convertedProps.values = values;
+      }
 
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleClearAll", function (e) {
-      var _this$props$onChange2, _this$props3;
+      return /*#__PURE__*/external_react_default.a.createElement(SelectBase["c" /* default */], Compact_extends({}, otherProps, convertedProps, {
+        multiple: true
+      }));
+    }
+  }]);
 
-      // Clear the filtered items, items when filtering. Else clear all the items.
-      var values = _this.state.filterKeyword ? external_lodash_["without"].apply(void 0, [_this.getCurrentValues()].concat(_toConsumableArray(_this.displayedValues))) : [];
-      var name = _this.props.name;
+  return Compact;
+}(external_react_["Component"]);
 
-      if (!_this.isControlled()) {
-        _this.setState({
-          values: values
-        });
-      }
+Compact_defineProperty(Compact_Compact, "propTypes", Compact_propTypes);
 
-      (_this$props$onChange2 = (_this$props3 = _this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props3, e, {
-        values: values,
-        name: name
-      });
-    });
+Compact_defineProperty(Compact_Compact, "defaultProps", Compact_defaultProps);
 
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleTextKeyDown", function (e) {
-      var _this$props4 = _this.props,
-          children = _this$props4.children,
-          onScrollBottom = _this$props4.onScrollBottom,
-          tabConfirmsNewValue = _this$props4.tabConfirmsNewValue;
-      var eventKeyCode = Object(keyboard_["keycode"])(e.nativeEvent);
+Compact_defineProperty(Compact_Compact, "Option", Multiselect_Option);
 
-      if (eventKeyCode === 'tab') {
-        e.preventDefault();
+Compact_defineProperty(Compact_Compact, "Divider", Menu_["Divider"]);
 
-        if (tabConfirmsNewValue && !Object(external_lodash_["isUndefined"])(_this.activeValue) && _this.availableOptionCount <= 1) {
-          _this.toggleValue(e, _this.activeValue);
-        }
-      }
+Compact_defineProperty(Compact_Compact, "Heading", Menu_["Heading"]);
 
-      if (e.shiftKey || e.metaKey || e.ctrlKey) {
-        return;
-      }
+/* harmony default export */ var Multiselect_Compact = (Compact_Compact);
+// EXTERNAL MODULE: external "@splunk/ui-utils/filter"
+var filter_ = __webpack_require__(23);
 
-      if (eventKeyCode === 'down') {
-        e.preventDefault();
+// EXTERNAL MODULE: external "@splunk/ui-utils/id"
+var id_ = __webpack_require__(10);
 
-        _this.setState(function (state) {
-          return {
-            activeIndex: Math.min(state.activeIndex + 1, _this.availableOptionCount - 1)
-          };
-        });
+// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
+var keyboard_ = __webpack_require__(9);
 
-        if (children && onScrollBottom) {
-          var _this$getCurrentValue2;
+// EXTERNAL MODULE: external "@splunk/react-ui/Chip"
+var Chip_ = __webpack_require__(89);
+var Chip_default = /*#__PURE__*/__webpack_require__.n(Chip_);
 
-          var beforeLastChild = external_react_["Children"].toArray(children).length - (2 + ((_this$getCurrentValue2 = _this.getCurrentValues()) !== null && _this$getCurrentValue2 !== void 0 ? _this$getCurrentValue2 : []).length);
+// EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
+var ResultsMenu_ = __webpack_require__(39);
+var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
 
-          if (_this.state.activeIndex === beforeLastChild) {
-            onScrollBottom();
-          }
-        }
-      }
+// EXTERNAL MODULE: external "@splunk/react-ui/Popover"
+var Popover_ = __webpack_require__(17);
+var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
-      if (eventKeyCode === 'up') {
-        e.preventDefault();
+// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
+var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
-        _this.setState(function (state) {
-          return {
-            activeIndex: Math.max(state.activeIndex - 1, 0)
-          };
-        });
-      }
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(3);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
-      if (eventKeyCode === 'enter' && !Object(external_lodash_["isUndefined"])(_this.activeValue) && _this.state.open) {
-        _this.toggleValue(e, _this.activeValue);
-      }
-    });
+// EXTERNAL MODULE: external "@splunk/react-ui/Box"
+var Box_ = __webpack_require__(8);
+var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleMenuOptionClick", function (e, _ref) {
-      var value = _ref.value;
-      e.preventDefault();
+// EXTERNAL MODULE: external "@splunk/themes"
+var themes_ = __webpack_require__(0);
 
-      _this.toggleValue(e, value);
-    });
+// CONCATENATED MODULE: ./src/Multiselect/NormalStyles.ts
 
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleTextChange", function (e, _ref2) {
-      var _this$props$onFilterC, _this$props5;
 
-      var value = _ref2.value;
 
-      _this.setState({
-        filterKeyword: value,
-        open: true,
-        activeIndex: 0
-      });
-
-      (_this$props$onFilterC = (_this$props5 = _this.props).onFilterChange) === null || _this$props$onFilterC === void 0 ? void 0 : _this$props$onFilterC.call(_this$props5, e, {
-        keyword: value
-      });
-    });
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleTextFocus", function () {
-      _this.setState({
-        textHasFocus: true
-      });
-    });
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleTextBlur", function () {
-      _this.setState({
-        textHasFocus: false
-      });
-    });
-
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleRequestOpen", function (e) {
-      var _this$getCurrentValue3, _this$props$onFilterC2, _this$props7;
-
-      _this.setState({
-        open: true,
-        activeIndex: 0,
-        topValues: (_this$getCurrentValue3 = _this.getCurrentValues()) !== null && _this$getCurrentValue3 !== void 0 ? _this$getCurrentValue3 : [],
-        filterKeyword: ''
-      }, function () {
-        var _this$props$onOpen, _this$props6;
+var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
+  displayName: "NormalStyles__StyledBox",
+  componentId: "sc-1uwwpco-0"
+})(["border-radius:", ";align-items:flex-start;flex-wrap:wrap;min-height:", ";max-height:300px;overflow-y:auto;border:1px solid ", ";padding:", ";", " ", " ", " ", " ", " &[data-inline]{width:400px;}[data-inline='true'] + &{margin-left:", "}"], themes_["variables"].borderRadius, themes_["variables"].inputHeight, Object(themes_["pick"])({
+  enterprise: {
+    light: themes_["variables"].gray60,
+    dark: themes_["variables"].borderColor
+  },
+  prisma: themes_["variables"].interactiveColorBorder
+}), Object(themes_["pick"])({
+  enterprise: '2px 0 0 2px',
+  prisma: '2px'
+}), Object(themes_["pick"])({
+  enterprise: {
+    light: Object(external_styled_components_["css"])(["background-color:", ";"], themes_["variables"].white),
+    dark: Object(external_styled_components_["css"])(["background-color:", ";"], themes_["variables"].gray22)
+  }
+}), function (_ref) {
+  var $hasfocus = _ref.$hasfocus;
+  return $hasfocus && Object(themes_["pick"])({
+    enterprise: Object(external_styled_components_["css"])(["box-shadow:", ";"], themes_["variables"].focusShadow),
+    prisma: Object(external_styled_components_["css"])(["border-color:", ";"], themes_["variables"].focusColor)
+  });
+}, function (_ref2) {
+  var $error = _ref2.$error;
+  return $error && Object(external_styled_components_["css"])(["border-color:", ";color:", ";"], themes_["variables"].accentColorNegative, themes_["variables"].accentColorNegative);
+}, function (_ref3) {
+  var $disabled = _ref3.$disabled,
+      $hasfocus = _ref3.$hasfocus;
+  return $disabled ? Object(themes_["pick"])({
+    enterprise: {
+      light: Object(external_styled_components_["css"])(["background-color:", ";cursor:not-allowed;"], themes_["variables"].gray96),
+      dark: Object(external_styled_components_["css"])(["background-color:", ";border-color:", ";cursor:not-allowed;"], themes_["variables"].gray22, themes_["variables"].gray30)
+    },
+    prisma: Object(external_styled_components_["css"])(["border-color:", ";cursor:not-allowed;"], themes_["variables"].interactiveColorBorderDisabled)
+  }) : !$hasfocus && Object(external_styled_components_["css"])(["&:hover{border-color:", ";}"], Object(themes_["pick"])({
+    enterprise: themes_["variables"].borderColor,
+    prisma: themes_["variables"].interactiveColorBorderHover
+  }));
+}, function (_ref4) {
+  var $popoverOpen = _ref4.$popoverOpen;
+  return $popoverOpen && Object(external_styled_components_["css"])(["position:relative;z-index:calc(", " - 2);"], themes_["variables"].zindexFixedNavbar);
+}, Object(themes_["pick"])({
+  enterprise: themes_["variables"].spacingHalf,
+  prisma: themes_["variables"].spacingSmall
+}));
+var StyledInputWrapper = external_styled_components_default.a.div.withConfig({
+  displayName: "NormalStyles__StyledInputWrapper",
+  componentId: "sc-1uwwpco-1"
+})(["flex:1 0 auto;max-width:100%;"]);
+var StyledInput = external_styled_components_default.a.input.withConfig({
+  displayName: "NormalStyles__StyledInput",
+  componentId: "sc-1uwwpco-2"
+})(["", ";min-width:100%;max-width:100%;line-height:12px;", ""], themes_["mixins"].reset('block'), Object(themes_["pick"])({
+  enterprise: {
+    comfortable: Object(external_styled_components_["css"])(["padding:", ";"], themes_["variables"].spacingQuarter),
+    compact: Object(external_styled_components_["css"])(["padding:3px;"])
+  },
+  prisma: {
+    comfortable: Object(external_styled_components_["css"])(["padding:7px 10px;"]),
+    compact: Object(external_styled_components_["css"])(["padding:3px;"])
+  }
+}));
+var StyledOverlay = external_styled_components_default.a.div.withConfig({
+  displayName: "NormalStyles__StyledOverlay",
+  componentId: "sc-1uwwpco-3"
+})(["", ""], function (_ref5) {
+  var $popoveropen = _ref5.$popoveropen;
+  return $popoveropen && Object(external_styled_components_["css"])(["position:fixed;top:0;left:0;width:100%;height:100%;z-index:calc(", " - 2);"], themes_["variables"].zindexFixedNavbar);
+});
 
-        (_this$props$onOpen = (_this$props6 = _this.props).onOpen) === null || _this$props$onOpen === void 0 ? void 0 : _this$props$onOpen.call(_this$props6);
-      });
+// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
+var updateReactRef = __webpack_require__(12);
 
-      (_this$props$onFilterC2 = (_this$props7 = _this.props).onFilterChange) === null || _this$props$onFilterC2 === void 0 ? void 0 : _this$props$onFilterC2.call(_this$props7, e, {
-        keyword: ''
-      });
-    });
+// CONCATENATED MODULE: ./src/Multiselect/Normal.tsx
+function Normal_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Normal_typeof = function _typeof(obj) { return typeof obj; }; } else { Normal_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Normal_typeof(obj); }
 
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleRequestClose", function () {
-      _this.setState({
-        open: false
-      }, function () {
-        var _this$props$onClose, _this$props8;
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
-        (_this$props$onClose = (_this$props8 = _this.props).onClose) === null || _this$props$onClose === void 0 ? void 0 : _this$props$onClose.call(_this$props8);
-      });
-    });
+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."); }
 
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleScrollBottom", function () {
-      if (_this.state.open && !_this.props.isLoadingOptions) {
-        var _this$props$onScrollB, _this$props9;
+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); }
 
-        (_this$props$onScrollB = (_this$props9 = _this.props).onScrollBottom) === null || _this$props$onScrollB === void 0 ? void 0 : _this$props$onScrollB.call(_this$props9);
-      }
-    });
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
 
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "handleActiveOptionMount", function (c) {
-      c === null || c === void 0 ? void 0 : c.scrollIntoViewIfNeeded();
-    });
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-    Compact_defineProperty(Compact_assertThisInitialized(_this), "renderMenu", function (_ref3) {
-      var anchorWidth = _ref3.anchorWidth,
-          maxHeight = _ref3.maxHeight,
-          placement = _ref3.placement;
-      var _this$state = _this.state,
-          filterKeyword = _this$state.filterKeyword,
-          textHasFocus = _this$state.textHasFocus,
-          topValues = _this$state.topValues;
-      var _this$props10 = _this.props,
-          allowNewValues = _this$props10.allowNewValues,
-          controlledFilter = _this$props10.controlledFilter;
+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; }
 
-      var currentValues = _this.getCurrentValues();
+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; }
 
-      _this.availableOptionCount = 0;
-      _this.selectedOptionCount = 0;
-      _this.activeValue = undefined;
-      var foundExactMatch;
-      var childrenTopCount = 0;
-      var children = external_react_["Children"].toArray(_this.props.children).reduce(function (acc, item, i) {
-        // ignore Headings and Dividers
-        if (!isOption(item)) {
-          acc.push(item);
-          return acc;
-        } // Find out if the search string exactly matches a value
+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) { Normal_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 Normal_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Normal_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; }
 
-        if (item.props.value === _this.state.filterKeyword) {
-          foundExactMatch = true;
-        } // Format the Menu.Item
+function Normal_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 Normal_extends() { Normal_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 Normal_extends.apply(this, arguments); }
 
-        var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-          key: item.key || i,
-          onClick: _this.handleMenuOptionClick,
-          selected: currentValues && currentValues.indexOf(item.props.value) >= 0,
-          compact: true,
-          role: 'option'
-        }); // Move previously selected items to the top section
+function Normal_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-        if (topValues && topValues.indexOf(item.props.value) >= 0) {
-          if (childrenTopCount === 0) {
-            acc.splice(childrenTopCount, 0, /*#__PURE__*/external_react_default.a.createElement(Menu_["Divider"], {
-              key: "topDivider"
-            }));
-          }
+function Normal_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); } }
 
-          acc.splice(childrenTopCount, 0, clonedItem);
-          childrenTopCount += 1;
-        } else {
-          acc.push(clonedItem);
-        }
+function Normal_createClass(Constructor, protoProps, staticProps) { if (protoProps) Normal_defineProperties(Constructor.prototype, protoProps); if (staticProps) Normal_defineProperties(Constructor, staticProps); return Constructor; }
 
-        return acc;
-      }, []); // Add missing items
+function Normal_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) Normal_setPrototypeOf(subClass, superClass); }
 
-      Object(external_lodash_["forEachRight"])(currentValues, function (value) {
-        var matchedItem = Object(external_lodash_["find"])(children, function (item) {
-          return isOption(item) && item.props && item.props.value === value;
-        });
+function Normal_setPrototypeOf(o, p) { Normal_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Normal_setPrototypeOf(o, p); }
 
-        if (!matchedItem) {
-          if (value === _this.state.filterKeyword) {
-            foundExactMatch = true;
-          }
+function Normal_createSuper(Derived) { var hasNativeReflectConstruct = Normal_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Normal_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Normal_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Normal_possibleConstructorReturn(this, result); }; }
 
-          var isTopValue = topValues && topValues.indexOf(value) >= 0;
-          children.splice(isTopValue ? 0 : childrenTopCount + 1, 0, /*#__PURE__*/external_react_default.a.createElement(Multiselect_Option, {
-            label: String(value),
-            value: value,
-            key: "missing-value-".concat(value),
-            onClick: _this.handleMenuOptionClick,
-            compact: true,
-            selected: true
-          }));
-
-          if (isTopValue) {
-            childrenTopCount += 1;
-          }
-        }
-      }); // Filter the items
+function Normal_possibleConstructorReturn(self, call) { if (call && (Normal_typeof(call) === "object" || typeof call === "function")) { return call; } return Normal_assertThisInitialized(self); }
 
-      var keywords = Object(filter_["stringToKeywords"])(filterKeyword);
-      children = controlledFilter ? children : children.filter(function (option) {
-        if (isOption(option)) {
-          return Object(filter_["testPhrase"])(option.props.label, keywords);
-        }
+function Normal_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-        return true; // Keep all headers and non-interactive options
-      }) // highlight the matched text
-      .map(function (option) {
-        if (!isOption(option)) {
-          return option;
-        } // highlight matched text
+function Normal_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 Normal_getPrototypeOf(o) { Normal_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Normal_getPrototypeOf(o); }
 
-        var matchRanges = keywords && Object(filter_["keywordLocations"])(option.props.label, keywords);
-        return /*#__PURE__*/Object(external_react_["cloneElement"])(option, {
-          matchRanges: matchRanges || undefined
-        });
-      }); // Add the option to add the new value
+function Normal_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; }
 
-      if (allowNewValues && !foundExactMatch && filterKeyword) {
-        children.splice(childrenTopCount, 0, /*#__PURE__*/external_react_default.a.createElement(Multiselect_Option, {
-          label: "".concat(filterKeyword, " (new value)"),
-          value: filterKeyword,
-          key: "newValue",
-          compact: true,
-          onClick: _this.handleMenuOptionClick
-        }));
-      } // Highlight the selected Items and remove hidden
-
-
-      children = children.reduce(function (acc, item) {
-        // ignore Dividers & Headings
-        if (!isOption(item)) {
-          acc.push(item);
-          return acc;
-        } // Ignore any hidden items
-
-
-        if (item.props && item.props.hidden) {
-          return acc;
-        }
-
-        var active = _this.availableOptionCount === _this.state.activeIndex;
-        _this.availableOptionCount += 1;
-        _this.selectedOptionCount += item.props.selected ? 1 : 0;
-
-        if (!active || !textHasFocus) {
-          acc.push(item);
-          return acc;
-        }
-
-        if (!item.props.disabled) {
-          _this.activeValue = item.props.value;
-        }
-
-        var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-          active: active,
-          id: _this.activeItemId,
-          ref: _this.handleActiveOptionMount
-        });
-        acc.push(clonedItem);
-        return acc;
-      }, []);
-      _this.displayedValues = children.reduce(function (acc, item) {
-        if (isOption(item)) {
-          acc.push(item.props.value);
-        }
-
-        return acc;
-      }, []);
-      return /*#__PURE__*/external_react_default.a.createElement(ResultsMenu_default.a, Compact_extends({
-        childrenStart: _this.renderControls({
-          placement: placement,
-          hasChildren: !!children.length
-        }),
-        placement: placement !== null && placement !== void 0 ? placement : undefined,
-        maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
-        onScrollBottom: _this.props.onScrollBottom ? _this.handleScrollBottom : undefined,
-        "data-test": "results-menu",
-        isLoading: _this.props.isLoadingOptions
-      }, Object(external_lodash_["pick"])(_this.props, 'noOptionsMessage', 'footerMessage', 'animateLoading', 'loadingMessage'), {
-        style: Object(external_lodash_["extend"])({
-          width: Math.max(anchorWidth !== null && anchorWidth !== void 0 ? anchorWidth : 0, 200)
-        }, _this.props.menuStyle)
-      }), children);
-    });
-
-    _this.state = {
-      activeIndex: 0,
-      filterKeyword: '',
-      open: false,
-      textHasFocus: false,
-      topValues: [],
-      values: props.defaultValues || []
-    };
-    _this.controlledExternally = Object(external_lodash_["has"])(props, 'values');
-    _this.displayedValues = [];
-    _this.availableOptionCount = 0;
-    _this.selectedOptionCount = 0;
-
-    if (false) {}
-
-    if (false) {}
-
-    _this.activeItemId = Object(id_["createDOMID"])('active-item');
-    return _this;
-  }
-
-  Compact_createClass(Compact, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (false) {}
-
-      if (false) {}
-    }
-  }, {
-    key: "getCurrentValues",
-    value: function getCurrentValues() {
-      return this.isControlled() ? this.props.values : this.state.values;
-    }
-  }, {
-    key: "isControlled",
-    value: function isControlled() {
-      return this.controlledExternally;
-    }
-  }, {
-    key: "toggleValue",
-    value: function toggleValue(e, value) {
-      var _this$getCurrentValue4, _this$props$onChange3, _this$props11;
-
-      var values = (_this$getCurrentValue4 = this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [];
-      var currentIndex = values.indexOf(value);
-      var name = this.props.name;
-      var newValues;
-
-      if (currentIndex >= 0) {
-        newValues = [].concat(_toConsumableArray(values.slice(0, currentIndex)), _toConsumableArray(values.slice(currentIndex + 1)));
-      } else {
-        newValues = values.concat([value]);
-      }
-
-      if (!this.isControlled()) {
-        this.setState({
-          values: newValues,
-          open: true
-        });
-      }
-
-      (_this$props$onChange3 = (_this$props11 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props11, e, {
-        values: newValues,
-        name: name
-      });
-    }
-  }, {
-    key: "renderControls",
-    value: function renderControls(_ref4) {
-      var hasChildren = _ref4.hasChildren,
-          placement = _ref4.placement;
-      var selectControls = /*#__PURE__*/external_react_default.a.createElement(StyledToggleAllControls, {
-        $placement: placement,
-        key: "selectAll"
-      }, /*#__PURE__*/external_react_default.a.createElement(Link_default.a, {
-        onClick: this.handleSelectAll,
-        disabled: !(this.availableOptionCount - this.selectedOptionCount),
-        "data-test": "select-all",
-        style: {
-          marginRight: 20
-        }
-      }, this.state.filterKeyword ? Object(i18n_["_"])('Select All Matches') : Object(i18n_["_"])('Select All')), /*#__PURE__*/external_react_default.a.createElement(Link_default.a, {
-        onClick: this.handleClearAll,
-        disabled: !this.selectedOptionCount,
-        "data-test": "clear-all"
-      }, this.state.filterKeyword ? Object(i18n_["_"])('Clear All Matches') : Object(i18n_["_"])('Clear All')));
-      /* eslint-disable jsx-a11y/tabindex-no-positive */
-
-      return /*#__PURE__*/external_react_default.a.createElement("div", {
-        key: "controls"
-      }, placement === 'above' && hasChildren && selectControls, /*#__PURE__*/external_react_default.a.createElement(StyledFilter, {
-        key: "filter",
-        "data-test": "filter",
-        $placement: placement
-      }, /*#__PURE__*/external_react_default.a.createElement(Text_default.a, {
-        value: this.state.filterKeyword,
-        appearance: "search",
-        autoCapitalize: "off",
-        autoComplete: "off",
-        autoCorrect: "off",
-        spellCheck: false,
-        onChange: this.handleTextChange,
-        onKeyDown: this.handleTextKeyDown,
-        onFocus: this.handleTextFocus,
-        onBlur: this.handleTextBlur,
-        placeholder: Object(i18n_["_"])('filter'),
-        tabIndex: 1,
-        "aria-label": Object(i18n_["_"])('Filter'),
-        "aria-activedescendant": this.activeItemId,
-        inputRef: this.props.inputRef
-      })), placement !== 'above' && hasChildren && selectControls);
-      /* eslint-enable jsx-a11y/tabindex-no-positive */
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$getCurrentValue5;
-
-      var _this$props12 = this.props,
-          children = _this$props12.children,
-          defaultPlacement = _this$props12.defaultPlacement,
-          describedBy = _this$props12.describedBy,
-          disabled = _this$props12.disabled,
-          error = _this$props12.error,
-          inline = _this$props12.inline,
-          labelledBy = _this$props12.labelledBy,
-          placeholder = _this$props12.placeholder,
-          otherProps = Compact_objectWithoutProperties(_this$props12, ["children", "defaultPlacement", "describedBy", "disabled", "error", "inline", "labelledBy", "placeholder"]); // Generate buttonLabels
-
-
-      var childrenArray = external_react_["Children"].toArray(children);
-      var currentValues = (_this$getCurrentValue5 = this.getCurrentValues()) !== null && _this$getCurrentValue5 !== void 0 ? _this$getCurrentValue5 : [];
-      var buttonLabel = currentValues.reduce(function (acc, value, index, orig) {
-        var matchedItem = Object(external_lodash_["find"])(childrenArray, function (item) {
-          return isOption(item) && item.props.value === value;
-        });
-
-        if (matchedItem) {
-          acc.push(matchedItem.props.children || matchedItem.props.label);
-        } else {
-          acc.push(value);
-        }
-
-        if (index < orig.length - 1) {
-          acc.push(Object(i18n_["_"])(', '));
-        }
-
-        return acc;
-      }, []);
-      var toggle = /*#__PURE__*/external_react_default.a.createElement(StyledButton, Compact_extends({
-        appearance: "toggle",
-        "data-test-values": JSON.stringify(currentValues),
-        label: buttonLabel.length > 0 ? buttonLabel : placeholder,
-        error: error,
-        inline: inline,
-        disabled: disabled || undefined,
-        isMenu: true,
-        role: "listbox",
-        "aria-labelledby": labelledBy,
-        "aria-describedby": describedBy,
-        "aria-multiselectable": "true" // @ts-expect-error - accept inconsistency with Button
-        ,
-        onClick: this.props.onClick
-      }, Object(external_lodash_["omit"])(otherProps, 'allowNewValues', 'animateLoading', 'controlledFilter', 'defaultValues', 'footerMessage', 'inputRef', 'isLoadingOptions', 'menuStyle', 'noOptionsMessage', 'onChange', 'onClick', 'onFilterChange', 'onScrollBottom', 'onOpen', 'onClose', 'values', 'useClickawayOverlay')), !!currentValues.length && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
-        "data-role": "count"
-      }, "(", currentValues.length, ")"));
-      return /*#__PURE__*/external_react_default.a.createElement(Dropdown_default.a, {
-        closeReasons: ['clickAway', 'escapeKey', 'offScreen', 'toggleClick'],
-        toggle: toggle,
-        onRequestOpen: this.handleRequestOpen,
-        onRequestClose: this.handleRequestClose,
-        open: this.state.open,
-        repositionMode: "flip",
-        defaultPlacement: defaultPlacement,
-        canCoverAnchor: window.innerHeight < 500
-      }, this.renderMenu);
-    }
-  }]);
-
-  return Compact;
-}(external_react_["Component"]);
-
-Compact_defineProperty(Compact_Compact, "propTypes", Compact_propTypes);
-
-Compact_defineProperty(Compact_Compact, "defaultProps", Compact_defaultProps);
-
-Compact_defineProperty(Compact_Compact, "Option", Multiselect_Option);
-
-Compact_defineProperty(Compact_Compact, "Divider", Menu_["Divider"]);
-
-Compact_defineProperty(Compact_Compact, "Heading", Menu_["Heading"]);
-
-/* harmony default export */ var Multiselect_Compact = (Compact_Compact);
-// EXTERNAL MODULE: external "@splunk/react-ui/Chip"
-var Chip_ = __webpack_require__(87);
-var Chip_default = /*#__PURE__*/__webpack_require__.n(Chip_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(18);
-var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Box"
-var Box_ = __webpack_require__(8);
-var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
-
-// CONCATENATED MODULE: ./src/Multiselect/NormalStyles.ts
-
-
-
-var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
-  displayName: "NormalStyles__StyledBox",
-  componentId: "sc-1uwwpco-0"
-})(["border-radius:", ";align-items:flex-start;flex-wrap:wrap;min-height:", ";max-height:300px;overflow-y:auto;", ";", " ", " ", " ", " ", " &[data-inline]{width:400px;}[data-inline='true'] + &{margin-left:", "}"], themes_["variables"].borderRadius, themes_["variables"].inputHeight, Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["border:", ";padding:2px 0 0 2px;"], themes_["variables"].border),
-  prisma: Object(external_styled_components_["css"])(["border:1px solid ", ";padding:2px;"], themes_["variables"].interactiveColorBorder)
-}), Object(themes_["pick"])({
-  enterprise: {
-    light: Object(external_styled_components_["css"])(["background-color:", ";"], themes_["variables"].white),
-    dark: Object(external_styled_components_["css"])(["background-color:", ";"], themes_["variables"].gray22)
-  }
-}), function (_ref) {
-  var $hasfocus = _ref.$hasfocus;
-  return $hasfocus && Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["box-shadow:", ";"], themes_["variables"].focusShadow),
-    prisma: Object(external_styled_components_["css"])(["border-color:", ";"], themes_["variables"].focusColor)
-  });
-}, function (_ref2) {
-  var $error = _ref2.$error;
-  return $error && Object(external_styled_components_["css"])(["border-color:", ";color:", ";"], themes_["variables"].accentColorNegative, themes_["variables"].accentColorNegative);
-}, function (_ref3) {
-  var $disabled = _ref3.$disabled;
-  return $disabled ? Object(themes_["pick"])({
-    enterprise: {
-      light: Object(external_styled_components_["css"])(["background-color:", ";cursor:not-allowed;"], themes_["variables"].gray96),
-      dark: Object(external_styled_components_["css"])(["background-color:", ";border-color:", ";cursor:not-allowed;"], themes_["variables"].gray22, themes_["variables"].gray30)
-    },
-    prisma: Object(external_styled_components_["css"])(["border-color:", ";cursor:not-allowed;"], themes_["variables"].interactiveColorBorderDisabled)
-  }) : Object(external_styled_components_["css"])(["&:hover{border-color:", ";}"], Object(themes_["pick"])({
-    enterprise: themes_["variables"].borderColor,
-    prisma: themes_["variables"].interactiveColorBorderHover
-  }));
-}, function (_ref4) {
-  var $popoverOpen = _ref4.$popoverOpen;
-  return $popoverOpen && Object(external_styled_components_["css"])(["position:relative;z-index:calc(", " - 2);"], themes_["variables"].zindexFixedNavbar);
-}, Object(themes_["pick"])({
-  enterprise: themes_["variables"].spacingHalf,
-  prisma: themes_["variables"].spacingSmall
-}));
-var StyledInputWrapper = external_styled_components_default.a.div.withConfig({
-  displayName: "NormalStyles__StyledInputWrapper",
-  componentId: "sc-1uwwpco-1"
-})(["flex:1 0 auto;max-width:100%;"]);
-var StyledInput = external_styled_components_default.a.input.withConfig({
-  displayName: "NormalStyles__StyledInput",
-  componentId: "sc-1uwwpco-2"
-})(["", ";min-width:100%;max-width:100%;line-height:12px;", ""], themes_["mixins"].reset('block'), Object(themes_["pick"])({
-  enterprise: {
-    comfortable: Object(external_styled_components_["css"])(["padding:", ";"], themes_["variables"].spacingQuarter),
-    compact: Object(external_styled_components_["css"])(["padding:3px;"])
-  },
-  prisma: {
-    comfortable: Object(external_styled_components_["css"])(["padding:7px 10px;"]),
-    compact: Object(external_styled_components_["css"])(["padding:3px;"])
-  }
-}));
-var StyledOverlay = external_styled_components_default.a.div.withConfig({
-  displayName: "NormalStyles__StyledOverlay",
-  componentId: "sc-1uwwpco-3"
-})(["", ""], function (_ref5) {
-  var $popoveropen = _ref5.$popoveropen;
-  return $popoveropen && Object(external_styled_components_["css"])(["position:fixed;top:0;left:0;width:100%;height:100%;z-index:calc(", " - 2);"], themes_["variables"].zindexFixedNavbar);
-});
-
-// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
-
-// CONCATENATED MODULE: ./src/Multiselect/Normal.tsx
-function Normal_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Normal_typeof = function _typeof(obj) { return typeof obj; }; } else { Normal_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Normal_typeof(obj); }
-
-function Normal_toConsumableArray(arr) { return Normal_arrayWithoutHoles(arr) || Normal_iterableToArray(arr) || Normal_unsupportedIterableToArray(arr) || Normal_nonIterableSpread(); }
-
-function Normal_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 Normal_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return Normal_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 Normal_arrayLikeToArray(o, minLen); }
-
-function Normal_iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function Normal_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return Normal_arrayLikeToArray(arr); }
-
-function Normal_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 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) { Normal_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 Normal_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Normal_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 Normal_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 Normal_extends() { Normal_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 Normal_extends.apply(this, arguments); }
-
-function Normal_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function Normal_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 Normal_createClass(Constructor, protoProps, staticProps) { if (protoProps) Normal_defineProperties(Constructor.prototype, protoProps); if (staticProps) Normal_defineProperties(Constructor, staticProps); return Constructor; }
-
-function Normal_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) Normal_setPrototypeOf(subClass, superClass); }
-
-function Normal_setPrototypeOf(o, p) { Normal_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Normal_setPrototypeOf(o, p); }
-
-function Normal_createSuper(Derived) { var hasNativeReflectConstruct = Normal_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Normal_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Normal_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Normal_possibleConstructorReturn(this, result); }; }
-
-function Normal_possibleConstructorReturn(self, call) { if (call && (Normal_typeof(call) === "object" || typeof call === "function")) { return call; } return Normal_assertThisInitialized(self); }
-
-function Normal_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function Normal_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 Normal_getPrototypeOf(o) { Normal_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Normal_getPrototypeOf(o); }
-
-function Normal_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; }
 
 
 
@@ -1204,6 +620,7 @@ var Normal_propTypes = {
   error: external_prop_types_default.a.bool,
   footerMessage: external_prop_types_default.a.node,
   inline: external_prop_types_default.a.bool,
+  inputId: external_prop_types_default.a.string,
   inputRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   isLoadingOptions: external_prop_types_default.a.bool,
   labelledBy: external_prop_types_default.a.string,
@@ -1324,13 +741,29 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
         return;
       }
 
-      if (eventKeyCode === 'down') {
+      if (eventKeyCode === 'end' && _this.state.open) {
         e.preventDefault();
 
-        if (_this.state.open) {
-          _this.setState(function (state) {
-            return {
-              activeIndex: Math.min(state.activeIndex + 1, _this.availableOptionCount - 1)
+        _this.setState({
+          activeIndex: _this.availableOptionCount - 1
+        });
+      }
+
+      if (eventKeyCode === 'home' && _this.state.open) {
+        e.preventDefault();
+
+        _this.setState({
+          activeIndex: 0
+        });
+      }
+
+      if (eventKeyCode === 'down') {
+        e.preventDefault();
+
+        if (_this.state.open) {
+          _this.setState(function (state) {
+            return {
+              activeIndex: Math.min(state.activeIndex + 1, _this.availableOptionCount - 1)
             };
           });
         } else {
@@ -1452,6 +885,10 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
         var _this$props$onScrollB, _this$props7;
 
         (_this$props$onScrollB = (_this$props7 = _this.props).onScrollBottom) === null || _this$props$onScrollB === void 0 ? void 0 : _this$props$onScrollB.call(_this$props7);
+
+        _this.setState({
+          loadingMoreMessage: "".concat(_this.availableOptionCount, " options, loading more options")
+        });
       }
     });
 
@@ -1477,6 +914,7 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
           maxHeight = _ref4.maxHeight,
           placement = _ref4.placement;
       return /*#__PURE__*/external_react_default.a.createElement(ResultsMenu_default.a, Normal_extends({
+        controlledExternally: true,
         placement: placement !== null && placement !== void 0 ? placement : undefined,
         maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
         isLoading: _this.props.isLoadingOptions,
@@ -1494,7 +932,8 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
       filterKeyword: '',
       hasFocus: false,
       open: false,
-      values: props.defaultValues || []
+      values: props.defaultValues || [],
+      loadingMoreMessage: ''
     };
     _this.availableOptionCount = 0;
     _this.children = [];
@@ -1625,10 +1064,11 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
           disabled = _this$props10.disabled,
           error = _this$props10.error,
           inline = _this$props10.inline,
+          inputId = _this$props10.inputId,
           labelledBy = _this$props10.labelledBy,
           placeholder = _this$props10.placeholder,
           useClickawayOverlay = _this$props10.useClickawayOverlay,
-          otherProps = Normal_objectWithoutProperties(_this$props10, ["allowNewValues", "children", "controlledFilter", "defaultPlacement", "describedBy", "disabled", "error", "inline", "labelledBy", "placeholder", "useClickawayOverlay"]);
+          otherProps = Normal_objectWithoutProperties(_this$props10, ["allowNewValues", "children", "controlledFilter", "defaultPlacement", "describedBy", "disabled", "error", "inline", "inputId", "labelledBy", "placeholder", "useClickawayOverlay"]);
 
       var ariaProps = _objectSpread(_objectSpread({}, Object(external_lodash_["pickBy"])(otherProps, function (val, key) {
         return key === 'role' || key.indexOf('aria-') === 0;
@@ -1674,388 +1114,1822 @@ var Normal_Normal = /*#__PURE__*/function (_Component) {
           return childrenItem;
         }
 
-        var item = childrenItem; // find out if the search string exactly matches a value
+        var item = childrenItem; // find out if the search string exactly matches a value
+
+        if (item.props.value === _this3.state.filterKeyword) {
+          foundExactMatch = true;
+        } // remove items that are already selected
+
+
+        var selectedIndex = currentValues.indexOf(item.props.value);
+
+        if (selectedIndex >= 0) {
+          return null;
+        } // highlight matched text
+
+
+        var _item$props = item.props,
+            itemChildren = _item$props.children,
+            label = _item$props.label,
+            matchRanges = _item$props.matchRanges;
+        var itemSupportsMatchRanges = itemChildren === undefined || Object(external_lodash_["isString"])(itemChildren);
+        var matchRangesCalc = itemSupportsMatchRanges && !controlledFilter && !matchRanges && keywords && Object(filter_["keywordLocations"])(label, keywords); // clone item
+
+        var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
+          key: i,
+          onClick: _this3.handleMenuOptionClick,
+          matchRanges: itemSupportsMatchRanges && (matchRanges || matchRangesCalc) || undefined
+        });
+        return clonedItem;
+      }).filter(function (item) {
+        return item !== null;
+      }); // Add the option to add the new value
+
+      if (allowNewValues && !foundExactMatch && this.state.filterKeyword) {
+        this.children.unshift( /*#__PURE__*/external_react_default.a.createElement(Multiselect_Option, {
+          label: "".concat(this.state.filterKeyword, " (new value)"),
+          value: this.state.filterKeyword,
+          key: "newValue",
+          onClick: this.handleMenuOptionClick
+        }));
+      }
+
+      if (this.state.open) {
+        // highlight the selected Item
+        this.children = external_react_["Children"].map(this.children, function (childrenItem) {
+          if (!childrenItem.props || !Object(external_lodash_["has"])(childrenItem.props, 'value')) {
+            // ignore Headings and Dividers
+            return childrenItem;
+          }
+
+          var item = childrenItem;
+          var active = _this3.availableOptionCount === _this3.state.activeIndex;
+          _this3.availableOptionCount += 1;
+
+          if (!active) {
+            return item;
+          }
+
+          if (!item.props.disabled) {
+            _this3.activeValue = item.props.value;
+          }
+
+          var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
+            active: active,
+            id: _this3.activeItemId,
+            ref: _this3.handleActiveOptionMount
+          });
+          return clonedItem;
+        });
+      }
+
+      var inputWidth = "".concat(this.state.filterKeyword.length * 0.8, "em");
+      return [/*#__PURE__*/external_react_default.a.createElement(StyledBox, Normal_extends({
+        key: "control",
+        "data-test-values": JSON.stringify(currentValues),
+        inline: inline,
+        $hasfocus: this.state.hasFocus
+      }, external_lodash_["omit"].apply(void 0, [otherProps, 'animateLoading', 'controlledFilter', 'defaultValues', 'footerMessage', 'inputRef', 'isLoadingOptions', 'labelledBy', 'menuStyle', 'noOptionsMessage', 'onChange', 'onFilterChange', 'onScrollBottom', 'onClose', 'onOpen', 'values', 'useClickawayOverlay'].concat(_toConsumableArray(Object(external_lodash_["keys"])(ariaProps)))), {
+        onClick: disabled ? undefined : this.handleClick,
+        $disabled: disabled,
+        $error: error,
+        "data-test-popover-id": this.popoverId,
+        $popoverOpen: this.state.open,
+        flex: true,
+        elementRef: this.handleMount,
+        role: "listbox",
+        "aria-disabled": disabled || undefined
+      }), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
+        role: "status",
+        "aria-live": "polite"
+      }, this.state.loadingMoreMessage), this.renderButtons(selectedItems), !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledInputWrapper, {
+        role: "combobox",
+        "aria-owns": this.state.open ? this.popoverId : undefined,
+        "aria-haspopup": true,
+        "aria-expanded": this.state.open
+      }, /*#__PURE__*/external_react_default.a.createElement(StyledInput, Normal_extends({
+        "data-test": "textbox",
+        id: inputId,
+        ref: this.handleInputMount,
+        onBlur: this.handleInputBlur,
+        onFocus: this.handleInputFocus,
+        onChange: this.handleInputChange,
+        onKeyDown: this.handleInputKeyDown,
+        value: this.state.filterKeyword,
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        "aria-autocomplete": "list",
+        style: {
+          flexBasis: inputWidth,
+          width: inputWidth
+        },
+        placeholder: currentValues.length ? '' : placeholder,
+        "aria-activedescendant": this.state.open && this.availableOptionCount > 0 ? this.activeItemId : undefined,
+        "aria-controls": this.state.open ? this.popoverId : undefined
+      }, ariaProps))), !disabled && /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
+        open: this.state.open && !!this.state.el,
+        autoCloseWhenOffScreen: true,
+        anchor: this.state.el,
+        onRequestClose: this.handleRequestClose,
+        canCoverAnchor: false,
+        defaultPlacement: defaultPlacement,
+        repositionMode: "flip",
+        id: this.popoverId
+      }, this.renderMenu)), useClickawayOverlay && this.state.open ? /*#__PURE__*/external_react_default.a.createElement(StyledOverlay, {
+        key: "overlay",
+        $popoveropen: this.state.open,
+        "data-test": "overlay"
+      }) : null];
+    }
+  }]);
+
+  return Normal;
+}(external_react_["Component"]);
+
+Normal_defineProperty(Normal_Normal, "propTypes", Normal_propTypes);
+
+Normal_defineProperty(Normal_Normal, "defaultProps", Normal_defaultProps);
+
+Normal_defineProperty(Normal_Normal, "Option", Multiselect_Option);
+
+Normal_defineProperty(Normal_Normal, "Divider", Menu_["Divider"]);
+
+Normal_defineProperty(Normal_Normal, "Heading", Menu_["Heading"]);
+
+/* harmony default export */ var Multiselect_Normal = (Normal_Normal);
+// CONCATENATED MODULE: ./src/Multiselect/Multiselect.tsx
+function Multiselect_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Multiselect_typeof = function _typeof(obj) { return typeof obj; }; } else { Multiselect_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Multiselect_typeof(obj); }
+
+function Multiselect_extends() { Multiselect_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 Multiselect_extends.apply(this, arguments); }
+
+function Multiselect_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function Multiselect_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 Multiselect_createClass(Constructor, protoProps, staticProps) { if (protoProps) Multiselect_defineProperties(Constructor.prototype, protoProps); if (staticProps) Multiselect_defineProperties(Constructor, staticProps); return Constructor; }
+
+function Multiselect_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) Multiselect_setPrototypeOf(subClass, superClass); }
+
+function Multiselect_setPrototypeOf(o, p) { Multiselect_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Multiselect_setPrototypeOf(o, p); }
+
+function Multiselect_createSuper(Derived) { var hasNativeReflectConstruct = Multiselect_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Multiselect_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Multiselect_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Multiselect_possibleConstructorReturn(this, result); }; }
+
+function Multiselect_possibleConstructorReturn(self, call) { if (call && (Multiselect_typeof(call) === "object" || typeof call === "function")) { return call; } return Multiselect_assertThisInitialized(self); }
+
+function Multiselect_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function Multiselect_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 Multiselect_getPrototypeOf(o) { Multiselect_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Multiselect_getPrototypeOf(o); }
+
+function Multiselect_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 Multiselect_propTypes = {
+  allowNewValues: external_prop_types_default.a.bool,
+  animateLoading: external_prop_types_default.a.bool,
+  children: external_prop_types_default.a.node,
+  compact: external_prop_types_default.a.bool,
+  controlledFilter: external_prop_types_default.a.bool,
+  defaultPlacement: external_prop_types_default.a.oneOf(['above', 'below', 'vertical']),
+  defaultValues: external_prop_types_default.a.array,
+  describedBy: external_prop_types_default.a.string,
+  disabled: external_prop_types_default.a.bool,
+  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  error: external_prop_types_default.a.bool,
+  footerMessage: external_prop_types_default.a.node,
+  inline: external_prop_types_default.a.bool,
+  inputId: external_prop_types_default.a.string,
+  inputRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  isLoadingOptions: external_prop_types_default.a.bool,
+  labelledBy: external_prop_types_default.a.string,
+  loadingMessage: external_prop_types_default.a.node,
+  menuStyle: external_prop_types_default.a.object,
+  name: external_prop_types_default.a.string,
+  noOptionsMessage: external_prop_types_default.a.node,
+  onChange: external_prop_types_default.a.func,
+  onClose: external_prop_types_default.a.func,
+  onFilterChange: external_prop_types_default.a.func,
+  onOpen: external_prop_types_default.a.func,
+  onScrollBottom: external_prop_types_default.a.func,
+  placeholder: external_prop_types_default.a.string,
+  tabConfirmsNewValue: external_prop_types_default.a.bool,
+  useClickawayOverlay: external_prop_types_default.a.bool,
+  values: external_prop_types_default.a.array
+};
+var Multiselect_defaultProps = {
+  allowNewValues: false,
+  animateLoading: false,
+  compact: false,
+  defaultPlacement: 'vertical',
+  disabled: false,
+  inline: false,
+  isLoadingOptions: false,
+  menuStyle: {},
+  noOptionsMessage: Object(i18n_["_"])('No matches'),
+  placeholder: Object(i18n_["_"])('Select...'),
+  tabConfirmsNewValue: false,
+  useClickawayOverlay: false
+};
+
+function isCompact(props) {
+  return props && props.compact === true;
+}
+
+var Multiselect_Multiselect = /*#__PURE__*/function (_Component) {
+  Multiselect_inherits(Multiselect, _Component);
+
+  var _super = Multiselect_createSuper(Multiselect);
+
+  function Multiselect() {
+    Multiselect_classCallCheck(this, Multiselect);
+
+    return _super.apply(this, arguments);
+  }
+
+  Multiselect_createClass(Multiselect, [{
+    key: "render",
+    // @docs-props-type MultiselectPropsBase
+    value: function render() {
+      if (isCompact(this.props)) {
+        return /*#__PURE__*/external_react_default.a.createElement(Multiselect_Compact, Multiselect_extends({
+          "data-test": "multiselect"
+        }, Object(external_lodash_["omit"])(this.props, 'compact')));
+      }
+
+      return /*#__PURE__*/external_react_default.a.createElement(Multiselect_Normal, Multiselect_extends({
+        "data-test": "multiselect"
+      }, Object(external_lodash_["omit"])(this.props, 'compact')));
+    }
+  }]);
+
+  return Multiselect;
+}(external_react_["Component"]);
+
+Multiselect_defineProperty(Multiselect_Multiselect, "propTypes", Multiselect_propTypes);
+
+Multiselect_defineProperty(Multiselect_Multiselect, "defaultProps", Multiselect_defaultProps);
+
+Multiselect_defineProperty(Multiselect_Multiselect, "Option", Multiselect_Option);
+
+Multiselect_defineProperty(Multiselect_Multiselect, "Heading", Menu_["Heading"]);
+
+Multiselect_defineProperty(Multiselect_Multiselect, "Divider", Menu_["Divider"]);
+
+/* harmony default export */ var src_Multiselect_Multiselect = (Multiselect_Multiselect);
+
+// CONCATENATED MODULE: ./src/Multiselect/index.ts
+
+
+
+/***/ }),
+
+/***/ 12:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
+/**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+function updateReactRef(ref, current) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(current);
+    } else {
+      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+      // the intention here is to signal "we will take care of setting 'current', not you".
+      ref.current = current; // eslint-disable-line no-param-reassign
+    }
+  }
+}
+
+
+
+/***/ }),
+
+/***/ 13:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Menu");
+
+/***/ }),
+
+/***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ScreenReaderContent");
+
+/***/ }),
+
+/***/ 16:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Button");
+
+/***/ }),
+
+/***/ 17:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Popover");
+
+/***/ }),
+
+/***/ 19:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Dropdown");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 23:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/filter");
+
+/***/ }),
+
+/***/ 26:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Text");
+
+/***/ }),
+
+/***/ 28:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _splunk_react_ui_Menu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
+/* harmony import */ var _splunk_react_ui_Menu__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Menu__WEBPACK_IMPORTED_MODULE_2__);
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+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 propTypes = {
+  /** @private */
+  active: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
+  children: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.node,
+  description: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,
+  descriptionPosition: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOf(['right', 'bottom']),
+  disabled: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
+  hidden: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
+  icon: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.node,
+  label: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string.isRequired,
+
+  /**
+   * @private Passed down from <BaseSelect>
+   */
+  multiple: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
+  matchRanges: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.shape({
+    start: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number.isRequired,
+    end: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number.isRequired
+  })),
+
+  /** @private */
+  onClick: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
+
+  /** @private */
+  selected: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
+  truncate: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
+  value: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool]).isRequired
+};
+var defaultProps = {
+  descriptionPosition: 'bottom',
+  disabled: false,
+  multiple: false,
+  selected: false,
+  truncate: false
+};
+
+/**
+ * An option within a `Multiselect`. This inherits from
+ * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
+ * so any elements passed to it must also be pure.
+ */
+var Option = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Option, _PureComponent);
+
+  var _super = _createSuper(Option);
+
+  function Option() {
+    var _this;
+
+    _classCallCheck(this, Option);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "c", null);
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          value = _this$props.value,
+          disabled = _this$props.disabled;
+
+      if (!disabled) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e, {
+          value: value
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMount", function (c) {
+      _this.c = c;
+    });
+
+    return _this;
+  }
+
+  _createClass(Option, [{
+    key: "scrollIntoViewIfNeeded",
+    value: function scrollIntoViewIfNeeded() {
+      var _this$c;
+
+      (_this$c = this.c) === null || _this$c === void 0 ? void 0 : _this$c.scrollIntoViewIfNeeded();
+    }
+    /**
+     * Place focus on the button.
+     */
+
+  }, {
+    key: "focus",
+    value: function focus() {
+      var _this$c2;
+
+      (_this$c2 = this.c) === null || _this$c2 === void 0 ? void 0 : _this$c2.focus();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          value = _this$props2.value,
+          children = _this$props2.children,
+          label = _this$props2.label,
+          multiple = _this$props2.multiple,
+          otherProps = _objectWithoutProperties(_this$props2, ["value", "children", "label", "multiple"]);
+
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_splunk_react_ui_Menu__WEBPACK_IMPORTED_MODULE_2__["Item"], _extends({
+        "aria-selected": this.props.selected,
+        "data-test-value": value,
+        "data-test": "option",
+        ref: this.handleMount
+      }, otherProps, {
+        selectable: true,
+        selectableAppearance: multiple ? 'checkbox' : undefined,
+        onClick: this.handleClick,
+        role: "option",
+        value: value.toString()
+      }), children || label);
+    }
+  }]);
+
+  return Option;
+}(react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"]);
+
+_defineProperty(Option, "propTypes", propTypes);
+
+_defineProperty(Option, "defaultProps", defaultProps);
+
+/* harmony default export */ __webpack_exports__["a"] = (Option);
+
+/***/ }),
+
+/***/ 29:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Link");
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 36:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CaretDown; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(37);
+/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
+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 Prisma24(_ref) {
+  var otherProps = _extends({}, _ref);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({
+    viewBox: "0 0 24 24"
+  }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
+    d: "M7.2788 9.00002C6.84609 9.00002 6.61768 9.51239 6.90691 9.83423L11.4078 14.8426C11.6065 15.0637 11.953 15.0636 12.1517 14.8425L16.6499 9.8341C16.939 9.51223 16.7106 9 16.2779 9L7.2788 9.00002Z",
+    fill: "currentColor"
+  }));
+}
+
+function CaretDown(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ThemedIcon__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _extends({
+    Enterprise: _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default.a,
+    Prisma24: Prisma24
+  }, props));
+}
+
+/***/ }),
+
+/***/ 37:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/Caret");
+
+/***/ }),
+
+/***/ 39:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ResultsMenu");
+
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 42:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "a", function() { return /* reexport */ Menu_["Divider"]; });
+__webpack_require__.d(__webpack_exports__, "b", function() { return /* reexport */ Menu_["Heading"]; });
+__webpack_require__.d(__webpack_exports__, "d", function() { return /* binding */ isOption; });
+
+// UNUSED EXPORTS: Option
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(1);
+var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
+
+// EXTERNAL MODULE: external "lodash"
+var external_lodash_ = __webpack_require__(4);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/filter"
+var filter_ = __webpack_require__(23);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/id"
+var id_ = __webpack_require__(10);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
+var i18n_ = __webpack_require__(5);
+
+// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
+var keyboard_ = __webpack_require__(9);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/Dropdown"
+var Dropdown_ = __webpack_require__(19);
+var Dropdown_default = /*#__PURE__*/__webpack_require__.n(Dropdown_);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/Link"
+var Link_ = __webpack_require__(29);
+var Link_default = /*#__PURE__*/__webpack_require__.n(Link_);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/Menu"
+var Menu_ = __webpack_require__(13);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/ResultsMenu"
+var ResultsMenu_ = __webpack_require__(39);
+var ResultsMenu_default = /*#__PURE__*/__webpack_require__.n(ResultsMenu_);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/Text"
+var Text_ = __webpack_require__(26);
+var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
+
+// EXTERNAL MODULE: ./src/icons/CaretDown.tsx
+var CaretDown = __webpack_require__(36);
+
+// EXTERNAL MODULE: ./src/Select/OptionBase.tsx
+var OptionBase = __webpack_require__(28);
+
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(3);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/Button"
+var Button_ = __webpack_require__(16);
+var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
+
+// EXTERNAL MODULE: external "@splunk/themes"
+var themes_ = __webpack_require__(0);
+
+// CONCATENATED MODULE: ./src/Select/SelectBaseStyles.ts
+
+
+
+
+var StyledButton = external_styled_components_default()(Button_default.a).withConfig({
+  displayName: "SelectBaseStyles__StyledButton",
+  componentId: "sc-16cj7sk-0"
+})(["&[data-inline]{width:", ";}", ""], function (_ref) {
+  var $multiple = _ref.$multiple;
+  return $multiple ? '400px' : 'auto';
+}, function (_ref2) {
+  var $multiple = _ref2.$multiple;
+  return !$multiple && 'flex-grow: 0;';
+});
+var StyledLinkIcon = external_styled_components_default.a.span.withConfig({
+  displayName: "SelectBaseStyles__StyledLinkIcon",
+  componentId: "sc-16cj7sk-1"
+})(["padding-right:2px;"]);
+var StyledLinkCaret = external_styled_components_default.a.span.withConfig({
+  displayName: "SelectBaseStyles__StyledLinkCaret",
+  componentId: "sc-16cj7sk-2"
+})(["padding-left:2px;"]);
+var StyledFilter = external_styled_components_default.a.div.withConfig({
+  displayName: "SelectBaseStyles__StyledFilter",
+  componentId: "sc-16cj7sk-3"
+})(["padding:", ";min-width:160px;"], Object(themes_["pick"])({
+  enterprise: '8px',
+  prisma: '10px 16px'
+}));
+var StyledCount = external_styled_components_default.a.span.withConfig({
+  displayName: "SelectBaseStyles__StyledCount",
+  componentId: "sc-16cj7sk-4"
+})(["padding-right:", ";"], Object(themes_["pick"])({
+  enterprise: themes_["variables"].spacingQuarter,
+  prisma: themes_["variables"].spacingXSmall
+}));
+var StyledControlsLink = external_styled_components_default()(Link_default.a).withConfig({
+  displayName: "SelectBaseStyles__StyledControlsLink",
+  componentId: "sc-16cj7sk-5"
+})(["", ";"], function (_ref3) {
+  var $disabled = _ref3.$disabled;
+  return $disabled && Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled);
+});
+var StyledToggleAllControls = external_styled_components_default.a.div.withConfig({
+  displayName: "SelectBaseStyles__StyledToggleAllControls",
+  componentId: "sc-16cj7sk-6"
+})(["padding:", ";", ""], Object(themes_["pick"])({
+  enterprise: "5px 8px",
+  prisma: '10px 16px'
+}), Object(themes_["pickVariant"])('$placement', {
+  above: {
+    enterprise: Object(external_styled_components_["css"])(["border-top:", ";"], themes_["variables"].border),
+    prisma: Object(external_styled_components_["css"])(["border-top:1px solid ", ";"], themes_["variables"].neutral200)
+  },
+  below: {
+    enterprise: Object(external_styled_components_["css"])(["border-bottom:", ";"], themes_["variables"].border),
+    prisma: Object(external_styled_components_["css"])(["border-bottom:1px solid ", ";"], themes_["variables"].neutral200)
+  }
+}));
+
+// CONCATENATED MODULE: ./src/Select/SelectBase.tsx
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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 _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 _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 propTypes = {
+  allowNewValues: external_prop_types_default.a.bool,
+  animateLoading: external_prop_types_default.a.bool,
+  appearance: external_prop_types_default.a.oneOf(['default', 'link', 'primary', 'pill', 'toggle', 'flat']),
+  append: external_prop_types_default.a.bool,
+  children: external_prop_types_default.a.node,
+  defaultPlacement: external_prop_types_default.a.oneOf(['above', 'below', 'vertical']),
+  defaultValues: external_prop_types_default.a.array,
+  describedBy: external_prop_types_default.a.string,
+  disabled: external_prop_types_default.a.bool,
+  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  error: external_prop_types_default.a.bool,
+  filter: external_prop_types_default.a.oneOf([false, true, 'controlled']),
+  footerMessage: external_prop_types_default.a.node,
+  inline: external_prop_types_default.a.bool,
+  inputId: external_prop_types_default.a.string,
+  inputRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  isLoadingOptions: external_prop_types_default.a.bool,
+  labelledBy: external_prop_types_default.a.string,
+  labelText: external_prop_types_default.a.string,
+  loadingMessage: external_prop_types_default.a.node,
+  menuStyle: external_prop_types_default.a.object,
+  multiple: external_prop_types_default.a.bool,
+  name: external_prop_types_default.a.string,
+  noOptionsMessage: external_prop_types_default.a.node,
+  onChange: external_prop_types_default.a.func,
+  onClose: external_prop_types_default.a.func,
+  onFilterChange: external_prop_types_default.a.func,
+  onOpen: external_prop_types_default.a.func,
+  onScrollBottom: external_prop_types_default.a.func,
+  placeholder: external_prop_types_default.a.string,
+  prefixLabel: external_prop_types_default.a.string,
+  prepend: external_prop_types_default.a.bool,
+  suffixLabel: external_prop_types_default.a.string,
+  tabConfirmsNewValue: external_prop_types_default.a.bool,
+  values: external_prop_types_default.a.array
+};
+var defaultProps = {
+  allowNewValues: false,
+  animateLoading: false,
+  appearance: 'toggle',
+  append: false,
+  defaultPlacement: 'vertical',
+  disabled: false,
+  filter: false,
+  inline: false,
+  isLoadingOptions: false,
+  menuStyle: {},
+  multiple: false,
+  noOptionsMessage: Object(i18n_["_"])('No matches'),
+  placeholder: Object(i18n_["_"])('Select...'),
+  prepend: false,
+  tabConfirmsNewValue: false
+};
+
+function isOption(child) {
+  return child && Object(external_lodash_["has"])(child.props, 'value');
+}
+
+var SelectBase_SelectBase = /*#__PURE__*/function (_Component) {
+  _inherits(SelectBase, _Component);
+
+  var _super = _createSuper(SelectBase);
+
+  _createClass(SelectBase, null, [{
+    key: "validateAppearance",
+    // @docs-props-type CompactPropsBase
+    value: function validateAppearance(props) {
+      if (false) {}
+    }
+  }]);
+
+  function SelectBase(props) {
+    var _this;
+
+    _classCallCheck(this, SelectBase);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "activeItemId", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "activeValue", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "availableOptionCount", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "controlledExternally", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "displayedValues", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "dropdown", null);
+
+    _defineProperty(_assertThisInitialized(_this), "firstSelectedOption", null);
+
+    _defineProperty(_assertThisInitialized(_this), "firstSelectedOptionIndex", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "menuId", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "selectedOptionCount", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function (e) {
+      var _this$getCurrentValue, _this$props$onChange, _this$props2;
+
+      var _this$props = _this.props,
+          name = _this$props.name,
+          children = _this$props.children,
+          multiple = _this$props.multiple; // this doesn't make sense if we can't select multiple values
+
+      if (!multiple) {
+        return;
+      }
+
+      var values = Object(external_lodash_["uniq"])(((_this$getCurrentValue = _this.getCurrentValues()) !== null && _this$getCurrentValue !== void 0 ? _this$getCurrentValue : []).concat(_this.displayedValues));
+
+      if (!_this.isControlled()) {
+        values = external_react_default.a.Children.toArray(children).filter(function (child) {
+          return isOption(child) && Object(external_lodash_["includes"])(values, child.props.value) && !child.props.disabled;
+        }).map(function (child) {
+          return child.props.value;
+        });
+
+        _this.setState({
+          values: values
+        });
+      }
+
+      (_this$props$onChange = (_this$props2 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, e, {
+        values: values,
+        name: name
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClearAll", function (e) {
+      var _this$props$onChange2, _this$props3;
+
+      // this doesn't make sense if we can't select multiple values
+      if (!_this.props.multiple) {
+        return;
+      } // Clear the filtered items, items when filtering. Else clear all the items.
+
+
+      var values = _this.state.filterKeyword ? external_lodash_["without"].apply(void 0, [_this.getCurrentValues()].concat(_toConsumableArray(_this.displayedValues))) : [];
+      var name = _this.props.name;
+
+      if (!_this.isControlled()) {
+        _this.setState({
+          values: values
+        });
+      }
+
+      (_this$props$onChange2 = (_this$props3 = _this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props3, e, {
+        values: values,
+        name: name
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTextKeyDown", function (e) {
+      var _this$props4 = _this.props,
+          children = _this$props4.children,
+          onScrollBottom = _this$props4.onScrollBottom,
+          tabConfirmsNewValue = _this$props4.tabConfirmsNewValue;
+      var eventKeyCode = Object(keyboard_["keycode"])(e.nativeEvent);
+
+      if (eventKeyCode === 'tab') {
+        if (tabConfirmsNewValue && !Object(external_lodash_["isUndefined"])(_this.activeValue) && _this.availableOptionCount <= 1) {
+          e.preventDefault();
+
+          _this.toggleValue(e, _this.activeValue);
+        }
+      }
+
+      if (e.shiftKey || e.metaKey || e.ctrlKey) {
+        return;
+      }
+
+      if (eventKeyCode === 'down') {
+        e.preventDefault();
+
+        _this.setState(function (state) {
+          return {
+            activeIndex: Math.min(state.activeIndex + 1, _this.availableOptionCount - 1)
+          };
+        });
+
+        if (children && onScrollBottom) {
+          var _this$getCurrentValue2;
+
+          var beforeLastChild = external_react_["Children"].toArray(children).length - (2 + ((_this$getCurrentValue2 = _this.getCurrentValues()) !== null && _this$getCurrentValue2 !== void 0 ? _this$getCurrentValue2 : []).length);
+
+          if (_this.state.activeIndex === beforeLastChild) {
+            onScrollBottom();
+          }
+        }
+      }
+
+      if (eventKeyCode === 'up') {
+        e.preventDefault();
+
+        _this.setState(function (state) {
+          return {
+            activeIndex: Math.max(state.activeIndex - 1, 0)
+          };
+        });
+      }
+
+      if (eventKeyCode === 'enter' && !Object(external_lodash_["isUndefined"])(_this.activeValue) && _this.state.open) {
+        e.preventDefault();
+
+        _this.toggleValue(e, _this.activeValue);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuOptionClick", function (e, _ref) {
+      var value = _ref.value;
+      e.preventDefault();
+
+      _this.toggleValue(e, value);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTextChange", function (e, _ref2) {
+      var _this$props$onFilterC, _this$props5;
+
+      var value = _ref2.value;
+
+      _this.setState({
+        filterKeyword: value,
+        open: true,
+        activeIndex: 0
+      });
+
+      (_this$props$onFilterC = (_this$props5 = _this.props).onFilterChange) === null || _this$props$onFilterC === void 0 ? void 0 : _this$props$onFilterC.call(_this$props5, e, {
+        keyword: value
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTextFocus", function () {
+      _this.setState({
+        textHasFocus: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTextBlur", function () {
+      _this.setState({
+        textHasFocus: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleRequestOpen", function (e) {
+      var _this$getCurrentValue3, _this$props$onFilterC2, _this$props7;
+
+      var multiple = _this.props.multiple;
+
+      _this.setState({
+        open: true,
+        // in non-multiple mode, don't move values to the top of the list
+        topValues: multiple ? (_this$getCurrentValue3 = _this.getCurrentValues()) !== null && _this$getCurrentValue3 !== void 0 ? _this$getCurrentValue3 : [] : []
+      }, function () {
+        var _this$props$onOpen, _this$props6;
+
+        (_this$props$onOpen = (_this$props6 = _this.props).onOpen) === null || _this$props$onOpen === void 0 ? void 0 : _this$props$onOpen.call(_this$props6);
+
+        if (_this.firstSelectedOption && !_this.hasFilter()) {
+          _this.firstSelectedOption.focus();
+        } else {
+          var _this$firstSelectedOp;
+
+          _this.setState({
+            activeIndex: (_this$firstSelectedOp = _this.firstSelectedOptionIndex) !== null && _this$firstSelectedOp !== void 0 ? _this$firstSelectedOp : 0
+          });
+        }
+      });
+
+      (_this$props$onFilterC2 = (_this$props7 = _this.props).onFilterChange) === null || _this$props$onFilterC2 === void 0 ? void 0 : _this$props$onFilterC2.call(_this$props7, e, {
+        keyword: ''
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function () {
+      _this.setState({
+        open: false,
+        activeIndex: 0
+      }, function () {
+        var _this$props$onClose, _this$props8;
+
+        (_this$props$onClose = (_this$props8 = _this.props).onClose) === null || _this$props$onClose === void 0 ? void 0 : _this$props$onClose.call(_this$props8);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleScrollBottom", function () {
+      if (_this.state.open && !_this.props.isLoadingOptions) {
+        var _this$props$onScrollB, _this$props9;
+
+        (_this$props$onScrollB = (_this$props9 = _this.props).onScrollBottom) === null || _this$props$onScrollB === void 0 ? void 0 : _this$props$onScrollB.call(_this$props9);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleActiveOptionMount", function (c) {
+      c === null || c === void 0 ? void 0 : c.scrollIntoViewIfNeeded();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelectedItemMount", function (c) {
+      _this.firstSelectedOption = c;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "createChildren", function () {
+      var _this$state = _this.state,
+          filterKeyword = _this$state.filterKeyword,
+          textHasFocus = _this$state.textHasFocus,
+          topValues = _this$state.topValues;
+      var _this$props10 = _this.props,
+          allowNewValues = _this$props10.allowNewValues,
+          filter = _this$props10.filter,
+          multiple = _this$props10.multiple;
+
+      var currentValues = _this.getCurrentValues();
+
+      _this.availableOptionCount = 0;
+      _this.firstSelectedOptionIndex = undefined;
+      _this.selectedOptionCount = 0;
+      _this.activeValue = undefined;
+      var foundExactMatch;
+      var childrenTopCount = 0;
+      var hasDivider = false; // used to avoid overwriting the selected item ref in multiple mode
+
+      var foundSelected;
+      var children = external_react_["Children"].toArray(_this.props.children).reduce(function (acc, item, i) {
+        // ignore Headings and Dividers
+        if (!isOption(item)) {
+          acc.push(item);
+          return acc;
+        } // Find out if the search string exactly matches a value
+
 
-        if (item.props.value === _this3.state.filterKeyword) {
+        if (item.props.value === _this.state.filterKeyword) {
           foundExactMatch = true;
-        } // remove items that are already selected
+        }
 
+        var selected = currentValues && currentValues.indexOf(item.props.value) >= 0; // Format the Menu.Item
 
-        var selectedIndex = currentValues.indexOf(item.props.value);
+        var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
+          key: item.key || i,
+          onClick: _this.handleMenuOptionClick,
+          selected: selected,
+          multiple: multiple,
+          role: 'option',
+          ref: selected && !foundSelected ? _this.handleSelectedItemMount : undefined
+        });
 
-        if (selectedIndex >= 0) {
-          return null;
-        } // highlight matched text
+        if (selected) {
+          foundSelected = true;
+        }
 
+        if (topValues && topValues.indexOf(item.props.value) >= 0) {
+          if (childrenTopCount === 0) {
+            acc.splice(childrenTopCount, 0, /*#__PURE__*/external_react_default.a.createElement(Menu_["Divider"], {
+              key: "topDivider"
+            }));
+            hasDivider = true;
+          }
 
-        var _item$props = item.props,
-            itemChildren = _item$props.children,
-            label = _item$props.label,
-            matchRanges = _item$props.matchRanges;
-        var itemSupportsMatchRanges = itemChildren === undefined || Object(external_lodash_["isString"])(itemChildren);
-        var matchRangesCalc = itemSupportsMatchRanges && !controlledFilter && !matchRanges && keywords && Object(filter_["keywordLocations"])(label, keywords); // clone item
+          acc.splice(childrenTopCount, 0, clonedItem);
+          childrenTopCount += 1;
+        } else {
+          acc.push(clonedItem);
+        }
 
-        var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-          key: i,
-          onClick: _this3.handleMenuOptionClick,
-          matchRanges: itemSupportsMatchRanges && (matchRanges || matchRangesCalc) || undefined
-        });
-        return clonedItem;
-      }).filter(function (item) {
-        return item !== null;
-      }); // Add the option to add the new value
+        return acc;
+      }, []); // In multiple mode, add missing items
 
-      if (allowNewValues && !foundExactMatch && this.state.filterKeyword) {
-        this.children.unshift( /*#__PURE__*/external_react_default.a.createElement(Multiselect_Option, {
-          label: "".concat(this.state.filterKeyword, " (new value)"),
-          value: this.state.filterKeyword,
-          key: "newValue",
-          onClick: this.handleMenuOptionClick
-        }));
-      }
+      if (multiple) {
+        Object(external_lodash_["forEachRight"])(currentValues, function (value) {
+          var matchedItem = Object(external_lodash_["find"])(children, function (item) {
+            return isOption(item) && item.props && item.props.value === value;
+          });
 
-      if (this.state.open) {
-        // highlight the selected Item
-        this.children = external_react_["Children"].map(this.children, function (childrenItem) {
-          if (!childrenItem.props || !Object(external_lodash_["has"])(childrenItem.props, 'value')) {
-            // ignore Headings and Dividers
-            return childrenItem;
-          }
+          if (!matchedItem) {
+            if (value === _this.state.filterKeyword) {
+              foundExactMatch = true;
+            }
 
-          var item = childrenItem;
-          var active = _this3.availableOptionCount === _this3.state.activeIndex;
-          _this3.availableOptionCount += 1;
+            var isTopValue = topValues && topValues.indexOf(value) >= 0;
+            var topLength = topValues.length;
 
-          if (!active) {
-            return item;
-          }
+            if (childrenTopCount === 0) {
+              children.splice(0, 0, /*#__PURE__*/external_react_default.a.createElement(Menu_["Divider"], {
+                key: "topDivider"
+              }));
+              childrenTopCount += 1;
+              hasDivider = true;
+            }
 
-          if (!item.props.disabled) {
-            _this3.activeValue = item.props.value;
-          }
+            children.splice(isTopValue ? 0 : topLength + 1, 0, /*#__PURE__*/external_react_default.a.createElement(OptionBase["a" /* default */], {
+              label: String(value),
+              value: value,
+              key: "missing-value-".concat(value),
+              onClick: _this.handleMenuOptionClick,
+              multiple: multiple,
+              selected: true
+            }));
 
-          var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-            active: active,
-            id: _this3.activeItemId,
-            ref: _this3.handleActiveOptionMount
-          });
-          return clonedItem;
+            if (isTopValue) {
+              childrenTopCount += 1;
+            }
+          }
         });
       }
 
-      var inputWidth = "".concat(this.state.filterKeyword.length * 0.8, "em");
-      return [/*#__PURE__*/external_react_default.a.createElement(StyledBox, Normal_extends({
-        key: "control",
-        "data-test-values": JSON.stringify(currentValues),
-        inline: inline,
-        $hasfocus: this.state.hasFocus
-      }, external_lodash_["omit"].apply(void 0, [otherProps, 'animateLoading', 'controlledFilter', 'defaultValues', 'footerMessage', 'inputRef', 'isLoadingOptions', 'labelledBy', 'menuStyle', 'noOptionsMessage', 'onChange', 'onFilterChange', 'onScrollBottom', 'onClose', 'onOpen', 'values', 'useClickawayOverlay'].concat(Normal_toConsumableArray(Object(external_lodash_["keys"])(ariaProps)))), {
-        onClick: disabled ? undefined : this.handleClick,
-        $disabled: disabled,
-        $error: error,
-        "data-test-popover-id": this.popoverId,
-        $popoverOpen: this.state.open,
-        flex: true,
-        elementRef: this.handleMount,
-        role: "listbox",
-        "aria-disabled": disabled || undefined
-      }), this.renderButtons(selectedItems), !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledInputWrapper, {
-        role: "combobox",
-        "aria-owns": this.state.open ? this.popoverId : undefined,
-        "aria-haspopup": true,
-        "aria-expanded": this.state.open
-      }, /*#__PURE__*/external_react_default.a.createElement(StyledInput, Normal_extends({
-        "data-test": "textbox",
-        ref: this.handleInputMount,
-        onBlur: this.handleInputBlur,
-        onFocus: this.handleInputFocus,
-        onChange: this.handleInputChange,
-        onKeyDown: this.handleInputKeyDown,
-        value: this.state.filterKeyword,
-        autoCapitalize: "off",
-        autoComplete: "off",
-        autoCorrect: "off",
-        spellCheck: false,
-        "aria-autocomplete": "list",
-        style: {
-          flexBasis: inputWidth,
-          width: inputWidth
-        },
-        placeholder: currentValues.length ? '' : placeholder,
-        "aria-activedescendant": this.state.open && this.availableOptionCount > 0 ? this.activeItemId : undefined,
-        "aria-controls": this.state.open ? this.popoverId : undefined
-      }, ariaProps))), !disabled && /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
-        open: this.state.open && !!this.state.el,
-        autoCloseWhenOffScreen: true,
-        anchor: this.state.el,
-        onRequestClose: this.handleRequestClose,
-        canCoverAnchor: false,
-        defaultPlacement: defaultPlacement,
-        repositionMode: "flip",
-        id: this.popoverId
-      }, this.renderMenu)), useClickawayOverlay && this.state.open ? /*#__PURE__*/external_react_default.a.createElement(StyledOverlay, {
-        key: "overlay",
-        $popoveropen: this.state.open,
-        "data-test": "overlay"
-      }) : null];
-    }
-  }]);
+      var controlledFilter = filter === 'controlled'; // Filter the items
 
-  return Normal;
-}(external_react_["Component"]);
+      var keywords = Object(filter_["stringToKeywords"])(filterKeyword);
+      children = controlledFilter ? children : children.filter(function (option) {
+        if (isOption(option)) {
+          return Object(filter_["testPhrase"])(option.props.label, keywords);
+        }
 
-Normal_defineProperty(Normal_Normal, "propTypes", Normal_propTypes);
+        return true; // Keep all headers and non-interactive options
+      }) // highlight the matched text
+      .map(function (option) {
+        if (!isOption(option)) {
+          return option;
+        } // highlight matched text
 
-Normal_defineProperty(Normal_Normal, "defaultProps", Normal_defaultProps);
 
-Normal_defineProperty(Normal_Normal, "Option", Multiselect_Option);
+        var matchRanges = keywords && Object(filter_["keywordLocations"])(option.props.label, keywords);
+        return /*#__PURE__*/Object(external_react_["cloneElement"])(option, {
+          matchRanges: matchRanges || undefined
+        });
+      }); // Add the option to add the new value
 
-Normal_defineProperty(Normal_Normal, "Divider", Menu_["Divider"]);
+      if (allowNewValues && !foundExactMatch && filterKeyword) {
+        var insertIndex = hasDivider ? childrenTopCount + 1 : childrenTopCount;
+        children.splice(insertIndex, 0, /*#__PURE__*/external_react_default.a.createElement(OptionBase["a" /* default */], {
+          label: "".concat(filterKeyword, " (new value)"),
+          value: filterKeyword,
+          key: "newValue",
+          multiple: multiple,
+          onClick: _this.handleMenuOptionClick
+        }));
+      } // Highlight the selected Items and remove hidden
 
-Normal_defineProperty(Normal_Normal, "Heading", Menu_["Heading"]);
 
-/* harmony default export */ var Multiselect_Normal = (Normal_Normal);
-// CONCATENATED MODULE: ./src/Multiselect/Multiselect.tsx
-function Multiselect_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Multiselect_typeof = function _typeof(obj) { return typeof obj; }; } else { Multiselect_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Multiselect_typeof(obj); }
+      children = children.reduce(function (acc, item) {
+        // ignore Dividers & Headings
+        if (!isOption(item)) {
+          acc.push(item);
+          return acc;
+        } // Ignore any hidden items
 
-function Multiselect_extends() { Multiselect_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 Multiselect_extends.apply(this, arguments); }
 
-function Multiselect_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+        if (item.props && item.props.hidden) {
+          return acc;
+        }
 
-function Multiselect_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); } }
+        if (item.props.selected && !item.props.disabled && _this.firstSelectedOptionIndex == null) {
+          _this.firstSelectedOptionIndex = _this.availableOptionCount;
+        }
 
-function Multiselect_createClass(Constructor, protoProps, staticProps) { if (protoProps) Multiselect_defineProperties(Constructor.prototype, protoProps); if (staticProps) Multiselect_defineProperties(Constructor, staticProps); return Constructor; }
+        var active = _this.availableOptionCount === _this.state.activeIndex;
+        _this.availableOptionCount += 1;
+        _this.selectedOptionCount += item.props.selected ? 1 : 0;
 
-function Multiselect_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) Multiselect_setPrototypeOf(subClass, superClass); }
+        if (!active || !textHasFocus) {
+          acc.push(item);
+          return acc;
+        }
 
-function Multiselect_setPrototypeOf(o, p) { Multiselect_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Multiselect_setPrototypeOf(o, p); }
+        if (!item.props.disabled) {
+          _this.activeValue = item.props.value;
+        }
 
-function Multiselect_createSuper(Derived) { var hasNativeReflectConstruct = Multiselect_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Multiselect_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Multiselect_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Multiselect_possibleConstructorReturn(this, result); }; }
+        var clonedItem = /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
+          active: active,
+          id: _this.activeItemId,
+          ref: _this.handleActiveOptionMount
+        });
+        acc.push(clonedItem);
+        return acc;
+      }, []);
+      _this.displayedValues = children.reduce(function (acc, item) {
+        if (isOption(item)) {
+          acc.push(item.props.value);
+        }
 
-function Multiselect_possibleConstructorReturn(self, call) { if (call && (Multiselect_typeof(call) === "object" || typeof call === "function")) { return call; } return Multiselect_assertThisInitialized(self); }
+        return acc;
+      }, []);
+      return children;
+    });
 
-function Multiselect_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+    _defineProperty(_assertThisInitialized(_this), "wrapLabel", function (_ref3) {
+      var prefixLabel = _ref3.prefixLabel,
+          label = _ref3.label,
+          suffixLabel = _ref3.suffixLabel;
+      var wrappedLabel = label;
 
-function Multiselect_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; } }
+      if (prefixLabel) {
+        wrappedLabel = ["".concat(prefixLabel, ": ")].concat(wrappedLabel);
+      }
 
-function Multiselect_getPrototypeOf(o) { Multiselect_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Multiselect_getPrototypeOf(o); }
+      if (suffixLabel) {
+        wrappedLabel = Object(external_lodash_["castArray"])(wrappedLabel).concat(" ".concat(suffixLabel));
+      }
 
-function Multiselect_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; }
+      return wrappedLabel;
+    });
+
+    _this.state = {
+      activeIndex: 0,
+      filterKeyword: '',
+      open: false,
+      textHasFocus: false,
+      topValues: [],
+      values: props.defaultValues || []
+    };
+    _this.controlledExternally = Object(external_lodash_["has"])(props, 'values');
+    _this.displayedValues = [];
+    _this.availableOptionCount = 0;
+    _this.firstSelectedOptionIndex = undefined;
+    _this.selectedOptionCount = 0;
 
+    if (false) {}
 
+    if (false) {}
 
+    SelectBase.validateAppearance(props);
+    _this.menuId = Object(id_["createDOMID"])('menu');
+    _this.activeItemId = Object(id_["createDOMID"])('active-item');
+    return _this;
+  }
 
+  _createClass(SelectBase, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (false) {}
 
+      if (false) {}
 
+      SelectBase.validateAppearance(this.props);
+    }
+  }, {
+    key: "getCurrentValues",
+    value: function getCurrentValues() {
+      var values = this.isControlled() ? this.props.values : this.state.values;
+      return this.props.multiple || values == null ? values : values.slice(0, 1);
+    }
+  }, {
+    key: "isControlled",
+    value: function isControlled() {
+      return this.controlledExternally;
+    }
+  }, {
+    key: "hasFilter",
+    value: function hasFilter() {
+      return !!this.props.filter;
+    }
+  }, {
+    key: "toggleValue",
+    value: function toggleValue(e, value) {
+      var _this$getCurrentValue4, _this$props$onChange3, _this$props12;
 
+      var values = (_this$getCurrentValue4 = this.getCurrentValues()) !== null && _this$getCurrentValue4 !== void 0 ? _this$getCurrentValue4 : [];
+      var currentIndex = values.indexOf(value);
+      var _this$props11 = this.props,
+          name = _this$props11.name,
+          multiple = _this$props11.multiple;
+      var newValues;
 
+      if (multiple) {
+        if (currentIndex >= 0) {
+          newValues = [].concat(_toConsumableArray(values.slice(0, currentIndex)), _toConsumableArray(values.slice(currentIndex + 1)));
+        } else {
+          newValues = values.concat([value]);
+        }
+      } else {
+        // non-multiple mode must always have a value
+        newValues = [value];
+      }
 
-var Multiselect_propTypes = {
-  allowNewValues: external_prop_types_default.a.bool,
-  animateLoading: external_prop_types_default.a.bool,
-  children: external_prop_types_default.a.node,
-  compact: external_prop_types_default.a.bool,
-  controlledFilter: external_prop_types_default.a.bool,
-  defaultPlacement: external_prop_types_default.a.oneOf(['above', 'below', 'vertical']),
-  defaultValues: external_prop_types_default.a.array,
-  describedBy: external_prop_types_default.a.string,
-  disabled: external_prop_types_default.a.bool,
-  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-  error: external_prop_types_default.a.bool,
-  footerMessage: external_prop_types_default.a.node,
-  inline: external_prop_types_default.a.bool,
-  inputRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-  isLoadingOptions: external_prop_types_default.a.bool,
-  labelledBy: external_prop_types_default.a.string,
-  loadingMessage: external_prop_types_default.a.node,
-  menuStyle: external_prop_types_default.a.object,
-  name: external_prop_types_default.a.string,
-  noOptionsMessage: external_prop_types_default.a.node,
-  onChange: external_prop_types_default.a.func,
-  onClose: external_prop_types_default.a.func,
-  onFilterChange: external_prop_types_default.a.func,
-  onOpen: external_prop_types_default.a.func,
-  onScrollBottom: external_prop_types_default.a.func,
-  placeholder: external_prop_types_default.a.string,
-  tabConfirmsNewValue: external_prop_types_default.a.bool,
-  useClickawayOverlay: external_prop_types_default.a.bool,
-  values: external_prop_types_default.a.array
-};
-var Multiselect_defaultProps = {
-  allowNewValues: false,
-  animateLoading: false,
-  compact: false,
-  defaultPlacement: 'vertical',
-  disabled: false,
-  inline: false,
-  isLoadingOptions: false,
-  menuStyle: {},
-  noOptionsMessage: Object(i18n_["_"])('No matches'),
-  placeholder: Object(i18n_["_"])('Select...'),
-  tabConfirmsNewValue: false,
-  useClickawayOverlay: false
-};
+      var uncontrolled = !this.isControlled();
 
-function isCompact(props) {
-  return props && props.compact === true;
-}
+      if (uncontrolled) {
+        this.setState({
+          values: newValues
+        });
+      }
 
-var Multiselect_Multiselect = /*#__PURE__*/function (_Component) {
-  Multiselect_inherits(Multiselect, _Component);
+      if (multiple) {
+        // in uncontrolled multiple mode, keep the menu open
+        if (uncontrolled) {
+          this.setState({
+            open: true
+          });
+        }
+      } else {
+        // non-multiple mode only supports a single selection
+        // so close the menu once a selection is made
+        this.handleRequestClose({
+          reason: 'contentClick'
+        });
+        this.focus();
+      }
 
-  var _super = Multiselect_createSuper(Multiselect);
+      (_this$props$onChange3 = (_this$props12 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props12, e, {
+        values: newValues,
+        name: name
+      });
+    }
+    /**
+     * Place focus on the toggle.
+     */
 
-  function Multiselect() {
-    Multiselect_classCallCheck(this, Multiselect);
+  }, {
+    key: "focus",
+    value: function focus() {
+      var _this$dropdown;
 
-    return _super.apply(this, arguments);
-  }
+      (_this$dropdown = this.dropdown) === null || _this$dropdown === void 0 ? void 0 : _this$dropdown.focus();
+    }
+  }, {
+    key: "renderControls",
+    value: function renderControls(_ref4) {
+      var hasChildren = _ref4.hasChildren,
+          placement = _ref4.placement;
+      var filterKeyword = this.state.filterKeyword;
+      var _this$props13 = this.props,
+          inputId = _this$props13.inputId,
+          inputRef = _this$props13.inputRef,
+          multiple = _this$props13.multiple; // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
 
-  Multiselect_createClass(Multiselect, [{
+      var selectControls = /*#__PURE__*/external_react_default.a.createElement(StyledToggleAllControls, {
+        $placement: placement,
+        key: "selectAll"
+      }, /*#__PURE__*/external_react_default.a.createElement(StyledControlsLink, {
+        $disabled: !(this.availableOptionCount - this.selectedOptionCount),
+        onClick: this.handleSelectAll,
+        "data-test": "select-all",
+        style: {
+          marginRight: 20
+        }
+      }, filterKeyword ? Object(i18n_["_"])('Select All Matches') : Object(i18n_["_"])('Select All')), /*#__PURE__*/external_react_default.a.createElement(StyledControlsLink, {
+        $disabled: !this.selectedOptionCount,
+        onClick: this.handleClearAll,
+        "data-test": "clear-all"
+      }, filterKeyword ? Object(i18n_["_"])('Clear All Matches') : Object(i18n_["_"])('Clear All')));
+      return this.hasFilter() && /*#__PURE__*/external_react_default.a.createElement("div", {
+        key: "controls"
+      }, /*#__PURE__*/external_react_default.a.createElement(StyledFilter, {
+        key: "filter",
+        "data-test": "filter"
+      }, /*#__PURE__*/external_react_default.a.createElement(Text_default.a, {
+        value: filterKeyword,
+        appearance: "search",
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        onChange: this.handleTextChange,
+        onKeyDown: this.handleTextKeyDown,
+        onFocus: this.handleTextFocus,
+        onBlur: this.handleTextBlur,
+        placeholder: Object(i18n_["_"])('filter'),
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-label": Object(i18n_["_"])('Filter'),
+        "aria-activedescendant": this.activeItemId,
+        "aria-controls": this.menuId,
+        inputRef: inputRef,
+        inputId: inputId
+      })), multiple && hasChildren && selectControls);
+    }
+  }, {
     key: "render",
-    // @docs-props-type MultiselectPropsBase
     value: function render() {
-      if (isCompact(this.props)) {
-        return /*#__PURE__*/external_react_default.a.createElement(Multiselect_Compact, Multiselect_extends({
-          "data-test": "multiselect"
-        }, Object(external_lodash_["omit"])(this.props, 'compact')));
-      }
+      var _this$getCurrentValue5,
+          _this2 = this;
+
+      var _this$props14 = this.props,
+          appearance = _this$props14.appearance,
+          children = _this$props14.children,
+          defaultPlacement = _this$props14.defaultPlacement,
+          describedBy = _this$props14.describedBy,
+          disabled = _this$props14.disabled,
+          elementRef = _this$props14.elementRef,
+          error = _this$props14.error,
+          inline = _this$props14.inline,
+          inputId = _this$props14.inputId,
+          labelledBy = _this$props14.labelledBy,
+          labelText = _this$props14.labelText,
+          multiple = _this$props14.multiple,
+          placeholder = _this$props14.placeholder,
+          prefixLabel = _this$props14.prefixLabel,
+          suffixLabel = _this$props14.suffixLabel;
+      var icon;
+      var label;
+      var filterEnabled = this.hasFilter();
+      var isAnyValueSelected = false; // Generate buttonLabels
 
-      return /*#__PURE__*/external_react_default.a.createElement(Multiselect_Normal, Multiselect_extends({
-        "data-test": "multiselect"
-      }, Object(external_lodash_["omit"])(this.props, 'compact')));
-    }
-  }]);
+      var childrenArray = external_react_["Children"].toArray(children);
+      var currentValues = (_this$getCurrentValue5 = this.getCurrentValues()) !== null && _this$getCurrentValue5 !== void 0 ? _this$getCurrentValue5 : [];
+      var valuesLabel = currentValues.reduce(function (acc, value, index, orig) {
+        var matchedItem = Object(external_lodash_["find"])(childrenArray, function (item) {
+          return isOption(item) && item.props.value === value;
+        });
 
-  return Multiselect;
-}(external_react_["Component"]);
+        if (matchedItem) {
+          acc.push(matchedItem.props.children || matchedItem.props.label); // if not in multiple mode, add the icon
 
-Multiselect_defineProperty(Multiselect_Multiselect, "propTypes", Multiselect_propTypes);
+          if (!multiple && currentValues.length === 1) {
+            icon = matchedItem.props.icon;
+          }
+        } else if (multiple) {
+          // only add values that don't match an option in "multiple" mode to preserve old behaviour
+          acc.push(value);
+        }
 
-Multiselect_defineProperty(Multiselect_Multiselect, "defaultProps", Multiselect_defaultProps);
+        if (index < orig.length - 1) {
+          acc.push(Object(i18n_["_"])(', '));
+        }
 
-Multiselect_defineProperty(Multiselect_Multiselect, "Option", Multiselect_Option);
+        return acc;
+      }, []);
+      label = valuesLabel; // only apply prefix / suffix if the label is not empty
+
+      if (label.length > 0) {
+        isAnyValueSelected = true;
+        label = this.wrapLabel({
+          prefixLabel: prefixLabel,
+          label: label,
+          suffixLabel: suffixLabel
+        });
+      } // single <Select> behaviour is to show the placeholder if all parts of the the label
+      // are empty strings so we replicate this behaviour here
 
-Multiselect_defineProperty(Multiselect_Multiselect, "Heading", Menu_["Heading"]);
 
-Multiselect_defineProperty(Multiselect_Multiselect, "Divider", Menu_["Divider"]);
+      if (label.length === 0 || !multiple && label.every(function (labelNode) {
+        return labelNode === '';
+      })) {
+        label = [placeholder];
+      }
 
-/* harmony default export */ var src_Multiselect_Multiselect = (Multiselect_Multiselect);
+      var ariaLabel = label; // If there's more than one item selected, read out the selected total
+      // rather than reading out each selected item
 
-// CONCATENATED MODULE: ./src/Multiselect/index.ts
+      if (label.length > 1) {
+        ariaLabel = this.wrapLabel({
+          prefixLabel: prefixLabel,
+          label: ["".concat(currentValues.length, " items selected")],
+          suffixLabel: suffixLabel
+        });
+      }
 
+      var finalChildren = this.createChildren();
 
+      var commonProps = _objectSpread({
+        'aria-describedby': describedBy,
+        'aria-label': "".concat(labelText ? "".concat(labelText, ", ") : '').concat(ariaLabel),
+        'aria-labelledby': labelText ? undefined : labelledBy,
+        'aria-multiselectable': multiple,
+        'data-select-appearance': appearance,
+        'data-test': multiple ? 'multiselect' : 'select',
+        disabled: disabled,
+        elementRef: elementRef,
+        error: error
+      }, Object(external_lodash_["omit"])(this.props, Object(external_lodash_["keys"])(SelectBase.propTypes)));
+
+      if (multiple) {
+        commonProps['data-test-values'] = JSON.stringify(currentValues);
+      } else {
+        var _currentValues = _slicedToArray(currentValues, 1),
+            dataTestValue = _currentValues[0];
 
-/***/ }),
+        commonProps['data-test-value'] = dataTestValue;
+      }
 
-/***/ 12:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+      var toggle = appearance === 'link' ? /*#__PURE__*/external_react_default.a.createElement(Link_default.a, _extends({}, commonProps, {
+        "data-select-appearance": "link"
+      }), !!icon && /*#__PURE__*/external_react_default.a.createElement(StyledLinkIcon, null, icon), label || placeholder, /*#__PURE__*/external_react_default.a.createElement(StyledLinkCaret, null, /*#__PURE__*/external_react_default.a.createElement(CaretDown["a" /* default */], {
+        enterpriseSize: 0.5,
+        prismaSize: "small"
+      }))) : /*#__PURE__*/external_react_default.a.createElement(StyledButton, _extends({}, commonProps, {
+        $multiple: multiple,
+        appearance: appearance,
+        label: label,
+        error: error,
+        icon: icon,
+        inline: inline,
+        isMenu: true,
+        role: "listbox" // @ts-expect-error - accept inconsistency with Button
+        ,
+        onClick: this.props.onClick
+      }, Object(external_lodash_["pick"])(this.props, SelectBase.invalidLinkAppearanceProps)), !!currentValues.length && multiple && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
+        "data-role": "count"
+      }, "(", currentValues.length, ")"));
 
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
-/**
- * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
- *
- * @param ref - The React callback or object ref. Can be `null` or `undefined`.
- * @param current - The new value of the ref.
- */
-function updateReactRef(ref, current) {
-  if (ref) {
-    if (typeof ref === 'function') {
-      ref(current);
-    } else {
-      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
-      // the intention here is to signal "we will take care of setting 'current', not you".
-      ref.current = current; // eslint-disable-line no-param-reassign
+      var createMenu = function createMenu(_ref5) {
+        var anchorWidth = _ref5.anchorWidth,
+            maxHeight = _ref5.maxHeight,
+            placement = _ref5.placement;
+        // preserve separate widths for single vs. multi mode
+        var internalMenuStyle = _this2.props.multiple ? {
+          width: Math.max(anchorWidth !== null && anchorWidth !== void 0 ? anchorWidth : 0, 200)
+        } : {
+          minWidth: anchorWidth !== null && anchorWidth !== void 0 ? anchorWidth : undefined,
+          maxWidth: Math.max(anchorWidth !== null && anchorWidth !== void 0 ? anchorWidth : 0, 300)
+        };
+        return /*#__PURE__*/external_react_default.a.createElement(ResultsMenu_default.a, _extends({
+          "aria-multiselectable": multiple,
+          childrenStart: _this2.renderControls({
+            placement: placement,
+            hasChildren: !!finalChildren.length
+          }),
+          controlledExternally: _this2.hasFilter(),
+          placement: placement !== null && placement !== void 0 ? placement : undefined,
+          maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
+          onScrollBottom: _this2.props.onScrollBottom ? _this2.handleScrollBottom : undefined,
+          "data-test": "results-menu",
+          isLoading: _this2.props.isLoadingOptions,
+          id: _this2.menuId
+        }, Object(external_lodash_["pick"])(_this2.props, 'noOptionsMessage', 'footerMessage', 'animateLoading', 'loadingMessage'), {
+          style: _objectSpread(_objectSpread({}, internalMenuStyle), _this2.props.menuStyle)
+        }), finalChildren);
+      };
+
+      return /*#__PURE__*/external_react_default.a.createElement(Dropdown_default.a, {
+        closeReasons: ['clickAway', 'escapeKey', 'offScreen', 'tabKey', 'toggleClick'],
+        inputId: inputId,
+        toggle: toggle,
+        onRequestOpen: this.handleRequestOpen,
+        onRequestClose: this.handleRequestClose,
+        open: this.state.open,
+        repositionMode: "flip",
+        defaultPlacement: filterEnabled ? defaultPlacement : undefined,
+        canCoverAnchor: window.innerHeight < 500,
+        ref: function ref(c) {
+          _this2.dropdown = c;
+        },
+        retainFocus: false,
+        takeFocus: !isAnyValueSelected || !!filterEnabled
+      }, createMenu);
     }
-  }
-}
+  }]);
 
+  return SelectBase;
+}(external_react_["Component"]);
 
+_defineProperty(SelectBase_SelectBase, "propTypes", propTypes);
 
-/***/ }),
+_defineProperty(SelectBase_SelectBase, "defaultProps", defaultProps);
 
-/***/ 13:
-/***/ (function(module, exports) {
+_defineProperty(SelectBase_SelectBase, "Option", OptionBase["a" /* default */]);
 
-module.exports = require("@splunk/react-ui/Menu");
+_defineProperty(SelectBase_SelectBase, "Divider", Menu_["Divider"]);
 
-/***/ }),
+_defineProperty(SelectBase_SelectBase, "Heading", Menu_["Heading"]);
 
-/***/ 16:
-/***/ (function(module, exports) {
+_defineProperty(SelectBase_SelectBase, "invalidLinkAppearanceProps", ['append', 'error', 'prepend']);
+
+/* harmony default export */ var Select_SelectBase = __webpack_exports__["c"] = (SelectBase_SelectBase);
 
-module.exports = require("@splunk/react-ui/Dropdown");
 
 /***/ }),
 
-/***/ 17:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Button");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 18:
-/***/ (function(module, exports) {
+/***/ 6:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-module.exports = require("@splunk/react-ui/Popover");
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SVG; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/***/ }),
 
-/***/ 2:
-/***/ (function(module, exports) {
 
-module.exports = require("react");
+var Styled = styled_components__WEBPACK_IMPORTED_MODULE_1___default.a.svg.withConfig({
+  displayName: "SVG__Styled",
+  componentId: "sc-1bz0ryh-0"
+})(["flex:0 0 auto;"]);
+function SVG(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Styled, _extends({
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props));
+}
 
 /***/ }),
 
-/***/ 22:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/filter");
+/***/ 7:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-/***/ }),
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Icon; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _splunk_themes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
+/* harmony import */ var _splunk_themes__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_themes__WEBPACK_IMPORTED_MODULE_2__);
+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; }
 
-/***/ 24:
-/***/ (function(module, exports) {
+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; }
 
-module.exports = require("@splunk/react-ui/Text");
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-/***/ }),
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/***/ 3:
-/***/ (function(module, exports) {
+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; }
 
-module.exports = require("styled-components");
+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; }
 
-/***/ }),
 
-/***/ 32:
-/***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Link");
 
-/***/ }),
+var inlineStyles = {
+  display: 'inline-block',
+  flex: '0 0 auto',
+  overflow: 'visible',
+  verticalAlign: 'middle'
+};
+var blockStyles = {
+  display: 'block',
+  flex: '0 0 auto',
+  margin: '0 auto',
+  overflow: 'visible'
+};
+var propTypes = {
+  Enterprise: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
+  enterpriseSize: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string]),
+  enterpriseWidth: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string]),
+  enterpriseHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string]),
+  Prisma24: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func.isRequired,
+  Prisma20: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
+  Prisma16: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
+  prismaSize: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOf(['medium', 'small']),
+  inline: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
+  screenReaderText: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string
+};
+var defaultProps = {
+  inline: true,
+  prismaSize: 'medium'
+};
+function Icon(_ref) {
+  var Enterprise = _ref.Enterprise,
+      Prisma24 = _ref.Prisma24,
+      Prisma20 = _ref.Prisma20,
+      Prisma16 = _ref.Prisma16,
+      prismaSize = _ref.prismaSize,
+      inline = _ref.inline,
+      enterpriseSize = _ref.enterpriseSize,
+      enterpriseWidth = _ref.enterpriseWidth,
+      enterpriseHeight = _ref.enterpriseHeight,
+      screenReaderText = _ref.screenReaderText,
+      otherProps = _objectWithoutProperties(_ref, ["Enterprise", "Prisma24", "Prisma20", "Prisma16", "prismaSize", "inline", "enterpriseSize", "enterpriseWidth", "enterpriseHeight", "screenReaderText"]);
+
+  var _useSplunkTheme = Object(_splunk_themes__WEBPACK_IMPORTED_MODULE_2__["useSplunkTheme"])(),
+      family = _useSplunkTheme.family,
+      density = _useSplunkTheme.density; // Enterprise - all variants
+
+
+  if (family === 'enterprise') {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Enterprise, _extends({
+      size: enterpriseSize,
+      width: enterpriseWidth,
+      height: enterpriseHeight,
+      screenReaderText: screenReaderText || null,
+      hideDefaultTooltip: true,
+      inline: inline
+    }, otherProps));
+  }
 
-/***/ 35:
-/***/ (function(module, exports) {
+  var prismaProps = _objectSpread({
+    'aria-label': screenReaderText,
+    style: inline ? inlineStyles : blockStyles
+  }, otherProps); // Prisma - small+compact, small+comfortable
 
-module.exports = require("@splunk/react-ui/ResultsMenu");
 
-/***/ }),
+  if (prismaSize === 'small') {
+    var SVG = Prisma16 || Prisma24;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SVG, _extends({
+      width: "16",
+      height: "16"
+    }, prismaProps));
+  } // Prisma - medium+compact
 
-/***/ 4:
-/***/ (function(module, exports) {
 
-module.exports = require("lodash");
+  if (density === 'compact') {
+    var _SVG = Prisma20 || Prisma24;
 
-/***/ }),
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SVG, _extends({
+      width: "20",
+      height: "20"
+    }, prismaProps));
+  } // Prisma - medium+comfortable
 
-/***/ 5:
-/***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Prisma24, _extends({
+    width: "24",
+    height: "24"
+  }, prismaProps));
+}
+Icon.propTypes = propTypes;
+Icon.defaultProps = defaultProps;
 
 /***/ }),
 
@@ -2066,7 +2940,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 87:
+/***/ 89:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Chip");