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

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

@@ -5,26 +5,23 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledLabel } from './StyledLabel.js';
 import { StyledHint } from './StyledHint.js';
 import { StyledMessage } from './StyledMessage.js';
 
 const COMPONENT_ID = 'dropdowns.combobox';
 const sizeStyles = 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 css(["min-width:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], minWidth, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledCombobox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
 })(["", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCombobox.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCombobox };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.container';
 const StyledContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
 })(["display:flex;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledContainer.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledContainer };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
 })(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledField.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledField };

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

@@ -5,23 +5,20 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { menuStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { menuStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
-})(["top:0;left:0;", ";", ";"], props => menuStyles(props.position, {
+})(["top:0;left:0;", ";", ";"], props => menuStyles(props.$position, {
   theme: props.theme,
-  hidden: props.isHidden,
+  hidden: props.$isHidden,
   animationModifier: '[data-garden-animate="true"]',
-  zIndex: props.zIndex
+  zIndex: props.$zIndex
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledFloatingListbox.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledFloatingListbox };

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

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 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.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHint.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledHint };

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

@@ -6,18 +6,24 @@
 */
 import styled, { css } from 'styled-components';
 import { hideVisually, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, 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 => {
-  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 = props => {
   const height = props.theme.space.base * 5;
@@ -29,13 +35,10 @@ const sizeStyles = props => {
 };
 const StyledInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  '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, colorStyles, props => props.isEditable && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledInput.defaultProps = {
-  theme: 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, colorStyles, props => props.$isEditable && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledInput, getHeight, sizeStyles };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.input_group';
 const sizeStyles = props => {
@@ -14,13 +14,10 @@ const sizeStyles = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
 })(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledInputGroup.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledInputGroup };

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, 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,13 +50,10 @@ const sizeStyles = props => {
 };
 const StyledInputIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  '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, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledInputIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledInputIcon };

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

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 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.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
 })(["vertical-align:revert;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledLabel };

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

@@ -5,7 +5,6 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledOption, getMinHeight } from './StyledOption.js';
 import { StyledOptionContent } from './StyledOptionContent.js';
 import { StyledOptGroup } from './StyledOptGroup.js';
@@ -14,18 +13,15 @@ import { StyledListboxSeparator } from './StyledListboxSeparator.js';
 const COMPONENT_ID = 'dropdowns.combobox.listbox';
 const sizeStyles = props => {
   const padding = props.theme.space.base;
-  const minHeight = props.minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.minHeight;
-  return css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], minHeight, props.maxHeight, padding, padding);
+  const $minHeight = props.$minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.$minHeight;
+  return css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], $minHeight, props.$maxHeight, padding, padding);
 };
 const StyledListbox = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  '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, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
-StyledListbox.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledListbox };

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, 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,13 +25,10 @@ const sizeStyles = props => {
 };
 const StyledListboxSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
 })(["cursor:default;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledListboxSeparator.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledListboxSeparator };

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

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 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.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMessage.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMessage };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
 })(["margin:0;padding:0;list-style-type:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledOptGroup.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledOptGroup };

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

@@ -6,27 +6,48 @@
 */
 import styled, { css } from 'styled-components';
 import { hideVisually, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, 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);
+const getMinHeight = props => props.theme.space.base * (props.$isCompact ? 7 : 9);
 const sizeStyles = props => {
   const lineHeight = props.theme.lineHeights.md;
   const minHeight = getMinHeight(props);
@@ -36,13 +57,10 @@ const sizeStyles = props => {
 };
 const StyledOption = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  '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, colorStyles, hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledOption.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledOption, getMinHeight };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
 })(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledOptionContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledOptionContent };

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

@@ -6,9 +6,31 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.option.icon';
+const colorStyles = _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 = getColor({
+    theme,
+    variable
+  });
+  return css(["color:", ";"], color);
+};
 const sizeStyles = props => {
   const size = props.theme.iconSizes.md;
   const marginTop = math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
@@ -17,13 +39,10 @@ const sizeStyles = props => {
 };
 const StyledOptionIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledOptionIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledOptionIcon };

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

@@ -5,11 +5,19 @@
 * 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, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.combobox.option.meta';
-const colorStyles = props => {
-  const color = getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isDisabled
+  } = _ref;
+  const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
+  const color = getColor({
+    theme,
+    variable
+  });
   return css(["color:", ";"], color);
 };
 const sizeStyles = props => {
@@ -19,13 +27,10 @@ const sizeStyles = props => {
 };
 const StyledOptionMeta = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  '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, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledOptionMeta.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledOptionMeta };