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

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

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.11'
+}).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

@@ -0,0 +1,27 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { menuStyles, retrieveComponentStyles, DEFAULT_THEME } 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.11'
+}).withConfig({
+  displayName: "StyledFloatingListbox",
+  componentId: "sc-1cp6spf-0"
+})(["top:0;left:0;", ";", ";"], props => menuStyles(props.position, {
+  theme: props.theme,
+  hidden: props.isHidden,
+  animationModifier: '[data-garden-animate="true"]',
+  zIndex: props.zIndex
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFloatingListbox.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFloatingListbox };

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

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.11'
+}).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

@@ -0,0 +1,41 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { hideVisually, math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropdowns.combobox.input';
+const colorStyles = props => {
+  const placeholderColor = getColorV8('neutralHue', 400, props.theme);
+  return css(["background-color:inherit;color:inherit;&::placeholder{opacity:1;color:", ";}"], placeholderColor);
+};
+const getHeight = props => {
+  if (props.isBare && !props.isMultiselectable) {
+    return props.theme.space.base * 5;
+  }
+  return props.theme.space.base * (props.isCompact ? 5 : 8);
+};
+const sizeStyles = props => {
+  const height = props.theme.space.base * 5;
+  const fontSize = props.theme.fontSizes.md;
+  const lineHeight = getLineHeight(height, fontSize);
+  const margin = math(`${props.theme.shadowWidths.sm} + ${(getHeight(props) - height) / 2}`);
+  const minWidth = `${props.theme.space.base * 8}px`;
+  return css(["min-width:", ";height:", "px;line-height:", ";font-size:", ";&&{margin-top:", ";margin-bottom:", ";}"], minWidth, height, lineHeight, fontSize, margin, margin);
+};
+const StyledInput = styled.input.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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
+};
+
+export { StyledInput, getHeight, sizeStyles };

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

@@ -0,0 +1,26 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropdowns.combobox.input_group';
+const sizeStyles = props => {
+  const margin = props.theme.shadowWidths.sm;
+  return css(["margin:-", ";min-width:0;& > *{margin:", ";}"], margin, margin);
+};
+const StyledInputGroup = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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

@@ -0,0 +1,43 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } 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 sizeStyles = props => {
+  const size = props.theme.iconSizes.md;
+  const position = math(`(${getHeight(props)} - ${size}) / 2`);
+  const margin = `${props.theme.space.base * 2}px`;
+  let side;
+  if (props.$isEnd) {
+    side = props.theme.rtl ? 'right' : 'left';
+  } else {
+    side = props.theme.rtl ? 'left' : 'right';
+  }
+  return css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
+};
+const StyledInputIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.11'
+}).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

@@ -0,0 +1,31 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* 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';
+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 StyledListbox = styled.ul.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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

@@ -0,0 +1,31 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* 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';
+
+const COMPONENT_ID = 'dropdowns.combobox.separator';
+const colorStyles = props => {
+  const backgroundColor = getColorV8('neutralHue', 200, props.theme);
+  return css(["background-color:", ";"], backgroundColor);
+};
+const sizeStyles = props => {
+  const margin = `${props.theme.space.base}px`;
+  const height = props.theme.borderWidths.sm;
+  return css(["margin:", " 0;height:", ";"], margin, height);
+};
+const StyledListboxSeparator = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.11'
+}).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

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.11'
+}).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

@@ -0,0 +1,48 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { hideVisually, math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropdowns.combobox.option';
+const colorStyles = props => {
+  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)}`;
+  }
+  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);
+  }
+  return css(["box-shadow:", ";background-color:", ";color:", ";&[aria-disabled='true']{background-color:transparent;color:", ";}"], boxShadow, backgroundColor, foregroundColor, disabledForegroundColor);
+};
+const getMinHeight = props => props.theme.space.base * (props.isCompact ? 7 : 9);
+const sizeStyles = props => {
+  const lineHeight = props.theme.lineHeights.md;
+  const minHeight = getMinHeight(props);
+  const paddingHorizontal = props.$type === 'group' ? 0 : `${props.theme.space.base * 9}px`;
+  const paddingVertical = props.$type === 'group' ? 0 : math(`(${minHeight} - ${lineHeight}) / 2`);
+  return css(["box-sizing:border-box;padding:", " ", ";min-height:", "px;line-height:", ";"], paddingVertical, paddingHorizontal, minHeight, lineHeight);
+};
+const StyledOption = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.11'
+}).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

@@ -0,0 +1,29 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'dropdowns.combobox.option.icon';
+const sizeStyles = props => {
+  const size = props.theme.iconSizes.md;
+  const marginTop = math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
+  const marginHorizontal = `${props.theme.space.base * 2}px`;
+  return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
+};
+const StyledOptionIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).withConfig({
+  displayName: "StyledOptionIcon",
+  componentId: "sc-qsab3y-0"
+})(["flex-shrink:0;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledOptionIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledOptionIcon };

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

@@ -0,0 +1,31 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* 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';
+
+const COMPONENT_ID = 'dropdowns.combobox.option.meta';
+const colorStyles = props => {
+  const color = getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme);
+  return css(["color:", ";"], color);
+};
+const sizeStyles = props => {
+  const lineHeight = props.theme.lineHeights.sm;
+  const fontSize = props.theme.fontSizes.sm;
+  return css(["line-height:", ";font-size:", ";"], lineHeight, fontSize);
+};
+const StyledOptionMeta = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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 };

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

@@ -0,0 +1,48 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledOption, getMinHeight } from './StyledOption.js';
+
+const COMPONENT_ID = 'dropdowns.combobox.option.type_icon';
+const colorStyles = props => {
+  const opacity = props.$type && props.$type !== 'danger' ? 1 : 0;
+  let color;
+  if (props.$type === 'add' || props.$type === 'danger') {
+    color = 'inherit';
+  } else if (props.$type === 'header' || props.$type === 'next' || props.$type === 'previous') {
+    color = getColorV8('neutralHue', 600, props.theme);
+  } else {
+    color = getColorV8('primaryHue', 600, props.theme);
+  }
+  return css(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption);
+};
+const sizeStyles = props => {
+  const size = props.theme.iconSizes.md;
+  const position = `${props.theme.space.base * 3}px`;
+  const top = math(`(${getMinHeight(props)} - ${size}) / 2`);
+  let side;
+  if (props.$type === 'next') {
+    side = props.theme.rtl ? 'left' : 'right';
+  } else {
+    side = props.theme.rtl ? 'right' : 'left';
+  }
+  return css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
+};
+const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledOptionTypeIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledOptionTypeIcon };

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

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { hideVisually } from 'polished';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { Tag } from '@zendeskgarden/react-tags';
+
+const COMPONENT_ID = 'dropdowns.combobox.tag';
+const StyledTag = styled(Tag).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).withConfig({
+  displayName: "StyledTag",
+  componentId: "sc-1alam0r-0"
+})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColorV8('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTag.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTag };

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

@@ -0,0 +1,28 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* 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 { StyledValue } from './StyledValue.js';
+
+const COMPONENT_ID = 'dropdowns.combobox.tags_button';
+const colorStyles = props => {
+  const color = getColorV8('primaryHue', 600, props.theme);
+  return css(["color:", ";&:disabled{color:inherit;}"], color);
+};
+const StyledTagsButton = styled(StyledValue).attrs({
+  as: 'button',
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTagsButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTagsButton };

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

@@ -0,0 +1,94 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { getHeight } from './StyledInput.js';
+
+const COMPONENT_ID = 'dropdowns.combobox.trigger';
+const colorStyles = 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' : getColorV8('background', 600 , props.theme);
+  let borderColor;
+  let hoverBorderColor;
+  let focusBorderColor;
+  let focusShade;
+  if (props.validation) {
+    borderColor = getColorV8(hue, SHADE, props.theme);
+    hoverBorderColor = borderColor;
+    if (props.validation === 'warning') {
+      focusBorderColor = getColorV8(hue, SHADE + 100, props.theme);
+      focusShade = SHADE + 100;
+    } else {
+      focusBorderColor = borderColor;
+    }
+  } else {
+    borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
+    hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
+    focusBorderColor = hoverBorderColor;
+  }
+  const disabledBackgroundColor = props.isBare ? undefined : getColorV8('neutralHue', SHADE - 500, props.theme);
+  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
+  const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);
+  const focusSelector = `
+    &:focus-within:not([aria-disabled='true']),
+    &:focus-visible
+  `;
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, getColorV8('foreground', 600 , props.theme), hoverBorderColor, focusStyles({
+    theme: props.theme,
+    inset: props.focusInset,
+    color: {
+      hue: focusBorderColor,
+      shade: focusShade
+    },
+    selector: focusSelector,
+    styles: {
+      borderColor: focusBorderColor
+    },
+    condition: !props.isBare
+  }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles = props => {
+  const inputHeight = getHeight(props);
+  let minHeight;
+  let horizontalPadding;
+  if (props.isBare) {
+    if (props.isMultiselectable) {
+      minHeight = math(`${props.theme.shadowWidths.sm} * 2 + ${inputHeight}`);
+      horizontalPadding = props.theme.shadowWidths.sm;
+    } else {
+      minHeight = `${inputHeight}px`;
+      horizontalPadding = '0';
+    }
+  } else {
+    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 = math(`(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`);
+  return css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, maxHeight, props.theme.fontSizes.md);
+};
+const StyledTrigger = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.11'
+}).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, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTrigger.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTrigger };