@zendeskgarden/react-dropdowns 9.0.0-next.8 → 9.0.0-next.9

package/dist/esm/elements/combobox/Combobox.js

@@ -244,8 +244,8 @@ const Combobox = forwardRef((_ref, ref) => {
   }, props, {
     ref: ref
   }), React__default.createElement(StyledTrigger, triggerProps, React__default.createElement(StyledContainer, null, startIcon && React__default.createElement(StyledInputIcon, {
-    isLabelHovered: isLabelHovered,
-    isCompact: isCompact
+    $isLabelHovered: isLabelHovered,
+    $isCompact: isCompact
   }, startIcon), React__default.createElement(StyledInputGroup, null, isMultiselectable && Array.isArray(selection) && React__default.createElement(TagGroup, {
     isDisabled: isDisabled,
     isExpanded: isTagGroupExpanded,
@@ -274,10 +274,10 @@ const Combobox = forwardRef((_ref, ref) => {
     selection,
     inputValue
   }) : inputValue || placeholder), React__default.createElement(StyledInput, inputProps)), (hasChevron || endIcon) && React__default.createElement(StyledInputIcon, {
-    isCompact: isCompact,
-    isEnd: true,
-    isLabelHovered: isLabelHovered,
-    isRotated: hasChevron && isExpanded
+    $isCompact: isCompact,
+    $isEnd: true,
+    $isLabelHovered: isLabelHovered,
+    $isRotated: hasChevron && isExpanded
   }, hasChevron ? React__default.createElement(SvgChevronDownStroke, null) : endIcon))), React__default.createElement(Listbox, Object.assign({
     appendToNode: listboxAppendToNode,
     isCompact: isCompact,

package/dist/esm/elements/combobox/OptGroup.js

@@ -75,8 +75,8 @@ const OptGroup = forwardRef((_ref, ref) => {
     isCompact: isCompact,
     $type: "header"
   }, icon && React__default.createElement(StyledOptionTypeIcon, {
-    isCompact: isCompact,
-    type: "header"
+    $isCompact: isCompact,
+    $type: "header"
   }, icon), content || legend), React__default.createElement(StyledOptGroup, Object.assign({
     isCompact: isCompact
   }, optGroupProps), React__default.createElement(StyledListboxSeparator, {

package/dist/esm/elements/combobox/Option.js

@@ -112,8 +112,8 @@ const OptionComponent = forwardRef((_ref, ref) => {
     isCompact: isCompact,
     $type: type
   }, props, optionProps), React__default.createElement(StyledOptionTypeIcon, {
-    isCompact: isCompact,
-    type: type
+    $isCompact: isCompact,
+    $type: type
   }, renderActionIcon(type)), icon && React__default.createElement(StyledOptionIcon, null, icon), React__default.createElement(StyledOptionContent, null, children || label || value)));
 });
 OptionComponent.displayName = 'Option';

package/dist/esm/elements/menu/Item.js

@@ -120,8 +120,8 @@ const ItemComponent = forwardRef((_ref, ref) => {
   }, props, itemProps, {
     ref: mergeRefs([_itemRef, ref])
   }), React__default.createElement(StyledItemTypeIcon, {
-    isCompact: isCompact,
-    type: type
+    $isCompact: isCompact,
+    $type: type
   }, renderActionIcon(type)), icon && React__default.createElement(StyledItemIcon, null, icon), React__default.createElement(StyledItemContent, null, children || label)));
 });
 ItemComponent.displayName = 'Item';

package/dist/esm/elements/menu/ItemGroup.js

@@ -77,8 +77,8 @@ const ItemGroup = forwardRef((_ref, ref) => {
     isCompact: isCompact,
     $type: "header"
   }, icon && React__default.createElement(StyledItemTypeIcon, {
-    isCompact: isCompact,
-    type: "header"
+    $isCompact: isCompact,
+    $type: "header"
   }, icon), content || legend), React__default.createElement(StyledItemGroup, Object.assign({
     isCompact: isCompact
   }, groupProps), React__default.createElement(StyledSeparator, {

package/dist/esm/views/combobox/StyledCombobox.js

@@ -18,7 +18,7 @@ const sizeStyles = props => {
 };
 const StyledCombobox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"

package/dist/esm/views/combobox/StyledContainer.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'dropdowns.combobox.container';
 const StyledContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"

package/dist/esm/views/combobox/StyledField.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'dropdowns.combobox.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"

package/dist/esm/views/combobox/StyledFloatingListbox.js

@@ -10,7 +10,7 @@ import { menuStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgard
 const COMPONENT_ID = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"

package/dist/esm/views/combobox/StyledHint.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID = 'dropdowns.combobox.hint';
 const StyledHint = styled(Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"

package/dist/esm/views/combobox/StyledInput.js

@@ -29,7 +29,7 @@ const sizeStyles = props => {
 };
 const StyledInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"

package/dist/esm/views/combobox/StyledInputGroup.js

@@ -14,7 +14,7 @@ const sizeStyles = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"

package/dist/esm/views/combobox/StyledInputIcon.js

@@ -4,10 +4,9 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import { cloneElement, Children } from 'react';
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 import { getHeight } from './StyledInput.js';
 import { StyledTrigger } from './StyledTrigger.js';
 
@@ -16,39 +15,27 @@ const colorStyles = props => {
   const color = getColorV8('neutralHue', 600, props.theme);
   const focusColor = getColorV8('neutralHue', 700, props.theme);
   const disabledColor = getColorV8('neutralHue', 400, props.theme);
-  return css(["color:", ";", ":hover &,", ":focus-within &,", ":focus &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
+  return css(["color:", ";", ":hover &,", ":focus-within &,", ":focus &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.$isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
 };
 const sizeStyles = props => {
   const size = props.theme.iconSizes.md;
   const position = math(`(${getHeight(props)} - ${size}) / 2`);
   const margin = `${props.theme.space.base * 2}px`;
   let side;
-  if (props.isEnd) {
+  if (props.$isEnd) {
     side = props.theme.rtl ? 'right' : 'left';
   } else {
     side = props.theme.rtl ? 'left' : 'right';
   }
   return css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
 };
-const StyledInputIcon = styled(_ref => {
-  let {
-    children,
-    isCompact,
-    isDisabled,
-    isEnd,
-    isLabelHovered,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).attrs({
+const StyledInputIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
-})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledInputIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/views/combobox/StyledLabel.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID = 'dropdowns.combobox.label';
 const StyledLabel = styled(Field.Label).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"

package/dist/esm/views/combobox/StyledListbox.js

@@ -19,7 +19,7 @@ const sizeStyles = props => {
 };
 const StyledListbox = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"

package/dist/esm/views/combobox/StyledListboxSeparator.js

@@ -19,7 +19,7 @@ const sizeStyles = props => {
 };
 const StyledListboxSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"

package/dist/esm/views/combobox/StyledMessage.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID = 'dropdowns.combobox.message';
 const StyledMessage = styled(Field.Message).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"

package/dist/esm/views/combobox/StyledOptGroup.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"

package/dist/esm/views/combobox/StyledOption.js

@@ -36,7 +36,7 @@ const sizeStyles = props => {
 };
 const StyledOption = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"

package/dist/esm/views/combobox/StyledOptionContent.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"

package/dist/esm/views/combobox/StyledOptionIcon.js

@@ -6,8 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { cloneElement, Children } from 'react';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.option.icon';
 const sizeStyles = props => {
@@ -16,16 +15,9 @@ const sizeStyles = props => {
   const marginHorizontal = `${props.theme.space.base * 2}px`;
   return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
-const StyledOptionIcon = styled(_ref => {
-  let {
-    children,
-    theme,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).attrs({
+const StyledOptionIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"

package/dist/esm/views/combobox/StyledOptionMeta.js

@@ -19,7 +19,7 @@ const sizeStyles = props => {
 };
 const StyledOptionMeta = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"

package/dist/esm/views/combobox/StyledOptionTypeIcon.js

@@ -4,19 +4,18 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import { cloneElement, Children } from 'react';
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 import { StyledOption, getMinHeight } from './StyledOption.js';
 
 const COMPONENT_ID = 'dropdowns.combobox.option.type_icon';
 const colorStyles = props => {
-  const opacity = props.type && props.type !== 'danger' ? 1 : 0;
+  const opacity = props.$type && props.$type !== 'danger' ? 1 : 0;
   let color;
-  if (props.type === 'add' || props.type === 'danger') {
+  if (props.$type === 'add' || props.$type === 'danger') {
     color = 'inherit';
-  } else if (props.type === 'header' || props.type === 'next' || props.type === 'previous') {
+  } else if (props.$type === 'header' || props.$type === 'next' || props.$type === 'previous') {
     color = getColorV8('neutralHue', 600, props.theme);
   } else {
     color = getColorV8('primaryHue', 600, props.theme);
@@ -28,29 +27,20 @@ const sizeStyles = props => {
   const position = `${props.theme.space.base * 3}px`;
   const top = math(`(${getMinHeight(props)} - ${size}) / 2`);
   let side;
-  if (props.type === 'next') {
+  if (props.$type === 'next') {
     side = props.theme.rtl ? 'left' : 'right';
   } else {
     side = props.theme.rtl ? 'right' : 'left';
   }
   return css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
 };
-const StyledOptionTypeIcon = styled(_ref => {
-  let {
-    children,
-    isCompact,
-    theme,
-    type,
-    ...props
-  } = _ref;
-  return cloneElement(Children.only(children), props);
-}).attrs({
+const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
-})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.type === 'next' || props.type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.$type === 'next' || props.$type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledOptionTypeIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/views/combobox/StyledTag.js

@@ -12,7 +12,7 @@ import { Tag } from '@zendeskgarden/react-tags';
 const COMPONENT_ID = 'dropdowns.combobox.tag';
 const StyledTag = styled(Tag).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"

package/dist/esm/views/combobox/StyledTagsButton.js

@@ -16,7 +16,7 @@ const colorStyles = props => {
 const StyledTagsButton = styled(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"

package/dist/esm/views/combobox/StyledTrigger.js

@@ -82,7 +82,7 @@ const sizeStyles = props => {
 };
 const StyledTrigger = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"

package/dist/esm/views/combobox/StyledValue.js

@@ -15,7 +15,7 @@ const colorStyles = props => {
 };
 const StyledValue = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"

package/dist/esm/views/menu/StyledButton.js

@@ -11,7 +11,7 @@ import { Button } from '@zendeskgarden/react-buttons';
 const COMPONENT_ID = 'dropdowns.menu.button';
 const StyledButton = styled(Button).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-5hs2jg-0"

package/dist/esm/views/menu/StyledFloatingMenu.js

@@ -11,7 +11,7 @@ import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
 const COMPONENT_ID = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"

package/dist/esm/views/menu/StyledItem.js

@@ -11,7 +11,7 @@ import { StyledOption } from '../combobox/StyledOption.js';
 const COMPONENT_ID = 'dropdowns.menu.item';
 const StyledItem = styled(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"

package/dist/esm/views/menu/StyledItemContent.js

@@ -11,7 +11,7 @@ import { StyledOptionContent } from '../combobox/StyledOptionContent.js';
 const COMPONENT_ID = 'dropdowns.menu.item.content';
 const StyledItemContent = styled(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"

package/dist/esm/views/menu/StyledItemGroup.js

@@ -11,7 +11,7 @@ import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
 const COMPONENT_ID = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"

package/dist/esm/views/menu/StyledItemIcon.js

@@ -11,7 +11,7 @@ import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
 const COMPONENT_ID = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"

package/dist/esm/views/menu/StyledItemMeta.js

@@ -11,7 +11,7 @@ import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
 const COMPONENT_ID = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"

package/dist/esm/views/menu/StyledItemTypeIcon.js

@@ -12,7 +12,7 @@ import { StyledItem } from './StyledItem.js';
 const COMPONENT_ID = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"

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

@@ -11,7 +11,7 @@ import { StyledListbox } from '../combobox/StyledListbox.js';
 const COMPONENT_ID = 'dropdowns.menu';
 const StyledMenu = styled(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"

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

@@ -11,7 +11,7 @@ import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator.js';
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"

package/dist/index.cjs.js

@@ -83,7 +83,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$v = 'dropdowns.combobox.label';
 const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -95,7 +95,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$u = 'dropdowns.combobox.hint';
 const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -107,7 +107,7 @@ StyledHint.defaultProps = {
 const COMPONENT_ID$t = 'dropdowns.combobox.message';
 const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -124,7 +124,7 @@ const sizeStyles$a = props => {
 };
 const StyledCombobox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -136,7 +136,7 @@ StyledCombobox.defaultProps = {
 const COMPONENT_ID$r = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -148,7 +148,7 @@ StyledContainer.defaultProps = {
 const COMPONENT_ID$q = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -160,7 +160,7 @@ StyledField.defaultProps = {
 const COMPONENT_ID$p = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -195,7 +195,7 @@ const sizeStyles$9 = props => {
 };
 const StyledInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
@@ -211,7 +211,7 @@ const sizeStyles$8 = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
@@ -293,7 +293,7 @@ const sizeStyles$7 = props => {
 };
 const StyledTrigger = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
@@ -307,39 +307,27 @@ const colorStyles$6 = props => {
   const color = reactTheming.getColorV8('neutralHue', 600, props.theme);
   const focusColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
   const disabledColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
-  return styled.css(["color:", ";", ":hover &,", ":focus-within &,", ":focus &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
+  return styled.css(["color:", ";", ":hover &,", ":focus-within &,", ":focus &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.$isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
 };
 const sizeStyles$6 = props => {
   const size = props.theme.iconSizes.md;
   const position = polished.math(`(${getHeight(props)} - ${size}) / 2`);
   const margin = `${props.theme.space.base * 2}px`;
   let side;
-  if (props.isEnd) {
+  if (props.$isEnd) {
     side = props.theme.rtl ? 'right' : 'left';
   } else {
     side = props.theme.rtl ? 'left' : 'right';
   }
   return styled.css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
 };
-const StyledInputIcon = styled__default.default(_ref => {
-  let {
-    children,
-    isCompact,
-    isDisabled,
-    isEnd,
-    isLabelHovered,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
-})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$6, colorStyles$6, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$6, colorStyles$6, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledInputIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -372,7 +360,7 @@ const sizeStyles$5 = props => {
 };
 const StyledOption = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -384,7 +372,7 @@ StyledOption.defaultProps = {
 const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -396,7 +384,7 @@ StyledOptionContent.defaultProps = {
 const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
@@ -417,7 +405,7 @@ const sizeStyles$4 = props => {
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -434,7 +422,7 @@ const sizeStyles$3 = props => {
 };
 const StyledListbox = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
@@ -450,16 +438,9 @@ const sizeStyles$2 = props => {
   const marginHorizontal = `${props.theme.space.base * 2}px`;
   return styled.css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
-const StyledOptionIcon = styled__default.default(_ref => {
-  let {
-    children,
-    theme,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
@@ -480,7 +461,7 @@ const sizeStyles$1 = props => {
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
@@ -491,11 +472,11 @@ StyledOptionMeta.defaultProps = {
 
 const COMPONENT_ID$d = 'dropdowns.combobox.option.type_icon';
 const colorStyles$2 = props => {
-  const opacity = props.type && props.type !== 'danger' ? 1 : 0;
+  const opacity = props.$type && props.$type !== 'danger' ? 1 : 0;
   let color;
-  if (props.type === 'add' || props.type === 'danger') {
+  if (props.$type === 'add' || props.$type === 'danger') {
     color = 'inherit';
-  } else if (props.type === 'header' || props.type === 'next' || props.type === 'previous') {
+  } else if (props.$type === 'header' || props.$type === 'next' || props.$type === 'previous') {
     color = reactTheming.getColorV8('neutralHue', 600, props.theme);
   } else {
     color = reactTheming.getColorV8('primaryHue', 600, props.theme);
@@ -507,29 +488,20 @@ const sizeStyles = props => {
   const position = `${props.theme.space.base * 3}px`;
   const top = polished.math(`(${getMinHeight(props)} - ${size}) / 2`);
   let side;
-  if (props.type === 'next') {
+  if (props.$type === 'next') {
     side = props.theme.rtl ? 'left' : 'right';
   } else {
     side = props.theme.rtl ? 'right' : 'left';
   }
   return styled.css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
 };
-const StyledOptionTypeIcon = styled__default.default(_ref => {
-  let {
-    children,
-    isCompact,
-    theme,
-    type,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
-})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.type === 'next' || props.type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.$type === 'next' || props.$type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledOptionTypeIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -537,7 +509,7 @@ StyledOptionTypeIcon.defaultProps = {
 const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -553,7 +525,7 @@ const colorStyles$1 = props => {
 };
 const StyledValue = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -575,7 +547,7 @@ const colorStyles = props => {
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -587,7 +559,7 @@ StyledTagsButton.defaultProps = {
 const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -603,7 +575,7 @@ StyledMenu.defaultProps = {
 const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -615,7 +587,7 @@ StyledFloatingMenu.defaultProps = {
 const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -627,7 +599,7 @@ StyledItem.defaultProps = {
 const COMPONENT_ID$6 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -639,7 +611,7 @@ StyledItemContent.defaultProps = {
 const COMPONENT_ID$5 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -651,7 +623,7 @@ StyledItemGroup.defaultProps = {
 const COMPONENT_ID$4 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -663,7 +635,7 @@ StyledItemIcon.defaultProps = {
 const COMPONENT_ID$3 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -675,7 +647,7 @@ StyledItemMeta.defaultProps = {
 const COMPONENT_ID$2 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -687,7 +659,7 @@ StyledItemTypeIcon.defaultProps = {
 const COMPONENT_ID$1 = 'dropdowns.menu.button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-5hs2jg-0"
@@ -699,7 +671,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -1118,8 +1090,8 @@ const Combobox = React.forwardRef((_ref, ref) => {
   }, props, {
     ref: ref
   }), React__namespace.default.createElement(StyledTrigger, triggerProps, React__namespace.default.createElement(StyledContainer, null, startIcon && React__namespace.default.createElement(StyledInputIcon, {
-    isLabelHovered: isLabelHovered,
-    isCompact: isCompact
+    $isLabelHovered: isLabelHovered,
+    $isCompact: isCompact
   }, startIcon), React__namespace.default.createElement(StyledInputGroup, null, isMultiselectable && Array.isArray(selection) && React__namespace.default.createElement(TagGroup, {
     isDisabled: isDisabled,
     isExpanded: isTagGroupExpanded,
@@ -1148,10 +1120,10 @@ const Combobox = React.forwardRef((_ref, ref) => {
     selection,
     inputValue
   }) : inputValue || placeholder), React__namespace.default.createElement(StyledInput, inputProps)), (hasChevron || endIcon) && React__namespace.default.createElement(StyledInputIcon, {
-    isCompact: isCompact,
-    isEnd: true,
-    isLabelHovered: isLabelHovered,
-    isRotated: hasChevron && isExpanded
+    $isCompact: isCompact,
+    $isEnd: true,
+    $isLabelHovered: isLabelHovered,
+    $isRotated: hasChevron && isExpanded
   }, hasChevron ? React__namespace.default.createElement(SvgChevronDownStroke, null) : endIcon))), React__namespace.default.createElement(Listbox, Object.assign({
     appendToNode: listboxAppendToNode,
     isCompact: isCompact,
@@ -1445,8 +1417,8 @@ const OptionComponent = React.forwardRef((_ref, ref) => {
     isCompact: isCompact,
     $type: type
   }, props, optionProps), React__namespace.default.createElement(StyledOptionTypeIcon, {
-    isCompact: isCompact,
-    type: type
+    $isCompact: isCompact,
+    $type: type
   }, renderActionIcon(type)), icon && React__namespace.default.createElement(StyledOptionIcon, null, icon), React__namespace.default.createElement(StyledOptionContent, null, children || label || value)));
 });
 OptionComponent.displayName = 'Option';
@@ -1496,8 +1468,8 @@ const OptGroup = React.forwardRef((_ref, ref) => {
     isCompact: isCompact,
     $type: "header"
   }, icon && React__namespace.default.createElement(StyledOptionTypeIcon, {
-    isCompact: isCompact,
-    type: "header"
+    $isCompact: isCompact,
+    $type: "header"
   }, icon), content || legend), React__namespace.default.createElement(StyledOptGroup, Object.assign({
     isCompact: isCompact
   }, optGroupProps), React__namespace.default.createElement(StyledListboxSeparator, {
@@ -1835,8 +1807,8 @@ const ItemGroup = React.forwardRef((_ref, ref) => {
     isCompact: isCompact,
     $type: "header"
   }, icon && React__namespace.default.createElement(StyledItemTypeIcon, {
-    isCompact: isCompact,
-    type: "header"
+    $isCompact: isCompact,
+    $type: "header"
   }, icon), content || legend), React__namespace.default.createElement(StyledItemGroup, Object.assign({
     isCompact: isCompact
   }, groupProps), React__namespace.default.createElement(StyledSeparator, {
@@ -1943,8 +1915,8 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
   }, props, itemProps, {
     ref: reactMergeRefs.mergeRefs([_itemRef, ref])
   }), React__namespace.default.createElement(StyledItemTypeIcon, {
-    isCompact: isCompact,
-    type: type
+    $isCompact: isCompact,
+    $type: type
   }, renderActionIcon(type)), icon && React__namespace.default.createElement(StyledItemIcon, null, icon), React__namespace.default.createElement(StyledItemContent, null, children || label)));
 });
 ItemComponent.displayName = 'Item';

package/dist/typings/views/combobox/StyledInputIcon.d.ts

@@ -7,13 +7,13 @@
 /// <reference types="react" />
 import { ThemeProps, DefaultTheme } from 'styled-components';
 interface IStyledInputIconProps extends ThemeProps<DefaultTheme> {
-    isCompact?: boolean;
-    isDisabled?: boolean;
-    isEnd?: boolean;
-    isLabelHovered?: boolean;
-    isRotated?: boolean;
+    $isCompact?: boolean;
+    $isDisabled?: boolean;
+    $isEnd?: boolean;
+    $isLabelHovered?: boolean;
+    $isRotated?: boolean;
 }
-export declare const StyledInputIcon: import("styled-components").StyledComponent<({ children, isCompact, isDisabled, isEnd, isLabelHovered, isRotated, theme, ...props }: any) => import("react").FunctionComponentElement<SVGElement>, DefaultTheme, {
+export declare const StyledInputIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledInputIconProps, "data-garden-id" | "data-garden-version">;

package/dist/typings/views/combobox/StyledOptionIcon.d.ts

@@ -6,7 +6,7 @@
  */
 /// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
-export declare const StyledOptionIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").FunctionComponentElement<SVGElement>, DefaultTheme, {
+export declare const StyledOptionIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/views/combobox/StyledOptionTypeIcon.d.ts

@@ -8,10 +8,10 @@
 import { ThemeProps, DefaultTheme } from 'styled-components';
 import { OptionType } from '../../types';
 export interface IStyledOptionTypeIconProps extends ThemeProps<DefaultTheme> {
-    isCompact?: boolean;
-    type?: OptionType | 'header';
+    $isCompact?: boolean;
+    $type?: OptionType | 'header';
 }
-export declare const StyledOptionTypeIcon: import("styled-components").StyledComponent<({ children, isCompact, theme, type, ...props }: any) => import("react").FunctionComponentElement<SVGElement>, DefaultTheme, {
+export declare const StyledOptionTypeIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledOptionTypeIconProps, "data-garden-id" | "data-garden-version">;

package/dist/typings/views/menu/StyledButton.d.ts

@@ -7,11 +7,11 @@
 /// <reference types="react" />
 export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
     EndIcon: {
-        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
+        ({ isRotated, ...props }: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
         displayName: string;
     };
     StartIcon: {
-        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
+        ({ isRotated, ...props }: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
         displayName: string;
     };
 }, import("styled-components").DefaultTheme, {

package/dist/typings/views/menu/StyledItemIcon.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="react" />
-export declare const StyledItemIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").FunctionComponentElement<SVGElement>, import("styled-components").DefaultTheme, {
+export declare const StyledItemIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & {

package/dist/typings/views/menu/StyledItemTypeIcon.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="react" />
-export declare const StyledItemTypeIcon: import("styled-components").StyledComponent<({ children, isCompact, theme, type, ...props }: any) => import("react").FunctionComponentElement<SVGElement>, import("styled-components").DefaultTheme, {
+export declare const StyledItemTypeIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & import("../combobox/StyledOptionTypeIcon").IStyledOptionTypeIconProps & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Components related to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -25,10 +25,10 @@
     "@zendeskgarden/container-combobox": "^2.0.0",
     "@zendeskgarden/container-menu": "^0.3.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.8",
-    "@zendeskgarden/react-forms": "^9.0.0-next.8",
-    "@zendeskgarden/react-tags": "^9.0.0-next.8",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.8",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.9",
+    "@zendeskgarden/react-forms": "^9.0.0-next.9",
+    "@zendeskgarden/react-tags": "^9.0.0-next.9",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.9",
     "polished": "^4.0.0",
     "prop-types": "^15.7.2",
     "react-merge-refs": "^2.0.0"
@@ -40,7 +40,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.8",
+    "@zendeskgarden/react-theming": "^9.0.0-next.9",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -54,5 +54,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }