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

package/dist/index.cjs.js

@@ -14,13 +14,13 @@ var reactTheming = require('@zendeskgarden/react-theming');
 var reactForms = require('@zendeskgarden/react-forms');
 var polished = require('polished');
 var reactTags = require('@zendeskgarden/react-tags');
-var reactButtons = require('@zendeskgarden/react-buttons');
 var reactDom$1 = require('react-dom');
 var reactDom = require('@floating-ui/react-dom');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
 var reactMergeRefs = require('react-merge-refs');
 var containerMenu = require('@zendeskgarden/container-menu');
+var reactButtons = require('@zendeskgarden/react-buttons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -47,7 +47,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _path$4;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
@@ -80,110 +80,95 @@ const useFieldContext = () => {
   return context;
 };
 
-const COMPONENT_ID$v = 'dropdowns.combobox.label';
+const COMPONENT_ID$u = '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.9'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
-})(["vertical-align:revert;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
-StyledLabel.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["vertical-align:revert;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
 
-const COMPONENT_ID$u = 'dropdowns.combobox.hint';
+const COMPONENT_ID$t = '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.9'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
-StyledHint.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
 
-const COMPONENT_ID$t = 'dropdowns.combobox.message';
+const COMPONENT_ID$s = '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.9'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
-StyledMessage.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 
-const COMPONENT_ID$s = 'dropdowns.combobox';
+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$s,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
-})(["", ";", ";"], sizeStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
-StyledCombobox.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";", ";"], sizeStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
 
-const COMPONENT_ID$r = 'dropdowns.combobox.container';
+const COMPONENT_ID$q = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
-})(["display:flex;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
-StyledContainer.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
 
-const COMPONENT_ID$q = 'dropdowns.combobox.field';
+const COMPONENT_ID$p = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
-})(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
-StyledField.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
 
-const COMPONENT_ID$p = 'dropdowns.combobox.floating';
+const COMPONENT_ID$o = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$o,
+  '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
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
-StyledFloatingListbox.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+  zIndex: props.$zIndex
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
 
-const COMPONENT_ID$o = 'dropdowns.combobox.input';
-const colorStyles$8 = props => {
-  const placeholderColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
+const COMPONENT_ID$n = 'dropdowns.combobox.input';
+const colorStyles$9 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const placeholderColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
   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;
@@ -194,89 +179,114 @@ const sizeStyles$9 = props => {
   return styled.css(["min-width:", ";height:", "px;line-height:", ";font-size:", ";&&{margin-top:", ";margin-bottom:", ";}"], minWidth, height, lineHeight, fontSize, margin, margin);
 };
 const StyledInput = styled__default.default.input.attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$n,
+  '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$8, props => props.isEditable && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
-StyledInput.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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$n = 'dropdowns.combobox.input_group';
+const COMPONENT_ID$m = 'dropdowns.combobox.input_group';
 const sizeStyles$8 = props => {
   const margin = props.theme.shadowWidths.sm;
   return styled.css(["margin:-", ";min-width:0;& > *{margin:", ";}"], margin, margin);
 };
 const StyledInputGroup = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
-})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
-StyledInputGroup.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 
-const COMPONENT_ID$m = 'dropdowns.combobox.trigger';
-const colorStyles$7 = props => {
-  const SHADE = 600;
-  let hue = 'neutralHue';
-  if (props.validation === 'success') {
-    hue = 'successHue';
-  } else if (props.validation === 'warning') {
-    hue = 'warningHue';
-  } else if (props.validation === 'error') {
-    hue = 'dangerHue';
-  }
-  const backgroundColor = props.isBare ? 'transparent' : reactTheming.getColorV8('background', 600 , props.theme);
+const COMPONENT_ID$l = 'dropdowns.combobox.trigger';
+const colorStyles$8 = _ref => {
+  let {
+    theme,
+    $validation,
+    $isBare,
+    $isLabelHovered,
+    $focusInset
+  } = _ref;
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const backgroundColor = $isBare ? 'transparent' : reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
   let borderColor;
+  let borderVariable;
   let hoverBorderColor;
   let focusBorderColor;
-  let focusShade;
-  if (props.validation) {
-    borderColor = reactTheming.getColorV8(hue, SHADE, props.theme);
-    hoverBorderColor = borderColor;
-    if (props.validation === 'warning') {
-      focusBorderColor = reactTheming.getColorV8(hue, SHADE + 100, props.theme);
-      focusShade = SHADE + 100;
-    } else {
-      focusBorderColor = borderColor;
+  if ($validation) {
+    if ($validation === 'success') {
+      borderVariable = 'border.successEmphasis';
+    } else if ($validation === 'warning') {
+      borderVariable = 'border.warningEmphasis';
+    } else if ($validation === 'error') {
+      borderVariable = 'border.dangerEmphasis';
     }
+    borderColor = reactTheming.getColor({
+      theme,
+      variable: borderVariable
+    });
+    hoverBorderColor = borderColor;
+    focusBorderColor = borderColor;
   } else {
-    borderColor = reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme);
+    borderColor = reactTheming.getColor({
+      theme,
+      variable: 'border.default',
+      dark: {
+        offset: -100
+      },
+      light: {
+        offset: 100
+      }
+    });
+    borderVariable = 'border.primaryEmphasis';
+    hoverBorderColor = reactTheming.getColor({
+      theme,
+      variable: borderVariable
+    });
     focusBorderColor = hoverBorderColor;
   }
-  const disabledBackgroundColor = props.isBare ? undefined : reactTheming.getColorV8('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = reactTheming.getColorV8('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = reactTheming.getColorV8('neutralHue', SHADE - 200, props.theme);
+  const disabledBackgroundColor = $isBare ? undefined : reactTheming.getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledForegroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
   const focusSelector = `
     &:focus-within:not([aria-disabled='true']),
     &:focus-visible
   `;
-  return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, reactTheming.getColorV8('foreground', 600 , props.theme), hoverBorderColor, reactTheming.focusStyles({
-    theme: props.theme,
-    inset: props.focusInset,
+  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,
     color: {
-      hue: focusBorderColor,
-      shade: focusShade
+      variable: borderVariable
     },
     selector: focusSelector,
     styles: {
       borderColor: focusBorderColor
     },
-    condition: !props.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 {
@@ -284,30 +294,46 @@ 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$m,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
-})(["overflow-y:auto;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 ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => !props.isAutocomplete && props.isEditable ? 'text' : 'pointer', sizeStyles$7, colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
-StyledTrigger.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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$l = 'dropdowns.combobox.input_icon';
-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);
+const COMPONENT_ID$k = 'dropdowns.combobox.input_icon';
+const colorStyles$7 = _ref => {
+  let {
+    theme,
+    $isLabelHovered
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const color = reactTheming.getColor(options);
+  const focusColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const disabledColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return styled.css(["color:", ";", ":hover &&,", ":focus-within &&,", ":focus &&{color:", ";}", "[aria-disabled='true'] &&{color:", ";}"], $isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
 };
 const sizeStyles$6 = props => {
   const size = props.theme.iconSizes.md;
@@ -322,35 +348,53 @@ const sizeStyles$6 = props => {
   return styled.css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
 };
 const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.1.0'
 }).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));
-StyledInputIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 
-const COMPONENT_ID$k = 'dropdowns.combobox.option';
-const colorStyles$5 = props => {
+const COMPONENT_ID$j = 'dropdowns.combobox.option';
+const colorStyles$6 = _ref => {
+  let {
+    theme,
+    $isActive,
+    $type
+  } = _ref;
   let backgroundColor;
   let boxShadow;
-  if (props.isActive && props.$type !== 'group' && props.$type !== 'header') {
-    const hue = props.$type === 'danger' ? 'dangerHue' : 'primaryHue';
-    backgroundColor = reactTheming.getColorV8(hue, 600, props.theme, 0.08);
-    boxShadow = `inset ${props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md} 0 ${reactTheming.getColorV8(hue, 600, props.theme)}`;
+  if ($isActive && $type !== 'group' && $type !== 'header') {
+    const variable = 'background.primaryEmphasis';
+    backgroundColor = reactTheming.getColor({
+      theme,
+      variable,
+      transparency: theme.opacity[100]
+    });
+    boxShadow = `inset ${theme.rtl ? `-${theme.shadowWidths.md}` : theme.shadowWidths.md} 0 ${reactTheming.getColor({
+      theme,
+      variable
+    })}`;
   }
-  const disabledForegroundColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
-  let foregroundColor = reactTheming.getColorV8('foreground', 600 , props.theme);
-  if (props.$type === 'add') {
-    foregroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
-  } else if (props.$type === 'danger') {
-    foregroundColor = reactTheming.getColorV8('dangerHue', 600, props.theme);
+  let foregroundVariable;
+  if ($type === 'add') {
+    foregroundVariable = 'foreground.primary';
+  } else if ($type === 'danger') {
+    foregroundVariable = 'foreground.danger';
+  } else {
+    foregroundVariable = 'foreground.default';
   }
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: foregroundVariable
+  });
+  const disabledForegroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
   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);
@@ -359,43 +403,40 @@ const sizeStyles$5 = props => {
   return styled.css(["box-sizing:border-box;padding:", " ", ";min-height:", "px;line-height:", ";"], paddingVertical, paddingHorizontal, minHeight, lineHeight);
 };
 const StyledOption = styled__default.default.li.attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.1.0'
 }).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$5, colorStyles$5, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
-StyledOption.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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$5, colorStyles$6, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 
-const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
+const COMPONENT_ID$i = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
-})(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
-StyledOptionContent.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 
-const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
+const COMPONENT_ID$h = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
-})(["margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
-StyledOptGroup.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 
-const COMPONENT_ID$h = 'dropdowns.combobox.separator';
-const colorStyles$4 = props => {
-  const backgroundColor = reactTheming.getColorV8('neutralHue', 200, props.theme);
+const COMPONENT_ID$g = 'dropdowns.combobox.separator';
+const colorStyles$5 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'border.subtle'
+  });
   return styled.css(["background-color:", ";"], backgroundColor);
 };
 const sizeStyles$4 = props => {
@@ -404,34 +445,50 @@ const sizeStyles$4 = props => {
   return styled.css(["margin:", " 0;height:", ";"], margin, height);
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
-})(["cursor:default;", ";", ";", ";"], sizeStyles$4, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
-StyledListboxSeparator.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["cursor:default;", ";", ";", ";"], sizeStyles$4, colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 
-const COMPONENT_ID$g = 'dropdowns.combobox.listbox';
+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$g,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.1.0'
 }).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$3, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
-StyledListbox.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
-const COMPONENT_ID$f = 'dropdowns.combobox.option.icon';
+const COMPONENT_ID$e = 'dropdowns.combobox.option.icon';
+const colorStyles$4 = _ref => {
+  let {
+    theme,
+    $isDisabled,
+    $type
+  } = _ref;
+  let variable;
+  if ($isDisabled) {
+    variable = 'foreground.disabled';
+  } else if ($type === 'danger') {
+    variable = 'foreground.danger';
+  } else if ($type === 'add') {
+    variable = 'foreground.primary';
+  } else {
+    variable = 'foreground.subtle';
+  }
+  const color = reactTheming.getColor({
+    theme,
+    variable
+  });
+  return styled.css(["color:", ";"], color);
+};
 const sizeStyles$2 = props => {
   const size = props.theme.iconSizes.md;
   const marginTop = polished.math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
@@ -439,19 +496,24 @@ const sizeStyles$2 = props => {
   return styled.css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
 const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledOptionIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$2, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 
-const COMPONENT_ID$e = 'dropdowns.combobox.option.meta';
-const colorStyles$3 = props => {
-  const color = reactTheming.getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme);
+const COMPONENT_ID$d = 'dropdowns.combobox.option.meta';
+const colorStyles$3 = _ref => {
+  let {
+    theme,
+    $isDisabled
+  } = _ref;
+  const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
+  const color = reactTheming.getColor({
+    theme,
+    variable
+  });
   return styled.css(["color:", ";"], color);
 };
 const sizeStyles$1 = props => {
@@ -460,26 +522,33 @@ const sizeStyles$1 = props => {
   return styled.css(["line-height:", ";font-size:", ";"], lineHeight, fontSize);
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
-})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$1, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledOptionMeta.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$1, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 
-const COMPONENT_ID$d = 'dropdowns.combobox.option.type_icon';
-const colorStyles$2 = props => {
-  const opacity = props.$type && props.$type !== 'danger' ? 1 : 0;
+const COMPONENT_ID$c = 'dropdowns.combobox.option.type_icon';
+const colorStyles$2 = _ref => {
+  let {
+    theme,
+    $type
+  } = _ref;
+  const opacity = $type && $type !== 'danger' ? 1 : 0;
   let color;
-  if (props.$type === 'add' || props.$type === 'danger') {
+  if ($type === 'add') {
     color = 'inherit';
-  } else if (props.$type === 'header' || props.$type === 'next' || props.$type === 'previous') {
-    color = reactTheming.getColorV8('neutralHue', 600, props.theme);
+  } else if ($type === 'header' || $type === 'next' || $type === 'previous') {
+    color = reactTheming.getColor({
+      theme,
+      variable: 'foreground.subtle'
+    });
   } else {
-    color = reactTheming.getColorV8('primaryHue', 600, props.theme);
+    color = reactTheming.getColor({
+      theme,
+      variable: 'foreground.primary'
+    });
   }
   return styled.css(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption);
 };
@@ -496,189 +565,154 @@ const sizeStyles = props => {
   return styled.css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
 };
 const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.1.0'
 }).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));
-StyledOptionTypeIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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$c, props));
 
-const COMPONENT_ID$c = 'dropdowns.combobox.tag';
+const COMPONENT_ID$b = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
-})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : reactTheming.getColorV8('neutralHue', 400, props.theme), polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledTag.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.disabled'
+}), polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 
-const COMPONENT_ID$b = 'dropdowns.combobox.value';
-const colorStyles$1 = props => {
-  const foregroundColor = props.isPlaceholder && reactTheming.getColorV8('neutralHue', 400, props.theme);
+const COMPONENT_ID$a = 'dropdowns.combobox.value';
+const colorStyles$1 = _ref => {
+  let {
+    theme,
+    $isPlaceholder
+  } = _ref;
+  const foregroundColor = $isPlaceholder && reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
   return styled.css(["color:", ";"], foregroundColor);
 };
 const StyledValue = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$a,
+  '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';
-}, sizeStyles$9, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledValue.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+  return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
+}, sizeStyles$9, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 
-const COMPONENT_ID$a = 'dropdowns.combobox.tags_button';
-const colorStyles = props => {
-  const color = reactTheming.getColorV8('primaryHue', 600, props.theme);
+const COMPONENT_ID$9 = 'dropdowns.combobox.tags_button';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = reactTheming.getColor({
+    theme,
+    variable: 'foreground.primary'
+  });
   return styled.css(["color:", ";&:disabled{color:inherit;}"], color);
 };
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
-})(["display:inline-flex;flex:0 1 auto;align-items:center;border:none;background-color:transparent;cursor:pointer;min-width:auto;font-family:inherit;&:hover{text-decoration:underline;}", ";&:disabled{cursor:default;text-decoration:none;}", ";"], colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledTagsButton.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:inline-flex;flex:0 1 auto;align-items:center;border:none;background-color:transparent;cursor:pointer;min-width:auto;font-family:inherit;&:hover{text-decoration:underline;}", ";&:disabled{cursor:default;text-decoration:none;}", ";"], colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 
-const COMPONENT_ID$9 = 'dropdowns.menu';
+const COMPONENT_ID$8 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
-})(["position:static !important;", ";", ";"], props => props.arrowPosition && reactTheming.arrowStyles(props.arrowPosition, {
-  size: `${props.theme.space.base * 2}px`,
-  inset: '2px',
+})(["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"]'
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledMenu.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 
-const COMPONENT_ID$8 = 'dropdowns.menu.floating';
+const COMPONENT_ID$7 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledFloatingMenu.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 
-const COMPONENT_ID$7 = 'dropdowns.menu.item';
+const COMPONENT_ID$6 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 
-const COMPONENT_ID$6 = 'dropdowns.menu.item.content';
+const COMPONENT_ID$5 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledItemContent.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 
-const COMPONENT_ID$5 = 'dropdowns.menu.item_group';
+const COMPONENT_ID$4 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledItemGroup.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 
-const COMPONENT_ID$4 = 'dropdowns.menu.item.icon';
+const COMPONENT_ID$3 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledItemIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 
-const COMPONENT_ID$3 = 'dropdowns.menu.item.meta';
+const COMPONENT_ID$2 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledItemMeta.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 
-const COMPONENT_ID$2 = 'dropdowns.menu.item.type_icon';
+const COMPONENT_ID$1 = '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.9'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
-})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledItemTypeIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-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.9'
-}).withConfig({
-  displayName: "StyledButton",
-  componentId: "sc-5hs2jg-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledButton.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["", "[aria-checked='true'] > &{opacity:1;}", ";"], StyledItem, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 
 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.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
 })(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledSeparator.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const Listbox = React.forwardRef((_ref, ref) => {
   let {
@@ -757,25 +791,25 @@ 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
     }
   }, props, {
     ref: ref
-  }), isVisible && children));
+  }), !!isVisible && children));
   return appendToNode ? reactDom$1.createPortal(Node, appendToNode) : Node;
 });
 Listbox.displayName = 'Listbox';
@@ -879,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;
@@ -1010,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
@@ -1085,14 +1104,24 @@ 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, {
+  }, startIcon), React__namespace.default.createElement(StyledInputGroup, null, !!isMultiselectable && Array.isArray(selection) && React__namespace.default.createElement(TagGroup, {
     isDisabled: isDisabled,
     isExpanded: isTagGroupExpanded,
     maxTags: maxTags,
@@ -1101,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"
   }, (() => {
@@ -1109,21 +1138,26 @@ 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,
-    $isRotated: hasChevron && isExpanded
+    $isRotated: !!(hasChevron && isExpanded)
   }, hasChevron ? React__namespace.default.createElement(SvgChevronDownStroke, null) : endIcon))), React__namespace.default.createElement(Listbox, Object.assign({
     appendToNode: listboxAppendToNode,
     isCompact: isCompact,
@@ -1186,7 +1220,7 @@ const Hint = React.forwardRef((props, ref) => {
     ref: ref
   }));
 });
-Hint.displayName = 'Hint';
+Hint.displayName = 'Field.Hint';
 
 const Label = React.forwardRef((_ref, ref) => {
   let {
@@ -1206,7 +1240,7 @@ const Label = React.forwardRef((_ref, ref) => {
     ref: ref
   }));
 });
-Label.displayName = 'Label';
+Label.displayName = 'Field.Label';
 Label.propTypes = {
   hidden: PropTypes__default.default.bool,
   isRegular: PropTypes__default.default.bool
@@ -1225,7 +1259,7 @@ const Message = React.forwardRef((props, ref) => {
     ref: ref
   }));
 });
-Message.displayName = 'Message';
+Message.displayName = 'Field.Message';
 Message.propTypes = {
   validation: PropTypes__default.default.oneOf(reactForms.VALIDATION),
   validationLabel: PropTypes__default.default.string
@@ -1262,7 +1296,7 @@ Field.Label = Label;
 Field.Message = Message;
 
 var _path$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgPlusStroke = function SvgPlusStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1279,7 +1313,7 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
 };
 
 var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1295,7 +1329,7 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
 };
 
 var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1311,7 +1345,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 };
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1346,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
   }));
@@ -1367,8 +1401,9 @@ const OptionComponent = React.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const contextValue = React.useMemo(() => ({
-    isDisabled
-  }), [isDisabled]);
+    isDisabled,
+    type
+  }), [isDisabled, type]);
   const {
     activeValue,
     getOptionProps,
@@ -1413,13 +1448,16 @@ 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,
     $type: type
-  }, renderActionIcon(type)), icon && React__namespace.default.createElement(StyledOptionIcon, null, icon), React__namespace.default.createElement(StyledOptionContent, null, children || label || value)));
+  }, renderActionIcon(type)), !!icon && React__namespace.default.createElement(StyledOptionIcon, {
+    $isDisabled: isDisabled,
+    $type: type
+  }, icon), React__namespace.default.createElement(StyledOptionContent, null, children || label || value)));
 });
 OptionComponent.displayName = 'Option';
 OptionComponent.propTypes = {
@@ -1457,21 +1495,21 @@ 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"
   }, props, {
     ref: ref
-  }), React__namespace.default.createElement(StyledOptionContent, null, (content || legend) && React__namespace.default.createElement(StyledOption, {
+  }), 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, {
+  }, !!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)));
@@ -1516,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,
@@ -1622,25 +1660,25 @@ const MenuList = React.forwardRef((_ref, ref) => {
   children, update]);
   const Node = React__namespace.default.createElement(StyledFloatingMenu, {
     "data-garden-animate": isVisible,
-    isHidden: !isExpanded,
-    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
     }
   }, props, {
     ref: ref
-  }), isVisible && children));
+  }), !!isVisible && children));
   return appendToNode ? reactDom$1.createPortal(Node, appendToNode) : Node;
 });
 MenuList.displayName = 'MenuList';
@@ -1661,7 +1699,7 @@ MenuList.defaultProps = {
   zIndex: 1000
 };
 
-const Menu = React.forwardRef((_ref, ref) => {
+const Menu = React.forwardRef((_ref2, ref) => {
   let {
     button,
     buttonProps: _buttonProps = {},
@@ -1671,11 +1709,12 @@ const Menu = React.forwardRef((_ref, ref) => {
     defaultFocusedValue,
     defaultExpanded,
     isExpanded: _isExpanded,
+    restoreFocus,
     selectedItems,
     onChange,
     onMouseLeave,
     ...props
-  } = _ref;
+  } = _ref2;
   const triggerRef = React.useRef(null);
   const menuRef = React.useRef(null);
   const items = toItems(children);
@@ -1696,6 +1735,7 @@ const Menu = React.forwardRef((_ref, ref) => {
     focusedValue: _focusedValue,
     defaultExpanded,
     isExpanded: _isExpanded,
+    restoreFocus,
     selectedItems,
     items,
     menuRef,
@@ -1706,6 +1746,7 @@ const Menu = React.forwardRef((_ref, ref) => {
     onClick,
     onKeyDown,
     disabled,
+    ref: _ref,
     ...buttonProps
   } = _buttonProps;
   const triggerProps = {
@@ -1719,9 +1760,9 @@ const Menu = React.forwardRef((_ref, ref) => {
       onKeyDown,
       disabled
     }),
-    ref: reactMergeRefs.mergeRefs([triggerRef, ref])
+    ref: reactMergeRefs.mergeRefs([triggerRef, _ref])
   };
-  const trigger = typeof button === 'function' ? button(triggerProps) : React__namespace.default.createElement(StyledButton, triggerProps, button, React__namespace.default.createElement(StyledButton.EndIcon, {
+  const trigger = typeof button === 'function' ? button(triggerProps) : React__namespace.default.createElement(reactButtons.Button, triggerProps, button, React__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: isExpanded
   }, React__namespace.default.createElement(SvgChevronDownStroke, null)));
   const contextValue = React.useMemo(() => ({
@@ -1758,6 +1799,7 @@ Menu.propTypes = {
   minHeight: PropTypes__default.default.string,
   onChange: PropTypes__default.default.func,
   placement: PropTypes__default.default.oneOf(PLACEMENT),
+  restoreFocus: PropTypes__default.default.bool,
   selectedItems: PropTypes__default.default.arrayOf(PropTypes__default.default.any),
   zIndex: PropTypes__default.default.number
 };
@@ -1798,19 +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, {
+  }), 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, {
+  }, !!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))));
@@ -1837,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
   }));
@@ -1865,7 +1908,8 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
   } = useItemGroupContext();
   const {
     focusedValue,
-    getItemProps
+    getItemProps,
+    isCompact
   } = useMenuContext();
   const item = {
     ...toItem({
@@ -1888,9 +1932,6 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
     onMouseEnter
   });
   const isActive = value === focusedValue;
-  const {
-    isCompact
-  } = useMenuContext();
   const renderActionIcon = iconType => {
     switch (iconType) {
       case 'add':
@@ -1904,20 +1945,24 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
     }
   };
   const contextValue = React.useMemo(() => ({
-    isDisabled
-  }), [isDisabled]);
+    isDisabled,
+    type
+  }), [isDisabled, type]);
   return React__namespace.default.createElement(ItemContext.Provider, {
     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, {
     $isCompact: isCompact,
     $type: type
-  }, renderActionIcon(type)), icon && React__namespace.default.createElement(StyledItemIcon, null, icon), React__namespace.default.createElement(StyledItemContent, null, children || label)));
+  }, renderActionIcon(type)), !!icon && React__namespace.default.createElement(StyledItemIcon, {
+    $isDisabled: isDisabled,
+    $type: type
+  }, icon), React__namespace.default.createElement(StyledItemContent, null, children || label)));
 });
 ItemComponent.displayName = 'Item';
 ItemComponent.propTypes = {