@zendeskgarden/react-dropdowns.legacy 9.1.1 → 9.2.0

package/dist/esm/elements/Autocomplete/Autocomplete.js

@@ -109,7 +109,7 @@ const Autocomplete = forwardRef((_ref, ref) => {
       isFocused: isContainerFocused,
       isDisabled: props.disabled
     }, start), !isOpen && React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
-      isHidden: !isOpen,
+      $isHidden: !isOpen,
       disabled: props.disabled,
       onFocus: () => {
         setIsFocused(true);

package/dist/esm/elements/Menu/Items/HeaderIcon.js

@@ -28,15 +28,10 @@ import '../../../styled/multiselect/StyledMultiselectInput.js';
 import '../../../styled/multiselect/StyledMultiselectItemsContainer.js';
 import '../../../styled/multiselect/StyledMultiselectItemWrapper.js';
 import '../../../styled/multiselect/StyledMultiselectMoreAnchor.js';
-import useMenuContext from '../../../utils/useMenuContext.js';
 
 const HeaderIcon = React__default.forwardRef((props, ref) => {
-  const {
-    isCompact
-  } = useMenuContext();
   return React__default.createElement(StyledHeaderIcon, Object.assign({
-    ref: ref,
-    isCompact: isCompact
+    ref: ref
   }, props));
 });
 HeaderIcon.displayName = 'HeaderIcon';

package/dist/esm/elements/Multiselect/Multiselect.js

@@ -286,7 +286,7 @@ const Multiselect = React__default.forwardRef((_ref, ref) => {
           }
         }
       },
-      isVisible: isFocused || inputValue || selectedItems.length === 0,
+      $isVisible: isFocused || inputValue || selectedItems.length === 0,
       isCompact: props.isCompact,
       role: 'combobox',
       ref: mergeRefs([inputRef, externalInputRef]),

package/dist/esm/elements/Select/Select.js

@@ -164,7 +164,7 @@ const Select = React__default.forwardRef((_ref, ref) => {
       isDisabled: props.disabled
     }, start), React__default.createElement(StyledSelect, null, children), React__default.createElement(StyledInput, getInputProps({
       readOnly: true,
-      isHidden: true,
+      $isHidden: true,
       tabIndex: -1,
       ref: hiddenInputRef,
       value: '',

package/dist/esm/elements/Trigger/Trigger.js

@@ -161,7 +161,7 @@ const Trigger = _ref => {
     } = _ref2;
     return React__default.createElement(React__default.Fragment, null, renderChildren(popperReference), React__default.createElement(StyledInput, getInputProps({
       readOnly: true,
-      isHidden: true,
+      $isHidden: true,
       tabIndex: -1,
       ref: hiddenInputRef,
       value: '',

package/dist/esm/styled/items/StyledAddItem.js

@@ -11,7 +11,7 @@ import { StyledItem } from './StyledItem.js';
 const COMPONENT_ID = 'dropdowns.add_item';
 const StyledAddItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-mlto71-0"

package/dist/esm/styled/items/StyledItem.js

@@ -41,7 +41,7 @@ const getColorStyles = props => {
 };
 const StyledItem = styled.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",

package/dist/esm/styled/items/StyledItemIcon.js

@@ -15,7 +15,7 @@ const getSizeStyles = props => {
 };
 const StyledItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-pspm80-0"

package/dist/esm/styled/items/StyledItemMeta.js

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.item_meta';
 const StyledItemMeta = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1m3x8m1-0"

package/dist/esm/styled/items/StyledNextIcon.js

@@ -16,7 +16,7 @@ const NextIconComponent = _ref => {
   } = _ref;
   return React__default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID,
-    "data-garden-version": '9.1.1',
+    "data-garden-version": '9.2.0',
     className: className
   });
 };

package/dist/esm/styled/items/StyledNextItem.js

@@ -12,7 +12,7 @@ import { StyledItemIcon } from './StyledItemIcon.js';
 const COMPONENT_ID = 'dropdowns.next_item';
 const StyledNextItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1wrjlge-0"

package/dist/esm/styled/items/StyledPreviousIcon.js

@@ -16,7 +16,7 @@ const PreviousIconComponent = _ref => {
   } = _ref;
   return React__default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID,
-    "data-garden-version": '9.1.1',
+    "data-garden-version": '9.2.0',
     className: className
   });
 };

package/dist/esm/styled/items/StyledPreviousItem.js

@@ -11,7 +11,7 @@ import { StyledItem } from './StyledItem.js';
 const COMPONENT_ID = 'dropdowns.previous_item';
 const StyledPreviousItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1qv9jwe-0"

package/dist/esm/styled/items/header/StyledHeaderIcon.js

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.header_icon';
 const StyledHeaderIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-ow8s45-0"

package/dist/esm/styled/items/header/StyledHeaderItem.js

@@ -17,7 +17,7 @@ const getHorizontalPadding = props => {
 };
 const StyledHeaderItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-1xosinr-0"

package/dist/esm/styled/items/media/StyledMediaBody.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.media_body';
 const StyledMediaBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-133sssc-0"

package/dist/esm/styled/items/media/StyledMediaFigure.js

@@ -20,7 +20,7 @@ _ref => {
   return  React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-16vz3xj-0"

package/dist/esm/styled/items/media/StyledMediaItem.js

@@ -11,7 +11,7 @@ import { StyledItem } from '../StyledItem.js';
 const COMPONENT_ID = 'dropdowns.media_item';
 const StyledMediaItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-af4509-0"

package/dist/esm/styled/menu/StyledMenu.js

@@ -11,7 +11,7 @@ import { getArrowPosition } from '../../utils/garden-placements.js';
 const COMPONENT_ID = 'dropdowns.menu';
 const StyledMenu = styled.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",

package/dist/esm/styled/menu/StyledMenuWrapper.js

@@ -11,7 +11,7 @@ import { getMenuPosition } from '../../utils/garden-placements.js';
 const COMPONENT_ID = 'dropdowns.menu_wrapper';
 const StyledMenuWrapper = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",

package/dist/esm/styled/menu/StyledSeparator.js

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.separator';
 const StyledSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",

package/dist/esm/styled/multiselect/StyledMultiselectInput.js

@@ -9,18 +9,23 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledInput } from '../select/StyledInput.js';
 
 const COMPONENT_ID = 'dropdowns.multiselect_input';
-const visibleStyling = props => {
-  const margin = props.isVisible ? `${props.theme.space.base / 2}px` : 0;
-  const minWidth = props.isVisible ? `${props.theme.space.base * 15}px` : 0;
+const visibleStyling = _ref => {
+  let {
+    $isVisible,
+    isCompact,
+    theme
+  } = _ref;
+  const margin = $isVisible ? `${theme.space.base / 2}px` : 0;
+  const minWidth = $isVisible ? `${theme.space.base * 15}px` : 0;
   let height = '0';
-  if (props.isVisible) {
-    height = `${props.theme.space.base * (props.isCompact ? 5 : 8)}px`;
+  if ($isVisible) {
+    height = `${theme.space.base * (isCompact ? 5 : 8)}px`;
   }
-  return css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !props.isVisible && 0, margin, !props.isVisible && 0, minWidth, height);
+  return css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !$isVisible && 0, margin, !$isVisible && 0, minWidth, height);
 };
 const StyledMultiselectInput = styled(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   isBare: true
 }).withConfig({
   displayName: "StyledMultiselectInput",

package/dist/esm/styled/multiselect/StyledMultiselectItemWrapper.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.multiselect_item_wrapper';
 const StyledMultiselectItemWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-vgr7nd-0"

package/dist/esm/styled/multiselect/StyledMultiselectItemsContainer.js

@@ -22,7 +22,7 @@ const sizeStyles = props => {
 };
 const StyledMultiselectItemsContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1dxwjyz-0"

package/dist/esm/styled/multiselect/StyledMultiselectMoreAnchor.js

@@ -10,11 +10,11 @@ import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 const StyledMultiselectMoreAnchor = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-pkakky-0"
-})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.$isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.$isCompact ? 0.75 : 1.5), props => props.$isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor({
+})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";&:hover{text-decoration:", ";}", ";"], props => props.$isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.$isCompact ? 0.75 : 1.5), props => props.$isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor({
   theme: props.theme,
   variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.primary'
 }), props => !props.$isDisabled && 'underline', props => retrieveComponentStyles(COMPONENT_ID, props));

package/dist/esm/styled/select/StyledFauxInput.js

@@ -11,7 +11,7 @@ import { FauxInput } from '@zendeskgarden/react-forms';
 const COMPONENT_ID = 'dropdowns.faux_input';
 const StyledFauxInput = styled(FauxInput).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   mediaLayout: true,
   theme: props.theme
 })).withConfig({

package/dist/esm/styled/select/StyledInput.js

@@ -12,11 +12,11 @@ const COMPONENT_ID = 'dropdowns.input';
 const hiddenStyling = 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(Input).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-kykaw8-0"
-})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";", ";"], props => props.$isHidden && hiddenStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledInput };

package/dist/esm/styled/select/StyledSelect.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.select';
 const StyledSelect = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xf4qjv-0"

package/dist/index.cjs.js

@@ -289,7 +289,7 @@ function getMenuPosition(popperPlacement) {
 const COMPONENT_ID$m = 'dropdowns.menu';
 const StyledMenu = styled__default.default.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",
@@ -303,7 +303,7 @@ const StyledMenu = styled__default.default.ul.attrs(props => ({
 const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
 const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
@@ -319,7 +319,7 @@ const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
 const COMPONENT_ID$k = 'dropdowns.separator';
 const StyledSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -363,7 +363,7 @@ const getColorStyles = props => {
 };
 const StyledItem = styled__default.default.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",
@@ -373,7 +373,7 @@ const StyledItem = styled__default.default.li.attrs(props => ({
 const COMPONENT_ID$i = 'dropdowns.add_item';
 const StyledAddItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-mlto71-0"
@@ -385,7 +385,7 @@ const StyledAddItem = styled__default.default(StyledItem).attrs({
 const COMPONENT_ID$h = 'dropdowns.item_meta';
 const StyledItemMeta = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1m3x8m1-0"
@@ -400,7 +400,7 @@ const getSizeStyles = props => {
 };
 const StyledItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-pspm80-0"
@@ -412,7 +412,7 @@ const StyledItemIcon = styled__default.default.div.attrs({
 const COMPONENT_ID$f = 'dropdowns.next_item';
 const StyledNextItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1wrjlge-0"
@@ -441,7 +441,7 @@ const NextIconComponent = _ref => {
   } = _ref;
   return React__namespace.default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '9.1.1',
+    "data-garden-version": '9.2.0',
     className: className
   });
 };
@@ -456,7 +456,7 @@ const StyledNextIcon = styled__default.default(NextIconComponent).withConfig({
 const COMPONENT_ID$d = 'dropdowns.previous_item';
 const StyledPreviousItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1qv9jwe-0"
@@ -485,7 +485,7 @@ const PreviousIconComponent = _ref => {
   } = _ref;
   return React__namespace.default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '9.1.1',
+    "data-garden-version": '9.2.0',
     className: className
   });
 };
@@ -500,7 +500,7 @@ const StyledPreviousIcon = styled__default.default(PreviousIconComponent).withCo
 const COMPONENT_ID$b = 'dropdowns.header_icon';
 const StyledHeaderIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-ow8s45-0"
@@ -518,7 +518,7 @@ const getHorizontalPadding = props => {
 };
 const StyledHeaderItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-1xosinr-0"
@@ -527,7 +527,7 @@ const StyledHeaderItem = styled__default.default(StyledItem).attrs({
 const COMPONENT_ID$9 = 'dropdowns.media_body';
 const StyledMediaBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-133sssc-0"
@@ -545,7 +545,7 @@ _ref => {
   return  React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-16vz3xj-0"
@@ -554,7 +554,7 @@ _ref => {
 const COMPONENT_ID$7 = 'dropdowns.media_item';
 const StyledMediaItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-af4509-0"
@@ -563,7 +563,7 @@ const StyledMediaItem = styled__default.default(StyledItem).attrs({
 const COMPONENT_ID$6 = 'dropdowns.faux_input';
 const StyledFauxInput = styled__default.default(reactForms.FauxInput).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   mediaLayout: true,
   theme: props.theme
 })).withConfig({
@@ -575,35 +575,40 @@ const COMPONENT_ID$5 = 'dropdowns.input';
 const hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-kykaw8-0"
-})(["", ";", ";"], props => props.isHidden && hiddenStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["", ";", ";"], props => props.$isHidden && hiddenStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 
 const COMPONENT_ID$4 = 'dropdowns.select';
 const StyledSelect = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xf4qjv-0"
 })(["flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 
 const COMPONENT_ID$3 = 'dropdowns.multiselect_input';
-const visibleStyling = props => {
-  const margin = props.isVisible ? `${props.theme.space.base / 2}px` : 0;
-  const minWidth = props.isVisible ? `${props.theme.space.base * 15}px` : 0;
+const visibleStyling = _ref => {
+  let {
+    $isVisible,
+    isCompact,
+    theme
+  } = _ref;
+  const margin = $isVisible ? `${theme.space.base / 2}px` : 0;
+  const minWidth = $isVisible ? `${theme.space.base * 15}px` : 0;
   let height = '0';
-  if (props.isVisible) {
-    height = `${props.theme.space.base * (props.isCompact ? 5 : 8)}px`;
+  if ($isVisible) {
+    height = `${theme.space.base * (isCompact ? 5 : 8)}px`;
   }
-  return styled.css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !props.isVisible && 0, margin, !props.isVisible && 0, minWidth, height);
+  return styled.css(["opacity:", ";margin:", ";width:", ";min-width:", ";height:", ";"], !$isVisible && 0, margin, !$isVisible && 0, minWidth, height);
 };
 const StyledMultiselectInput = styled__default.default(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   isBare: true
 }).withConfig({
   displayName: "StyledMultiselectInput",
@@ -625,7 +630,7 @@ const sizeStyles = props => {
 };
 const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1dxwjyz-0"
@@ -634,7 +639,7 @@ const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
 const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
 const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-vgr7nd-0"
@@ -643,11 +648,11 @@ const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-pkakky-0"
-})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";:hover{text-decoration:", ";}", ";"], props => props.$isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.$isCompact ? 0.75 : 1.5), props => props.$isCompact ? '1em' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor({
+})(["display:inline-block;cursor:", ";padding:", "px 0;overflow:hidden;user-select:none;text-overflow:ellipsis;line-height:", ";white-space:nowrap;color:", ";&:hover{text-decoration:", ";}", ";"], props => props.$isDisabled ? 'default' : 'pointer', props => props.theme.space.base * (props.$isCompact ? 0.75 : 1.5), props => props.$isCompact ? '1em' : reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor({
   theme: props.theme,
   variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.primary'
 }), props => !props.$isDisabled && 'underline', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
@@ -780,7 +785,7 @@ const Trigger = _ref => {
     } = _ref2;
     return React__namespace.default.createElement(React__namespace.default.Fragment, null, renderChildren(popperReference), React__namespace.default.createElement(StyledInput, getInputProps({
       readOnly: true,
-      isHidden: true,
+      $isHidden: true,
       tabIndex: -1,
       ref: hiddenInputRef,
       value: '',
@@ -898,7 +903,7 @@ const Autocomplete = React.forwardRef((_ref, ref) => {
       isFocused: isContainerFocused,
       isDisabled: props.disabled
     }, start), !isOpen && React__namespace.default.createElement(StyledSelect, null, children), React__namespace.default.createElement(StyledInput, getInputProps({
-      isHidden: !isOpen,
+      $isHidden: !isOpen,
       disabled: props.disabled,
       onFocus: () => {
         setIsFocused(true);
@@ -1267,7 +1272,7 @@ const Multiselect = React__namespace.default.forwardRef((_ref, ref) => {
           }
         }
       },
-      isVisible: isFocused || inputValue || selectedItems.length === 0,
+      $isVisible: isFocused || inputValue || selectedItems.length === 0,
       isCompact: props.isCompact,
       role: 'combobox',
       ref: reactMergeRefs.mergeRefs([inputRef, externalInputRef]),
@@ -1421,7 +1426,7 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
       isDisabled: props.disabled
     }, start), React__namespace.default.createElement(StyledSelect, null, children), React__namespace.default.createElement(StyledInput, getInputProps({
       readOnly: true,
-      isHidden: true,
+      $isHidden: true,
       tabIndex: -1,
       ref: hiddenInputRef,
       value: '',
@@ -1831,12 +1836,8 @@ AddItem.propTypes = {
 };
 
 const HeaderIcon = React__namespace.default.forwardRef((props, ref) => {
-  const {
-    isCompact
-  } = useMenuContext();
   return React__namespace.default.createElement(StyledHeaderIcon, Object.assign({
-    ref: ref,
-    isCompact: isCompact
+    ref: ref
   }, props));
 });
 HeaderIcon.displayName = 'HeaderIcon';

package/dist/typings/styled/items/header/StyledHeaderIcon.d.ts

@@ -4,11 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-interface IStyledHeaderIcon {
-    isCompact?: boolean;
-}
 export declare const StyledHeaderIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-} & IStyledHeaderIcon, "data-garden-id" | "data-garden-version">;
-export {};
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/multiselect/StyledMultiselectInput.d.ts

@@ -7,7 +7,7 @@
 import { DefaultTheme } from 'styled-components';
 interface IStyledMultiselectInputProps {
     isCompact: boolean;
-    isVisible: boolean;
+    $isVisible: boolean;
 }
 export declare const StyledMultiselectInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("packages/forms/dist/typings").IInputProps & import("react").RefAttributes<HTMLInputElement>>, DefaultTheme, {
     'data-garden-id': string;

package/dist/typings/styled/select/StyledInput.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export interface IStyledInputProps {
-    isHidden?: boolean;
+    $isHidden?: boolean;
 }
 export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").IInputProps & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {
     'data-garden-id': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns.legacy",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "Components relating to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@zendeskgarden/container-selection": "^2.0.0",
     "@zendeskgarden/container-utilities": "^1.0.14",
-    "@zendeskgarden/react-forms": "^9.1.1",
+    "@zendeskgarden/react-forms": "^9.2.0",
     "downshift": "^7.0.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9",
-    "@zendeskgarden/react-theming": "^9.1.1",
+    "@zendeskgarden/react-theming": "^9.2.0",
     "@zendeskgarden/svg-icons": "7.1.1",
     "lodash.debounce": "4.0.8"
   },
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
+  "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
 }