@zendeskgarden/react-forms 9.0.0-next.21 → 9.0.0-next.23

package/dist/esm/elements/MediaInput.js

@@ -131,11 +131,11 @@ const MediaInput = React__default.forwardRef((_ref, ref) => {
     mediaLayout: true
   }, otherWrapperProps, {
     ref: wrapperRef
-  }), start && React__default.createElement(FauxInput.StartIcon, {
+  }), !!start && React__default.createElement(FauxInput.StartIcon, {
     isDisabled: disabled,
     isFocused: isFocused,
     isHovered: isHovered || isLabelHovered
-  }, start), React__default.createElement(StyledTextMediaInput, combinedProps), end && React__default.createElement(FauxInput.EndIcon, {
+  }, start), React__default.createElement(StyledTextMediaInput, combinedProps), !!end && React__default.createElement(FauxInput.EndIcon, {
     isDisabled: disabled,
     isFocused: isFocused,
     isHovered: isHovered || isLabelHovered

package/dist/esm/elements/Textarea.js

@@ -144,7 +144,7 @@ const Textarea = React__default.forwardRef((_ref, ref) => {
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__default.createElement(StyledTextarea, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTextarea, combinedProps), !!isAutoResizable && React__default.createElement(StyledTextarea, {
     "aria-hidden": true,
     readOnly: true,
     isHidden: true,

package/dist/esm/elements/common/Message.js

@@ -99,7 +99,7 @@ const Message = React__default.forwardRef((_ref, ref) => {
   const ariaLabel = useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
   return React__default.createElement(MessageComponent, Object.assign({
     ref: ref
-  }, combinedProps), validation && React__default.createElement(StyledMessageIcon, {
+  }, combinedProps), !!validation && React__default.createElement(StyledMessageIcon, {
     validation: validation,
     "aria-label": ariaLabel
   }), children);

package/dist/esm/elements/file-list/components/File.js

@@ -76,7 +76,7 @@ const FileComponent = forwardRef((_ref, ref) => {
     focusInset: focusInset,
     validation: validation,
     ref: ref
-  }), validationType && React__default.createElement(StyledFileIcon, {
+  }), !!validationType && React__default.createElement(StyledFileIcon, {
     $isCompact: isCompact,
     $validation: validation
   }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, child => typeof child === 'string' ? React__default.createElement("span", null, child) : child)));

package/dist/esm/elements/tiles/components/Description.js

@@ -55,7 +55,7 @@ const DescriptionComponent = forwardRef((props, ref) => {
   const tilesContext = useTilesContext();
   return React__default.createElement(StyledTileDescription, Object.assign({
     ref: ref,
-    isCentered: tilesContext && tilesContext.isCentered
+    isCentered: tilesContext?.isCentered
   }, props));
 });
 DescriptionComponent.displayName = 'Tiles.Description';

package/dist/esm/elements/tiles/components/Icon.js

@@ -55,7 +55,7 @@ const IconComponent = forwardRef((props, ref) => {
   const tileContext = useTilesContext();
   return React__default.createElement(StyledTileIcon, Object.assign({
     ref: ref,
-    isCentered: tileContext && tileContext.isCentered
+    isCentered: tileContext?.isCentered
   }, props));
 });
 IconComponent.displayName = 'Tiles.Icon';

package/dist/esm/elements/tiles/components/Label.js

@@ -64,7 +64,7 @@ const LabelComponent = forwardRef((props, forwardedRef) => {
   return React__default.createElement(StyledTileLabel, Object.assign({
     ref: mergeRefs([ref, forwardedRef]),
     title: title,
-    isCentered: tilesContext && tilesContext.isCentered
+    isCentered: tilesContext?.isCentered
   }, props));
 });
 LabelComponent.displayName = 'Tiles.Label';

package/dist/esm/styled/checkbox/StyledCheckHint.js

@@ -11,7 +11,7 @@ import { StyledRadioHint } from '../radio/StyledRadioHint.js';
 const COMPONENT_ID = 'forms.checkbox_hint';
 const StyledCheckHint = styled(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"

package/dist/esm/styled/checkbox/StyledCheckInput.js

@@ -65,7 +65,7 @@ const colorStyles = _ref => {
 };
 const StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",

package/dist/esm/styled/checkbox/StyledCheckLabel.js

@@ -11,7 +11,7 @@ import { StyledRadioLabel } from '../radio/StyledRadioLabel.js';
 const COMPONENT_ID = 'forms.checkbox_label';
 const StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"

package/dist/esm/styled/checkbox/StyledCheckMessage.js

@@ -11,7 +11,7 @@ import { StyledRadioMessage } from '../radio/StyledRadioMessage.js';
 const COMPONENT_ID = 'forms.checkbox_message';
 const StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"

package/dist/esm/styled/checkbox/StyledCheckSvg.js

@@ -13,7 +13,7 @@ import { StyledCheckLabel } from './StyledCheckLabel.js';
 const COMPONENT_ID = 'forms.check_svg';
 const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"

package/dist/esm/styled/checkbox/StyledDashSvg.js

@@ -13,7 +13,7 @@ import { StyledCheckLabel } from './StyledCheckLabel.js';
 const COMPONENT_ID = 'forms.dash_svg';
 const StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"

package/dist/esm/styled/common/StyledField.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'forms.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"

package/dist/esm/styled/common/StyledFieldset.js

@@ -12,7 +12,7 @@ const COMPONENT_ID = 'forms.fieldset';
 const StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"

package/dist/esm/styled/common/StyledHint.js

@@ -10,7 +10,7 @@ import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from
 const COMPONENT_ID = 'forms.input_hint';
 const StyledHint = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.21'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"

package/dist/esm/styled/common/StyledLabel.js

@@ -11,7 +11,7 @@ import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from
 const COMPONENT_ID = 'forms.input_label';
 const StyledLabel = styled.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.21'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"

package/dist/esm/styled/common/StyledLegend.js

@@ -12,7 +12,7 @@ const COMPONENT_ID = 'forms.fieldset_legend';
 const StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"

package/dist/esm/styled/common/StyledMessage.js

@@ -45,7 +45,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledMessage = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.21'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"

package/dist/esm/styled/common/StyledMessageIcon.js

@@ -32,8 +32,9 @@ const MessageIcon = _ref => {
 const COMPONENT_ID = 'forms.input_message_icon';
 const StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
-  'aria-hidden': null
+  'data-garden-version': '9.0.0-next.23',
+  'aria-hidden': null,
+  role: 'img'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"

package/dist/esm/styled/file-list/StyledFile.js

@@ -85,7 +85,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"

package/dist/esm/styled/file-list/StyledFileClose.js

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden
 const COMPONENT_ID = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"

package/dist/esm/styled/file-list/StyledFileDelete.js

@@ -11,7 +11,7 @@ import { StyledFileClose } from './StyledFileClose.js';
 const COMPONENT_ID = 'forms.file.delete';
 const StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"

package/dist/esm/styled/file-list/StyledFileIcon.js

@@ -30,7 +30,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledFileIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"

package/dist/esm/styled/file-list/StyledFileList.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'forms.file_list';
 const StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"

package/dist/esm/styled/file-list/StyledFileListItem.js

@@ -12,7 +12,7 @@ import { StyledFileUpload } from '../file-upload/StyledFileUpload.js';
 const COMPONENT_ID = 'forms.file_list.item';
 const StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"

package/dist/esm/styled/file-upload/StyledFileUpload.js

@@ -104,7 +104,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"

package/dist/esm/styled/input-group/StyledInputGroup.js

@@ -23,7 +23,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"

package/dist/esm/styled/radio/StyledRadioHint.js

@@ -12,7 +12,7 @@ import { StyledHint } from '../common/StyledHint.js';
 const COMPONENT_ID = 'forms.radio_hint';
 const StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"

package/dist/esm/styled/radio/StyledRadioInput.js

@@ -109,7 +109,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",

package/dist/esm/styled/radio/StyledRadioLabel.js

@@ -17,7 +17,7 @@ const sizeStyles = props => {
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",

package/dist/esm/styled/radio/StyledRadioMessage.js

@@ -12,7 +12,7 @@ import { StyledMessage } from '../common/StyledMessage.js';
 const COMPONENT_ID = 'forms.radio_message';
 const StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"

package/dist/esm/styled/radio/StyledRadioSvg.js

@@ -13,7 +13,7 @@ import { StyledRadioLabel } from './StyledRadioLabel.js';
 const COMPONENT_ID = 'forms.radio_svg';
 const StyledRadioSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"

package/dist/esm/styled/range/StyledRangeInput.js

@@ -177,7 +177,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledRangeInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize

package/dist/esm/styled/select/StyledSelect.js

@@ -44,7 +44,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledSelect = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",

package/dist/esm/styled/select/StyledSelectWrapper.js

@@ -20,7 +20,7 @@ const sizeStyles = _ref => {
 };
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"

package/dist/esm/styled/text/StyledTextFauxInput.js

@@ -57,7 +57,7 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"

package/dist/esm/styled/text/StyledTextInput.js

@@ -139,7 +139,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTextInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",

package/dist/esm/styled/text/StyledTextMediaFigure.js

@@ -56,7 +56,7 @@ const sizeStyles = props => {
 };
 const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"

package/dist/esm/styled/text/StyledTextMediaInput.js

@@ -11,7 +11,7 @@ import { StyledTextInput } from './StyledTextInput.js';
 const COMPONENT_ID = 'forms.media_input';
 const StyledTextMediaInput = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",

package/dist/esm/styled/text/StyledTextarea.js

@@ -21,7 +21,7 @@ const hiddenStyles = `
 const StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"

package/dist/esm/styled/tiles/StyledTile.js

@@ -102,7 +102,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTile = styled.label.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"

package/dist/esm/styled/tiles/StyledTileDescription.js

@@ -22,7 +22,7 @@ const sizeStyles = _ref => {
 };
 const StyledTileDescription = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"

package/dist/esm/styled/tiles/StyledTileIcon.js

@@ -65,7 +65,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"

package/dist/esm/styled/tiles/StyledTileLabel.js

@@ -22,7 +22,7 @@ const sizeStyles = _ref => {
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"

package/dist/esm/styled/toggle/StyledToggleHint.js

@@ -12,7 +12,7 @@ import { StyledHint } from '../common/StyledHint.js';
 const COMPONENT_ID = 'forms.toggle_hint';
 const StyledToggleHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"

package/dist/esm/styled/toggle/StyledToggleInput.js

@@ -53,7 +53,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"

package/dist/esm/styled/toggle/StyledToggleLabel.js

@@ -16,7 +16,7 @@ const sizeStyles = props => {
 };
 const StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"

package/dist/esm/styled/toggle/StyledToggleMessage.js

@@ -13,7 +13,7 @@ import { StyledMessageIcon } from '../common/StyledMessageIcon.js';
 const COMPONENT_ID = 'forms.toggle_message';
 const StyledToggleMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"

package/dist/esm/styled/toggle/StyledToggleSvg.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'forms.toggle_svg';
 const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"

package/dist/index.cjs.js

@@ -49,7 +49,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -62,7 +62,7 @@ const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled__default.default(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -74,7 +74,7 @@ StyledFieldset.defaultProps = {
 const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled__default.default.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.21'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -90,7 +90,7 @@ const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled__default.default(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -102,7 +102,7 @@ StyledLegend.defaultProps = {
 const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.21'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -210,8 +210,9 @@ const MessageIcon = _ref => {
 const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled__default.default(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.0.0-next.21',
-  'aria-hidden': null
+  'data-garden-version': '9.0.0-next.23',
+  'aria-hidden': null,
+  role: 'img'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -255,7 +256,7 @@ const sizeStyles$g = _ref2 => {
 };
 const StyledMessage = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.21'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -405,7 +406,7 @@ const sizeStyles$f = _ref2 => {
 };
 const StyledTextInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -428,7 +429,7 @@ const hiddenStyles = `
 const StyledTextarea = styled__default.default(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -486,7 +487,7 @@ const sizeStyles$e = props => {
 };
 const StyledTextMediaFigure = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -543,7 +544,7 @@ const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -555,7 +556,7 @@ StyledTextFauxInput.defaultProps = {
 const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -577,7 +578,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -595,7 +596,7 @@ const sizeStyles$d = props => {
 };
 const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -608,7 +609,7 @@ StyledRadioLabel.defaultProps = {
 const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -620,7 +621,7 @@ StyledCheckLabel.defaultProps = {
 const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -632,7 +633,7 @@ StyledRadioHint.defaultProps = {
 const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -740,7 +741,7 @@ const sizeStyles$c = _ref2 => {
 };
 const StyledRadioInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -806,7 +807,7 @@ const colorStyles$8 = _ref => {
 };
 const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -819,7 +820,7 @@ StyledCheckInput.defaultProps = {
 const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -831,7 +832,7 @@ StyledRadioMessage.defaultProps = {
 const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -863,7 +864,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -893,7 +894,7 @@ var SvgDashFill = function SvgDashFill(props) {
 const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -995,7 +996,7 @@ const sizeStyles$b = _ref2 => {
 };
 const StyledFileUpload = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -1007,7 +1008,7 @@ StyledFileUpload.defaultProps = {
 const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -1096,7 +1097,7 @@ const sizeStyles$a = _ref2 => {
 };
 const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -1108,7 +1109,7 @@ StyledFile.defaultProps = {
 const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -1143,7 +1144,7 @@ const sizeStyles$9 = _ref2 => {
 };
 const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -1155,7 +1156,7 @@ StyledFileIcon.defaultProps = {
 const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -1167,7 +1168,7 @@ StyledFileList.defaultProps = {
 const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -1197,7 +1198,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1214,7 +1215,7 @@ const sizeStyles$8 = props => {
 };
 const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1226,7 +1227,7 @@ StyledToggleLabel.defaultProps = {
 const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1278,7 +1279,7 @@ const sizeStyles$7 = _ref2 => {
 };
 const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1290,7 +1291,7 @@ StyledToggleInput.defaultProps = {
 const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1320,7 +1321,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1363,7 +1364,7 @@ const sizeStyles$6 = _ref2 => {
 };
 const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1387,7 +1388,7 @@ const sizeStyles$5 = _ref => {
 };
 const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1562,7 +1563,7 @@ const sizeStyles$4 = _ref2 => {
 };
 const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1687,7 +1688,7 @@ const sizeStyles$3 = _ref2 => {
 };
 const StyledTile = styled__default.default.label.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"
@@ -1710,7 +1711,7 @@ const sizeStyles$2 = _ref => {
 };
 const StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1775,7 +1776,7 @@ const sizeStyles$1 = _ref2 => {
 };
 const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1806,7 +1807,7 @@ const sizeStyles = _ref => {
 };
 const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1905,7 +1906,7 @@ const Message = React__namespace.default.forwardRef((_ref, ref) => {
   const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
   return React__namespace.default.createElement(MessageComponent, Object.assign({
     ref: ref
-  }, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
+  }, combinedProps), !!validation && React__namespace.default.createElement(StyledMessageIcon, {
     validation: validation,
     "aria-label": ariaLabel
   }), children);
@@ -2308,7 +2309,7 @@ const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
-  return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__namespace.default.createElement(StyledTextarea, {
+  return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledTextarea, combinedProps), !!isAutoResizable && React__namespace.default.createElement(StyledTextarea, {
     "aria-hidden": true,
     readOnly: true,
     isHidden: true,
@@ -2518,7 +2519,7 @@ const DescriptionComponent = React.forwardRef((props, ref) => {
   const tilesContext = useTilesContext();
   return React__namespace.default.createElement(StyledTileDescription, Object.assign({
     ref: ref,
-    isCentered: tilesContext && tilesContext.isCentered
+    isCentered: tilesContext?.isCentered
   }, props));
 });
 DescriptionComponent.displayName = 'Tiles.Description';
@@ -2528,7 +2529,7 @@ const IconComponent = React.forwardRef((props, ref) => {
   const tileContext = useTilesContext();
   return React__namespace.default.createElement(StyledTileIcon, Object.assign({
     ref: ref,
-    isCentered: tileContext && tileContext.isCentered
+    isCentered: tileContext?.isCentered
   }, props));
 });
 IconComponent.displayName = 'Tiles.Icon';
@@ -2546,7 +2547,7 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
   return React__namespace.default.createElement(StyledTileLabel, Object.assign({
     ref: reactMergeRefs.mergeRefs([ref, forwardedRef]),
     title: title,
-    isCentered: tilesContext && tilesContext.isCentered
+    isCentered: tilesContext?.isCentered
   }, props));
 });
 LabelComponent.displayName = 'Tiles.Label';
@@ -3151,7 +3152,7 @@ const FileComponent = React.forwardRef((_ref, ref) => {
     focusInset: focusInset,
     validation: validation,
     ref: ref
-  }), validationType && React__namespace.default.createElement(StyledFileIcon, {
+  }), !!validationType && React__namespace.default.createElement(StyledFileIcon, {
     $isCompact: isCompact,
     $validation: validation
   }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, child => typeof child === 'string' ? React__namespace.default.createElement("span", null, child) : child)));
@@ -3242,11 +3243,11 @@ const MediaInput = React__namespace.default.forwardRef((_ref, ref) => {
     mediaLayout: true
   }, otherWrapperProps, {
     ref: wrapperRef
-  }), start && React__namespace.default.createElement(FauxInput.StartIcon, {
+  }), !!start && React__namespace.default.createElement(FauxInput.StartIcon, {
     isDisabled: disabled,
     isFocused: isFocused,
     isHovered: isHovered || isLabelHovered
-  }, start), React__namespace.default.createElement(StyledTextMediaInput, combinedProps), end && React__namespace.default.createElement(FauxInput.EndIcon, {
+  }, start), React__namespace.default.createElement(StyledTextMediaInput, combinedProps), !!end && React__namespace.default.createElement(FauxInput.EndIcon, {
     isDisabled: disabled,
     isFocused: isFocused,
     isHovered: isHovered || isLabelHovered

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

@@ -12,7 +12,7 @@ export declare const FieldComponent: React.ForwardRefExoticComponent<React.HTMLA
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>> & {
+export declare const Field: typeof FieldComponent & {
     Hint: typeof Hint;
     Label: typeof Label;
     Message: typeof Message;

package/dist/typings/elements/common/Fieldset.d.ts

@@ -7,9 +7,11 @@
 import React from 'react';
 import { Legend } from './Legend';
 import { IFieldsetProps } from '../../types';
+declare const FieldsetComponent: React.ForwardRefExoticComponent<IFieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
 /**
  * @extends FieldsetHTMLAttributes<HTMLFieldSetElement>
  */
-export declare const Fieldset: React.ForwardRefExoticComponent<IFieldsetProps & React.RefAttributes<HTMLFieldSetElement>> & {
+export declare const Fieldset: typeof FieldsetComponent & {
     Legend: typeof Legend;
 };
+export {};

package/dist/typings/elements/faux-input/FauxInput.d.ts

@@ -8,10 +8,12 @@ import React from 'react';
 import { IFauxInputProps } from '../../types';
 import { StartIcon } from './components/StartIcon';
 import { EndIcon } from './components/EndIcon';
+declare const FauxInputComponent: React.ForwardRefExoticComponent<IFauxInputProps & React.RefAttributes<HTMLDivElement>>;
 /**
  *  @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const FauxInput: React.ForwardRefExoticComponent<IFauxInputProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const FauxInput: typeof FauxInputComponent & {
     EndIcon: typeof EndIcon;
     StartIcon: typeof StartIcon;
 };
+export {};

package/dist/typings/elements/file-list/FileList.d.ts

@@ -6,9 +6,11 @@
  */
 import React from 'react';
 import { Item } from './components/Item';
+declare const FileListComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
 /**
  * @extends HTMLAttributes<HTMLUListElement>
  */
-export declare const FileList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>> & {
+export declare const FileList: typeof FileListComponent & {
     Item: typeof Item;
 };
+export {};

package/dist/typings/elements/file-list/components/File.d.ts

@@ -8,10 +8,12 @@ import React from 'react';
 import { IFileProps } from '../../../types';
 import { Close } from './Close';
 import { Delete } from './Delete';
+declare const FileComponent: React.ForwardRefExoticComponent<IFileProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const File: React.ForwardRefExoticComponent<IFileProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const File: typeof FileComponent & {
     Close: typeof Close;
     Delete: typeof Delete;
 };
+export {};

package/dist/typings/elements/tiles/Tiles.d.ts

@@ -10,12 +10,14 @@ import { Tile } from './components/Tile';
 import { Description } from './components/Description';
 import { Icon } from './components/Icon';
 import { Label } from './components/Label';
+declare const TilesComponent: React.ForwardRefExoticComponent<ITilesProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Tiles: React.ForwardRefExoticComponent<ITilesProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const Tiles: typeof TilesComponent & {
     Description: typeof Description;
     Icon: typeof Icon;
     Label: typeof Label;
     Tile: typeof Tile;
 };
+export {};

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

@@ -13,5 +13,6 @@ export declare const StyledMessageIcon: import("styled-components").StyledCompon
     'data-garden-id': string;
     'data-garden-version': string;
     'aria-hidden': null;
-} & IStyledMessageIconProps, "aria-hidden" | "data-garden-id" | "data-garden-version">;
+    role: string;
+} & IStyledMessageIconProps, "role" | "aria-hidden" | "data-garden-id" | "data-garden-version">;
 export {};

package/dist/typings/styled/file-list/StyledFileIcon.d.ts

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
 import { FileValidation } from '../../types';
 export interface IStyledFileIconProps {

package/dist/typings/styled/text/StyledTextMediaFigure.d.ts

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
 interface IStyledTextMediaFigureProps {
     $isRotated?: boolean;

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

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 import { IUseFieldReturnValue } from '@zendeskgarden/container-field';
 interface IFieldContext extends IUseFieldReturnValue {
     getMessageProps: (messageProps: any) => any;

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

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 interface IFieldsetContext {
     isCompact?: boolean;
 }

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

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 interface IFileContext {
     isCompact?: boolean;
 }

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

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 type INPUT_CONTEXT_VALUE = 'checkbox' | 'radio' | 'toggle' | undefined;
 export declare const InputContext: import("react").Context<INPUT_CONTEXT_VALUE>;
 /**

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

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 interface IInputGroupContext {
     isCompact?: boolean;
 }

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

@@ -4,7 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/// <reference types="react" />
 import { ITilesProps } from '../types';
 export declare const TilesContext: import("react").Context<Pick<ITilesProps, "value" | "onChange" | "name" | "isCentered"> | undefined>;
 export declare const useTilesContext: () => Pick<ITilesProps, "value" | "onChange" | "name" | "isCentered"> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-forms",
-  "version": "9.0.0-next.21",
+  "version": "9.0.0-next.23",
   "description": "Components relating to form elements in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -30,14 +30,14 @@
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": ">=9.0.0-next",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.21",
-    "@zendeskgarden/svg-icons": "7.1.1",
+    "@zendeskgarden/react-theming": "^9.0.0-next.23",
+    "@zendeskgarden/svg-icons": "7.2.0",
     "react-dropzone": "14.2.3"
   },
   "keywords": [
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
+  "gitHead": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
 }