@zendeskgarden/react-forms 9.0.0-next.8 → 9.0.0-next.9

package/dist/esm/elements/faux-input/components/EndIcon.js

@@ -50,9 +50,18 @@ import '../../../styled/tiles/StyledTileIcon.js';
 import '../../../styled/tiles/StyledTileInput.js';
 import '../../../styled/tiles/StyledTileLabel.js';
 
-const EndIconComponent = props => React__default.createElement(StyledTextMediaFigure, Object.assign({
-  position: "end"
-}, props));
+const EndIconComponent = _ref => {
+  let {
+    isDisabled,
+    isRotated,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledTextMediaFigure, Object.assign({
+    $position: "end",
+    $isDisabled: isDisabled,
+    $isRotated: isRotated
+  }, props));
+};
 EndIconComponent.displayName = 'FauxInput.EndIcon';
 const EndIcon = EndIconComponent;
 

package/dist/esm/elements/faux-input/components/StartIcon.js

@@ -50,9 +50,18 @@ import '../../../styled/tiles/StyledTileIcon.js';
 import '../../../styled/tiles/StyledTileInput.js';
 import '../../../styled/tiles/StyledTileLabel.js';
 
-const StartIconComponent = props => React__default.createElement(StyledTextMediaFigure, Object.assign({
-  position: "start"
-}, props));
+const StartIconComponent = _ref => {
+  let {
+    isDisabled,
+    isRotated,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledTextMediaFigure, Object.assign({
+    $position: "start",
+    $isDisabled: isDisabled,
+    $isRotated: isRotated
+  }, props));
+};
 StartIconComponent.displayName = 'FauxInput.StartIcon';
 const StartIcon = StartIconComponent;
 

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

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

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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"

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

@@ -21,7 +21,7 @@ const colorStyles = props => {
 };
 const StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"

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

@@ -10,7 +10,7 @@ import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } fro
 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.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"

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

@@ -11,7 +11,7 @@ import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } fro
 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.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"

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

@@ -28,7 +28,7 @@ const validationStyles = props => {
 const COMPONENT_ID = 'forms.input_message';
 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.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"

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

@@ -32,7 +32,7 @@ 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.8',
+  'data-garden-version': '9.0.0-next.9',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",

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

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

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

@@ -10,7 +10,7 @@ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgard
 const COMPONENT_ID = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"

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

@@ -4,26 +4,17 @@
 * 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, { Children } from 'react';
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.file.icon';
-const StyledFileIcon = styled(_ref => {
-  let {
-    children,
-    isCompact,
-    theme,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
+const StyledFileIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
-})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.$isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledFileIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"

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

@@ -35,7 +35,7 @@ const sizeStyles = props => {
 };
 const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"

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

@@ -48,7 +48,7 @@ const sizeStyles = props => {
 };
 const StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   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.8',
+  'data-garden-version': '9.0.0-next.9',
   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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"

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

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

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

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

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

@@ -12,7 +12,7 @@ import { StyledSelect } from './StyledSelect.js';
 const COMPONENT_ID = 'forms.select_wrapper';
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"

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

@@ -49,7 +49,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.8'
+  'data-garden-version': '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"

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

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

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

@@ -5,15 +5,14 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import React__default, { Children } from 'react';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.media_figure';
 const colorStyles = props => {
   let shade = 600;
-  if (props.isDisabled) {
+  if (props.$isDisabled) {
     shade = 400;
-  } else if (props.isHovered || props.isFocused) {
+  } else if (props.$isHovered || props.$isFocused) {
     shade = 700;
   }
   return css(["color:", ";"], getColorV8('neutralHue', shade, props.theme));
@@ -23,33 +22,20 @@ const sizeStyles = props => {
   const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
   const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
   let margin;
-  if (props.position === 'start') {
+  if (props.$position === 'start') {
     margin = props.theme.rtl ? marginLast : marginFirst;
   } else {
     margin = props.theme.rtl ? marginFirst : marginLast;
   }
   return css(["margin:", ";width:", ";height:", ";"], margin, size, size);
 };
-const StyledTextMediaFigure = styled(
-_ref => {
-  let {
-    children,
-    position,
-    isHovered,
-    isFocused,
-    isDisabled,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
+const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles(props), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles(props), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTextMediaFigure.defaultProps = {
   theme: DEFAULT_THEME
 };

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.8',
+  'data-garden-version': '9.0.0-next.9',
   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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"

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

@@ -42,7 +42,7 @@ const colorStyles = props => {
 };
 const StyledTile = styled.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",

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

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

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

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

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

@@ -24,7 +24,7 @@ const sizeStyles = props => {
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"

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

@@ -28,7 +28,7 @@ const sizeStyles = props => {
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"

package/dist/index.cjs.js

@@ -48,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.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -61,7 +61,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -73,7 +73,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.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -86,7 +86,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -98,7 +98,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.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -203,7 +203,7 @@ 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.8',
+  'data-garden-version': '9.0.0-next.9',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
@@ -231,7 +231,7 @@ const validationStyles = props => {
 const COMPONENT_ID$A = 'forms.input_message';
 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.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -323,7 +323,7 @@ const sizeStyles$c = props => {
 };
 const StyledTextInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -346,7 +346,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -358,9 +358,9 @@ StyledTextarea.defaultProps = {
 const COMPONENT_ID$x = 'forms.media_figure';
 const colorStyles$9 = props => {
   let shade = 600;
-  if (props.isDisabled) {
+  if (props.$isDisabled) {
     shade = 400;
-  } else if (props.isHovered || props.isFocused) {
+  } else if (props.$isHovered || props.$isFocused) {
     shade = 700;
   }
   return styled.css(["color:", ";"], reactTheming.getColorV8('neutralHue', shade, props.theme));
@@ -370,33 +370,20 @@ const sizeStyles$b = props => {
   const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
   const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
   let margin;
-  if (props.position === 'start') {
+  if (props.$position === 'start') {
     margin = props.theme.rtl ? marginLast : marginFirst;
   } else {
     margin = props.theme.rtl ? marginFirst : marginLast;
   }
   return styled.css(["margin:", ";width:", ";height:", ";"], margin, size, size);
 };
-const StyledTextMediaFigure = styled__default.default(
-_ref => {
-  let {
-    children,
-    position,
-    isHovered,
-    isFocused,
-    isDisabled,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledTextMediaFigure = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles$9(props), props => sizeStyles$b(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles$9(props), props => sizeStyles$b(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledTextMediaFigure.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -441,7 +428,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.8'
+  'data-garden-version': '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -453,7 +440,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.8',
+  'data-garden-version': '9.0.0-next.9',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -475,7 +462,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -493,7 +480,7 @@ const sizeStyles$a = props => {
 };
 const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -506,7 +493,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -518,7 +505,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -530,7 +517,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -577,7 +564,7 @@ const sizeStyles$9 = props => {
 };
 const StyledRadioInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -599,7 +586,7 @@ const colorStyles$6 = props => {
 };
 const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -612,7 +599,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -624,7 +611,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -656,7 +643,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -686,7 +673,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -719,7 +706,7 @@ const sizeStyles$8 = props => {
 };
 const StyledFileUpload = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -731,7 +718,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -796,7 +783,7 @@ const sizeStyles$7 = props => {
 };
 const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -808,7 +795,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -818,21 +805,13 @@ StyledFileDelete.defaultProps = {
 };
 
 const COMPONENT_ID$f = 'forms.file.icon';
-const StyledFileIcon = styled__default.default(_ref => {
-  let {
-    children,
-    isCompact,
-    theme,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
-})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.$isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledFileIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -840,7 +819,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -852,7 +831,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -882,7 +861,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -899,7 +878,7 @@ const sizeStyles$6 = props => {
 };
 const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -911,7 +890,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -938,7 +917,7 @@ const sizeStyles$5 = props => {
 };
 const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -950,7 +929,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -980,7 +959,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.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1002,7 +981,7 @@ const sizeStyles$4 = props => {
 };
 const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1015,7 +994,7 @@ StyledSelect.defaultProps = {
 const COMPONENT_ID$5 = 'forms.select_wrapper';
 const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1140,7 +1119,7 @@ const sizeStyles$3 = props => {
 };
 const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1188,7 +1167,7 @@ const sizeStyles$2 = props => {
 };
 const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1231,7 +1210,7 @@ const colorStyles = props => {
 };
 const StyledTile = styled__default.default.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",
@@ -1255,7 +1234,7 @@ const sizeStyles$1 = props => {
 };
 const StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1288,7 +1267,7 @@ const sizeStyles = props => {
 };
 const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1853,15 +1832,33 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const StartIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
-  position: "start"
-}, props));
+const StartIconComponent = _ref => {
+  let {
+    isDisabled,
+    isRotated,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
+    $position: "start",
+    $isDisabled: isDisabled,
+    $isRotated: isRotated
+  }, props));
+};
 StartIconComponent.displayName = 'FauxInput.StartIcon';
 const StartIcon = StartIconComponent;
 
-const EndIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
-  position: "end"
-}, props));
+const EndIconComponent = _ref => {
+  let {
+    isDisabled,
+    isRotated,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
+    $position: "end",
+    $isDisabled: isDisabled,
+    $isRotated: isRotated
+  }, props));
+};
 EndIconComponent.displayName = 'FauxInput.EndIcon';
 const EndIcon = EndIconComponent;
 
@@ -2625,7 +2622,7 @@ const FileComponent = React.forwardRef((_ref, ref) => {
     validation: validation,
     ref: ref
   }), validationType && React__namespace.default.createElement(StyledFileIcon, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, child => typeof child === 'string' ? React__namespace.default.createElement("span", null, child) : child)));
 });
 FileComponent.displayName = 'File';

package/dist/typings/elements/faux-input/components/EndIcon.d.ts

@@ -10,6 +10,6 @@ import { IFauxInputIconProps } from '../../../types';
  * @extends SVGAttributes<SVGElement>
  */
 export declare const EndIcon: {
-    (props: IFauxInputIconProps): React.JSX.Element;
+    ({ isDisabled, isRotated, ...props }: IFauxInputIconProps): React.JSX.Element;
     displayName: string;
 };

package/dist/typings/elements/faux-input/components/StartIcon.d.ts

@@ -10,6 +10,6 @@ import { IFauxInputIconProps } from '../../../types';
  * @extends SVGAttributes<SVGElement>
  */
 export declare const StartIcon: {
-    (props: IFauxInputIconProps): React.JSX.Element;
+    ({ isDisabled, isRotated, ...props }: IFauxInputIconProps): React.JSX.Element;
     displayName: string;
 };

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

@@ -4,8 +4,8 @@
  * 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';
-export declare const StyledFileIcon: import("styled-components").StyledComponent<({ children, isCompact, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
+/// <reference types="react" />
+export declare const StyledFileIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

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

@@ -4,16 +4,16 @@
  * 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 React from 'react';
 interface IStyledTextMediaFigureProps {
-    isRotated?: boolean;
-    isHovered?: boolean;
-    isFocused?: boolean;
-    isDisabled?: boolean;
-    position: 'start' | 'end';
+    $isRotated?: boolean;
+    $isHovered?: boolean;
+    $isFocused?: boolean;
+    $isDisabled?: boolean;
+    $position: 'start' | 'end';
 }
-export declare const StyledTextMediaFigure: import("styled-components").StyledComponent<({ children, position, isHovered, isFocused, isDisabled, isRotated, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledTextMediaFigure: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledTextMediaFigureProps, "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-forms",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "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.0.0-next.8",
+    "@zendeskgarden/react-theming": "^9.0.0-next.9",
     "@zendeskgarden/svg-icons": "7.0.0",
     "react-dropzone": "14.2.3"
   },
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }