@zendeskgarden/react-dropdowns 9.12.2 → 9.12.4

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { Field } from '@zendeskgarden/react-forms';
 
-const COMPONENT_ID = 'dropdowns.combobox.hint';
+const COMPONENT_ID$v = 'dropdowns.combobox.hint';
 const StyledHint = styled(Field.Hint).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"

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

@@ -6,13 +6,12 @@
 */
 import styled, { css } from 'styled-components';
 import { hideVisually, math } from 'polished';
-import { componentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.input';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$p = 'dropdowns.combobox.input';
+const colorStyles$a = ({
+  theme
+}) => {
   const placeholderColor = getColor({
     theme,
     variable: 'foreground.disabled'
@@ -25,7 +24,7 @@ const getHeight = props => {
   }
   return props.theme.space.base * (props.$isCompact ? 5 : 8);
 };
-const sizeStyles = props => {
+const sizeStyles$a = props => {
   const height = props.theme.space.base * 5;
   const fontSize = props.theme.fontSizes.md;
   const lineHeight = getLineHeight(height, fontSize);
@@ -34,11 +33,11 @@ const sizeStyles = props => {
   return css(["min-width:", ";height:", "px;line-height:", ";font-size:", ";&&{margin-top:", ";margin-bottom:", ";}"], minWidth, height, lineHeight, fontSize, margin, margin);
 };
 const StyledInput = styled.input.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.12.4'
 }).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, colorStyles, props => props.$isEditable && hideVisually(), componentStyles);
+})(["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$a, colorStyles$a, props => props.$isEditable && hideVisually(), componentStyles);
 
-export { StyledInput, getHeight, sizeStyles };
+export { StyledInput, getHeight, sizeStyles$a as sizeStyles };

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

@@ -7,17 +7,17 @@
 import styled, { css } from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.input_group';
-const sizeStyles = props => {
+const COMPONENT_ID$o = 'dropdowns.combobox.input_group';
+const sizeStyles$9 = props => {
   const margin = props.theme.shadowWidths.sm;
   return css(["margin:-", ";min-width:0;& > *{margin:", ";}"], margin, margin);
 };
 const StyledInputGroup = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
-})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles, componentStyles);
+})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$9, componentStyles);
 
 export { StyledInputGroup };

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

@@ -10,12 +10,11 @@ import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-
 import { getHeight } from './StyledInput.js';
 import { StyledTrigger } from './StyledTrigger.js';
 
-const COMPONENT_ID = 'dropdowns.combobox.input_icon';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isLabelHovered
-  } = _ref;
+const COMPONENT_ID$m = 'dropdowns.combobox.input_icon';
+const colorStyles$8 = ({
+  theme,
+  $isLabelHovered
+}) => {
   const options = {
     theme,
     variable: 'foreground.subtle'
@@ -36,7 +35,7 @@ const colorStyles = _ref => {
   });
   return css(["color:", ";", ":hover &&,", ":focus-within &&,", ":focus &&{color:", ";}", "[aria-disabled='true'] &&{color:", ";}"], $isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
 };
-const sizeStyles = props => {
+const sizeStyles$7 = props => {
   const size = props.theme.iconSizes.md;
   const position = math(`(${getHeight(props)} - ${size}) / 2`);
   const margin = `${props.theme.space.base * 2}px`;
@@ -49,11 +48,11 @@ const sizeStyles = props => {
   return css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
 };
 const StyledInputIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.12.4'
 }).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, componentStyles);
+})(["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$7, colorStyles$8, componentStyles);
 
 export { StyledInputIcon };

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { Field } from '@zendeskgarden/react-forms';
 
-const COMPONENT_ID = 'dropdowns.combobox.label';
+const COMPONENT_ID$w = 'dropdowns.combobox.label';
 const StyledLabel = styled(Field.Label).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"

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

@@ -10,18 +10,18 @@ import { StyledOptionContent } from './StyledOptionContent.js';
 import { StyledOptGroup } from './StyledOptGroup.js';
 import { StyledListboxSeparator } from './StyledListboxSeparator.js';
 
-const COMPONENT_ID = 'dropdowns.combobox.listbox';
-const sizeStyles = props => {
+const COMPONENT_ID$h = 'dropdowns.combobox.listbox';
+const sizeStyles$4 = props => {
   const padding = props.theme.space.base;
   const $minHeight = props.$minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.$minHeight;
   return css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], $minHeight, props.$maxHeight, padding, padding);
 };
 const StyledListbox = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
-})(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
+})(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles$4, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
 
 export { StyledListbox };

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

@@ -7,28 +7,27 @@
 import styled, { css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.separator';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$i = 'dropdowns.combobox.separator';
+const colorStyles$6 = ({
+  theme
+}) => {
   const backgroundColor = getColor({
     theme,
     variable: 'border.subtle'
   });
   return css(["background-color:", ";"], backgroundColor);
 };
-const sizeStyles = props => {
+const sizeStyles$5 = props => {
   const margin = `${props.theme.space.base}px`;
   const height = props.theme.borderWidths.sm;
   return css(["margin:", " 0;height:", ";"], margin, height);
 };
 const StyledListboxSeparator = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
-})(["cursor:default;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
+})(["cursor:default;", ";", ";", ";"], sizeStyles$5, colorStyles$6, componentStyles);
 
 export { StyledListboxSeparator };

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { Field } from '@zendeskgarden/react-forms';
 
-const COMPONENT_ID = 'dropdowns.combobox.message';
+const COMPONENT_ID$u = 'dropdowns.combobox.message';
 const StyledMessage = styled(Field.Message).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.optgroup';
+const COMPONENT_ID$j = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"

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

@@ -8,13 +8,12 @@ import styled, { css } from 'styled-components';
 import { hideVisually, math } from 'polished';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.option';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isActive,
-    $type
-  } = _ref;
+const COMPONENT_ID$l = 'dropdowns.combobox.option';
+const colorStyles$7 = ({
+  theme,
+  $isActive,
+  $type
+}) => {
   let backgroundColor;
   let boxShadow;
   if ($isActive && $type !== 'group' && $type !== 'header') {
@@ -48,7 +47,7 @@ const colorStyles = _ref => {
   return 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 sizeStyles = props => {
+const sizeStyles$6 = props => {
   const lineHeight = props.theme.lineHeights.md;
   const minHeight = getMinHeight(props);
   const paddingHorizontal = props.$type === 'group' ? 0 : `${props.theme.space.base * 9}px`;
@@ -56,11 +55,11 @@ const sizeStyles = props => {
   return css(["box-sizing:border-box;padding:", " ", ";min-height:", "px;line-height:", ";"], paddingVertical, paddingHorizontal, minHeight, lineHeight);
 };
 const StyledOption = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
-})(["display:flex;position:relative;transition:color 0.25s ease-in-out;cursor:", ";overflow-wrap:anywhere;font-weight:", ";user-select:none;&:focus{outline:none;}", ";", ";&[aria-disabled='true']{cursor:default;}&[aria-hidden='true']{", ";}", ";"], props => props.$type === 'group' || props.$type === 'header' ? 'default' : 'pointer', props => props.$type === 'header' || props.$type === 'previous' ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, sizeStyles, colorStyles, hideVisually(), componentStyles);
+})(["display:flex;position:relative;transition:color 0.25s ease-in-out;cursor:", ";overflow-wrap:anywhere;font-weight:", ";user-select:none;&:focus{outline:none;}", ";", ";&[aria-disabled='true']{cursor:default;}&[aria-hidden='true']{", ";}", ";"], props => props.$type === 'group' || props.$type === 'header' ? 'default' : 'pointer', props => props.$type === 'header' || props.$type === 'previous' ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, sizeStyles$6, colorStyles$7, hideVisually(), componentStyles);
 
 export { StyledOption, getMinHeight };

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.option.content';
+const COMPONENT_ID$k = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"

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

@@ -8,13 +8,12 @@ import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.option.icon';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isDisabled,
-    $type
-  } = _ref;
+const COMPONENT_ID$g = 'dropdowns.combobox.option.icon';
+const colorStyles$5 = ({
+  theme,
+  $isDisabled,
+  $type
+}) => {
   let variable;
   if ($isDisabled) {
     variable = 'foreground.disabled';
@@ -31,18 +30,18 @@ const colorStyles = _ref => {
   });
   return css(["color:", ";"], color);
 };
-const sizeStyles = props => {
+const sizeStyles$3 = props => {
   const size = props.theme.iconSizes.md;
   const marginTop = math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
   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(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
-})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$3, colorStyles$5, componentStyles);
 
 export { StyledOptionIcon };

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

@@ -7,12 +7,11 @@
 import styled, { css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'dropdowns.combobox.option.meta';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isDisabled
-  } = _ref;
+const COMPONENT_ID$f = 'dropdowns.combobox.option.meta';
+const colorStyles$4 = ({
+  theme,
+  $isDisabled
+}) => {
   const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
   const color = getColor({
     theme,
@@ -20,17 +19,17 @@ const colorStyles = _ref => {
   });
   return css(["color:", ";"], color);
 };
-const sizeStyles = props => {
+const sizeStyles$2 = props => {
   const lineHeight = props.theme.lineHeights.sm;
   const fontSize = props.theme.fontSizes.sm;
   return css(["line-height:", ";font-size:", ";"], lineHeight, fontSize);
 };
 const StyledOptionMeta = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
-})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles, colorStyles, componentStyles);
+})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$2, colorStyles$4, componentStyles);
 
 export { StyledOptionMeta };

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

@@ -9,22 +9,20 @@ import { math } from 'polished';
 import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { getMinHeight } from './StyledOption.js';
 
-const COMPONENT_ID = 'dropdowns.combobox.option.selection_icon';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$e = 'dropdowns.combobox.option.selection_icon';
+const colorStyles$3 = ({
+  theme
+}) => {
   const color = getColor({
     theme,
     variable: 'foreground.primary'
   });
   return css(["color:", ";"], color);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isCompact
-  } = _ref2;
+const sizeStyles$1 = ({
+  theme,
+  $isCompact
+}) => {
   const size = theme.iconSizes.sm;
   const position = `${theme.space.base * 3.5}px`;
   const top = math(`(${getMinHeight({
@@ -35,11 +33,11 @@ const sizeStyles = _ref2 => {
   return css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
 };
 const StyledOptionSelectionIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledOptionSelectionIcon",
   componentId: "sc-12wj24m-0"
-})(["position:absolute;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
+})(["position:absolute;", ";", ";", ";"], sizeStyles$1, colorStyles$3, componentStyles);
 
 export { StyledOptionSelectionIcon };

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

@@ -7,14 +7,13 @@
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
-import { StyledOption, getMinHeight } from './StyledOption.js';
+import { getMinHeight, StyledOption } from './StyledOption.js';
 
-const COMPONENT_ID = 'dropdowns.combobox.option.type_icon';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $type
-  } = _ref;
+const COMPONENT_ID$d = 'dropdowns.combobox.option.type_icon';
+const colorStyles$2 = ({
+  theme,
+  $type
+}) => {
   const opacity = $type && $type !== 'danger' ? 1 : 0;
   let color;
   if ($type === 'add') {
@@ -45,11 +44,11 @@ const sizeStyles = props => {
   return css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
 };
 const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.12.4'
 }).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, componentStyles);
+})(["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, componentStyles);
 
 export { StyledOptionTypeIcon };

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

@@ -9,10 +9,10 @@ import { hideVisually } from 'polished';
 import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 import { Tag } from '@zendeskgarden/react-tags';
 
-const COMPONENT_ID = 'dropdowns.combobox.tag';
+const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled(Tag).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"

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

@@ -8,11 +8,10 @@ import styled, { css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledValue } from './StyledValue.js';
 
-const COMPONENT_ID = 'dropdowns.combobox.tags_button';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$a = 'dropdowns.combobox.tags_button';
+const colorStyles = ({
+  theme
+}) => {
   const color = getColor({
     theme,
     variable: 'foreground.primary'
@@ -21,8 +20,8 @@ const colorStyles = _ref => {
 };
 const StyledTagsButton = styled(StyledValue).attrs({
   as: 'button',
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"

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

@@ -9,15 +9,14 @@ import { math } from 'polished';
 import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { getHeight } from './StyledInput.js';
 
-const COMPONENT_ID = 'dropdowns.combobox.trigger';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $validation,
-    $isBare,
-    $isLabelHovered,
-    $focusInset
-  } = _ref;
+const COMPONENT_ID$n = 'dropdowns.combobox.trigger';
+const colorStyles$9 = ({
+  theme,
+  $validation,
+  $isBare,
+  $isLabelHovered,
+  $focusInset
+}) => {
   const foregroundColor = getColor({
     theme,
     variable: 'foreground.default'
@@ -91,7 +90,7 @@ const colorStyles = _ref => {
     condition: !$isBare
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles = props => {
+const sizeStyles$8 = props => {
   const inputHeight = getHeight(props);
   let minHeight;
   let horizontalPadding;
@@ -112,11 +111,11 @@ const sizeStyles = props => {
   return css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, $maxHeight, props.theme.fontSizes.md);
 };
 const StyledTrigger = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.12.4'
 }).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, colorStyles, componentStyles);
+})(["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$8, colorStyles$9, componentStyles);
 
 export { StyledTrigger };

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

@@ -8,12 +8,11 @@ import styled, { css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { sizeStyles } from './StyledInput.js';
 
-const COMPONENT_ID = 'dropdowns.combobox.value';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isPlaceholder
-  } = _ref;
+const COMPONENT_ID$b = 'dropdowns.combobox.value';
+const colorStyles$1 = ({
+  theme,
+  $isPlaceholder
+}) => {
   const foregroundColor = $isPlaceholder && getColor({
     theme,
     variable: 'foreground.disabled'
@@ -21,8 +20,8 @@ const colorStyles = _ref => {
   return css(["color:", ";"], foregroundColor);
 };
 const StyledValue = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -31,6 +30,6 @@ const StyledValue = styled.div.attrs({
     return 'default';
   }
   return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
-}, sizeStyles, colorStyles, componentStyles);
+}, sizeStyles, colorStyles$1, componentStyles);
 
 export { StyledValue };

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
 
-const COMPONENT_ID = 'dropdowns.menu.floating';
+const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledOption } from '../combobox/StyledOption.js';
 
-const COMPONENT_ID = 'dropdowns.menu.item';
+const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled(StyledOption).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"

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

@@ -9,10 +9,10 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledItemTypeIcon } from './StyledItemTypeIcon.js';
 import { StyledOption } from '../combobox/StyledOption.js';
 
-const COMPONENT_ID = 'dropdowns.menu.item_anchor';
+const COMPONENT_ID$5 = 'dropdowns.menu.item_anchor';
 const StyledItemAnchor = styled(StyledOption).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4',
   as: 'a'
 }).withConfig({
   displayName: "StyledItemAnchor",