@zendeskgarden/react-forms 8.53.3 → 8.54.2

package/dist/index.cjs.js

@@ -209,7 +209,7 @@ var useFieldContext = function useFieldContext() {
 var COMPONENT_ID$K = 'forms.field';
 var StyledField = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -226,7 +226,7 @@ var COMPONENT_ID$J = 'forms.fieldset';
 var StyledFieldset = styled__default["default"](StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -242,7 +242,7 @@ StyledFieldset.defaultProps = {
 var COMPONENT_ID$I = 'forms.input_label';
 var StyledLabel = styled__default["default"].label.attrs({
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -277,7 +277,7 @@ var COMPONENT_ID$H = 'forms.fieldset_legend';
 var StyledLegend = styled__default["default"](StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -291,7 +291,7 @@ StyledLegend.defaultProps = {
 var COMPONENT_ID$G = 'forms.input_hint';
 var StyledHint = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -411,7 +411,8 @@ var MessageIcon = function MessageIcon(_ref) {
 var COMPONENT_ID$F = 'forms.input_message_icon';
 var StyledMessageIcon = styled__default["default"](MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2',
+  'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -444,7 +445,7 @@ var validationStyles = function validationStyles(props) {
 var COMPONENT_ID$E = 'forms.input_message';
 var StyledMessage = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -536,7 +537,7 @@ var sizeStyles$f = function sizeStyles(props) {
 var StyledTextInput = styled__default["default"].input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$D,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'aria-invalid': isInvalid(props.validation)
   };
 }).withConfig({
@@ -572,7 +573,7 @@ var hiddenStyles = "\n  visibility: hidden;\n  position: absolute;\n  overflow:
 var StyledTextarea = styled__default["default"](StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -623,7 +624,7 @@ function (_ref) {
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -647,7 +648,7 @@ var StyledTextFauxInput = styled__default["default"](StyledTextInput).attrs(func
     'aria-readonly': props.isReadOnly,
     'aria-disabled': props.isDisabled,
     'data-garden-id': COMPONENT_ID$A,
-    'data-garden-version': '8.53.3'
+    'data-garden-version': '8.54.2'
   };
 }).withConfig({
   displayName: "StyledTextFauxInput",
@@ -672,7 +673,7 @@ StyledTextFauxInput.defaultProps = {
 var COMPONENT_ID$z = 'forms.media_input';
 var StyledTextMediaInput = styled__default["default"](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -697,7 +698,7 @@ var itemStyles = function itemStyles(props) {
 };
 var StyledInputGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -721,7 +722,7 @@ var sizeStyles$d = function sizeStyles(props) {
 };
 var StyledRadioLabel = styled__default["default"](StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -738,7 +739,7 @@ StyledRadioLabel.defaultProps = {
 var COMPONENT_ID$w = 'forms.checkbox_label';
 var StyledCheckLabel = styled__default["default"](StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -752,7 +753,7 @@ StyledCheckLabel.defaultProps = {
 var COMPONENT_ID$v = 'forms.radio_hint';
 var StyledRadioHint = styled__default["default"](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -770,7 +771,7 @@ StyledRadioHint.defaultProps = {
 var COMPONENT_ID$u = 'forms.checkbox_hint';
 var StyledCheckHint = styled__default["default"](StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -814,7 +815,7 @@ var sizeStyles$c = function sizeStyles(props) {
 };
 var StyledRadioInput = styled__default["default"].input.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -846,7 +847,7 @@ var colorStyles$8 = function colorStyles(props) {
 };
 var StyledCheckInput = styled__default["default"](StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -865,7 +866,7 @@ StyledCheckInput.defaultProps = {
 var COMPONENT_ID$r = 'forms.radio_message';
 var StyledRadioMessage = styled__default["default"](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -883,7 +884,7 @@ StyledRadioMessage.defaultProps = {
 var COMPONENT_ID$q = 'forms.checkbox_message';
 var StyledCheckMessage = styled__default["default"](StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -919,7 +920,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 var COMPONENT_ID$p = 'forms.check_svg';
 var StyledCheckSvg = styled__default["default"](SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -953,7 +954,7 @@ var SvgDashFill = function SvgDashFill(props) {
 var COMPONENT_ID$o = 'forms.dash_svg';
 var StyledDashSvg = styled__default["default"](SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -984,7 +985,7 @@ var sizeStyles$b = function sizeStyles(props) {
 };
 var StyledFileUpload = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -1004,7 +1005,7 @@ StyledFileUpload.defaultProps = {
 var COMPONENT_ID$m = 'forms.file.close';
 var StyledFileClose = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -1047,7 +1048,7 @@ var sizeStyles$a = function sizeStyles(props) {
 };
 var StyledFile = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -1063,7 +1064,7 @@ StyledFile.defaultProps = {
 var COMPONENT_ID$k = 'forms.file.delete';
 var StyledFileDelete = styled__default["default"](StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -1086,7 +1087,7 @@ var StyledFileIcon = styled__default["default"](function (_ref) {
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -1106,7 +1107,7 @@ StyledFileIcon.defaultProps = {
 var COMPONENT_ID$i = 'forms.file_list';
 var StyledFileList = styled__default["default"].ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -1120,7 +1121,7 @@ StyledFileList.defaultProps = {
 var COMPONENT_ID$h = 'forms.file_list.item';
 var StyledFileListItem = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -1156,7 +1157,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 var COMPONENT_ID$g = 'forms.radio_svg';
 var StyledRadioSvg = styled__default["default"](SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1175,7 +1176,7 @@ var sizeStyles$9 = function sizeStyles(props) {
 };
 var StyledToggleLabel = styled__default["default"](StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1191,7 +1192,7 @@ StyledToggleLabel.defaultProps = {
 var COMPONENT_ID$e = 'forms.toggle_hint';
 var StyledToggleHint = styled__default["default"](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1224,7 +1225,7 @@ var sizeStyles$8 = function sizeStyles(props) {
 };
 var StyledToggleInput = styled__default["default"](StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1242,7 +1243,7 @@ StyledToggleInput.defaultProps = {
 var COMPONENT_ID$c = 'forms.toggle_message';
 var StyledToggleMessage = styled__default["default"](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1284,7 +1285,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 var COMPONENT_ID$b = 'forms.toggle_svg';
 var StyledToggleSvg = styled__default["default"](SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1308,7 +1309,7 @@ var sizeStyles$7 = function sizeStyles(props) {
 };
 var StyledSelect = styled__default["default"](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1327,7 +1328,7 @@ StyledSelect.defaultProps = {
 var COMPONENT_ID$9 = 'forms.select_wrapper';
 var StyledSelectWrapper = styled__default["default"](StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1380,7 +1381,7 @@ var sizeStyles$6 = function sizeStyles(props) {
 var StyledRangeInput = styled__default["default"].input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$8,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     type: 'range',
     style: {
       backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1412,7 +1413,7 @@ var COMPONENT_ID$7 = 'forms.slider';
 var StyledSlider = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$7,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1452,7 +1453,7 @@ var sizeStyles$5 = function sizeStyles(props) {
 var StyledSliderThumb = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1496,7 +1497,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 var StyledSliderTrack = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1523,7 +1524,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledSliderTrackRail = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1554,7 +1555,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledTileIcon = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1594,7 +1595,7 @@ var colorStyles = function colorStyles(props) {
 var StyledTile = styled__default["default"].label.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'data-garden-focus-visible': props.isFocused,
     'data-garden-selected': props.isSelected
   };
@@ -1632,7 +1633,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledTileDescription = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1675,7 +1676,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTileLabel = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1696,7 +1697,7 @@ StyledTileLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$g = ["getInputProps"];
+var _excluded$g = ["getInputProps", "getMessageProps"];
 var Field = React__default["default"].forwardRef(function (props, ref) {
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1704,40 +1705,46 @@ var Field = React__default["default"].forwardRef(function (props, ref) {
       setHasHint = _useState2[1];
   var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      isLabelActive = _useState4[0],
-      setIsLabelActive = _useState4[1];
+      hasMessage = _useState4[0],
+      setHasMessage = _useState4[1];
   var _useState5 = React.useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      isLabelHovered = _useState6[0],
-      setIsLabelHovered = _useState6[1];
+      isLabelActive = _useState6[0],
+      setIsLabelActive = _useState6[1];
+  var _useState7 = React.useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isLabelHovered = _useState8[0],
+      setIsLabelHovered = _useState8[1];
   var multiThumbRangeRef = React.useRef(null);
-  var getMessageProps = function getMessageProps(messageProps) {
-    return _objectSpread2({
-      role: 'alert'
-    }, messageProps);
-  };
   var _useField = containerField.useField(props.id),
       _getInputProps = _useField.getInputProps,
+      _getMessageProps = _useField.getMessageProps,
       propGetters = _objectWithoutProperties(_useField, _excluded$g);
   var fieldProps = React.useMemo(function () {
     return _objectSpread2(_objectSpread2({}, propGetters), {}, {
-      getMessageProps: getMessageProps,
-      isLabelActive: isLabelActive,
-      setIsLabelActive: setIsLabelActive,
-      isLabelHovered: isLabelHovered,
-      setIsLabelHovered: setIsLabelHovered,
-      multiThumbRangeRef: multiThumbRangeRef,
-      getInputProps: function getInputProps(options, describeOptions) {
+      getInputProps: function getInputProps(options) {
+        var describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         return _getInputProps(options, _objectSpread2(_objectSpread2({}, describeOptions), {}, {
-          isDescribed: hasHint
+          isDescribed: hasHint,
+          hasMessage: hasMessage
         }));
       },
-      setHint: function setHint(hintPresent) {
-        return setHasHint(hintPresent);
+      getMessageProps: function getMessageProps(options) {
+        return _getMessageProps(_objectSpread2({
+          role: 'alert'
+        }, options));
       },
-      hasHint: hasHint
+      isLabelActive: isLabelActive,
+      setIsLabelActive: setIsLabelActive,
+      isLabelHovered: isLabelHovered,
+      setIsLabelHovered: setIsLabelHovered,
+      hasHint: hasHint,
+      setHasHint: setHasHint,
+      hasMessage: hasMessage,
+      setHasMessage: setHasMessage,
+      multiThumbRangeRef: multiThumbRangeRef
     });
-  }, [propGetters, isLabelActive, isLabelHovered, hasHint, _getInputProps]);
+  }, [propGetters, _getInputProps, _getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
   return React__default["default"].createElement(FieldContext.Provider, {
     value: fieldProps
   }, React__default["default"].createElement(StyledField, _extends$t({}, props, {
@@ -1786,18 +1793,21 @@ var useInputContext = function useInputContext() {
 };
 
 var Hint = React__default["default"].forwardRef(function (props, ref) {
-  var fieldContext = useFieldContext();
+  var _ref = useFieldContext() || {},
+      hasHint = _ref.hasHint,
+      setHasHint = _ref.setHasHint,
+      getHintProps = _ref.getHintProps;
   var type = useInputContext();
   React.useEffect(function () {
-    if (fieldContext && !fieldContext.hasHint) {
-      fieldContext.setHint(true);
+    if (!hasHint && setHasHint) {
+      setHasHint(true);
     }
     return function () {
-      if (fieldContext && fieldContext.hasHint) {
-        fieldContext.setHint(false);
+      if (hasHint && setHasHint) {
+        setHasHint(false);
       }
     };
-  }, [fieldContext]);
+  }, [hasHint, setHasHint]);
   var HintComponent;
   if (type === 'checkbox') {
     HintComponent = StyledCheckHint;
@@ -1809,8 +1819,8 @@ var Hint = React__default["default"].forwardRef(function (props, ref) {
     HintComponent = StyledHint;
   }
   var combinedProps = props;
-  if (fieldContext) {
-    combinedProps = fieldContext.getHintProps(combinedProps);
+  if (getHintProps) {
+    combinedProps = getHintProps(combinedProps);
   }
   return React__default["default"].createElement(HintComponent, _extends$t({
     ref: ref
@@ -1897,13 +1907,27 @@ var VALIDATION = ['success', 'warning', 'error'];
 var FILE_VALIDATION = ['success', 'error'];
 var FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
 
-var _excluded$f = ["validation", "children"];
+var _excluded$f = ["validation", "validationLabel", "children"];
 var Message = React__default["default"].forwardRef(function (_ref, ref) {
   var validation = _ref.validation,
+      validationLabel = _ref.validationLabel,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$f);
-  var fieldContext = useFieldContext();
+  var _ref2 = useFieldContext() || {},
+      hasMessage = _ref2.hasMessage,
+      setHasMessage = _ref2.setHasMessage,
+      getMessageProps = _ref2.getMessageProps;
   var type = useInputContext();
+  React.useEffect(function () {
+    if (!hasMessage && setHasMessage) {
+      setHasMessage(true);
+    }
+    return function () {
+      if (hasMessage && setHasMessage) {
+        setHasMessage(false);
+      }
+    };
+  }, [hasMessage, setHasMessage]);
   var MessageComponent;
   if (type === 'checkbox') {
     MessageComponent = StyledCheckMessage;
@@ -1915,20 +1939,24 @@ var Message = React__default["default"].forwardRef(function (_ref, ref) {
     MessageComponent = StyledMessage;
   }
   var combinedProps = _objectSpread2({
-    validation: validation
+    validation: validation,
+    validationLabel: validationLabel
   }, props);
-  if (fieldContext) {
-    combinedProps = fieldContext.getMessageProps(combinedProps);
+  if (getMessageProps) {
+    combinedProps = getMessageProps(combinedProps);
   }
+  var ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation);
   return React__default["default"].createElement(MessageComponent, _extends$t({
     ref: ref
   }, combinedProps), validation && React__default["default"].createElement(StyledMessageIcon, {
-    validation: validation
+    validation: validation,
+    "aria-label": ariaLabel
   }), children);
 });
 Message.displayName = 'Message';
 Message.propTypes = {
-  validation: PropTypes__default["default"].oneOf(VALIDATION)
+  validation: PropTypes__default["default"].oneOf(VALIDATION),
+  validationLabel: PropTypes__default["default"].string
 };
 
 var _excluded$e = ["indeterminate", "children"];
@@ -1993,9 +2021,7 @@ var Input = React__default["default"].forwardRef(function (_ref, ref) {
     });
   }
   if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps, {
-      isDescribed: true
-    });
+    combinedProps = fieldContext.getInputProps(combinedProps);
   }
   return React__default["default"].createElement(StyledTextInput, combinedProps);
 });

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, Children, useState, useRef, useMemo, forwardRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { useField } from '@zendeskgarden/container-field';
 import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, useDocument } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, useText, useDocument } from '@zendeskgarden/react-theming';
 import { hideVisually, math, rgba, em } from 'polished';
 import PropTypes from 'prop-types';
 import { composeEventHandlers, KEY_CODES, getControlledValue } from '@zendeskgarden/container-utilities';
@@ -179,7 +179,7 @@ var useFieldContext = function useFieldContext() {
 var COMPONENT_ID$K = 'forms.field';
 var StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -196,7 +196,7 @@ var COMPONENT_ID$J = 'forms.fieldset';
 var StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -212,7 +212,7 @@ StyledFieldset.defaultProps = {
 var COMPONENT_ID$I = 'forms.input_label';
 var StyledLabel = styled.label.attrs({
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -247,7 +247,7 @@ var COMPONENT_ID$H = 'forms.fieldset_legend';
 var StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -261,7 +261,7 @@ StyledLegend.defaultProps = {
 var COMPONENT_ID$G = 'forms.input_hint';
 var StyledHint = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -381,7 +381,8 @@ var MessageIcon = function MessageIcon(_ref) {
 var COMPONENT_ID$F = 'forms.input_message_icon';
 var StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2',
+  'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -414,7 +415,7 @@ var validationStyles = function validationStyles(props) {
 var COMPONENT_ID$E = 'forms.input_message';
 var StyledMessage = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -506,7 +507,7 @@ var sizeStyles$f = function sizeStyles(props) {
 var StyledTextInput = styled.input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$D,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'aria-invalid': isInvalid(props.validation)
   };
 }).withConfig({
@@ -542,7 +543,7 @@ var hiddenStyles = "\n  visibility: hidden;\n  position: absolute;\n  overflow:
 var StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -593,7 +594,7 @@ function (_ref) {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -617,7 +618,7 @@ var StyledTextFauxInput = styled(StyledTextInput).attrs(function (props) {
     'aria-readonly': props.isReadOnly,
     'aria-disabled': props.isDisabled,
     'data-garden-id': COMPONENT_ID$A,
-    'data-garden-version': '8.53.3'
+    'data-garden-version': '8.54.2'
   };
 }).withConfig({
   displayName: "StyledTextFauxInput",
@@ -642,7 +643,7 @@ StyledTextFauxInput.defaultProps = {
 var COMPONENT_ID$z = 'forms.media_input';
 var StyledTextMediaInput = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -667,7 +668,7 @@ var itemStyles = function itemStyles(props) {
 };
 var StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -691,7 +692,7 @@ var sizeStyles$d = function sizeStyles(props) {
 };
 var StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -708,7 +709,7 @@ StyledRadioLabel.defaultProps = {
 var COMPONENT_ID$w = 'forms.checkbox_label';
 var StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -722,7 +723,7 @@ StyledCheckLabel.defaultProps = {
 var COMPONENT_ID$v = 'forms.radio_hint';
 var StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -740,7 +741,7 @@ StyledRadioHint.defaultProps = {
 var COMPONENT_ID$u = 'forms.checkbox_hint';
 var StyledCheckHint = styled(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -784,7 +785,7 @@ var sizeStyles$c = function sizeStyles(props) {
 };
 var StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -816,7 +817,7 @@ var colorStyles$8 = function colorStyles(props) {
 };
 var StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -835,7 +836,7 @@ StyledCheckInput.defaultProps = {
 var COMPONENT_ID$r = 'forms.radio_message';
 var StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -853,7 +854,7 @@ StyledRadioMessage.defaultProps = {
 var COMPONENT_ID$q = 'forms.checkbox_message';
 var StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -889,7 +890,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 var COMPONENT_ID$p = 'forms.check_svg';
 var StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -923,7 +924,7 @@ var SvgDashFill = function SvgDashFill(props) {
 var COMPONENT_ID$o = 'forms.dash_svg';
 var StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -954,7 +955,7 @@ var sizeStyles$b = function sizeStyles(props) {
 };
 var StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -974,7 +975,7 @@ StyledFileUpload.defaultProps = {
 var COMPONENT_ID$m = 'forms.file.close';
 var StyledFileClose = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -1017,7 +1018,7 @@ var sizeStyles$a = function sizeStyles(props) {
 };
 var StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -1033,7 +1034,7 @@ StyledFile.defaultProps = {
 var COMPONENT_ID$k = 'forms.file.delete';
 var StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -1056,7 +1057,7 @@ var StyledFileIcon = styled(function (_ref) {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -1076,7 +1077,7 @@ StyledFileIcon.defaultProps = {
 var COMPONENT_ID$i = 'forms.file_list';
 var StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -1090,7 +1091,7 @@ StyledFileList.defaultProps = {
 var COMPONENT_ID$h = 'forms.file_list.item';
 var StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -1126,7 +1127,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 var COMPONENT_ID$g = 'forms.radio_svg';
 var StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1145,7 +1146,7 @@ var sizeStyles$9 = function sizeStyles(props) {
 };
 var StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1161,7 +1162,7 @@ StyledToggleLabel.defaultProps = {
 var COMPONENT_ID$e = 'forms.toggle_hint';
 var StyledToggleHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1194,7 +1195,7 @@ var sizeStyles$8 = function sizeStyles(props) {
 };
 var StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1212,7 +1213,7 @@ StyledToggleInput.defaultProps = {
 var COMPONENT_ID$c = 'forms.toggle_message';
 var StyledToggleMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1254,7 +1255,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 var COMPONENT_ID$b = 'forms.toggle_svg';
 var StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1278,7 +1279,7 @@ var sizeStyles$7 = function sizeStyles(props) {
 };
 var StyledSelect = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1297,7 +1298,7 @@ StyledSelect.defaultProps = {
 var COMPONENT_ID$9 = 'forms.select_wrapper';
 var StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.53.3',
+  'data-garden-version': '8.54.2',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1350,7 +1351,7 @@ var sizeStyles$6 = function sizeStyles(props) {
 var StyledRangeInput = styled.input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$8,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     type: 'range',
     style: {
       backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1382,7 +1383,7 @@ var COMPONENT_ID$7 = 'forms.slider';
 var StyledSlider = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$7,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1422,7 +1423,7 @@ var sizeStyles$5 = function sizeStyles(props) {
 var StyledSliderThumb = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1466,7 +1467,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 var StyledSliderTrack = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1493,7 +1494,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledSliderTrackRail = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1524,7 +1525,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1564,7 +1565,7 @@ var colorStyles = function colorStyles(props) {
 var StyledTile = styled.label.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.53.3',
+    'data-garden-version': '8.54.2',
     'data-garden-focus-visible': props.isFocused,
     'data-garden-selected': props.isSelected
   };
@@ -1602,7 +1603,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledTileDescription = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1645,7 +1646,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.3'
+  'data-garden-version': '8.54.2'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1666,7 +1667,7 @@ StyledTileLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$g = ["getInputProps"];
+var _excluded$g = ["getInputProps", "getMessageProps"];
 var Field = React__default.forwardRef(function (props, ref) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1674,40 +1675,46 @@ var Field = React__default.forwardRef(function (props, ref) {
       setHasHint = _useState2[1];
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      isLabelActive = _useState4[0],
-      setIsLabelActive = _useState4[1];
+      hasMessage = _useState4[0],
+      setHasMessage = _useState4[1];
   var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      isLabelHovered = _useState6[0],
-      setIsLabelHovered = _useState6[1];
+      isLabelActive = _useState6[0],
+      setIsLabelActive = _useState6[1];
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isLabelHovered = _useState8[0],
+      setIsLabelHovered = _useState8[1];
   var multiThumbRangeRef = useRef(null);
-  var getMessageProps = function getMessageProps(messageProps) {
-    return _objectSpread2({
-      role: 'alert'
-    }, messageProps);
-  };
   var _useField = useField(props.id),
       _getInputProps = _useField.getInputProps,
+      _getMessageProps = _useField.getMessageProps,
       propGetters = _objectWithoutProperties(_useField, _excluded$g);
   var fieldProps = useMemo(function () {
     return _objectSpread2(_objectSpread2({}, propGetters), {}, {
-      getMessageProps: getMessageProps,
-      isLabelActive: isLabelActive,
-      setIsLabelActive: setIsLabelActive,
-      isLabelHovered: isLabelHovered,
-      setIsLabelHovered: setIsLabelHovered,
-      multiThumbRangeRef: multiThumbRangeRef,
-      getInputProps: function getInputProps(options, describeOptions) {
+      getInputProps: function getInputProps(options) {
+        var describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         return _getInputProps(options, _objectSpread2(_objectSpread2({}, describeOptions), {}, {
-          isDescribed: hasHint
+          isDescribed: hasHint,
+          hasMessage: hasMessage
         }));
       },
-      setHint: function setHint(hintPresent) {
-        return setHasHint(hintPresent);
+      getMessageProps: function getMessageProps(options) {
+        return _getMessageProps(_objectSpread2({
+          role: 'alert'
+        }, options));
       },
-      hasHint: hasHint
+      isLabelActive: isLabelActive,
+      setIsLabelActive: setIsLabelActive,
+      isLabelHovered: isLabelHovered,
+      setIsLabelHovered: setIsLabelHovered,
+      hasHint: hasHint,
+      setHasHint: setHasHint,
+      hasMessage: hasMessage,
+      setHasMessage: setHasMessage,
+      multiThumbRangeRef: multiThumbRangeRef
     });
-  }, [propGetters, isLabelActive, isLabelHovered, hasHint, _getInputProps]);
+  }, [propGetters, _getInputProps, _getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
   return React__default.createElement(FieldContext.Provider, {
     value: fieldProps
   }, React__default.createElement(StyledField, _extends$t({}, props, {
@@ -1756,18 +1763,21 @@ var useInputContext = function useInputContext() {
 };
 
 var Hint = React__default.forwardRef(function (props, ref) {
-  var fieldContext = useFieldContext();
+  var _ref = useFieldContext() || {},
+      hasHint = _ref.hasHint,
+      setHasHint = _ref.setHasHint,
+      getHintProps = _ref.getHintProps;
   var type = useInputContext();
   useEffect(function () {
-    if (fieldContext && !fieldContext.hasHint) {
-      fieldContext.setHint(true);
+    if (!hasHint && setHasHint) {
+      setHasHint(true);
     }
     return function () {
-      if (fieldContext && fieldContext.hasHint) {
-        fieldContext.setHint(false);
+      if (hasHint && setHasHint) {
+        setHasHint(false);
       }
     };
-  }, [fieldContext]);
+  }, [hasHint, setHasHint]);
   var HintComponent;
   if (type === 'checkbox') {
     HintComponent = StyledCheckHint;
@@ -1779,8 +1789,8 @@ var Hint = React__default.forwardRef(function (props, ref) {
     HintComponent = StyledHint;
   }
   var combinedProps = props;
-  if (fieldContext) {
-    combinedProps = fieldContext.getHintProps(combinedProps);
+  if (getHintProps) {
+    combinedProps = getHintProps(combinedProps);
   }
   return React__default.createElement(HintComponent, _extends$t({
     ref: ref
@@ -1867,13 +1877,27 @@ var VALIDATION = ['success', 'warning', 'error'];
 var FILE_VALIDATION = ['success', 'error'];
 var FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
 
-var _excluded$f = ["validation", "children"];
+var _excluded$f = ["validation", "validationLabel", "children"];
 var Message = React__default.forwardRef(function (_ref, ref) {
   var validation = _ref.validation,
+      validationLabel = _ref.validationLabel,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$f);
-  var fieldContext = useFieldContext();
+  var _ref2 = useFieldContext() || {},
+      hasMessage = _ref2.hasMessage,
+      setHasMessage = _ref2.setHasMessage,
+      getMessageProps = _ref2.getMessageProps;
   var type = useInputContext();
+  useEffect(function () {
+    if (!hasMessage && setHasMessage) {
+      setHasMessage(true);
+    }
+    return function () {
+      if (hasMessage && setHasMessage) {
+        setHasMessage(false);
+      }
+    };
+  }, [hasMessage, setHasMessage]);
   var MessageComponent;
   if (type === 'checkbox') {
     MessageComponent = StyledCheckMessage;
@@ -1885,20 +1909,24 @@ var Message = React__default.forwardRef(function (_ref, ref) {
     MessageComponent = StyledMessage;
   }
   var combinedProps = _objectSpread2({
-    validation: validation
+    validation: validation,
+    validationLabel: validationLabel
   }, props);
-  if (fieldContext) {
-    combinedProps = fieldContext.getMessageProps(combinedProps);
+  if (getMessageProps) {
+    combinedProps = getMessageProps(combinedProps);
   }
+  var ariaLabel = useText(Message, combinedProps, 'validationLabel', validation);
   return React__default.createElement(MessageComponent, _extends$t({
     ref: ref
   }, combinedProps), validation && React__default.createElement(StyledMessageIcon, {
-    validation: validation
+    validation: validation,
+    "aria-label": ariaLabel
   }), children);
 });
 Message.displayName = 'Message';
 Message.propTypes = {
-  validation: PropTypes.oneOf(VALIDATION)
+  validation: PropTypes.oneOf(VALIDATION),
+  validationLabel: PropTypes.string
 };
 
 var _excluded$e = ["indeterminate", "children"];
@@ -1963,9 +1991,7 @@ var Input = React__default.forwardRef(function (_ref, ref) {
     });
   }
   if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps, {
-      isDescribed: true
-    });
+    combinedProps = fieldContext.getInputProps(combinedProps);
   }
   return React__default.createElement(StyledTextInput, combinedProps);
 });

package/dist/typings/styled/common/StyledMessageIcon.d.ts

@@ -12,5 +12,6 @@ interface IStyledMessageIconProps {
 export declare const StyledMessageIcon: import("styled-components").StyledComponent<React.FC<IStyledMessageIconProps>, import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-} & IStyledMessageIconProps, "data-garden-id" | "data-garden-version">;
+    'aria-hidden': null;
+} & IStyledMessageIconProps, "aria-hidden" | "data-garden-id" | "data-garden-version">;
 export {};

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

@@ -26,6 +26,8 @@ export interface ILabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 export interface IMessageProps extends HTMLAttributes<HTMLDivElement> {
     /** Applies validation state styling */
     validation?: Validation;
+    /** Defines the aria-label for the validation icon */
+    validationLabel?: string;
 }
 export interface IRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Applies compact styling */

package/dist/typings/utils/useFieldContext.d.ts

@@ -13,8 +13,10 @@ interface IFieldContext extends IUseFieldPropGetters {
     setIsLabelHovered: (isLabelHovered: boolean) => void;
     setIsLabelActive: (isLabelActive: boolean) => void;
     multiThumbRangeRef: MutableRefObject<HTMLDivElement | null>;
-    setHint: (hintPresent: boolean) => void;
+    setHasHint: (hintPresent: boolean) => void;
     hasHint: boolean;
+    setHasMessage: (messagePresent: boolean) => void;
+    hasMessage: boolean;
 }
 export declare const FieldContext: import("react").Context<IFieldContext | undefined>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-forms",
-  "version": "8.53.3",
+  "version": "8.54.2",
   "description": "Components relating to form elements in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-field": "^1.3.6",
+    "@zendeskgarden/container-field": "^2.1.0",
     "@zendeskgarden/container-utilities": "^0.7.0",
     "lodash.debounce": "^4.0.8",
     "polished": "^4.0.0",
@@ -36,8 +36,8 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.7",
-    "@zendeskgarden/react-theming": "^8.53.3",
-    "@zendeskgarden/svg-icons": "6.32.0",
+    "@zendeskgarden/react-theming": "^8.54.2",
+    "@zendeskgarden/svg-icons": "6.33.0",
     "react-dropzone": "11.7.1"
   },
   "keywords": [
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "5b868ed7c2501f9589286959c4b4c47b571c6608"
+  "gitHead": "fe53d209ce56dbab13d6d97b896d48ddfb5fe088"
 }