@zendeskgarden/react-dropdowns 8.47.0 → 8.48.1

package/dist/index.cjs.js

@@ -11,11 +11,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PropTypes = require('prop-types');
+var styled = require('styled-components');
 var Downshift = require('downshift');
 var reactPopper = require('react-popper');
-var reactTheming = require('@zendeskgarden/react-theming');
 var containerUtilities = require('@zendeskgarden/container-utilities');
-var styled = require('styled-components');
+var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
 var reactForms = require('@zendeskgarden/react-forms');
 var mergeRefs = require('react-merge-refs');
@@ -32,22 +32,20 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  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 Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
 function ownKeys(object, enumerableOnly) {
@@ -55,14 +53,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -70,19 +63,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    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;
@@ -216,7 +202,7 @@ 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 DropdownContext = React__default["default"].createContext(undefined);
 var useDropdownContext = function useDropdownContext() {
   var dropdownContext = React.useContext(DropdownContext);
   if (!dropdownContext) {
@@ -249,6 +235,7 @@ var Dropdown = function Dropdown(props) {
       _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) {
@@ -286,7 +273,7 @@ var Dropdown = function Dropdown(props) {
         downshift = _objectWithoutProperties(_ref2, _excluded2$6);
     return _objectSpread2({
       getInputProps: function getInputProps(p) {
-        return _getInputProps(customGetInputProps(p, downshift, reactTheming.isRtl(props)));
+        return _getInputProps(customGetInputProps(p, downshift, themeContext.rtl));
       },
       getToggleButtonProps: function getToggleButtonProps(p) {
         return _getToggleButtonProps(_objectSpread2({
@@ -295,7 +282,7 @@ var Dropdown = function Dropdown(props) {
       }
     }, downshift);
   };
-  return React__default['default'].createElement(reactPopper.Manager, null, React__default['default'].createElement(Downshift__default['default'], _extends$5({
+  return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(Downshift__default["default"], _extends$5({
     suppressRefError: true
     ,
     isOpen: isOpen,
@@ -344,7 +331,7 @@ var Dropdown = function Dropdown(props) {
     },
     stateReducer: function stateReducer(_state, changes) {
       switch (changes.type) {
-        case Downshift__default['default'].stateChangeTypes.changeInput:
+        case Downshift__default["default"].stateChangeTypes.changeInput:
           if (changes.inputValue === '' && dropdownType === 'combobox') {
             return _objectSpread2(_objectSpread2({}, changes), {}, {
               isOpen: false
@@ -356,7 +343,7 @@ var Dropdown = function Dropdown(props) {
       }
     }
   }, downshiftProps), function (downshift) {
-    return React__default['default'].createElement(DropdownContext.Provider, {
+    return React__default["default"].createElement(DropdownContext.Provider, {
       value: {
         hasMenuRef: hasMenuRef,
         itemIndexRef: itemIndexRef,
@@ -374,16 +361,15 @@ var Dropdown = function Dropdown(props) {
   }));
 };
 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
 };
-var Dropdown$1 = reactTheming.withTheme(Dropdown);
 
 function getPopperPlacement(gardenPlacement) {
   switch (gardenPlacement) {
@@ -456,10 +442,10 @@ function getMenuPosition(popperPlacement) {
 }
 
 var COMPONENT_ID$m = 'dropdowns.menu';
-var StyledMenu = styled__default['default'].ul.attrs(function (props) {
+var StyledMenu = styled__default["default"].ul.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$m,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -481,10 +467,10 @@ StyledMenu.defaultProps = {
 };
 
 var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
-var StyledMenuWrapper = styled__default['default'].div.attrs(function (props) {
+var StyledMenuWrapper = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$l,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     className: props.isAnimated && 'is-animated'
   };
 }).withConfig({
@@ -506,9 +492,9 @@ StyledMenuWrapper.defaultProps = {
 };
 
 var COMPONENT_ID$k = 'dropdowns.separator';
-var StyledSeparator = styled__default['default'].li.attrs({
+var StyledSeparator = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.47.0',
+  'data-garden-version': '8.48.1',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -545,10 +531,10 @@ 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) {
+var StyledItem = styled__default["default"].li.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$j,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     'aria-disabled': props.disabled
   };
 }).withConfig({
@@ -576,9 +562,9 @@ StyledItem.defaultProps = {
 };
 
 var COMPONENT_ID$i = 'dropdowns.add_item';
-var StyledAddItem = styled__default['default'](StyledItem).attrs({
+var StyledAddItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-ekqk50-0"
@@ -592,9 +578,9 @@ StyledAddItem.defaultProps = {
 };
 
 var COMPONENT_ID$h = 'dropdowns.item_meta';
-var StyledItemMeta = styled__default['default'].span.attrs({
+var StyledItemMeta = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-k6xy28-0"
@@ -615,9 +601,9 @@ 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")));
 };
-var StyledItemIcon = styled__default['default'].div.attrs({
+var StyledItemIcon = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-1v0ty11-0"
@@ -641,9 +627,9 @@ StyledItemIcon.defaultProps = {
 };
 
 var COMPONENT_ID$f = 'dropdowns.next_item';
-var StyledNextItem = styled__default['default'](StyledItem).attrs({
+var StyledNextItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1bcygn5-0"
@@ -658,34 +644,34 @@ StyledNextItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var _path$4;
 
-var _ref$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"
-});
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 
-function SvgChevronRightStroke(props) {
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$4);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, 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;
-  return React__default['default'].createElement(SvgChevronRightStroke, {
+  return React__default["default"].createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '8.47.0',
+    "data-garden-version": '8.48.1',
     className: className
   });
 };
-var StyledNextIcon = styled__default['default'](NextIconComponent).withConfig({
+var StyledNextIcon = styled__default["default"](NextIconComponent).withConfig({
   displayName: "StyledNextIcon",
   componentId: "sc-1rinki2-0"
 })(["transform:", ";color:", ";", ";"], function (props) {
@@ -700,9 +686,9 @@ StyledNextIcon.defaultProps = {
 };
 
 var COMPONENT_ID$d = 'dropdowns.previous_item';
-var StyledPreviousItem = styled__default['default'](StyledItem).attrs({
+var StyledPreviousItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1nmdds9-0"
@@ -715,34 +701,34 @@ StyledPreviousItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var _path$3;
 
-var _ref$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"
-});
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 
-function SvgChevronLeftStroke(props) {
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$3);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, 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;
-  return React__default['default'].createElement(SvgChevronLeftStroke, {
+  return React__default["default"].createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '8.47.0',
+    "data-garden-version": '8.48.1',
     className: className
   });
 };
-var StyledPreviousIcon = styled__default['default'](PreviousIconComponent).withConfig({
+var StyledPreviousIcon = styled__default["default"](PreviousIconComponent).withConfig({
   displayName: "StyledPreviousIcon",
   componentId: "sc-czfwj7-0"
 })(["transform:", ";color:", ";", ";"], function (props) {
@@ -757,9 +743,9 @@ StyledPreviousIcon.defaultProps = {
 };
 
 var COMPONENT_ID$b = 'dropdowns.header_icon';
-var StyledHeaderIcon = styled__default['default'].div.attrs({
+var StyledHeaderIcon = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-1fl6nsz-0"
@@ -787,9 +773,9 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
   }
   return "".concat(props.theme.space.base * 3, "px");
 };
-var StyledHeaderItem = styled__default['default'](StyledItem).attrs({
+var StyledHeaderItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-137filx-0"
@@ -807,9 +793,9 @@ StyledHeaderItem.defaultProps = {
 };
 
 var COMPONENT_ID$9 = 'dropdowns.media_body';
-var StyledMediaBody = styled__default['default'].div.attrs({
+var StyledMediaBody = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-36j7ef-0"
@@ -826,18 +812,18 @@ StyledMediaBody.defaultProps = {
 
 var _excluded$b = ["children", "isCompact", "theme"];
 var COMPONENT_ID$8 = 'dropdowns.media_figure';
-var StyledMediaFigure = styled__default['default'](
+var StyledMediaFigure = styled__default["default"](
 function (_ref) {
   var children = _ref.children;
       _ref.isCompact;
       _ref.theme;
       var props = _objectWithoutProperties(_ref, _excluded$b);
   return (
-    React__default['default'].cloneElement(React.Children.only(children), props)
+    React__default["default"].cloneElement(React.Children.only(children), props)
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-2f2x8x-0"
@@ -857,9 +843,9 @@ StyledMediaFigure.defaultProps = {
 };
 
 var COMPONENT_ID$7 = 'dropdowns.media_item';
-var StyledMediaItem = styled__default['default'](StyledItem).attrs({
+var StyledMediaItem = styled__default["default"](StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-ikwshz-0"
@@ -871,10 +857,10 @@ StyledMediaItem.defaultProps = {
 };
 
 var COMPONENT_ID$6 = 'dropdowns.faux_input';
-var StyledFauxInput = styled__default['default'](reactForms.FauxInput).attrs(function (props) {
+var StyledFauxInput = styled__default["default"](reactForms.FauxInput).attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.47.0',
+    'data-garden-version': '8.48.1',
     mediaLayout: true,
     theme: props.theme
   };
@@ -894,9 +880,9 @@ StyledFauxInput.defaultProps = {
 
 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({
+var StyledInput = styled__default["default"](reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.0',
+  'data-garden-version': '8.48.1',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -911,9 +897,9 @@ StyledInput.defaultProps = {
 };
 
 var COMPONENT_ID$4 = 'dropdowns.select';
-var StyledSelect = styled__default['default'].div.attrs({
+var StyledSelect = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xifmwj-0"
@@ -934,9 +920,9 @@ var visibleStyling = function visibleStyling(props) {
   }
   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({
+var StyledMultiselectInput = styled__default["default"](StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledMultiselectInput",
   componentId: "sc-1avnf6f-0"
@@ -964,9 +950,9 @@ var sizeStyles = function sizeStyles(props) {
   }
   return styled.css(["margin:", ";padding:", ";"], margin, padding);
 };
-var StyledMultiselectItemsContainer = styled__default['default'].div.attrs({
+var StyledMultiselectItemsContainer = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1jzhet8-0"
@@ -980,9 +966,9 @@ StyledMultiselectItemsContainer.defaultProps = {
 };
 
 var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
-var StyledMultiselectItemWrapper = styled__default['default'].div.attrs({
+var StyledMultiselectItemWrapper = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-1rb2bye-0"
@@ -996,9 +982,9 @@ StyledMultiselectItemWrapper.defaultProps = {
 };
 
 var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
-var StyledMultiselectMoreAnchor = styled__default['default'].div.attrs({
+var StyledMultiselectMoreAnchor = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-1m9v46e-0"
@@ -1128,15 +1114,15 @@ var Trigger = function Trigger(_ref) {
       'aria-owns': null
     });
     var toggleButtonProps = hasMenuRef.current ? menuToggleProps : listboxToggleProps;
-    return React__default['default'].cloneElement(React__default['default'].Children.only(children), _objectSpread2(_objectSpread2({}, toggleButtonProps), {}, _defineProperty({}, refKey, function (childRef) {
+    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) {
+  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
     var popperReference = _ref2.ref;
-    return React__default['default'].createElement(React__default['default'].Fragment, null, renderChildren(popperReference), React__default['default'].createElement(StyledInput, getInputProps({
+    return React__default["default"].createElement(React__default["default"].Fragment, null, renderChildren(popperReference), React__default["default"].createElement(StyledInput, getInputProps({
       readOnly: true,
       isHidden: true,
       tabIndex: -1,
@@ -1152,32 +1138,32 @@ var Trigger = function 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'
 };
 
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var _path$2;
 
-var _ref$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"
-});
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 
-function SvgChevronDownStroke(props) {
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$2);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, 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 FieldContext = React__default["default"].createContext(undefined);
 var useFieldContext = function useFieldContext() {
   var fieldContext = React.useContext(FieldContext);
   if (!fieldContext) {
@@ -1188,7 +1174,7 @@ var useFieldContext = function useFieldContext() {
 
 var _excluded$9 = ["children", "inputRef", "start"],
     _excluded2$4 = ["type"];
-var Autocomplete = React__default['default'].forwardRef(function (_ref, _ref3) {
+var Autocomplete = React.forwardRef(function (_ref, _ref3) {
   var children = _ref.children,
       controlledInputRef = _ref.inputRef,
       start = _ref.start,
@@ -1241,23 +1227,23 @@ var Autocomplete = React__default['default'].forwardRef(function (_ref, _ref3) {
   React.useEffect(function () {
     setDropdownType('autocomplete');
   }, [setDropdownType]);
-  return React__default['default'].createElement(reactPopper.Reference, null, function (_ref2) {
+  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
     var popperReference = _ref2.ref;
-    return React__default['default'].createElement(StyledFauxInput, _extends$5({
+    return React__default["default"].createElement(StyledFauxInput, _extends$5({
       isHovered: isContainerHovered,
       isFocused: isContainerFocused,
       tabIndex: null
     }, selectProps, {
       ref: function ref(selectRef) {
         popperReference(selectRef);
-        mergeRefs__default['default']([triggerRef, _ref3])(selectRef);
+        mergeRefs__default["default"]([triggerRef, _ref3])(selectRef);
         popperReferenceElementRef.current = selectRef;
       }
-    }), start && React__default['default'].createElement(StyledFauxInput.StartIcon, {
+    }), start && React__default["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__default["default"].createElement(StyledSelect, null, children), React__default["default"].createElement(StyledInput, getInputProps({
       isHidden: !isOpen,
       disabled: props.disabled,
       onFocus: function onFocus() {
@@ -1272,26 +1258,26 @@ var Autocomplete = React__default['default'].forwardRef(function (_ref, _ref3) {
         }
       },
       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__default["default"].createElement(StyledFauxInput.EndIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled,
       isRotated: isOpen
-    }, React__default['default'].createElement(SvgChevronDownStroke, null)));
+    }, React__default["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(['success', 'warning', 'error'])
+  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(['success', 'warning', 'error'])
 };
 
 var _excluded$8 = ["isCompact", "isBare", "disabled", "focusInset", "placeholder", "validation", "inputRef", "start", "end"];
-var Combobox = React__default['default'].forwardRef(function (_ref, ref) {
+var Combobox = React.forwardRef(function (_ref, ref) {
   var isCompact = _ref.isCompact,
       isBare = _ref.isBare,
       disabled = _ref.disabled,
@@ -1349,33 +1335,33 @@ var Combobox = React__default['default'].forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     setDropdownType('combobox');
   }, [setDropdownType]);
-  return React__default['default'].createElement(reactPopper.Reference, null, function (_ref2) {
+  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
     var popperReference = _ref2.ref;
     var wrapperRefProp = function 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__default["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(['success', 'warning', 'error'])
+  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(['success', 'warning', 'error'])
 };
 
-var _excluded$7 = ["renderItem", "placeholder", "maxItems", "renderShowMore", "inputRef", "start"],
+var _excluded$7 = ["renderItem", "placeholder", "maxItems", "renderShowMore", "inputRef", "start", "onKeyDown"],
     _excluded2$3 = ["type"];
-var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
+var Multiselect = React__default["default"].forwardRef(function (_ref, _ref3) {
   var renderItem = _ref.renderItem,
       placeholder = _ref.placeholder,
       maxItems = _ref.maxItems,
@@ -1383,6 +1369,7 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
       _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,
@@ -1419,8 +1406,9 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
       _useState6 = _slicedToArray(_useState5, 2),
       focusedItem = _useState6[0],
       setFocusedItem = _useState6[1];
+  var themeContext = React.useContext(styled.ThemeContext);
   var _useSelection = containerSelection.useSelection({
-    rtl: reactTheming.isRtl(props),
+    rtl: themeContext.rtl,
     focusedItem: focusedItem,
     selectedItem: undefined,
     onFocus: function onFocus(item) {
@@ -1454,14 +1442,14 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
   }, [focusedItem, isOpen, closeMenu]);
   var _getToggleButtonProps = getToggleButtonProps(getRootProps(_objectSpread2({
     tabIndex: props.disabled ? undefined : -1,
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, function (e) {
       if (isOpen) {
         e.nativeEvent.preventDownshiftDefault = true;
       } else if (!inputValue && e.keyCode === containerUtilities.KEY_CODES.HOME) {
         setFocusedItem(selectedItems[0]);
         e.preventDefault();
       }
-    },
+    }),
     onFocus: function onFocus() {
       setIsFocused(true);
     },
@@ -1495,8 +1483,8 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
       value: item,
       removeValue: removeValue
     });
-    var focusRef = React__default['default'].createRef();
-    var clonedChild = React__default['default'].cloneElement(renderedItem, _objectSpread2(_objectSpread2({}, getItemProps({
+    var focusRef = React__default["default"].createRef();
+    var clonedChild = React__default["default"].cloneElement(renderedItem, _objectSpread2(_objectSpread2({}, getItemProps({
       item: item,
       focusRef: focusRef,
       onKeyDown: function onKeyDown(e) {
@@ -1508,7 +1496,7 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
           inputRef.current && inputRef.current.focus();
           e.preventDefault();
         }
-        if (reactTheming.isRtl(props)) {
+        if (themeContext.rtl) {
           if (e.keyCode === containerUtilities.KEY_CODES.RIGHT && index === 0) {
             e.preventDefault();
           }
@@ -1534,10 +1522,10 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
       size: props.isCompact ? 'medium' : 'large'
     }));
     var key = "".concat(itemToString(item), "-").concat(index);
-    return React__default['default'].createElement(StyledMultiselectItemWrapper, {
+    return React__default["default"].createElement(StyledMultiselectItemWrapper, {
       key: key
     }, clonedChild);
-  }, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef]);
+  }, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef, themeContext.rtl]);
   var items = React.useMemo(function () {
     var itemValues = selectedItems || [];
     var output = [];
@@ -1545,7 +1533,7 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
       var item = itemValues[x];
       if (x < maxItems) {
         if (props.disabled) {
-          var renderedItem = React__default['default'].cloneElement(renderItem({
+          var renderedItem = React__default["default"].cloneElement(renderItem({
             value: item,
             removeValue: function removeValue() {
               return undefined;
@@ -1553,16 +1541,16 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
           }), {
             size: props.isCompact ? 'medium' : 'large'
           });
-          output.push( React__default['default'].createElement(StyledMultiselectItemWrapper, {
+          output.push( React__default["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__default["default"].createElement(StyledMultiselectItemWrapper, {
           key: "more-anchor"
-        }, React__default['default'].createElement(StyledMultiselectMoreAnchor, {
+        }, React__default["default"].createElement(StyledMultiselectMoreAnchor, {
           isCompact: props.isCompact,
           isDisabled: props.disabled
         }, renderShowMore ? renderShowMore(itemValues.length - x) : "+ ".concat(itemValues.length - x, " more"))));
@@ -1578,23 +1566,23 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
   React.useEffect(function () {
     setDropdownType('multiselect');
   }, [setDropdownType]);
-  return React__default['default'].createElement(reactPopper.Reference, null, function (_ref2) {
+  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(StyledFauxInput, getContainerProps(_objectSpread2(_objectSpread2({}, selectProps), {}, {
       isHovered: isContainerHovered,
       isFocused: isContainerFocused,
       ref: function ref(selectRef) {
         popperReference(selectRef);
-        mergeRefs__default['default']([triggerRef, popperReferenceElementRef, _ref3])(selectRef);
+        mergeRefs__default["default"]([triggerRef, popperReferenceElementRef, _ref3])(selectRef);
       }
-    })), start && React__default['default'].createElement(StyledFauxInput.StartIcon, {
+    })), start && React__default["default"].createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled
-    }, start), React__default['default'].createElement(StyledMultiselectItemsContainer, {
+    }, start), React__default["default"].createElement(StyledMultiselectItemsContainer, {
       isBare: props.isBare,
       isCompact: props.isCompact
-    }, items, React__default['default'].createElement(StyledMultiselectInput, getInputProps({
+    }, items, React__default["default"].createElement(StyledMultiselectInput, getInputProps({
       disabled: props.disabled,
       onFocus: function onFocus() {
         setFocusedItem(undefined);
@@ -1606,9 +1594,9 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
       },
       onKeyDown: function onKeyDown(e) {
         if (!inputValue) {
-          if (reactTheming.isRtl(props) && e.keyCode === containerUtilities.KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
+          if (themeContext.rtl && e.keyCode === containerUtilities.KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
             setFocusedItem(selectedItems[selectedItems.length - 1]);
-          } else if (!reactTheming.isRtl(props) && e.keyCode === containerUtilities.KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
+          } else if (!themeContext.rtl && e.keyCode === containerUtilities.KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
             setFocusedItem(selectedItems[selectedItems.length - 1]);
           } else if (e.keyCode === containerUtilities.KEY_CODES.BACKSPACE && selectedItems.length > 0) {
             setDownshiftState({
@@ -1624,33 +1612,33 @@ var Multiselect = React__default['default'].forwardRef(function (_ref, _ref3) {
       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__default["default"].createElement(StyledFauxInput.EndIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled,
       isRotated: isOpen
-    }, React__default['default'].createElement(SvgChevronDownStroke, null)));
+    }, React__default["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
 };
-var Multiselect$1 = reactTheming.withTheme(Multiselect);
+Multiselect.displayName = 'Multiselect';
 
 var _excluded$6 = ["children", "start"],
     _excluded2$2 = ["type"];
-var Select = React__default['default'].forwardRef(function (_ref, _ref3) {
+var Select = React__default["default"].forwardRef(function (_ref, _ref3) {
   var children = _ref.children,
       start = _ref.start,
       props = _objectWithoutProperties(_ref, _excluded$6);
@@ -1768,21 +1756,21 @@ var Select = React__default['default'].forwardRef(function (_ref, _ref3) {
       var selectProps = _objectWithoutProperties(_getToggleButtonProps, _excluded2$2);
   var isContainerHovered = isLabelHovered && !isOpen;
   var isContainerFocused = isFocused || isOpen;
-  return React__default['default'].createElement(reactPopper.Reference, null, function (_ref2) {
+  return React__default["default"].createElement(reactPopper.Reference, null, function (_ref2) {
     var popperReference = _ref2.ref;
-    return React__default['default'].createElement(StyledFauxInput, _extends$5({
+    return React__default["default"].createElement(StyledFauxInput, _extends$5({
       isHovered: isContainerHovered,
       isFocused: isContainerFocused
     }, selectProps, {
       ref: function ref(selectRef) {
         popperReference(selectRef);
-        mergeRefs__default['default']([triggerRef, _ref3, popperReferenceElementRef])(selectRef);
+        mergeRefs__default["default"]([triggerRef, _ref3, popperReferenceElementRef])(selectRef);
       }
-    }), start && React__default['default'].createElement(StyledFauxInput.StartIcon, {
+    }), start && React__default["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__default["default"].createElement(StyledSelect, null, children), React__default["default"].createElement(StyledInput, getInputProps({
       readOnly: true,
       isHidden: true,
       tabIndex: -1,
@@ -1794,24 +1782,24 @@ var Select = React__default['default'].forwardRef(function (_ref, _ref3) {
         }
       },
       onKeyDown: onInputKeyDown
-    })), !props.isBare && React__default['default'].createElement(StyledFauxInput.EndIcon, {
+    })), !props.isBare && React__default["default"].createElement(StyledFauxInput.EndIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled,
       isRotated: isOpen
-    }, React__default['default'].createElement(SvgChevronDownStroke, null)));
+    }, React__default["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(['success', 'warning', 'error'])
+  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(['success', 'warning', 'error'])
 };
 
-var Field = function Field(props) {
+var Field = React.forwardRef(function (props, fieldRef) {
   var _useDropdownContext = useDropdownContext(),
       getRootProps = _useDropdownContext.downshift.getRootProps;
   var _useState = React.useState(false),
@@ -1826,22 +1814,23 @@ var Field = function Field(props) {
       setIsLabelHovered: setIsLabelHovered
     };
   }, [isLabelHovered, setIsLabelHovered]);
-  return React__default['default'].createElement(FieldContext.Provider, {
+  return React__default["default"].createElement(FieldContext.Provider, {
     value: value
-  }, React__default['default'].createElement(reactForms.Field, _extends$5({
-    ref: ref
+  }, React__default["default"].createElement(reactForms.Field, _extends$5({
+    ref: mergeRefs__default["default"]([ref, fieldRef])
   }, props)));
-};
+});
+Field.displayName = 'Field';
 
-var Hint = React__default['default'].forwardRef(function (props, ref) {
-  return React__default['default'].createElement(reactForms.Hint, _extends$5({
+var Hint = React__default["default"].forwardRef(function (props, ref) {
+  return 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 Label = React__default["default"].forwardRef(function (_ref, ref) {
   var onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
       other = _objectWithoutProperties(_ref, _excluded$5);
@@ -1857,26 +1846,26 @@ var Label = React__default['default'].forwardRef(function (_ref, ref) {
       setIsLabelHovered(false);
     })
   }, other));
-  return React__default['default'].createElement(reactForms.Label, _extends$5({
+  return React__default["default"].createElement(reactForms.Label, _extends$5({
     ref: ref
   }, labelProps));
 });
 Label.displayName = 'Label';
 Label.propTypes = {
-  isRegular: PropTypes__default['default'].bool
+  isRegular: PropTypes__default["default"].bool
 };
 
-var Message = React__default['default'].forwardRef(function (props, ref) {
-  return React__default['default'].createElement(reactForms.Message, _extends$5({
+var Message = React__default["default"].forwardRef(function (props, ref) {
+  return React__default["default"].createElement(reactForms.Message, _extends$5({
     ref: ref
   }, props));
 });
 Message.displayName = 'Message';
 Message.propTypes = {
-  validation: PropTypes__default['default'].oneOf(['success', 'warning', 'error'])
+  validation: PropTypes__default["default"].oneOf(['success', 'warning', 'error'])
 };
 
-var MenuContext = React__default['default'].createContext(undefined);
+var MenuContext = React__default["default"].createContext(undefined);
 var useMenuContext = function useMenuContext() {
   var menuContext = React.useContext(MenuContext);
   if (!menuContext) {
@@ -1886,7 +1875,7 @@ var useMenuContext = function useMenuContext() {
 };
 
 var _excluded$4 = ["placement", "popperModifiers", "eventsEnabled", "isAnimated", "maxHeight", "style", "zIndex", "isCompact", "children"];
-var Menu = function Menu(props) {
+var Menu = React.forwardRef(function (props, menuRef) {
   var placement = props.placement,
       popperModifiers = props.popperModifiers,
       eventsEnabled = props.eventsEnabled,
@@ -1932,18 +1921,19 @@ var Menu = function Menu(props) {
       return clearTimeout(timeout);
     };
   }, [isOpen, isAnimated]);
+  var themeContext = React.useContext(styled.ThemeContext);
   itemIndexRef.current = 0;
   nextItemsHashRef.current = {};
   previousIndexRef.current = undefined;
   itemSearchRegistry.current = [];
-  var popperPlacement = reactTheming.isRtl(props) ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
+  var popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
   return (
-    React__default['default'].createElement(MenuContext.Provider, {
+    React__default["default"].createElement(MenuContext.Provider, {
       value: {
         itemIndexRef: itemIndexRef,
         isCompact: isCompact
       }
-    }, React__default['default'].createElement(reactPopper.Popper, {
+    }, React__default["default"].createElement(reactPopper.Popper, {
       placement: popperPlacement,
       modifiers: popperModifiers
       ,
@@ -1965,7 +1955,7 @@ var Menu = function Menu(props) {
         placement: currentPlacement,
         isAnimated: isAnimated && (isOpen || isVisible)
       }, otherProps));
-      return React__default['default'].createElement(StyledMenuWrapper, {
+      return React__default["default"].createElement(StyledMenuWrapper, {
         ref: isOpen ? ref : undefined,
         hasArrow: menuProps.hasArrow,
         placement: menuProps.placement,
@@ -1973,24 +1963,26 @@ var Menu = function Menu(props) {
         isHidden: !isOpen,
         isAnimated: menuProps.isAnimated,
         zIndex: zIndex
-      }, React__default['default'].createElement(StyledMenu, _extends$5({
+      }, React__default["default"].createElement(StyledMenu, _extends$5({
+        ref: menuRef,
         isCompact: isCompact,
         maxHeight: maxHeight,
         style: computedStyle
       }, menuProps), (isOpen || isVisible) && children));
     }))
   );
-};
+});
+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(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
-  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(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
+  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',
@@ -1999,56 +1991,55 @@ Menu.defaultProps = {
   maxHeight: '400px',
   zIndex: 1000
 };
-var Menu$1 = reactTheming.withTheme(Menu);
 
-var Separator = React__default['default'].forwardRef(function (props, ref) {
-  return React__default['default'].createElement(StyledSeparator, _extends$5({
+var Separator = React__default["default"].forwardRef(function (props, ref) {
+  return React__default["default"].createElement(StyledSeparator, _extends$5({
     ref: ref
   }, props));
 });
 Separator.displayName = 'Separator';
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$1;
 
-var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M7.5 2.5v12m6-6h-12"
-});
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
-function SvgPlusStroke(props) {
+var SvgPlusStroke = function SvgPlusStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref$1);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M7.5 2.5v12m6-6h-12"
+  })));
+};
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path;
 
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  d: "M1 9l4 4L15 3"
-});
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function SvgCheckLgStroke(props) {
+var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M1 9l4 4L15 3"
+  })));
+};
 
-var ItemContext = React__default['default'].createContext(undefined);
+var ItemContext = React__default["default"].createContext(undefined);
 var useItemContext = function useItemContext() {
   var context = React.useContext(ItemContext);
   if (!context) {
@@ -2058,7 +2049,7 @@ var useItemContext = function useItemContext() {
 };
 
 var _excluded$3 = ["value", "disabled", "isDanger", "component", "children"];
-var Item = React__default['default'].forwardRef(function (_ref, forwardRef) {
+var Item = React__default["default"].forwardRef(function (_ref, forwardRef) {
   var value = _ref.value,
       disabled = _ref.disabled,
       isDanger = _ref.isDanger,
@@ -2117,25 +2108,25 @@ var Item = React__default['default'].forwardRef(function (_ref, forwardRef) {
       isDisabled: disabled
     };
   }, [disabled]);
-  var ref = mergeRefs__default['default']([itemRef, forwardRef]);
+  var ref = mergeRefs__default["default"]([itemRef, forwardRef]);
   if (disabled) {
-    return React__default['default'].createElement(ItemContext.Provider, {
+    return React__default["default"].createElement(ItemContext.Provider, {
       value: contextValue
-    }, React__default['default'].createElement(Component, _extends$5({
+    }, React__default["default"].createElement(Component, _extends$5({
       ref: ref,
       disabled: disabled,
       isDanger: isDanger,
       isCompact: isCompact
-    }, props), isSelected && React__default['default'].createElement(StyledItemIcon, {
+    }, props), isSelected && React__default["default"].createElement(StyledItemIcon, {
       isCompact: isCompact,
       isVisible: isSelected,
       isDisabled: disabled
-    }, React__default['default'].createElement(SvgCheckLgStroke, null)), children));
+    }, React__default["default"].createElement(SvgCheckLgStroke, null)), children));
   }
   itemIndexRef.current++;
-  return React__default['default'].createElement(ItemContext.Provider, {
+  return React__default["default"].createElement(ItemContext.Provider, {
     value: contextValue
-  }, React__default['default'].createElement(Component, getItemProps(_objectSpread2(_objectSpread2({
+  }, React__default["default"].createElement(Component, getItemProps(_objectSpread2(_objectSpread2({
     item: value,
     isFocused: isFocused,
     ref: ref,
@@ -2144,71 +2135,71 @@ var Item = React__default['default'].forwardRef(function (_ref, forwardRef) {
   }, hasMenuRef.current && {
     role: 'menuitem',
     'aria-selected': null
-  }), props)), isSelected && React__default['default'].createElement(StyledItemIcon, {
+  }), props)), isSelected && React__default["default"].createElement(StyledItemIcon, {
     isCompact: isCompact,
     isVisible: isSelected
-  }, React__default['default'].createElement(SvgCheckLgStroke, null)), children));
+  }, React__default["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
 };
 
 var _excluded$2 = ["children", "disabled"];
-var AddItemComponent = React__default['default'].forwardRef(function (_ref, ref) {
+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;
-  return React__default['default'].createElement(StyledAddItem, _extends$5({
+  return React__default["default"].createElement(StyledAddItem, _extends$5({
     ref: ref,
     disabled: disabled
-  }, props), React__default['default'].createElement(StyledItemIcon, {
+  }, props), React__default["default"].createElement(StyledItemIcon, {
     isCompact: isCompact,
     isVisible: true,
     isDisabled: disabled
-  }, React__default['default'].createElement(SvgPlusStroke, null)), children);
+  }, React__default["default"].createElement(SvgPlusStroke, null)), children);
 });
-var AddItem = React__default['default'].forwardRef(function (props, ref) {
-  return React__default['default'].createElement(Item, _extends$5({
+var AddItem = React__default["default"].forwardRef(function (props, ref) {
+  return 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
+  value: PropTypes__default["default"].any,
+  disabled: PropTypes__default["default"].bool
 };
 
-var HeaderIcon = React__default['default'].forwardRef(function (props, ref) {
+var HeaderIcon = React__default["default"].forwardRef(function (props, ref) {
   var _useMenuContext = useMenuContext(),
       isCompact = _useMenuContext.isCompact;
-  return React__default['default'].createElement(StyledHeaderIcon, _extends$5({
+  return React__default["default"].createElement(StyledHeaderIcon, _extends$5({
     ref: ref,
     isCompact: isCompact
   }, props));
 });
 HeaderIcon.displayName = 'HeaderIcon';
 
-var HeaderItem = React__default['default'].forwardRef(function (props, ref) {
+var HeaderItem = React__default["default"].forwardRef(function (props, ref) {
   var _useMenuContext = useMenuContext(),
       isCompact = _useMenuContext.isCompact;
-  return React__default['default'].createElement(StyledHeaderItem, _extends$5({
+  return React__default["default"].createElement(StyledHeaderItem, _extends$5({
     ref: ref,
     isCompact: isCompact
   }, props));
 });
 HeaderItem.displayName = 'HeaderItem';
 
-var ItemMeta = React__default['default'].forwardRef(function (props, ref) {
+var ItemMeta = React__default["default"].forwardRef(function (props, ref) {
   var _useMenuContext = useMenuContext(),
       isCompact = _useMenuContext.isCompact;
   var _useItemContext = useItemContext(),
       isDisabled = _useItemContext.isDisabled;
-  return React__default['default'].createElement(StyledItemMeta, _extends$5({
+  return React__default["default"].createElement(StyledItemMeta, _extends$5({
     ref: ref,
     isCompact: isCompact,
     isDisabled: isDisabled
@@ -2216,10 +2207,10 @@ var ItemMeta = React__default['default'].forwardRef(function (props, ref) {
 });
 ItemMeta.displayName = 'ItemMeta';
 
-var MediaBody = React__default['default'].forwardRef(function (props, ref) {
+var MediaBody = React__default["default"].forwardRef(function (props, ref) {
   var _useMenuContext = useMenuContext(),
       isCompact = _useMenuContext.isCompact;
-  return React__default['default'].createElement(StyledMediaBody, _extends$5({
+  return React__default["default"].createElement(StyledMediaBody, _extends$5({
     ref: ref,
     isCompact: isCompact
   }, props));
@@ -2229,43 +2220,43 @@ MediaBody.displayName = 'MediaBody';
 var MediaFigure = function MediaFigure(props) {
   var _useMenuContext = useMenuContext(),
       isCompact = _useMenuContext.isCompact;
-  return React__default['default'].createElement(StyledMediaFigure, _extends$5({
+  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({
+var MediaItem = React__default["default"].forwardRef(function (props, ref) {
+  return 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
+  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 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;
-  return React__default['default'].createElement(StyledNextItem, _extends$5({
+  return React__default["default"].createElement(StyledNextItem, _extends$5({
     ref: ref,
     disabled: disabled
-  }, props), React__default['default'].createElement(StyledItemIcon, {
+  }, props), React__default["default"].createElement(StyledItemIcon, {
     isCompact: isCompact,
     isDisabled: disabled,
     isVisible: true
-  }, React__default['default'].createElement(StyledNextIcon, {
+  }, React__default["default"].createElement(StyledNextIcon, {
     isDisabled: disabled
   })), children);
 });
-var NextItem = React__default['default'].forwardRef(function (_ref2, ref) {
+var NextItem = React__default["default"].forwardRef(function (_ref2, ref) {
   var value = _ref2.value,
       disabled = _ref2.disabled,
       props = _objectWithoutProperties(_ref2, _excluded2$1);
@@ -2277,7 +2268,7 @@ var NextItem = React__default['default'].forwardRef(function (_ref2, ref) {
   if (!disabled) {
     nextItemsHashRef.current[itemToString(value)] = itemIndexRef.current;
   }
-  return React__default['default'].createElement(Item, _extends$5({
+  return React__default["default"].createElement(Item, _extends$5({
     component: NextItemComponent,
     "aria-expanded": true,
     disabled: disabled,
@@ -2287,30 +2278,30 @@ var NextItem = React__default['default'].forwardRef(function (_ref2, ref) {
 });
 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
 };
 
 var _excluded = ["children", "disabled"],
     _excluded2 = ["value", "disabled"];
-var PreviousItemComponent = React__default['default'].forwardRef(function (_ref, ref) {
+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;
-  return React__default['default'].createElement(StyledPreviousItem, _extends$5({
+  return React__default["default"].createElement(StyledPreviousItem, _extends$5({
     ref: ref,
     disabled: disabled
-  }, props), React__default['default'].createElement(StyledItemIcon, {
+  }, props), React__default["default"].createElement(StyledItemIcon, {
     isCompact: isCompact,
     isDisabled: disabled,
     isVisible: true
-  }, React__default['default'].createElement(StyledPreviousIcon, {
+  }, React__default["default"].createElement(StyledPreviousIcon, {
     isDisabled: disabled
   })), children);
 });
-var PreviousItem = React__default['default'].forwardRef(function (_ref2, ref) {
+var PreviousItem = React__default["default"].forwardRef(function (_ref2, ref) {
   var value = _ref2.value,
       disabled = _ref2.disabled,
       props = _objectWithoutProperties(_ref2, _excluded2);
@@ -2321,7 +2312,7 @@ var PreviousItem = React__default['default'].forwardRef(function (_ref2, ref) {
   if (!disabled) {
     previousIndexRef.current = itemIndexRef.current;
   }
-  return React__default['default'].createElement(Item, _extends$5({
+  return React__default["default"].createElement(Item, _extends$5({
     component: PreviousItemComponent,
     "aria-expanded": true,
     value: value,
@@ -2332,20 +2323,18 @@ var PreviousItem = React__default['default'].forwardRef(function (_ref2, ref) {
 });
 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', {
   enumerable: true,
-  get: function () {
-    return Downshift.resetIdCounter;
-  }
+  get: function () { return Downshift.resetIdCounter; }
 });
 exports.AddItem = AddItem;
 exports.Autocomplete = Autocomplete;
 exports.Combobox = Combobox;
-exports.Dropdown = Dropdown$1;
+exports.Dropdown = Dropdown;
 exports.Field = Field;
 exports.HeaderIcon = HeaderIcon;
 exports.HeaderItem = HeaderItem;
@@ -2356,9 +2345,9 @@ exports.Label = Label;
 exports.MediaBody = MediaBody;
 exports.MediaFigure = MediaFigure;
 exports.MediaItem = MediaItem;
-exports.Menu = Menu$1;
+exports.Menu = Menu;
 exports.Message = Message;
-exports.Multiselect = Multiselect$1;
+exports.Multiselect = Multiselect;
 exports.NextItem = NextItem;
 exports.PreviousItem = PreviousItem;
 exports.Select = Select;