@zendeskgarden/react-dropdowns 8.57.0 → 8.58.0

package/dist/index.cjs.js

@@ -49,202 +49,63 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-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$5() {
   _extends$5 = Object.assign ? Object.assign.bind() : 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$5.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_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 _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 _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 _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.");
-}
-
-var DropdownContext = React__default["default"].createContext(undefined);
-var useDropdownContext = function useDropdownContext() {
-  var dropdownContext = React.useContext(DropdownContext);
+const DropdownContext = React__default["default"].createContext(undefined);
+const useDropdownContext = () => {
+  const dropdownContext = React.useContext(DropdownContext);
   if (!dropdownContext) {
     throw new Error('This component must be rendered within a `Dropdown` component.');
   }
   return dropdownContext;
 };
 
-var _excluded$c = ["onKeyDown"],
-    _excluded2$6 = ["getInputProps", "getToggleButtonProps"];
-var REMOVE_ITEM_STATE_TYPE = 'REMOVE_ITEM';
-var Dropdown = function Dropdown(props) {
-  var children = props.children,
-      isOpen = props.isOpen,
-      selectedItem = props.selectedItem,
-      selectedItems = props.selectedItems,
-      highlightedIndex = props.highlightedIndex,
-      inputValue = props.inputValue,
-      onSelect = props.onSelect,
-      _onStateChange = props.onStateChange,
-      _onInputValueChange = props.onInputValueChange,
-      downshiftProps = props.downshiftProps;
-  var itemIndexRef = React.useRef(0);
-  var previousItemRef = React.useRef(undefined);
-  var previousIndexRef = React.useRef(undefined);
-  var nextItemsHashRef = React.useRef({});
-  var containsMultiselectRef = React.useRef(false);
-  var itemSearchRegistry = React.useRef([]);
-  var _useState = React.useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      dropdownType = _useState2[0],
-      setDropdownType = _useState2[1];
-  var themeContext = React.useContext(styled.ThemeContext);
-  var hasMenuRef = React.useRef(false);
-  var popperReferenceElementRef = React.useRef(null);
-  var customGetInputProps = function customGetInputProps(_ref, downshift, rtl) {
-    var onKeyDown = _ref.onKeyDown,
-        other = _objectWithoutProperties(_ref, _excluded$c);
-    return _objectSpread2({
-      onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, function (e) {
-        var PREVIOUS_KEY = rtl ? containerUtilities.KEY_CODES.RIGHT : containerUtilities.KEY_CODES.LEFT;
-        var NEXT_KEY = rtl ? containerUtilities.KEY_CODES.LEFT : containerUtilities.KEY_CODES.RIGHT;
+const REMOVE_ITEM_STATE_TYPE = 'REMOVE_ITEM';
+const Dropdown = props => {
+  const {
+    children,
+    isOpen,
+    selectedItem,
+    selectedItems,
+    highlightedIndex,
+    inputValue,
+    onSelect,
+    onStateChange,
+    onInputValueChange,
+    downshiftProps
+  } = props;
+  const itemIndexRef = React.useRef(0);
+  const previousItemRef = React.useRef(undefined);
+  const previousIndexRef = React.useRef(undefined);
+  const nextItemsHashRef = React.useRef({});
+  const containsMultiselectRef = React.useRef(false);
+  const itemSearchRegistry = React.useRef([]);
+  const [dropdownType, setDropdownType] = React.useState('');
+  const themeContext = React.useContext(styled.ThemeContext);
+  const hasMenuRef = React.useRef(false);
+  const popperReferenceElementRef = React.useRef(null);
+  const customGetInputProps = (_ref, downshift, rtl) => {
+    let {
+      onKeyDown,
+      ...other
+    } = _ref;
+    return {
+      onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, e => {
+        const PREVIOUS_KEY = rtl ? containerUtilities.KEY_CODES.RIGHT : containerUtilities.KEY_CODES.LEFT;
+        const NEXT_KEY = rtl ? containerUtilities.KEY_CODES.LEFT : containerUtilities.KEY_CODES.RIGHT;
         if (downshift.isOpen) {
           if (e.keyCode === PREVIOUS_KEY && previousIndexRef.current !== null && previousIndexRef.current !== undefined && !downshift.inputValue) {
             e.preventDefault();
@@ -252,7 +113,7 @@ var Dropdown = function Dropdown(props) {
             downshift.selectItemAtIndex(previousIndexRef.current);
           }
           if (e.keyCode === NEXT_KEY) {
-            var nextItemIndexes = Object.values(nextItemsHashRef.current);
+            const nextItemIndexes = Object.values(nextItemsHashRef.current);
             if (nextItemIndexes.includes(downshift.highlightedIndex)) {
               e.preventDefault();
               e.stopPropagation();
@@ -264,23 +125,24 @@ var Dropdown = function Dropdown(props) {
           e.stopPropagation();
           downshift.openMenu();
         }
-      })
-    }, other);
+      }),
+      ...other
+    };
   };
-  var transformDownshift = function transformDownshift(_ref2) {
-    var _getInputProps = _ref2.getInputProps,
-        _getToggleButtonProps = _ref2.getToggleButtonProps,
-        downshift = _objectWithoutProperties(_ref2, _excluded2$6);
-    return _objectSpread2({
-      getInputProps: function getInputProps(p) {
-        return _getInputProps(customGetInputProps(p, downshift, themeContext.rtl));
-      },
-      getToggleButtonProps: function getToggleButtonProps(p) {
-        return _getToggleButtonProps(_objectSpread2({
-          'aria-label': undefined
-        }, p));
-      }
-    }, downshift);
+  const transformDownshift = _ref2 => {
+    let {
+      getInputProps,
+      getToggleButtonProps,
+      ...downshift
+    } = _ref2;
+    return {
+      getInputProps: p => getInputProps(customGetInputProps(p, downshift, themeContext.rtl)),
+      getToggleButtonProps: p => getToggleButtonProps({
+        'aria-label': undefined,
+        ...p
+      }),
+      ...downshift
+    };
   };
   return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(Downshift__default["default"], _extends$5({
     suppressRefError: true
@@ -290,26 +152,28 @@ var Dropdown = function Dropdown(props) {
     selectedItem: selectedItem || null
     ,
     inputValue: inputValue,
-    onInputValueChange: function onInputValueChange(inputVal, stateAndHelpers) {
-      if (_onInputValueChange) {
+    onInputValueChange: (inputVal, stateAndHelpers) => {
+      if (onInputValueChange) {
         if (stateAndHelpers.isOpen) {
-          _onInputValueChange(inputVal, stateAndHelpers);
+          onInputValueChange(inputVal, stateAndHelpers);
         } else if (dropdownType === 'multiselect') {
-          _onInputValueChange('', stateAndHelpers);
+          onInputValueChange('', stateAndHelpers);
         }
       }
     },
-    onStateChange: function onStateChange(changes, stateAndHelpers) {
+    onStateChange: (changes, stateAndHelpers) => {
       if (dropdownType === 'autocomplete' && changes.isOpen === false && !changes.selectedItem) {
         onSelect && onSelect(selectedItem, stateAndHelpers);
       }
       if (Object.prototype.hasOwnProperty.call(changes, 'selectedItem') && changes.selectedItem !== null) {
         if (selectedItems) {
-          var itemToString = stateAndHelpers.itemToString;
-          var existingItemIndex = selectedItems.findIndex(function (item) {
+          const {
+            itemToString
+          } = stateAndHelpers;
+          const existingItemIndex = selectedItems.findIndex(item => {
             return itemToString(item) === itemToString(changes.selectedItem);
           });
-          var updatedSelectedItems = Array.from(selectedItems);
+          const updatedSelectedItems = Array.from(selectedItems);
           if (existingItemIndex === -1) {
             updatedSelectedItems.splice(updatedSelectedItems.length, 0, changes.selectedItem);
           } else {
@@ -327,38 +191,37 @@ var Dropdown = function Dropdown(props) {
           });
         }
       }
-      _onStateChange && _onStateChange(changes, stateAndHelpers);
+      onStateChange && onStateChange(changes, stateAndHelpers);
     },
-    stateReducer: function stateReducer(_state, changes) {
+    stateReducer: (_state, changes) => {
       switch (changes.type) {
         case Downshift__default["default"].stateChangeTypes.changeInput:
           if (changes.inputValue === '' && dropdownType === 'combobox') {
-            return _objectSpread2(_objectSpread2({}, changes), {}, {
+            return {
+              ...changes,
               isOpen: false
-            });
+            };
           }
           return changes;
         default:
           return changes;
       }
     }
-  }, downshiftProps), function (downshift) {
-    return React__default["default"].createElement(DropdownContext.Provider, {
-      value: {
-        hasMenuRef: hasMenuRef,
-        itemIndexRef: itemIndexRef,
-        previousItemRef: previousItemRef,
-        previousIndexRef: previousIndexRef,
-        nextItemsHashRef: nextItemsHashRef,
-        popperReferenceElementRef: popperReferenceElementRef,
-        selectedItems: selectedItems,
-        downshift: transformDownshift(downshift),
-        containsMultiselectRef: containsMultiselectRef,
-        itemSearchRegistry: itemSearchRegistry,
-        setDropdownType: setDropdownType
-      }
-    }, children);
-  }));
+  }, downshiftProps), downshift => React__default["default"].createElement(DropdownContext.Provider, {
+    value: {
+      hasMenuRef,
+      itemIndexRef,
+      previousItemRef,
+      previousIndexRef,
+      nextItemsHashRef,
+      popperReferenceElementRef,
+      selectedItems,
+      downshift: transformDownshift(downshift),
+      containsMultiselectRef,
+      itemSearchRegistry,
+      setDropdownType
+    }
+  }, children)));
 };
 Dropdown.propTypes = {
   isOpen: PropTypes__default["default"].bool,
@@ -390,7 +253,7 @@ function getPopperPlacement(gardenPlacement) {
   }
 }
 function getRtlPopperPlacement(gardenPlacement) {
-  var popperPlacement = getPopperPlacement(gardenPlacement);
+  const popperPlacement = getPopperPlacement(gardenPlacement);
   switch (popperPlacement) {
     case 'left':
       return 'right';
@@ -417,7 +280,7 @@ function getRtlPopperPlacement(gardenPlacement) {
   }
 }
 function getArrowPosition(popperPlacement) {
-  var arrowPositionMappings = {
+  const arrowPositionMappings = {
     auto: 'top',
     top: 'bottom',
     'top-start': 'bottom-left',
@@ -441,85 +304,65 @@ function getMenuPosition(popperPlacement) {
   return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
 }
 
-var COMPONENT_ID$m = 'dropdowns.menu';
-var StyledMenu = styled__default["default"].ul.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$m,
-    'data-garden-version': '8.57.0',
-    className: props.isAnimated && 'is-animated'
-  };
-}).withConfig({
+const COMPONENT_ID$m = 'dropdowns.menu';
+const StyledMenu = styled__default["default"].ul.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '8.58.0',
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1vpttfd-0"
-})(["position:static !important;max-height:", ";overflow-y:auto;", ";", ";"], function (props) {
-  return props.maxHeight;
-}, function (props) {
-  return props.hasArrow && reactTheming.arrowStyles(getArrowPosition(props.placement), {
-    size: "".concat(props.theme.space.base * 2, "px"),
-    inset: '2px',
-    animationModifier: props.isAnimated ? '.is-animated' : undefined
-  });
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props);
-});
+})(["position:static !important;max-height:", ";overflow-y:auto;", ";", ";"], props => props.maxHeight, props => props.hasArrow && reactTheming.arrowStyles(getArrowPosition(props.placement), {
+  size: `${props.theme.space.base * 2}px`,
+  inset: '2px',
+  animationModifier: props.isAnimated ? '.is-animated' : undefined
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledMenu.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
-var StyledMenuWrapper = styled__default["default"].div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$l,
-    'data-garden-version': '8.57.0',
-    className: props.isAnimated && 'is-animated'
-  };
-}).withConfig({
+const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
+const StyledMenuWrapper = styled__default["default"].div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '8.58.0',
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-tiwdxz-0"
-})(["", ";", ";"], function (props) {
-  return reactTheming.menuStyles(getMenuPosition(props.placement), {
-    theme: props.theme,
-    hidden: props.isHidden,
-    margin: "".concat(props.theme.space.base * (props.hasArrow ? 2 : 1), "px"),
-    zIndex: props.zIndex,
-    animationModifier: props.isAnimated ? '.is-animated' : undefined
-  });
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props);
-});
+})(["", ";", ";"], props => reactTheming.menuStyles(getMenuPosition(props.placement), {
+  theme: props.theme,
+  hidden: props.isHidden,
+  margin: `${props.theme.space.base * (props.hasArrow ? 2 : 1)}px`,
+  zIndex: props.zIndex,
+  animationModifier: props.isAnimated ? '.is-animated' : undefined
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledMenuWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$k = 'dropdowns.separator';
-var StyledSeparator = styled__default["default"].li.attrs({
+const COMPONENT_ID$k = 'dropdowns.separator';
+const StyledSeparator = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-1mrnp18-0"
-})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 200, props.theme));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props);
-});
+})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledSeparator.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$j = 'dropdowns.item';
-var getItemPaddingVertical = function getItemPaddingVertical(props) {
+const COMPONENT_ID$j = 'dropdowns.item';
+const getItemPaddingVertical = props => {
   if (props.isCompact) {
-    return "".concat(props.theme.space.base, "px");
+    return `${props.theme.space.base}px`;
   }
-  return "".concat(props.theme.space.base * 2, "px");
+  return `${props.theme.space.base * 2}px`;
 };
-var getColorStyles = function getColorStyles(props) {
-  var foregroundColor;
-  var backgroundColor;
+const getColorStyles = props => {
+  let foregroundColor;
+  let backgroundColor;
   if (props.disabled) {
     foregroundColor = reactTheming.getColor('neutralHue', 400, props.theme);
   } else if (props.isDanger) {
@@ -531,115 +374,65 @@ var getColorStyles = function getColorStyles(props) {
   }
   return styled.css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
 };
-var StyledItem = styled__default["default"].li.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$j,
-    'data-garden-version': '8.57.0',
-    'aria-disabled': props.disabled
-  };
-}).withConfig({
+const StyledItem = styled__default["default"].li.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '8.58.0',
+  'aria-disabled': props.disabled
+})).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1xeog7q-0"
-})(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", ";", ";"], function (props) {
-  return props.disabled ? 'default' : 'pointer';
-}, function (props) {
-  return getItemPaddingVertical(props);
-}, function (props) {
-  return props.theme.space.base * 9;
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return getColorStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props);
-});
+})(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", ";", ";"], props => props.disabled ? 'default' : 'pointer', props => getItemPaddingVertical(props), props => props.theme.space.base * 9, props => props.theme.space.base * 5, props => props.theme.space.base, props => props.theme.space.base, props => getColorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$i = 'dropdowns.add_item';
-var StyledAddItem = styled__default["default"](StyledItem).attrs({
+const COMPONENT_ID$i = 'dropdowns.add_item';
+const StyledAddItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-ekqk50-0"
-})(["color:", ";", ";"], function (props) {
-  return !props.disabled && reactTheming.getColor('primaryHue', 600, props.theme);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props);
-});
+})(["color:", ";", ";"], props => !props.disabled && reactTheming.getColor('primaryHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledAddItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$h = 'dropdowns.item_meta';
-var StyledItemMeta = styled__default["default"].span.attrs({
+const COMPONENT_ID$h = 'dropdowns.item_meta';
+const StyledItemMeta = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-k6xy28-0"
-})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], function (props) {
-  return props.theme.space.base * (props.isCompact ? 3 : 4);
-}, function (props) {
-  return reactTheming.getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme);
-}, function (props) {
-  return props.theme.fontSizes.sm;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props);
-});
+})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => reactTheming.getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme), props => props.theme.fontSizes.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledItemMeta.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$g = 'dropdowns.item_icon';
-var getSizeStyles = function getSizeStyles(props) {
-  return styled.css(["width:", ";height:calc(", "px + ", ");"], props.theme.iconSizes.md, props.theme.space.base * 5, polished.math("".concat(getItemPaddingVertical(props), " * 2")));
+const COMPONENT_ID$g = 'dropdowns.item_icon';
+const getSizeStyles = props => {
+  return styled.css(["width:", ";height:calc(", "px + ", ");"], props.theme.iconSizes.md, props.theme.space.base * 5, polished.math(`${getItemPaddingVertical(props)} * 2`));
 };
-var StyledItemIcon = styled__default["default"].div.attrs({
+const StyledItemIcon = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-1v0ty11-0"
-})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.space.base * 3;
-}, function (props) {
-  return props.isVisible ? '1' : '0';
-}, function (props) {
-  return props.isDisabled ? 'inherit' : reactTheming.getColor('primaryHue', 600, props.theme);
-}, function (props) {
-  return getSizeStyles(props);
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return props.theme.iconSizes.md;
-});
+})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : reactTheming.getColor('primaryHue', 600, props.theme), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
 StyledItemIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$f = 'dropdowns.next_item';
-var StyledNextItem = styled__default["default"](StyledItem).attrs({
+const COMPONENT_ID$f = 'dropdowns.next_item';
+const StyledNextItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1bcygn5-0"
-})(["", "{right:", ";left:", ";}", ";"], StyledItemIcon, function (props) {
-  return props.theme.rtl ? 'auto' : "".concat(props.theme.space.base * 3, "px");
-}, function (props) {
-  return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : 'auto';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props);
-});
+})(["", "{right:", ";left:", ";}", ";"], StyledItemIcon, props => props.theme.rtl ? 'auto' : `${props.theme.space.base * 3}px`, props => props.theme.rtl ? `${props.theme.space.base * 3}px` : 'auto', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledNextItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -655,48 +448,41 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
   })));
 };
 
-var COMPONENT_ID$e = 'dropdowns.next_item_icon';
-var NextIconComponent = function NextIconComponent(_ref) {
-  var className = _ref.className;
+const COMPONENT_ID$e = 'dropdowns.next_item_icon';
+const NextIconComponent = _ref => {
+  let {
+    className
+  } = _ref;
   return React__default["default"].createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '8.57.0',
+    "data-garden-version": '8.58.0',
     className: className
   });
 };
-var StyledNextIcon = styled__default["default"](NextIconComponent).withConfig({
+const StyledNextIcon = styled__default["default"](NextIconComponent).withConfig({
   displayName: "StyledNextIcon",
   componentId: "sc-1rinki2-0"
-})(["transform:", ";color:", ";", ";"], function (props) {
-  return props.theme.rtl && 'rotate(180deg)';
-}, function (props) {
-  return props.isDisabled ? 'inherit' : reactTheming.getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props);
-});
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledNextIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$d = 'dropdowns.previous_item';
-var StyledPreviousItem = styled__default["default"](StyledItem).attrs({
+const COMPONENT_ID$d = 'dropdowns.previous_item';
+const StyledPreviousItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1nmdds9-0"
-})(["font-weight:", ";", ";"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props);
-});
+})(["font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledPreviousItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -712,326 +498,245 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
   })));
 };
 
-var COMPONENT_ID$c = 'dropdowns.previous_item_icon';
-var PreviousIconComponent = function PreviousIconComponent(_ref) {
-  var className = _ref.className;
+const COMPONENT_ID$c = 'dropdowns.previous_item_icon';
+const PreviousIconComponent = _ref => {
+  let {
+    className
+  } = _ref;
   return React__default["default"].createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '8.57.0',
+    "data-garden-version": '8.58.0',
     className: className
   });
 };
-var StyledPreviousIcon = styled__default["default"](PreviousIconComponent).withConfig({
+const StyledPreviousIcon = styled__default["default"](PreviousIconComponent).withConfig({
   displayName: "StyledPreviousIcon",
   componentId: "sc-czfwj7-0"
-})(["transform:", ";color:", ";", ";"], function (props) {
-  return props.theme.rtl && 'rotate(180deg)';
-}, function (props) {
-  return props.isDisabled ? 'inherit' : reactTheming.getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props);
-});
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledPreviousIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$b = 'dropdowns.header_icon';
-var StyledHeaderIcon = styled__default["default"].div.attrs({
+const COMPONENT_ID$b = 'dropdowns.header_icon';
+const StyledHeaderIcon = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-1fl6nsz-0"
-})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.space.base * 3;
-}, function (props) {
-  return reactTheming.getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props);
-});
+})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => reactTheming.getColor('neutralHue', 600, props.theme), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledHeaderIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$a = 'dropdowns.header_item';
-var getHorizontalPadding = function getHorizontalPadding(props) {
+const COMPONENT_ID$a = 'dropdowns.header_item';
+const getHorizontalPadding = props => {
   if (props.hasIcon) {
     return undefined;
   }
-  return "".concat(props.theme.space.base * 3, "px");
+  return `${props.theme.space.base * 3}px`;
 };
-var StyledHeaderItem = styled__default["default"](StyledItem).attrs({
+const StyledHeaderItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-137filx-0"
-})(["cursor:default;padding-right:", ";padding-left:", ";font-weight:", ";", ";"], function (props) {
-  return getHorizontalPadding(props);
-}, function (props) {
-  return getHorizontalPadding(props);
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props);
-});
+})(["cursor:default;padding-right:", ";padding-left:", ";font-weight:", ";", ";"], props => getHorizontalPadding(props), props => getHorizontalPadding(props), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledHeaderItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$9 = 'dropdowns.media_body';
-var StyledMediaBody = styled__default["default"].div.attrs({
+const COMPONENT_ID$9 = 'dropdowns.media_body';
+const StyledMediaBody = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-36j7ef-0"
-})(["display:block;overflow:hidden;padding-", ":", "px;", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.space.base * 2;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props);
-});
+})(["display:block;overflow:hidden;padding-", ":", "px;", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledMediaBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$b = ["children", "isCompact", "theme"];
-var COMPONENT_ID$8 = 'dropdowns.media_figure';
-var StyledMediaFigure = styled__default["default"](
-function (_ref) {
-  var children = _ref.children;
-      _ref.isCompact;
-      _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$b);
+const COMPONENT_ID$8 = 'dropdowns.media_figure';
+const StyledMediaFigure = styled__default["default"](
+_ref => {
+  let {
+    children,
+    isCompact,
+    theme,
+    ...props
+  } = _ref;
   return (
     React__default["default"].cloneElement(React.Children.only(children), props)
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-2f2x8x-0"
-})(["float:", ";margin-top:", "px !important;width:", ";height:", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.space.base * 0.5;
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["float:", ";margin-top:", "px !important;width:", ";height:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 0.5, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledMediaFigure.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'dropdowns.media_item';
-var StyledMediaItem = styled__default["default"](StyledItem).attrs({
+const COMPONENT_ID$7 = 'dropdowns.media_item';
+const StyledMediaItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-ikwshz-0"
-})(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledMediaItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$6 = 'dropdowns.faux_input';
-var StyledFauxInput = styled__default["default"](reactForms.FauxInput).attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.57.0',
-    mediaLayout: true,
-    theme: props.theme
-  };
-}).withConfig({
+const COMPONENT_ID$6 = 'dropdowns.faux_input';
+const StyledFauxInput = styled__default["default"](reactForms.FauxInput).attrs(props => ({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.58.0',
+  mediaLayout: true,
+  theme: props.theme
+})).withConfig({
   displayName: "StyledFauxInput",
   componentId: "sc-1l592ed-0"
-})(["cursor:", ";min-width:", "px;", ";"], function (props) {
-  return !props.disabled && 'pointer';
-}, function (props) {
-  return props.theme.space.base * (props.isCompact ? 25 : 36);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["cursor:", ";min-width:", "px;", ";"], props => !props.disabled && 'pointer', props => props.theme.space.base * (props.isCompact ? 25 : 36), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledFauxInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'dropdowns.input';
-var hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
-var StyledInput = styled__default["default"](reactForms.Input).attrs({
+const COMPONENT_ID$5 = 'dropdowns.input';
+const hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
+const StyledInput = styled__default["default"](reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-hzhvmp-0"
-})(["", ";", ";"], function (props) {
-  return props.isHidden && hiddenStyling;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'dropdowns.select';
-var StyledSelect = styled__default["default"].div.attrs({
+const COMPONENT_ID$4 = 'dropdowns.select';
+const StyledSelect = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xifmwj-0"
-})(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledSelect.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'dropdowns.multiselect_input';
-var visibleStyling = function visibleStyling(props) {
-  var margin = props.isVisible ? "".concat(props.theme.space.base / 2, "px") : 0;
-  var minWidth = props.isVisible ? "".concat(props.theme.space.base * 15, "px") : 0;
-  var height = '0';
+const COMPONENT_ID$3 = 'dropdowns.multiselect_input';
+const visibleStyling = props => {
+  const margin = props.isVisible ? `${props.theme.space.base / 2}px` : 0;
+  const minWidth = props.isVisible ? `${props.theme.space.base * 15}px` : 0;
+  let height = '0';
   if (props.isVisible) {
-    height = "".concat(props.theme.space.base * (props.isCompact ? 5 : 8), "px");
+    height = `${props.theme.space.base * (props.isCompact ? 5 : 8)}px`;
   }
   return styled.css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !props.isVisible && 0, margin, !props.isVisible && 0, minWidth, height);
 };
-var StyledMultiselectInput = styled__default["default"](StyledInput).attrs({
+const StyledMultiselectInput = styled__default["default"](StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMultiselectInput",
   componentId: "sc-1avnf6f-0"
-})(["flex-basis:", "px;flex-grow:1;align-self:center;min-height:0;", ";", ";"], function (props) {
-  return props.theme.space.base * 15;
-}, function (props) {
-  return visibleStyling(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["flex-basis:", "px;flex-grow:1;align-self:center;min-height:0;", ";", ";"], props => props.theme.space.base * 15, props => visibleStyling(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledMultiselectInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'dropdowns.multiselect_items_container';
-var sizeStyles = function sizeStyles(props) {
-  var margin;
-  var padding;
+const COMPONENT_ID$2 = 'dropdowns.multiselect_items_container';
+const sizeStyles = props => {
+  let margin;
+  let padding;
   if (!props.isBare) {
-    var marginVertical = props.isCompact ? "-".concat(props.theme.space.base * 1.5, "px") : "-".concat(props.theme.space.base * 2.5, "px");
-    margin = "".concat(marginVertical, " 0");
-    var paddingVertical = props.isCompact ? '3px' : '1px';
-    var paddingEnd = "".concat(props.theme.space.base, "px");
-    padding = "".concat(paddingVertical, " ").concat(props.theme.rtl ? 0 : paddingEnd, " ").concat(paddingVertical, " ").concat(props.theme.rtl ? paddingEnd : 0);
+    const marginVertical = props.isCompact ? `-${props.theme.space.base * 1.5}px` : `-${props.theme.space.base * 2.5}px`;
+    margin = `${marginVertical} 0`;
+    const paddingVertical = props.isCompact ? '3px' : '1px';
+    const paddingEnd = `${props.theme.space.base}px`;
+    padding = `${paddingVertical} ${props.theme.rtl ? 0 : paddingEnd} ${paddingVertical} ${props.theme.rtl ? paddingEnd : 0}`;
   }
   return styled.css(["margin:", ";padding:", ";"], margin, padding);
 };
-var StyledMultiselectItemsContainer = styled__default["default"].div.attrs({
+const StyledMultiselectItemsContainer = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1jzhet8-0"
-})(["display:inline-flex;flex-grow:1;flex-wrap:wrap;min-width:0;", ";", ";"], function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["display:inline-flex;flex-grow:1;flex-wrap:wrap;min-width:0;", ";", ";"], props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledMultiselectItemsContainer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
-var StyledMultiselectItemWrapper = styled__default["default"].div.attrs({
+const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
+const StyledMultiselectItemWrapper = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-1rb2bye-0"
-})(["display:inline-flex;align-items:center;margin:", "px;max-width:100%;", ";"], function (props) {
-  return props.theme.space.base / 2;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:inline-flex;align-items:center;margin:", "px;max-width:100%;", ";"], props => props.theme.space.base / 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledMultiselectItemWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
-var StyledMultiselectMoreAnchor = styled__default["default"].div.attrs({
+const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
+const StyledMultiselectMoreAnchor = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-1m9v46e-0"
-})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], function (props) {
-  return props.isDisabled ? 'default' : 'pointer';
-}, function (props) {
-  return props.theme.space.base * (props.isCompact ? 0.75 : 1.5);
-}, function (props) {
-  return props.isCompact ? '1em' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.isDisabled ? reactTheming.getColor('neutralHue', 400, props.theme) : reactTheming.getColor('primaryHue', 600, props.theme);
-}, function (props) {
-  return !props.isDisabled && 'underline';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5), props => props.isCompact ? '1em' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isDisabled ? reactTheming.getColor('neutralHue', 400, props.theme) : reactTheming.getColor('primaryHue', 600, props.theme), props => !props.isDisabled && 'underline', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledMultiselectMoreAnchor.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$a = ["children", "refKey"],
-    _excluded2$5 = ["ref"];
-var Trigger = function Trigger(_ref) {
-  var children = _ref.children,
-      refKey = _ref.refKey,
-      triggerProps = _objectWithoutProperties(_ref, _excluded$a);
-  var _useDropdownContext = useDropdownContext(),
-      hasMenuRef = _useDropdownContext.hasMenuRef,
-      itemSearchRegistry = _useDropdownContext.itemSearchRegistry,
-      _useDropdownContext$d = _useDropdownContext.downshift,
-      getRootProps = _useDropdownContext$d.getRootProps,
-      getToggleButtonProps = _useDropdownContext$d.getToggleButtonProps,
-      getInputProps = _useDropdownContext$d.getInputProps,
-      isOpen = _useDropdownContext$d.isOpen,
-      highlightedIndex = _useDropdownContext$d.highlightedIndex,
-      selectItemAtIndex = _useDropdownContext$d.selectItemAtIndex,
-      setHighlightedIndex = _useDropdownContext$d.setHighlightedIndex;
-  var hiddenInputRef = React.useRef(null);
-  var triggerRef = React.useRef(null);
-  var previousIsOpenRef = React.useRef(undefined);
-  var _useState = React.useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      searchString = _useState2[0],
-      setSearchString = _useState2[1];
-  var searchTimeoutRef = React.useRef();
-  var currentSearchIndexRef = React.useRef(0);
-  React.useEffect(function () {
+const Trigger = _ref => {
+  let {
+    children,
+    refKey,
+    ...triggerProps
+  } = _ref;
+  const {
+    hasMenuRef,
+    itemSearchRegistry,
+    downshift: {
+      getRootProps,
+      getToggleButtonProps,
+      getInputProps,
+      isOpen,
+      highlightedIndex,
+      selectItemAtIndex,
+      setHighlightedIndex
+    }
+  } = useDropdownContext();
+  const hiddenInputRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const previousIsOpenRef = React.useRef(undefined);
+  const [searchString, setSearchString] = React.useState('');
+  const searchTimeoutRef = React.useRef();
+  const currentSearchIndexRef = React.useRef(0);
+  React.useEffect(() => {
     if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
       hiddenInputRef.current.focus();
     }
@@ -1040,32 +745,32 @@ var Trigger = function Trigger(_ref) {
     }
     previousIsOpenRef.current = isOpen;
   }, [isOpen, hasMenuRef]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (hasMenuRef.current === false) {
       hasMenuRef.current = true;
     }
   }, [hasMenuRef]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (searchTimeoutRef.current) {
       clearTimeout(searchTimeoutRef.current);
     }
-    searchTimeoutRef.current = window.setTimeout(function () {
+    searchTimeoutRef.current = window.setTimeout(() => {
       setSearchString('');
     }, 500);
-    return function () {
+    return () => {
       clearTimeout(searchTimeoutRef.current);
     };
   }, [searchString]);
-  var searchItems = React.useCallback(function (searchValue, startIndex, endIndex) {
-    for (var index = startIndex; index < endIndex; index++) {
-      var itemTextValue = itemSearchRegistry.current[index];
+  const searchItems = React.useCallback((searchValue, startIndex, endIndex) => {
+    for (let index = startIndex; index < endIndex; index++) {
+      const itemTextValue = itemSearchRegistry.current[index];
       if (itemTextValue && itemTextValue.toUpperCase().indexOf(searchValue.toUpperCase()) === 0) {
         return index;
       }
     }
     return undefined;
   }, [itemSearchRegistry]);
-  var onInputKeyDown = React.useCallback(function (e) {
+  const onInputKeyDown = React.useCallback(e => {
     if (e.keyCode === containerUtilities.KEY_CODES.SPACE) {
       if (searchString) {
         e.preventDefault();
@@ -1079,7 +784,7 @@ var Trigger = function Trigger(_ref) {
     if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 65 || e.keyCode > 90) && e.keyCode !== containerUtilities.KEY_CODES.SPACE) {
       return;
     }
-    var character = String.fromCharCode(e.which || e.keyCode);
+    const character = String.fromCharCode(e.which || e.keyCode);
     if (!character || character.length === 0) {
       return;
     }
@@ -1090,9 +795,9 @@ var Trigger = function Trigger(_ref) {
         currentSearchIndexRef.current = highlightedIndex;
       }
     }
-    var newSearchString = searchString + character;
+    const newSearchString = searchString + character;
     setSearchString(newSearchString);
-    var matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
+    let matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
     if (matchingIndex === undefined) {
       matchingIndex = searchItems(newSearchString, 0, currentSearchIndexRef.current);
     }
@@ -1100,35 +805,45 @@ var Trigger = function Trigger(_ref) {
       setHighlightedIndex(matchingIndex);
     }
   }, [searchString, searchItems, itemSearchRegistry, highlightedIndex, selectItemAtIndex, setHighlightedIndex]);
-  var renderChildren = function renderChildren(popperRef) {
-    var _getRootProps = getRootProps(),
-        rootPropsRefCallback = _getRootProps.ref,
-        rootProps = _objectWithoutProperties(_getRootProps, _excluded2$5);
-    var listboxToggleProps = getToggleButtonProps(_objectSpread2(_objectSpread2(_objectSpread2({}, rootProps), {}, {
+  const renderChildren = popperRef => {
+    const {
+      ref: rootPropsRefCallback,
+      ...rootProps
+    } = getRootProps();
+    const listboxToggleProps = getToggleButtonProps({
+      ...rootProps,
       role: null,
-      'aria-labelledby': undefined
-    }, triggerProps), children.props));
-    var menuToggleProps = _objectSpread2(_objectSpread2({}, listboxToggleProps), {}, {
+      'aria-labelledby': undefined,
+      ...triggerProps,
+      ...children.props
+    });
+    const menuToggleProps = {
+      ...listboxToggleProps,
       'aria-haspopup': 'true',
       'aria-controls': listboxToggleProps['aria-owns'],
       'aria-owns': null
+    };
+    const toggleButtonProps = hasMenuRef.current ? menuToggleProps : listboxToggleProps;
+    return React__default["default"].cloneElement(React__default["default"].Children.only(children), {
+      ...toggleButtonProps,
+      [refKey]: childRef => {
+        popperRef(childRef);
+        triggerRef.current = childRef;
+        rootPropsRefCallback(childRef);
+      }
     });
-    var toggleButtonProps = hasMenuRef.current ? menuToggleProps : listboxToggleProps;
-    return React__default["default"].cloneElement(React__default["default"].Children.only(children), _objectSpread2(_objectSpread2({}, toggleButtonProps), {}, _defineProperty({}, refKey, function (childRef) {
-      popperRef(childRef);
-      triggerRef.current = childRef;
-      rootPropsRefCallback(childRef);
-    })));
   };
-  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
-    var popperReference = _ref2.ref;
+  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
     return React__default["default"].createElement(React__default["default"].Fragment, null, renderChildren(popperReference), React__default["default"].createElement(StyledInput, getInputProps({
       readOnly: true,
       isHidden: true,
       tabIndex: -1,
       ref: hiddenInputRef,
       value: '',
-      onClick: function onClick(e) {
+      onClick: e => {
         if (isOpen) {
           e.nativeEvent.preventDownshiftDefault = true;
         }
@@ -1156,91 +871,88 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
   })));
 };
 
-var FieldContext = React__default["default"].createContext(undefined);
-var useFieldContext = function useFieldContext() {
-  var fieldContext = React.useContext(FieldContext);
+const FieldContext = React__default["default"].createContext(undefined);
+const useFieldContext = () => {
+  const fieldContext = React.useContext(FieldContext);
   if (!fieldContext) {
     throw new Error('This component must be rendered within a `Field` component.');
   }
   return fieldContext;
 };
 
-var _excluded$9 = ["children", "inputRef", "start"],
-    _excluded2$4 = ["type", "onKeyDown"];
-var Autocomplete = React.forwardRef(function (_ref, _ref3) {
-  var children = _ref.children,
-      controlledInputRef = _ref.inputRef,
-      start = _ref.start,
-      props = _objectWithoutProperties(_ref, _excluded$9);
-  var _useDropdownContext = useDropdownContext(),
-      popperReferenceElementRef = _useDropdownContext.popperReferenceElementRef,
-      _useDropdownContext$d = _useDropdownContext.downshift,
-      getToggleButtonProps = _useDropdownContext$d.getToggleButtonProps,
-      getInputProps = _useDropdownContext$d.getInputProps,
-      getRootProps = _useDropdownContext$d.getRootProps,
-      isOpen = _useDropdownContext$d.isOpen,
-      setDropdownType = _useDropdownContext.setDropdownType;
-  var _useFieldContext = useFieldContext(),
-      isLabelHovered = _useFieldContext.isLabelHovered;
-  var inputRef = React.useRef();
-  var triggerRef = React.useRef();
-  var previousIsOpenRef = React.useRef(isOpen);
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      setIsFocused = _useState4[1];
-  React.useEffect(function () {
+const Autocomplete = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    inputRef: controlledInputRef,
+    start,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    downshift: {
+      getToggleButtonProps,
+      getInputProps,
+      getRootProps,
+      isOpen
+    },
+    setDropdownType
+  } = useDropdownContext();
+  const {
+    isLabelHovered
+  } = useFieldContext();
+  const inputRef = React.useRef();
+  const triggerRef = React.useRef();
+  const previousIsOpenRef = React.useRef(isOpen);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  React.useEffect(() => {
     if (inputRef.current && isOpen !== previousIsOpenRef.current) {
       inputRef.current.focus();
     }
     previousIsOpenRef.current = isOpen;
   }, [inputRef, isOpen]);
-  var _getToggleButtonProps = getToggleButtonProps(getRootProps(_objectSpread2(_objectSpread2({
-    role: null
-  }, props), {}, {
-    onKeyDown: function onKeyDown(e) {
+  const {
+    type,
+    onKeyDown,
+    ...selectProps
+  } = getToggleButtonProps(getRootProps({
+    role: null,
+    ...props,
+    onKeyDown: e => {
       if (isOpen) {
         e.nativeEvent.preventDownshiftDefault = true;
       }
     },
-    onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, function () {
-      return setIsHovered(true);
-    }),
-    onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, function () {
-      return setIsHovered(false);
-    })
-  })));
-      _getToggleButtonProps.type;
-      var onKeyDown = _getToggleButtonProps.onKeyDown,
-      selectProps = _objectWithoutProperties(_getToggleButtonProps, _excluded2$4);
-  var onSelectKeyDown = containerUtilities.composeEventHandlers(props.onKeyDown, onKeyDown);
-  var isContainerHovered = isLabelHovered && !isOpen;
-  var isContainerFocused = isOpen || isFocused;
-  React.useEffect(function () {
+    onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
+    onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, () => setIsHovered(false))
+  }));
+  const onSelectKeyDown = containerUtilities.composeEventHandlers(props.onKeyDown, onKeyDown);
+  const isContainerHovered = isLabelHovered && !isOpen;
+  const isContainerFocused = isOpen || isFocused;
+  React.useEffect(() => {
     setDropdownType('autocomplete');
   }, [setDropdownType]);
-  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
-    var popperReference = _ref2.ref;
+  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
     return React__default["default"].createElement(StyledFauxInput, _extends$5({
       isHovered: isContainerHovered,
       isFocused: isContainerFocused,
       tabIndex: null,
       onKeyDown: onSelectKeyDown
     }, selectProps, {
-      ref: function ref(selectRef) {
+      ref: selectRef => {
         popperReference(selectRef);
-        mergeRefs__default["default"]([triggerRef, _ref3])(selectRef);
+        mergeRefs__default["default"]([triggerRef, ref])(selectRef);
         popperReferenceElementRef.current = selectRef;
       }
     }), start && React__default["default"].createElement(StyledFauxInput.StartIcon, {
@@ -1250,13 +962,13 @@ var Autocomplete = React.forwardRef(function (_ref, _ref3) {
     }, start), !isOpen && React__default["default"].createElement(StyledSelect, null, children), React__default["default"].createElement(StyledInput, getInputProps({
       isHidden: !isOpen,
       disabled: props.disabled,
-      onFocus: function onFocus() {
+      onFocus: () => {
         setIsFocused(true);
       },
-      onBlur: function onBlur() {
+      onBlur: () => {
         setIsFocused(false);
       },
-      onClick: function onClick(e) {
+      onClick: e => {
         if (isOpen) {
           e.nativeEvent.preventDownshiftDefault = true;
         }
@@ -1280,72 +992,76 @@ Autocomplete.propTypes = {
   validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
 };
 
-var _excluded$8 = ["isCompact", "isBare", "disabled", "focusInset", "placeholder", "validation", "inputRef", "start", "end"];
-var Combobox = React.forwardRef(function (_ref, ref) {
-  var isCompact = _ref.isCompact,
-      isBare = _ref.isBare,
-      disabled = _ref.disabled,
-      focusInset = _ref.focusInset,
-      placeholder = _ref.placeholder,
-      validation = _ref.validation,
-      _ref$inputRef = _ref.inputRef,
-      inputRefProp = _ref$inputRef === void 0 ? null : _ref$inputRef,
-      start = _ref.start,
-      end = _ref.end,
-      props = _objectWithoutProperties(_ref, _excluded$8);
-  var _useDropdownContext = useDropdownContext(),
-      popperReferenceElementRef = _useDropdownContext.popperReferenceElementRef,
-      _useDropdownContext$d = _useDropdownContext.downshift,
-      getToggleButtonProps = _useDropdownContext$d.getToggleButtonProps,
-      getInputProps = _useDropdownContext$d.getInputProps,
-      getRootProps = _useDropdownContext$d.getRootProps,
-      isOpen = _useDropdownContext$d.isOpen,
-      setDropdownType = _useDropdownContext.setDropdownType;
-  var wrapperRef = React.useRef();
-  var inputRef = React.useRef();
-  var isOpenRef = React.useRef(isOpen);
-  var wrapperProps = getToggleButtonProps(getRootProps(_objectSpread2(_objectSpread2({
+const Combobox = React.forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    isBare,
+    disabled,
+    focusInset,
+    placeholder,
+    validation,
+    inputRef: inputRefProp = null,
+    start,
+    end,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    downshift: {
+      getToggleButtonProps,
+      getInputProps,
+      getRootProps,
+      isOpen
+    },
+    setDropdownType
+  } = useDropdownContext();
+  const wrapperRef = React.useRef();
+  const inputRef = React.useRef();
+  const isOpenRef = React.useRef(isOpen);
+  const wrapperProps = getToggleButtonProps(getRootProps({
     role: null,
     type: null,
-    onClick: function onClick(event) {
+    onClick: event => {
       event.nativeEvent.preventDownshiftDefault = true;
-    }
-  }, props), {}, {
-    onKeyDown: function onKeyDown(event) {
+    },
+    ...props,
+    onKeyDown: event => {
       event.nativeEvent.preventDownshiftDefault = true;
     }
-  })));
-  var inputProps = getInputProps({
-    isCompact: isCompact,
-    isBare: isBare,
-    disabled: disabled,
-    focusInset: focusInset,
-    placeholder: placeholder,
-    validation: validation,
-    start: start,
-    end: end,
+  }));
+  const inputProps = getInputProps({
+    isCompact,
+    isBare,
+    disabled,
+    focusInset,
+    placeholder,
+    validation,
+    start,
+    end,
     role: 'combobox',
-    onKeyDown: function onKeyDown(event) {
+    onKeyDown: event => {
       if (event.keyCode === containerUtilities.KEY_CODES.SPACE || !isOpen && [containerUtilities.KEY_CODES.DOWN, containerUtilities.KEY_CODES.UP].includes(event.keyCode)) {
         event.nativeEvent.preventDownshiftDefault = true;
       }
     },
-    onClick: function onClick(event) {
+    onClick: event => {
       event.nativeEvent.preventDownshiftDefault = true;
     }
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (inputRef.current && isOpen !== isOpenRef.current) {
       inputRef.current.focus();
     }
     isOpenRef.current = isOpen;
   }, [inputRef, isOpen]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     setDropdownType('combobox');
   }, [setDropdownType]);
-  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
-    var popperReference = _ref2.ref;
-    var wrapperRefProp = function wrapperRefProp(element) {
+  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    const wrapperRefProp = element => {
       popperReference(element);
       mergeRefs__default["default"]([wrapperRef, ref])(element);
       popperReferenceElementRef.current = element;
@@ -1367,73 +1083,66 @@ Combobox.propTypes = {
   validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
 };
 
-var _excluded$7 = ["renderItem", "placeholder", "maxItems", "renderShowMore", "inputRef", "start", "onKeyDown"],
-    _excluded2$3 = ["type"];
-var Multiselect = React__default["default"].forwardRef(function (_ref, _ref3) {
-  var renderItem = _ref.renderItem,
-      placeholder = _ref.placeholder,
-      maxItems = _ref.maxItems,
-      renderShowMore = _ref.renderShowMore,
-      _ref$inputRef = _ref.inputRef,
-      externalInputRef = _ref$inputRef === void 0 ? null : _ref$inputRef,
-      start = _ref.start,
-      onKeyDown = _ref.onKeyDown,
-      props = _objectWithoutProperties(_ref, _excluded$7);
-  var _useDropdownContext = useDropdownContext(),
-      popperReferenceElementRef = _useDropdownContext.popperReferenceElementRef,
-      _useDropdownContext$s = _useDropdownContext.selectedItems,
-      selectedItems = _useDropdownContext$s === void 0 ? [] : _useDropdownContext$s,
-      containsMultiselectRef = _useDropdownContext.containsMultiselectRef,
-      previousIndexRef = _useDropdownContext.previousIndexRef,
-      _useDropdownContext$d = _useDropdownContext.downshift,
-      getToggleButtonProps = _useDropdownContext$d.getToggleButtonProps,
-      getRootProps = _useDropdownContext$d.getRootProps,
-      getInputProps = _useDropdownContext$d.getInputProps,
-      isOpen = _useDropdownContext$d.isOpen,
-      closeMenu = _useDropdownContext$d.closeMenu,
-      inputValue = _useDropdownContext$d.inputValue,
-      setDownshiftState = _useDropdownContext$d.setState,
-      itemToString = _useDropdownContext$d.itemToString,
-      setDropdownType = _useDropdownContext.setDropdownType;
-  var _useFieldContext = useFieldContext(),
-      isLabelHovered = _useFieldContext.isLabelHovered;
-  var inputRef = React.useRef();
-  var triggerRef = React.useRef();
-  var blurTimeoutRef = React.useRef();
-  var previousIsOpenRef = React.useRef(undefined);
-  var previousIsFocusedRef = React.useRef(undefined);
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      setIsFocused = _useState4[1];
-  var _useState5 = React.useState(undefined),
-      _useState6 = _slicedToArray(_useState5, 2),
-      focusedItem = _useState6[0],
-      setFocusedItem = _useState6[1];
-  var themeContext = React.useContext(styled.ThemeContext);
-  var environment = reactTheming.useDocument(themeContext);
-  var _useSelection = containerSelection.useSelection({
+const Multiselect = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    renderItem,
+    placeholder,
+    maxItems,
+    renderShowMore,
+    inputRef: externalInputRef = null,
+    start,
+    onKeyDown,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    selectedItems = [],
+    containsMultiselectRef,
+    previousIndexRef,
+    downshift: {
+      getToggleButtonProps,
+      getRootProps,
+      getInputProps,
+      isOpen,
+      closeMenu,
+      inputValue,
+      setState: setDownshiftState,
+      itemToString
+    },
+    setDropdownType
+  } = useDropdownContext();
+  const {
+    isLabelHovered
+  } = useFieldContext();
+  const inputRef = React.useRef();
+  const triggerRef = React.useRef();
+  const blurTimeoutRef = React.useRef();
+  const previousIsOpenRef = React.useRef(undefined);
+  const previousIsFocusedRef = React.useRef(undefined);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [focusedItem, setFocusedItem] = React.useState(undefined);
+  const themeContext = React.useContext(styled.ThemeContext);
+  const environment = reactTheming.useDocument(themeContext);
+  const {
+    getContainerProps,
+    getItemProps
+  } = containerSelection.useSelection({
     rtl: themeContext.rtl,
-    focusedItem: focusedItem,
+    focusedItem,
     selectedItem: undefined,
-    onFocus: function onFocus(item) {
+    onFocus: item => {
       setFocusedItem(item);
     }
-  }),
-      getContainerProps = _useSelection.getContainerProps,
-      getItemProps = _useSelection.getItemProps;
-  React.useEffect(function () {
+  });
+  React.useEffect(() => {
     containsMultiselectRef.current = true;
-    var tempRef = blurTimeoutRef;
-    return function () {
+    const tempRef = blurTimeoutRef;
+    return () => {
       clearTimeout(tempRef.current);
     };
   }, []);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (inputRef.current) {
       if (isOpen && !previousIsOpenRef.current) {
         inputRef.current.focus();
@@ -1444,14 +1153,17 @@ var Multiselect = React__default["default"].forwardRef(function (_ref, _ref3) {
     previousIsOpenRef.current = isOpen;
     previousIsFocusedRef.current = isFocused;
   }, [isOpen, inputRef, isFocused, focusedItem]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (focusedItem !== undefined && isOpen) {
       closeMenu();
     }
   }, [focusedItem, isOpen, closeMenu]);
-  var _getToggleButtonProps = getToggleButtonProps(getRootProps(_objectSpread2({
+  const {
+    type,
+    ...selectProps
+  } = getToggleButtonProps(getRootProps({
     tabIndex: props.disabled ? undefined : -1,
-    onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, function (e) {
+    onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, e => {
       if (isOpen) {
         e.nativeEvent.preventDownshiftDefault = true;
       } else if (!inputValue && e.keyCode === containerUtilities.KEY_CODES.HOME) {
@@ -1459,92 +1171,88 @@ var Multiselect = React__default["default"].forwardRef(function (_ref, _ref3) {
         e.preventDefault();
       }
     }),
-    onFocus: function onFocus() {
+    onFocus: () => {
       setIsFocused(true);
     },
-    onBlur: function onBlur(e) {
-      var currentTarget = e.currentTarget;
-      blurTimeoutRef.current = setTimeout(function () {
+    onBlur: e => {
+      const currentTarget = e.currentTarget;
+      blurTimeoutRef.current = setTimeout(() => {
         if (environment && !currentTarget.contains(environment.activeElement)) {
           setIsFocused(false);
         }
       }, 0);
     },
-    onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, function () {
-      return setIsHovered(true);
-    }),
-    onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, function () {
-      return setIsHovered(false);
-    }),
-    role: null
-  }, props)));
-      _getToggleButtonProps.type;
-      var selectProps = _objectWithoutProperties(_getToggleButtonProps, _excluded2$3);
-  var renderSelectableItem = React.useCallback(function (item, index) {
-    var removeValue = function removeValue() {
+    onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
+    onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, () => setIsHovered(false)),
+    role: null,
+    ...props
+  }));
+  const renderSelectableItem = React.useCallback((item, index) => {
+    const removeValue = () => {
       setDownshiftState({
         type: REMOVE_ITEM_STATE_TYPE,
         selectedItem: item
       });
       inputRef.current && inputRef.current.focus();
     };
-    var renderedItem = renderItem({
+    const renderedItem = renderItem({
       value: item,
-      removeValue: removeValue
+      removeValue
     });
-    var focusRef = React__default["default"].createRef();
-    var clonedChild = React__default["default"].cloneElement(renderedItem, _objectSpread2(_objectSpread2({}, getItemProps({
-      item: item,
-      focusRef: focusRef,
-      onKeyDown: function onKeyDown(e) {
-        if (e.keyCode === containerUtilities.KEY_CODES.DELETE || e.keyCode === containerUtilities.KEY_CODES.BACKSPACE) {
-          e.preventDefault();
-          removeValue();
-        }
-        if (e.keyCode === containerUtilities.KEY_CODES.END && !inputValue) {
-          inputRef.current && inputRef.current.focus();
-          e.preventDefault();
-        }
-        if (themeContext.rtl) {
-          if (e.keyCode === containerUtilities.KEY_CODES.RIGHT && index === 0) {
+    const focusRef = React__default["default"].createRef();
+    const clonedChild = React__default["default"].cloneElement(renderedItem, {
+      ...getItemProps({
+        item,
+        focusRef,
+        onKeyDown: e => {
+          if (e.keyCode === containerUtilities.KEY_CODES.DELETE || e.keyCode === containerUtilities.KEY_CODES.BACKSPACE) {
             e.preventDefault();
+            removeValue();
           }
-          if (e.keyCode === containerUtilities.KEY_CODES.LEFT && index === selectedItems.length - 1) {
-            e.preventDefault();
+          if (e.keyCode === containerUtilities.KEY_CODES.END && !inputValue) {
             inputRef.current && inputRef.current.focus();
-          }
-        } else {
-          if (e.keyCode === containerUtilities.KEY_CODES.LEFT && index === 0) {
             e.preventDefault();
           }
-          if (e.keyCode === containerUtilities.KEY_CODES.RIGHT && index === selectedItems.length - 1) {
-            e.preventDefault();
-            inputRef.current && inputRef.current.focus();
+          if (themeContext.rtl) {
+            if (e.keyCode === containerUtilities.KEY_CODES.RIGHT && index === 0) {
+              e.preventDefault();
+            }
+            if (e.keyCode === containerUtilities.KEY_CODES.LEFT && index === selectedItems.length - 1) {
+              e.preventDefault();
+              inputRef.current && inputRef.current.focus();
+            }
+          } else {
+            if (e.keyCode === containerUtilities.KEY_CODES.LEFT && index === 0) {
+              e.preventDefault();
+            }
+            if (e.keyCode === containerUtilities.KEY_CODES.RIGHT && index === selectedItems.length - 1) {
+              e.preventDefault();
+              inputRef.current && inputRef.current.focus();
+            }
           }
-        }
-      },
-      onClick: function onClick(e) {
-        e.nativeEvent.preventDownshiftDefault = true;
-      },
-      tabIndex: -1
-    })), {}, {
+        },
+        onClick: e => {
+          e.nativeEvent.preventDownshiftDefault = true;
+        },
+        tabIndex: -1
+      }),
       size: props.isCompact ? 'medium' : 'large'
-    }));
-    var key = "".concat(itemToString(item), "-").concat(index);
+    });
+    const key = `${itemToString(item)}-${index}`;
     return React__default["default"].createElement(StyledMultiselectItemWrapper, {
       key: key
     }, clonedChild);
   }, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef, themeContext.rtl]);
-  var items = React.useMemo(function () {
-    var itemValues = selectedItems || [];
-    var output = [];
-    for (var x = 0; x < itemValues.length; x++) {
-      var item = itemValues[x];
+  const items = React.useMemo(() => {
+    const itemValues = selectedItems || [];
+    const output = [];
+    for (let x = 0; x < itemValues.length; x++) {
+      const item = itemValues[x];
       if (x < maxItems) {
         if (props.disabled) {
-          var renderedItem = React__default["default"].cloneElement(renderItem({
+          const renderedItem = React__default["default"].cloneElement(renderItem({
             value: item,
-            removeValue: function removeValue() {
+            removeValue: () => {
               return undefined;
             }
           }), {
@@ -1562,7 +1270,7 @@ var Multiselect = React__default["default"].forwardRef(function (_ref, _ref3) {
         }, React__default["default"].createElement(StyledMultiselectMoreAnchor, {
           isCompact: props.isCompact,
           isDisabled: props.disabled
-        }, renderShowMore ? renderShowMore(itemValues.length - x) : "+ ".concat(itemValues.length - x, " more"))));
+        }, renderShowMore ? renderShowMore(itemValues.length - x) : `+ ${itemValues.length - x} more`)));
         break;
       } else {
         output.push(renderSelectableItem(item, x));
@@ -1570,21 +1278,24 @@ var Multiselect = React__default["default"].forwardRef(function (_ref, _ref3) {
     }
     return output;
   }, [isFocused, props.disabled, renderSelectableItem, selectedItems, renderItem, inputValue, maxItems, renderShowMore, props.isCompact]);
-  var isContainerHovered = isLabelHovered && !isOpen;
-  var isContainerFocused = isOpen || isFocused;
-  React.useEffect(function () {
+  const isContainerHovered = isLabelHovered && !isOpen;
+  const isContainerFocused = isOpen || isFocused;
+  React.useEffect(() => {
     setDropdownType('multiselect');
   }, [setDropdownType]);
-  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
-    var popperReference = _ref2.ref;
-    return React__default["default"].createElement(StyledFauxInput, getContainerProps(_objectSpread2(_objectSpread2({}, selectProps), {}, {
+  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
+    return React__default["default"].createElement(StyledFauxInput, getContainerProps({
+      ...selectProps,
       isHovered: isContainerHovered,
       isFocused: isContainerFocused,
-      ref: function ref(selectRef) {
+      ref: selectRef => {
         popperReference(selectRef);
-        mergeRefs__default["default"]([triggerRef, popperReferenceElementRef, _ref3])(selectRef);
+        mergeRefs__default["default"]([triggerRef, popperReferenceElementRef, ref])(selectRef);
       }
-    })), start && React__default["default"].createElement(StyledFauxInput.StartIcon, {
+    }), start && React__default["default"].createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled
@@ -1593,15 +1304,15 @@ var Multiselect = React__default["default"].forwardRef(function (_ref, _ref3) {
       isCompact: props.isCompact
     }, items, React__default["default"].createElement(StyledMultiselectInput, getInputProps({
       disabled: props.disabled,
-      onFocus: function onFocus() {
+      onFocus: () => {
         setFocusedItem(undefined);
       },
-      onClick: function onClick(e) {
+      onClick: e => {
         if (inputValue && inputValue.length > 0 && isOpen) {
           e.nativeEvent.preventDownshiftDefault = true;
         }
       },
-      onKeyDown: function onKeyDown(e) {
+      onKeyDown: e => {
         if (!inputValue) {
           if (themeContext.rtl && e.keyCode === containerUtilities.KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
             setFocusedItem(selectedItems[selectedItems.length - 1]);
@@ -1645,43 +1356,37 @@ Multiselect.defaultProps = {
 };
 Multiselect.displayName = 'Multiselect';
 
-var _excluded$6 = ["children", "start"],
-    _excluded2$2 = ["type"];
-var Select = React__default["default"].forwardRef(function (_ref, _ref3) {
-  var children = _ref.children,
-      start = _ref.start,
-      props = _objectWithoutProperties(_ref, _excluded$6);
-  var _useDropdownContext = useDropdownContext(),
-      popperReferenceElementRef = _useDropdownContext.popperReferenceElementRef,
-      itemSearchRegistry = _useDropdownContext.itemSearchRegistry,
-      _useDropdownContext$d = _useDropdownContext.downshift,
-      getToggleButtonProps = _useDropdownContext$d.getToggleButtonProps,
-      getInputProps = _useDropdownContext$d.getInputProps,
-      isOpen = _useDropdownContext$d.isOpen,
-      highlightedIndex = _useDropdownContext$d.highlightedIndex,
-      setHighlightedIndex = _useDropdownContext$d.setHighlightedIndex,
-      selectItemAtIndex = _useDropdownContext$d.selectItemAtIndex,
-      closeMenu = _useDropdownContext$d.closeMenu;
-  var _useFieldContext = useFieldContext(),
-      isLabelHovered = _useFieldContext.isLabelHovered;
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      setIsFocused = _useState4[1];
-  var hiddenInputRef = React.useRef();
-  var triggerRef = React.useRef();
-  var previousIsOpenRef = React.useRef(undefined);
-  var _useState5 = React.useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      searchString = _useState6[0],
-      setSearchString = _useState6[1];
-  var searchTimeoutRef = React.useRef();
-  var currentSearchIndexRef = React.useRef(0);
-  React.useEffect(function () {
+const Select = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    start,
+    ...props
+  } = _ref;
+  const {
+    popperReferenceElementRef,
+    itemSearchRegistry,
+    downshift: {
+      getToggleButtonProps,
+      getInputProps,
+      isOpen,
+      highlightedIndex,
+      setHighlightedIndex,
+      selectItemAtIndex,
+      closeMenu
+    }
+  } = useDropdownContext();
+  const {
+    isLabelHovered
+  } = useFieldContext();
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const hiddenInputRef = React.useRef();
+  const triggerRef = React.useRef();
+  const previousIsOpenRef = React.useRef(undefined);
+  const [searchString, setSearchString] = React.useState('');
+  const searchTimeoutRef = React.useRef();
+  const currentSearchIndexRef = React.useRef(0);
+  React.useEffect(() => {
     if (hiddenInputRef.current && isOpen && !previousIsOpenRef.current) {
       hiddenInputRef.current.focus();
     }
@@ -1690,27 +1395,27 @@ var Select = React__default["default"].forwardRef(function (_ref, _ref3) {
     }
     previousIsOpenRef.current = isOpen;
   }, [isOpen, triggerRef]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (searchTimeoutRef.current) {
       clearTimeout(searchTimeoutRef.current);
     }
-    searchTimeoutRef.current = window.setTimeout(function () {
+    searchTimeoutRef.current = window.setTimeout(() => {
       setSearchString('');
     }, 500);
-    return function () {
+    return () => {
       clearTimeout(searchTimeoutRef.current);
     };
   }, [searchString]);
-  var searchItems = React.useCallback(function (searchValue, startIndex, endIndex) {
-    for (var index = startIndex; index < endIndex; index++) {
-      var itemTextValue = itemSearchRegistry.current[index];
+  const searchItems = React.useCallback((searchValue, startIndex, endIndex) => {
+    for (let index = startIndex; index < endIndex; index++) {
+      const itemTextValue = itemSearchRegistry.current[index];
       if (itemTextValue && itemTextValue.toUpperCase().indexOf(searchValue.toUpperCase()) === 0) {
         return index;
       }
     }
     return undefined;
   }, [itemSearchRegistry]);
-  var onInputKeyDown = React.useCallback(function (e) {
+  const onInputKeyDown = React.useCallback(e => {
     if (e.keyCode === containerUtilities.KEY_CODES.SPACE) {
       if (searchString) {
         e.preventDefault();
@@ -1725,7 +1430,7 @@ var Select = React__default["default"].forwardRef(function (_ref, _ref3) {
     if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 65 || e.keyCode > 90) && e.keyCode !== containerUtilities.KEY_CODES.SPACE) {
       return;
     }
-    var character = String.fromCharCode(e.which || e.keyCode);
+    const character = String.fromCharCode(e.which || e.keyCode);
     if (!character || character.length === 0) {
       return;
     }
@@ -1736,9 +1441,9 @@ var Select = React__default["default"].forwardRef(function (_ref, _ref3) {
         currentSearchIndexRef.current = highlightedIndex;
       }
     }
-    var newSearchString = searchString + character;
+    const newSearchString = searchString + character;
     setSearchString(newSearchString);
-    var matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
+    let matchingIndex = searchItems(newSearchString, currentSearchIndexRef.current + 1, itemSearchRegistry.current.length);
     if (matchingIndex === undefined) {
       matchingIndex = searchItems(newSearchString, 0, currentSearchIndexRef.current);
     }
@@ -1746,35 +1451,31 @@ var Select = React__default["default"].forwardRef(function (_ref, _ref3) {
       setHighlightedIndex(matchingIndex);
     }
   }, [searchString, searchItems, itemSearchRegistry, highlightedIndex, selectItemAtIndex, closeMenu, setHighlightedIndex]);
-  var _getToggleButtonProps = getToggleButtonProps(_objectSpread2({
+  const {
+    type,
+    ...selectProps
+  } = getToggleButtonProps({
     tabIndex: props.disabled ? undefined : 0,
-    onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, function () {
-      return setIsHovered(true);
-    }),
-    onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, function () {
-      return setIsHovered(false);
-    }),
-    onFocus: containerUtilities.composeEventHandlers(props.onFocus, function () {
-      return setIsFocused(true);
-    }),
-    onBlur: containerUtilities.composeEventHandlers(props.onBlur, function () {
-      return setIsFocused(false);
-    })
-  }, props));
-      _getToggleButtonProps.type;
-      var selectProps = _objectWithoutProperties(_getToggleButtonProps, _excluded2$2);
-  var isContainerHovered = isLabelHovered && !isOpen;
-  var isContainerFocused = isFocused || isOpen;
-  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
-    var popperReference = _ref2.ref;
+    onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, () => setIsHovered(true)),
+    onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, () => setIsHovered(false)),
+    onFocus: containerUtilities.composeEventHandlers(props.onFocus, () => setIsFocused(true)),
+    onBlur: containerUtilities.composeEventHandlers(props.onBlur, () => setIsFocused(false)),
+    ...props
+  });
+  const isContainerHovered = isLabelHovered && !isOpen;
+  const isContainerFocused = isFocused || isOpen;
+  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+    let {
+      ref: popperReference
+    } = _ref2;
     return React__default["default"].createElement(StyledFauxInput, _extends$5({
       isHovered: isContainerHovered,
       isFocused: isContainerFocused
     }, selectProps, {
       role: "none",
-      ref: function ref(selectRef) {
+      ref: selectRef => {
         popperReference(selectRef);
-        mergeRefs__default["default"]([triggerRef, _ref3, popperReferenceElementRef])(selectRef);
+        mergeRefs__default["default"]([triggerRef, ref, popperReferenceElementRef])(selectRef);
       }
     }), start && React__default["default"].createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
@@ -1786,7 +1487,7 @@ var Select = React__default["default"].forwardRef(function (_ref, _ref3) {
       tabIndex: -1,
       ref: hiddenInputRef,
       value: '',
-      onClick: function onClick(e) {
+      onClick: e => {
         if (isOpen) {
           e.nativeEvent.preventDownshiftDefault = true;
         }
@@ -1810,21 +1511,20 @@ Select.propTypes = {
   start: PropTypes__default["default"].any
 };
 
-var Field = React.forwardRef(function (props, fieldRef) {
-  var _useDropdownContext = useDropdownContext(),
-      getRootProps = _useDropdownContext.downshift.getRootProps;
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isLabelHovered = _useState2[0],
-      setIsLabelHovered = _useState2[1];
-  var _getRootProps = getRootProps(),
-      ref = _getRootProps.ref;
-  var value = React.useMemo(function () {
-    return {
-      isLabelHovered: isLabelHovered,
-      setIsLabelHovered: setIsLabelHovered
-    };
-  }, [isLabelHovered, setIsLabelHovered]);
+const Field = React.forwardRef((props, fieldRef) => {
+  const {
+    downshift: {
+      getRootProps
+    }
+  } = useDropdownContext();
+  const [isLabelHovered, setIsLabelHovered] = React.useState(false);
+  const {
+    ref
+  } = getRootProps();
+  const value = React.useMemo(() => ({
+    isLabelHovered,
+    setIsLabelHovered
+  }), [isLabelHovered, setIsLabelHovered]);
   return React__default["default"].createElement(FieldContext.Provider, {
     value: value
   }, React__default["default"].createElement(reactForms.Field, _extends$5({
@@ -1833,30 +1533,34 @@ var Field = React.forwardRef(function (props, fieldRef) {
 });
 Field.displayName = 'Field';
 
-var Hint = React__default["default"].forwardRef(function (props, ref) {
-  return React__default["default"].createElement(reactForms.Hint, _extends$5({
-    ref: ref
-  }, props));
-});
+const Hint = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(reactForms.Hint, _extends$5({
+  ref: ref
+}, props)));
 Hint.displayName = 'Hint';
 
-var _excluded$5 = ["onMouseEnter", "onMouseLeave"];
-var Label = React__default["default"].forwardRef(function (_ref, ref) {
-  var onMouseEnter = _ref.onMouseEnter,
-      onMouseLeave = _ref.onMouseLeave,
-      other = _objectWithoutProperties(_ref, _excluded$5);
-  var _useDropdownContext = useDropdownContext(),
-      getLabelProps = _useDropdownContext.downshift.getLabelProps;
-  var _useFieldContext = useFieldContext(),
-      setIsLabelHovered = _useFieldContext.setIsLabelHovered;
-  var labelProps = getLabelProps(_objectSpread2({
-    onMouseEnter: containerUtilities.composeEventHandlers(onMouseEnter, function () {
+const Label = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    onMouseEnter,
+    onMouseLeave,
+    ...other
+  } = _ref;
+  const {
+    downshift: {
+      getLabelProps
+    }
+  } = useDropdownContext();
+  const {
+    setIsLabelHovered
+  } = useFieldContext();
+  const labelProps = getLabelProps({
+    onMouseEnter: containerUtilities.composeEventHandlers(onMouseEnter, () => {
       setIsLabelHovered(true);
     }),
-    onMouseLeave: containerUtilities.composeEventHandlers(onMouseLeave, function () {
+    onMouseLeave: containerUtilities.composeEventHandlers(onMouseLeave, () => {
       setIsLabelHovered(false);
-    })
-  }, other));
+    }),
+    ...other
+  });
   return React__default["default"].createElement(reactForms.Label, _extends$5({
     ref: ref
   }, labelProps));
@@ -1866,111 +1570,109 @@ Label.propTypes = {
   isRegular: PropTypes__default["default"].bool
 };
 
-var Message = React__default["default"].forwardRef(function (props, ref) {
-  return React__default["default"].createElement(reactForms.Message, _extends$5({
-    ref: ref
-  }, props));
-});
+const Message = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(reactForms.Message, _extends$5({
+  ref: ref
+}, props)));
 Message.displayName = 'Message';
 Message.propTypes = {
   validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
 };
 
-var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
+const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
+const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
 
-var MenuContext = React__default["default"].createContext(undefined);
-var useMenuContext = function useMenuContext() {
-  var menuContext = React.useContext(MenuContext);
+const MenuContext = React__default["default"].createContext(undefined);
+const useMenuContext = () => {
+  const menuContext = React.useContext(MenuContext);
   if (!menuContext) {
     throw new Error('This component must be rendered within a `Menu` component.');
   }
   return menuContext;
 };
 
-var _excluded$4 = ["placement", "popperModifiers", "eventsEnabled", "isAnimated", "maxHeight", "style", "zIndex", "isCompact", "children", "appendToNode"];
-var Menu = React.forwardRef(function (props, menuRef) {
-  var placement = props.placement,
-      popperModifiers = props.popperModifiers,
-      eventsEnabled = props.eventsEnabled,
-      isAnimated = props.isAnimated,
-      maxHeight = props.maxHeight,
-      menuStyle = props.style,
-      zIndex = props.zIndex,
-      isCompact = props.isCompact,
-      children = props.children,
-      appendToNode = props.appendToNode,
-      otherProps = _objectWithoutProperties(props, _excluded$4);
-  var _useDropdownContext = useDropdownContext(),
-      hasMenuRef = _useDropdownContext.hasMenuRef,
-      itemIndexRef = _useDropdownContext.itemIndexRef,
-      previousIndexRef = _useDropdownContext.previousIndexRef,
-      nextItemsHashRef = _useDropdownContext.nextItemsHashRef,
-      popperReferenceElementRef = _useDropdownContext.popperReferenceElementRef,
-      itemSearchRegistry = _useDropdownContext.itemSearchRegistry,
-      _useDropdownContext$d = _useDropdownContext.downshift,
-      isOpen = _useDropdownContext$d.isOpen,
-      getMenuProps = _useDropdownContext$d.getMenuProps;
-  var scheduleUpdateRef = React.useRef(undefined);
-  React.useEffect(function () {
+const Menu = React.forwardRef((props, menuRef) => {
+  const {
+    placement,
+    popperModifiers,
+    eventsEnabled,
+    isAnimated,
+    maxHeight,
+    style: menuStyle,
+    zIndex,
+    isCompact,
+    children,
+    appendToNode,
+    ...otherProps
+  } = props;
+  const {
+    hasMenuRef,
+    itemIndexRef,
+    previousIndexRef,
+    nextItemsHashRef,
+    popperReferenceElementRef,
+    itemSearchRegistry,
+    downshift: {
+      isOpen,
+      getMenuProps
+    }
+  } = useDropdownContext();
+  const scheduleUpdateRef = React.useRef(undefined);
+  React.useEffect(() => {
     if (scheduleUpdateRef.current && isOpen) {
       scheduleUpdateRef.current();
     }
   });
-  var _useState = React.useState(isOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      isVisible = _useState2[0],
-      setIsVisible = _useState2[1];
-  React.useEffect(function () {
-    var timeout;
+  const [isVisible, setIsVisible] = React.useState(isOpen);
+  React.useEffect(() => {
+    let timeout;
     if (isOpen) {
       setIsVisible(true);
     } else if (isAnimated) {
-      timeout = setTimeout(function () {
-        return setIsVisible(false);
-      }, 200);
+      timeout = setTimeout(() => setIsVisible(false), 200);
     } else {
       setIsVisible(false);
     }
-    return function () {
-      return clearTimeout(timeout);
-    };
+    return () => clearTimeout(timeout);
   }, [isOpen, isAnimated]);
-  var themeContext = React.useContext(styled.ThemeContext);
+  const themeContext = React.useContext(styled.ThemeContext);
   itemIndexRef.current = 0;
   nextItemsHashRef.current = {};
   previousIndexRef.current = undefined;
   itemSearchRegistry.current = [];
-  var popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
+  const popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
   return (
     React__default["default"].createElement(MenuContext.Provider, {
       value: {
-        itemIndexRef: itemIndexRef,
-        isCompact: isCompact
+        itemIndexRef,
+        isCompact
       }
     }, React__default["default"].createElement(reactPopper.Popper, {
       placement: popperPlacement,
       modifiers: popperModifiers
       ,
       eventsEnabled: isOpen && eventsEnabled
-    }, function (_ref) {
-      var ref = _ref.ref,
-          style = _ref.style,
-          scheduleUpdate = _ref.scheduleUpdate,
-          currentPlacement = _ref.placement;
-      var computedStyle = menuStyle;
+    }, _ref => {
+      let {
+        ref,
+        style,
+        scheduleUpdate,
+        placement: currentPlacement
+      } = _ref;
+      let computedStyle = menuStyle;
       scheduleUpdateRef.current = scheduleUpdate;
       if ((isOpen || isVisible) && popperReferenceElementRef.current && popperReferenceElementRef.current.getBoundingClientRect) {
-        computedStyle = _objectSpread2({
-          width: popperReferenceElementRef.current.getBoundingClientRect().width
-        }, menuStyle);
+        computedStyle = {
+          width: popperReferenceElementRef.current.getBoundingClientRect().width,
+          ...menuStyle
+        };
       }
-      var menuProps = getMenuProps(_objectSpread2({
+      const menuProps = getMenuProps({
         role: hasMenuRef.current ? 'menu' : 'listbox',
         placement: currentPlacement,
-        isAnimated: isAnimated && (isOpen || isVisible)
-      }, otherProps));
-      var menu = React__default["default"].createElement(StyledMenuWrapper, {
+        isAnimated: isAnimated && (isOpen || isVisible),
+        ...otherProps
+      });
+      const menu = React__default["default"].createElement(StyledMenuWrapper, {
         ref: isOpen ? ref : undefined,
         hasArrow: menuProps.hasArrow,
         placement: menuProps.placement,
@@ -2008,11 +1710,9 @@ Menu.defaultProps = {
   zIndex: 1000
 };
 
-var Separator = React__default["default"].forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledSeparator, _extends$5({
-    ref: ref
-  }, props));
-});
+const Separator = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(StyledSeparator, _extends$5({
+  ref: ref
+}, props)));
 Separator.displayName = 'Separator';
 
 var _path$1;
@@ -2026,7 +1726,8 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2045,7 +1746,8 @@ var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2055,49 +1757,52 @@ var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   })));
 };
 
-var ItemContext = React__default["default"].createContext(undefined);
-var useItemContext = function useItemContext() {
-  var context = React.useContext(ItemContext);
+const ItemContext = React__default["default"].createContext(undefined);
+const useItemContext = () => {
+  const context = React.useContext(ItemContext);
   if (!context) {
     throw new Error('This component must be rendered within an `Item` component.');
   }
   return context;
 };
 
-var _excluded$3 = ["value", "disabled", "isDanger", "component", "children"];
-var Item = React__default["default"].forwardRef(function (_ref, forwardRef) {
-  var value = _ref.value,
-      disabled = _ref.disabled,
-      isDanger = _ref.isDanger,
-      _ref$component = _ref.component,
-      component = _ref$component === void 0 ? StyledItem : _ref$component,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-  var _useDropdownContext = useDropdownContext(),
-      selectedItems = _useDropdownContext.selectedItems,
-      hasMenuRef = _useDropdownContext.hasMenuRef,
-      itemSearchRegistry = _useDropdownContext.itemSearchRegistry,
-      _useDropdownContext$d = _useDropdownContext.downshift,
-      isOpen = _useDropdownContext$d.isOpen,
-      selectedItem = _useDropdownContext$d.selectedItem,
-      highlightedIndex = _useDropdownContext$d.highlightedIndex,
-      getItemProps = _useDropdownContext$d.getItemProps,
-      setHighlightedIndex = _useDropdownContext$d.setHighlightedIndex,
-      itemToString = _useDropdownContext$d.itemToString;
-  var _useMenuContext = useMenuContext(),
-      itemIndexRef = _useMenuContext.itemIndexRef,
-      isCompact = _useMenuContext.isCompact;
-  var itemRef = React.useRef();
-  var Component = component;
+const Item = React__default["default"].forwardRef((_ref, forwardRef) => {
+  let {
+    value,
+    disabled,
+    isDanger,
+    component = StyledItem,
+    children,
+    ...props
+  } = _ref;
+  const {
+    selectedItems,
+    hasMenuRef,
+    itemSearchRegistry,
+    downshift: {
+      isOpen,
+      selectedItem,
+      highlightedIndex,
+      getItemProps,
+      setHighlightedIndex,
+      itemToString
+    }
+  } = useDropdownContext();
+  const {
+    itemIndexRef,
+    isCompact
+  } = useMenuContext();
+  const itemRef = React.useRef();
+  const Component = component;
   if ((value === undefined || value === null) && !disabled) {
     throw new Error('All Item components require a `value` prop');
   }
-  var currentIndex = itemIndexRef.current;
-  var isFocused = highlightedIndex === currentIndex;
-  var isSelected;
-  React.useEffect(function () {
+  const currentIndex = itemIndexRef.current;
+  const isFocused = highlightedIndex === currentIndex;
+  let isSelected;
+  React.useEffect(() => {
     if (!disabled && itemRef.current) {
-      var itemTextValue = itemRef.current.innerText;
+      const itemTextValue = itemRef.current.innerText;
       if (itemTextValue) {
         itemSearchRegistry.current[currentIndex] = itemTextValue;
       }
@@ -2105,7 +1810,7 @@ var Item = React__default["default"].forwardRef(function (_ref, forwardRef) {
   });
   if (value) {
     if (selectedItems) {
-      isSelected = selectedItems.some(function (item) {
+      isSelected = selectedItems.some(item => {
         return itemToString(item) === itemToString(value);
       });
     } else {
@@ -2114,17 +1819,15 @@ var Item = React__default["default"].forwardRef(function (_ref, forwardRef) {
   } else {
     isSelected = false;
   }
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (isOpen && !disabled && !selectedItems && isSelected) {
       setHighlightedIndex(currentIndex);
     }
   }, [currentIndex, disabled, isOpen, isSelected, selectedItems, setHighlightedIndex]);
-  var contextValue = React.useMemo(function () {
-    return {
-      isDisabled: disabled
-    };
-  }, [disabled]);
-  var ref = mergeRefs__default["default"]([itemRef, forwardRef]);
+  const contextValue = React.useMemo(() => ({
+    isDisabled: disabled
+  }), [disabled]);
+  const ref = mergeRefs__default["default"]([itemRef, forwardRef]);
   if (disabled) {
     return React__default["default"].createElement(ItemContext.Provider, {
       value: contextValue
@@ -2142,16 +1845,18 @@ var Item = React__default["default"].forwardRef(function (_ref, forwardRef) {
   itemIndexRef.current++;
   return React__default["default"].createElement(ItemContext.Provider, {
     value: contextValue
-  }, React__default["default"].createElement(Component, getItemProps(_objectSpread2(_objectSpread2({
+  }, React__default["default"].createElement(Component, getItemProps({
     item: value,
-    isFocused: isFocused,
-    ref: ref,
-    isCompact: isCompact,
-    isDanger: isDanger
-  }, hasMenuRef.current && {
-    role: 'menuitem',
-    'aria-selected': null
-  }), props)), isSelected && React__default["default"].createElement(StyledItemIcon, {
+    isFocused,
+    ref,
+    isCompact,
+    isDanger,
+    ...(hasMenuRef.current && {
+      role: 'menuitem',
+      'aria-selected': null
+    }),
+    ...props
+  }), isSelected && React__default["default"].createElement(StyledItemIcon, {
     isCompact: isCompact,
     isVisible: isSelected
   }, React__default["default"].createElement(SvgCheckLgStroke, null)), children));
@@ -2162,13 +1867,15 @@ Item.propTypes = {
   disabled: PropTypes__default["default"].bool
 };
 
-var _excluded$2 = ["children", "disabled"];
-var AddItemComponent = React__default["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$2);
-  var _useMenuContext = useMenuContext(),
-      isCompact = _useMenuContext.isCompact;
+const AddItemComponent = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    disabled,
+    ...props
+  } = _ref;
+  const {
+    isCompact
+  } = useMenuContext();
   return React__default["default"].createElement(StyledAddItem, _extends$5({
     ref: ref,
     disabled: disabled
@@ -2178,21 +1885,20 @@ var AddItemComponent = React__default["default"].forwardRef(function (_ref, ref)
     isDisabled: disabled
   }, React__default["default"].createElement(SvgPlusStroke, null)), children);
 });
-var AddItem = React__default["default"].forwardRef(function (props, ref) {
-  return React__default["default"].createElement(Item, _extends$5({
-    component: AddItemComponent,
-    ref: ref
-  }, props));
-});
+const AddItem = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(Item, _extends$5({
+  component: AddItemComponent,
+  ref: ref
+}, props)));
 AddItem.displayName = 'AddItem';
 AddItem.propTypes = {
   value: PropTypes__default["default"].any,
   disabled: PropTypes__default["default"].bool
 };
 
-var HeaderIcon = React__default["default"].forwardRef(function (props, ref) {
-  var _useMenuContext = useMenuContext(),
-      isCompact = _useMenuContext.isCompact;
+const HeaderIcon = React__default["default"].forwardRef((props, ref) => {
+  const {
+    isCompact
+  } = useMenuContext();
   return React__default["default"].createElement(StyledHeaderIcon, _extends$5({
     ref: ref,
     isCompact: isCompact
@@ -2200,9 +1906,10 @@ var HeaderIcon = React__default["default"].forwardRef(function (props, ref) {
 });
 HeaderIcon.displayName = 'HeaderIcon';
 
-var HeaderItem = React__default["default"].forwardRef(function (props, ref) {
-  var _useMenuContext = useMenuContext(),
-      isCompact = _useMenuContext.isCompact;
+const HeaderItem = React__default["default"].forwardRef((props, ref) => {
+  const {
+    isCompact
+  } = useMenuContext();
   return React__default["default"].createElement(StyledHeaderItem, _extends$5({
     ref: ref,
     isCompact: isCompact
@@ -2210,11 +1917,13 @@ var HeaderItem = React__default["default"].forwardRef(function (props, ref) {
 });
 HeaderItem.displayName = 'HeaderItem';
 
-var ItemMeta = React__default["default"].forwardRef(function (props, ref) {
-  var _useMenuContext = useMenuContext(),
-      isCompact = _useMenuContext.isCompact;
-  var _useItemContext = useItemContext(),
-      isDisabled = _useItemContext.isDisabled;
+const ItemMeta = React__default["default"].forwardRef((props, ref) => {
+  const {
+    isCompact
+  } = useMenuContext();
+  const {
+    isDisabled
+  } = useItemContext();
   return React__default["default"].createElement(StyledItemMeta, _extends$5({
     ref: ref,
     isCompact: isCompact,
@@ -2223,9 +1932,10 @@ var ItemMeta = React__default["default"].forwardRef(function (props, ref) {
 });
 ItemMeta.displayName = 'ItemMeta';
 
-var MediaBody = React__default["default"].forwardRef(function (props, ref) {
-  var _useMenuContext = useMenuContext(),
-      isCompact = _useMenuContext.isCompact;
+const MediaBody = React__default["default"].forwardRef((props, ref) => {
+  const {
+    isCompact
+  } = useMenuContext();
   return React__default["default"].createElement(StyledMediaBody, _extends$5({
     ref: ref,
     isCompact: isCompact
@@ -2233,34 +1943,34 @@ var MediaBody = React__default["default"].forwardRef(function (props, ref) {
 });
 MediaBody.displayName = 'MediaBody';
 
-var MediaFigure = function MediaFigure(props) {
-  var _useMenuContext = useMenuContext(),
-      isCompact = _useMenuContext.isCompact;
+const MediaFigure = props => {
+  const {
+    isCompact
+  } = useMenuContext();
   return React__default["default"].createElement(StyledMediaFigure, _extends$5({
     isCompact: isCompact
   }, props));
 };
 
-var MediaItem = React__default["default"].forwardRef(function (props, ref) {
-  return React__default["default"].createElement(Item, _extends$5({
-    component: StyledMediaItem,
-    ref: ref
-  }, props));
-});
+const MediaItem = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(Item, _extends$5({
+  component: StyledMediaItem,
+  ref: ref
+}, props)));
 MediaItem.displayName = 'MediaItem';
 MediaItem.propTypes = {
   value: PropTypes__default["default"].any,
   disabled: PropTypes__default["default"].bool
 };
 
-var _excluded$1 = ["children", "disabled"],
-    _excluded2$1 = ["value", "disabled"];
-var NextItemComponent = React__default["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  var _useMenuContext = useMenuContext(),
-      isCompact = _useMenuContext.isCompact;
+const NextItemComponent = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    disabled,
+    ...props
+  } = _ref;
+  const {
+    isCompact
+  } = useMenuContext();
   return React__default["default"].createElement(StyledNextItem, _extends$5({
     ref: ref,
     disabled: disabled
@@ -2272,15 +1982,21 @@ var NextItemComponent = React__default["default"].forwardRef(function (_ref, ref
     isDisabled: disabled
   })), children);
 });
-var NextItem = React__default["default"].forwardRef(function (_ref2, ref) {
-  var value = _ref2.value,
-      disabled = _ref2.disabled,
-      props = _objectWithoutProperties(_ref2, _excluded2$1);
-  var _useDropdownContext = useDropdownContext(),
-      nextItemsHashRef = _useDropdownContext.nextItemsHashRef,
-      itemToString = _useDropdownContext.downshift.itemToString;
-  var _useMenuContext2 = useMenuContext(),
-      itemIndexRef = _useMenuContext2.itemIndexRef;
+const NextItem = React__default["default"].forwardRef((_ref2, ref) => {
+  let {
+    value,
+    disabled,
+    ...props
+  } = _ref2;
+  const {
+    nextItemsHashRef,
+    downshift: {
+      itemToString
+    }
+  } = useDropdownContext();
+  const {
+    itemIndexRef
+  } = useMenuContext();
   if (!disabled) {
     nextItemsHashRef.current[itemToString(value)] = itemIndexRef.current;
   }
@@ -2298,14 +2014,15 @@ NextItem.propTypes = {
   disabled: PropTypes__default["default"].bool
 };
 
-var _excluded = ["children", "disabled"],
-    _excluded2 = ["value", "disabled"];
-var PreviousItemComponent = React__default["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded);
-  var _useMenuContext = useMenuContext(),
-      isCompact = _useMenuContext.isCompact;
+const PreviousItemComponent = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    disabled,
+    ...props
+  } = _ref;
+  const {
+    isCompact
+  } = useMenuContext();
   return React__default["default"].createElement(StyledPreviousItem, _extends$5({
     ref: ref,
     disabled: disabled
@@ -2317,14 +2034,18 @@ var PreviousItemComponent = React__default["default"].forwardRef(function (_ref,
     isDisabled: disabled
   })), children);
 });
-var PreviousItem = React__default["default"].forwardRef(function (_ref2, ref) {
-  var value = _ref2.value,
-      disabled = _ref2.disabled,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-  var _useDropdownContext = useDropdownContext(),
-      previousIndexRef = _useDropdownContext.previousIndexRef;
-  var _useMenuContext2 = useMenuContext(),
-      itemIndexRef = _useMenuContext2.itemIndexRef;
+const PreviousItem = React__default["default"].forwardRef((_ref2, ref) => {
+  let {
+    value,
+    disabled,
+    ...props
+  } = _ref2;
+  const {
+    previousIndexRef
+  } = useDropdownContext();
+  const {
+    itemIndexRef
+  } = useMenuContext();
   if (!disabled) {
     previousIndexRef.current = itemIndexRef.current;
   }