@zendeskgarden/react-forms 9.0.0 → 9.1.0

package/dist/index.cjs.js

@@ -49,7 +49,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -59,29 +59,29 @@ const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled__default.default(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).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$F, props));
+})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.$isCompact ? 1 : 2), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$F, props));
 
 const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled__default.default.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.0.0'
+  'data-garden-version': props['data-garden-version'] || '9.1.0'
 })).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 => 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));
+}), 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));
 
 const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled__default.default(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -90,7 +90,7 @@ const StyledLegend = styled__default.default(StyledLabel).attrs({
 const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
-  'data-garden-version': props['data-garden-version'] || '9.0.0'
+  'data-garden-version': props['data-garden-version'] || '9.1.0'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -99,105 +99,10 @@ const StyledHint = styled__default.default.div.attrs(props => ({
   variable: 'foreground.subtle'
 }), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props));
 
-var _g$2, _circle$5;
-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",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 8.5,
-    r: 7
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    strokeLinecap: "round",
-    d: "M7.5 4.5V9"
-  }))), _circle$5 || (_circle$5 = /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 12,
-    r: 1,
-    fill: "currentColor"
-  })));
-};
-
-var _path$n, _circle$4;
-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",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
-  })), _circle$4 || (_circle$4 = /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 12,
-    r: 1,
-    fill: "currentColor"
-  })));
-};
-
-var _g$1;
-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",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M4 9l2.5 2.5 5-5"
-  }), /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 8.5,
-    r: 7
-  }))));
-};
-
-const MessageIcon = _ref => {
-  let {
-    children,
-    validation,
-    ...props
-  } = _ref;
-  let retVal;
-  if (validation === 'error') {
-    retVal = React__namespace.default.createElement(SvgAlertErrorStroke, props);
-  } else if (validation === 'success') {
-    retVal = React__namespace.default.createElement(SvgCheckCircleStroke$1, props);
-  } else if (validation === 'warning') {
-    retVal = React__namespace.default.createElement(SvgAlertWarningStroke, props);
-  } else {
-    retVal = React__namespace.default.cloneElement(React.Children.only(children));
-  }
-  return retVal;
-};
 const COMPONENT_ID$B = 'forms.input_message_icon';
-const StyledMessageIcon = styled__default.default(MessageIcon).attrs({
+const StyledMessageIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.0.0',
-  'aria-hidden': null,
-  role: 'img'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -207,14 +112,14 @@ const COMPONENT_ID$A = 'forms.input_message';
 const colorStyles$d = _ref => {
   let {
     theme,
-    validation
+    $validation
   } = _ref;
   let variable;
-  if (validation === 'error') {
+  if ($validation === 'error') {
     variable = 'foreground.danger';
-  } else if (validation === 'success') {
+  } else if ($validation === 'success') {
     variable = 'foreground.success';
-  } else if (validation === 'warning') {
+  } else if ($validation === 'warning') {
     variable = 'foreground.warning';
   } else {
     variable = 'foreground.subtle';
@@ -228,33 +133,33 @@ const colorStyles$d = _ref => {
 const sizeStyles$g = _ref2 => {
   let {
     theme,
-    validation
+    $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;
+  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 StyledMessage = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
-  'data-garden-version': props['data-garden-version'] || '9.0.0'
+  'data-garden-version': props['data-garden-version'] || '9.1.0'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
 })(["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));
 
-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 _path$n;
+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 SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     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", {
+  }, props), _path$n || (_path$n = /*#__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"
   })));
@@ -267,16 +172,16 @@ const isInvalid = validation => {
 const colorStyles$c = _ref => {
   let {
     theme,
-    isBare,
-    isHovered,
-    focusInset,
-    validation
+    $isBare,
+    $isHovered,
+    $focusInset,
+    $validation
   } = _ref;
   const foregroundColor = reactTheming.getColor({
     theme,
     variable: 'foreground.default'
   });
-  const backgroundColor = isBare ? 'transparent' : reactTheming.getColor({
+  const backgroundColor = $isBare ? 'transparent' : reactTheming.getColor({
     theme,
     variable: 'background.default'
   });
@@ -284,12 +189,12 @@ const colorStyles$c = _ref => {
   let hoverBorderColor;
   let borderVariable;
   let focusBorderColor;
-  if (validation) {
-    if (validation === 'success') {
+  if ($validation) {
+    if ($validation === 'success') {
       borderVariable = 'border.successEmphasis';
-    } else if (validation === 'warning') {
+    } else if ($validation === 'warning') {
       borderVariable = 'border.warningEmphasis';
-    } else if (validation === 'error') {
+    } else if ($validation === 'error') {
       borderVariable = 'border.dangerEmphasis';
     }
     borderColor = reactTheming.getColor({
@@ -316,7 +221,7 @@ const colorStyles$c = _ref => {
     });
     focusBorderColor = hoverBorderColor;
   }
-  const disabledBackgroundColor = isBare ? undefined : reactTheming.getColor({
+  const disabledBackgroundColor = $isBare ? undefined : reactTheming.getColor({
     theme,
     variable: 'background.disabled'
   });
@@ -334,20 +239,20 @@ const colorStyles$c = _ref => {
     theme,
     variable: 'foreground.subtle'
   });
-  const calendarPickerIcon = server.renderToString( React__namespace.default.createElement(SvgChevronDownStroke, {
+  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({
+  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,
+    inset: $focusInset,
     color: {
       variable: borderVariable
     },
     styles: {
       borderColor: focusBorderColor
     },
-    condition: !isBare
+    condition: !$isBare
   }), reactTheming.focusStyles({
     theme
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
@@ -355,8 +260,8 @@ const colorStyles$c = _ref => {
 const sizeStyles$f = _ref2 => {
   let {
     theme,
-    isBare,
-    isCompact
+    $isBare,
+    $isCompact
   } = _ref2;
   const fontSize = theme.fontSizes.md;
   const paddingHorizontal = `${theme.space.base * 3}px`;
@@ -364,7 +269,7 @@ const sizeStyles$f = _ref2 => {
   let paddingVertical;
   let browseFontSize;
   let swatchHeight;
-  if (isCompact) {
+  if ($isCompact) {
     height = `${theme.space.base * 8}px`;
     paddingVertical = `${theme.space.base * 1.5}px`;
     browseFontSize = polished.math(`${theme.fontSizes.sm} - 1`);
@@ -376,21 +281,21 @@ const sizeStyles$f = _ref2 => {
     swatchHeight = `${theme.space.base * 7}px`;
   }
   const lineHeight = polished.math(`${height} - (${paddingVertical} * 2) - (${theme.borderWidths.sm} * 2)`);
-  const padding = isBare ? '0' : `${polished.em(paddingVertical, fontSize)} ${polished.em(paddingHorizontal, fontSize)}`;
+  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}`);
   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));
+  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$z,
-  'data-garden-version': '9.0.0',
-  'aria-invalid': isInvalid(props.validation)
+  'data-garden-version': '9.1.0',
+  'aria-invalid': isInvalid(props.$validation)
 })).withConfig({
   displayName: "StyledTextInput",
   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));
+})(["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));
 
 const COMPONENT_ID$y = 'forms.textarea';
 const hiddenStyles = `
@@ -405,11 +310,11 @@ const hiddenStyles = `
 const StyledTextarea = styled__default.default(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
-})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
+})(["resize:", ";overflow:auto;", ";", ";"], props => props.$isResizable ? 'vertical' : 'none', props => props.$isHidden && hiddenStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
 
 const COMPONENT_ID$x = 'forms.media_figure';
 const colorStyles$b = _ref => {
@@ -460,7 +365,7 @@ const sizeStyles$e = props => {
 };
 const StyledTextMediaFigure = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -470,19 +375,19 @@ const COMPONENT_ID$w = 'forms.faux_input';
 const colorStyles$a = _ref => {
   let {
     theme,
-    validation,
-    focusInset,
-    isBare,
-    isFocused
+    $validation,
+    $focusInset,
+    $isBare,
+    $isFocused
   } = _ref;
   let borderVariable;
   let focusBorderColor;
-  if (validation) {
-    if (validation === 'success') {
+  if ($validation) {
+    if ($validation === 'success') {
       borderVariable = 'border.successEmphasis';
-    } else if (validation === 'warning') {
+    } else if ($validation === 'warning') {
       borderVariable = 'border.warningEmphasis';
-    } else if (validation === 'error') {
+    } else if ($validation === 'error') {
       borderVariable = 'border.dangerEmphasis';
     }
     focusBorderColor = reactTheming.getColor({
@@ -498,33 +403,33 @@ const colorStyles$a = _ref => {
   }
   return styled.css(["", ""], reactTheming.focusStyles({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     color: {
       variable: borderVariable
     },
-    selector: isFocused ? '&' : '&:focus-within',
+    selector: $isFocused ? '&' : '&:focus-within',
     styles: {
       borderColor: focusBorderColor
     },
-    condition: !isBare
+    condition: !$isBare
   }));
 };
 const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props => ({
   as: 'div',
-  'aria-readonly': props.isReadOnly,
-  'aria-disabled': props.isDisabled,
+  'aria-readonly': props.$isReadOnly,
+  'aria-disabled': props.$isDisabled,
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 })).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$w, 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));
 
 const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0',
-  isBare: true
+  'data-garden-version': '9.1.0',
+  $isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
   componentId: "sc-12i9xfi-0"
@@ -532,7 +437,7 @@ const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
 
 const COMPONENT_ID$u = 'forms.input_group';
 const positionStyles = props => {
-  const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  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);
 };
 const itemStyles = props => {
@@ -542,7 +447,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -557,8 +462,8 @@ const sizeStyles$d = props => {
 };
 const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0',
-  isRadio: true
+  'data-garden-version': '9.1.0',
+  $isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
   componentId: "sc-1aq2e5t-0"
@@ -567,7 +472,7 @@ const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
 const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -576,7 +481,7 @@ const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
 const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -585,7 +490,7 @@ const StyledRadioHint = styled__default.default(StyledHint).attrs({
 const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -677,7 +582,7 @@ const colorStyles$9 = _ref => {
 const sizeStyles$c = _ref2 => {
   let {
     theme,
-    isCompact
+    $isCompact
   } = _ref2;
   const lineHeight = `${theme.space.base * 5}px`;
   const size = `${theme.space.base * 4}px`;
@@ -685,12 +590,12 @@ const sizeStyles$c = _ref2 => {
   const iconSize = theme.iconSizes.sm;
   const iconPosition = polished.math(`(${size} - ${iconSize}) / 2`);
   const iconTop = polished.math(`${iconPosition} + ${top}`);
-  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  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$p,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -753,7 +658,7 @@ const colorStyles$8 = _ref => {
 };
 const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -763,7 +668,7 @@ const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
 const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -772,23 +677,23 @@ const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
 const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
 })(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 
-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 _path$m;
+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 SvgCheckSmFill = function SvgCheckSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     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$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -801,23 +706,23 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).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$l, props));
 
-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 _path$l;
+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 SvgDashFill = function SvgDashFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeWidth: 2,
@@ -828,7 +733,7 @@ var SvgDashFill = function SvgDashFill(props) {
 const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -838,7 +743,7 @@ const COMPONENT_ID$j = 'forms.file_upload';
 const colorStyles$7 = _ref => {
   let {
     theme,
-    isDragging
+    $isDragging
   } = _ref;
   const borderOptions = {
     theme,
@@ -909,25 +814,25 @@ const colorStyles$7 = _ref => {
     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({
+  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
+    $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 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$j,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -936,7 +841,7 @@ const StyledFileUpload = styled__default.default.div.attrs({
 const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -949,17 +854,17 @@ const COMPONENT_ID$h = 'forms.file';
 const colorStyles$6 = _ref => {
   let {
     theme,
-    focusInset,
-    validation
+    $focusInset,
+    $validation
   } = _ref;
   let borderVariable;
   let focusBorderVariable;
   let foregroundVariable;
-  if (validation === 'success') {
+  if ($validation === 'success') {
     borderVariable = 'border.successEmphasis';
     focusBorderVariable = borderVariable;
     foregroundVariable = 'foreground.success';
-  } else if (validation === 'error') {
+  } else if ($validation === 'error') {
     borderVariable = 'border.dangerEmphasis';
     focusBorderVariable = borderVariable;
     foregroundVariable = 'foreground.danger';
@@ -982,7 +887,7 @@ const colorStyles$6 = _ref => {
   });
   return styled.css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, reactTheming.focusStyles({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     color: {
       variable: focusBorderVariable
     },
@@ -994,10 +899,10 @@ const colorStyles$6 = _ref => {
 const sizeStyles$a = _ref2 => {
   let {
     theme,
-    isCompact
+    $isCompact
   } = _ref2;
-  const size = `${theme.space.base * (isCompact ? 7 : 10)}px`;
-  const spacing = `${theme.space.base * (isCompact ? 2 : 3)}px`;
+  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 `
@@ -1022,7 +927,7 @@ const sizeStyles$a = _ref2 => {
 };
 const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -1031,7 +936,7 @@ const StyledFile = styled__default.default.div.attrs({
 const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -1063,7 +968,7 @@ const sizeStyles$9 = _ref2 => {
 };
 const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -1072,7 +977,7 @@ const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attr
 const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -1081,23 +986,23 @@ const StyledFileList = styled__default.default.ul.attrs({
 const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).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$d, props));
 
-var _circle$3;
-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 _circle$5;
+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 SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _circle$3 || (_circle$3 = /*#__PURE__*/React__namespace.createElement("circle", {
+  }, props), _circle$5 || (_circle$5 = /*#__PURE__*/React__namespace.createElement("circle", {
     cx: 6,
     cy: 6,
     r: 2,
@@ -1108,7 +1013,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1122,7 +1027,7 @@ const sizeStyles$8 = props => {
 };
 const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1131,7 +1036,7 @@ const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
 const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1180,7 +1085,7 @@ const sizeStyles$7 = _ref2 => {
 };
 const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1189,23 +1094,23 @@ const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
 const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).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$8, props));
 
-var _circle$2;
-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 _circle$4;
+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 SvgCircleSmFill = function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+  }, props), _circle$4 || (_circle$4 = /*#__PURE__*/React__namespace.createElement("circle", {
     cx: 8,
     cy: 8,
     r: 6,
@@ -1216,7 +1121,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1246,22 +1151,22 @@ const colorStyles$3 = _ref => {
 const sizeStyles$6 = _ref2 => {
   let {
     theme,
-    isBare,
-    isCompact
+    $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 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$6,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.0',
   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;}"], sizeStyles$6, colorStyles$3, props => reactTheming.getColor({
+})(["opacity:1;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);
@@ -1270,14 +1175,14 @@ const COMPONENT_ID$5 = 'forms.select_wrapper';
 const sizeStyles$5 = _ref => {
   let {
     theme,
-    isCompact
+    $isCompact
   } = _ref;
-  const height = `${theme.space.base * (isCompact ? 8 : 10)}px`;
+  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$5,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1331,7 +1236,7 @@ const trackLowerStyles = function (styles) {
 const colorStyles$2 = _ref => {
   let {
     theme,
-    hasLowerTrack
+    $hasLowerTrack
   } = _ref;
   const options = {
     theme,
@@ -1381,18 +1286,18 @@ const colorStyles$2 = _ref => {
       offset: -200
     }
   });
-  const trackLowerBackgroundColor = hasLowerTrack ? thumbBackgroundColor : '';
-  const trackBackgroundImage = hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
+  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({
+  const trackDisabledLowerBackgroundColor = $hasLowerTrack ? reactTheming.getColor({
     theme,
     variable: 'border.emphasis'
   }) : '';
-  const trackDisabledBackgroundImage = hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
+  const trackDisabledBackgroundImage = $hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
   return styled.css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(`
       background-color: ${trackBackgroundColor};
       background-image: ${trackBackgroundImage}; /* [1] */
@@ -1449,10 +1354,10 @@ const sizeStyles$4 = _ref2 => {
 };
 const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.0',
   type: 'range',
   style: {
-    backgroundSize: props.hasLowerTrack && props.backgroundSize
+    backgroundSize: props.$hasLowerTrack && props.$backgroundSize
   }
 })).withConfig({
   displayName: "StyledRangeInput",
@@ -1474,8 +1379,8 @@ const StyledRangeInput = styled__default.default.input.attrs(props => ({
       box-sizing: border-box;
     `), colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledRangeInput.defaultProps = {
-  backgroundSize: '0%',
-  hasLowerTrack: true,
+  $backgroundSize: '0%',
+  $hasLowerTrack: true,
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -1574,7 +1479,7 @@ const sizeStyles$3 = _ref2 => {
 };
 const StyledTile = styled__default.default.label.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"
@@ -1584,21 +1489,21 @@ const COMPONENT_ID$2 = 'forms.tile_description';
 const sizeStyles$2 = _ref => {
   let {
     theme,
-    isCentered
+    $isCentered
   } = _ref;
   const marginTop = `${theme.space.base}px`;
-  const marginHorizontal = isCentered ? undefined : polished.math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}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 StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
-})(["display:block;text-align:", ";", ";", ";"], props => props.isCentered && 'center', sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["display:block;text-align:", ";", ";", ";"], props => props.$isCentered && 'center', sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 
 const COMPONENT_ID$1 = 'forms.tile_icon';
 const colorStyles = _ref => {
@@ -1641,13 +1546,13 @@ const colorStyles = _ref => {
 const sizeStyles$1 = _ref2 => {
   let {
     theme,
-    isCentered
+    $isCentered
   } = _ref2;
   const iconSize = polished.math(`${theme.iconSizes.md} * 2`);
   let position;
   let top;
   let horizontal;
-  if (!isCentered) {
+  if (!$isCentered) {
     position = 'absolute';
     top = `${theme.space.base * 6}px`;
     horizontal = `${theme.space.base * 5}px`;
@@ -1656,7 +1561,7 @@ const sizeStyles$1 = _ref2 => {
 };
 const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1671,21 +1576,21 @@ const COMPONENT_ID = 'forms.tile_label';
 const sizeStyles = _ref => {
   let {
     theme,
-    isCentered
+    $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 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'
+  'data-garden-version': '9.1.0'
 }).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));
+})(["display:block;text-align:", ";font-weight:", ";", ";", ";"], props => props.$isCentered && 'center', props => props.theme.fontWeights.semibold, sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 
 const InputContext = React.createContext(undefined);
 const useInputContext = () => {
@@ -1733,12 +1638,107 @@ const VALIDATION = ['success', 'warning', 'error'];
 const FILE_VALIDATION = ['success', 'error'];
 const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
 
+var _g$2, _circle$3;
+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 SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    d: "M7.5 4.5V9"
+  }))), _circle$3 || (_circle$3 = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 12,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
+
+var _path$k, _circle$2;
+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 SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+    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: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
+  })), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 12,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
+
+var _g$1;
+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 SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(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), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M4 9l2.5 2.5 5-5"
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7
+  }))));
+};
+
+const MessageIcon = _ref => {
+  let {
+    validation,
+    children,
+    ...props
+  } = _ref;
+  return  React__namespace.default.createElement(StyledMessageIcon, Object.assign({
+    "aria-hidden": null,
+    role: "img"
+  }, props), validation ? {
+    error: React__namespace.default.createElement(SvgAlertErrorStroke, null),
+    success: React__namespace.default.createElement(SvgCheckCircleStroke$1, null),
+    warning: React__namespace.default.createElement(SvgAlertWarningStroke, null)
+  }[validation] : children);
+};
+MessageIcon.displayName = 'Field.MessageIcon';
+MessageIcon.propTypes = {
+  validation: PropTypes__default.default.oneOf(VALIDATION)
+};
+
 const Message = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     validation,
     validationLabel,
     children,
-    ...props
+    ...other
   } = _ref;
   const {
     hasMessage,
@@ -1767,9 +1767,9 @@ const Message = React__namespace.default.forwardRef((_ref, ref) => {
     MessageComponent = StyledMessage;
   }
   let combinedProps = {
-    validation,
+    $validation: validation,
     validationLabel,
-    ...props
+    ...other
   };
   if (getMessageProps) {
     combinedProps = getMessageProps(combinedProps);
@@ -1777,7 +1777,7 @@ const Message = React__namespace.default.forwardRef((_ref, ref) => {
   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, {
+  }, combinedProps), !!validation && React__namespace.default.createElement(MessageIcon, {
     validation: validation,
     "aria-label": ariaLabel
   }), children);
@@ -1794,11 +1794,17 @@ const useFieldsetContext = () => {
   return fieldsetContext;
 };
 
-const Label$1 = React__namespace.default.forwardRef((props, ref) => {
+const Label$1 = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    isRegular,
+    ...other
+  } = _ref;
   const fieldContext = useFieldContext();
   const fieldsetContext = useFieldsetContext();
   const type = useInputContext();
-  let combinedProps = props;
+  const $isRegular = fieldsetContext && isRegular === undefined ? true : isRegular;
+  let combinedProps = other;
   if (fieldContext) {
     combinedProps = fieldContext.getLabelProps(combinedProps);
     if (type === undefined) {
@@ -1806,33 +1812,26 @@ const Label$1 = React__namespace.default.forwardRef((props, ref) => {
         setIsLabelActive,
         setIsLabelHovered
       } = fieldContext;
-      combinedProps = {
-        ...combinedProps,
-        onMouseUp: containerUtilities.composeEventHandlers(props.onMouseUp, () => {
-          setIsLabelActive(false);
-        }),
-        onMouseDown: containerUtilities.composeEventHandlers(props.onMouseDown, () => {
-          setIsLabelActive(true);
-        }),
-        onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, () => {
-          setIsLabelHovered(true);
-        }),
-        onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, () => {
-          setIsLabelHovered(false);
-        })
-      };
+      combinedProps.onMouseUp = containerUtilities.composeEventHandlers(other.onMouseUp, () => {
+        setIsLabelActive(false);
+      });
+      combinedProps.onMouseDown = containerUtilities.composeEventHandlers(other.onMouseDown, () => {
+        setIsLabelActive(true);
+      });
+      combinedProps.onMouseEnter = containerUtilities.composeEventHandlers(other.onMouseEnter, () => {
+        setIsLabelHovered(true);
+      });
+      combinedProps.onMouseLeave = containerUtilities.composeEventHandlers(other.onMouseLeave, () => {
+        setIsLabelHovered(false);
+      });
     }
   }
-  if (fieldsetContext) {
-    combinedProps = {
-      ...combinedProps,
-      isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular
-    };
-  }
   if (type === 'radio') {
     return React__namespace.default.createElement(StyledRadioLabel, Object.assign({
       ref: ref
-    }, combinedProps), React__namespace.default.createElement(StyledRadioSvg, null), props.children);
+    }, combinedProps, {
+      $isRegular: $isRegular
+    }), React__namespace.default.createElement(StyledRadioSvg, null), children);
   } else if (type === 'checkbox') {
     const onLabelSelect = e => {
       const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1;
@@ -1849,21 +1848,24 @@ const Label$1 = React__namespace.default.forwardRef((props, ref) => {
         }
       }
     };
-    combinedProps = {
-      ...combinedProps,
-      onClick: containerUtilities.composeEventHandlers(combinedProps.onClick, onLabelSelect)
-    };
+    combinedProps.onClick = containerUtilities.composeEventHandlers(combinedProps.onClick, onLabelSelect);
     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);
+    }, combinedProps, {
+      $isRegular: $isRegular
+    }), React__namespace.default.createElement(StyledCheckSvg, null), React__namespace.default.createElement(StyledDashSvg, null), children);
   } else if (type === 'toggle') {
     return React__namespace.default.createElement(StyledToggleLabel, Object.assign({
       ref: ref
-    }, combinedProps), React__namespace.default.createElement(StyledToggleSvg, null), props.children);
+    }, combinedProps, {
+      $isRegular: $isRegular
+    }), React__namespace.default.createElement(StyledToggleSvg, null), children);
   }
   return React__namespace.default.createElement(StyledLabel, Object.assign({
     ref: ref
-  }, combinedProps));
+  }, combinedProps, {
+    $isRegular: $isRegular
+  }), children);
 });
 Label$1.displayName = 'Field.Label';
 Label$1.propTypes = {
@@ -1910,22 +1912,26 @@ 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, {
+  return React__namespace.default.createElement(StyledLegend, Object.assign({}, props, {
     ref: ref
   }));
 });
 LegendComponent.displayName = 'Fieldset.Legend';
 const Legend = LegendComponent;
 
-const FieldsetComponent = React.forwardRef((props, ref) => {
+const FieldsetComponent = React.forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    ...other
+  } = _ref;
   const fieldsetContext = React.useMemo(() => ({
-    isCompact: props.isCompact
-  }), [props.isCompact]);
+    isCompact
+  }), [isCompact]);
   return React__namespace.default.createElement(FieldsetContext.Provider, {
     value: fieldsetContext
-  }, React__namespace.default.createElement(StyledFieldset, Object.assign({}, props, {
-    ref: ref
+  }, React__namespace.default.createElement(StyledFieldset, Object.assign({}, other, {
+    ref: ref,
+    $isCompact: isCompact
   })));
 });
 FieldsetComponent.displayName = 'Fieldset';
@@ -1939,7 +1945,8 @@ const Checkbox = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     indeterminate,
     children,
-    ...props
+    isCompact,
+    ...other
   } = _ref;
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
@@ -1958,9 +1965,9 @@ const Checkbox = React__namespace.default.forwardRef((_ref, ref) => {
     });
   };
   let combinedProps = {
+    $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
     ref: combinedRef,
-    ...props,
-    ...fieldsetContext
+    ...other
   };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
@@ -1983,29 +1990,30 @@ const useInputGroupContext = () => {
 const Input = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     onSelect,
-    ...props
+    isBare,
+    isCompact,
+    focusInset,
+    validation,
+    ...other
   } = _ref;
   const fieldContext = useFieldContext();
   const inputGroupContext = useInputGroupContext();
-  const onSelectHandler = props.readOnly ? containerUtilities.composeEventHandlers(onSelect, event => {
-    event.currentTarget.select();
-  }) : onSelect;
-  let combinedProps = {
-    ref,
-    onSelect: onSelectHandler,
-    ...props
-  };
-  if (inputGroupContext) {
-    combinedProps = {
-      ...combinedProps,
-      isCompact: inputGroupContext.isCompact || combinedProps.isCompact,
-      focusInset: props.focusInset === undefined ? true : props.focusInset
-    };
-  }
+  let combinedProps = other;
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
-  return React__namespace.default.createElement(StyledTextInput, combinedProps);
+  const onSelectHandler = other.readOnly ? containerUtilities.composeEventHandlers(onSelect, event => {
+    event.currentTarget.select();
+  }) : onSelect;
+  return React__namespace.default.createElement(StyledTextInput, Object.assign({
+    ref: ref,
+    onSelect: onSelectHandler
+  }, combinedProps, {
+    $isBare: isBare,
+    $isCompact: inputGroupContext ? inputGroupContext.isCompact : isCompact,
+    $focusInset: inputGroupContext && focusInset === undefined ? true : focusInset,
+    $validation: validation
+  }));
 });
 Input.propTypes = {
   isCompact: PropTypes__default.default.bool,
@@ -2018,14 +2026,15 @@ Input.displayName = 'Input';
 const Radio = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
-    ...props
+    isCompact,
+    ...other
   } = _ref;
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
   let combinedProps = {
+    $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
     ref,
-    ...props,
-    ...fieldsetContext
+    ...other
   };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
@@ -2045,7 +2054,7 @@ const Range = React__namespace.default.forwardRef((_ref, ref) => {
     min,
     max,
     step,
-    ...props
+    ...other
   } = _ref;
   const [backgroundSize, setBackgroundSize] = React.useState('0');
   const rangeRef = React.useRef();
@@ -2064,18 +2073,18 @@ const Range = React__namespace.default.forwardRef((_ref, ref) => {
   [max, min, step]);
   React.useEffect(() => {
     updateBackgroundWidthFromInput(rangeRef.current);
-  }, [rangeRef, updateBackgroundWidthFromInput, props.value]);
-  const onChange = hasLowerTrack ? containerUtilities.composeEventHandlers(props.onChange, event => {
+  }, [rangeRef, updateBackgroundWidthFromInput, other.value]);
+  const onChange = hasLowerTrack ? containerUtilities.composeEventHandlers(other.onChange, event => {
     updateBackgroundWidthFromInput(event.target);
-  }) : props.onChange;
+  }) : other.onChange;
   let combinedProps = {
-    ref: reactMergeRefs.mergeRefs([rangeRef, ref]),
-    hasLowerTrack,
-    min,
+    $backgroundSize: backgroundSize,
+    $hasLowerTrack: hasLowerTrack,
     max,
+    min,
+    ref: reactMergeRefs.mergeRefs([rangeRef, ref]),
     step,
-    backgroundSize,
-    ...props,
+    ...other,
     onChange
   };
   if (fieldContext) {
@@ -2096,12 +2105,17 @@ const parseStyleValue = value => {
 };
 const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
   let {
+    isCompact,
+    isBare,
+    focusInset,
+    isResizable,
     minRows,
     maxRows,
     style,
+    validation,
     onChange,
     onSelect,
-    ...props
+    ...other
   } = _ref;
   const fieldContext = useFieldContext();
   const textAreaRef = React.useRef();
@@ -2110,8 +2124,8 @@ const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
     overflow: false,
     height: 0
   });
-  const isControlled = props.value !== null && props.value !== undefined;
-  const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
+  const isControlled = other.value !== null && other.value !== undefined;
+  const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !isResizable;
   const calculateHeight = React.useCallback(() => {
     if (!isAutoResizable) {
       return;
@@ -2163,33 +2177,38 @@ const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
     computedStyle.height = state.height;
     computedStyle.overflow = state.overflow ? 'hidden' : undefined;
   }
-  const onSelectHandler = props.readOnly ? containerUtilities.composeEventHandlers(onSelect, event => {
+  const onSelectHandler = other.readOnly ? containerUtilities.composeEventHandlers(onSelect, event => {
     event.currentTarget.select();
   }) : onSelect;
   let combinedProps = {
-    ref: reactMergeRefs.mergeRefs([textAreaRef, ref]),
-    rows: minRows,
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isResizable: isResizable,
+    $validation: validation,
     onChange: onChangeHandler,
     onSelect: onSelectHandler,
+    ref: reactMergeRefs.mergeRefs([textAreaRef, ref]),
+    rows: minRows,
     style: {
       ...computedStyle,
       ...style
     },
-    ...props
+    ...other
   };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledTextarea, combinedProps), !!isAutoResizable && React__namespace.default.createElement(StyledTextarea, {
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isHidden: true,
     "aria-hidden": true,
+    className: other.className,
     readOnly: true,
-    isHidden: true,
-    className: props.className,
     ref: shadowTextAreaRef,
-    tabIndex: -1,
-    isBare: props.isBare,
-    isCompact: props.isCompact,
-    style: style
+    style: style,
+    tabIndex: -1
   }));
 });
 Textarea.propTypes = {
@@ -2206,14 +2225,15 @@ Textarea.displayName = 'Textarea';
 const Toggle = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
-    ...props
+    isCompact,
+    ...other
   } = _ref;
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
   let combinedProps = {
+    $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
     ref,
-    ...props,
-    ...fieldsetContext
+    ...other
   };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
@@ -2267,12 +2287,18 @@ const EndIcon = EndIconComponent;
 
 const FauxInputComponent = React.forwardRef((_ref, ref) => {
   let {
-    onFocus,
-    onBlur,
     disabled,
-    readOnly,
+    focusInset,
+    isBare,
+    isCompact,
     isFocused: controlledIsFocused,
-    ...props
+    isHovered,
+    onBlur,
+    onFocus,
+    readOnly,
+    validation,
+    mediaLayout,
+    ...other
   } = _ref;
   const [isFocused, setIsFocused] = React.useState(false);
   const onFocusHandler = containerUtilities.composeEventHandlers(onFocus, () => {
@@ -2284,11 +2310,17 @@ const FauxInputComponent = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(StyledTextFauxInput, Object.assign({
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
-    isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
-    isReadOnly: readOnly,
-    isDisabled: disabled,
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isDisabled: disabled,
+    $isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
+    $isHovered: isHovered,
+    $isReadOnly: readOnly,
+    $mediaLayout: mediaLayout,
+    $validation: validation,
     tabIndex: disabled ? undefined : 0
-  }, props, {
+  }, other, {
     ref: ref
   }));
 });
@@ -2318,11 +2350,11 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
   } = _ref;
   const fieldContext = useFieldContext();
   let combinedProps = {
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $validation: validation,
     disabled,
-    isBare,
-    isCompact,
-    validation,
-    focusInset,
     ref,
     ...props
   };
@@ -2330,11 +2362,11 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
   return React__namespace.default.createElement(StyledSelectWrapper, {
-    isCompact: isCompact,
-    isBare: isBare,
-    isDisabled: disabled,
-    validation: validation,
-    focusInset: focusInset
+    $isCompact: isCompact,
+    $isBare: isBare,
+    $isDisabled: disabled,
+    $validation: validation,
+    $focusInset: focusInset
   }, React__namespace.default.createElement(StyledSelect, combinedProps), !isBare && React__namespace.default.createElement(FauxInput.EndIcon, {
     isDisabled: disabled
   }, React__namespace.default.createElement(SvgChevronDownStroke, null)));
@@ -2390,7 +2422,7 @@ const DescriptionComponent = React.forwardRef((props, ref) => {
   const tilesContext = useTilesContext();
   return React__namespace.default.createElement(StyledTileDescription, Object.assign({
     ref: ref,
-    isCentered: tilesContext?.isCentered
+    $isCentered: tilesContext?.isCentered
   }, props));
 });
 DescriptionComponent.displayName = 'Tiles.Description';
@@ -2400,7 +2432,7 @@ const IconComponent = React.forwardRef((props, ref) => {
   const tileContext = useTilesContext();
   return React__namespace.default.createElement(StyledTileIcon, Object.assign({
     ref: ref,
-    isCentered: tileContext?.isCentered
+    $isCentered: tileContext?.isCentered
   }, props));
 });
 IconComponent.displayName = 'Tiles.Icon';
@@ -2418,7 +2450,7 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
   return React__namespace.default.createElement(StyledTileLabel, Object.assign({
     ref: reactMergeRefs.mergeRefs([ref, forwardedRef]),
     title: title,
-    isCentered: tilesContext?.isCentered
+    $isCentered: tilesContext?.isCentered
   }, props));
 });
 LabelComponent.displayName = 'Tiles.Label';
@@ -2475,7 +2507,7 @@ Tiles.Tile = Tile;
 const InputGroup = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     isCompact,
-    ...props
+    ...other
   } = _ref;
   const contextValue = React.useMemo(() => ({
     isCompact
@@ -2484,8 +2516,8 @@ const InputGroup = React__namespace.default.forwardRef((_ref, ref) => {
     value: contextValue
   }, React__namespace.default.createElement(StyledInputGroup, Object.assign({
     ref: ref,
-    isCompact: isCompact
-  }, props)));
+    $isCompact: isCompact
+  }, other)));
 });
 InputGroup.displayName = 'InputGroup';
 InputGroup.propTypes = {
@@ -2495,13 +2527,17 @@ InputGroup.propTypes = {
 const FileUpload = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     disabled,
-    ...props
+    isCompact,
+    isDragging,
+    ...other
   } = _ref;
   return (
     React__namespace.default.createElement(StyledFileUpload, Object.assign({
       ref: ref,
-      "aria-disabled": disabled
-    }, props, {
+      "aria-disabled": disabled,
+      $isCompact: isCompact,
+      $isDragging: isDragging
+    }, other, {
       role: "button"
     }))
   );
@@ -3019,9 +3055,9 @@ const FileComponent = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(FileContext.Provider, {
     value: fileContextValue
   }, React__namespace.default.createElement(StyledFile, Object.assign({}, props, {
-    isCompact: isCompact,
-    focusInset: focusInset,
-    validation: validation,
+    $isCompact: isCompact,
+    $focusInset: focusInset,
+    $validation: validation,
     ref: ref
   }), !!validationType && React__namespace.default.createElement(StyledFileIcon, {
     $isCompact: isCompact,