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

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
@@ -47,21 +46,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-function _extends$5() {
-  _extends$5 = 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$5.apply(this, arguments);
-}
-
 var _path$4;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
@@ -99,7 +83,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$v = 'dropdowns.combobox.label';
 const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -111,7 +95,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$u = 'dropdowns.combobox.hint';
 const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -123,7 +107,7 @@ StyledHint.defaultProps = {
 const COMPONENT_ID$t = 'dropdowns.combobox.message';
 const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -140,7 +124,7 @@ const sizeStyles$a = props => {
 };
 const StyledCombobox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -152,7 +136,7 @@ StyledCombobox.defaultProps = {
 const COMPONENT_ID$r = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -164,7 +148,7 @@ StyledContainer.defaultProps = {
 const COMPONENT_ID$q = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -176,7 +160,7 @@ StyledField.defaultProps = {
 const COMPONENT_ID$p = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -211,7 +195,7 @@ const sizeStyles$9 = props => {
 };
 const StyledInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
@@ -227,7 +211,7 @@ const sizeStyles$8 = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
@@ -276,8 +260,10 @@ const colorStyles$7 = props => {
   return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";}", " &[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isLabelHovered ? hoverBorderColor : borderColor, backgroundColor, reactTheming.getColorV8('foreground', 600 , props.theme), hoverBorderColor, reactTheming.focusStyles({
     theme: props.theme,
     inset: props.focusInset,
-    hue: focusBorderColor,
-    shade: focusShade,
+    color: {
+      hue: focusBorderColor,
+      shade: focusShade
+    },
     selector: focusSelector,
     styles: {
       borderColor: focusBorderColor
@@ -307,7 +293,7 @@ const sizeStyles$7 = props => {
 };
 const StyledTrigger = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
@@ -321,39 +307,27 @@ const colorStyles$6 = props => {
   const color = reactTheming.getColorV8('neutralHue', 600, props.theme);
   const focusColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
   const disabledColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
-  return styled.css(["color:", ";", ":hover &,", ":focus-within &,", ":focus &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
+  return styled.css(["color:", ";", ":hover &,", ":focus-within &,", ":focus &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.$isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
 };
 const sizeStyles$6 = props => {
   const size = props.theme.iconSizes.md;
   const position = polished.math(`(${getHeight(props)} - ${size}) / 2`);
   const margin = `${props.theme.space.base * 2}px`;
   let side;
-  if (props.isEnd) {
+  if (props.$isEnd) {
     side = props.theme.rtl ? 'right' : 'left';
   } else {
     side = props.theme.rtl ? 'left' : 'right';
   }
   return styled.css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
 };
-const StyledInputIcon = styled__default.default(_ref => {
-  let {
-    children,
-    isCompact,
-    isDisabled,
-    isEnd,
-    isLabelHovered,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
-})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$6, colorStyles$6, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["position:sticky;flex-shrink:0;transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$6, colorStyles$6, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledInputIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -386,7 +360,7 @@ const sizeStyles$5 = props => {
 };
 const StyledOption = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -398,7 +372,7 @@ StyledOption.defaultProps = {
 const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -410,7 +384,7 @@ StyledOptionContent.defaultProps = {
 const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
@@ -431,7 +405,7 @@ const sizeStyles$4 = props => {
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -448,7 +422,7 @@ const sizeStyles$3 = props => {
 };
 const StyledListbox = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
@@ -464,16 +438,9 @@ const sizeStyles$2 = props => {
   const marginHorizontal = `${props.theme.space.base * 2}px`;
   return styled.css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
-const StyledOptionIcon = styled__default.default(_ref => {
-  let {
-    children,
-    theme,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
@@ -494,7 +461,7 @@ const sizeStyles$1 = props => {
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
@@ -505,11 +472,11 @@ StyledOptionMeta.defaultProps = {
 
 const COMPONENT_ID$d = 'dropdowns.combobox.option.type_icon';
 const colorStyles$2 = props => {
-  const opacity = props.type && props.type !== 'danger' ? 1 : 0;
+  const opacity = props.$type && props.$type !== 'danger' ? 1 : 0;
   let color;
-  if (props.type === 'add' || props.type === 'danger') {
+  if (props.$type === 'add' || props.$type === 'danger') {
     color = 'inherit';
-  } else if (props.type === 'header' || props.type === 'next' || props.type === 'previous') {
+  } else if (props.$type === 'header' || props.$type === 'next' || props.$type === 'previous') {
     color = reactTheming.getColorV8('neutralHue', 600, props.theme);
   } else {
     color = reactTheming.getColorV8('primaryHue', 600, props.theme);
@@ -521,29 +488,20 @@ const sizeStyles = props => {
   const position = `${props.theme.space.base * 3}px`;
   const top = polished.math(`(${getMinHeight(props)} - ${size}) / 2`);
   let side;
-  if (props.type === 'next') {
+  if (props.$type === 'next') {
     side = props.theme.rtl ? 'left' : 'right';
   } else {
     side = props.theme.rtl ? 'right' : 'left';
   }
   return styled.css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
 };
-const StyledOptionTypeIcon = styled__default.default(_ref => {
-  let {
-    children,
-    isCompact,
-    theme,
-    type,
-    ...props
-  } = _ref;
-  return React.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
-})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.type === 'next' || props.type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["position:absolute;transform:", ";transition:opacity 0.1s ease-in-out;", ";", ";", ";"], props => props.theme.rtl && (props.$type === 'next' || props.$type === 'previous') && 'rotate(180deg)', sizeStyles, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledOptionTypeIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -551,7 +509,7 @@ StyledOptionTypeIcon.defaultProps = {
 const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -567,7 +525,7 @@ const colorStyles$1 = props => {
 };
 const StyledValue = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -589,7 +547,7 @@ const colorStyles = props => {
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -601,7 +559,7 @@ StyledTagsButton.defaultProps = {
 const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -617,7 +575,7 @@ StyledMenu.defaultProps = {
 const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -629,7 +587,7 @@ StyledFloatingMenu.defaultProps = {
 const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -641,7 +599,7 @@ StyledItem.defaultProps = {
 const COMPONENT_ID$6 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -653,7 +611,7 @@ StyledItemContent.defaultProps = {
 const COMPONENT_ID$5 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -665,7 +623,7 @@ StyledItemGroup.defaultProps = {
 const COMPONENT_ID$4 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -677,7 +635,7 @@ StyledItemIcon.defaultProps = {
 const COMPONENT_ID$3 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -689,7 +647,7 @@ StyledItemMeta.defaultProps = {
 const COMPONENT_ID$2 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -701,7 +659,7 @@ StyledItemTypeIcon.defaultProps = {
 const COMPONENT_ID$1 = 'dropdowns.menu.button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-5hs2jg-0"
@@ -713,7 +671,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -807,7 +765,7 @@ const Listbox = React.forwardRef((_ref, ref) => {
     },
     zIndex: zIndex,
     ref: floatingRef
-  }, React__namespace.default.createElement(StyledListbox, _extends$5({
+  }, React__namespace.default.createElement(StyledListbox, Object.assign({
     isCompact: isCompact,
     maxHeight: maxHeight,
     minHeight: minHeight,
@@ -857,7 +815,7 @@ const TagComponent = React.forwardRef((_ref, ref) => {
   const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
   const doc = reactTheming.useDocument(theme);
   const handleClick = () => removeSelection(option.value);
-  return React__namespace.default.createElement(StyledTag, _extends$5({
+  return React__namespace.default.createElement(StyledTag, Object.assign({
     "aria-disabled": option.disabled,
     tabIndex: option.disabled ? undefined : 0
   }, tagProps, props, {
@@ -897,7 +855,7 @@ const TagGroup = _ref => {
   } = _ref;
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, selection.map((option, index) => {
     const disabled = isDisabled || option.disabled;
-    return React__namespace.default.createElement(Tag, _extends$5({
+    return React__namespace.default.createElement(Tag, Object.assign({
       key: option.value,
       hidden: !isExpanded && index >= maxTags,
       option: {
@@ -1126,14 +1084,14 @@ const Combobox = React.forwardRef((_ref, ref) => {
   }, [getMessageProps, messageProps, setMessageProps]);
   return React__namespace.default.createElement(ComboboxContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(StyledCombobox, _extends$5({
+  }, React__namespace.default.createElement(StyledCombobox, Object.assign({
     isCompact: isCompact,
     tabIndex: -1
   }, props, {
     ref: ref
   }), React__namespace.default.createElement(StyledTrigger, triggerProps, React__namespace.default.createElement(StyledContainer, null, startIcon && React__namespace.default.createElement(StyledInputIcon, {
-    isLabelHovered: isLabelHovered,
-    isCompact: isCompact
+    $isLabelHovered: isLabelHovered,
+    $isCompact: isCompact
   }, startIcon), React__namespace.default.createElement(StyledInputGroup, null, isMultiselectable && Array.isArray(selection) && React__namespace.default.createElement(TagGroup, {
     isDisabled: isDisabled,
     isExpanded: isTagGroupExpanded,
@@ -1162,11 +1120,11 @@ const Combobox = React.forwardRef((_ref, ref) => {
     selection,
     inputValue
   }) : inputValue || placeholder), React__namespace.default.createElement(StyledInput, inputProps)), (hasChevron || endIcon) && React__namespace.default.createElement(StyledInputIcon, {
-    isCompact: isCompact,
-    isEnd: true,
-    isLabelHovered: isLabelHovered,
-    isRotated: hasChevron && isExpanded
-  }, hasChevron ? React__namespace.default.createElement(SvgChevronDownStroke, null) : endIcon))), React__namespace.default.createElement(Listbox, _extends$5({
+    $isCompact: isCompact,
+    $isEnd: true,
+    $isLabelHovered: isLabelHovered,
+    $isRotated: hasChevron && isExpanded
+  }, hasChevron ? React__namespace.default.createElement(SvgChevronDownStroke, null) : endIcon))), React__namespace.default.createElement(Listbox, Object.assign({
     appendToNode: listboxAppendToNode,
     isCompact: isCompact,
     isExpanded: isExpanded,
@@ -1224,7 +1182,7 @@ const Hint = React.forwardRef((props, ref) => {
     setHasHint(true);
     return () => setHasHint(false);
   }, [setHasHint]);
-  return React__namespace.default.createElement(StyledHint, _extends$5({}, hintProps, props, {
+  return React__namespace.default.createElement(StyledHint, Object.assign({}, hintProps, props, {
     ref: ref
   }));
 });
@@ -1240,7 +1198,7 @@ const Label = React.forwardRef((_ref, ref) => {
   const {
     labelProps
   } = useFieldContext();
-  return React__namespace.default.createElement(StyledLabel, _extends$5({}, labelProps, {
+  return React__namespace.default.createElement(StyledLabel, Object.assign({}, labelProps, {
     onClick: containerUtilities.composeEventHandlers(onClick, labelProps?.onClick),
     onMouseEnter: containerUtilities.composeEventHandlers(onMouseEnter, labelProps?.onMouseEnter),
     onMouseLeave: containerUtilities.composeEventHandlers(onMouseLeave, labelProps?.onMouseLeave)
@@ -1263,7 +1221,7 @@ const Message = React.forwardRef((props, ref) => {
     setHasMessage(true);
     return () => setHasMessage(false);
   }, [setHasMessage]);
-  return React__namespace.default.createElement(StyledMessage, _extends$5({}, messageProps, props, {
+  return React__namespace.default.createElement(StyledMessage, Object.assign({}, messageProps, props, {
     ref: ref
   }));
 });
@@ -1293,7 +1251,7 @@ const FieldComponent = React.forwardRef((props, ref) => {
   }), [labelProps, setLabelProps, hasHint, setHasHint, hintProps, setHintProps, hasMessage, setHasMessage, messageProps, setMessageProps]);
   return React__namespace.default.createElement(FieldContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(StyledField, _extends$5({}, props, {
+  }, React__namespace.default.createElement(StyledField, Object.assign({}, props, {
     ref: ref
   })));
 });
@@ -1387,7 +1345,7 @@ const OptionMetaComponent = React.forwardRef((props, ref) => {
   const {
     isDisabled
   } = useOptionContext();
-  return React__namespace.default.createElement(StyledOptionMeta, _extends$5({
+  return React__namespace.default.createElement(StyledOptionMeta, Object.assign({
     isDisabled: isDisabled
   }, props, {
     ref: ref
@@ -1454,13 +1412,13 @@ const OptionComponent = React.forwardRef((_ref, ref) => {
   });
   return React__namespace.default.createElement(OptionContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(StyledOption, _extends$5({
+  }, React__namespace.default.createElement(StyledOption, Object.assign({
     isActive: isActive,
     isCompact: isCompact,
     $type: type
   }, props, optionProps), React__namespace.default.createElement(StyledOptionTypeIcon, {
-    isCompact: isCompact,
-    type: type
+    $isCompact: isCompact,
+    $type: type
   }, renderActionIcon(type)), icon && React__namespace.default.createElement(StyledOptionIcon, null, icon), React__namespace.default.createElement(StyledOptionContent, null, children || label || value)));
 });
 OptionComponent.displayName = 'Option';
@@ -1498,7 +1456,7 @@ const OptGroup = React.forwardRef((_ref, ref) => {
   const optGroupProps = getOptGroupProps({
     'aria-label': groupAriaLabel || legend
   });
-  return React__namespace.default.createElement(StyledOption, _extends$5({
+  return React__namespace.default.createElement(StyledOption, Object.assign({
     isCompact: isCompact,
     $type: "group",
     onMouseDown: containerUtilities.composeEventHandlers(onMouseDown, handleMouseDown),
@@ -1510,9 +1468,9 @@ const OptGroup = React.forwardRef((_ref, ref) => {
     isCompact: isCompact,
     $type: "header"
   }, icon && React__namespace.default.createElement(StyledOptionTypeIcon, {
-    isCompact: isCompact,
-    type: "header"
-  }, icon), content || legend), React__namespace.default.createElement(StyledOptGroup, _extends$5({
+    $isCompact: isCompact,
+    $type: "header"
+  }, icon), content || legend), React__namespace.default.createElement(StyledOptGroup, Object.assign({
     isCompact: isCompact
   }, optGroupProps), React__namespace.default.createElement(StyledListboxSeparator, {
     role: "none"
@@ -1671,7 +1629,7 @@ const MenuList = React.forwardRef((_ref, ref) => {
       transform
     },
     ref: floatingRef
-  }, React__namespace.default.createElement(StyledMenu, _extends$5({
+  }, React__namespace.default.createElement(StyledMenu, Object.assign({
     "data-garden-animate-arrow": isVisible,
     arrowPosition: hasArrow ? reactTheming.getArrowPosition(theme, placement) : undefined,
     isCompact: isCompact,
@@ -1775,7 +1733,7 @@ const Menu = React.forwardRef((_ref, ref) => {
   }), [isCompact, focusedValue, getItemProps, getItemGroupProps, getSeparatorProps]);
   return React__namespace.default.createElement(MenuContext.Provider, {
     value: contextValue
-  }, trigger, React__namespace.default.createElement(MenuList, _extends$5({}, props, getMenuProps({
+  }, trigger, React__namespace.default.createElement(MenuList, Object.assign({}, props, getMenuProps({
     onMouseLeave
   }), {
     ref: reactMergeRefs.mergeRefs([menuRef, ref]),
@@ -1839,7 +1797,7 @@ const ItemGroup = React.forwardRef((_ref, ref) => {
   }), [type]);
   return React__namespace.default.createElement(ItemGroupContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(StyledItem, _extends$5({
+  }, React__namespace.default.createElement(StyledItem, Object.assign({
     isCompact: isCompact,
     $type: "group"
   }, props, {
@@ -1849,9 +1807,9 @@ const ItemGroup = React.forwardRef((_ref, ref) => {
     isCompact: isCompact,
     $type: "header"
   }, icon && React__namespace.default.createElement(StyledItemTypeIcon, {
-    isCompact: isCompact,
-    type: "header"
-  }, icon), content || legend), React__namespace.default.createElement(StyledItemGroup, _extends$5({
+    $isCompact: isCompact,
+    $type: "header"
+  }, icon), content || legend), React__namespace.default.createElement(StyledItemGroup, Object.assign({
     isCompact: isCompact
   }, groupProps), React__namespace.default.createElement(StyledSeparator, {
     role: "none"
@@ -1878,7 +1836,7 @@ const ItemMetaComponent = React.forwardRef((props, ref) => {
   const {
     isDisabled
   } = useItemContext();
-  return React__namespace.default.createElement(StyledItemMeta, _extends$5({
+  return React__namespace.default.createElement(StyledItemMeta, Object.assign({
     isDisabled: isDisabled
   }, props, {
     ref: ref
@@ -1950,15 +1908,15 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
   }), [isDisabled]);
   return React__namespace.default.createElement(ItemContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(StyledItem, _extends$5({
+  }, React__namespace.default.createElement(StyledItem, Object.assign({
     $type: type,
     isCompact: isCompact,
     isActive: isActive
   }, props, itemProps, {
     ref: reactMergeRefs.mergeRefs([_itemRef, ref])
   }), React__namespace.default.createElement(StyledItemTypeIcon, {
-    isCompact: isCompact,
-    type: type
+    $isCompact: isCompact,
+    $type: type
   }, renderActionIcon(type)), icon && React__namespace.default.createElement(StyledItemIcon, null, icon), React__namespace.default.createElement(StyledItemContent, null, children || label)));
 });
 ItemComponent.displayName = 'Item';
@@ -1984,7 +1942,7 @@ const Separator = React.forwardRef(
     getSeparatorProps
   } = useMenuContext();
   const separatorProps = getSeparatorProps();
-  return React__namespace.default.createElement(StyledSeparator, _extends$5({}, props, separatorProps, {
+  return React__namespace.default.createElement(StyledSeparator, Object.assign({}, props, separatorProps, {
     ref: ref
   }));
 });

package/dist/typings/views/combobox/StyledInputIcon.d.ts

@@ -7,13 +7,13 @@
 /// <reference types="react" />
 import { ThemeProps, DefaultTheme } from 'styled-components';
 interface IStyledInputIconProps extends ThemeProps<DefaultTheme> {
-    isCompact?: boolean;
-    isDisabled?: boolean;
-    isEnd?: boolean;
-    isLabelHovered?: boolean;
-    isRotated?: boolean;
+    $isCompact?: boolean;
+    $isDisabled?: boolean;
+    $isEnd?: boolean;
+    $isLabelHovered?: boolean;
+    $isRotated?: boolean;
 }
-export declare const StyledInputIcon: import("styled-components").StyledComponent<({ children, isCompact, isDisabled, isEnd, isLabelHovered, isRotated, theme, ...props }: any) => import("react").FunctionComponentElement<SVGElement>, DefaultTheme, {
+export declare const StyledInputIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledInputIconProps, "data-garden-id" | "data-garden-version">;

package/dist/typings/views/combobox/StyledOptionIcon.d.ts

@@ -6,7 +6,7 @@
  */
 /// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
-export declare const StyledOptionIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").FunctionComponentElement<SVGElement>, DefaultTheme, {
+export declare const StyledOptionIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;