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

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -40,21 +39,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-function _extends$t() {
-  _extends$t = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$t.apply(this, arguments);
-}
-
 const FieldContext = React.createContext(undefined);
 const useFieldContext = () => {
   const fieldContext = React.useContext(FieldContext);
@@ -64,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -77,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -89,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.7'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -102,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -114,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.7'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -219,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.7',
+  'data-garden-version': '9.0.0-next.9',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
@@ -247,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.7'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -304,8 +288,10 @@ const colorStyles$a = props => {
     theme: props.theme,
     inset: props.focusInset,
     condition: !props.isBare,
-    hue: focusRingHue,
-    shade: focusRingShade,
+    color: {
+      hue: focusRingHue,
+      shade: focusRingShade
+    },
     styles: {
       borderColor: focusBorderColor
     }
@@ -337,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.7',
+  'data-garden-version': '9.0.0-next.9',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -360,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -372,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));
@@ -384,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.7'
+  '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
 };
@@ -440,8 +413,10 @@ const colorStyles$8 = props => {
     theme,
     inset: focusInset,
     condition: !isBare,
-    hue: getValidationHue(validation),
-    shade: validation === 'warning' ? 700 : 600,
+    color: {
+      hue: getValidationHue(validation),
+      shade: validation === 'warning' ? 700 : 600
+    },
     selector: isFocused ? '&' : '&:focus-within',
     styles: {
       borderColor: reactTheming.getColorV8(getValidationHue(validation), 600, theme)
@@ -453,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.7'
+  'data-garden-version': '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -465,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.7',
+  'data-garden-version': '9.0.0-next.9',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -487,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -505,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.7',
+  'data-garden-version': '9.0.0-next.9',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -518,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -530,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -542,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -589,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.7',
+  'data-garden-version': '9.0.0-next.9',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -611,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.7',
+  'data-garden-version': '9.0.0-next.9',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -624,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -636,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -668,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -698,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -716,7 +691,9 @@ const colorStyles$5 = props => {
   const disabledForegroundColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
   return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : reactTheming.getColorV8('neutralHue', 600, props.theme), props.isDragging && polished.rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, polished.rgba(baseColor, 0.08), hoverColor, reactTheming.focusStyles({
     theme: props.theme,
-    hue: baseColor
+    color: {
+      hue: baseColor
+    }
   }), activeColor, polished.rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
 };
 const sizeStyles$8 = props => {
@@ -729,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -741,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -771,7 +748,9 @@ const colorStyles$4 = props => {
   return styled.css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, reactTheming.focusStyles({
     theme: props.theme,
     inset: props.focusInset,
-    hue: focusBorderColor,
+    color: {
+      hue: focusBorderColor
+    },
     styles: {
       borderColor: focusBorderColor
     }
@@ -804,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -816,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -826,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.7'
+  '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
 };
@@ -848,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -860,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -890,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -907,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -919,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -946,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -958,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -988,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1010,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.7',
+  'data-garden-version': '9.0.0-next.9',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1023,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1148,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.7',
+  'data-garden-version': '9.0.0-next.9',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1196,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1228,7 +1199,9 @@ const colorStyles = props => {
   const selectedDisabledBackgroundColor = disabledBorderColor;
   return styled.css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}", " &:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme), borderColor, reactTheming.getColorV8('background', 600 , props.theme), color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, reactTheming.focusStyles({
     theme: props.theme,
-    hue: focusBorderColor,
+    color: {
+      hue: focusBorderColor
+    },
     styles: {
       borderColor: focusBorderColor
     },
@@ -1237,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.7',
+  'data-garden-version': '9.0.0-next.9',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",
@@ -1261,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1294,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1339,7 +1312,7 @@ const Hint = React__namespace.default.forwardRef((props, ref) => {
   if (getHintProps) {
     combinedProps = getHintProps(combinedProps);
   }
-  return React__namespace.default.createElement(HintComponent, _extends$t({
+  return React__namespace.default.createElement(HintComponent, Object.assign({
     ref: ref
   }, combinedProps));
 });
@@ -1391,7 +1364,7 @@ const Message = React__namespace.default.forwardRef((_ref, ref) => {
     combinedProps = getMessageProps(combinedProps);
   }
   const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
-  return React__namespace.default.createElement(MessageComponent, _extends$t({
+  return React__namespace.default.createElement(MessageComponent, Object.assign({
     ref: ref
   }, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
     validation: validation,
@@ -1446,7 +1419,7 @@ const Label$1 = React__namespace.default.forwardRef((props, ref) => {
     };
   }
   if (type === 'radio') {
-    return React__namespace.default.createElement(StyledRadioLabel, _extends$t({
+    return React__namespace.default.createElement(StyledRadioLabel, Object.assign({
       ref: ref
     }, combinedProps), React__namespace.default.createElement(StyledRadioSvg, null), props.children);
   } else if (type === 'checkbox') {
@@ -1469,15 +1442,15 @@ const Label$1 = React__namespace.default.forwardRef((props, ref) => {
       ...combinedProps,
       onClick: containerUtilities.composeEventHandlers(combinedProps.onClick, onLabelSelect)
     };
-    return React__namespace.default.createElement(StyledCheckLabel, _extends$t({
+    return React__namespace.default.createElement(StyledCheckLabel, Object.assign({
       ref: ref
     }, combinedProps), React__namespace.default.createElement(StyledCheckSvg, null), React__namespace.default.createElement(StyledDashSvg, null), props.children);
   } else if (type === 'toggle') {
-    return React__namespace.default.createElement(StyledToggleLabel, _extends$t({
+    return React__namespace.default.createElement(StyledToggleLabel, Object.assign({
       ref: ref
     }, combinedProps), React__namespace.default.createElement(StyledToggleSvg, null), props.children);
   }
-  return React__namespace.default.createElement(StyledLabel, _extends$t({
+  return React__namespace.default.createElement(StyledLabel, Object.assign({
     ref: ref
   }, combinedProps));
 });
@@ -1515,7 +1488,7 @@ const FieldComponent = React__namespace.default.forwardRef((props, ref) => {
   }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
   return React__namespace.default.createElement(FieldContext.Provider, {
     value: fieldProps
-  }, React__namespace.default.createElement(StyledField, _extends$t({}, props, {
+  }, React__namespace.default.createElement(StyledField, Object.assign({}, props, {
     ref: ref
   })));
 });
@@ -1527,7 +1500,7 @@ Field.Message = Message;
 
 const LegendComponent = React.forwardRef((props, ref) => {
   const fieldsetContext = useFieldsetContext();
-  return React__namespace.default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
+  return React__namespace.default.createElement(StyledLegend, Object.assign({}, props, fieldsetContext, {
     ref: ref
   }));
 });
@@ -1540,7 +1513,7 @@ const FieldsetComponent = React.forwardRef((props, ref) => {
   }), [props.isCompact]);
   return React__namespace.default.createElement(FieldsetContext.Provider, {
     value: fieldsetContext
-  }, React__namespace.default.createElement(StyledFieldset, _extends$t({}, props, {
+  }, React__namespace.default.createElement(StyledFieldset, Object.assign({}, props, {
     ref: ref
   })));
 });
@@ -1859,15 +1832,33 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const StartIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, _extends$t({
-  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, _extends$t({
-  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;
 
@@ -1887,7 +1878,7 @@ const FauxInputComponent = React.forwardRef((_ref, ref) => {
   const onBlurHandler = containerUtilities.composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   });
-  return React__namespace.default.createElement(StyledTextFauxInput, _extends$t({
+  return React__namespace.default.createElement(StyledTextFauxInput, Object.assign({
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
     isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
@@ -1974,12 +1965,12 @@ const TileComponent = React__namespace.default.forwardRef((_ref, ref) => {
       onChange: tilesContext.onChange
     };
   }
-  return React__namespace.default.createElement(StyledTile, _extends$t({
+  return React__namespace.default.createElement(StyledTile, Object.assign({
     ref: ref,
     "aria-disabled": disabled,
     isDisabled: disabled,
     isSelected: tilesContext && tilesContext.value === value
-  }, props), children, React__namespace.default.createElement(StyledTileInput, _extends$t({}, inputProps, {
+  }, props), children, React__namespace.default.createElement(StyledTileInput, Object.assign({}, inputProps, {
     disabled: disabled,
     value: value,
     type: "radio",
@@ -1995,7 +1986,7 @@ const Tile = TileComponent;
 
 const DescriptionComponent = React.forwardRef((props, ref) => {
   const tilesContext = useTilesContext();
-  return React__namespace.default.createElement(StyledTileDescription, _extends$t({
+  return React__namespace.default.createElement(StyledTileDescription, Object.assign({
     ref: ref,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
@@ -2005,7 +1996,7 @@ const Description = DescriptionComponent;
 
 const IconComponent = React.forwardRef((props, ref) => {
   const tileContext = useTilesContext();
-  return React__namespace.default.createElement(StyledTileIcon, _extends$t({
+  return React__namespace.default.createElement(StyledTileIcon, Object.assign({
     ref: ref,
     isCentered: tileContext && tileContext.isCentered
   }, props));
@@ -2022,7 +2013,7 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
       setTitle(ref.current.textContent || undefined);
     }
   }, [ref]);
-  return React__namespace.default.createElement(StyledTileLabel, _extends$t({
+  return React__namespace.default.createElement(StyledTileLabel, Object.assign({
     ref: reactMergeRefs.mergeRefs([ref, forwardedRef]),
     title: title,
     isCentered: tilesContext && tilesContext.isCentered
@@ -2058,7 +2049,7 @@ const TilesComponent = React.forwardRef((_ref, ref) => {
   }), [handleOnChange, selectedValue, name, isCentered]);
   return React__namespace.default.createElement(TilesContext.Provider, {
     value: tileContext
-  }, React__namespace.default.createElement("div", _extends$t({
+  }, React__namespace.default.createElement("div", Object.assign({
     ref: ref,
     role: "radiogroup"
   }, props)));
@@ -2089,7 +2080,7 @@ const InputGroup = React__namespace.default.forwardRef((_ref, ref) => {
   }), [isCompact]);
   return React__namespace.default.createElement(InputGroupContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(StyledInputGroup, _extends$t({
+  }, React__namespace.default.createElement(StyledInputGroup, Object.assign({
     ref: ref,
     isCompact: isCompact
   }, props)));
@@ -2105,7 +2096,7 @@ const FileUpload = React__namespace.default.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   return (
-    React__namespace.default.createElement(StyledFileUpload, _extends$t({
+    React__namespace.default.createElement(StyledFileUpload, Object.assign({
       ref: ref,
       "aria-disabled": disabled
     }, props, {
@@ -2124,7 +2115,7 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
   let {
     ...props
   } = _ref;
-  return React__namespace.default.createElement(StyledFileListItem, _extends$t({}, props, {
+  return React__namespace.default.createElement(StyledFileListItem, Object.assign({}, props, {
     ref: ref
   }));
 });
@@ -2135,7 +2126,7 @@ const FileListComponent = React.forwardRef((_ref, ref) => {
   let {
     ...props
   } = _ref;
-  return React__namespace.default.createElement(StyledFileList, _extends$t({}, props, {
+  return React__namespace.default.createElement(StyledFileList, Object.assign({}, props, {
     ref: ref
   }));
 });
@@ -2187,7 +2178,7 @@ const CloseComponent = React__namespace.default.forwardRef((props, ref) => {
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.preventDefault()
   );
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close');
-  return React__namespace.default.createElement(StyledFileClose, _extends$t({
+  return React__namespace.default.createElement(StyledFileClose, Object.assign({
     ref: ref,
     "aria-label": ariaLabel
   }, props, {
@@ -2240,7 +2231,7 @@ const DeleteComponent = React__namespace.default.forwardRef((props, ref) => {
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.preventDefault()
   );
   const ariaLabel = reactTheming.useText(DeleteComponent, props, 'aria-label', 'Delete');
-  return React__namespace.default.createElement(StyledFileDelete, _extends$t({
+  return React__namespace.default.createElement(StyledFileDelete, Object.assign({
     ref: ref,
     "aria-label": ariaLabel
   }, props, {
@@ -2625,13 +2616,13 @@ const FileComponent = React.forwardRef((_ref, ref) => {
   const validationType = validation || type;
   return React__namespace.default.createElement(FileContext.Provider, {
     value: fileContextValue
-  }, React__namespace.default.createElement(StyledFile, _extends$t({}, props, {
+  }, React__namespace.default.createElement(StyledFile, Object.assign({}, props, {
     isCompact: isCompact,
     focusInset: focusInset,
     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';
@@ -2702,7 +2693,7 @@ const MediaInput = React__namespace.default.forwardRef((_ref, ref) => {
     combinedProps = fieldContext.getInputProps(combinedProps);
     isLabelHovered = fieldContext.isLabelHovered;
   }
-  return React__namespace.default.createElement(FauxInput, _extends$t({
+  return React__namespace.default.createElement(FauxInput, Object.assign({
     tabIndex: null,
     onClick: onFauxInputClickHandler,
     onFocus: onFauxInputFocusHandler,