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

package/dist/index.cjs.js

@@ -64,7 +64,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -77,7 +77,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -89,11 +89,11 @@ 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.5'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.7'
 })).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 => reactTheming.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 && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$E, 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 => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColorV8('foreground', 600 , props.theme), 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 && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$E, props));
 StyledLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -102,7 +102,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -114,7 +114,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.5'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.7'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -219,7 +219,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.5',
+  'data-garden-version': '9.0.0-next.7',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
@@ -247,7 +247,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.5'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.7'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -300,7 +300,7 @@ const colorStyles$a = props => {
   if (props.isHovered) {
     controlledBorderColor = hoverBorderColor;
   }
-  return styled.css(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, reactTheming.focusStyles({
+  return styled.css(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : reactTheming.getColorV8('background', 600 , props.theme), reactTheming.getColorV8('foreground', 600 , props.theme), placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, reactTheming.focusStyles({
     theme: props.theme,
     inset: props.focusInset,
     condition: !props.isBare,
@@ -337,7 +337,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.5',
+  'data-garden-version': '9.0.0-next.7',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -360,7 +360,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -406,7 +406,7 @@ _ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -453,7 +453,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.5'
+  'data-garden-version': '9.0.0-next.7'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -465,7 +465,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.5',
+  'data-garden-version': '9.0.0-next.7',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -483,11 +483,11 @@ const positionStyles = props => {
 const itemStyles = props => {
   const startDirection = props.theme.rtl ? 'right' : 'left';
   const endDirection = props.theme.rtl ? 'left' : 'right';
-  return styled.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);
+  return styled.css(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", ":active,& > button:active,& > button[aria-pressed='true'],& > button[aria-pressed='mixed']{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, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -505,7 +505,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.5',
+  'data-garden-version': '9.0.0-next.7',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -518,7 +518,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -530,7 +530,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -542,7 +542,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -555,7 +555,7 @@ const COMPONENT_ID$p = 'forms.radio';
 const colorStyles$7 = props => {
   const SHADE = 600;
   const borderColor = reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme);
-  const backgroundColor = props.theme.colors.background;
+  const backgroundColor = reactTheming.getColorV8('background', 600 , props.theme);
   const iconColor = backgroundColor;
   const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme, 0.08);
   const hoverBorderColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme);
@@ -574,7 +574,7 @@ const colorStyles$7 = props => {
     styles: {
       borderColor: focusBorderColor
     },
-    selector: `&:focus-visible ~ ${StyledRadioLabel}::before, &[data-garden-focus-visible='true'] ~ ${StyledRadioLabel}::before`
+    selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
   }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
 const sizeStyles$9 = props => {
@@ -589,7 +589,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.5',
+  'data-garden-version': '9.0.0-next.7',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -611,7 +611,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.5',
+  'data-garden-version': '9.0.0-next.7',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -624,7 +624,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -636,7 +636,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -668,7 +668,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -698,7 +698,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -729,7 +729,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -741,11 +741,11 @@ 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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, 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 => reactTheming.getColorV8('foreground', 600 , props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledFileClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -766,7 +766,7 @@ const colorStyles$4 = props => {
   } else {
     borderColor = reactTheming.getColorV8('neutralHue', 300, props.theme);
     focusBorderColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
-    foregroundColor = props.theme.colors.foreground;
+    foregroundColor = reactTheming.getColorV8('foreground', 600 , props.theme);
   }
   return styled.css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, reactTheming.focusStyles({
     theme: props.theme,
@@ -804,7 +804,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -816,7 +816,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -836,7 +836,7 @@ const StyledFileIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -848,7 +848,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -860,7 +860,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -890,7 +890,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -907,7 +907,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -919,7 +919,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -946,7 +946,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -958,7 +958,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -988,7 +988,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1000,7 +1000,7 @@ StyledToggleSvg.defaultProps = {
 const COMPONENT_ID$6 = 'forms.select';
 const colorStyles$2 = props => {
   const color = reactTheming.getColorV8('neutralHue', 700, props.theme);
-  return styled.css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
+  return styled.css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
 };
 const sizeStyles$4 = props => {
   const padding = polished.math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`);
@@ -1010,12 +1010,12 @@ const sizeStyles$4 = props => {
 };
 const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   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$4(props), props => colorStyles$2(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 => reactTheming.getColorV8('foreground', 600 , props.theme), StyledTextMediaFigure);
 StyledSelect.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -1023,7 +1023,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1113,7 +1113,7 @@ const colorStyles$1 = props => {
         background-color: ${thumbHoverBackgroundColor};
       `, ':hover'), thumbStyles(`
         box-shadow: ${thumbFocusBoxShadow};
-      `, '[data-garden-focus-visible="true"]'), thumbStyles(`
+      `, ':focus-visible'), thumbStyles(`
         border-color: ${thumbActiveBorderColor};
         background-color: ${thumbActiveBackgroundColor};
       `, ':active'), trackStyles(`
@@ -1148,7 +1148,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.5',
+  'data-garden-version': '9.0.0-next.7',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1196,7 +1196,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1226,18 +1226,18 @@ const colorStyles = props => {
   const selectedActiveBorderColor = reactTheming.getColorV8('primaryHue', SHADE + 200, props.theme);
   const selectedActiveBackgroundColor = selectedActiveBorderColor;
   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, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, reactTheming.focusStyles({
+  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,
     styles: {
       borderColor: focusBorderColor
     },
     selector: `&:focus-within`
-  }), activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedHoverBorderColor, selectedHoverBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedActiveBorderColor, selectedActiveBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
+  }), activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, reactTheming.getColorV8('background', 600 , props.theme), StyledTileIcon, reactTheming.getColorV8('background', 600 , props.theme), selectedHoverBorderColor, selectedHoverBackgroundColor, reactTheming.getColorV8('background', 600 , props.theme), StyledTileIcon, reactTheming.getColorV8('background', 600 , props.theme), selectedActiveBorderColor, selectedActiveBackgroundColor, reactTheming.getColorV8('background', 600 , props.theme), StyledTileIcon, reactTheming.getColorV8('background', 600 , props.theme), disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
 };
 const StyledTile = styled__default.default.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",
@@ -1261,7 +1261,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1294,7 +1294,7 @@ const sizeStyles = props => {
 };
 const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -2735,8 +2735,8 @@ MediaInput.propTypes = {
   isBare: PropTypes__default.default.bool,
   focusInset: PropTypes__default.default.bool,
   validation: PropTypes__default.default.oneOf(VALIDATION),
-  start: PropTypes__default.default.node,
-  end: PropTypes__default.default.node,
+  start: PropTypes__default.default.any,
+  end: PropTypes__default.default.any,
   wrapperProps: PropTypes__default.default.object,
   wrapperRef: PropTypes__default.default.any
 };

package/dist/index.esm.js

@@ -39,7 +39,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -52,7 +52,7 @@ const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -64,11 +64,11 @@ StyledFieldset.defaultProps = {
 const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.5'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.7'
 })).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$E, 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 => getColorV8('foreground', 600 , props.theme), 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
 };
@@ -77,7 +77,7 @@ const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -89,7 +89,7 @@ StyledLegend.defaultProps = {
 const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.5'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.7'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -194,7 +194,7 @@ const MessageIcon = _ref => {
 const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
@@ -222,7 +222,7 @@ const validationStyles = props => {
 const COMPONENT_ID$A = 'forms.input_message';
 const StyledMessage = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.5'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.7'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -275,7 +275,7 @@ const colorStyles$a = props => {
   if (props.isHovered) {
     controlledBorderColor = hoverBorderColor;
   }
-  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusStyles({
+  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : getColorV8('background', 600 , props.theme), getColorV8('foreground', 600 , props.theme), placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusStyles({
     theme: props.theme,
     inset: props.focusInset,
     condition: !props.isBare,
@@ -312,7 +312,7 @@ const sizeStyles$c = props => {
 };
 const StyledTextInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -335,7 +335,7 @@ const hiddenStyles = `
 const StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -381,7 +381,7 @@ _ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -428,7 +428,7 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -440,7 +440,7 @@ StyledTextFauxInput.defaultProps = {
 const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -458,11 +458,11 @@ const positionStyles = props => {
 const itemStyles = props => {
   const startDirection = props.theme.rtl ? 'right' : 'left';
   const endDirection = props.theme.rtl ? 'left' : 'right';
-  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);
+  return css(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", ":active,& > button:active,& > button[aria-pressed='true'],& > button[aria-pressed='mixed']{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, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -480,7 +480,7 @@ const sizeStyles$a = props => {
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -493,7 +493,7 @@ StyledRadioLabel.defaultProps = {
 const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -505,7 +505,7 @@ StyledCheckLabel.defaultProps = {
 const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -517,7 +517,7 @@ StyledRadioHint.defaultProps = {
 const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -530,7 +530,7 @@ const COMPONENT_ID$p = 'forms.radio';
 const colorStyles$7 = props => {
   const SHADE = 600;
   const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const backgroundColor = props.theme.colors.background;
+  const backgroundColor = getColorV8('background', 600 , props.theme);
   const iconColor = backgroundColor;
   const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08);
   const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
@@ -549,7 +549,7 @@ const colorStyles$7 = props => {
     styles: {
       borderColor: focusBorderColor
     },
-    selector: `&:focus-visible ~ ${StyledRadioLabel}::before, &[data-garden-focus-visible='true'] ~ ${StyledRadioLabel}::before`
+    selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
   }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
 const sizeStyles$9 = props => {
@@ -564,7 +564,7 @@ const sizeStyles$9 = props => {
 };
 const StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -586,7 +586,7 @@ const colorStyles$6 = props => {
 };
 const StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -599,7 +599,7 @@ StyledCheckInput.defaultProps = {
 const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -611,7 +611,7 @@ StyledRadioMessage.defaultProps = {
 const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -643,7 +643,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -673,7 +673,7 @@ var SvgDashFill = function SvgDashFill(props) {
 const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -704,7 +704,7 @@ const sizeStyles$8 = props => {
 };
 const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -716,11 +716,11 @@ StyledFileUpload.defaultProps = {
 const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).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$i, 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 => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledFileClose.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -741,7 +741,7 @@ const colorStyles$4 = props => {
   } else {
     borderColor = getColorV8('neutralHue', 300, props.theme);
     focusBorderColor = getColorV8('primaryHue', 600, props.theme);
-    foregroundColor = props.theme.colors.foreground;
+    foregroundColor = getColorV8('foreground', 600 , props.theme);
   }
   return css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({
     theme: props.theme,
@@ -779,7 +779,7 @@ const sizeStyles$7 = props => {
 };
 const StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -791,7 +791,7 @@ StyledFile.defaultProps = {
 const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -811,7 +811,7 @@ const StyledFileIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -823,7 +823,7 @@ StyledFileIcon.defaultProps = {
 const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -835,7 +835,7 @@ StyledFileList.defaultProps = {
 const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -865,7 +865,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -882,7 +882,7 @@ const sizeStyles$6 = props => {
 };
 const StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -894,7 +894,7 @@ StyledToggleLabel.defaultProps = {
 const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -921,7 +921,7 @@ const sizeStyles$5 = props => {
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -933,7 +933,7 @@ StyledToggleInput.defaultProps = {
 const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -963,7 +963,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -975,7 +975,7 @@ StyledToggleSvg.defaultProps = {
 const COMPONENT_ID$6 = 'forms.select';
 const colorStyles$2 = props => {
   const color = getColorV8('neutralHue', 700, props.theme);
-  return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
+  return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
 };
 const sizeStyles$4 = props => {
   const padding = math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`);
@@ -985,12 +985,12 @@ const sizeStyles$4 = props => {
 };
 const StyledSelect = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   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$4(props), props => colorStyles$2(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 => getColorV8('foreground', 600 , props.theme), StyledTextMediaFigure);
 StyledSelect.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -998,7 +998,7 @@ StyledSelect.defaultProps = {
 const COMPONENT_ID$5 = 'forms.select_wrapper';
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1088,7 +1088,7 @@ const colorStyles$1 = props => {
         background-color: ${thumbHoverBackgroundColor};
       `, ':hover'), thumbStyles(`
         box-shadow: ${thumbFocusBoxShadow};
-      `, '[data-garden-focus-visible="true"]'), thumbStyles(`
+      `, ':focus-visible'), thumbStyles(`
         border-color: ${thumbActiveBorderColor};
         background-color: ${thumbActiveBackgroundColor};
       `, ':active'), trackStyles(`
@@ -1123,7 +1123,7 @@ const sizeStyles$3 = props => {
 };
 const StyledRangeInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1171,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1201,18 +1201,18 @@ const colorStyles = props => {
   const selectedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme);
   const selectedActiveBackgroundColor = selectedActiveBorderColor;
   const selectedDisabledBackgroundColor = disabledBorderColor;
-  return 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, getColorV8('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusStyles({
+  return 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, getColorV8('neutralHue', SHADE - 300, props.theme), borderColor, getColorV8('background', 600 , props.theme), color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusStyles({
     theme: props.theme,
     hue: focusBorderColor,
     styles: {
       borderColor: focusBorderColor
     },
     selector: `&:focus-within`
-  }), activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedHoverBorderColor, selectedHoverBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedActiveBorderColor, selectedActiveBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
+  }), activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), selectedHoverBorderColor, selectedHoverBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), selectedActiveBorderColor, selectedActiveBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
 };
 const StyledTile = styled.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",
@@ -1236,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1269,7 +1269,7 @@ const sizeStyles = props => {
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -2710,8 +2710,8 @@ MediaInput.propTypes = {
   isBare: PropTypes.bool,
   focusInset: PropTypes.bool,
   validation: PropTypes.oneOf(VALIDATION),
-  start: PropTypes.node,
-  end: PropTypes.node,
+  start: PropTypes.any,
+  end: PropTypes.any,
   wrapperProps: PropTypes.object,
   wrapperRef: PropTypes.any
 };

package/dist/typings/styled/select/StyledSelect.d.ts

@@ -13,4 +13,4 @@ export declare const StyledSelect: import("styled-components").StyledComponent<"
     'data-garden-id': string;
     'data-garden-version': string;
     as: string;
-}, "data-garden-id" | "data-garden-version" | "as">;
+}, "as" | "data-garden-id" | "data-garden-version">;

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

@@ -12,5 +12,5 @@ export declare const StyledTextarea: import("styled-components").StyledComponent
     as: string;
     'data-garden-id': string;
     'data-garden-version': string;
-} & IStyledTextareaProps, "data-garden-id" | "data-garden-version" | "as">;
+} & IStyledTextareaProps, "as" | "data-garden-id" | "data-garden-version">;
 export {};

package/dist/typings/types/index.d.ts

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { FieldsetHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, SelectHTMLAttributes, SVGAttributes, TextareaHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, SelectHTMLAttributes, SVGAttributes, TextareaHTMLAttributes } from 'react';
 export declare const VALIDATION: readonly ["success", "warning", "error"];
 export declare const FILE_VALIDATION: readonly ["success", "error"];
 export declare const FILE_TYPE: readonly ["pdf", "zip", "image", "document", "spreadsheet", "presentation", "generic"];
@@ -52,9 +52,9 @@ export interface IInputProps extends IRadioProps {
 }
 export interface IMediaInputProps extends IInputProps {
     /** Accepts a "start" icon to display */
-    start?: any;
+    start?: ReactElement;
     /** Accepts an "end" icon to display */
-    end?: any;
+    end?: ReactElement;
     /** Applies props to the wrapping [FauxInput](#fauxinput) element */
     wrapperProps?: any;
     /** Applies a ref to the wrapping [FauxInput](#fauxinput) element */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-forms",
-  "version": "9.0.0-next.5",
+  "version": "9.0.0-next.7",
   "description": "Components relating to form elements in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -29,14 +29,14 @@
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^9.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.5",
+    "@zendeskgarden/react-theming": "^9.0.0-next.7",
     "@zendeskgarden/svg-icons": "7.0.0",
     "react-dropzone": "14.2.3"
   },
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
+  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
 }