@zendeskgarden/react-dropdowns 9.0.0-next.7 → 9.0.0-next.8

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

@@ -0,0 +1,58 @@
+/**
+* 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 React__default, { forwardRef } from 'react';
+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 '../../views/menu/StyledButton.js';
+import { StyledSeparator } from '../../views/menu/StyledSeparator.js';
+import useMenuContext from '../../context/useMenuContext.js';
+
+const Separator = forwardRef(
+(_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    getSeparatorProps
+  } = useMenuContext();
+  const separatorProps = getSeparatorProps();
+  return React__default.createElement(StyledSeparator, Object.assign({}, props, separatorProps, {
+    ref: ref
+  }));
+});
+Separator.displayName = 'Separator';
+
+export { Separator };

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

@@ -0,0 +1,55 @@
+/**
+* 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 { Children, isValidElement } from 'react';
+
+const toItem = props => ({
+  value: props.value,
+  label: props.label,
+  ...(props.name && {
+    name: props.name
+  }),
+  ...(props.isDisabled && {
+    disabled: props.isDisabled
+  }),
+  ...(props.isSelected && {
+    selected: props.isSelected
+  }),
+  ...(props.selectionType && {
+    type: props.selectionType
+  }),
+  ...(props.type === 'next' && {
+    isNext: true
+  }),
+  ...(props.type === 'previous' && {
+    isPrevious: true
+  })
+});
+const toItems = (children, type) => Children.toArray(children).reduce((items, item) => {
+  const retVal = items;
+  if ( isValidElement(item)) {
+    if ('value' in item.props) {
+      retVal.push(toItem({
+        ...item.props,
+        selectionType: type
+      }));
+    } else {
+      const props = item.props;
+      const groupLabel = props.legend || props['aria-label'];
+      const isSelectableGroup = props.type && ['checkbox', 'radio'].includes(props.type);
+      if (groupLabel || isSelectableGroup) {
+        const groupItems = toItems(props.children, props.type);
+        retVal.push({
+          label: props.legend || props['aria-label'],
+          items: groupItems
+        });
+      }
+    }
+  }
+  return retVal;
+}, []);
+
+export { toItem, toItems };

package/dist/esm/index.js

@@ -0,0 +1,19 @@
+/**
+* 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.
+*/
+export { Combobox } from './elements/combobox/Combobox.js';
+export { Field } from './elements/combobox/Field.js';
+export { Hint } from './elements/combobox/Hint.js';
+export { Label } from './elements/combobox/Label.js';
+export { Message } from './elements/combobox/Message.js';
+export { Option } from './elements/combobox/Option.js';
+export { OptGroup } from './elements/combobox/OptGroup.js';
+export { Tag } from './elements/combobox/Tag.js';
+export { Menu } from './elements/menu/Menu.js';
+export { ItemGroup } from './elements/menu/ItemGroup.js';
+export { Item } from './elements/menu/Item.js';
+export { Separator } from './elements/menu/Separator.js';
+export { VALIDATION } from '@zendeskgarden/react-forms';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.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 * 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); }
+var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M1 9l4 4L15 3"
+  })));
+};
+
+export { SvgCheckLgStroke as default };

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

@@ -0,0 +1,25 @@
+/**
+* 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 * 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); }
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
+
+export { SvgChevronDownStroke as default };

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

@@ -0,0 +1,25 @@
+/**
+* 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 * 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); }
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
+
+export { SvgChevronLeftStroke as default };

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

@@ -0,0 +1,25 @@
+/**
+* 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 * 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); }
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
+
+export { SvgChevronRightStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.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 * 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); }
+var SvgPlusStroke = function SvgPlusStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M7.5 2.5v12m6-6h-12"
+  })));
+};
+
+export { SvgPlusStroke as default };

package/dist/esm/types/index.js

@@ -0,0 +1,12 @@
+/**
+* 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 { PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
+
+const OPTION_TYPE = ['add', 'danger', 'next', 'previous'];
+const PLACEMENT = ['auto', ...PLACEMENT$1];
+
+export { OPTION_TYPE, PLACEMENT };

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

@@ -0,0 +1,30 @@
+/**
+* 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';
+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`;
+  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.8'
+}).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

@@ -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.container';
+const StyledContainer = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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

@@ -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.8'
+}).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.8'
+}).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.8'
+}).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.8'
+}).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.8'
+}).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,56 @@
+/**
+* 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 { cloneElement, Children } from 'react';
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { 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(_ref => {
+  let {
+    children,
+    isCompact,
+    isDisabled,
+    isEnd,
+    isLabelHovered,
+    isRotated,
+    theme,
+    ...props
+  } = _ref;
+  return cloneElement(Children.only(children), props);
+}).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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.8'
+}).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.8'
+}).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.8'
+}).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.8'
+}).withConfig({
+  displayName: "StyledMessage",
+  componentId: "sc-jux8m5-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledMessage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMessage };