@zendeskgarden/react-dropdowns 9.0.0-next.11 → 9.0.0-next.13

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

@@ -43,7 +43,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { Listbox } from './Listbox.js';
 import { TagGroup } from './TagGroup.js';

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

@@ -36,7 +36,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { Hint } from './Hint.js';
 import { Label } from './Label.js';

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

@@ -36,7 +36,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const Hint = forwardRef((props, ref) => {

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

@@ -38,7 +38,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const Label = forwardRef((_ref, ref) => {

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

@@ -38,7 +38,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { ThemeContext } from 'styled-components';
 import { DEFAULT_THEME } from '@zendeskgarden/react-theming';

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

@@ -38,7 +38,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const Message = forwardRef((props, ref) => {

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

@@ -39,7 +39,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const OptGroup = forwardRef((_ref, ref) => {

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

@@ -44,7 +44,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { OptionMeta } from './OptionMeta.js';
 import { toOption } from './utils.js';
@@ -62,8 +61,9 @@ const OptionComponent = forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const contextValue = useMemo(() => ({
-    isDisabled
-  }), [isDisabled]);
+    isDisabled,
+    type
+  }), [isDisabled, type]);
   const {
     activeValue,
     getOptionProps,
@@ -114,7 +114,10 @@ const OptionComponent = forwardRef((_ref, ref) => {
   }, props, optionProps), React__default.createElement(StyledOptionTypeIcon, {
     $isCompact: isCompact,
     $type: type
-  }, renderActionIcon(type)), icon && React__default.createElement(StyledOptionIcon, null, icon), React__default.createElement(StyledOptionContent, null, children || label || value)));
+  }, renderActionIcon(type)), icon && React__default.createElement(StyledOptionIcon, {
+    $isDisabled: isDisabled,
+    $type: type
+  }, icon), React__default.createElement(StyledOptionContent, null, children || label || value)));
 });
 OptionComponent.displayName = 'Option';
 OptionComponent.propTypes = {

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

@@ -36,7 +36,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const OptionMetaComponent = forwardRef((props, ref) => {

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

@@ -40,7 +40,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { TagAvatar } from './TagAvatar.js';
 

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

@@ -42,7 +42,6 @@ import '../../views/menu/StyledItemGroup.js';
 import { StyledItemIcon } from '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import { StyledItemTypeIcon } from '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { ItemMeta } from './ItemMeta.js';
 import useMenuContext from '../../context/useMenuContext.js';
@@ -70,7 +69,8 @@ const ItemComponent = forwardRef((_ref, ref) => {
   } = useItemGroupContext();
   const {
     focusedValue,
-    getItemProps
+    getItemProps,
+    isCompact
   } = useMenuContext();
   const item = {
     ...toItem({
@@ -93,9 +93,6 @@ const ItemComponent = forwardRef((_ref, ref) => {
     onMouseEnter
   });
   const isActive = value === focusedValue;
-  const {
-    isCompact
-  } = useMenuContext();
   const renderActionIcon = iconType => {
     switch (iconType) {
       case 'add':
@@ -109,8 +106,9 @@ const ItemComponent = forwardRef((_ref, ref) => {
     }
   };
   const contextValue = useMemo(() => ({
-    isDisabled
-  }), [isDisabled]);
+    isDisabled,
+    type
+  }), [isDisabled, type]);
   return React__default.createElement(ItemContext.Provider, {
     value: contextValue
   }, React__default.createElement(StyledItem, Object.assign({
@@ -122,7 +120,10 @@ const ItemComponent = forwardRef((_ref, ref) => {
   }), React__default.createElement(StyledItemTypeIcon, {
     $isCompact: isCompact,
     $type: type
-  }, renderActionIcon(type)), icon && React__default.createElement(StyledItemIcon, null, icon), React__default.createElement(StyledItemContent, null, children || label)));
+  }, renderActionIcon(type)), icon && React__default.createElement(StyledItemIcon, {
+    $isDisabled: isDisabled,
+    $type: type
+  }, icon), React__default.createElement(StyledItemContent, null, children || label)));
 });
 ItemComponent.displayName = 'Item';
 ItemComponent.propTypes = {

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

@@ -38,7 +38,6 @@ import { StyledItemGroup } from '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import { StyledItemTypeIcon } from '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import { StyledSeparator } from '../../views/menu/StyledSeparator.js';
 import { ItemGroupContext } from '../../context/useItemGroupContext.js';
 

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

@@ -36,7 +36,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import { StyledItemMeta } from '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 
 const ItemMetaComponent = forwardRef((props, ref) => {

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

@@ -10,42 +10,11 @@ import { mergeRefs } from 'react-merge-refs';
 import { ThemeContext } from 'styled-components';
 import { useMenu } from '@zendeskgarden/container-menu';
 import { DEFAULT_THEME, useWindow } from '@zendeskgarden/react-theming';
+import { Button } from '@zendeskgarden/react-buttons';
 import { PLACEMENT } from '../../types/index.js';
 import { MenuContext } from '../../context/useMenuContext.js';
 import { toItems } from './utils.js';
 import { MenuList } from './MenuList.js';
-import '../../views/combobox/StyledCombobox.js';
-import '../../views/combobox/StyledContainer.js';
-import '../../views/combobox/StyledField.js';
-import '../../views/combobox/StyledFloatingListbox.js';
-import '../../views/combobox/StyledHint.js';
-import '../../views/combobox/StyledInput.js';
-import '../../views/combobox/StyledInputGroup.js';
-import '../../views/combobox/StyledInputIcon.js';
-import '../../views/combobox/StyledLabel.js';
-import '../../views/combobox/StyledListbox.js';
-import '../../views/combobox/StyledListboxSeparator.js';
-import '../../views/combobox/StyledMessage.js';
-import '../../views/combobox/StyledOptGroup.js';
-import '../../views/combobox/StyledOption.js';
-import '../../views/combobox/StyledOptionContent.js';
-import '../../views/combobox/StyledOptionIcon.js';
-import '../../views/combobox/StyledOptionMeta.js';
-import '../../views/combobox/StyledOptionTypeIcon.js';
-import '../../views/combobox/StyledTag.js';
-import '../../views/combobox/StyledTagsButton.js';
-import '../../views/combobox/StyledTrigger.js';
-import '../../views/combobox/StyledValue.js';
-import '../../views/menu/StyledMenu.js';
-import '../../views/menu/StyledFloatingMenu.js';
-import '../../views/menu/StyledItem.js';
-import '../../views/menu/StyledItemContent.js';
-import '../../views/menu/StyledItemGroup.js';
-import '../../views/menu/StyledItemIcon.js';
-import '../../views/menu/StyledItemMeta.js';
-import '../../views/menu/StyledItemTypeIcon.js';
-import { StyledButton } from '../../views/menu/StyledButton.js';
-import '../../views/menu/StyledSeparator.js';
 import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 
 const Menu = forwardRef((_ref, ref) => {
@@ -108,7 +77,7 @@ const Menu = forwardRef((_ref, ref) => {
     }),
     ref: mergeRefs([triggerRef, ref])
   };
-  const trigger = typeof button === 'function' ? button(triggerProps) : React__default.createElement(StyledButton, triggerProps, button, React__default.createElement(StyledButton.EndIcon, {
+  const trigger = typeof button === 'function' ? button(triggerProps) : React__default.createElement(Button, triggerProps, button, React__default.createElement(Button.EndIcon, {
     isRotated: isExpanded
   }, React__default.createElement(SvgChevronDownStroke, null)));
   const contextValue = useMemo(() => ({

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

@@ -40,7 +40,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import '../../views/menu/StyledSeparator.js';
 import { createPortal } from 'react-dom';
 

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

@@ -35,7 +35,6 @@ import '../../views/menu/StyledItemGroup.js';
 import '../../views/menu/StyledItemIcon.js';
 import '../../views/menu/StyledItemMeta.js';
 import '../../views/menu/StyledItemTypeIcon.js';
-import '../../views/menu/StyledButton.js';
 import { StyledSeparator } from '../../views/menu/StyledSeparator.js';
 import useMenuContext from '../../context/useMenuContext.js';
 

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 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.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 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 SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 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 SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 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 SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 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 SvgPlusStroke = function SvgPlusStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

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

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

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

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

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

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

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

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

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

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

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

@@ -6,11 +6,17 @@
 */
 import styled, { css } from 'styled-components';
 import { hideVisually, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.input';
-const colorStyles = props => {
-  const placeholderColor = getColorV8('neutralHue', 400, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const placeholderColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
   return css(["background-color:inherit;color:inherit;&::placeholder{opacity:1;color:", ";}"], placeholderColor);
 };
 const getHeight = props => {
@@ -29,7 +35,7 @@ const sizeStyles = props => {
 };
 const StyledInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"

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

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

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

@@ -6,16 +6,35 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { getHeight } from './StyledInput.js';
 import { StyledTrigger } from './StyledTrigger.js';
 
 const COMPONENT_ID = 'dropdowns.combobox.input_icon';
-const colorStyles = props => {
-  const color = getColorV8('neutralHue', 600, props.theme);
-  const focusColor = getColorV8('neutralHue', 700, props.theme);
-  const disabledColor = getColorV8('neutralHue', 400, props.theme);
-  return css(["color:", ";", ":hover &,", ":focus-within &,", ":focus &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.$isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isLabelHovered
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const color = getColor(options);
+  const focusColor = getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const disabledColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  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 size = props.theme.iconSizes.md;
@@ -31,7 +50,7 @@ const sizeStyles = props => {
 };
 const StyledInputIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"

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

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

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

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

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

@@ -5,11 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.separator';
-const colorStyles = props => {
-  const backgroundColor = getColorV8('neutralHue', 200, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'border.subtle'
+  });
   return css(["background-color:", ";"], backgroundColor);
 };
 const sizeStyles = props => {
@@ -19,7 +25,7 @@ const sizeStyles = props => {
 };
 const StyledListboxSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"

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

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

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

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

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

@@ -6,24 +6,45 @@
 */
 import styled, { css } from 'styled-components';
 import { hideVisually, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.option';
-const colorStyles = props => {
+const colorStyles = _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 = getColorV8(hue, 600, props.theme, 0.08);
-    boxShadow = `inset ${props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md} 0 ${getColorV8(hue, 600, props.theme)}`;
+  if (isActive && $type !== 'group' && $type !== 'header') {
+    const variable = 'background.primaryEmphasis';
+    backgroundColor = getColor({
+      theme,
+      variable,
+      transparency: theme.opacity[100]
+    });
+    boxShadow = `inset ${theme.rtl ? `-${theme.shadowWidths.md}` : theme.shadowWidths.md} 0 ${getColor({
+      theme,
+      variable
+    })}`;
   }
-  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
-  let foregroundColor = getColorV8('foreground', 600 , props.theme);
-  if (props.$type === 'add') {
-    foregroundColor = getColorV8('primaryHue', 600, props.theme);
-  } else if (props.$type === 'danger') {
-    foregroundColor = 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 = getColor({
+    theme,
+    variable: foregroundVariable
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
   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);
@@ -36,7 +57,7 @@ const sizeStyles = props => {
 };
 const StyledOption = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.13'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"

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

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