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

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -12,10 +11,10 @@ var containerField = require('@zendeskgarden/container-field');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
+var server = require('react-dom/server');
 var PropTypes = require('prop-types');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactMergeRefs = require('react-merge-refs');
-var containerSlider = require('@zendeskgarden/container-slider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -41,91 +40,82 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-function _extends$t() {
-  _extends$t = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$t.apply(this, arguments);
-}
-
 const FieldContext = React.createContext(undefined);
 const useFieldContext = () => {
   const fieldContext = React.useContext(FieldContext);
   return fieldContext;
 };
 
-const COMPONENT_ID$K = 'forms.field';
+const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled__default.default.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.21'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$K, props));
+})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$G, props));
 StyledField.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$J = 'forms.fieldset';
+const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
-})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$J, props));
+})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$F, props));
 StyledFieldset.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$I = 'forms.input_label';
+const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled__default.default.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.21'
 })).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$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 => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), 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
 };
 
-const COMPONENT_ID$H = 'forms.fieldset_legend';
+const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
-})(["padding:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$H, props));
+})(["padding:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$D, props));
 StyledLegend.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$G = 'forms.input_hint';
+const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled__default.default.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.21'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
-})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$G, props));
+})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props));
 StyledHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 var _g$2, _circle$5;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
@@ -153,7 +143,7 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
 };
 
 var _path$n, _circle$4;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
 var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
@@ -176,7 +166,7 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
 };
 
 var _g$1;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
 var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
@@ -217,138 +207,215 @@ const MessageIcon = _ref => {
   }
   return retVal;
 };
-const COMPONENT_ID$F = 'forms.input_message_icon';
+const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled__default.default(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.21',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
-})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$F, props));
+})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props));
 StyledMessageIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const validationStyles = props => {
-  const rtl = props.theme.rtl;
-  const padding = polished.math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
-  let color;
-  if (props.validation === 'error') {
-    color = reactTheming.getColor('dangerHue', 600, props.theme);
-  } else if (props.validation === 'success') {
-    color = reactTheming.getColor('successHue', 600, props.theme);
-  } else if (props.validation === 'warning') {
-    color = reactTheming.getColor('warningHue', 700, props.theme);
+const COMPONENT_ID$A = 'forms.input_message';
+const colorStyles$d = _ref => {
+  let {
+    theme,
+    validation
+  } = _ref;
+  let variable;
+  if (validation === 'error') {
+    variable = 'foreground.danger';
+  } else if (validation === 'success') {
+    variable = 'foreground.success';
+  } else if (validation === 'warning') {
+    variable = 'foreground.warning';
   } else {
-    color = reactTheming.getColor('neutralHue', 700, props.theme);
+    variable = 'foreground.subtle';
   }
-  return styled.css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable
+  });
+  return styled.css(["color:", ";"], foregroundColor);
+};
+const sizeStyles$g = _ref2 => {
+  let {
+    theme,
+    validation
+  } = _ref2;
+  const fontSize = theme.fontSizes.sm;
+  const lineHeight = reactTheming.getLineHeight(theme.iconSizes.md, theme.fontSizes.sm);
+  const marginTop = `${theme.space.base}px`;
+  const paddingHorizontal = validation ? polished.math(`${theme.space.base * 2} + ${theme.iconSizes.md}`) : undefined;
+  return styled.css(["padding-", ":", ";line-height:", ";font-size:", ";", ":not([hidden]) + &{margin-top:", ";}"], theme.rtl ? 'right' : 'left', paddingHorizontal, lineHeight, fontSize, StyledLabel, marginTop);
 };
-const COMPONENT_ID$E = 'forms.input_message';
 const StyledMessage = styled__default.default.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.21'
 })).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 => reactTheming.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 => polished.math(`${props.theme.space.base} * 1px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$E, props));
+})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;}", ";"], props => props.theme.rtl && 'rtl', sizeStyles$g, colorStyles$d, StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props));
 StyledMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$D = 'forms.input';
+var _path$m;
+function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
+
+const COMPONENT_ID$z = 'forms.input';
 const isInvalid = validation => {
   return validation === 'warning' || validation === 'error';
 };
-const colorStyles$c = props => {
-  const HUE = 'primaryHue';
-  const SHADE = 600;
-  const placeholderColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
+const colorStyles$c = _ref => {
+  let {
+    theme,
+    isBare,
+    isHovered,
+    focusInset,
+    validation
+  } = _ref;
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const backgroundColor = isBare ? 'transparent' : reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
   let borderColor;
   let hoverBorderColor;
+  let borderVariable;
   let focusBorderColor;
-  let focusRingHue = HUE;
-  let focusRingShade = SHADE;
-  if (props.validation) {
-    let hue = HUE;
-    if (props.validation === 'success') {
-      hue = 'successHue';
-    } else if (props.validation === 'warning') {
-      hue = 'warningHue';
-      focusRingShade = 700;
-    } else if (props.validation === 'error') {
-      hue = 'dangerHue';
+  if (validation) {
+    if (validation === 'success') {
+      borderVariable = 'border.successEmphasis';
+    } else if (validation === 'warning') {
+      borderVariable = 'border.warningEmphasis';
+    } else if (validation === 'error') {
+      borderVariable = 'border.dangerEmphasis';
     }
-    borderColor = reactTheming.getColor(hue, SHADE, props.theme);
+    borderColor = reactTheming.getColor({
+      theme,
+      variable: borderVariable
+    });
     hoverBorderColor = borderColor;
     focusBorderColor = borderColor;
-    focusRingHue = hue;
   } else {
-    borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+    borderColor = reactTheming.getColor({
+      theme,
+      variable: 'border.default',
+      dark: {
+        offset: -100
+      },
+      light: {
+        offset: 100
+      }
+    });
+    borderVariable = 'border.primaryEmphasis';
+    hoverBorderColor = reactTheming.getColor({
+      theme,
+      variable: borderVariable
+    });
     focusBorderColor = hoverBorderColor;
   }
-  const readOnlyBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
-  const readOnlyBorderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  const disabledBackgroundColor = readOnlyBackgroundColor;
-  const disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
-  let controlledBorderColor = borderColor;
-  if (props.isFocused) {
-    controlledBorderColor = focusBorderColor;
-  }
-  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({
-    theme: props.theme,
-    inset: props.focusInset,
-    condition: !props.isBare,
-    hue: focusRingHue,
-    shade: focusRingShade,
+  const disabledBackgroundColor = isBare ? undefined : reactTheming.getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledForegroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  const placeholderColor = disabledForegroundColor;
+  const readOnlyBackgroundColor = disabledBackgroundColor;
+  const calendarPickerColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  const calendarPickerIcon = server.renderToString( React__namespace.default.createElement(SvgChevronDownStroke, {
+    color: calendarPickerColor
+  }));
+  const calendarPickerBackgroundImage = `url("data:image/svg+xml,${encodeURIComponent(calendarPickerIcon)}")`;
+  return styled.css(["border-color:", ";background-color:", ";color:", ";&::placeholder{opacity:1;color:", ";}&::-webkit-datetime-edit{color:", ";}&::-webkit-calendar-picker-indicator{background-image:", ";}&[readonly],&[aria-readonly='true']{background-color:", ";}&:hover{border-color:", ";}", " &::-webkit-calendar-picker-indicator:focus-visible{", "}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, placeholderColor, placeholderColor, calendarPickerBackgroundImage, readOnlyBackgroundColor, hoverBorderColor, reactTheming.focusStyles({
+    theme,
+    inset: focusInset,
+    color: {
+      variable: borderVariable
+    },
     styles: {
       borderColor: focusBorderColor
-    }
-  }), disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
+    },
+    condition: !isBare
+  }), reactTheming.focusStyles({
+    theme
+  }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles$f = props => {
-  const fontSize = props.theme.fontSizes.md;
-  const paddingHorizontal = `${props.theme.space.base * 3}px`;
+const sizeStyles$f = _ref2 => {
+  let {
+    theme,
+    isBare,
+    isCompact
+  } = _ref2;
+  const fontSize = theme.fontSizes.md;
+  const paddingHorizontal = `${theme.space.base * 3}px`;
   let height;
   let paddingVertical;
   let browseFontSize;
   let swatchHeight;
-  if (props.isCompact) {
-    height = `${props.theme.space.base * 8}px`;
-    paddingVertical = `${props.theme.space.base * 1.5}px`;
-    browseFontSize = polished.math(`${props.theme.fontSizes.sm} - 1`);
-    swatchHeight = `${props.theme.space.base * 6}px`;
+  if (isCompact) {
+    height = `${theme.space.base * 8}px`;
+    paddingVertical = `${theme.space.base * 1.5}px`;
+    browseFontSize = polished.math(`${theme.fontSizes.sm} - 1`);
+    swatchHeight = `${theme.space.base * 6}px`;
   } else {
-    height = `${props.theme.space.base * 10}px`;
-    paddingVertical = `${props.theme.space.base * 2.5}px`;
-    browseFontSize = props.theme.fontSizes.sm;
-    swatchHeight = `${props.theme.space.base * 7}px`;
+    height = `${theme.space.base * 10}px`;
+    paddingVertical = `${theme.space.base * 2.5}px`;
+    browseFontSize = theme.fontSizes.sm;
+    swatchHeight = `${theme.space.base * 7}px`;
   }
-  const lineHeight = polished.math(`${height} - (${paddingVertical} * 2) - (${props.theme.borderWidths.sm} * 2)`);
-  const padding = props.isBare ? '0' : `${polished.em(paddingVertical, fontSize)} ${polished.em(paddingHorizontal, fontSize)}`;
+  const lineHeight = polished.math(`${height} - (${paddingVertical} * 2) - (${theme.borderWidths.sm} * 2)`);
+  const padding = isBare ? '0' : `${polished.em(paddingVertical, fontSize)} ${polished.em(paddingHorizontal, fontSize)}`;
   const swatchMarginVertical = polished.math(`(${lineHeight} - ${swatchHeight}) / 2`);
   const swatchMarginHorizontal = polished.math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
-  return styled.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, reactTheming.getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, polished.math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
+  const calendarPickerSize = `${theme.space.base * 5}px`;
+  const calendarPickerBackgroundSize = theme.iconSizes.md;
+  return styled.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-calendar-picker-indicator{background-position:center;background-size:", ";padding:0;width:", ";height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& ~ ", "{margin-top:", "px;}"], padding, isBare ? '1em' : height, reactTheming.getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, polished.math(`${swatchMarginHorizontal} * -2`), swatchHeight, calendarPickerBackgroundSize, calendarPickerSize, calendarPickerSize, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, theme.space.base * (isCompact ? 1 : 2));
 };
 const StyledTextInput = styled__default.default.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.21',
   '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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$D, props));
+  componentId: "sc-1r6733h-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;}&::-webkit-calendar-picker-indicator{border-radius:100%;}&: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', sizeStyles$f, colorStyles$c, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props));
 StyledTextInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$C = 'forms.textarea';
+const COMPONENT_ID$y = 'forms.textarea';
 const hiddenStyles = `
   visibility: hidden;
   position: absolute;
@@ -360,123 +427,145 @@ const hiddenStyles = `
 `;
 const StyledTextarea = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
-})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props));
+})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
 StyledTextarea.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$B = 'forms.media_figure';
-const colorStyles$b = props => {
-  let shade = 600;
-  if (props.isDisabled) {
-    shade = 400;
-  } else if (props.isHovered || props.isFocused) {
-    shade = 700;
+const COMPONENT_ID$x = 'forms.media_figure';
+const colorStyles$b = _ref => {
+  let {
+    theme,
+    $isDisabled,
+    $isHovered,
+    $isFocused
+  } = _ref;
+  let color;
+  if ($isDisabled) {
+    color = reactTheming.getColor({
+      theme,
+      variable: 'foreground.disabled'
+    });
+  } else {
+    const options = {
+      theme,
+      variable: 'foreground.subtle'
+    };
+    if ($isHovered || $isFocused) {
+      color = reactTheming.getColor({
+        ...options,
+        dark: {
+          offset: -100
+        },
+        light: {
+          offset: 100
+        }
+      });
+    } else {
+      color = reactTheming.getColor(options);
+    }
   }
-  return styled.css(["color:", ";"], reactTheming.getColor('neutralHue', shade, props.theme));
+  return styled.css(["color:", ";"], color);
 };
 const sizeStyles$e = 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`;
   let margin;
-  if (props.position === 'start') {
+  if (props.$position === 'start') {
     margin = props.theme.rtl ? marginLast : marginFirst;
   } else {
     margin = props.theme.rtl ? marginFirst : marginLast;
   }
   return styled.css(["margin:", ";width:", ";height:", ";"], margin, size, size);
 };
-const StyledTextMediaFigure = styled__default.default(
-_ref => {
-  let {
-    children,
-    position,
-    isHovered,
-    isFocused,
-    isDisabled,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.0.0-next.2'
+const StyledTextMediaFigure = styled__default.default(reactTheming.StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '9.0.0-next.21'
 }).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 => reactTheming.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)`, sizeStyles$e, colorStyles$b, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledTextMediaFigure.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$A = 'forms.faux_input';
-const VALIDATION_HUES = {
-  success: 'successHue',
-  warning: 'warningHue',
-  error: 'dangerHue'
-};
-function getValidationHue(validation) {
-  let defaultHue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'primaryHue';
-  if (validation) {
-    return VALIDATION_HUES[validation];
-  }
-  return defaultHue;
-}
-const colorStyles$a = props => {
-  const {
+const COMPONENT_ID$w = 'forms.faux_input';
+const colorStyles$a = _ref => {
+  let {
     theme,
     validation,
     focusInset,
     isBare,
     isFocused
-  } = props;
+  } = _ref;
+  let borderVariable;
+  let focusBorderColor;
+  if (validation) {
+    if (validation === 'success') {
+      borderVariable = 'border.successEmphasis';
+    } else if (validation === 'warning') {
+      borderVariable = 'border.warningEmphasis';
+    } else if (validation === 'error') {
+      borderVariable = 'border.dangerEmphasis';
+    }
+    focusBorderColor = reactTheming.getColor({
+      theme,
+      variable: borderVariable
+    });
+  } else {
+    borderVariable = 'border.primaryEmphasis';
+    focusBorderColor = reactTheming.getColor({
+      theme,
+      variable: borderVariable
+    });
+  }
   return styled.css(["", ""], reactTheming.focusStyles({
     theme,
     inset: focusInset,
-    condition: !isBare,
-    hue: getValidationHue(validation),
-    shade: validation === 'warning' ? 700 : 600,
+    color: {
+      variable: borderVariable
+    },
     selector: isFocused ? '&' : '&:focus-within',
     styles: {
-      borderColor: reactTheming.getColor(getValidationHue(validation), 600, theme)
-    }
+      borderColor: focusBorderColor
+    },
+    condition: !isBare
   }));
 };
 const StyledTextFauxInput = styled__default.default(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.21'
 })).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', reactTheming.SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.mediaLayout && '0', props => reactTheming.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$a, StyledTextInput, props => !props.mediaLayout && 'baseline', reactTheming.SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.mediaLayout && '0', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props));
 StyledTextFauxInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$z = 'forms.media_input';
+const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled__default.default(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.21',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
   componentId: "sc-12i9xfi-0"
-})(["flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props));
+})(["flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledTextMediaInput.defaultProps = {
   theme: reactTheming.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 styled.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);
@@ -484,20 +573,20 @@ 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$y,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '9.0.0-next.21'
 }).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 => reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
 StyledInputGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$x = 'forms.radio_label';
+const COMPONENT_ID$t = 'forms.radio_label';
 const sizeStyles$d = props => {
   const size = props.theme.space.base * 4;
   const padding = size + props.theme.space.base * 2;
@@ -505,158 +594,263 @@ const sizeStyles$d = props => {
   return styled.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__default.default(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.21',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
   componentId: "sc-1aq2e5t-0"
-})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
+})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
 StyledRadioLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$w = 'forms.checkbox_label';
+const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props));
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledCheckLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$v = 'forms.radio_hint';
+const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 6px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 6px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledRadioHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$u = 'forms.checkbox_hint';
+const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledCheckHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$t = 'forms.radio';
-const colorStyles$9 = props => {
-  const SHADE = 600;
-  const borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  const backgroundColor = props.theme.colors.background;
-  const iconColor = backgroundColor;
-  const hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+const COMPONENT_ID$p = 'forms.radio';
+const colorStyles$9 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const iconColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const hoverBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverBorderColor = reactTheming.getColor(borderOptions);
   const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
   const activeBorderColor = focusBorderColor;
+  const checkedBackgroundColor = reactTheming.getColor(backgroundOptions);
   const checkedBorderColor = focusBorderColor;
-  const checkedBackgroundColor = checkedBorderColor;
-  const checkedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  const checkedHoverBackgroundColor = checkedHoverBorderColor;
-  const checkedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
-  const checkedActiveBackgroundColor = checkedActiveBorderColor;
-  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const checkedHoverBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const checkedHoverBorderColor = reactTheming.getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const checkedActiveBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const checkedActiveBorderColor = reactTheming.getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const disabledBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[300]
+  });
   return styled.css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}", " & ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, reactTheming.focusStyles({
-    theme: props.theme,
+    theme,
     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$c = props => {
-  const lineHeight = `${props.theme.space.base * 5}px`;
-  const size = `${props.theme.space.base * 4}px`;
+const sizeStyles$c = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const lineHeight = `${theme.space.base * 5}px`;
+  const size = `${theme.space.base * 4}px`;
   const top = polished.math(`(${lineHeight} - ${size}) / 2`);
-  const iconSize = props.theme.iconSizes.sm;
+  const iconSize = theme.iconSizes.sm;
   const iconPosition = polished.math(`(${size} - ${iconSize}) / 2`);
   const iconTop = polished.math(`${iconPosition} + ${top}`);
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  return styled.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 marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  return styled.css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";border:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, theme.borders.sm, theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
 };
 const StyledRadioInput = styled__default.default.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.21',
   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 => reactTheming.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-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', StyledRadioLabel, sizeStyles$c, StyledRadioLabel, StyledRadioLabel, colorStyles$9, StyledRadioLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledRadioInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$s = 'forms.checkbox';
-const colorStyles$8 = props => {
-  const SHADE = 600;
-  const indeterminateBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  const indeterminateBackgroundColor = indeterminateBorderColor;
-  const indeterminateActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
-  const indeterminateDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  return styled.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 COMPONENT_ID$o = 'forms.checkbox';
+const colorStyles$8 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const indeterminateBackgroundColor = reactTheming.getColor(backgroundOptions);
+  const indeterminateBorderColor = reactTheming.getColor(borderOptions);
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const indeterminateHoverBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const indeterminateHoverBorderColor = reactTheming.getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const indeterminateActiveBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const indeterminateActiveBorderColor = reactTheming.getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const indeterminateDisabledBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[300]
+  });
+  return styled.css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":hover::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, indeterminateHoverBorderColor, indeterminateHoverBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
 };
 const StyledCheckInput = styled__default.default(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.21',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
   componentId: "sc-176jxxe-0"
-})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles$8(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
+})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledCheckInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$r = 'forms.radio_message';
+const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 6px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 6px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledRadioMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$q = 'forms.checkbox_message';
+const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledCheckMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _path$m;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var _path$l;
+function _extends$o() { return _extends$o = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$o.apply(null, arguments); }
 var SvgCheckSmFill = function SvgCheckSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -666,29 +860,29 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
   })));
 };
 
-const COMPONENT_ID$p = 'forms.check_svg';
+const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled__default.default(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.21'
 }).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 => reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledCheckSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _path$l;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+var _path$k;
+function _extends$n() { return _extends$n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$n.apply(null, arguments); }
 var SvgDashFill = function SvgDashFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeWidth: 2,
@@ -696,97 +890,194 @@ var SvgDashFill = function SvgDashFill(props) {
   })));
 };
 
-const COMPONENT_ID$o = 'forms.dash_svg';
+const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled__default.default(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.21'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
+})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledDashSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$n = 'forms.file_upload';
-const colorStyles$7 = props => {
-  const baseColor = reactTheming.getColor('primaryHue', 600, props.theme);
-  const hoverColor = reactTheming.getColor('primaryHue', 700, props.theme);
-  const activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
-  const disabledBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
-  const disabledForegroundColor = reactTheming.getColor('neutralHue', 400, props.theme);
-  return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : reactTheming.getColor('neutralHue', 600, props.theme), props.isDragging && polished.rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, polished.rgba(baseColor, 0.08), hoverColor, reactTheming.focusStyles({
-    theme: props.theme,
-    hue: baseColor
-  }), activeColor, polished.rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
-};
-const sizeStyles$b = props => {
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  const paddingHorizontal = `${props.isCompact ? 2 : 4}em`;
-  const paddingVertical = polished.math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
-  const fontSize = props.theme.fontSizes.md;
-  const lineHeight = reactTheming.getLineHeight(props.theme.space.base * 5, fontSize);
+const COMPONENT_ID$j = 'forms.file_upload';
+const colorStyles$7 = _ref => {
+  let {
+    theme,
+    isDragging
+  } = _ref;
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const foregroundOptions = {
+    theme,
+    variable: 'foreground.primary'
+  };
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const foregroundColor = reactTheming.getColor(foregroundOptions);
+  const hoverBorderColor = reactTheming.getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const hoverBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverForegroundColor = reactTheming.getColor({
+    ...foregroundOptions,
+    ...offset100
+  });
+  const activeBorderColor = reactTheming.getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const activeBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
+  const activeForegroundColor = reactTheming.getColor({
+    ...foregroundOptions,
+    ...offset200
+  });
+  const disabledBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledForegroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isDragging ? activeBorderColor : borderColor, isDragging ? activeBackgroundColor : undefined, isDragging ? activeForegroundColor : foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
+    theme
+  }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles$b = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  const paddingHorizontal = `${isCompact ? 2 : 4}em`;
+  const paddingVertical = polished.math(`${theme.space.base * (isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}`);
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = reactTheming.getLineHeight(theme.space.base * 5, fontSize);
   return styled.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__default.default.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.21'
 }).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 => reactTheming.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$b, colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledFileUpload.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$m = 'forms.file.close';
+const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled__default.default.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.21'
 }).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$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 => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledFileClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$l = 'forms.file';
-const colorStyles$6 = props => {
-  let borderColor;
-  let focusBorderColor;
-  let foregroundColor;
-  if (props.validation === 'success') {
-    borderColor = reactTheming.getColor('successHue', 600, props.theme);
-    focusBorderColor = borderColor;
-    foregroundColor = borderColor;
-  } else if (props.validation === 'error') {
-    borderColor = reactTheming.getColor('dangerHue', 600, props.theme);
-    focusBorderColor = borderColor;
-    foregroundColor = borderColor;
+const COMPONENT_ID$h = 'forms.file';
+const colorStyles$6 = _ref => {
+  let {
+    theme,
+    focusInset,
+    validation
+  } = _ref;
+  let borderVariable;
+  let focusBorderVariable;
+  let foregroundVariable;
+  if (validation === 'success') {
+    borderVariable = 'border.successEmphasis';
+    focusBorderVariable = borderVariable;
+    foregroundVariable = 'foreground.success';
+  } else if (validation === 'error') {
+    borderVariable = 'border.dangerEmphasis';
+    focusBorderVariable = borderVariable;
+    foregroundVariable = 'foreground.danger';
   } else {
-    borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
-    focusBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
-    foregroundColor = props.theme.colors.foreground;
+    borderVariable = 'border.default';
+    focusBorderVariable = 'border.primaryEmphasis';
+    foregroundVariable = 'foreground.default';
   }
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: borderVariable
+  });
+  const focusBorderColor = reactTheming.getColor({
+    theme,
+    variable: focusBorderVariable
+  });
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: foregroundVariable
+  });
   return styled.css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, reactTheming.focusStyles({
-    theme: props.theme,
-    inset: props.focusInset,
-    hue: focusBorderColor,
+    theme,
+    inset: focusInset,
+    color: {
+      variable: focusBorderVariable
+    },
     styles: {
       borderColor: focusBorderColor
     }
   }));
 };
-const sizeStyles$a = 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;
-  const lineHeight = reactTheming.getLineHeight(props.theme.space.base * 5, fontSize);
+const sizeStyles$a = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const size = `${theme.space.base * (isCompact ? 7 : 10)}px`;
+  const spacing = `${theme.space.base * (isCompact ? 2 : 3)}px`;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = reactTheming.getLineHeight(theme.space.base * 5, fontSize);
   return `
     box-sizing: border-box;
-    border: ${props.theme.borders.sm};
-    border-radius: ${props.theme.borderRadii.md};
+    border: ${theme.borders.sm};
+    border-radius: ${theme.borderRadii.md};
     padding: 0 ${spacing};
     height: ${size};
     line-height: ${lineHeight};
@@ -799,81 +1090,96 @@ const sizeStyles$a = props => {
     & > ${StyledFileClose} {
       width: ${size};
       height: ${size};
-      margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing};
+      margin-${theme.rtl ? 'left' : 'right'}: -${spacing};
     }
   `;
 };
 const StyledFile = styled__default.default.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.21'
 }).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 => reactTheming.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$a, colorStyles$6, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledFile.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$k = 'forms.file.delete';
+const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], props => reactTheming.getColor('dangerHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["color:", ";", ";"], props => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.danger'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledFileDelete.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$j = 'forms.file.icon';
-const StyledFileIcon = styled__default.default(_ref => {
+const COMPONENT_ID$f = 'forms.file.icon';
+const colorStyles$5 = _ref => {
   let {
-    children,
-    isCompact,
     theme,
-    ...props
+    $validation
   } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2'
+  const color = $validation ? undefined : reactTheming.getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  return styled.css(["color:", ";"], color);
+};
+const sizeStyles$9 = _ref2 => {
+  let {
+    $isCompact,
+    theme
+  } = _ref2;
+  const width = $isCompact ? theme.iconSizes.sm : theme.iconSizes.md;
+  const margin = `${theme.space.base * 2}px`;
+  return styled.css(["width:", ";margin-", ":", ";"], width, theme.rtl ? 'left' : 'right', margin);
+};
+const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
-})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$9, colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledFileIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$i = 'forms.file_list';
+const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled__default.default.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.21'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
-})(["margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
+})(["margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledFileList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$h = 'forms.file_list.item';
+const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled__default.default.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.21'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
-})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledFileListItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 var _circle$3;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
 var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
@@ -888,90 +1194,115 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
   })));
 };
 
-const COMPONENT_ID$g = 'forms.radio_svg';
+const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
-})(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledRadioSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$f = 'forms.toggle_label';
-const sizeStyles$9 = props => {
+const COMPONENT_ID$b = 'forms.toggle_label';
+const sizeStyles$8 = props => {
   const size = props.theme.space.base * 10;
   const padding = size + props.theme.space.base * 2;
   return styled.css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
 };
 const StyledToggleLabel = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
-})(["", ";", ";"], props => sizeStyles$9(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["", ";", ";"], props => sizeStyles$8(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledToggleLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$e = 'forms.toggle_hint';
+const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledToggleHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$d = 'forms.toggle';
-const colorStyles$5 = props => {
-  const SHADE = 600;
-  const backgroundColor = reactTheming.getColor('neutralHue', SHADE - 100, props.theme);
-  const hoverBackgroundColor = reactTheming.getColor('neutralHue', SHADE, props.theme);
-  const activeBackgroundColor = reactTheming.getColor('neutralHue', SHADE + 100, props.theme);
+const COMPONENT_ID$9 = 'forms.toggle';
+const colorStyles$4 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundOptions = {
+    theme,
+    variable: 'background.emphasis'
+  };
+  const backgroundColor = reactTheming.getColor(backgroundOptions);
+  const hoverBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
   return styled.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 height = `${props.theme.space.base * 5}px`;
-  const width = `${props.theme.space.base * 10}px`;
-  const iconSize = props.theme.iconSizes.md;
+const sizeStyles$7 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const height = `${theme.space.base * 5}px`;
+  const width = `${theme.space.base * 10}px`;
+  const iconSize = theme.iconSizes.md;
   const iconPosition = polished.math(`(${height} - ${iconSize}) / 2`);
   const checkedIconPosition = polished.math(`${width} - ${iconSize} - ${iconPosition}`);
-  return styled.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);
+  return styled.css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, theme.rtl ? 'right' : 'left', checkedIconPosition);
 };
 const StyledToggleInput = styled__default.default(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.21'
 }).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 => reactTheming.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, sizeStyles$7, colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledToggleInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$c = 'forms.toggle_message';
+const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
-})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledToggleMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 var _circle$2;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
 var SvgCircleSmFill = function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -986,54 +1317,86 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
   })));
 };
 
-const COMPONENT_ID$b = 'forms.toggle_svg';
+const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
-})(["transition:all 0.15s ease-in-out;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["transition:all 0.15s ease-in-out;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledToggleSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$a = 'forms.select';
-const colorStyles$4 = props => {
-  const color = reactTheming.getColor('neutralHue', 700, props.theme);
-  return styled.css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
+const COMPONENT_ID$6 = 'forms.select';
+const colorStyles$3 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = reactTheming.getColor({
+    theme,
+    variable: 'foreground.subtle',
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const disabledColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return styled.css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}&:disabled + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color, StyledTextMediaFigure, disabledColor);
 };
-const sizeStyles$7 = props => {
-  const padding = polished.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 styled.css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition);
+const sizeStyles$6 = _ref2 => {
+  let {
+    theme,
+    isBare,
+    isCompact
+  } = _ref2;
+  const padding = isBare ? undefined : polished.math(`${theme.iconSizes.md} + ${theme.space.base * 5}`);
+  const iconVerticalPosition = `${theme.space.base * (isCompact ? 1.5 : 2.5) + 1}px`;
+  const iconHorizontalPosition = `${theme.space.base * 3}px`;
+  return styled.css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], theme.rtl ? 'left' : 'right', padding, StyledTextMediaFigure, iconVerticalPosition, theme.rtl ? 'left' : 'right', iconHorizontalPosition);
 };
 const StyledSelect = styled__default.default(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.21',
   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;}"], sizeStyles$6, colorStyles$3, props => reactTheming.getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), StyledTextMediaFigure);
 StyledSelect.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'forms.select_wrapper';
+const COMPONENT_ID$5 = 'forms.select_wrapper';
+const sizeStyles$5 = _ref => {
+  let {
+    theme,
+    isCompact
+  } = _ref;
+  const height = `${theme.space.base * (isCompact ? 8 : 10)}px`;
+  return styled.css(["max-height:", ";"], height);
+};
 const StyledSelectWrapper = styled__default.default(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.21'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
-})(["position:relative;padding:0;overflow:visible;& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], StyledSelect, reactTheming.SELECTOR_FOCUS_VISIBLE);
+})(["position:relative;padding:0;overflow:visible;", ";& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], sizeStyles$5, StyledSelect, reactTheming.SELECTOR_FOCUS_VISIBLE);
 StyledSelectWrapper.defaultProps = {
   theme: reactTheming.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 `
@@ -1078,28 +1441,74 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles$3 = props => {
-  const SHADE = 600;
-  const thumbBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+const colorStyles$2 = _ref => {
+  let {
+    theme,
+    hasLowerTrack
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const thumbBackgroundColor = reactTheming.getColor(options);
   const thumbBorderColor = thumbBackgroundColor;
-  const thumbBoxShadow = props.theme.shadows.lg(polished.math(`${props.theme.space.base} * 1px`), polished.math(`${props.theme.space.base} * 2px`), reactTheming.getColor('neutralHue', SHADE + 200, props.theme, 0.24));
+  const thumbBoxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor({
+    variable: 'shadow.small',
+    theme
+  }));
   const thumbFocusBoxShadow = reactTheming.getFocusBoxShadow({
-    theme: props.theme
+    theme
+  });
+  const thumbActiveBackgroundColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
   });
-  const thumbActiveBackgroundColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
   const thumbActiveBorderColor = thumbBorderColor;
-  const thumbDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const thumbDisabledBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
   const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
-  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
+  const thumbHoverBackgroundColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
   const thumbHoverBorderColor = thumbHoverBackgroundColor;
-  const trackBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : '';
-  const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
-  const trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : '';
-  const trackDisabledBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
+  const trackBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'border.emphasis',
+    dark: {
+      offset: 100
+    },
+    light: {
+      offset: -200
+    }
+  });
+  const trackLowerBackgroundColor = hasLowerTrack ? thumbBackgroundColor : '';
+  const trackBackgroundImage = hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
+  const trackDisabledBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[200]
+  });
+  const trackDisabledLowerBackgroundColor = hasLowerTrack ? reactTheming.getColor({
+    theme,
+    variable: 'border.emphasis'
+  }) : '';
+  const trackDisabledBackgroundImage = hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
   return styled.css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(`
       background-color: ${trackBackgroundColor};
-      background-image: ${trackBackgroundImage}; /* provide means for styling lower range on WebKit */
+      background-image: ${trackBackgroundImage}; /* [1] */
     `), thumbStyles(`
       border-color: ${thumbBorderColor};
       box-shadow: ${thumbBoxShadow};
@@ -1114,10 +1523,11 @@ const colorStyles$3 = 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(`
+        background-color: ${trackDisabledBackgroundColor};
         background-image: ${trackDisabledBackgroundImage};
       `, ':disabled'), thumbStyles(`
         border-color: ${thumbDisabledBorderColor};
@@ -1127,29 +1537,32 @@ const colorStyles$3 = props => {
         background-color: ${trackDisabledLowerBackgroundColor};
       `, ':disabled'));
 };
-const sizeStyles$6 = props => {
-  const thumbSize = polished.math(`${props.theme.space.base} * 5px`);
-  const trackHeight = polished.math(`${props.theme.space.base} * 1.5px`);
+const sizeStyles$4 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const thumbSize = `${theme.space.base * 5}px`;
+  const trackHeight = `${theme.space.base * 1.5}px`;
   const trackBorderRadius = trackHeight;
-  const trackMargin = polished.math(`(${thumbSize} - ${trackHeight}) / 2 + ${props.theme.shadowWidths.md}`);
+  const trackMargin = polished.math(`(${thumbSize} - ${trackHeight}) / 2 + ${theme.shadowWidths.md}`);
   const thumbMargin = polished.math(`(${trackHeight} - ${thumbSize}) / 2`);
-  return styled.css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, polished.math(`${props.theme.space.base} * 2px`), trackStyles(`
+  return styled.css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, `${theme.space.base * 2}px`, trackStyles(`
       margin: ${trackMargin} 0;
       border-radius: ${trackBorderRadius};
       height: ${trackHeight};
     `), thumbStyles(`
-      margin: ${thumbMargin} 0; /* reset for IE */
+      margin: ${thumbMargin} 0; /* [1] */
       width: ${thumbSize};
       height: ${thumbSize};
     `), trackLowerStyles(`
-      border-top-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
-      border-bottom-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
+      border-top-${theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
+      border-bottom-${theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
       height: ${trackHeight};
     `));
 };
 const StyledRangeInput = styled__default.default.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.21',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1166,306 +1579,241 @@ const StyledRangeInput = styled__default.default.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(`
+    `), sizeStyles$4, 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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+    `), colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledRangeInput.defaultProps = {
   backgroundSize: '0%',
   hasLowerTrack: true,
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$7 = 'forms.slider';
-const StyledSlider = styled__default.default.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 => polished.math(`(${props.theme.space.base} * 5px) + (${props.theme.shadowWidths.md} * 2)`), StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props => polished.math(`${props.theme.space.base} * 2px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledSlider.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
+const COMPONENT_ID$3 = 'forms.tile';
+const colorStyles$1 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default',
+    ...offset100
+  });
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const hoverBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  });
+  const activeBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
+  const focusBorderColor = hoverBorderColor;
+  const activeBorderColor = hoverBorderColor;
+  const checkedBackgroundColor = reactTheming.getColor(backgroundOptions);
+  const checkedForegroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const checkedHoverBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const checkedActiveBackgroundColor = reactTheming.getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const disabledBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledForegroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";}", ";&:active{border-color:", ";background-color:", ";}&:has(:checked){border-color:transparent;background-color:", ";color:", ";}&:hover:has(:checked){background-color:", ";}&:active:has(:checked){background-color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], borderColor, backgroundColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, reactTheming.focusStyles({
+    theme,
+    selector: '&:has(:focus-visible)',
+    styles: {
+      borderColor: focusBorderColor
+    }
+  }), activeBorderColor, activeBackgroundColor, checkedBackgroundColor, checkedForegroundColor, checkedHoverBackgroundColor, checkedActiveBackgroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-
-const COMPONENT_ID$6 = 'forms.slider_thumb';
-const colorStyles$2 = props => {
-  const SHADE = 600;
-  const backgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  const borderColor = backgroundColor;
-  const boxShadow = props.theme.shadows.lg(polished.math(`${props.theme.space.base} * 1px`), polished.math(`${props.theme.space.base} * 2px`), reactTheming.getColor('neutralHue', SHADE + 200, props.theme, 0.24));
-  const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  const activeBorderColor = borderColor;
-  const hoverBackgroundColor = activeBackgroundColor;
-  const hoverBorderColor = hoverBackgroundColor;
-  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  const disabledBorderColor = disabledBackgroundColor;
-  return styled.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, reactTheming.focusStyles({
-    theme: props.theme
-  }), activeBorderColor, activeBackgroundColor, disabledBorderColor, disabledBackgroundColor);
-};
-const sizeStyles$5 = props => {
-  const size = polished.math(`${props.theme.space.base} * 5px`);
-  const marginTop = polished.math(`${size} / -2`);
-  return styled.css(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size);
-};
-const StyledSliderThumb = styled__default.default.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 => polished.math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5(props), props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledSliderThumb.defaultProps = {
-  position: 0,
-  theme: reactTheming.DEFAULT_THEME
+const sizeStyles$3 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const border = theme.borders.sm;
+  const padding = `${theme.space.base * 5}px`;
+  return styled.css(["border:", ";padding:", ";min-width:132px;"], border, padding);
 };
-
-const COMPONENT_ID$5 = 'forms.slider_track';
-const colorStyles$1 = props => {
-  const SHADE = 600;
-  const backgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  const backgroundImageColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  return styled.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 = polished.math(`${props.theme.space.base} * 1.5px`);
-  const backgroundPosition = polished.math(`${props.backgroundPosition} * 1px`);
-  const backgroundSize = polished.math(`${props.backgroundSize} * 1px`);
-  const borderRadius = height;
-  const marginTop = polished.math(`${height} / -2`);
-  const padding = polished.math(`${props.theme.space.base} * 2.5px`);
-  return styled.css(["margin-top:", ";border-radius:", ";background-position:", ";background-size:", ";padding:0 ", ";"], marginTop, borderRadius, backgroundPosition, backgroundSize, padding);
-};
-const StyledSliderTrack = styled__default.default.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledSliderTrack.defaultProps = {
-  backgroundSize: 0,
-  backgroundPosition: 0,
+const StyledTile = styled__default.default.label.attrs({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTile",
+  componentId: "sc-1jjvmxs-0"
+})(["display:block;position:relative;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-radius:", ";direction:", ";word-break:break-word;", ";", ";", ";"], props => props.theme.borderRadii.md, props => props.theme.rtl && 'rtl', sizeStyles$3, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+StyledTile.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'forms.slider_track_rail';
-const sizeStyles$3 = props => {
-  const height = polished.math(`${props.theme.space.base} * 1.5px`);
-  const margin = polished.math(`${props.theme.space.base} * 2.5px`);
-  return styled.css(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? `-${margin}` : margin, props.theme.rtl ? margin : `-${margin}`, height);
+const COMPONENT_ID$2 = 'forms.tile_description';
+const sizeStyles$2 = _ref => {
+  let {
+    theme,
+    isCentered
+  } = _ref;
+  const marginTop = `${theme.space.base}px`;
+  const marginHorizontal = isCentered ? undefined : polished.math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
+  const fontSize = theme.fontSizes.sm;
+  const lineHeight = reactTheming.getLineHeight(theme.space.base * 4, fontSize);
+  return styled.css(["margin-top:", ";margin-", ":", ";line-height:", ";font-size:", ";"], marginTop, theme.rtl ? 'right' : 'left', marginHorizontal, lineHeight, fontSize);
 };
-const StyledSliderTrackRail = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2'
+const StyledTileDescription = styled__default.default.span.attrs({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
-  displayName: "StyledSliderTrackRail",
-  componentId: "sc-1o5owbd-0"
-})(["position:relative;", ";", ";"], props => sizeStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledSliderTrackRail.defaultProps = {
+  displayName: "StyledTileDescription",
+  componentId: "sc-xfuu7u-0"
+})(["display:block;text-align:", ";", ";", ";"], props => props.isCentered && 'center', sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+StyledTileDescription.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'forms.tile_icon';
-const sizeStyles$2 = props => {
-  const iconSize = polished.math(`${props.theme.iconSizes.md} * 2`);
+const COMPONENT_ID$1 = 'forms.tile_icon';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const color = reactTheming.getColor(options);
+  const hoverColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
+  const checkedColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const disabledColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return styled.css(["color:", ";", ":hover &&{color:", ";}", ":active &&{color:", ";}", ":has(:checked) &&{color:", ";}", "[aria-disabled='true'] &&{color:", ";}"], color, StyledTile, hoverColor, StyledTile, activeColor, StyledTile, checkedColor, StyledTile, disabledColor);
+};
+const sizeStyles$1 = _ref2 => {
+  let {
+    theme,
+    isCentered
+  } = _ref2;
+  const iconSize = polished.math(`${theme.iconSizes.md} * 2`);
   let position;
   let top;
-  let horizontalValue;
-  if (!props.isCentered) {
+  let horizontal;
+  if (!isCentered) {
     position = 'absolute';
-    top = `${props.theme.space.base * 6}px`;
-    horizontalValue = `left: ${props.theme.space.base * 5}px`;
-    if (props.theme.rtl) {
-      horizontalValue = `right: ${props.theme.space.base * 5}px`;
-    }
+    top = `${theme.space.base * 6}px`;
+    horizontal = `${theme.space.base * 5}px`;
   }
-  return styled.css(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize);
+  return styled.css(["position:", ";top:", ";", ":", ";line-height:0;& > *{width:", ";height:", ";}"], position, top, theme.rtl ? 'right' : 'left', horizontal, iconSize, iconSize);
 };
 const StyledTileIcon = styled__default.default.span.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
-})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], props => sizeStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:block;transition:color 0.25s ease-in-out;text-align:center;", ";", ";", ";"], sizeStyles$1, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTileIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'forms.tile';
-const colorStyles = props => {
-  const SHADE = 600;
-  const iconColor = reactTheming.getColor('neutralHue', SHADE, props.theme);
-  const color = reactTheming.getColor('neutralHue', SHADE + 200, props.theme);
-  const borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  const hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
-  const activeBorderColor = focusBorderColor;
-  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  const disabledColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
-  const selectedBorderColor = focusBorderColor;
-  const selectedBackgroundColor = selectedBorderColor;
-  const selectedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  const selectedHoverBackgroundColor = selectedHoverBorderColor;
-  const selectedActiveBorderColor = reactTheming.getColor('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.getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, 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);
-};
-const StyledTile = styled__default.default.label.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2',
-  'data-garden-selected': props.isSelected
-})).withConfig({
-  displayName: "StyledTile",
-  componentId: "sc-1jjvmxs-0"
-})(["display:block;position:relative;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-radius:", ";cursor:", ";padding:", "px;direction:", ";min-width:132px;word-break:break-word;", ";", ";"], props => props.theme.borderRadii.md, props => !props.isDisabled && 'pointer', props => props.theme.space.base * 5, props => props.theme.rtl && 'rtl', props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledTile.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'forms.tile_description';
-const sizeStyles$1 = props => {
-  let marginDirection = 'left';
-  let marginValue;
-  if (props.theme.rtl) {
-    marginDirection = 'right';
-  }
-  if (!props.isCentered) {
-    marginValue = polished.math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
-  }
-  return styled.css(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue);
-};
-const StyledTileDescription = styled__default.default.span.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTileDescription",
-  componentId: "sc-xfuu7u-0"
-})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], props => props.isCentered && 'center', props => reactTheming.getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTileDescription.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
 const StyledTileInput = styled__default.default.input.withConfig({
   displayName: "StyledTileInput",
   componentId: "sc-1nq2m6q-0"
-})(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
+})(["position:absolute;top:0;left:0;opacity:0;z-index:1;margin:0;cursor:", ";width:100%;height:100%;"], props => props.disabled ? 'default' : 'pointer');
 StyledTileInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'forms.tile_label';
-const sizeStyles = props => {
-  let marginDirection = 'left';
-  let marginTop = `${props.theme.space.base * 2}px`;
-  let marginValue;
-  if (props.theme.rtl) {
-    marginDirection = 'right';
-  }
-  if (!props.isCentered) {
-    marginValue = polished.math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
-    marginTop = '0';
-  }
-  return styled.css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
-};
-const StyledTileLabel = styled__default.default.span.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTileLabel",
-  componentId: "sc-1mypv27-0"
-})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledTileLabel.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const Field = React__namespace.default.forwardRef((props, ref) => {
-  const [hasHint, setHasHint] = React.useState(false);
-  const [hasMessage, setHasMessage] = React.useState(false);
-  const [isLabelActive, setIsLabelActive] = React.useState(false);
-  const [isLabelHovered, setIsLabelHovered] = React.useState(false);
-  const multiThumbRangeRef = React.useRef(null);
-  const {
-    getInputProps,
-    getMessageProps,
-    ...propGetters
-  } = containerField.useField({
-    idPrefix: props.id,
-    hasHint,
-    hasMessage
-  });
-  const fieldProps = React.useMemo(() => ({
-    ...propGetters,
-    getInputProps,
-    getMessageProps,
-    isLabelActive,
-    setIsLabelActive,
-    isLabelHovered,
-    setIsLabelHovered,
-    hasHint,
-    setHasHint,
-    hasMessage,
-    setHasMessage,
-    multiThumbRangeRef
-  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
-  return React__namespace.default.createElement(FieldContext.Provider, {
-    value: fieldProps
-  }, React__namespace.default.createElement(StyledField, _extends$t({}, props, {
-    ref: ref
-  })));
-});
-Field.displayName = 'Field';
-
-const FieldsetContext = React.createContext(undefined);
-const useFieldsetContext = () => {
-  const fieldsetContext = React.useContext(FieldsetContext);
-  return fieldsetContext;
-};
-
-const LegendComponent = React.forwardRef((props, ref) => {
-  const fieldsetContext = useFieldsetContext();
-  return React__namespace.default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
-    ref: ref
-  }));
-});
-LegendComponent.displayName = 'Fieldset.Legend';
-const Legend = LegendComponent;
-
-const FieldsetComponent = React.forwardRef((props, ref) => {
-  const fieldsetContext = React.useMemo(() => ({
-    isCompact: props.isCompact
-  }), [props.isCompact]);
-  return React__namespace.default.createElement(FieldsetContext.Provider, {
-    value: fieldsetContext
-  }, React__namespace.default.createElement(StyledFieldset, _extends$t({}, props, {
-    ref: ref
-  })));
-});
-FieldsetComponent.displayName = 'Fieldset';
-FieldsetComponent.propTypes = {
-  isCompact: PropTypes__default.default.bool
+const COMPONENT_ID = 'forms.tile_label';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    isCentered
+  } = _ref;
+  const marginTop = isCentered ? `${theme.space.base * 2}px` : 0;
+  const marginHorizontal = isCentered ? undefined : polished.math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = reactTheming.getLineHeight(theme.space.base * 5, fontSize);
+  return styled.css(["margin-top:", ";margin-", ":", ";line-height:", ";font-size:", ";"], marginTop, theme.rtl ? 'right' : 'left', marginHorizontal, lineHeight, fontSize);
+};
+const StyledTileLabel = styled__default.default.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTileLabel",
+  componentId: "sc-1mypv27-0"
+})(["display:block;text-align:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => props.theme.fontWeights.semibold, sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+StyledTileLabel.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
 };
-const Fieldset = FieldsetComponent;
-Fieldset.Legend = Legend;
 
 const InputContext = React.createContext(undefined);
 const useInputContext = () => {
@@ -1503,11 +1851,76 @@ const Hint = React__namespace.default.forwardRef((props, ref) => {
   if (getHintProps) {
     combinedProps = getHintProps(combinedProps);
   }
-  return React__namespace.default.createElement(HintComponent, _extends$t({
+  return React__namespace.default.createElement(HintComponent, Object.assign({
     ref: ref
   }, combinedProps));
 });
-Hint.displayName = 'Hint';
+Hint.displayName = 'Field.Hint';
+
+const VALIDATION = ['success', 'warning', 'error'];
+const FILE_VALIDATION = ['success', 'error'];
+const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
+
+const Message = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    validation,
+    validationLabel,
+    children,
+    ...props
+  } = _ref;
+  const {
+    hasMessage,
+    setHasMessage,
+    getMessageProps
+  } = useFieldContext() || {};
+  const type = useInputContext();
+  React.useEffect(() => {
+    if (!hasMessage && setHasMessage) {
+      setHasMessage(true);
+    }
+    return () => {
+      if (hasMessage && setHasMessage) {
+        setHasMessage(false);
+      }
+    };
+  }, [hasMessage, setHasMessage]);
+  let MessageComponent;
+  if (type === 'checkbox') {
+    MessageComponent = StyledCheckMessage;
+  } else if (type === 'radio') {
+    MessageComponent = StyledRadioMessage;
+  } else if (type === 'toggle') {
+    MessageComponent = StyledToggleMessage;
+  } else {
+    MessageComponent = StyledMessage;
+  }
+  let combinedProps = {
+    validation,
+    validationLabel,
+    ...props
+  };
+  if (getMessageProps) {
+    combinedProps = getMessageProps(combinedProps);
+  }
+  const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
+  return React__namespace.default.createElement(MessageComponent, Object.assign({
+    ref: ref
+  }, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
+    validation: validation,
+    "aria-label": ariaLabel
+  }), children);
+});
+Message.displayName = 'Field.Message';
+Message.propTypes = {
+  validation: PropTypes__default.default.oneOf(VALIDATION),
+  validationLabel: PropTypes__default.default.string
+};
+
+const FieldsetContext = React.createContext(undefined);
+const useFieldsetContext = () => {
+  const fieldsetContext = React.useContext(FieldsetContext);
+  return fieldsetContext;
+};
 
 const Label$1 = React__namespace.default.forwardRef((props, ref) => {
   const fieldContext = useFieldContext();
@@ -1519,8 +1932,7 @@ const Label$1 = React__namespace.default.forwardRef((props, ref) => {
     if (type === undefined) {
       const {
         setIsLabelActive,
-        setIsLabelHovered,
-        multiThumbRangeRef
+        setIsLabelHovered
       } = fieldContext;
       combinedProps = {
         ...combinedProps,
@@ -1535,9 +1947,6 @@ const Label$1 = React__namespace.default.forwardRef((props, ref) => {
         }),
         onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, () => {
           setIsLabelHovered(false);
-        }),
-        onClick: containerUtilities.composeEventHandlers(props.onClick, () => {
-          multiThumbRangeRef.current && multiThumbRangeRef.current.focus();
         })
       };
     }
@@ -1549,12 +1958,12 @@ const Label$1 = React__namespace.default.forwardRef((props, ref) => {
     };
   }
   if (type === 'radio') {
-    return React__namespace.default.createElement(StyledRadioLabel, _extends$t({
+    return React__namespace.default.createElement(StyledRadioLabel, Object.assign({
       ref: ref
     }, combinedProps), React__namespace.default.createElement(StyledRadioSvg, null), props.children);
   } else if (type === 'checkbox') {
     const onLabelSelect = e => {
-      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+      const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1;
       if (fieldContext && isFirefox && e.target instanceof Element) {
         const inputId = e.target.getAttribute('for');
         if (!inputId) return;
@@ -1572,81 +1981,87 @@ const Label$1 = React__namespace.default.forwardRef((props, ref) => {
       ...combinedProps,
       onClick: containerUtilities.composeEventHandlers(combinedProps.onClick, onLabelSelect)
     };
-    return React__namespace.default.createElement(StyledCheckLabel, _extends$t({
+    return React__namespace.default.createElement(StyledCheckLabel, Object.assign({
       ref: ref
     }, combinedProps), React__namespace.default.createElement(StyledCheckSvg, null), React__namespace.default.createElement(StyledDashSvg, null), props.children);
   } else if (type === 'toggle') {
-    return React__namespace.default.createElement(StyledToggleLabel, _extends$t({
+    return React__namespace.default.createElement(StyledToggleLabel, Object.assign({
       ref: ref
     }, combinedProps), React__namespace.default.createElement(StyledToggleSvg, null), props.children);
   }
-  return React__namespace.default.createElement(StyledLabel, _extends$t({
+  return React__namespace.default.createElement(StyledLabel, Object.assign({
     ref: ref
   }, combinedProps));
 });
-Label$1.displayName = 'Label';
+Label$1.displayName = 'Field.Label';
 Label$1.propTypes = {
   isRegular: PropTypes__default.default.bool
 };
 
-const VALIDATION = ['success', 'warning', 'error'];
-const FILE_VALIDATION = ['success', 'error'];
-const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
-
-const Message = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    validation,
-    validationLabel,
-    children,
-    ...props
-  } = _ref;
+const FieldComponent = React__namespace.default.forwardRef((props, ref) => {
+  const [hasHint, setHasHint] = React.useState(false);
+  const [hasMessage, setHasMessage] = React.useState(false);
+  const [isLabelActive, setIsLabelActive] = React.useState(false);
+  const [isLabelHovered, setIsLabelHovered] = React.useState(false);
   const {
+    getInputProps,
+    getMessageProps,
+    ...propGetters
+  } = containerField.useField({
+    idPrefix: props.id,
+    hasHint,
+    hasMessage
+  });
+  const fieldProps = React.useMemo(() => ({
+    ...propGetters,
+    getInputProps,
+    getMessageProps,
+    isLabelActive,
+    setIsLabelActive,
+    isLabelHovered,
+    setIsLabelHovered,
+    hasHint,
+    setHasHint,
     hasMessage,
-    setHasMessage,
-    getMessageProps
-  } = useFieldContext() || {};
-  const type = useInputContext();
-  React.useEffect(() => {
-    if (!hasMessage && setHasMessage) {
-      setHasMessage(true);
-    }
-    return () => {
-      if (hasMessage && setHasMessage) {
-        setHasMessage(false);
-      }
-    };
-  }, [hasMessage, setHasMessage]);
-  let MessageComponent;
-  if (type === 'checkbox') {
-    MessageComponent = StyledCheckMessage;
-  } else if (type === 'radio') {
-    MessageComponent = StyledRadioMessage;
-  } else if (type === 'toggle') {
-    MessageComponent = StyledToggleMessage;
-  } else {
-    MessageComponent = StyledMessage;
-  }
-  let combinedProps = {
-    validation,
-    validationLabel,
-    ...props
-  };
-  if (getMessageProps) {
-    combinedProps = getMessageProps(combinedProps);
-  }
-  const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
-  return React__namespace.default.createElement(MessageComponent, _extends$t({
+    setHasMessage
+  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
+  return React__namespace.default.createElement(FieldContext.Provider, {
+    value: fieldProps
+  }, React__namespace.default.createElement(StyledField, Object.assign({}, props, {
     ref: ref
-  }, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
-    validation: validation,
-    "aria-label": ariaLabel
-  }), children);
+  })));
 });
-Message.displayName = 'Message';
-Message.propTypes = {
-  validation: PropTypes__default.default.oneOf(VALIDATION),
-  validationLabel: PropTypes__default.default.string
+FieldComponent.displayName = 'Field';
+const Field = FieldComponent;
+Field.Hint = Hint;
+Field.Label = Label$1;
+Field.Message = Message;
+
+const LegendComponent = React.forwardRef((props, ref) => {
+  const fieldsetContext = useFieldsetContext();
+  return React__namespace.default.createElement(StyledLegend, Object.assign({}, props, fieldsetContext, {
+    ref: ref
+  }));
+});
+LegendComponent.displayName = 'Fieldset.Legend';
+const Legend = LegendComponent;
+
+const FieldsetComponent = React.forwardRef((props, ref) => {
+  const fieldsetContext = React.useMemo(() => ({
+    isCompact: props.isCompact
+  }), [props.isCompact]);
+  return React__namespace.default.createElement(FieldsetContext.Provider, {
+    value: fieldsetContext
+  }, React__namespace.default.createElement(StyledFieldset, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+FieldsetComponent.displayName = 'Fieldset';
+FieldsetComponent.propTypes = {
+  isCompact: PropTypes__default.default.bool
 };
+const Fieldset = FieldsetComponent;
+Fieldset.Legend = Legend;
 
 const Checkbox = React__namespace.default.forwardRef((_ref, ref) => {
   let {
@@ -1940,31 +2355,41 @@ Toggle.propTypes = {
   isCompact: PropTypes__default.default.bool
 };
 
-var _path$k;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-  })));
+const StartIconComponent = _ref => {
+  let {
+    isDisabled,
+    isFocused,
+    isHovered,
+    isRotated,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
+    $position: "start",
+    $isDisabled: isDisabled,
+    $isFocused: isFocused,
+    $isHovered: isHovered,
+    $isRotated: isRotated
+  }, props));
 };
-
-const StartIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, _extends$t({
-  position: "start"
-}, props));
 StartIconComponent.displayName = 'FauxInput.StartIcon';
 const StartIcon = StartIconComponent;
 
-const EndIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, _extends$t({
-  position: "end"
-}, props));
+const EndIconComponent = _ref => {
+  let {
+    isDisabled,
+    isFocused,
+    isHovered,
+    isRotated,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
+    $position: "end",
+    $isDisabled: isDisabled,
+    $isFocused: isFocused,
+    $isHovered: isHovered,
+    $isRotated: isRotated
+  }, props));
+};
 EndIconComponent.displayName = 'FauxInput.EndIcon';
 const EndIcon = EndIconComponent;
 
@@ -1984,7 +2409,7 @@ const FauxInputComponent = React.forwardRef((_ref, ref) => {
   const onBlurHandler = containerUtilities.composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   });
-  return React__namespace.default.createElement(StyledTextFauxInput, _extends$t({
+  return React__namespace.default.createElement(StyledTextFauxInput, Object.assign({
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
     isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
@@ -2035,6 +2460,7 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(StyledSelectWrapper, {
     isCompact: isCompact,
     isBare: isBare,
+    isDisabled: disabled,
     validation: validation,
     focusInset: focusInset
   }, React__namespace.default.createElement(StyledSelect, combinedProps), !isBare && React__namespace.default.createElement(FauxInput.EndIcon, {
@@ -2049,110 +2475,6 @@ Select.propTypes = {
 };
 Select.displayName = 'Select';
 
-const MIN = 0;
-const MAX = 100;
-const MultiThumbRange = React.forwardRef((_ref, ref) => {
-  let {
-    min = MIN,
-    max = MAX,
-    minValue,
-    maxValue,
-    disabled,
-    step,
-    jump,
-    onChange,
-    onMouseDown,
-    ...props
-  } = _ref;
-  const theme = React.useContext(styled.ThemeContext);
-  const environment = reactTheming.useDocument(theme);
-  const trackRailRef = React.useRef(null);
-  const minThumbRef = React.useRef(null);
-  const maxThumbRef = React.useRef(null);
-  const {
-    getTrackProps,
-    getMinThumbProps,
-    getMaxThumbProps,
-    trackRect,
-    minValue: updatedMinValue,
-    maxValue: updatedMaxValue
-  } = containerSlider.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 || {};
-  React.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__namespace.default.createElement(StyledSlider, _extends$t({
-    ref: ref,
-    onMouseDown: onSliderMouseDown
-  }, props), React__namespace.default.createElement(StyledSliderTrack, {
-    backgroundSize: sliderBackgroundSize,
-    backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition,
-    isDisabled: disabled
-  }, React__namespace.default.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, {
-    ref: trackRailRef
-  }), React__namespace.default.createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({
-    'aria-label': updatedMinValue
-  }), {
-    isDisabled: disabled,
-    position: minPosition,
-    ref: minThumbRef,
-    "data-garden-active": isLabelActive,
-    "data-garden-hover": isLabelHovered
-  })), React__namespace.default.createElement(StyledSliderThumb, _extends$t({}, getMaxThumbProps({
-    'aria-label': updatedMaxValue
-  }), {
-    isDisabled: disabled,
-    position: maxPosition,
-    ref: maxThumbRef
-  })))));
-});
-MultiThumbRange.displayName = 'MultiThumbRange';
-MultiThumbRange.propTypes = {
-  min: PropTypes__default.default.number,
-  max: PropTypes__default.default.number,
-  minValue: PropTypes__default.default.number,
-  maxValue: PropTypes__default.default.number,
-  step: PropTypes__default.default.number,
-  jump: PropTypes__default.default.number,
-  disabled: PropTypes__default.default.bool,
-  onChange: PropTypes__default.default.func
-};
-MultiThumbRange.defaultProps = {
-  min: MIN,
-  max: MAX,
-  step: 1
-};
-
 const TilesContext = React.createContext(undefined);
 const useTilesContext = () => {
   return React.useContext(TilesContext);
@@ -2175,12 +2497,10 @@ const TileComponent = React__namespace.default.forwardRef((_ref, ref) => {
       onChange: tilesContext.onChange
     };
   }
-  return React__namespace.default.createElement(StyledTile, _extends$t({
+  return React__namespace.default.createElement(StyledTile, Object.assign({
     ref: ref,
-    "aria-disabled": disabled,
-    isDisabled: disabled,
-    isSelected: tilesContext && tilesContext.value === value
-  }, props), children, React__namespace.default.createElement(StyledTileInput, _extends$t({}, inputProps, {
+    "aria-disabled": disabled
+  }, props), children, React__namespace.default.createElement(StyledTileInput, Object.assign({}, inputProps, {
     disabled: disabled,
     value: value,
     type: "radio",
@@ -2196,7 +2516,7 @@ const Tile = TileComponent;
 
 const DescriptionComponent = React.forwardRef((props, ref) => {
   const tilesContext = useTilesContext();
-  return React__namespace.default.createElement(StyledTileDescription, _extends$t({
+  return React__namespace.default.createElement(StyledTileDescription, Object.assign({
     ref: ref,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
@@ -2206,7 +2526,7 @@ const Description = DescriptionComponent;
 
 const IconComponent = React.forwardRef((props, ref) => {
   const tileContext = useTilesContext();
-  return React__namespace.default.createElement(StyledTileIcon, _extends$t({
+  return React__namespace.default.createElement(StyledTileIcon, Object.assign({
     ref: ref,
     isCentered: tileContext && tileContext.isCentered
   }, props));
@@ -2223,7 +2543,7 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
       setTitle(ref.current.textContent || undefined);
     }
   }, [ref]);
-  return React__namespace.default.createElement(StyledTileLabel, _extends$t({
+  return React__namespace.default.createElement(StyledTileLabel, Object.assign({
     ref: reactMergeRefs.mergeRefs([ref, forwardedRef]),
     title: title,
     isCentered: tilesContext && tilesContext.isCentered
@@ -2259,7 +2579,7 @@ const TilesComponent = React.forwardRef((_ref, ref) => {
   }), [handleOnChange, selectedValue, name, isCentered]);
   return React__namespace.default.createElement(TilesContext.Provider, {
     value: tileContext
-  }, React__namespace.default.createElement("div", _extends$t({
+  }, React__namespace.default.createElement("div", Object.assign({
     ref: ref,
     role: "radiogroup"
   }, props)));
@@ -2290,7 +2610,7 @@ const InputGroup = React__namespace.default.forwardRef((_ref, ref) => {
   }), [isCompact]);
   return React__namespace.default.createElement(InputGroupContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(StyledInputGroup, _extends$t({
+  }, React__namespace.default.createElement(StyledInputGroup, Object.assign({
     ref: ref,
     isCompact: isCompact
   }, props)));
@@ -2306,7 +2626,7 @@ const FileUpload = React__namespace.default.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   return (
-    React__namespace.default.createElement(StyledFileUpload, _extends$t({
+    React__namespace.default.createElement(StyledFileUpload, Object.assign({
       ref: ref,
       "aria-disabled": disabled
     }, props, {
@@ -2325,7 +2645,7 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
   let {
     ...props
   } = _ref;
-  return React__namespace.default.createElement(StyledFileListItem, _extends$t({}, props, {
+  return React__namespace.default.createElement(StyledFileListItem, Object.assign({}, props, {
     ref: ref
   }));
 });
@@ -2336,7 +2656,7 @@ const FileListComponent = React.forwardRef((_ref, ref) => {
   let {
     ...props
   } = _ref;
-  return React__namespace.default.createElement(StyledFileList, _extends$t({}, props, {
+  return React__namespace.default.createElement(StyledFileList, Object.assign({}, props, {
     ref: ref
   }));
 });
@@ -2345,7 +2665,7 @@ const FileList = FileListComponent;
 FileList.Item = Item;
 
 var _path$j;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+function _extends$k() { return _extends$k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$k.apply(null, arguments); }
 var SvgXStroke$1 = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2362,7 +2682,7 @@ var SvgXStroke$1 = function SvgXStroke(props) {
 };
 
 var _path$i;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2388,7 +2708,7 @@ const CloseComponent = React__namespace.default.forwardRef((props, ref) => {
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.preventDefault()
   );
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close');
-  return React__namespace.default.createElement(StyledFileClose, _extends$t({
+  return React__namespace.default.createElement(StyledFileClose, Object.assign({
     ref: ref,
     "aria-label": ariaLabel
   }, props, {
@@ -2401,7 +2721,7 @@ CloseComponent.displayName = 'File.Close';
 const Close = CloseComponent;
 
 var _path$h;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
 var SvgTrashStroke$1 = function SvgTrashStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2419,7 +2739,7 @@ var SvgTrashStroke$1 = function SvgTrashStroke(props) {
 };
 
 var _path$g;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
 var SvgTrashStroke = function SvgTrashStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2441,7 +2761,7 @@ const DeleteComponent = React__namespace.default.forwardRef((props, ref) => {
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.preventDefault()
   );
   const ariaLabel = reactTheming.useText(DeleteComponent, props, 'aria-label', 'Delete');
-  return React__namespace.default.createElement(StyledFileDelete, _extends$t({
+  return React__namespace.default.createElement(StyledFileDelete, Object.assign({
     ref: ref,
     "aria-label": ariaLabel
   }, props, {
@@ -2454,7 +2774,7 @@ DeleteComponent.displayName = 'File.Delete';
 const Delete = DeleteComponent;
 
 var _path$f, _rect$1;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
 var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2480,7 +2800,7 @@ var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) {
 };
 
 var _path$e;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
 var SvgFileZipStroke$1 = function SvgFileZipStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2498,7 +2818,7 @@ var SvgFileZipStroke$1 = function SvgFileZipStroke(props) {
 };
 
 var _path$d, _circle$1;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
 var SvgFileImageStroke$1 = function SvgFileImageStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2522,7 +2842,7 @@ var SvgFileImageStroke$1 = function SvgFileImageStroke(props) {
 };
 
 var _path$c;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
 var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2540,7 +2860,7 @@ var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) {
 };
 
 var _path$b;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
 var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2558,7 +2878,7 @@ var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) {
 };
 
 var _path$a;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
 var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2575,7 +2895,7 @@ var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) {
 };
 
 var _path$9;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
 var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2592,7 +2912,7 @@ var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) {
 };
 
 var _g;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
 var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2616,7 +2936,7 @@ var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
 };
 
 var _path$8;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2634,7 +2954,7 @@ var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) {
 };
 
 var _path$7, _rect;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
 var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2660,7 +2980,7 @@ var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
 };
 
 var _path$6;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
 var SvgFileZipStroke = function SvgFileZipStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2678,7 +2998,7 @@ var SvgFileZipStroke = function SvgFileZipStroke(props) {
 };
 
 var _path$5, _circle;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgFileImageStroke = function SvgFileImageStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2701,7 +3021,7 @@ var SvgFileImageStroke = function SvgFileImageStroke(props) {
 };
 
 var _path$4;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2719,7 +3039,7 @@ var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
 };
 
 var _path$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2737,7 +3057,7 @@ var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
 };
 
 var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2754,7 +3074,7 @@ var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
 };
 
 var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2771,7 +3091,7 @@ var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
 };
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2826,13 +3146,14 @@ const FileComponent = React.forwardRef((_ref, ref) => {
   const validationType = validation || type;
   return React__namespace.default.createElement(FileContext.Provider, {
     value: fileContextValue
-  }, React__namespace.default.createElement(StyledFile, _extends$t({}, props, {
+  }, React__namespace.default.createElement(StyledFile, Object.assign({}, props, {
     isCompact: isCompact,
     focusInset: focusInset,
     validation: validation,
     ref: ref
   }), validationType && React__namespace.default.createElement(StyledFileIcon, {
-    isCompact: isCompact
+    $isCompact: isCompact,
+    $validation: validation
   }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, child => typeof child === 'string' ? React__namespace.default.createElement("span", null, child) : child)));
 });
 FileComponent.displayName = 'File';
@@ -2903,7 +3224,7 @@ const MediaInput = React__namespace.default.forwardRef((_ref, ref) => {
     combinedProps = fieldContext.getInputProps(combinedProps);
     isLabelHovered = fieldContext.isLabelHovered;
   }
-  return React__namespace.default.createElement(FauxInput, _extends$t({
+  return React__namespace.default.createElement(FauxInput, Object.assign({
     tabIndex: null,
     onClick: onFauxInputClickHandler,
     onFocus: onFauxInputFocusHandler,
@@ -2936,8 +3257,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
 };
@@ -2956,7 +3277,6 @@ exports.InputGroup = InputGroup;
 exports.Label = Label$1;
 exports.MediaInput = MediaInput;
 exports.Message = Message;
-exports.MultiThumbRange = MultiThumbRange;
 exports.Radio = Radio;
 exports.Range = Range;
 exports.Select = Select;