@zendeskgarden/react-dropdowns 8.62.0 → 8.62.2

package/dist/index.cjs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var PropTypes = require('prop-types');
 var styled = require('styled-components');
@@ -22,7 +20,7 @@ var mergeRefs = require('react-merge-refs');
 var containerSelection = require('@zendeskgarden/container-selection');
 var reactDom = require('react-dom');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -38,16 +36,15 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 
 function _extends$5() {
   _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
@@ -64,7 +61,7 @@ function _extends$5() {
   return _extends$5.apply(this, arguments);
 }
 
-const DropdownContext = React__default["default"].createContext(undefined);
+const DropdownContext = React__namespace.default.createContext(undefined);
 const useDropdownContext = () => {
   const dropdownContext = React.useContext(DropdownContext);
   if (!dropdownContext) {
@@ -144,7 +141,7 @@ const Dropdown = props => {
       ...downshift
     };
   };
-  return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(Downshift__default["default"], _extends$5({
+  return React__namespace.default.createElement(reactPopper.Manager, null, React__namespace.default.createElement(Downshift__default.default, _extends$5({
     suppressRefError: true
     ,
     isOpen: isOpen,
@@ -195,7 +192,7 @@ const Dropdown = props => {
     },
     stateReducer: (_state, changes) => {
       switch (changes.type) {
-        case Downshift__default["default"].stateChangeTypes.changeInput:
+        case Downshift__default.default.stateChangeTypes.changeInput:
           if (changes.inputValue === '' && dropdownType === 'combobox') {
             return {
               ...changes,
@@ -207,7 +204,7 @@ const Dropdown = props => {
           return changes;
       }
     }
-  }, downshiftProps), downshift => React__default["default"].createElement(DropdownContext.Provider, {
+  }, downshiftProps), downshift => React__namespace.default.createElement(DropdownContext.Provider, {
     value: {
       hasMenuRef,
       itemIndexRef,
@@ -224,14 +221,14 @@ const Dropdown = props => {
   }, children)));
 };
 Dropdown.propTypes = {
-  isOpen: PropTypes__default["default"].bool,
-  selectedItem: PropTypes__default["default"].any,
-  selectedItems: PropTypes__default["default"].arrayOf(PropTypes__default["default"].any),
-  highlightedIndex: PropTypes__default["default"].number,
-  inputValue: PropTypes__default["default"].string,
-  onSelect: PropTypes__default["default"].func,
-  onStateChange: PropTypes__default["default"].func,
-  downshiftProps: PropTypes__default["default"].object
+  isOpen: PropTypes__default.default.bool,
+  selectedItem: PropTypes__default.default.any,
+  selectedItems: PropTypes__default.default.arrayOf(PropTypes__default.default.any),
+  highlightedIndex: PropTypes__default.default.number,
+  inputValue: PropTypes__default.default.string,
+  onSelect: PropTypes__default.default.func,
+  onStateChange: PropTypes__default.default.func,
+  downshiftProps: PropTypes__default.default.object
 };
 
 function getPopperPlacement(gardenPlacement) {
@@ -305,9 +302,9 @@ function getMenuPosition(popperPlacement) {
 }
 
 const COMPONENT_ID$m = 'dropdowns.menu';
-const StyledMenu = styled__default["default"].ul.attrs(props => ({
+const StyledMenu = styled__default.default.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.62.0',
+  'data-garden-version': '8.62.2',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",
@@ -322,9 +319,9 @@ StyledMenu.defaultProps = {
 };
 
 const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
-const StyledMenuWrapper = styled__default["default"].div.attrs(props => ({
+const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.62.0',
+  'data-garden-version': '8.62.2',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
@@ -341,9 +338,9 @@ StyledMenuWrapper.defaultProps = {
 };
 
 const COMPONENT_ID$k = 'dropdowns.separator';
-const StyledSeparator = styled__default["default"].li.attrs({
+const StyledSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.62.0',
+  'data-garden-version': '8.62.2',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -374,9 +371,9 @@ const getColorStyles = props => {
   }
   return styled.css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
 };
-const StyledItem = styled__default["default"].li.attrs(props => ({
+const StyledItem = styled__default.default.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.0',
+  'data-garden-version': '8.62.2',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",
@@ -387,9 +384,9 @@ StyledItem.defaultProps = {
 };
 
 const COMPONENT_ID$i = 'dropdowns.add_item';
-const StyledAddItem = styled__default["default"](StyledItem).attrs({
+const StyledAddItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-ekqk50-0"
@@ -399,9 +396,9 @@ StyledAddItem.defaultProps = {
 };
 
 const COMPONENT_ID$h = 'dropdowns.item_meta';
-const StyledItemMeta = styled__default["default"].span.attrs({
+const StyledItemMeta = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-k6xy28-0"
@@ -414,9 +411,9 @@ 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`));
 };
-const StyledItemIcon = styled__default["default"].div.attrs({
+const StyledItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-1v0ty11-0"
@@ -426,9 +423,9 @@ StyledItemIcon.defaultProps = {
 };
 
 const COMPONENT_ID$f = 'dropdowns.next_item';
-const StyledNextItem = styled__default["default"](StyledItem).attrs({
+const StyledNextItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1bcygn5-0"
@@ -461,13 +458,13 @@ const NextIconComponent = _ref => {
   let {
     className
   } = _ref;
-  return React__default["default"].createElement(SvgChevronRightStroke, {
+  return React__namespace.default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '8.62.0',
+    "data-garden-version": '8.62.2',
     className: className
   });
 };
-const StyledNextIcon = styled__default["default"](NextIconComponent).withConfig({
+const StyledNextIcon = styled__default.default(NextIconComponent).withConfig({
   displayName: "StyledNextIcon",
   componentId: "sc-1rinki2-0"
 })(["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));
@@ -476,9 +473,9 @@ StyledNextIcon.defaultProps = {
 };
 
 const COMPONENT_ID$d = 'dropdowns.previous_item';
-const StyledPreviousItem = styled__default["default"](StyledItem).attrs({
+const StyledPreviousItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1nmdds9-0"
@@ -511,13 +508,13 @@ const PreviousIconComponent = _ref => {
   let {
     className
   } = _ref;
-  return React__default["default"].createElement(SvgChevronLeftStroke, {
+  return React__namespace.default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '8.62.0',
+    "data-garden-version": '8.62.2',
     className: className
   });
 };
-const StyledPreviousIcon = styled__default["default"](PreviousIconComponent).withConfig({
+const StyledPreviousIcon = styled__default.default(PreviousIconComponent).withConfig({
   displayName: "StyledPreviousIcon",
   componentId: "sc-czfwj7-0"
 })(["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));
@@ -526,9 +523,9 @@ StyledPreviousIcon.defaultProps = {
 };
 
 const COMPONENT_ID$b = 'dropdowns.header_icon';
-const StyledHeaderIcon = styled__default["default"].div.attrs({
+const StyledHeaderIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-1fl6nsz-0"
@@ -544,9 +541,9 @@ const getHorizontalPadding = props => {
   }
   return `${props.theme.space.base * 3}px`;
 };
-const StyledHeaderItem = styled__default["default"](StyledItem).attrs({
+const StyledHeaderItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-137filx-0"
@@ -556,9 +553,9 @@ StyledHeaderItem.defaultProps = {
 };
 
 const COMPONENT_ID$9 = 'dropdowns.media_body';
-const StyledMediaBody = styled__default["default"].div.attrs({
+const StyledMediaBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-36j7ef-0"
@@ -568,7 +565,7 @@ StyledMediaBody.defaultProps = {
 };
 
 const COMPONENT_ID$8 = 'dropdowns.media_figure';
-const StyledMediaFigure = styled__default["default"](
+const StyledMediaFigure = styled__default.default(
 _ref => {
   let {
     children,
@@ -577,11 +574,11 @@ _ref => {
     ...props
   } = _ref;
   return (
-    React__default["default"].cloneElement(React.Children.only(children), props)
+    React__namespace.default.cloneElement(React.Children.only(children), props)
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-2f2x8x-0"
@@ -591,9 +588,9 @@ StyledMediaFigure.defaultProps = {
 };
 
 const COMPONENT_ID$7 = 'dropdowns.media_item';
-const StyledMediaItem = styled__default["default"](StyledItem).attrs({
+const StyledMediaItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-ikwshz-0"
@@ -603,9 +600,9 @@ StyledMediaItem.defaultProps = {
 };
 
 const COMPONENT_ID$6 = 'dropdowns.faux_input';
-const StyledFauxInput = styled__default["default"](reactForms.FauxInput).attrs(props => ({
+const StyledFauxInput = styled__default.default(reactForms.FauxInput).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.0',
+  'data-garden-version': '8.62.2',
   mediaLayout: true,
   theme: props.theme
 })).withConfig({
@@ -618,9 +615,9 @@ StyledFauxInput.defaultProps = {
 
 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({
+const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.0',
+  'data-garden-version': '8.62.2',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -631,9 +628,9 @@ StyledInput.defaultProps = {
 };
 
 const COMPONENT_ID$4 = 'dropdowns.select';
-const StyledSelect = styled__default["default"].div.attrs({
+const StyledSelect = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xifmwj-0"
@@ -652,9 +649,9 @@ const visibleStyling = props => {
   }
   return styled.css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !props.isVisible && 0, margin, !props.isVisible && 0, minWidth, height);
 };
-const StyledMultiselectInput = styled__default["default"](StyledInput).attrs({
+const StyledMultiselectInput = styled__default.default(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledMultiselectInput",
   componentId: "sc-1avnf6f-0"
@@ -676,9 +673,9 @@ const sizeStyles = props => {
   }
   return styled.css(["margin:", ";padding:", ";"], margin, padding);
 };
-const StyledMultiselectItemsContainer = styled__default["default"].div.attrs({
+const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1jzhet8-0"
@@ -688,9 +685,9 @@ StyledMultiselectItemsContainer.defaultProps = {
 };
 
 const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
-const StyledMultiselectItemWrapper = styled__default["default"].div.attrs({
+const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-1rb2bye-0"
@@ -700,9 +697,9 @@ StyledMultiselectItemWrapper.defaultProps = {
 };
 
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
-const StyledMultiselectMoreAnchor = styled__default["default"].div.attrs({
+const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.0'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-1m9v46e-0"
@@ -824,7 +821,7 @@ const Trigger = _ref => {
       'aria-owns': null
     };
     const toggleButtonProps = hasMenuRef.current ? menuToggleProps : listboxToggleProps;
-    return React__default["default"].cloneElement(React__default["default"].Children.only(children), {
+    return React__namespace.default.cloneElement(React__namespace.default.Children.only(children), {
       ...toggleButtonProps,
       [refKey]: childRef => {
         popperRef(childRef);
@@ -833,11 +830,11 @@ const Trigger = _ref => {
       }
     });
   };
-  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+  return React__namespace.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({
+    return React__namespace.default.createElement(React__namespace.default.Fragment, null, renderChildren(popperReference), React__namespace.default.createElement(StyledInput, getInputProps({
       readOnly: true,
       isHidden: true,
       tabIndex: -1,
@@ -853,8 +850,8 @@ const Trigger = _ref => {
   });
 };
 Trigger.propTypes = {
-  children: PropTypes__default["default"].any,
-  refKey: PropTypes__default["default"].string
+  children: PropTypes__default.default.any,
+  refKey: PropTypes__default.default.string
 };
 Trigger.defaultProps = {
   refKey: 'ref'
@@ -879,7 +876,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const FieldContext = React__default["default"].createContext(undefined);
+const FieldContext = React__namespace.default.createContext(undefined);
 const useFieldContext = () => {
   const fieldContext = React.useContext(FieldContext);
   if (!fieldContext) {
@@ -940,11 +937,11 @@ const Autocomplete = React.forwardRef((_ref, ref) => {
   React.useEffect(() => {
     setDropdownType('autocomplete');
   }, [setDropdownType]);
-  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+  return React__namespace.default.createElement(reactPopper.Reference, null, _ref2 => {
     let {
       ref: popperReference
     } = _ref2;
-    return React__default["default"].createElement(StyledFauxInput, _extends$5({
+    return React__namespace.default.createElement(StyledFauxInput, _extends$5({
       isHovered: isContainerHovered,
       isFocused: isContainerFocused,
       tabIndex: null,
@@ -952,14 +949,14 @@ const Autocomplete = React.forwardRef((_ref, ref) => {
     }, selectProps, {
       ref: selectRef => {
         popperReference(selectRef);
-        mergeRefs__default["default"]([triggerRef, ref])(selectRef);
+        mergeRefs__default.default([triggerRef, ref])(selectRef);
         popperReferenceElementRef.current = selectRef;
       }
-    }), start && React__default["default"].createElement(StyledFauxInput.StartIcon, {
+    }), start && React__namespace.default.createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled
-    }, start), !isOpen && React__default["default"].createElement(StyledSelect, null, children), React__default["default"].createElement(StyledInput, getInputProps({
+    }, start), !isOpen && React__namespace.default.createElement(StyledSelect, null, children), React__namespace.default.createElement(StyledInput, getInputProps({
       isHidden: !isOpen,
       disabled: props.disabled,
       onFocus: () => {
@@ -974,22 +971,22 @@ const Autocomplete = React.forwardRef((_ref, ref) => {
         }
       },
       role: 'combobox',
-      ref: mergeRefs__default["default"]([inputRef, controlledInputRef || null])
-    })), !props.isBare && React__default["default"].createElement(StyledFauxInput.EndIcon, {
+      ref: mergeRefs__default.default([inputRef, controlledInputRef || null])
+    })), !props.isBare && React__namespace.default.createElement(StyledFauxInput.EndIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled,
       isRotated: isOpen
-    }, React__default["default"].createElement(SvgChevronDownStroke, null)));
+    }, React__namespace.default.createElement(SvgChevronDownStroke, null)));
   });
 });
 Autocomplete.displayName = 'Autocomplete';
 Autocomplete.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  validation: PropTypes__default.default.oneOf(reactForms.VALIDATION)
 };
 
 const Combobox = React.forwardRef((_ref, ref) => {
@@ -1057,33 +1054,33 @@ const Combobox = React.forwardRef((_ref, ref) => {
   React.useEffect(() => {
     setDropdownType('combobox');
   }, [setDropdownType]);
-  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+  return React__namespace.default.createElement(reactPopper.Reference, null, _ref2 => {
     let {
       ref: popperReference
     } = _ref2;
     const wrapperRefProp = element => {
       popperReference(element);
-      mergeRefs__default["default"]([wrapperRef, ref])(element);
+      mergeRefs__default.default([wrapperRef, ref])(element);
       popperReferenceElementRef.current = element;
     };
-    return React__default["default"].createElement(reactForms.MediaInput, _extends$5({}, inputProps, {
+    return React__namespace.default.createElement(reactForms.MediaInput, _extends$5({}, inputProps, {
       wrapperProps: wrapperProps,
       wrapperRef: wrapperRefProp,
-      ref: mergeRefs__default["default"]([inputRef, inputRefProp])
+      ref: mergeRefs__default.default([inputRef, inputRefProp])
     }));
   });
 });
 Combobox.displayName = 'Combobox';
 Combobox.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  placeholder: PropTypes__default["default"].string,
-  validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  placeholder: PropTypes__default.default.string,
+  validation: PropTypes__default.default.oneOf(reactForms.VALIDATION)
 };
 
-const Multiselect = React__default["default"].forwardRef((_ref, ref) => {
+const Multiselect = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     renderItem,
     placeholder,
@@ -1199,8 +1196,8 @@ const Multiselect = React__default["default"].forwardRef((_ref, ref) => {
       value: item,
       removeValue
     });
-    const focusRef = React__default["default"].createRef();
-    const clonedChild = React__default["default"].cloneElement(renderedItem, {
+    const focusRef = React__namespace.default.createRef();
+    const clonedChild = React__namespace.default.cloneElement(renderedItem, {
       ...getItemProps({
         item,
         focusRef,
@@ -1239,7 +1236,7 @@ const Multiselect = React__default["default"].forwardRef((_ref, ref) => {
       size: props.isCompact ? 'medium' : 'large'
     });
     const key = `${itemToString(item)}-${index}`;
-    return React__default["default"].createElement(StyledMultiselectItemWrapper, {
+    return React__namespace.default.createElement(StyledMultiselectItemWrapper, {
       key: key
     }, clonedChild);
   }, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef, themeContext.rtl]);
@@ -1250,7 +1247,7 @@ const Multiselect = React__default["default"].forwardRef((_ref, ref) => {
       const item = itemValues[x];
       if (x < maxItems) {
         if (props.disabled) {
-          const renderedItem = React__default["default"].cloneElement(renderItem({
+          const renderedItem = React__namespace.default.cloneElement(renderItem({
             value: item,
             removeValue: () => {
               return undefined;
@@ -1258,16 +1255,16 @@ const Multiselect = React__default["default"].forwardRef((_ref, ref) => {
           }), {
             size: props.isCompact ? 'medium' : 'large'
           });
-          output.push( React__default["default"].createElement(StyledMultiselectItemWrapper, {
+          output.push( React__namespace.default.createElement(StyledMultiselectItemWrapper, {
             key: x
           }, renderedItem));
         } else {
           output.push(renderSelectableItem(item, x));
         }
       } else if (!isFocused && !inputValue || props.disabled) {
-        output.push( React__default["default"].createElement(StyledMultiselectItemWrapper, {
+        output.push( React__namespace.default.createElement(StyledMultiselectItemWrapper, {
           key: "more-anchor"
-        }, React__default["default"].createElement(StyledMultiselectMoreAnchor, {
+        }, React__namespace.default.createElement(StyledMultiselectMoreAnchor, {
           isCompact: props.isCompact,
           isDisabled: props.disabled
         }, renderShowMore ? renderShowMore(itemValues.length - x) : `+ ${itemValues.length - x} more`)));
@@ -1283,26 +1280,26 @@ const Multiselect = React__default["default"].forwardRef((_ref, ref) => {
   React.useEffect(() => {
     setDropdownType('multiselect');
   }, [setDropdownType]);
-  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+  return React__namespace.default.createElement(reactPopper.Reference, null, _ref2 => {
     let {
       ref: popperReference
     } = _ref2;
-    return React__default["default"].createElement(StyledFauxInput, getContainerProps({
+    return React__namespace.default.createElement(StyledFauxInput, getContainerProps({
       ...selectProps,
       isHovered: isContainerHovered,
       isFocused: isContainerFocused,
       ref: selectRef => {
         popperReference(selectRef);
-        mergeRefs__default["default"]([triggerRef, popperReferenceElementRef, ref])(selectRef);
+        mergeRefs__default.default([triggerRef, popperReferenceElementRef, ref])(selectRef);
       }
-    }), start && React__default["default"].createElement(StyledFauxInput.StartIcon, {
+    }), start && React__namespace.default.createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled
-    }, start), React__default["default"].createElement(StyledMultiselectItemsContainer, {
+    }, start), React__namespace.default.createElement(StyledMultiselectItemsContainer, {
       isBare: props.isBare,
       isCompact: props.isCompact
-    }, items, React__default["default"].createElement(StyledMultiselectInput, getInputProps({
+    }, items, React__namespace.default.createElement(StyledMultiselectInput, getInputProps({
       disabled: props.disabled,
       onFocus: () => {
         setFocusedItem(undefined);
@@ -1332,31 +1329,31 @@ const Multiselect = React__default["default"].forwardRef((_ref, ref) => {
       isVisible: isFocused || inputValue || selectedItems.length === 0,
       isCompact: props.isCompact,
       role: 'combobox',
-      ref: mergeRefs__default["default"]([inputRef, externalInputRef]),
+      ref: mergeRefs__default.default([inputRef, externalInputRef]),
       placeholder: selectedItems.length === 0 ? placeholder : undefined
-    }))), !props.isBare && React__default["default"].createElement(StyledFauxInput.EndIcon, {
+    }))), !props.isBare && React__namespace.default.createElement(StyledFauxInput.EndIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled,
       isRotated: isOpen
-    }, React__default["default"].createElement(SvgChevronDownStroke, null)));
+    }, React__namespace.default.createElement(SvgChevronDownStroke, null)));
   });
 });
 Multiselect.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  renderItem: PropTypes__default["default"].func.isRequired,
-  maxItems: PropTypes__default["default"].number,
-  validation: PropTypes__default["default"].oneOf(['success', 'warning', 'error'])
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  renderItem: PropTypes__default.default.func.isRequired,
+  maxItems: PropTypes__default.default.number,
+  validation: PropTypes__default.default.oneOf(['success', 'warning', 'error'])
 };
 Multiselect.defaultProps = {
   maxItems: 4
 };
 Multiselect.displayName = 'Multiselect';
 
-const Select = React__default["default"].forwardRef((_ref, ref) => {
+const Select = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
     start,
@@ -1464,24 +1461,24 @@ const Select = React__default["default"].forwardRef((_ref, ref) => {
   });
   const isContainerHovered = isLabelHovered && !isOpen;
   const isContainerFocused = isFocused || isOpen;
-  return React__default["default"].createElement(reactPopper.Reference, null, _ref2 => {
+  return React__namespace.default.createElement(reactPopper.Reference, null, _ref2 => {
     let {
       ref: popperReference
     } = _ref2;
-    return React__default["default"].createElement(StyledFauxInput, _extends$5({
+    return React__namespace.default.createElement(StyledFauxInput, _extends$5({
       isHovered: isContainerHovered,
       isFocused: isContainerFocused
     }, selectProps, {
       role: "none",
       ref: selectRef => {
         popperReference(selectRef);
-        mergeRefs__default["default"]([triggerRef, ref, popperReferenceElementRef])(selectRef);
+        mergeRefs__default.default([triggerRef, ref, popperReferenceElementRef])(selectRef);
       }
-    }), start && React__default["default"].createElement(StyledFauxInput.StartIcon, {
+    }), start && React__namespace.default.createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled
-    }, start), React__default["default"].createElement(StyledSelect, null, children), React__default["default"].createElement(StyledInput, getInputProps({
+    }, start), React__namespace.default.createElement(StyledSelect, null, children), React__namespace.default.createElement(StyledInput, getInputProps({
       readOnly: true,
       isHidden: true,
       tabIndex: -1,
@@ -1493,22 +1490,22 @@ const Select = React__default["default"].forwardRef((_ref, ref) => {
         }
       },
       onKeyDown: onInputKeyDown
-    })), !props.isBare && React__default["default"].createElement(StyledFauxInput.EndIcon, {
+    })), !props.isBare && React__namespace.default.createElement(StyledFauxInput.EndIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled,
       isRotated: isOpen
-    }, React__default["default"].createElement(SvgChevronDownStroke, null)));
+    }, React__namespace.default.createElement(SvgChevronDownStroke, null)));
   });
 });
 Select.displayName = 'Select';
 Select.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION),
-  start: PropTypes__default["default"].any
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  validation: PropTypes__default.default.oneOf(reactForms.VALIDATION),
+  start: PropTypes__default.default.any
 };
 
 const Field = React.forwardRef((props, fieldRef) => {
@@ -1525,20 +1522,20 @@ const Field = React.forwardRef((props, fieldRef) => {
     isLabelHovered,
     setIsLabelHovered
   }), [isLabelHovered, setIsLabelHovered]);
-  return React__default["default"].createElement(FieldContext.Provider, {
+  return React__namespace.default.createElement(FieldContext.Provider, {
     value: value
-  }, React__default["default"].createElement(reactForms.Field, _extends$5({
-    ref: mergeRefs__default["default"]([ref, fieldRef])
+  }, React__namespace.default.createElement(reactForms.Field, _extends$5({
+    ref: mergeRefs__default.default([ref, fieldRef])
   }, props)));
 });
 Field.displayName = 'Field';
 
-const Hint = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(reactForms.Hint, _extends$5({
+const Hint = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(reactForms.Hint, _extends$5({
   ref: ref
 }, props)));
 Hint.displayName = 'Hint';
 
-const Label = React__default["default"].forwardRef((_ref, ref) => {
+const Label = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     onMouseEnter,
     onMouseLeave,
@@ -1561,27 +1558,27 @@ const Label = React__default["default"].forwardRef((_ref, ref) => {
     }),
     ...other
   });
-  return React__default["default"].createElement(reactForms.Label, _extends$5({
+  return React__namespace.default.createElement(reactForms.Label, _extends$5({
     ref: ref
   }, labelProps));
 });
 Label.displayName = 'Label';
 Label.propTypes = {
-  isRegular: PropTypes__default["default"].bool
+  isRegular: PropTypes__default.default.bool
 };
 
-const Message = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(reactForms.Message, _extends$5({
+const Message = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(reactForms.Message, _extends$5({
   ref: ref
 }, props)));
 Message.displayName = 'Message';
 Message.propTypes = {
-  validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
+  validation: PropTypes__default.default.oneOf(reactForms.VALIDATION)
 };
 
 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'];
 
-const MenuContext = React__default["default"].createContext(undefined);
+const MenuContext = React__namespace.default.createContext(undefined);
 const useMenuContext = () => {
   const menuContext = React.useContext(MenuContext);
   if (!menuContext) {
@@ -1641,12 +1638,12 @@ const Menu = React.forwardRef((props, menuRef) => {
   itemSearchRegistry.current = [];
   const popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
   return (
-    React__default["default"].createElement(MenuContext.Provider, {
+    React__namespace.default.createElement(MenuContext.Provider, {
       value: {
         itemIndexRef,
         isCompact
       }
-    }, React__default["default"].createElement(reactPopper.Popper, {
+    }, React__namespace.default.createElement(reactPopper.Popper, {
       placement: popperPlacement,
       modifiers: popperModifiers
       ,
@@ -1672,7 +1669,7 @@ const Menu = React.forwardRef((props, menuRef) => {
         isAnimated: isAnimated && (isOpen || isVisible),
         ...otherProps
       });
-      const menu = React__default["default"].createElement(StyledMenuWrapper, {
+      const menu = React__namespace.default.createElement(StyledMenuWrapper, {
         ref: isOpen ? ref : undefined,
         hasArrow: menuProps.hasArrow,
         placement: menuProps.placement,
@@ -1680,7 +1677,7 @@ const Menu = React.forwardRef((props, menuRef) => {
         isHidden: !isOpen,
         isAnimated: menuProps.isAnimated,
         zIndex: zIndex
-      }, React__default["default"].createElement(StyledMenu, _extends$5({
+      }, React__namespace.default.createElement(StyledMenu, _extends$5({
         ref: menuRef,
         isCompact: isCompact,
         maxHeight: maxHeight,
@@ -1692,15 +1689,15 @@ const Menu = React.forwardRef((props, menuRef) => {
 });
 Menu.displayName = 'Menu';
 Menu.propTypes = {
-  popperModifiers: PropTypes__default["default"].any,
-  eventsEnabled: PropTypes__default["default"].bool,
-  zIndex: PropTypes__default["default"].number,
-  style: PropTypes__default["default"].object,
-  placement: PropTypes__default["default"].oneOf(PLACEMENT),
-  isAnimated: PropTypes__default["default"].bool,
-  isCompact: PropTypes__default["default"].bool,
-  hasArrow: PropTypes__default["default"].bool,
-  maxHeight: PropTypes__default["default"].string
+  popperModifiers: PropTypes__default.default.any,
+  eventsEnabled: PropTypes__default.default.bool,
+  zIndex: PropTypes__default.default.number,
+  style: PropTypes__default.default.object,
+  placement: PropTypes__default.default.oneOf(PLACEMENT),
+  isAnimated: PropTypes__default.default.bool,
+  isCompact: PropTypes__default.default.bool,
+  hasArrow: PropTypes__default.default.bool,
+  maxHeight: PropTypes__default.default.string
 };
 Menu.defaultProps = {
   placement: 'bottom-start',
@@ -1710,7 +1707,7 @@ Menu.defaultProps = {
   zIndex: 1000
 };
 
-const Separator = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(StyledSeparator, _extends$5({
+const Separator = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledSeparator, _extends$5({
   ref: ref
 }, props)));
 Separator.displayName = 'Separator';
@@ -1757,7 +1754,7 @@ var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   })));
 };
 
-const ItemContext = React__default["default"].createContext(undefined);
+const ItemContext = React__namespace.default.createContext(undefined);
 const useItemContext = () => {
   const context = React.useContext(ItemContext);
   if (!context) {
@@ -1766,12 +1763,13 @@ const useItemContext = () => {
   return context;
 };
 
-const Item = React__default["default"].forwardRef((_ref, forwardRef) => {
+const Item = React__namespace.default.forwardRef((_ref, forwardRef) => {
   let {
     value,
     disabled,
     isDanger,
     component = StyledItem,
+    hasIcon,
     children,
     ...props
   } = _ref;
@@ -1827,25 +1825,25 @@ const Item = React__default["default"].forwardRef((_ref, forwardRef) => {
   const contextValue = React.useMemo(() => ({
     isDisabled: disabled
   }), [disabled]);
-  const ref = mergeRefs__default["default"]([itemRef, forwardRef]);
+  const ref = mergeRefs__default.default([itemRef, forwardRef]);
   if (disabled) {
-    return React__default["default"].createElement(ItemContext.Provider, {
+    return React__namespace.default.createElement(ItemContext.Provider, {
       value: contextValue
-    }, React__default["default"].createElement(Component, _extends$5({
+    }, React__namespace.default.createElement(Component, _extends$5({
       ref: ref,
       disabled: disabled,
       isDanger: isDanger,
       isCompact: isCompact
-    }, props), isSelected && React__default["default"].createElement(StyledItemIcon, {
+    }, props), isSelected && !hasIcon && React__namespace.default.createElement(StyledItemIcon, {
       isCompact: isCompact,
       isVisible: isSelected,
       isDisabled: disabled
-    }, React__default["default"].createElement(SvgCheckLgStroke, null)), children));
+    }, React__namespace.default.createElement(SvgCheckLgStroke, null)), children));
   }
   itemIndexRef.current++;
-  return React__default["default"].createElement(ItemContext.Provider, {
+  return React__namespace.default.createElement(ItemContext.Provider, {
     value: contextValue
-  }, React__default["default"].createElement(Component, getItemProps({
+  }, React__namespace.default.createElement(Component, getItemProps({
     item: value,
     isFocused,
     ref,
@@ -1856,18 +1854,18 @@ const Item = React__default["default"].forwardRef((_ref, forwardRef) => {
       'aria-selected': null
     }),
     ...props
-  }), isSelected && React__default["default"].createElement(StyledItemIcon, {
+  }), isSelected && !hasIcon && React__namespace.default.createElement(StyledItemIcon, {
     isCompact: isCompact,
     isVisible: isSelected
-  }, React__default["default"].createElement(SvgCheckLgStroke, null)), children));
+  }, React__namespace.default.createElement(SvgCheckLgStroke, null)), children));
 });
 Item.displayName = 'Item';
 Item.propTypes = {
-  value: PropTypes__default["default"].any,
-  disabled: PropTypes__default["default"].bool
+  value: PropTypes__default.default.any,
+  disabled: PropTypes__default.default.bool
 };
 
-const AddItemComponent = React__default["default"].forwardRef((_ref, ref) => {
+const AddItemComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
     disabled,
@@ -1876,55 +1874,57 @@ const AddItemComponent = React__default["default"].forwardRef((_ref, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__default["default"].createElement(StyledAddItem, _extends$5({
+  return React__namespace.default.createElement(StyledAddItem, _extends$5({
     ref: ref,
     disabled: disabled
-  }, props), React__default["default"].createElement(StyledItemIcon, {
+  }, props), React__namespace.default.createElement(StyledItemIcon, {
     isCompact: isCompact,
     isVisible: true,
     isDisabled: disabled
-  }, React__default["default"].createElement(SvgPlusStroke, null)), children);
+  }, React__namespace.default.createElement(SvgPlusStroke, null)), children);
 });
-const AddItem = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(Item, _extends$5({
+const AddItem = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(Item, _extends$5({
   component: AddItemComponent,
   ref: ref
-}, props)));
+}, props, {
+  hasIcon: true
+})));
 AddItem.displayName = 'AddItem';
 AddItem.propTypes = {
-  value: PropTypes__default["default"].any,
-  disabled: PropTypes__default["default"].bool
+  value: PropTypes__default.default.any,
+  disabled: PropTypes__default.default.bool
 };
 
-const HeaderIcon = React__default["default"].forwardRef((props, ref) => {
+const HeaderIcon = React__namespace.default.forwardRef((props, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__default["default"].createElement(StyledHeaderIcon, _extends$5({
+  return React__namespace.default.createElement(StyledHeaderIcon, _extends$5({
     ref: ref,
     isCompact: isCompact
   }, props));
 });
 HeaderIcon.displayName = 'HeaderIcon';
 
-const HeaderItem = React__default["default"].forwardRef((props, ref) => {
+const HeaderItem = React__namespace.default.forwardRef((props, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__default["default"].createElement(StyledHeaderItem, _extends$5({
+  return React__namespace.default.createElement(StyledHeaderItem, _extends$5({
     ref: ref,
     isCompact: isCompact
   }, props));
 });
 HeaderItem.displayName = 'HeaderItem';
 
-const ItemMeta = React__default["default"].forwardRef((props, ref) => {
+const ItemMeta = React__namespace.default.forwardRef((props, ref) => {
   const {
     isCompact
   } = useMenuContext();
   const {
     isDisabled
   } = useItemContext();
-  return React__default["default"].createElement(StyledItemMeta, _extends$5({
+  return React__namespace.default.createElement(StyledItemMeta, _extends$5({
     ref: ref,
     isCompact: isCompact,
     isDisabled: isDisabled
@@ -1932,11 +1932,11 @@ const ItemMeta = React__default["default"].forwardRef((props, ref) => {
 });
 ItemMeta.displayName = 'ItemMeta';
 
-const MediaBody = React__default["default"].forwardRef((props, ref) => {
+const MediaBody = React__namespace.default.forwardRef((props, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__default["default"].createElement(StyledMediaBody, _extends$5({
+  return React__namespace.default.createElement(StyledMediaBody, _extends$5({
     ref: ref,
     isCompact: isCompact
   }, props));
@@ -1947,22 +1947,22 @@ const MediaFigure = props => {
   const {
     isCompact
   } = useMenuContext();
-  return React__default["default"].createElement(StyledMediaFigure, _extends$5({
+  return React__namespace.default.createElement(StyledMediaFigure, _extends$5({
     isCompact: isCompact
   }, props));
 };
 
-const MediaItem = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(Item, _extends$5({
+const MediaItem = React__namespace.default.forwardRef((props, ref) => React__namespace.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
+  value: PropTypes__default.default.any,
+  disabled: PropTypes__default.default.bool
 };
 
-const NextItemComponent = React__default["default"].forwardRef((_ref, ref) => {
+const NextItemComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
     disabled,
@@ -1971,18 +1971,18 @@ const NextItemComponent = React__default["default"].forwardRef((_ref, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__default["default"].createElement(StyledNextItem, _extends$5({
+  return React__namespace.default.createElement(StyledNextItem, _extends$5({
     ref: ref,
     disabled: disabled
-  }, props), React__default["default"].createElement(StyledItemIcon, {
+  }, props), React__namespace.default.createElement(StyledItemIcon, {
     isCompact: isCompact,
     isDisabled: disabled,
     isVisible: true
-  }, React__default["default"].createElement(StyledNextIcon, {
+  }, React__namespace.default.createElement(StyledNextIcon, {
     isDisabled: disabled
   })), children);
 });
-const NextItem = React__default["default"].forwardRef((_ref2, ref) => {
+const NextItem = React__namespace.default.forwardRef((_ref2, ref) => {
   let {
     value,
     disabled,
@@ -2000,21 +2000,23 @@ const NextItem = React__default["default"].forwardRef((_ref2, ref) => {
   if (!disabled) {
     nextItemsHashRef.current[itemToString(value)] = itemIndexRef.current;
   }
-  return React__default["default"].createElement(Item, _extends$5({
+  return React__namespace.default.createElement(Item, _extends$5({
     component: NextItemComponent,
     "aria-expanded": true,
     disabled: disabled,
     value: value,
     ref: ref
-  }, props));
+  }, props, {
+    hasIcon: true
+  }));
 });
 NextItem.displayName = 'NextItem';
 NextItem.propTypes = {
-  value: PropTypes__default["default"].any,
-  disabled: PropTypes__default["default"].bool
+  value: PropTypes__default.default.any,
+  disabled: PropTypes__default.default.bool
 };
 
-const PreviousItemComponent = React__default["default"].forwardRef((_ref, ref) => {
+const PreviousItemComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
     disabled,
@@ -2023,18 +2025,18 @@ const PreviousItemComponent = React__default["default"].forwardRef((_ref, ref) =
   const {
     isCompact
   } = useMenuContext();
-  return React__default["default"].createElement(StyledPreviousItem, _extends$5({
+  return React__namespace.default.createElement(StyledPreviousItem, _extends$5({
     ref: ref,
     disabled: disabled
-  }, props), React__default["default"].createElement(StyledItemIcon, {
+  }, props), React__namespace.default.createElement(StyledItemIcon, {
     isCompact: isCompact,
     isDisabled: disabled,
     isVisible: true
-  }, React__default["default"].createElement(StyledPreviousIcon, {
+  }, React__namespace.default.createElement(StyledPreviousIcon, {
     isDisabled: disabled
   })), children);
 });
-const PreviousItem = React__default["default"].forwardRef((_ref2, ref) => {
+const PreviousItem = React__namespace.default.forwardRef((_ref2, ref) => {
   let {
     value,
     disabled,
@@ -2049,19 +2051,20 @@ const PreviousItem = React__default["default"].forwardRef((_ref2, ref) => {
   if (!disabled) {
     previousIndexRef.current = itemIndexRef.current;
   }
-  return React__default["default"].createElement(Item, _extends$5({
+  return React__namespace.default.createElement(Item, _extends$5({
     component: PreviousItemComponent,
     "aria-expanded": true,
     value: value,
     disabled: disabled
   }, props, {
-    ref: ref
+    ref: ref,
+    hasIcon: true
   }));
 });
 PreviousItem.displayName = 'PreviousItem';
 PreviousItem.propTypes = {
-  value: PropTypes__default["default"].any,
-  disabled: PropTypes__default["default"].bool
+  value: PropTypes__default.default.any,
+  disabled: PropTypes__default.default.bool
 };
 
 Object.defineProperty(exports, 'resetIdCounter', {