@zendeskgarden/react-forms 9.5.2 → 9.5.3

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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2',
+  'data-garden-version': '9.5.3',
   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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"

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

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'forms.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"

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

@@ -10,7 +10,7 @@ import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-t
 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.5.2'
+  'data-garden-version': props['data-garden-version'] || '9.5.3'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"

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

@@ -11,7 +11,7 @@ import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-t
 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.5.2'
+  'data-garden-version': props['data-garden-version'] || '9.5.3'
 })).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': props['data-garden-version'] || '9.5.3'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"

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

@@ -10,7 +10,7 @@ import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'forms.input_message_icon';
 const StyledMessageIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"

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

@@ -10,7 +10,7 @@ import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"

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

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'forms.file_list';
 const StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2',
+  'data-garden-version': '9.5.3',
   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.5.2',
+  'data-garden-version': '9.5.3',
   $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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2',
+  'data-garden-version': '9.5.3',
   type: 'range',
   style: {
     backgroundSize: props.$hasLowerTrack ? props.$backgroundSize : undefined

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.5.2',
+  'data-garden-version': '9.5.3',
   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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"

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

@@ -4,12 +4,9 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import React__default from 'react';
-import { renderToString } from 'react-dom/server';
 import styled, { css } from 'styled-components';
 import { math, em } from 'polished';
 import { componentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
-import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 import { StyledHint } from '../common/StyledHint.js';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledMessage } from '../common/StyledMessage.js';
@@ -88,9 +85,10 @@ const colorStyles = _ref => {
     theme,
     variable: 'foreground.subtle'
   });
-  const calendarPickerIcon = renderToString(React__default.createElement(SvgChevronDownStroke, {
-    color: calendarPickerColor
-  }));
+  const calendarPickerIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" color="${calendarPickerColor}">
+      <path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"/>
+    </svg>`;
   const calendarPickerBackgroundImage = `url("data:image/svg+xml,${encodeURIComponent(calendarPickerIcon)}")`;
   return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{opacity:1;color:", ";}&::-webkit-datetime-edit{color:", ";}&::-webkit-calendar-picker-indicator{background-image:", ";}&[readonly],&[aria-readonly='true']{background-color:", ";}&:hover{border-color:", ";}", " &::-webkit-calendar-picker-indicator:focus-visible{", "}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], $isHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, placeholderColor, placeholderColor, calendarPickerBackgroundImage, readOnlyBackgroundColor, hoverBorderColor, focusStyles({
     theme,
@@ -139,7 +137,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTextInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.5.2',
+  'data-garden-version': '9.5.3',
   '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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2',
+  'data-garden-version': '9.5.3',
   $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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"

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

@@ -11,7 +11,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'forms.toggle_svg';
 const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"

package/dist/index.cjs.js

@@ -11,7 +11,6 @@ var containerField = require('@zendeskgarden/container-field');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
-var server = require('react-dom/server');
 var PropTypes = require('prop-types');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactMergeRefs = require('react-merge-refs');
@@ -49,7 +48,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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -59,7 +58,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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -68,7 +67,7 @@ const StyledFieldset = styled__default.default(StyledField).attrs({
 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.5.2'
+  'data-garden-version': props['data-garden-version'] || '9.5.3'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -81,7 +80,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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -90,7 +89,7 @@ const StyledLegend = styled__default.default(StyledLabel).attrs({
 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.5.2'
+  'data-garden-version': props['data-garden-version'] || '9.5.3'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -102,7 +101,7 @@ const StyledHint = styled__default.default.div.attrs(props => ({
 const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -143,28 +142,12 @@ 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.5.2'
+  'data-garden-version': props['data-garden-version'] || '9.5.3'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
 })(["direction:", ";display:inline-block;position:relative;vertical-align:middle;", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;}", ";"], props => props.theme.rtl && 'rtl', sizeStyles$g, colorStyles$d, StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, reactTheming.componentStyles);
 
-var _path$n;
-function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-  })));
-};
-
 const COMPONENT_ID$z = 'forms.input';
 const isInvalid = validation => {
   return validation === 'warning' || validation === 'error';
@@ -239,9 +222,10 @@ const colorStyles$c = _ref => {
     theme,
     variable: 'foreground.subtle'
   });
-  const calendarPickerIcon = server.renderToString(React__namespace.default.createElement(SvgChevronDownStroke, {
-    color: calendarPickerColor
-  }));
+  const calendarPickerIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" color="${calendarPickerColor}">
+      <path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"/>
+    </svg>`;
   const calendarPickerBackgroundImage = `url("data:image/svg+xml,${encodeURIComponent(calendarPickerIcon)}")`;
   return styled.css(["border-color:", ";background-color:", ";color:", ";&::placeholder{opacity:1;color:", ";}&::-webkit-datetime-edit{color:", ";}&::-webkit-calendar-picker-indicator{background-image:", ";}&[readonly],&[aria-readonly='true']{background-color:", ";}&:hover{border-color:", ";}", " &::-webkit-calendar-picker-indicator:focus-visible{", "}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], $isHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, placeholderColor, placeholderColor, calendarPickerBackgroundImage, readOnlyBackgroundColor, hoverBorderColor, reactTheming.focusStyles({
     theme,
@@ -290,7 +274,7 @@ const sizeStyles$f = _ref2 => {
 };
 const StyledTextInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.5.2',
+  'data-garden-version': '9.5.3',
   'aria-invalid': isInvalid(props.$validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -310,7 +294,7 @@ const hiddenStyles = `
 const StyledTextarea = styled__default.default(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -365,7 +349,7 @@ const sizeStyles$e = props => {
 };
 const StyledTextMediaFigure = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -419,7 +403,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.5.2'
+  'data-garden-version': '9.5.3'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -428,7 +412,7 @@ const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props
 const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.5.2',
+  'data-garden-version': '9.5.3',
   $isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -447,7 +431,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -462,7 +446,7 @@ const sizeStyles$d = props => {
 };
 const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.5.2',
+  'data-garden-version': '9.5.3',
   $isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -472,7 +456,7 @@ const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
 const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -481,7 +465,7 @@ const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
 const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -490,7 +474,7 @@ const StyledRadioHint = styled__default.default(StyledHint).attrs({
 const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -595,7 +579,7 @@ const sizeStyles$c = _ref2 => {
 };
 const StyledRadioInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.5.2',
+  'data-garden-version': '9.5.3',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -658,7 +642,7 @@ const colorStyles$8 = _ref => {
 };
 const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.5.2',
+  'data-garden-version': '9.5.3',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -668,7 +652,7 @@ const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
 const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -677,23 +661,23 @@ const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
 const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
 })(["", ";"], reactTheming.componentStyles);
 
-var _path$m;
-function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
+var _path$n;
+function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
 var SvgCheckSmFill = function SvgCheckSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -706,23 +690,23 @@ 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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
 })(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, reactTheming.componentStyles);
 
-var _path$l;
-function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
+var _path$m;
+function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
 var SvgDashFill = function SvgDashFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeWidth: 2,
@@ -733,7 +717,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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -832,7 +816,7 @@ const sizeStyles$b = _ref2 => {
 };
 const StyledFileUpload = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -841,7 +825,7 @@ const StyledFileUpload = styled__default.default.div.attrs({
 const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -927,7 +911,7 @@ const sizeStyles$a = _ref2 => {
 };
 const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -936,7 +920,7 @@ const StyledFile = styled__default.default.div.attrs({
 const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -968,7 +952,7 @@ const sizeStyles$9 = _ref2 => {
 };
 const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -977,7 +961,7 @@ const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attr
 const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -986,16 +970,16 @@ const StyledFileList = styled__default.default.ul.attrs({
 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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
 })(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, reactTheming.componentStyles);
 
 var _circle$5;
-function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
+function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
 var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
@@ -1013,7 +997,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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1027,7 +1011,7 @@ const sizeStyles$8 = props => {
 };
 const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1036,7 +1020,7 @@ const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
 const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1085,7 +1069,7 @@ const sizeStyles$7 = _ref2 => {
 };
 const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1094,16 +1078,16 @@ const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
 const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
 })(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), reactTheming.componentStyles);
 
 var _circle$4;
-function _extends$o() { return _extends$o = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$o.apply(null, arguments); }
+function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
 var SvgCircleSmFill = function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1121,7 +1105,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.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1161,7 +1145,7 @@ const sizeStyles$6 = _ref2 => {
 };
 const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.5.2',
+  'data-garden-version': '9.5.3',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1182,7 +1166,7 @@ const sizeStyles$5 = _ref => {
 };
 const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1354,7 +1338,7 @@ const sizeStyles$4 = _ref2 => {
 };
 const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.5.2',
+  'data-garden-version': '9.5.3',
   type: 'range',
   style: {
     backgroundSize: props.$hasLowerTrack ? props.$backgroundSize : undefined
@@ -1479,7 +1463,7 @@ const sizeStyles$3 = _ref2 => {
 };
 const StyledTile = styled__default.default.label.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"
@@ -1499,7 +1483,7 @@ const sizeStyles$2 = _ref => {
 };
 const StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1561,7 +1545,7 @@ const sizeStyles$1 = _ref2 => {
 };
 const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1586,7 +1570,7 @@ const sizeStyles = _ref => {
 };
 const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.5.2'
+  'data-garden-version': '9.5.3'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1639,9 +1623,9 @@ const FILE_VALIDATION = ['success', 'error'];
 const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
 
 var _g$2, _circle$3;
-function _extends$n() { return _extends$n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$n.apply(null, arguments); }
+function _extends$o() { return _extends$o = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$o.apply(null, arguments); }
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1666,17 +1650,17 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   })));
 };
 
-var _path$k, _circle$2;
-function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
+var _path$l, _circle$2;
+function _extends$n() { return _extends$n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$n.apply(null, arguments); }
 var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -1690,9 +1674,9 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
 };
 
 var _g$1;
-function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
+function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
 var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2247,6 +2231,22 @@ Toggle.propTypes = {
   isCompact: PropTypes__default.default.bool
 };
 
+var _path$k;
+function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
+
 const StartIconComponent = _ref => {
   let {
     isDisabled,

package/dist/typings/styled/text/StyledTextInput.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.
  */
-import React from 'react';
 import { Validation } from '../../types';
 export interface IStyledTextInputProps {
     $isCompact?: boolean;
@@ -14,6 +13,6 @@ export interface IStyledTextInputProps {
     $focusInset?: boolean;
     $validation?: Validation;
 }
-export declare const StyledTextInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLInputElement> | null | undefined;
+export declare const StyledTextInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
 }>, IStyledTextInputProps>, IStyledTextInputProps>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-forms",
-  "version": "9.5.2",
+  "version": "9.5.3",
   "description": "Components relating to form elements in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9",
-    "@zendeskgarden/react-theming": "^9.5.2",
+    "@zendeskgarden/react-theming": "^9.5.3",
     "@zendeskgarden/svg-icons": "7.5.0",
     "react-dropzone": "14.3.5"
   },
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "8810b8dc249ca752f9adfa8972a72860cc18c77b"
+  "gitHead": "cbdef06df89b0fede92524c469d7c2c232de16ac"
 }