@zendeskgarden/react-dropdowns 9.1.1 → 9.2.0

package/dist/index.cjs.js

@@ -47,9 +47,9 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _path$4;
-function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
+function _extends$5() { return _extends$5 = 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$5.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -80,69 +80,69 @@ const useFieldContext = () => {
   return context;
 };
 
-const COMPONENT_ID$u = 'dropdowns.combobox.label';
+const COMPONENT_ID$v = 'dropdowns.combobox.label';
 const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
-})(["vertical-align:revert;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
+})(["vertical-align:revert;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
 
-const COMPONENT_ID$t = 'dropdowns.combobox.hint';
+const COMPONENT_ID$u = 'dropdowns.combobox.hint';
 const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
 
-const COMPONENT_ID$s = 'dropdowns.combobox.message';
+const COMPONENT_ID$t = 'dropdowns.combobox.message';
 const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
 
-const COMPONENT_ID$r = 'dropdowns.combobox';
-const sizeStyles$a = props => {
+const COMPONENT_ID$s = 'dropdowns.combobox';
+const sizeStyles$b = props => {
   const minWidth = `${props.$isCompact ? 100 : 144}px`;
   const marginTop = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;
   return styled.css(["min-width:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], minWidth, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledCombobox = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
-})(["", ";", ";"], sizeStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
+})(["", ";", ";"], sizeStyles$b, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 
-const COMPONENT_ID$q = 'dropdowns.combobox.container';
+const COMPONENT_ID$r = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
-})(["display:flex;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
+})(["display:flex;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
 
-const COMPONENT_ID$p = 'dropdowns.combobox.field';
+const COMPONENT_ID$q = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
-})(["direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
+})(["direction:", ";text-align:start;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
 
-const COMPONENT_ID$o = 'dropdowns.combobox.floating';
+const COMPONENT_ID$p = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -151,10 +151,10 @@ const StyledFloatingListbox = styled__default.default.div.attrs({
   hidden: props.$isHidden,
   animationModifier: '[data-garden-animate="true"]',
   zIndex: props.$zIndex
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
 
-const COMPONENT_ID$n = 'dropdowns.combobox.input';
-const colorStyles$9 = _ref => {
+const COMPONENT_ID$o = 'dropdowns.combobox.input';
+const colorStyles$a = _ref => {
   let {
     theme
   } = _ref;
@@ -170,7 +170,7 @@ const getHeight = props => {
   }
   return props.theme.space.base * (props.$isCompact ? 5 : 8);
 };
-const sizeStyles$9 = props => {
+const sizeStyles$a = props => {
   const height = props.theme.space.base * 5;
   const fontSize = props.theme.fontSizes.md;
   const lineHeight = reactTheming.getLineHeight(height, fontSize);
@@ -179,28 +179,28 @@ const sizeStyles$9 = props => {
   return styled.css(["min-width:", ";height:", "px;line-height:", ";font-size:", ";&&{margin-top:", ";margin-bottom:", ";}"], minWidth, height, lineHeight, fontSize, margin, margin);
 };
 const StyledInput = styled__default.default.input.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.2.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$9, colorStyles$9, props => props.$isEditable && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
+})(["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$a, colorStyles$a, props => props.$isEditable && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
 
-const COMPONENT_ID$m = 'dropdowns.combobox.input_group';
-const sizeStyles$8 = props => {
+const COMPONENT_ID$n = 'dropdowns.combobox.input_group';
+const sizeStyles$9 = props => {
   const margin = props.theme.shadowWidths.sm;
   return styled.css(["margin:-", ";min-width:0;& > *{margin:", ";}"], margin, margin);
 };
 const StyledInputGroup = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
-})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["display:flex;flex-grow:1;flex-wrap:wrap;", ";", ";"], sizeStyles$9, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 
-const COMPONENT_ID$l = 'dropdowns.combobox.trigger';
-const colorStyles$8 = _ref => {
+const COMPONENT_ID$m = 'dropdowns.combobox.trigger';
+const colorStyles$9 = _ref => {
   let {
     theme,
     $validation,
@@ -281,7 +281,7 @@ const colorStyles$8 = _ref => {
     condition: !$isBare
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles$7 = props => {
+const sizeStyles$8 = props => {
   const inputHeight = getHeight(props);
   let minHeight;
   let horizontalPadding;
@@ -302,15 +302,15 @@ const sizeStyles$7 = props => {
   return styled.css(["padding:", " ", ";min-height:", ";max-height:", ";font-size:", ";"], verticalPadding, horizontalPadding, minHeight, $maxHeight, props.theme.fontSizes.md);
 };
 const StyledTrigger = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
-})(["overflow-y:", ";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 && !props.$isMultiselectable ? 'visible' : 'auto', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => !props.$isAutocomplete && props.$isEditable ? 'text' : 'pointer', sizeStyles$7, colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["overflow-y:", ";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 && !props.$isMultiselectable ? 'visible' : 'auto', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => !props.$isAutocomplete && props.$isEditable ? 'text' : 'pointer', sizeStyles$8, colorStyles$9, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 
-const COMPONENT_ID$k = 'dropdowns.combobox.input_icon';
-const colorStyles$7 = _ref => {
+const COMPONENT_ID$l = 'dropdowns.combobox.input_icon';
+const colorStyles$8 = _ref => {
   let {
     theme,
     $isLabelHovered
@@ -335,7 +335,7 @@ const colorStyles$7 = _ref => {
   });
   return styled.css(["color:", ";", ":hover &&,", ":focus-within &&,", ":focus &&{color:", ";}", "[aria-disabled='true'] &&{color:", ";}"], $isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
 };
-const sizeStyles$6 = props => {
+const sizeStyles$7 = props => {
   const size = props.theme.iconSizes.md;
   const position = polished.math(`(${getHeight(props)} - ${size}) / 2`);
   const margin = `${props.theme.space.base * 2}px`;
@@ -348,15 +348,15 @@ const sizeStyles$6 = props => {
   return styled.css(["top:", ";margin-", ":", ";width:", ";height:", ";"], position, side, margin, size, size);
 };
 const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.2.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$6, colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, 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$7, colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 
-const COMPONENT_ID$j = 'dropdowns.combobox.option';
-const colorStyles$6 = _ref => {
+const COMPONENT_ID$k = 'dropdowns.combobox.option';
+const colorStyles$7 = _ref => {
   let {
     theme,
     $isActive,
@@ -395,7 +395,7 @@ const colorStyles$6 = _ref => {
   return styled.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$5 = props => {
+const sizeStyles$6 = props => {
   const lineHeight = props.theme.lineHeights.md;
   const minHeight = getMinHeight(props);
   const paddingHorizontal = props.$type === 'group' ? 0 : `${props.theme.space.base * 9}px`;
@@ -403,33 +403,33 @@ const sizeStyles$5 = props => {
   return styled.css(["box-sizing:border-box;padding:", " ", ";min-height:", "px;line-height:", ";"], paddingVertical, paddingHorizontal, minHeight, lineHeight);
 };
 const StyledOption = styled__default.default.li.attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.2.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$5, colorStyles$6, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
+})(["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$6, colorStyles$7, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 
-const COMPONENT_ID$i = 'dropdowns.combobox.option.content';
+const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
-})(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
+})(["display:flex;flex-direction:column;flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 
-const COMPONENT_ID$h = 'dropdowns.combobox.optgroup';
+const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
-})(["margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 
-const COMPONENT_ID$g = 'dropdowns.combobox.separator';
-const colorStyles$5 = _ref => {
+const COMPONENT_ID$h = 'dropdowns.combobox.separator';
+const colorStyles$6 = _ref => {
   let {
     theme
   } = _ref;
@@ -439,35 +439,35 @@ const colorStyles$5 = _ref => {
   });
   return styled.css(["background-color:", ";"], backgroundColor);
 };
-const sizeStyles$4 = props => {
+const sizeStyles$5 = props => {
   const margin = `${props.theme.space.base}px`;
   const height = props.theme.borderWidths.sm;
   return styled.css(["margin:", " 0;height:", ";"], margin, height);
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
-})(["cursor:default;", ";", ";", ";"], sizeStyles$4, colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["cursor:default;", ";", ";", ";"], sizeStyles$5, colorStyles$6, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 
-const COMPONENT_ID$f = 'dropdowns.combobox.listbox';
-const sizeStyles$3 = props => {
+const COMPONENT_ID$g = 'dropdowns.combobox.listbox';
+const sizeStyles$4 = props => {
   const padding = props.theme.space.base;
   const $minHeight = props.$minHeight === undefined ? `${getMinHeight(props) + padding * 2}px` : props.$minHeight;
   return styled.css(["min-height:", ";max-height:", ";&&&{padding-top:", "px;padding-bottom:", "px;}"], $minHeight, props.$maxHeight, padding, padding);
 };
 const StyledListbox = styled__default.default.ul.attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.2.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$3, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
+})(["overflow-y:auto;list-style-type:none;", ";&&&{display:block;}", ":first-child ", " ", ":first-child ", "[role='none']:first-child{display:none;}"], sizeStyles$4, StyledOption, StyledOptionContent, StyledOptGroup, StyledListboxSeparator);
 
-const COMPONENT_ID$e = 'dropdowns.combobox.option.icon';
-const colorStyles$4 = _ref => {
+const COMPONENT_ID$f = 'dropdowns.combobox.option.icon';
+const colorStyles$5 = _ref => {
   let {
     theme,
     $isDisabled,
@@ -489,22 +489,22 @@ const colorStyles$4 = _ref => {
   });
   return styled.css(["color:", ";"], color);
 };
-const sizeStyles$2 = props => {
+const sizeStyles$3 = props => {
   const size = props.theme.iconSizes.md;
   const marginTop = polished.math(`(${props.theme.lineHeights.md} - ${size}) / 2`);
   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(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
-})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$2, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$3, colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 
-const COMPONENT_ID$d = 'dropdowns.combobox.option.meta';
-const colorStyles$3 = _ref => {
+const COMPONENT_ID$e = 'dropdowns.combobox.option.meta';
+const colorStyles$4 = _ref => {
   let {
     theme,
     $isDisabled
@@ -516,18 +516,51 @@ const colorStyles$3 = _ref => {
   });
   return styled.css(["color:", ";"], color);
 };
-const sizeStyles$1 = props => {
+const sizeStyles$2 = props => {
   const lineHeight = props.theme.lineHeights.sm;
   const fontSize = props.theme.fontSizes.sm;
   return styled.css(["line-height:", ";font-size:", ";"], lineHeight, fontSize);
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.1.1'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
-})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$1, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["transition:color 0.25s ease-in-out;font-weight:", ";", ";", ";", ";"], props => props.theme.fontWeights.regular, sizeStyles$2, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+
+const COMPONENT_ID$d = 'dropdowns.combobox.option.selection_icon';
+const colorStyles$3 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = reactTheming.getColor({
+    theme,
+    variable: 'foreground.primary'
+  });
+  return styled.css(["color:", ";"], color);
+};
+const sizeStyles$1 = _ref2 => {
+  let {
+    theme,
+    $isCompact
+  } = _ref2;
+  const size = theme.iconSizes.sm;
+  const position = `${theme.space.base * 3.5}px`;
+  const top = polished.math(`(${getMinHeight({
+    theme,
+    $isCompact
+  })} - ${size}) / 2`);
+  const side = theme.rtl ? 'right' : 'left';
+  return styled.css(["top:", ";", ":", ";width:", ";height:", ";"], top, side, position, size, size);
+};
+const StyledOptionSelectionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.2.0'
+}).withConfig({
+  displayName: "StyledOptionSelectionIcon",
+  componentId: "sc-12wj24m-0"
+})(["position:absolute;", ";", ";", ";"], sizeStyles$1, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 
 const COMPONENT_ID$c = 'dropdowns.combobox.option.type_icon';
 const colorStyles$2 = _ref => {
@@ -566,7 +599,7 @@ const sizeStyles = props => {
 };
 const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
@@ -575,7 +608,7 @@ const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon
 const COMPONENT_ID$b = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -598,7 +631,7 @@ const colorStyles$1 = _ref => {
 };
 const StyledValue = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -607,7 +640,7 @@ const StyledValue = styled__default.default.div.attrs({
     return 'default';
   }
   return props.$isEditable && !props.$isAutocomplete ? 'text' : 'pointer';
-}, sizeStyles$9, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+}, sizeStyles$a, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 
 const COMPONENT_ID$9 = 'dropdowns.combobox.tags_button';
 const colorStyles = _ref => {
@@ -623,7 +656,7 @@ const colorStyles = _ref => {
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -632,7 +665,7 @@ const StyledTagsButton = styled__default.default(StyledValue).attrs({
 const COMPONENT_ID$8 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -645,7 +678,7 @@ const StyledMenu = styled__default.default(StyledListbox).attrs({
 const COMPONENT_ID$7 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -654,7 +687,7 @@ const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs(
 const COMPONENT_ID$6 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -663,7 +696,7 @@ const StyledItem = styled__default.default(StyledOption).attrs({
 const COMPONENT_ID$5 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -672,7 +705,7 @@ const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
 const COMPONENT_ID$4 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -681,7 +714,7 @@ const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
 const COMPONENT_ID$3 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -690,7 +723,7 @@ const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
 const COMPONENT_ID$2 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -699,7 +732,7 @@ const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
 const COMPONENT_ID$1 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -708,7 +741,7 @@ const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -1296,9 +1329,9 @@ Field.Label = Label;
 Field.Message = Message;
 
 var _path$3;
-function _extends$3() { return _extends$3 = 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$3.apply(null, arguments); }
+function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
 var SvgPlusStroke = function SvgPlusStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1313,9 +1346,9 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
 };
 
 var _path$2;
-function _extends$2() { return _extends$2 = 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$2.apply(null, arguments); }
+function _extends$3() { return _extends$3 = 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$3.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1329,9 +1362,9 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
 };
 
 var _path$1;
-function _extends$1() { return _extends$1 = 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$1.apply(null, arguments); }
+function _extends$2() { return _extends$2 = 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$2.apply(null, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1345,9 +1378,9 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 };
 
 var _path;
-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); }
+function _extends$1() { return _extends$1 = 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$1.apply(null, arguments); }
 var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1363,6 +1396,24 @@ var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   })));
 };
 
+var _circle;
+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 SvgCircleSmFill = function SvgCircleSmFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 6,
+    cy: 6,
+    r: 2,
+    fill: "currentColor"
+  })));
+};
+
 const OPTION_TYPE = ['add', 'danger', 'next', 'previous'];
 const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 
@@ -1391,6 +1442,7 @@ const OptionMeta = OptionMetaComponent;
 const OptionComponent = React.forwardRef((_ref, ref) => {
   let {
     children,
+    hasSelection,
     icon,
     isDisabled,
     isHidden,
@@ -1398,6 +1450,7 @@ const OptionComponent = React.forwardRef((_ref, ref) => {
     label,
     type,
     value,
+    tagProps,
     ...props
   } = _ref;
   const contextValue = React.useMemo(() => ({
@@ -1451,7 +1504,9 @@ const OptionComponent = React.forwardRef((_ref, ref) => {
     $isActive: isActive,
     $isCompact: isCompact,
     $type: type
-  }, props, optionProps), React__namespace.default.createElement(StyledOptionTypeIcon, {
+  }, props, optionProps), !!hasSelection && type === 'next' && React__namespace.default.createElement(StyledOptionSelectionIcon, {
+    $isCompact: isCompact
+  }, React__namespace.default.createElement(SvgCircleSmFill, null)), React__namespace.default.createElement(StyledOptionTypeIcon, {
     $isCompact: isCompact,
     $type: type
   }, renderActionIcon(type)), !!icon && React__namespace.default.createElement(StyledOptionIcon, {
@@ -1461,6 +1516,7 @@ const OptionComponent = React.forwardRef((_ref, ref) => {
 });
 OptionComponent.displayName = 'Option';
 OptionComponent.propTypes = {
+  hasSelection: PropTypes__default.default.bool,
   icon: PropTypes__default.default.any,
   isDisabled: PropTypes__default.default.bool,
   isSelected: PropTypes__default.default.bool,