@zendeskgarden/react-dropdowns 9.0.0 → 9.1.0

package/dist/index.cjs.js

@@ -83,7 +83,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$u = 'dropdowns.combobox.label';
 const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -92,7 +92,7 @@ const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
 const COMPONENT_ID$t = 'dropdowns.combobox.hint';
 const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -101,7 +101,7 @@ const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
 const COMPONENT_ID$s = 'dropdowns.combobox.message';
 const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -109,13 +109,13 @@ const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
 
 const COMPONENT_ID$r = 'dropdowns.combobox';
 const sizeStyles$a = props => {
-  const minWidth = `${props.isCompact ? 100 : 144}px`;
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  const minWidth = `${props.$isCompact ? 100 : 144}px`;
+  const marginTop = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;
   return styled.css(["min-width:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], minWidth, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledCombobox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -124,7 +124,7 @@ const StyledCombobox = styled__default.default.div.attrs({
 const COMPONENT_ID$q = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -133,7 +133,7 @@ const StyledContainer = styled__default.default.div.attrs({
 const COMPONENT_ID$p = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -142,15 +142,15 @@ const StyledField = styled__default.default.div.attrs({
 const COMPONENT_ID$o = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
-})(["top:0;left:0;", ";", ";"], props => reactTheming.menuStyles(props.position, {
+})(["top:0;left:0;", ";", ";"], props => reactTheming.menuStyles(props.$position, {
   theme: props.theme,
-  hidden: props.isHidden,
+  hidden: props.$isHidden,
   animationModifier: '[data-garden-animate="true"]',
-  zIndex: props.zIndex
+  zIndex: props.$zIndex
 }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
 
 const COMPONENT_ID$n = 'dropdowns.combobox.input';
@@ -165,10 +165,10 @@ const colorStyles$9 = _ref => {
   return styled.css(["background-color:inherit;color:inherit;&::placeholder{opacity:1;color:", ";}"], placeholderColor);
 };
 const getHeight = props => {
-  if (props.isBare && !props.isMultiselectable) {
+  if (props.$isBare && !props.$isMultiselectable) {
     return props.theme.space.base * 5;
   }
-  return props.theme.space.base * (props.isCompact ? 5 : 8);
+  return props.theme.space.base * (props.$isCompact ? 5 : 8);
 };
 const sizeStyles$9 = props => {
   const height = props.theme.space.base * 5;
@@ -180,11 +180,11 @@ const sizeStyles$9 = props => {
 };
 const StyledInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
-})(["flex-basis:0;flex-grow:1;border:none;padding:0;font-family:inherit;&:focus{outline:none;}", ";", ";&[hidden]{display:revert;", "}&[aria-hidden='true']{display:none;}", ";"], sizeStyles$9, colorStyles$9, props => props.isEditable && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
+})(["flex-basis:0;flex-grow:1;border:none;padding:0;font-family:inherit;&:focus{outline:none;}", ";", ";&[hidden]{display:revert;", "}&[aria-hidden='true']{display:none;}", ";"], sizeStyles$9, colorStyles$9, props => props.$isEditable && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 
 const COMPONENT_ID$m = 'dropdowns.combobox.input_group';
 const sizeStyles$8 = props => {
@@ -193,7 +193,7 @@ const sizeStyles$8 = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
@@ -203,16 +203,16 @@ const COMPONENT_ID$l = 'dropdowns.combobox.trigger';
 const colorStyles$8 = _ref => {
   let {
     theme,
-    validation,
-    isBare,
-    isLabelHovered,
-    focusInset
+    $validation,
+    $isBare,
+    $isLabelHovered,
+    $focusInset
   } = _ref;
   const foregroundColor = reactTheming.getColor({
     theme,
     variable: 'foreground.default'
   });
-  const backgroundColor = isBare ? 'transparent' : reactTheming.getColor({
+  const backgroundColor = $isBare ? 'transparent' : reactTheming.getColor({
     theme,
     variable: 'background.default'
   });
@@ -220,12 +220,12 @@ const colorStyles$8 = _ref => {
   let borderVariable;
   let hoverBorderColor;
   let focusBorderColor;
-  if (validation) {
-    if (validation === 'success') {
+  if ($validation) {
+    if ($validation === 'success') {
       borderVariable = 'border.successEmphasis';
-    } else if (validation === 'warning') {
+    } else if ($validation === 'warning') {
       borderVariable = 'border.warningEmphasis';
-    } else if (validation === 'error') {
+    } else if ($validation === 'error') {
       borderVariable = 'border.dangerEmphasis';
     }
     borderColor = reactTheming.getColor({
@@ -252,7 +252,7 @@ const colorStyles$8 = _ref => {
     });
     focusBorderColor = hoverBorderColor;
   }
-  const disabledBackgroundColor = isBare ? undefined : reactTheming.getColor({
+  const disabledBackgroundColor = $isBare ? undefined : reactTheming.getColor({
     theme,
     variable: 'background.disabled'
   });
@@ -268,9 +268,9 @@ const colorStyles$8 = _ref => {
     &:focus-within:not([aria-disabled='true']),
     &:focus-visible
   `;
-  return styled.css(["color-scheme:only ", ";border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], theme.colors.base, isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, hoverBorderColor, reactTheming.focusStyles({
+  return styled.css(["color-scheme:only ", ";border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], theme.colors.base, $isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, hoverBorderColor, reactTheming.focusStyles({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     color: {
       variable: borderVariable
     },
@@ -278,15 +278,15 @@ const colorStyles$8 = _ref => {
     styles: {
       borderColor: focusBorderColor
     },
-    condition: !isBare
+    condition: !$isBare
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
 const sizeStyles$7 = props => {
   const inputHeight = getHeight(props);
   let minHeight;
   let horizontalPadding;
-  if (props.isBare) {
-    if (props.isMultiselectable) {
+  if (props.$isBare) {
+    if (props.$isMultiselectable) {
       minHeight = polished.math(`${props.theme.shadowWidths.sm} * 2 + ${inputHeight}`);
       horizontalPadding = props.theme.shadowWidths.sm;
     } else {
@@ -294,20 +294,20 @@ const sizeStyles$7 = props => {
       horizontalPadding = '0';
     }
   } else {
-    minHeight = `${props.theme.space.base * (props.isCompact ? 3 : 2) + inputHeight}px`;
+    minHeight = `${props.theme.space.base * (props.$isCompact ? 3 : 2) + inputHeight}px`;
     horizontalPadding = `${props.theme.space.base * 3}px`;
   }
-  const maxHeight = props.maxHeight || minHeight;
-  const verticalPadding = polished.math(`(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`);
-  return styled.css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, maxHeight, props.theme.fontSizes.md);
+  const $maxHeight = props.$maxHeight || minHeight;
+  const verticalPadding = polished.math(`(${minHeight} - ${inputHeight} - (${props.$isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`);
+  return styled.css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, $maxHeight, props.theme.fontSizes.md);
 };
 const StyledTrigger = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
-})(["overflow-y:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.isBare && !props.isMultiselectable ? 'visible' : 'auto', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => !props.isAutocomplete && props.isEditable ? 'text' : 'pointer', sizeStyles$7, colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["overflow-y:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:", ";border-radius:", ";cursor:", ";box-sizing:border-box;", ";&:focus{outline:none;}", ";&[aria-disabled='true']{cursor:default;}", ";"], props => props.$isBare && !props.$isMultiselectable ? 'visible' : 'auto', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => !props.$isAutocomplete && props.$isEditable ? 'text' : 'pointer', sizeStyles$7, colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 
 const COMPONENT_ID$k = 'dropdowns.combobox.input_icon';
 const colorStyles$7 = _ref => {
@@ -349,7 +349,7 @@ const sizeStyles$6 = props => {
 };
 const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
@@ -359,12 +359,12 @@ const COMPONENT_ID$j = 'dropdowns.combobox.option';
 const colorStyles$6 = _ref => {
   let {
     theme,
-    isActive,
+    $isActive,
     $type
   } = _ref;
   let backgroundColor;
   let boxShadow;
-  if (isActive && $type !== 'group' && $type !== 'header') {
+  if ($isActive && $type !== 'group' && $type !== 'header') {
     const variable = 'background.primaryEmphasis';
     backgroundColor = reactTheming.getColor({
       theme,
@@ -394,7 +394,7 @@ const colorStyles$6 = _ref => {
   });
   return styled.css(["box-shadow:", ";background-color:", ";color:", ";&[aria-disabled='true']{background-color:transparent;color:", ";}"], boxShadow, backgroundColor, foregroundColor, disabledForegroundColor);
 };
-const getMinHeight = props => props.theme.space.base * (props.isCompact ? 7 : 9);
+const getMinHeight = props => props.theme.space.base * (props.$isCompact ? 7 : 9);
 const sizeStyles$5 = props => {
   const lineHeight = props.theme.lineHeights.md;
   const minHeight = getMinHeight(props);
@@ -404,7 +404,7 @@ const sizeStyles$5 = props => {
 };
 const StyledOption = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -413,7 +413,7 @@ const StyledOption = styled__default.default.li.attrs({
 const COMPONENT_ID$i = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -422,7 +422,7 @@ const StyledOptionContent = styled__default.default.div.attrs({
 const COMPONENT_ID$h = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
@@ -446,7 +446,7 @@ const sizeStyles$4 = props => {
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -455,12 +455,12 @@ const StyledListboxSeparator = styled__default.default.li.attrs({
 const COMPONENT_ID$f = 'dropdowns.combobox.listbox';
 const sizeStyles$3 = props => {
   const padding = props.theme.space.base;
-  const minHeight = props.minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.minHeight;
-  return styled.css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], minHeight, props.maxHeight, padding, padding);
+  const $minHeight = props.$minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.$minHeight;
+  return styled.css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], $minHeight, props.$maxHeight, padding, padding);
 };
 const StyledListbox = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
@@ -497,7 +497,7 @@ const sizeStyles$2 = props => {
 };
 const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
@@ -507,9 +507,9 @@ const COMPONENT_ID$d = 'dropdowns.combobox.option.meta';
 const colorStyles$3 = _ref => {
   let {
     theme,
-    isDisabled
+    $isDisabled
   } = _ref;
-  const variable = isDisabled ? 'foreground.disabled' : 'foreground.subtle';
+  const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
   const color = reactTheming.getColor({
     theme,
     variable
@@ -523,7 +523,7 @@ const sizeStyles$1 = props => {
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
@@ -566,7 +566,7 @@ const sizeStyles = props => {
 };
 const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
@@ -575,7 +575,7 @@ const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon
 const COMPONENT_ID$b = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -588,9 +588,9 @@ const COMPONENT_ID$a = 'dropdowns.combobox.value';
 const colorStyles$1 = _ref => {
   let {
     theme,
-    isPlaceholder
+    $isPlaceholder
   } = _ref;
-  const foregroundColor = isPlaceholder && reactTheming.getColor({
+  const foregroundColor = $isPlaceholder && reactTheming.getColor({
     theme,
     variable: 'foreground.disabled'
   });
@@ -598,15 +598,15 @@ const colorStyles$1 = _ref => {
 };
 const StyledValue = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
 })(["flex-basis:0;flex-grow:1;cursor:", ";overflow:hidden;text-overflow:ellipsis;white-space:pre;user-select:none;", ";", ";&[hidden]{display:none;}", ";"], props => {
-  if (props.isDisabled) {
+  if (props.$isDisabled) {
     return 'default';
   }
-  return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
+  return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
 }, sizeStyles$9, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 
 const COMPONENT_ID$9 = 'dropdowns.combobox.tags_button';
@@ -623,7 +623,7 @@ const colorStyles = _ref => {
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -632,11 +632,11 @@ const StyledTagsButton = styled__default.default(StyledValue).attrs({
 const COMPONENT_ID$8 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
-})(["position:static !important;", ";", ";"], props => props.arrowPosition && reactTheming.arrowStyles(props.arrowPosition, {
+})(["position:static !important;", ";", ";"], props => props.$arrowPosition && reactTheming.arrowStyles(props.$arrowPosition, {
   size: `${props.theme.space.base * 1.5}px`,
   inset: '1px',
   animationModifier: '[data-garden-animate-arrow="true"]'
@@ -645,7 +645,7 @@ const StyledMenu = styled__default.default(StyledListbox).attrs({
 const COMPONENT_ID$7 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -654,7 +654,7 @@ const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs(
 const COMPONENT_ID$6 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -663,7 +663,7 @@ const StyledItem = styled__default.default(StyledOption).attrs({
 const COMPONENT_ID$5 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -672,7 +672,7 @@ const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
 const COMPONENT_ID$4 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -681,7 +681,7 @@ const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
 const COMPONENT_ID$3 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -690,7 +690,7 @@ const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
 const COMPONENT_ID$2 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -699,7 +699,7 @@ const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
 const COMPONENT_ID$1 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -708,7 +708,7 @@ const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -791,18 +791,18 @@ const Listbox = React.forwardRef((_ref, ref) => {
   children, update]);
   const Node = React__namespace.default.createElement(StyledFloatingListbox, {
     "data-garden-animate": isVisible ? 'true' : 'false',
-    isHidden: !isExpanded,
-    position: placement === 'bottom-start' ? 'bottom' : 'top',
+    $isHidden: !isExpanded,
+    $position: placement === 'bottom-start' ? 'bottom' : 'top',
     style: {
       transform,
       width
     },
-    zIndex: zIndex,
+    $zIndex: zIndex,
     ref: floatingRef
   }, React__namespace.default.createElement(StyledListbox, Object.assign({
-    isCompact: isCompact,
-    maxHeight: maxHeight,
-    minHeight: minHeight,
+    $isCompact: isCompact,
+    $maxHeight: maxHeight,
+    $minHeight: minHeight,
     onMouseDown: containerUtilities.composeEventHandlers(onMouseDown, handleMouseDown),
     style: {
       height
@@ -913,7 +913,7 @@ const toOption = props => {
 };
 const toOptions = (children, optionTagProps) => React.Children.toArray(children).reduce((options, option) => {
   const retVal = options;
-  if ( React.isValidElement(option)) {
+  if (React.isValidElement(option)) {
     if ('value' in option.props) {
       retVal.push(toOption(option.props));
       optionTagProps[option.props.value] = option.props.tagProps;
@@ -1044,46 +1044,31 @@ const Combobox = React.forwardRef((_ref, ref) => {
   const _listboxAriaLabel = reactTheming.useText(Combobox, {
     listboxAriaLabel
   }, 'listboxAriaLabel', 'Options');
-  const triggerProps = {
-    isAutocomplete,
-    isBare,
-    isCompact,
-    isEditable,
-    isLabelHovered,
-    isMultiselectable,
-    maxHeight,
-    focusInset,
-    validation,
-    ...getTriggerProps({
-      onFocus: () => {
-        if (!isDisabled) {
-          if (isEditable) {
-            setIsInputHidden(false);
-          }
-          if (isMultiselectable) {
-            setIsTagGroupExpanded(true);
-          }
+  const triggerProps = getTriggerProps({
+    onFocus: () => {
+      if (!isDisabled) {
+        if (isEditable) {
+          setIsInputHidden(false);
         }
-      },
-      onBlur: event => {
-        if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
-          if (isEditable) {
-            setIsInputHidden(true);
-          }
-          if (isMultiselectable) {
-            setIsTagGroupExpanded(false);
-          }
+        if (isMultiselectable) {
+          setIsTagGroupExpanded(true);
         }
       }
-    })
-  };
+    },
+    onBlur: event => {
+      if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
+        if (isEditable) {
+          setIsInputHidden(true);
+        }
+        if (isMultiselectable) {
+          setIsTagGroupExpanded(false);
+        }
+      }
+    }
+  });
   const inputProps = {
     'aria-invalid': validation === 'error' || validation === 'warning',
     hidden: isInputHidden,
-    isBare,
-    isCompact,
-    isEditable,
-    isMultiselectable,
     placeholder,
     ...getInputProps({
       ..._inputProps
@@ -1119,11 +1104,21 @@ const Combobox = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(ComboboxContext.Provider, {
     value: contextValue
   }, React__namespace.default.createElement(StyledCombobox, Object.assign({
-    isCompact: isCompact,
+    $isCompact: isCompact,
     tabIndex: -1
   }, props, {
     ref: ref
-  }), React__namespace.default.createElement(StyledTrigger, triggerProps, React__namespace.default.createElement(StyledContainer, null, !!startIcon && React__namespace.default.createElement(StyledInputIcon, {
+  }), React__namespace.default.createElement(StyledTrigger, Object.assign({
+    $isAutocomplete: isAutocomplete,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isEditable: isEditable,
+    $isLabelHovered: isLabelHovered,
+    $isMultiselectable: isMultiselectable,
+    $maxHeight: maxHeight,
+    $focusInset: focusInset,
+    $validation: validation
+  }, triggerProps), React__namespace.default.createElement(StyledContainer, null, !!startIcon && React__namespace.default.createElement(StyledInputIcon, {
     $isLabelHovered: isLabelHovered,
     $isCompact: isCompact
   }, startIcon), React__namespace.default.createElement(StyledInputGroup, null, !!isMultiselectable && Array.isArray(selection) && React__namespace.default.createElement(TagGroup, {
@@ -1135,7 +1130,7 @@ const Combobox = React.forwardRef((_ref, ref) => {
   }, selection.length > maxTags && React__namespace.default.createElement(StyledTagsButton, {
     disabled: isDisabled,
     hidden: isTagGroupExpanded,
-    isCompact: isCompact,
+    $isCompact: isCompact,
     tabIndex: -1,
     type: "button"
   }, (() => {
@@ -1143,17 +1138,22 @@ const Combobox = React.forwardRef((_ref, ref) => {
     return renderExpandTags ? renderExpandTags(value) : expandTags?.replace('{{value}}', value.toString());
   })())), React__namespace.default.createElement(StyledValue, {
     hidden: !isInputHidden,
-    isAutocomplete: isAutocomplete,
-    isBare: isBare,
-    isCompact: isCompact,
-    isDisabled: isDisabled,
-    isEditable: isEditable,
-    isMultiselectable: isMultiselectable,
-    isPlaceholder: !(inputValue || renderValue)
+    $isAutocomplete: isAutocomplete,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isDisabled: isDisabled,
+    $isEditable: isEditable,
+    $isMultiselectable: isMultiselectable,
+    $isPlaceholder: !(inputValue || renderValue)
   }, renderValue ? renderValue({
     selection,
     inputValue
-  }) : inputValue || placeholder), React__namespace.default.createElement(StyledInput, inputProps)), !!(hasChevron || endIcon) && React__namespace.default.createElement(StyledInputIcon, {
+  }) : inputValue || placeholder), React__namespace.default.createElement(StyledInput, Object.assign({
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isEditable: isEditable,
+    $isMultiselectable: isMultiselectable
+  }, inputProps))), !!(hasChevron || endIcon) && React__namespace.default.createElement(StyledInputIcon, {
     $isCompact: isCompact,
     $isEnd: true,
     $isLabelHovered: isLabelHovered,
@@ -1380,7 +1380,7 @@ const OptionMetaComponent = React.forwardRef((props, ref) => {
     isDisabled
   } = useOptionContext();
   return React__namespace.default.createElement(StyledOptionMeta, Object.assign({
-    isDisabled: isDisabled
+    $isDisabled: isDisabled
   }, props, {
     ref: ref
   }));
@@ -1448,8 +1448,8 @@ const OptionComponent = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(OptionContext.Provider, {
     value: contextValue
   }, React__namespace.default.createElement(StyledOption, Object.assign({
-    isActive: isActive,
-    isCompact: isCompact,
+    $isActive: isActive,
+    $isCompact: isCompact,
     $type: type
   }, props, optionProps), React__namespace.default.createElement(StyledOptionTypeIcon, {
     $isCompact: isCompact,
@@ -1495,7 +1495,7 @@ const OptGroup = React.forwardRef((_ref, ref) => {
     'aria-label': groupAriaLabel || legend
   });
   return React__namespace.default.createElement(StyledOption, Object.assign({
-    isCompact: isCompact,
+    $isCompact: isCompact,
     $type: "group",
     onMouseDown: containerUtilities.composeEventHandlers(onMouseDown, handleMouseDown),
     role: "none"
@@ -1503,13 +1503,13 @@ const OptGroup = React.forwardRef((_ref, ref) => {
     ref: ref
   }), React__namespace.default.createElement(StyledOptionContent, null, !!(content || legend) && React__namespace.default.createElement(StyledOption, {
     as: "div",
-    isCompact: isCompact,
+    $isCompact: isCompact,
     $type: "header"
   }, !!icon && React__namespace.default.createElement(StyledOptionTypeIcon, {
     $isCompact: isCompact,
     $type: "header"
   }, icon), content || legend), React__namespace.default.createElement(StyledOptGroup, Object.assign({
-    isCompact: isCompact
+    $isCompact: isCompact
   }, optGroupProps), React__namespace.default.createElement(StyledListboxSeparator, {
     role: "none"
   }), children)));
@@ -1554,7 +1554,7 @@ const toItem = props => ({
 });
 const toItems = (children, type) => React.Children.toArray(children).reduce((items, item) => {
   const retVal = items;
-  if ( React.isValidElement(item)) {
+  if (React.isValidElement(item)) {
     if ('value' in item.props) {
       retVal.push(toItem({
         ...item.props,
@@ -1660,19 +1660,19 @@ const MenuList = React.forwardRef((_ref, ref) => {
   children, update]);
   const Node = React__namespace.default.createElement(StyledFloatingMenu, {
     "data-garden-animate": isVisible,
-    isHidden: !isExpanded || !isVisible ,
-    position: reactTheming.getMenuPosition(placement),
-    zIndex: zIndex,
+    $isHidden: !isExpanded || !isVisible ,
+    $position: reactTheming.getMenuPosition(placement),
+    $zIndex: zIndex,
     style: {
       transform
     },
     ref: floatingRef
   }, React__namespace.default.createElement(StyledMenu, Object.assign({
     "data-garden-animate-arrow": isVisible,
-    arrowPosition: hasArrow ? reactTheming.getArrowPosition(theme, placement) : undefined,
-    isCompact: isCompact,
-    minHeight: minHeight,
-    maxHeight: maxHeight,
+    $arrowPosition: hasArrow ? reactTheming.getArrowPosition(theme, placement) : undefined,
+    $isCompact: isCompact,
+    $minHeight: minHeight,
+    $maxHeight: maxHeight,
     style: {
       height
     }
@@ -1840,20 +1840,20 @@ const ItemGroup = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(ItemGroupContext.Provider, {
     value: contextValue
   }, React__namespace.default.createElement(StyledItem, Object.assign({
-    isCompact: isCompact,
+    $isCompact: isCompact,
     $type: "group"
   }, props, {
     role: "none",
     ref: ref
   }), React__namespace.default.createElement(StyledItemContent, null, !!(content || legend) && React__namespace.default.createElement(StyledItem, {
     as: "div",
-    isCompact: isCompact,
+    $isCompact: isCompact,
     $type: "header"
   }, !!icon && React__namespace.default.createElement(StyledItemTypeIcon, {
     $isCompact: isCompact,
     $type: "header"
   }, icon), content || legend), React__namespace.default.createElement(StyledItemGroup, Object.assign({
-    isCompact: isCompact
+    $isCompact: isCompact
   }, groupProps), React__namespace.default.createElement(StyledSeparator, {
     role: "none"
   }), children))));
@@ -1880,7 +1880,7 @@ const ItemMetaComponent = React.forwardRef((props, ref) => {
     isDisabled
   } = useItemContext();
   return React__namespace.default.createElement(StyledItemMeta, Object.assign({
-    isDisabled: isDisabled
+    $isDisabled: isDisabled
   }, props, {
     ref: ref
   }));
@@ -1952,8 +1952,8 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
     value: contextValue
   }, React__namespace.default.createElement(StyledItem, Object.assign({
     $type: type,
-    isCompact: isCompact,
-    isActive: isActive
+    $isCompact: isCompact,
+    $isActive: isActive
   }, props, itemProps, {
     ref: reactMergeRefs.mergeRefs([_itemRef, ref])
   }), React__namespace.default.createElement(StyledItemTypeIcon, {