@zendeskgarden/react-forms 9.0.0-next.2 → 9.0.0-next.4

package/dist/index.esm.js

@@ -6,15 +6,14 @@
  */
 
 import * as React from 'react';
-import React__default, { createContext, useContext, Children, useState, useRef, useMemo, forwardRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import React__default, { createContext, useContext, Children, useState, useMemo, forwardRef, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 import { useField } from '@zendeskgarden/container-field';
-import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, focusStyles, SELECTOR_FOCUS_VISIBLE, getFocusBoxShadow, useText, useDocument } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, focusStyles, SELECTOR_FOCUS_VISIBLE, getFocusBoxShadow, useText } from '@zendeskgarden/react-theming';
 import { hideVisually, math, em, rgba } from 'polished';
 import PropTypes from 'prop-types';
 import { composeEventHandlers, getControlledValue } from '@zendeskgarden/container-utilities';
 import { mergeRefs } from 'react-merge-refs';
-import { useSlider } from '@zendeskgarden/container-slider';
 
 function _extends$t() {
   _extends$t = Object.assign ? Object.assign.bind() : function (target) {
@@ -37,64 +36,64 @@ const useFieldContext = () => {
   return fieldContext;
 };
 
-const COMPONENT_ID$K = 'forms.field';
+const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$G,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
-})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID$K, props));
+})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID$G, props));
 StyledField.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$J = 'forms.fieldset';
+const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
-  'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$F,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
-})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID$J, props));
+})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID$F, props));
 StyledFieldset.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$I = 'forms.input_label';
+const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled.label.attrs(props => ({
-  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$I,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.2'
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.4'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
-})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$I, props));
+})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$E, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$H = 'forms.fieldset_legend';
+const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
-  'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$D,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
-})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$H, props));
+})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$D, props));
 StyledLegend.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$G = 'forms.input_hint';
+const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled.div.attrs(props => ({
-  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$G,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.2'
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.4'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
-})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$G, props));
+})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$C, props));
 StyledHint.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -192,15 +191,15 @@ const MessageIcon = _ref => {
   }
   return retVal;
 };
-const COMPONENT_ID$F = 'forms.input_message_icon';
+const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled(MessageIcon).attrs({
-  'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$B,
+  'data-garden-version': '9.0.0-next.4',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
-})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$F, props));
+})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$B, props));
 StyledMessageIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -220,23 +219,23 @@ const validationStyles = props => {
   }
   return css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
 };
-const COMPONENT_ID$E = 'forms.input_message';
+const COMPONENT_ID$A = 'forms.input_message';
 const StyledMessage = styled.div.attrs(props => ({
-  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.2'
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.4'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
-})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles(props), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID$E, props));
+})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles(props), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID$A, props));
 StyledMessage.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$D = 'forms.input';
+const COMPONENT_ID$z = 'forms.input';
 const isInvalid = validation => {
   return validation === 'warning' || validation === 'error';
 };
-const colorStyles$c = props => {
+const colorStyles$a = props => {
   const HUE = 'primaryHue';
   const SHADE = 600;
   const placeholderColor = getColor('neutralHue', SHADE - 200, props.theme);
@@ -287,7 +286,7 @@ const colorStyles$c = props => {
     }
   }), disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles$f = props => {
+const sizeStyles$c = props => {
   const fontSize = props.theme.fontSizes.md;
   const paddingHorizontal = `${props.theme.space.base * 3}px`;
   let height;
@@ -312,18 +311,18 @@ const sizeStyles$f = props => {
   return css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
 };
 const StyledTextInput = styled.input.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$z,
+  'data-garden-version': '9.0.0-next.4',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
   componentId: "sc-k12n8x-0"
-})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', props => sizeStyles$f(props), props => colorStyles$c(props), props => retrieveComponentStyles(COMPONENT_ID$D, props));
+})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', props => sizeStyles$c(props), props => colorStyles$a(props), props => retrieveComponentStyles(COMPONENT_ID$z, props));
 StyledTextInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$C = 'forms.textarea';
+const COMPONENT_ID$y = 'forms.textarea';
 const hiddenStyles = `
   visibility: hidden;
   position: absolute;
@@ -335,18 +334,18 @@ const hiddenStyles = `
 `;
 const StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
-  'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$y,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
-})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID$C, props));
+})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID$y, props));
 StyledTextarea.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$B = 'forms.media_figure';
-const colorStyles$b = props => {
+const COMPONENT_ID$x = 'forms.media_figure';
+const colorStyles$9 = props => {
   let shade = 600;
   if (props.isDisabled) {
     shade = 400;
@@ -355,7 +354,7 @@ const colorStyles$b = props => {
   }
   return css(["color:", ";"], getColor('neutralHue', shade, props.theme));
 };
-const sizeStyles$e = props => {
+const sizeStyles$b = props => {
   const size = props.theme.iconSizes.md;
   const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
   const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
@@ -381,17 +380,17 @@ _ref => {
   } = _ref;
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
-  'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '9.0.0-next.4'
 }).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$b(props), props => sizeStyles$e(props), props => retrieveComponentStyles(COMPONENT_ID$B, 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 => retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledTextMediaFigure.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$A = 'forms.faux_input';
+const COMPONENT_ID$w = 'forms.faux_input';
 const VALIDATION_HUES = {
   success: 'successHue',
   warning: 'warningHue',
@@ -404,7 +403,7 @@ function getValidationHue(validation) {
   }
   return defaultHue;
 }
-const colorStyles$a = props => {
+const colorStyles$8 = props => {
   const {
     theme,
     validation,
@@ -428,30 +427,30 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   as: 'div',
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
-  'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '9.0.0-next.4'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
-})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;", " & > ", "{vertical-align:", ";", "{box-shadow:unset;}}& > ", "{flex-shrink:", ";}", ";"], props => props.mediaLayout ? 'inline-flex' : 'inline-block', props => props.mediaLayout && 'baseline', props => props.mediaLayout && !props.isDisabled ? 'text' : 'default', colorStyles$a, StyledTextInput, props => !props.mediaLayout && 'baseline', SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.mediaLayout && '0', props => retrieveComponentStyles(COMPONENT_ID$A, props));
+})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;", " & > ", "{vertical-align:", ";", "{box-shadow:unset;}}& > ", "{flex-shrink:", ";}", ";"], props => props.mediaLayout ? 'inline-flex' : 'inline-block', props => props.mediaLayout && 'baseline', props => props.mediaLayout && !props.isDisabled ? 'text' : 'default', colorStyles$8, StyledTextInput, props => !props.mediaLayout && 'baseline', SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.mediaLayout && '0', props => retrieveComponentStyles(COMPONENT_ID$w, props));
 StyledTextFauxInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$z = 'forms.media_input';
+const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled(StyledTextInput).attrs({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.0.0-next.4',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
   componentId: "sc-12i9xfi-0"
-})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$z, props));
+})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledTextMediaInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$y = 'forms.input_group';
+const COMPONENT_ID$u = 'forms.input_group';
 const positionStyles = props => {
   const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
   return css(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin, StyledTextInput);
@@ -462,73 +461,73 @@ const itemStyles = props => {
   return css(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", "[data-garden-focus-visible],& > button[data-garden-focus-visible],& > ", ":active,& > button:active{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > *:not(:first-child){margin-", ":-", ";}& > *:first-child:not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
 };
 const StyledInputGroup = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
-})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), props => retrieveComponentStyles(COMPONENT_ID$y, props));
+})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), props => retrieveComponentStyles(COMPONENT_ID$u, props));
 StyledInputGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$x = 'forms.radio_label';
-const sizeStyles$d = props => {
+const COMPONENT_ID$t = 'forms.radio_label';
+const sizeStyles$a = props => {
   const size = props.theme.space.base * 4;
   const padding = size + props.theme.space.base * 2;
   const lineHeight = props.theme.space.base * 5;
   return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight);
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
-  'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.0.0-next.4',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
   componentId: "sc-1aq2e5t-0"
-})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), props => retrieveComponentStyles(COMPONENT_ID$x, props));
+})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$a(props), props => retrieveComponentStyles(COMPONENT_ID$t, props));
 StyledRadioLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$w = 'forms.checkbox_label';
+const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled(StyledRadioLabel).attrs({
-  'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$w, props));
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledCheckLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$v = 'forms.radio_hint';
+const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled(StyledHint).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$v, props));
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledRadioHint.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$u = 'forms.checkbox_hint';
+const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled(StyledRadioHint).attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$u, props));
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledCheckHint.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$t = 'forms.radio';
-const colorStyles$9 = props => {
+const COMPONENT_ID$p = 'forms.radio';
+const colorStyles$7 = props => {
   const SHADE = 600;
   const borderColor = getColor('neutralHue', SHADE - 300, props.theme);
   const backgroundColor = props.theme.colors.background;
@@ -553,7 +552,7 @@ const colorStyles$9 = props => {
     selector: `&:focus-visible ~ ${StyledRadioLabel}::before, &[data-garden-focus-visible='true'] ~ ${StyledRadioLabel}::before`
   }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
-const sizeStyles$c = props => {
+const sizeStyles$9 = props => {
   const lineHeight = `${props.theme.space.base * 5}px`;
   const size = `${props.theme.space.base * 4}px`;
   const top = math(`(${lineHeight} - ${size}) / 2`);
@@ -564,19 +563,19 @@ const sizeStyles$c = props => {
   return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
 };
 const StyledRadioInput = styled.input.attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.0.0-next.4',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
   componentId: "sc-qsavpv-0"
-})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles$c(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles$9(props), StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$t, props));
+})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles$9(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles$7(props), StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledRadioInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$s = 'forms.checkbox';
-const colorStyles$8 = props => {
+const COMPONENT_ID$o = 'forms.checkbox';
+const colorStyles$6 = props => {
   const SHADE = 600;
   const indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme);
   const indeterminateBackgroundColor = indeterminateBorderColor;
@@ -586,37 +585,37 @@ const colorStyles$8 = props => {
   return css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled:indeterminate ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledCheckLabel, indeterminateBorderColor, indeterminateBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
 };
 const StyledCheckInput = styled(StyledRadioInput).attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '9.0.0-next.4',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
   componentId: "sc-176jxxe-0"
-})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles$8(props), props => retrieveComponentStyles(COMPONENT_ID$s, props));
+})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles$6(props), props => retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledCheckInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$r = 'forms.radio_message';
+const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled(StyledMessage).attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$r, props));
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledRadioMessage.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$q = 'forms.checkbox_message';
+const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled(StyledRadioMessage).attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q, props));
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledCheckMessage.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -641,14 +640,14 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
   })));
 };
 
-const COMPONENT_ID$p = 'forms.check_svg';
+const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.0.0-next.4'
 }).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, props => retrieveComponentStyles(COMPONENT_ID$p, props));
+})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledCheckSvg.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -671,20 +670,20 @@ var SvgDashFill = function SvgDashFill(props) {
   })));
 };
 
-const COMPONENT_ID$o = 'forms.dash_svg';
+const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled(SvgDashFill).attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
-})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$o, props));
+})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledDashSvg.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$n = 'forms.file_upload';
-const colorStyles$7 = props => {
+const COMPONENT_ID$j = 'forms.file_upload';
+const colorStyles$5 = props => {
   const baseColor = getColor('primaryHue', 600, props.theme);
   const hoverColor = getColor('primaryHue', 700, props.theme);
   const activeColor = getColor('primaryHue', 800, props.theme);
@@ -695,7 +694,7 @@ const colorStyles$7 = props => {
     hue: baseColor
   }), activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles$b = props => {
+const sizeStyles$8 = props => {
   const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
   const paddingHorizontal = `${props.isCompact ? 2 : 4}em`;
   const paddingVertical = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
@@ -704,30 +703,30 @@ const sizeStyles$b = props => {
   return css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledFileUpload = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
-})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$b, colorStyles$7, props => retrieveComponentStyles(COMPONENT_ID$n, props));
+})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$8, colorStyles$5, props => retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledFileUpload.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$m = 'forms.file.close';
+const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledFileClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$l = 'forms.file';
-const colorStyles$6 = props => {
+const COMPONENT_ID$h = 'forms.file';
+const colorStyles$4 = props => {
   let borderColor;
   let focusBorderColor;
   let foregroundColor;
@@ -753,7 +752,7 @@ const colorStyles$6 = props => {
     }
   }));
 };
-const sizeStyles$a = props => {
+const sizeStyles$7 = props => {
   const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`;
   const spacing = `${props.theme.space.base * (props.isCompact ? 2 : 3)}px`;
   const fontSize = props.theme.fontSizes.md;
@@ -779,29 +778,29 @@ const sizeStyles$a = props => {
   `;
 };
 const StyledFile = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
-})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;transition:box-shadow 0.1s ease-in-out;", ";", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a, colorStyles$6, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;transition:box-shadow 0.1s ease-in-out;", ";", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$7, colorStyles$4, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledFile.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$k = 'forms.file.delete';
+const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled(StyledFileClose).attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], props => getColor('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["color:", ";", ";"], props => getColor('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledFileDelete.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$j = 'forms.file.icon';
+const COMPONENT_ID$f = 'forms.file.icon';
 const StyledFileIcon = styled(_ref => {
   let {
     children,
@@ -811,36 +810,36 @@ const StyledFileIcon = styled(_ref => {
   } = _ref;
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.0.0-next.4'
 }).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$j, 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$f, props));
 StyledFileIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$i = 'forms.file_list';
+const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
-})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$i, props));
+})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledFileList.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$h = 'forms.file_list.item';
+const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
-})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledFileListItem.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -863,56 +862,56 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
   })));
 };
 
-const COMPONENT_ID$g = 'forms.radio_svg';
+const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
-})(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledRadioSvg.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$f = 'forms.toggle_label';
-const sizeStyles$9 = props => {
+const COMPONENT_ID$b = 'forms.toggle_label';
+const sizeStyles$6 = props => {
   const size = props.theme.space.base * 10;
   const padding = size + props.theme.space.base * 2;
   return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
 };
 const StyledToggleLabel = styled(StyledCheckLabel).attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
-})(["", ";", ";"], props => sizeStyles$9(props), props => retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["", ";", ";"], props => sizeStyles$6(props), props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledToggleLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$e = 'forms.toggle_hint';
+const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled(StyledHint).attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID$e, props));
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledToggleHint.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$d = 'forms.toggle';
-const colorStyles$5 = props => {
+const COMPONENT_ID$9 = 'forms.toggle';
+const colorStyles$3 = props => {
   const SHADE = 600;
   const backgroundColor = getColor('neutralHue', SHADE - 100, props.theme);
   const hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme);
   const activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme);
   return css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
 };
-const sizeStyles$8 = props => {
+const sizeStyles$5 = props => {
   const height = `${props.theme.space.base * 5}px`;
   const width = `${props.theme.space.base * 10}px`;
   const iconSize = props.theme.iconSizes.md;
@@ -921,24 +920,24 @@ const sizeStyles$8 = props => {
   return css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
-})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, props => sizeStyles$8(props), props => colorStyles$5(props), props => retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, props => sizeStyles$5(props), props => colorStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledToggleInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$c = 'forms.toggle_message';
+const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled(StyledMessage).attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
-})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledToggleMessage.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -961,45 +960,45 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
   })));
 };
 
-const COMPONENT_ID$b = 'forms.toggle_svg';
+const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
-})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledToggleSvg.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$a = 'forms.select';
-const colorStyles$4 = props => {
+const COMPONENT_ID$6 = 'forms.select';
+const colorStyles$2 = props => {
   const color = getColor('neutralHue', 700, props.theme);
   return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
 };
-const sizeStyles$7 = props => {
+const sizeStyles$4 = props => {
   const padding = math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`);
   const iconVerticalPosition = `${props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1}px`;
   const iconHorizontalPosition = `${props.theme.space.base * 3}px`;
   return css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition);
 };
 const StyledSelect = styled(StyledTextInput).attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.4',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-8xdxpt-0"
-})(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], props => sizeStyles$7(props), props => colorStyles$4(props), props => props.theme.colors.foreground, StyledTextMediaFigure);
+})(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], props => sizeStyles$4(props), props => colorStyles$2(props), props => props.theme.colors.foreground, StyledTextMediaFigure);
 StyledSelect.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'forms.select_wrapper';
+const COMPONENT_ID$5 = 'forms.select_wrapper';
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1008,7 +1007,7 @@ StyledSelectWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$8 = 'forms.range';
+const COMPONENT_ID$4 = 'forms.range';
 const thumbStyles = function (styles) {
   let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return `
@@ -1053,7 +1052,7 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles$3 = props => {
+const colorStyles$1 = props => {
   const SHADE = 600;
   const thumbBackgroundColor = getColor('primaryHue', SHADE, props.theme);
   const thumbBorderColor = thumbBackgroundColor;
@@ -1102,7 +1101,7 @@ const colorStyles$3 = props => {
         background-color: ${trackDisabledLowerBackgroundColor};
       `, ':disabled'));
 };
-const sizeStyles$6 = props => {
+const sizeStyles$3 = props => {
   const thumbSize = math(`${props.theme.space.base} * 5px`);
   const trackHeight = math(`${props.theme.space.base} * 1.5px`);
   const trackBorderRadius = trackHeight;
@@ -1123,8 +1122,8 @@ const sizeStyles$6 = props => {
     `));
 };
 const StyledRangeInput = styled.input.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.4',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1141,113 +1140,19 @@ const StyledRangeInput = styled.input.attrs(props => ({
       width: 99.8%; /* fix for IE which cuts off the upper track's border radius */
       color: transparent; /* reset for IE */
       box-sizing: border-box; /* reset for IE */
-    `), props => sizeStyles$6(props), props => thumbStyles(`
+    `), props => sizeStyles$3(props), props => thumbStyles(`
       appearance: none;
       transition: box-shadow .1s ease-in-out;
       border: ${props.theme.borders.md};
       border-radius: 100%;
       box-sizing: border-box;
-    `), props => colorStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$8, props));
+    `), props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledRangeInput.defaultProps = {
   backgroundSize: '0%',
   hasLowerTrack: true,
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$7 = 'forms.slider';
-const StyledSlider = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledSlider",
-  componentId: "sc-1di437a-0"
-})(["display:block;position:relative;z-index:0;cursor:pointer;height:", ";&[aria-disabled='true']{cursor:default;}", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";"], props => math(`(${props.theme.space.base} * 5px) + (${props.theme.shadowWidths.md} * 2)`), StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props => math(`${props.theme.space.base} * 2px`), props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledSlider.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$6 = 'forms.slider_thumb';
-const colorStyles$2 = props => {
-  const SHADE = 600;
-  const backgroundColor = getColor('primaryHue', SHADE, props.theme);
-  const borderColor = backgroundColor;
-  const boxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
-  const activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
-  const activeBorderColor = borderColor;
-  const hoverBackgroundColor = activeBackgroundColor;
-  const hoverBorderColor = hoverBackgroundColor;
-  const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
-  const disabledBorderColor = disabledBackgroundColor;
-  return css(["border-color:", ";box-shadow:", ";background-color:", ";&:hover,&[data-garden-hover='true']{border-color:", ";background-color:", ";}", " &:active,&[data-garden-active='true']{border-color:", ";background-color:", ";}&[aria-disabled='true']{border-color:", ";box-shadow:none;background-color:", ";}"], borderColor, boxShadow, backgroundColor, hoverBorderColor, hoverBackgroundColor, focusStyles({
-    theme: props.theme
-  }), activeBorderColor, activeBackgroundColor, disabledBorderColor, disabledBackgroundColor);
-};
-const sizeStyles$5 = props => {
-  const size = math(`${props.theme.space.base} * 5px`);
-  const marginTop = math(`${size} / -2`);
-  return css(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size);
-};
-const StyledSliderThumb = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.2',
-  'aria-disabled': props.isDisabled
-})).withConfig({
-  displayName: "StyledSliderThumb",
-  componentId: "sc-yspbwa-0"
-})(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5(props), props => colorStyles$2(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledSliderThumb.defaultProps = {
-  position: 0,
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'forms.slider_track';
-const colorStyles$1 = props => {
-  const SHADE = 600;
-  const backgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
-  const backgroundImageColor = getColor('primaryHue', SHADE, props.theme);
-  const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
-  return css(["background-color:", ";background-image:linear-gradient(", ",", ");&[aria-disabled='true']{background-image:linear-gradient(", ",", ");}"], backgroundColor, backgroundImageColor, backgroundImageColor, disabledBackgroundColor, disabledBackgroundColor);
-};
-const sizeStyles$4 = props => {
-  const height = math(`${props.theme.space.base} * 1.5px`);
-  const backgroundPosition = math(`${props.backgroundPosition} * 1px`);
-  const backgroundSize = math(`${props.backgroundSize} * 1px`);
-  const borderRadius = height;
-  const marginTop = math(`${height} / -2`);
-  const padding = math(`${props.theme.space.base} * 2.5px`);
-  return css(["margin-top:", ";border-radius:", ";background-position:", ";background-size:", ";padding:0 ", ";"], marginTop, borderRadius, backgroundPosition, backgroundSize, padding);
-};
-const StyledSliderTrack = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2',
-  'aria-disabled': props.isDisabled
-})).withConfig({
-  displayName: "StyledSliderTrack",
-  componentId: "sc-aw5m6g-0"
-})(["position:absolute;top:50%;box-sizing:border-box;background-origin:content-box;background-repeat:repeat-y;width:100%;", ";", ";", ";"], props => sizeStyles$4(props), props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledSliderTrack.defaultProps = {
-  backgroundSize: 0,
-  backgroundPosition: 0,
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = 'forms.slider_track_rail';
-const sizeStyles$3 = props => {
-  const height = math(`${props.theme.space.base} * 1.5px`);
-  const margin = math(`${props.theme.space.base} * 2.5px`);
-  return css(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? `-${margin}` : margin, props.theme.rtl ? margin : `-${margin}`, height);
-};
-const StyledSliderTrackRail = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledSliderTrackRail",
-  componentId: "sc-1o5owbd-0"
-})(["position:relative;", ";", ";"], props => sizeStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledSliderTrackRail.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
 const COMPONENT_ID$3 = 'forms.tile_icon';
 const sizeStyles$2 = props => {
   const iconSize = math(`${props.theme.iconSizes.md} * 2`);
@@ -1266,7 +1171,7 @@ const sizeStyles$2 = props => {
 };
 const StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1307,7 +1212,7 @@ const colorStyles = props => {
 };
 const StyledTile = styled.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",
@@ -1331,7 +1236,7 @@ const sizeStyles$1 = props => {
 };
 const StyledTileDescription = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1364,7 +1269,7 @@ const sizeStyles = props => {
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1378,7 +1283,6 @@ const Field = React__default.forwardRef((props, ref) => {
   const [hasMessage, setHasMessage] = useState(false);
   const [isLabelActive, setIsLabelActive] = useState(false);
   const [isLabelHovered, setIsLabelHovered] = useState(false);
-  const multiThumbRangeRef = useRef(null);
   const {
     getInputProps,
     getMessageProps,
@@ -1399,8 +1303,7 @@ const Field = React__default.forwardRef((props, ref) => {
     hasHint,
     setHasHint,
     hasMessage,
-    setHasMessage,
-    multiThumbRangeRef
+    setHasMessage
   }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
   return React__default.createElement(FieldContext.Provider, {
     value: fieldProps
@@ -1494,8 +1397,7 @@ const Label$1 = React__default.forwardRef((props, ref) => {
     if (type === undefined) {
       const {
         setIsLabelActive,
-        setIsLabelHovered,
-        multiThumbRangeRef
+        setIsLabelHovered
       } = fieldContext;
       combinedProps = {
         ...combinedProps,
@@ -1510,9 +1412,6 @@ const Label$1 = React__default.forwardRef((props, ref) => {
         }),
         onMouseLeave: composeEventHandlers(props.onMouseLeave, () => {
           setIsLabelHovered(false);
-        }),
-        onClick: composeEventHandlers(props.onClick, () => {
-          multiThumbRangeRef.current && multiThumbRangeRef.current.focus();
         })
       };
     }
@@ -2024,110 +1923,6 @@ Select.propTypes = {
 };
 Select.displayName = 'Select';
 
-const MIN = 0;
-const MAX = 100;
-const MultiThumbRange = forwardRef((_ref, ref) => {
-  let {
-    min = MIN,
-    max = MAX,
-    minValue,
-    maxValue,
-    disabled,
-    step,
-    jump,
-    onChange,
-    onMouseDown,
-    ...props
-  } = _ref;
-  const theme = useContext(ThemeContext);
-  const environment = useDocument(theme);
-  const trackRailRef = useRef(null);
-  const minThumbRef = useRef(null);
-  const maxThumbRef = useRef(null);
-  const {
-    getTrackProps,
-    getMinThumbProps,
-    getMaxThumbProps,
-    trackRect,
-    minValue: updatedMinValue,
-    maxValue: updatedMaxValue
-  } = useSlider({
-    trackRef: trackRailRef,
-    minThumbRef,
-    maxThumbRef,
-    min,
-    max,
-    minValue,
-    maxValue,
-    onChange,
-    step,
-    jump,
-    disabled,
-    rtl: theme.rtl,
-    environment
-  });
-  const {
-    onMouseDown: onSliderMouseDown,
-    ...trackProps
-  } = getTrackProps({
-    onMouseDown
-  });
-  const fieldContext = useFieldContext();
-  const {
-    isLabelHovered,
-    isLabelActive,
-    multiThumbRangeRef
-  } = fieldContext || {};
-  useEffect(() => {
-    if (multiThumbRangeRef) {
-      multiThumbRangeRef.current = minThumbRef.current;
-    }
-  }, [multiThumbRangeRef]);
-  const minPosition = (updatedMinValue - min) / (max - min) * trackRect.width;
-  const maxPosition = (updatedMaxValue - min) / (max - min) * trackRect.width;
-  const sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
-  return React__default.createElement(StyledSlider, _extends$t({
-    ref: ref,
-    onMouseDown: onSliderMouseDown
-  }, props), React__default.createElement(StyledSliderTrack, {
-    backgroundSize: sliderBackgroundSize,
-    backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition,
-    isDisabled: disabled
-  }, React__default.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, {
-    ref: trackRailRef
-  }), React__default.createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({
-    'aria-label': updatedMinValue
-  }), {
-    isDisabled: disabled,
-    position: minPosition,
-    ref: minThumbRef,
-    "data-garden-active": isLabelActive,
-    "data-garden-hover": isLabelHovered
-  })), React__default.createElement(StyledSliderThumb, _extends$t({}, getMaxThumbProps({
-    'aria-label': updatedMaxValue
-  }), {
-    isDisabled: disabled,
-    position: maxPosition,
-    ref: maxThumbRef
-  })))));
-});
-MultiThumbRange.displayName = 'MultiThumbRange';
-MultiThumbRange.propTypes = {
-  min: PropTypes.number,
-  max: PropTypes.number,
-  minValue: PropTypes.number,
-  maxValue: PropTypes.number,
-  step: PropTypes.number,
-  jump: PropTypes.number,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func
-};
-MultiThumbRange.defaultProps = {
-  min: MIN,
-  max: MAX,
-  step: 1
-};
-
 const TilesContext = createContext(undefined);
 const useTilesContext = () => {
   return useContext(TilesContext);
@@ -2918,4 +2713,4 @@ MediaInput.propTypes = {
 };
 MediaInput.displayName = 'MediaInput';
 
-export { Checkbox, FauxInput, Field, Fieldset, File, FileList, FileUpload, Hint, Input, InputGroup, Label$1 as Label, MediaInput, Message, MultiThumbRange, Radio, Range, Select, Textarea, Tiles, Toggle, VALIDATION };
+export { Checkbox, FauxInput, Field, Fieldset, File, FileList, FileUpload, Hint, Input, InputGroup, Label$1 as Label, MediaInput, Message, Radio, Range, Select, Textarea, Tiles, Toggle, VALIDATION };