@zendeskgarden/react-dropdowns 9.0.0-next.3 → 9.0.0-next.5

package/README.md

@@ -28,7 +28,7 @@ import { Field, Label, Combobox, Option } from '@zendeskgarden/react-dropdowns';
  */
 <ThemeProvider>
   <Field>
-    <Label>Combobox</Label>
+    <Field.Label>Label</Field.Label>
     <Combobox>
       <Option value="One" />
       <Option value="Two" />

package/dist/index.cjs.js

@@ -97,9 +97,9 @@ const useFieldContext = () => {
 };
 
 const COMPONENT_ID$v = 'dropdowns.combobox.label';
-const StyledLabel = styled__default.default(reactForms.Label).attrs({
+const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -109,9 +109,9 @@ StyledLabel.defaultProps = {
 };
 
 const COMPONENT_ID$u = 'dropdowns.combobox.hint';
-const StyledHint = styled__default.default(reactForms.Hint).attrs({
+const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -121,9 +121,9 @@ StyledHint.defaultProps = {
 };
 
 const COMPONENT_ID$t = 'dropdowns.combobox.message';
-const StyledMessage = styled__default.default(reactForms.Message).attrs({
+const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -140,7 +140,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -152,7 +152,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -164,7 +164,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -176,7 +176,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -192,7 +192,7 @@ StyledFloatingListbox.defaultProps = {
 
 const COMPONENT_ID$o = 'dropdowns.combobox.input';
 const colorStyles$8 = props => {
-  const placeholderColor = reactTheming.getColor('neutralHue', 400, props.theme);
+  const placeholderColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
   return styled.css(["background-color:inherit;color:inherit;&::placeholder{opacity:1;color:", ";}"], placeholderColor);
 };
 const getHeight = props => {
@@ -211,7 +211,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
@@ -227,7 +227,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
@@ -253,22 +253,22 @@ const colorStyles$7 = props => {
   let focusBorderColor;
   let focusShade;
   if (props.validation) {
-    borderColor = reactTheming.getColor(hue, SHADE, props.theme);
+    borderColor = reactTheming.getColorV8(hue, SHADE, props.theme);
     hoverBorderColor = borderColor;
     if (props.validation === 'warning') {
-      focusBorderColor = reactTheming.getColor(hue, SHADE + 100, props.theme);
+      focusBorderColor = reactTheming.getColorV8(hue, SHADE + 100, props.theme);
       focusShade = SHADE + 100;
     } else {
       focusBorderColor = borderColor;
     }
   } else {
-    borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+    borderColor = reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme);
+    hoverBorderColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme);
     focusBorderColor = hoverBorderColor;
   }
-  const disabledBackgroundColor = props.isBare ? undefined : reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
+  const disabledBackgroundColor = props.isBare ? undefined : reactTheming.getColorV8('neutralHue', SHADE - 500, props.theme);
+  const disabledBorderColor = reactTheming.getColorV8('neutralHue', SHADE - 400, props.theme);
+  const disabledForegroundColor = reactTheming.getColorV8('neutralHue', SHADE - 200, props.theme);
   const focusSelector = `
     &:focus-within:not([aria-disabled='true']),
     &:focus-visible
@@ -307,7 +307,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
@@ -318,9 +318,9 @@ StyledTrigger.defaultProps = {
 
 const COMPONENT_ID$l = 'dropdowns.combobox.input_icon';
 const colorStyles$6 = props => {
-  const color = reactTheming.getColor('neutralHue', 600, props.theme);
-  const focusColor = reactTheming.getColor('neutralHue', 700, props.theme);
-  const disabledColor = reactTheming.getColor('neutralHue', 400, props.theme);
+  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 &,", "[data-garden-focus-visible='true'] &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
 };
 const sizeStyles$6 = props => {
@@ -349,7 +349,7 @@ const StyledInputIcon = styled__default.default(_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
@@ -364,15 +364,15 @@ const colorStyles$5 = props => {
   let boxShadow;
   if (props.isActive && props.$type !== 'group' && props.$type !== 'header') {
     const hue = props.$type === 'danger' ? 'dangerHue' : 'primaryHue';
-    backgroundColor = reactTheming.getColor(hue, 600, props.theme, 0.08);
-    boxShadow = `inset ${props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md} 0 ${reactTheming.getColor(hue, 600, props.theme)}`;
+    backgroundColor = reactTheming.getColorV8(hue, 600, props.theme, 0.08);
+    boxShadow = `inset ${props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md} 0 ${reactTheming.getColorV8(hue, 600, props.theme)}`;
   }
-  const disabledForegroundColor = reactTheming.getColor('neutralHue', 400, props.theme);
+  const disabledForegroundColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
   let foregroundColor = props.theme.colors.foreground;
   if (props.$type === 'add') {
-    foregroundColor = reactTheming.getColor('primaryHue', 600, props.theme);
+    foregroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
   } else if (props.$type === 'danger') {
-    foregroundColor = reactTheming.getColor('dangerHue', 600, props.theme);
+    foregroundColor = reactTheming.getColorV8('dangerHue', 600, props.theme);
   }
   return styled.css(["box-shadow:", ";background-color:", ";color:", ";&[aria-disabled='true']{background-color:transparent;color:", ";}"], boxShadow, backgroundColor, foregroundColor, disabledForegroundColor);
 };
@@ -386,7 +386,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -398,7 +398,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -410,7 +410,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
@@ -421,7 +421,7 @@ StyledOptGroup.defaultProps = {
 
 const COMPONENT_ID$h = 'dropdowns.combobox.separator';
 const colorStyles$4 = props => {
-  const backgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
+  const backgroundColor = reactTheming.getColorV8('neutralHue', 200, props.theme);
   return styled.css(["background-color:", ";"], backgroundColor);
 };
 const sizeStyles$4 = props => {
@@ -431,7 +431,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -448,7 +448,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
@@ -473,7 +473,7 @@ const StyledOptionIcon = styled__default.default(_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
@@ -484,7 +484,7 @@ StyledOptionIcon.defaultProps = {
 
 const COMPONENT_ID$e = 'dropdowns.combobox.option.meta';
 const colorStyles$3 = props => {
-  const color = reactTheming.getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme);
+  const color = reactTheming.getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme);
   return styled.css(["color:", ";"], color);
 };
 const sizeStyles$1 = props => {
@@ -494,7 +494,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
@@ -510,9 +510,9 @@ const colorStyles$2 = props => {
   if (props.type === 'add' || props.type === 'danger') {
     color = 'inherit';
   } else if (props.type === 'header' || props.type === 'next' || props.type === 'previous') {
-    color = reactTheming.getColor('neutralHue', 600, props.theme);
+    color = reactTheming.getColorV8('neutralHue', 600, props.theme);
   } else {
-    color = reactTheming.getColor('primaryHue', 600, props.theme);
+    color = reactTheming.getColorV8('primaryHue', 600, props.theme);
   }
   return styled.css(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption);
 };
@@ -539,7 +539,7 @@ const StyledOptionTypeIcon = styled__default.default(_ref => {
   return React.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
@@ -551,23 +551,23 @@ 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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
-})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : reactTheming.getColor('neutralHue', 400, props.theme), polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : reactTheming.getColorV8('neutralHue', 400, props.theme), polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledTag.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$b = 'dropdowns.combobox.value';
 const colorStyles$1 = props => {
-  const foregroundColor = props.isPlaceholder && reactTheming.getColor('neutralHue', 400, props.theme);
+  const foregroundColor = props.isPlaceholder && reactTheming.getColorV8('neutralHue', 400, props.theme);
   return styled.css(["color:", ";"], foregroundColor);
 };
 const StyledValue = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -583,13 +583,13 @@ StyledValue.defaultProps = {
 
 const COMPONENT_ID$a = 'dropdowns.combobox.tags_button';
 const colorStyles = props => {
-  const color = reactTheming.getColor('primaryHue', 600, props.theme);
+  const color = reactTheming.getColorV8('primaryHue', 600, props.theme);
   return styled.css(["color:", ";&:disabled{color:inherit;}"], color);
 };
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -601,7 +601,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -617,7 +617,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -629,7 +629,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -641,7 +641,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -653,7 +653,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -665,7 +665,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -677,7 +677,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -689,7 +689,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -701,7 +701,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-5hs2jg-0"
@@ -713,7 +713,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -850,7 +850,7 @@ const toOptions = (children, optionTagProps) => React.Children.toArray(children)
       const props = option.props;
       const groupOptions = toOptions(props.children, optionTagProps);
       retVal.push({
-        label: props.label,
+        label: props.legend,
         options: groupOptions
       });
     }
@@ -1217,32 +1217,6 @@ Combobox.defaultProps = {
   maxTags: MAX_TAGS
 };
 
-const Field = React.forwardRef((props, ref) => {
-  const [labelProps, setLabelProps] = React.useState(undefined);
-  const [hintProps, setHintProps] = React.useState(undefined);
-  const [messageProps, setMessageProps] = React.useState(undefined);
-  const [hasHint, setHasHint] = React.useState(false);
-  const [hasMessage, setHasMessage] = React.useState(false);
-  const contextValue = React.useMemo(() => ({
-    labelProps,
-    setLabelProps,
-    hasHint,
-    setHasHint,
-    hintProps,
-    setHintProps,
-    hasMessage,
-    setHasMessage,
-    messageProps,
-    setMessageProps
-  }), [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, {
-    ref: ref
-  })));
-});
-Field.displayName = 'Field';
-
 const Hint = React.forwardRef((props, ref) => {
   const {
     hintProps,
@@ -1301,6 +1275,36 @@ Message.propTypes = {
   validationLabel: PropTypes__default.default.string
 };
 
+const FieldComponent = React.forwardRef((props, ref) => {
+  const [labelProps, setLabelProps] = React.useState(undefined);
+  const [hintProps, setHintProps] = React.useState(undefined);
+  const [messageProps, setMessageProps] = React.useState(undefined);
+  const [hasHint, setHasHint] = React.useState(false);
+  const [hasMessage, setHasMessage] = React.useState(false);
+  const contextValue = React.useMemo(() => ({
+    labelProps,
+    setLabelProps,
+    hasHint,
+    setHasHint,
+    hintProps,
+    setHintProps,
+    hasMessage,
+    setHasMessage,
+    messageProps,
+    setMessageProps
+  }), [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, {
+    ref: ref
+  })));
+});
+FieldComponent.displayName = 'Field';
+const Field = FieldComponent;
+Field.Hint = Hint;
+Field.Label = Label;
+Field.Message = Message;
+
 var _path$3;
 function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
 var SvgPlusStroke = function SvgPlusStroke(props) {
@@ -1482,7 +1486,7 @@ const OptGroup = React.forwardRef((_ref, ref) => {
     children,
     content,
     icon,
-    label,
+    legend,
     'aria-label': ariaLabel,
     onMouseDown,
     ...props
@@ -1494,9 +1498,9 @@ const OptGroup = React.forwardRef((_ref, ref) => {
   const handleMouseDown = event => event.preventDefault();
   const groupAriaLabel = reactTheming.useText(OptGroup, {
     'aria-label': ariaLabel
-  }, 'aria-label', 'Group', !label );
+  }, 'aria-label', 'Group', !legend );
   const optGroupProps = getOptGroupProps({
-    'aria-label': groupAriaLabel || label
+    'aria-label': groupAriaLabel || legend
   });
   return React__namespace.default.createElement(StyledOption, _extends$5({
     isCompact: isCompact,
@@ -1505,14 +1509,14 @@ const OptGroup = React.forwardRef((_ref, ref) => {
     role: "none"
   }, props, {
     ref: ref
-  }), React__namespace.default.createElement(StyledOptionContent, null, (content || label) && React__namespace.default.createElement(StyledOption, {
+  }), React__namespace.default.createElement(StyledOptionContent, null, (content || legend) && React__namespace.default.createElement(StyledOption, {
     as: "div",
     isCompact: isCompact,
     $type: "header"
   }, icon && React__namespace.default.createElement(StyledOptionTypeIcon, {
     isCompact: isCompact,
     type: "header"
-  }, icon), content || label), React__namespace.default.createElement(StyledOptGroup, _extends$5({
+  }, icon), content || legend), React__namespace.default.createElement(StyledOptGroup, _extends$5({
     isCompact: isCompact
   }, optGroupProps), React__namespace.default.createElement(StyledListboxSeparator, {
     role: "none"
@@ -1522,7 +1526,7 @@ OptGroup.displayName = 'OptGroup';
 OptGroup.propTypes = {
   content: PropTypes__default.default.any,
   icon: PropTypes__default.default.any,
-  label: PropTypes__default.default.string
+  legend: PropTypes__default.default.string
 };
 
 const MenuContext = React.createContext(undefined);
@@ -1609,6 +1613,10 @@ const MenuList = React.forwardRef((_ref, ref) => {
       transform
     }
   } = reactDom.useFloating({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current

package/dist/index.esm.js

@@ -10,14 +10,14 @@ import React__default, { createContext, useContext, cloneElement, Children, forw
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
 import { useCombobox } from '@zendeskgarden/container-combobox';
-import { retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor, getLineHeight, focusStyles, arrowStyles, useText, useDocument, useWindow, PLACEMENT as PLACEMENT$1, getFloatingPlacements, getMenuPosition, getArrowPosition } from '@zendeskgarden/react-theming';
-import { Label as Label$1, Hint as Hint$1, Message as Message$1, VALIDATION } from '@zendeskgarden/react-forms';
+import { retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColorV8, getLineHeight, focusStyles, arrowStyles, useText, useDocument, useWindow, PLACEMENT as PLACEMENT$1, getFloatingPlacements, getMenuPosition, getArrowPosition } from '@zendeskgarden/react-theming';
+import { Field as Field$1, VALIDATION } from '@zendeskgarden/react-forms';
 export { VALIDATION } from '@zendeskgarden/react-forms';
 import { hideVisually, math } from 'polished';
 import { Tag as Tag$1 } from '@zendeskgarden/react-tags';
 import { Button } from '@zendeskgarden/react-buttons';
 import { createPortal } from 'react-dom';
-import { useFloating, offset, flip, size, autoUpdate, autoPlacement } from '@floating-ui/react-dom';
+import { useFloating, offset, flip, size, autoUpdate, platform, autoPlacement } from '@floating-ui/react-dom';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import { Tooltip } from '@zendeskgarden/react-tooltips';
 import { mergeRefs } from 'react-merge-refs';
@@ -73,9 +73,9 @@ const useFieldContext = () => {
 };
 
 const COMPONENT_ID$v = 'dropdowns.combobox.label';
-const StyledLabel = styled(Label$1).attrs({
+const StyledLabel = styled(Field$1.Label).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -85,9 +85,9 @@ StyledLabel.defaultProps = {
 };
 
 const COMPONENT_ID$u = 'dropdowns.combobox.hint';
-const StyledHint = styled(Hint$1).attrs({
+const StyledHint = styled(Field$1.Hint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -97,9 +97,9 @@ StyledHint.defaultProps = {
 };
 
 const COMPONENT_ID$t = 'dropdowns.combobox.message';
-const StyledMessage = styled(Message$1).attrs({
+const StyledMessage = styled(Field$1.Message).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -116,7 +116,7 @@ const sizeStyles$a = props => {
 };
 const StyledCombobox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -128,7 +128,7 @@ StyledCombobox.defaultProps = {
 const COMPONENT_ID$r = 'dropdowns.combobox.container';
 const StyledContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -140,7 +140,7 @@ StyledContainer.defaultProps = {
 const COMPONENT_ID$q = 'dropdowns.combobox.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -152,7 +152,7 @@ StyledField.defaultProps = {
 const COMPONENT_ID$p = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -168,7 +168,7 @@ StyledFloatingListbox.defaultProps = {
 
 const COMPONENT_ID$o = 'dropdowns.combobox.input';
 const colorStyles$8 = props => {
-  const placeholderColor = getColor('neutralHue', 400, props.theme);
+  const placeholderColor = getColorV8('neutralHue', 400, props.theme);
   return css(["background-color:inherit;color:inherit;&::placeholder{opacity:1;color:", ";}"], placeholderColor);
 };
 const getHeight = props => {
@@ -187,7 +187,7 @@ const sizeStyles$9 = props => {
 };
 const StyledInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
@@ -203,7 +203,7 @@ const sizeStyles$8 = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
@@ -229,22 +229,22 @@ const colorStyles$7 = props => {
   let focusBorderColor;
   let focusShade;
   if (props.validation) {
-    borderColor = getColor(hue, SHADE, props.theme);
+    borderColor = getColorV8(hue, SHADE, props.theme);
     hoverBorderColor = borderColor;
     if (props.validation === 'warning') {
-      focusBorderColor = getColor(hue, SHADE + 100, props.theme);
+      focusBorderColor = getColorV8(hue, SHADE + 100, props.theme);
       focusShade = SHADE + 100;
     } else {
       focusBorderColor = borderColor;
     }
   } else {
-    borderColor = getColor('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
+    borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
+    hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
     focusBorderColor = hoverBorderColor;
   }
-  const disabledBackgroundColor = props.isBare ? undefined : getColor('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme);
+  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
@@ -283,7 +283,7 @@ const sizeStyles$7 = props => {
 };
 const StyledTrigger = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
@@ -294,9 +294,9 @@ StyledTrigger.defaultProps = {
 
 const COMPONENT_ID$l = 'dropdowns.combobox.input_icon';
 const colorStyles$6 = props => {
-  const color = getColor('neutralHue', 600, props.theme);
-  const focusColor = getColor('neutralHue', 700, props.theme);
-  const disabledColor = getColor('neutralHue', 400, props.theme);
+  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 &,", "[data-garden-focus-visible='true'] &{color:", ";}", "[aria-disabled='true'] &{color:", ";}"], props.isLabelHovered ? focusColor : color, StyledTrigger, StyledTrigger, StyledTrigger, StyledTrigger, focusColor, StyledTrigger, disabledColor);
 };
 const sizeStyles$6 = props => {
@@ -325,7 +325,7 @@ const StyledInputIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
@@ -340,15 +340,15 @@ const colorStyles$5 = props => {
   let boxShadow;
   if (props.isActive && props.$type !== 'group' && props.$type !== 'header') {
     const hue = props.$type === 'danger' ? 'dangerHue' : 'primaryHue';
-    backgroundColor = getColor(hue, 600, props.theme, 0.08);
-    boxShadow = `inset ${props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md} 0 ${getColor(hue, 600, props.theme)}`;
+    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 = getColor('neutralHue', 400, props.theme);
+  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
   let foregroundColor = props.theme.colors.foreground;
   if (props.$type === 'add') {
-    foregroundColor = getColor('primaryHue', 600, props.theme);
+    foregroundColor = getColorV8('primaryHue', 600, props.theme);
   } else if (props.$type === 'danger') {
-    foregroundColor = getColor('dangerHue', 600, props.theme);
+    foregroundColor = getColorV8('dangerHue', 600, props.theme);
   }
   return css(["box-shadow:", ";background-color:", ";color:", ";&[aria-disabled='true']{background-color:transparent;color:", ";}"], boxShadow, backgroundColor, foregroundColor, disabledForegroundColor);
 };
@@ -362,7 +362,7 @@ const sizeStyles$5 = props => {
 };
 const StyledOption = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -374,7 +374,7 @@ StyledOption.defaultProps = {
 const COMPONENT_ID$j = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -386,7 +386,7 @@ StyledOptionContent.defaultProps = {
 const COMPONENT_ID$i = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
@@ -397,7 +397,7 @@ StyledOptGroup.defaultProps = {
 
 const COMPONENT_ID$h = 'dropdowns.combobox.separator';
 const colorStyles$4 = props => {
-  const backgroundColor = getColor('neutralHue', 200, props.theme);
+  const backgroundColor = getColorV8('neutralHue', 200, props.theme);
   return css(["background-color:", ";"], backgroundColor);
 };
 const sizeStyles$4 = props => {
@@ -407,7 +407,7 @@ const sizeStyles$4 = props => {
 };
 const StyledListboxSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -424,7 +424,7 @@ const sizeStyles$3 = props => {
 };
 const StyledListbox = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
@@ -449,7 +449,7 @@ const StyledOptionIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
@@ -460,7 +460,7 @@ StyledOptionIcon.defaultProps = {
 
 const COMPONENT_ID$e = 'dropdowns.combobox.option.meta';
 const colorStyles$3 = props => {
-  const color = getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme);
+  const color = getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme);
   return css(["color:", ";"], color);
 };
 const sizeStyles$1 = props => {
@@ -470,7 +470,7 @@ const sizeStyles$1 = props => {
 };
 const StyledOptionMeta = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
@@ -486,9 +486,9 @@ const colorStyles$2 = props => {
   if (props.type === 'add' || props.type === 'danger') {
     color = 'inherit';
   } else if (props.type === 'header' || props.type === 'next' || props.type === 'previous') {
-    color = getColor('neutralHue', 600, props.theme);
+    color = getColorV8('neutralHue', 600, props.theme);
   } else {
-    color = getColor('primaryHue', 600, props.theme);
+    color = getColorV8('primaryHue', 600, props.theme);
   }
   return css(["opacity:", ";color:", ";", "[aria-selected='true'] > &{opacity:1;}", "[aria-disabled='true'] > &{color:inherit;}"], opacity, color, StyledOption, StyledOption);
 };
@@ -515,7 +515,7 @@ const StyledOptionTypeIcon = styled(_ref => {
   return cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
@@ -527,23 +527,23 @@ StyledOptionTypeIcon.defaultProps = {
 const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled(Tag$1).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
-})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColor('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["&[aria-disabled='true']{color:", ";}&[hidden]{display:revert;", "}", ";"], props => props.hue ? undefined : getColorV8('neutralHue', 400, props.theme), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledTag.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 const COMPONENT_ID$b = 'dropdowns.combobox.value';
 const colorStyles$1 = props => {
-  const foregroundColor = props.isPlaceholder && getColor('neutralHue', 400, props.theme);
+  const foregroundColor = props.isPlaceholder && getColorV8('neutralHue', 400, props.theme);
   return css(["color:", ";"], foregroundColor);
 };
 const StyledValue = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -559,13 +559,13 @@ StyledValue.defaultProps = {
 
 const COMPONENT_ID$a = 'dropdowns.combobox.tags_button';
 const colorStyles = props => {
-  const color = getColor('primaryHue', 600, props.theme);
+  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$a,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -577,7 +577,7 @@ StyledTagsButton.defaultProps = {
 const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -593,7 +593,7 @@ StyledMenu.defaultProps = {
 const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -605,7 +605,7 @@ StyledFloatingMenu.defaultProps = {
 const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -617,7 +617,7 @@ StyledItem.defaultProps = {
 const COMPONENT_ID$6 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -629,7 +629,7 @@ StyledItemContent.defaultProps = {
 const COMPONENT_ID$5 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -641,7 +641,7 @@ StyledItemGroup.defaultProps = {
 const COMPONENT_ID$4 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -653,7 +653,7 @@ StyledItemIcon.defaultProps = {
 const COMPONENT_ID$3 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -665,7 +665,7 @@ StyledItemMeta.defaultProps = {
 const COMPONENT_ID$2 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -677,7 +677,7 @@ StyledItemTypeIcon.defaultProps = {
 const COMPONENT_ID$1 = 'dropdowns.menu.button';
 const StyledButton = styled(Button).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-5hs2jg-0"
@@ -689,7 +689,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -826,7 +826,7 @@ const toOptions = (children, optionTagProps) => Children.toArray(children).reduc
       const props = option.props;
       const groupOptions = toOptions(props.children, optionTagProps);
       retVal.push({
-        label: props.label,
+        label: props.legend,
         options: groupOptions
       });
     }
@@ -1193,32 +1193,6 @@ Combobox.defaultProps = {
   maxTags: MAX_TAGS
 };
 
-const Field = forwardRef((props, ref) => {
-  const [labelProps, setLabelProps] = useState(undefined);
-  const [hintProps, setHintProps] = useState(undefined);
-  const [messageProps, setMessageProps] = useState(undefined);
-  const [hasHint, setHasHint] = useState(false);
-  const [hasMessage, setHasMessage] = useState(false);
-  const contextValue = useMemo(() => ({
-    labelProps,
-    setLabelProps,
-    hasHint,
-    setHasHint,
-    hintProps,
-    setHintProps,
-    hasMessage,
-    setHasMessage,
-    messageProps,
-    setMessageProps
-  }), [labelProps, setLabelProps, hasHint, setHasHint, hintProps, setHintProps, hasMessage, setHasMessage, messageProps, setMessageProps]);
-  return React__default.createElement(FieldContext.Provider, {
-    value: contextValue
-  }, React__default.createElement(StyledField, _extends$5({}, props, {
-    ref: ref
-  })));
-});
-Field.displayName = 'Field';
-
 const Hint = forwardRef((props, ref) => {
   const {
     hintProps,
@@ -1277,6 +1251,36 @@ Message.propTypes = {
   validationLabel: PropTypes.string
 };
 
+const FieldComponent = forwardRef((props, ref) => {
+  const [labelProps, setLabelProps] = useState(undefined);
+  const [hintProps, setHintProps] = useState(undefined);
+  const [messageProps, setMessageProps] = useState(undefined);
+  const [hasHint, setHasHint] = useState(false);
+  const [hasMessage, setHasMessage] = useState(false);
+  const contextValue = useMemo(() => ({
+    labelProps,
+    setLabelProps,
+    hasHint,
+    setHasHint,
+    hintProps,
+    setHintProps,
+    hasMessage,
+    setHasMessage,
+    messageProps,
+    setMessageProps
+  }), [labelProps, setLabelProps, hasHint, setHasHint, hintProps, setHintProps, hasMessage, setHasMessage, messageProps, setMessageProps]);
+  return React__default.createElement(FieldContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(StyledField, _extends$5({}, props, {
+    ref: ref
+  })));
+});
+FieldComponent.displayName = 'Field';
+const Field = FieldComponent;
+Field.Hint = Hint;
+Field.Label = Label;
+Field.Message = Message;
+
 var _path$3;
 function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
 var SvgPlusStroke = function SvgPlusStroke(props) {
@@ -1458,7 +1462,7 @@ const OptGroup = forwardRef((_ref, ref) => {
     children,
     content,
     icon,
-    label,
+    legend,
     'aria-label': ariaLabel,
     onMouseDown,
     ...props
@@ -1470,9 +1474,9 @@ const OptGroup = forwardRef((_ref, ref) => {
   const handleMouseDown = event => event.preventDefault();
   const groupAriaLabel = useText(OptGroup, {
     'aria-label': ariaLabel
-  }, 'aria-label', 'Group', !label );
+  }, 'aria-label', 'Group', !legend );
   const optGroupProps = getOptGroupProps({
-    'aria-label': groupAriaLabel || label
+    'aria-label': groupAriaLabel || legend
   });
   return React__default.createElement(StyledOption, _extends$5({
     isCompact: isCompact,
@@ -1481,14 +1485,14 @@ const OptGroup = forwardRef((_ref, ref) => {
     role: "none"
   }, props, {
     ref: ref
-  }), React__default.createElement(StyledOptionContent, null, (content || label) && React__default.createElement(StyledOption, {
+  }), React__default.createElement(StyledOptionContent, null, (content || legend) && React__default.createElement(StyledOption, {
     as: "div",
     isCompact: isCompact,
     $type: "header"
   }, icon && React__default.createElement(StyledOptionTypeIcon, {
     isCompact: isCompact,
     type: "header"
-  }, icon), content || label), React__default.createElement(StyledOptGroup, _extends$5({
+  }, icon), content || legend), React__default.createElement(StyledOptGroup, _extends$5({
     isCompact: isCompact
   }, optGroupProps), React__default.createElement(StyledListboxSeparator, {
     role: "none"
@@ -1498,7 +1502,7 @@ OptGroup.displayName = 'OptGroup';
 OptGroup.propTypes = {
   content: PropTypes.any,
   icon: PropTypes.any,
-  label: PropTypes.string
+  legend: PropTypes.string
 };
 
 const MenuContext = createContext(undefined);
@@ -1585,6 +1589,10 @@ const MenuList = forwardRef((_ref, ref) => {
       transform
     }
   } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current

package/dist/typings/elements/combobox/Field.d.ts

@@ -5,7 +5,14 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
+import { Hint } from './Hint';
+import { Label } from './Label';
+import { Message } from './Message';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>> & {
+    Hint: typeof Hint;
+    Label: typeof Label;
+    Message: typeof Message;
+};

package/dist/typings/elements/combobox/Hint.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Field.Hint` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Hint: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/combobox/Label.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ILabelProps } from '../../types';
 /**
+ * @deprecated use `Field.Label` instead
+ *
  * @extends LabelHTMLAttributes<HTMLLabelElement>
  */
 export declare const Label: React.ForwardRefExoticComponent<ILabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/typings/elements/combobox/Message.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IMessageProps } from '../../types';
 /**
+ * @deprecated use `Field.Message` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Message: React.ForwardRefExoticComponent<IMessageProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/types/index.d.ts

@@ -154,7 +154,7 @@ export interface IOptGroupProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'c
     /** Accepts an icon to display */
     icon?: ReactElement;
     /** Sets the text label of the option group */
-    label?: string;
+    legend?: string;
 }
 export interface ITagProps extends Omit<IBaseTagProps, 'isRound' | 'size'> {
     /** @ignore Associates this tag with the given option (internal only) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.5",
   "description": "Components related to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,13 +22,13 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-combobox": "^1.1.3",
+    "@zendeskgarden/container-combobox": "^1.1.4",
     "@zendeskgarden/container-menu": "^0.3.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.3",
-    "@zendeskgarden/react-forms": "^9.0.0-next.3",
-    "@zendeskgarden/react-tags": "^9.0.0-next.3",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.3",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.5",
+    "@zendeskgarden/react-forms": "^9.0.0-next.5",
+    "@zendeskgarden/react-tags": "^9.0.0-next.5",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.5",
     "polished": "^4.0.0",
     "prop-types": "^15.7.2",
     "react-merge-refs": "^2.0.0"
@@ -37,10 +37,10 @@
     "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.3",
+    "@zendeskgarden/react-theming": "^9.0.0-next.5",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -54,5 +54,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
+  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
 }