@zendeskgarden/react-forms 8.44.2 → 8.47.1

package/dist/index.cjs.js

@@ -101,8 +101,8 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _extends$f() {
-  _extends$f = Object.assign || function (target) {
+function _extends$t() {
+  _extends$t = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -116,7 +116,7 @@ function _extends$f() {
     return target;
   };
 
-  return _extends$f.apply(this, arguments);
+  return _extends$t.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -236,43 +236,43 @@ var useFieldContext = function useFieldContext() {
   return fieldContext;
 };
 
-var COMPONENT_ID$J = 'forms.field';
+var COMPONENT_ID$K = 'forms.field';
 var StyledField = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$K,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
 })(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$J, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$K, props);
 });
 StyledField.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$I = 'forms.fieldset';
+var COMPONENT_ID$J = 'forms.fieldset';
 var StyledFieldset = styled__default['default'](StyledField).attrs({
   as: 'fieldset',
-  'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$J,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
 })(["", "{margin-top:", "px;}", ";"], StyledField, function (props) {
   return props.theme.space.base * (props.isCompact ? 1 : 2);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$I, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$J, props);
 });
 StyledFieldset.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$H = 'forms.input_label';
+var COMPONENT_ID$I = 'forms.input_label';
 var StyledLabel = styled__default['default'].label.attrs({
-  'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$I,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -297,31 +297,31 @@ var StyledLabel = styled__default['default'].label.attrs({
 }, function (props) {
   return !props.isRadio && polished.hideVisually();
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$H, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$I, props);
 });
 StyledLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$G = 'forms.fieldset_legend';
+var COMPONENT_ID$H = 'forms.fieldset_legend';
 var StyledLegend = styled__default['default'](StyledLabel).attrs({
   as: 'legend',
-  'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$H,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
 })(["padding:0;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$G, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$H, props);
 });
 StyledLegend.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$F = 'forms.input_hint';
+var COMPONENT_ID$G = 'forms.input_hint';
 var StyledHint = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$G,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -334,15 +334,15 @@ var StyledHint = styled__default['default'].div.attrs({
 }, function (props) {
   return props.theme.fontSizes.md;
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$F, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$G, props);
 });
 StyledHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$e() { _extends$e = Object.assign || 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$s() { _extends$s = Object.assign || 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); }
 
-var _ref$e = /*#__PURE__*/React__namespace.createElement("g", {
+var _ref$s = /*#__PURE__*/React__namespace.createElement("g", {
   fill: "none",
   stroke: "currentColor"
 }, /*#__PURE__*/React__namespace.createElement("circle", {
@@ -354,7 +354,7 @@ var _ref$e = /*#__PURE__*/React__namespace.createElement("g", {
   d: "M7.5 4.5V9"
 }));
 
-var _ref2$3 = /*#__PURE__*/React__namespace.createElement("circle", {
+var _ref2$5 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 7.5,
   cy: 12,
   r: 1,
@@ -362,26 +362,26 @@ var _ref2$3 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgAlertErrorStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$e, _ref2$3);
+  }, props), _ref$s, _ref2$5);
 }
 
-function _extends$d() { _extends$d = Object.assign || 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$r() { _extends$r = Object.assign || 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); }
 
-var _ref$d = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$r = /*#__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"
 });
 
-var _ref2$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+var _ref2$4 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 7.5,
   cy: 12,
   r: 1,
@@ -389,19 +389,19 @@ var _ref2$2 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgAlertWarningStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$d, _ref2$2);
+  }, props), _ref$r, _ref2$4);
 }
 
-function _extends$c() { _extends$c = Object.assign || 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$q() { _extends$q = Object.assign || 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); }
 
-var _ref$c = /*#__PURE__*/React__namespace.createElement("g", {
+var _ref$q = /*#__PURE__*/React__namespace.createElement("g", {
   fill: "none",
   stroke: "currentColor"
 }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -414,15 +414,15 @@ var _ref$c = /*#__PURE__*/React__namespace.createElement("g", {
   r: 7
 }));
 
-function SvgCheckCircleStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+function SvgCheckCircleStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$c);
+  }, props), _ref$q);
 }
 
 var _excluded$i = ["children", "validation"];
@@ -434,7 +434,7 @@ var MessageIcon = function MessageIcon(_ref) {
   if (validation === 'error') {
     retVal = React__default['default'].createElement(SvgAlertErrorStroke, props);
   } else if (validation === 'success') {
-    retVal = React__default['default'].createElement(SvgCheckCircleStroke, props);
+    retVal = React__default['default'].createElement(SvgCheckCircleStroke$1, props);
   } else if (validation === 'warning') {
     retVal = React__default['default'].createElement(SvgAlertWarningStroke, props);
   } else {
@@ -442,10 +442,10 @@ var MessageIcon = function MessageIcon(_ref) {
   }
   return retVal;
 };
-var COMPONENT_ID$E = 'forms.input_message_icon';
+var COMPONENT_ID$F = 'forms.input_message_icon';
 var StyledMessageIcon = styled__default['default'](MessageIcon).attrs({
-  'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$F,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -454,7 +454,7 @@ var StyledMessageIcon = styled__default['default'](MessageIcon).attrs({
 }, function (props) {
   return props.theme.iconSizes.md;
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$E, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$F, props);
 });
 StyledMessageIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -475,10 +475,10 @@ var validationStyles = function validationStyles(props) {
   }
   return styled.css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
 };
-var COMPONENT_ID$D = 'forms.input_message';
+var COMPONENT_ID$E = 'forms.input_message';
 var StyledMessage = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$E,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -495,13 +495,13 @@ var StyledMessage = styled__default['default'].div.attrs({
 }, StyledLabel, function (props) {
   return polished.math("".concat(props.theme.space.base, " * 1px"));
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$D, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$E, props);
 });
 StyledMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$C = 'forms.input';
+var COMPONENT_ID$D = 'forms.input';
 var isInvalid = function isInvalid(validation) {
   return validation === 'warning' || validation === 'error';
 };
@@ -543,7 +543,7 @@ var colorStyles$b = function colorStyles(props) {
   }
   return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}&:focus,&[data-garden-focus-visible='true']{border-color:", ";box-shadow:", ";}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, !props.isBare && props.isFocused && boxShadow, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusBorderColor, !props.isBare && boxShadow, disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
 };
-var sizeStyles$e = function sizeStyles(props) {
+var sizeStyles$f = function sizeStyles(props) {
   var fontSize = props.theme.fontSizes.md;
   var paddingHorizontal = "".concat(props.theme.space.base * 3, "px");
   var height;
@@ -569,8 +569,8 @@ var sizeStyles$e = function sizeStyles(props) {
 };
 var StyledTextInput = styled__default['default'].input.attrs(function (props) {
   return {
-    'data-garden-id': COMPONENT_ID$C,
-    'data-garden-version': '8.44.2',
+    'data-garden-id': COMPONENT_ID$D,
+    'data-garden-version': '8.47.1',
     'aria-invalid': isInvalid(props.validation)
   };
 }).withConfig({
@@ -591,22 +591,22 @@ var StyledTextInput = styled__default['default'].input.attrs(function (props) {
 }, function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
-  return sizeStyles$e(props);
+  return sizeStyles$f(props);
 }, function (props) {
   return colorStyles$b(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$D, props);
 });
 StyledTextInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$B = 'forms.textarea';
+var COMPONENT_ID$C = 'forms.textarea';
 var hiddenStyles = "\n  visibility: hidden;\n  position: absolute;\n  overflow: hidden;\n  height: 0;\n  top: 0;\n  left: 0;\n  transform: translateZ(0);\n";
 var StyledTextarea = styled__default['default'](StyledTextInput).attrs({
   as: 'textarea',
-  'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$C,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -615,14 +615,14 @@ var StyledTextarea = styled__default['default'](StyledTextInput).attrs({
 }, function (props) {
   return props.isHidden && hiddenStyles;
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props);
 });
 StyledTextarea.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 var _excluded$h = ["children", "position", "isHovered", "isFocused", "isDisabled", "isRotated", "theme"];
-var COMPONENT_ID$A = 'forms.media_figure';
+var COMPONENT_ID$B = 'forms.media_figure';
 var colorStyles$a = function colorStyles(props) {
   var shade = 600;
   if (props.isDisabled) {
@@ -632,7 +632,7 @@ var colorStyles$a = function colorStyles(props) {
   }
   return styled.css(["color:", ";"], reactTheming.getColor('neutralHue', shade, props.theme));
 };
-var sizeStyles$d = function sizeStyles(props) {
+var sizeStyles$e = function sizeStyles(props) {
   var size = props.theme.iconSizes.md;
   var marginFirst = "1px ".concat(props.theme.space.base * 2, "px auto 0");
   var marginLast = "1px 0 auto ".concat(props.theme.space.base * 2, "px");
@@ -656,8 +656,8 @@ function (_ref) {
       var props = _objectWithoutProperties(_ref, _excluded$h);
   return React__default['default'].cloneElement(React.Children.only(children), props);
 }).attrs({
-  'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$B,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -666,22 +666,22 @@ function (_ref) {
 }, function (props) {
   return colorStyles$a(props);
 }, function (props) {
-  return sizeStyles$d(props);
+  return sizeStyles$e(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props);
 });
 StyledTextMediaFigure.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$z = 'forms.faux_input';
+var COMPONENT_ID$A = 'forms.faux_input';
 var StyledTextFauxInput = styled__default['default'](StyledTextInput).attrs(function (props) {
   return {
     as: 'div',
     'aria-readonly': props.isReadOnly,
     'aria-disabled': props.isDisabled,
-    'data-garden-id': COMPONENT_ID$z,
-    'data-garden-version': '8.44.2'
+    'data-garden-id': COMPONENT_ID$A,
+    'data-garden-version': '8.47.1'
   };
 }).withConfig({
   displayName: "StyledTextFauxInput",
@@ -697,29 +697,29 @@ var StyledTextFauxInput = styled__default['default'](StyledTextInput).attrs(func
 }, StyledTextMediaFigure, function (props) {
   return props.mediaLayout && '0';
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props);
 });
 StyledTextFauxInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$y = 'forms.media_input';
+var COMPONENT_ID$z = 'forms.media_input';
 var StyledTextMediaInput = styled__default['default'](StyledTextInput).attrs({
-  'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.44.2',
+  'data-garden-id': COMPONENT_ID$z,
+  'data-garden-version': '8.47.1',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
   componentId: "sc-12i9xfi-0"
 })(["flex-grow:1;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props);
 });
 StyledTextMediaInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$x = 'forms.input_group';
-var positionStyles$1 = function positionStyles(props) {
+var COMPONENT_ID$y = 'forms.input_group';
+var positionStyles = function positionStyles(props) {
   var topMargin = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
   var startDirection = props.theme.rtl ? 'right' : 'left';
   var endDirection = props.theme.rtl ? 'left' : 'right';
@@ -730,63 +730,63 @@ var itemStyles = function itemStyles(props) {
   return styled.css(["& > *{margin-", ":-", " !important;z-index:-1;}& > ", ":hover,& > button:hover,& > ", "[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;}& > ", ":disabled{z-index:-2;}& > *:first-child:not(:last-child){margin-", ":0;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;}"], horizontal, props.theme.borderWidths.sm, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, props.theme.rtl ? 'right' : 'left', props.theme.rtl ? 'left' : 'right', props.theme.rtl ? 'left' : 'right', props.theme.rtl ? 'right' : 'left', props.theme.rtl ? 'right' : 'left');
 };
 var StyledInputGroup = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$y,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
 })(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], function (props) {
-  return positionStyles$1(props);
+  return positionStyles(props);
 }, function (props) {
   return itemStyles(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props);
 });
 StyledInputGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$w = 'forms.radio_label';
-var sizeStyles$c = function sizeStyles(props) {
+var COMPONENT_ID$x = 'forms.radio_label';
+var sizeStyles$d = function sizeStyles(props) {
   var size = props.theme.space.base * 4;
   var padding = size + props.theme.space.base * 2;
   var lineHeight = props.theme.space.base * 5;
   return styled.css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight);
 };
 var StyledRadioLabel = styled__default['default'](StyledLabel).attrs({
-  'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.44.2',
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '8.47.1',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
   componentId: "sc-1aq2e5t-0"
 })(["display:inline-block;position:relative;cursor:pointer;user-select:none;", ";", ";"], function (props) {
-  return sizeStyles$c(props);
+  return sizeStyles$d(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props);
 });
 StyledRadioLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$v = 'forms.checkbox_label';
+var COMPONENT_ID$w = 'forms.checkbox_label';
 var StyledCheckLabel = styled__default['default'](StyledRadioLabel).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
 })(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props);
 });
 StyledCheckLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$u = 'forms.radio_hint';
+var COMPONENT_ID$v = 'forms.radio_hint';
 var StyledRadioHint = styled__default['default'](StyledHint).attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -795,27 +795,27 @@ var StyledRadioHint = styled__default['default'](StyledHint).attrs({
 }, function (props) {
   return polished.math("".concat(props.theme.space.base, " * 6px"));
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props);
 });
 StyledRadioHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$t = 'forms.checkbox_hint';
+var COMPONENT_ID$u = 'forms.checkbox_hint';
 var StyledCheckHint = styled__default['default'](StyledRadioHint).attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
 })(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props);
 });
 StyledCheckHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$s = 'forms.radio';
+var COMPONENT_ID$t = 'forms.radio';
 var colorStyles$9 = function colorStyles(props) {
   var SHADE = 600;
   var borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
@@ -836,7 +836,7 @@ var colorStyles$9 = function colorStyles(props) {
   var disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
   return styled.css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}&[data-garden-focus-visible='true'] ~ ", "::before{border-color:", ";box-shadow:", ";}& ~ ", ":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, StyledRadioLabel, focusBorderColor, boxShadow, StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
-var sizeStyles$b = function sizeStyles(props) {
+var sizeStyles$c = function sizeStyles(props) {
   var lineHeight = "".concat(props.theme.space.base * 5, "px");
   var size = "".concat(props.theme.space.base * 4, "px");
   var top = polished.math("(".concat(lineHeight, " - ").concat(size, ") / 2"));
@@ -847,8 +847,8 @@ var sizeStyles$b = function sizeStyles(props) {
   return styled.css(["& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
 };
 var StyledRadioInput = styled__default['default'].input.attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.44.2',
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '8.47.1',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -858,17 +858,17 @@ var StyledRadioInput = styled__default['default'].input.attrs({
 }, function (props) {
   return props.theme.borders.sm;
 }, StyledRadioLabel, function (props) {
-  return sizeStyles$b(props);
+  return sizeStyles$c(props);
 }, StyledRadioLabel, StyledRadioLabel, function (props) {
   return colorStyles$9(props);
 }, StyledRadioLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props);
 });
 StyledRadioInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$r = 'forms.checkbox';
+var COMPONENT_ID$s = 'forms.checkbox';
 var colorStyles$8 = function colorStyles(props) {
   var SHADE = 600;
   var indeterminateBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
@@ -879,8 +879,8 @@ var colorStyles$8 = function colorStyles(props) {
   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);
 };
 var StyledCheckInput = styled__default['default'](StyledRadioInput).attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.44.2',
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '8.47.1',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -890,16 +890,16 @@ var StyledCheckInput = styled__default['default'](StyledRadioInput).attrs({
 }, function (props) {
   return colorStyles$8(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props);
 });
 StyledCheckInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$q = 'forms.radio_message';
+var COMPONENT_ID$r = 'forms.radio_message';
 var StyledRadioMessage = styled__default['default'](StyledMessage).attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -908,29 +908,29 @@ var StyledRadioMessage = styled__default['default'](StyledMessage).attrs({
 }, function (props) {
   return polished.math("".concat(props.theme.space.base, " * 6px"));
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props);
 });
 StyledRadioMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$p = 'forms.checkbox_message';
+var COMPONENT_ID$q = 'forms.checkbox_message';
 var StyledCheckMessage = styled__default['default'](StyledRadioMessage).attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
 })(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props);
 });
 StyledCheckMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$b() { _extends$b = Object.assign || 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$p() { _extends$p = Object.assign || 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 _ref$b = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$p = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -940,33 +940,33 @@ var _ref$b = /*#__PURE__*/React__namespace.createElement("path", {
 });
 
 function SvgCheckSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$b);
+  }, props), _ref$p);
 }
 
-var COMPONENT_ID$o = 'forms.check_svg';
+var COMPONENT_ID$p = 'forms.check_svg';
 var StyledCheckSvg = styled__default['default'](SvgCheckSmFill).attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
 })(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props);
 });
 StyledCheckSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$a() { _extends$a = Object.assign || 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$o() { _extends$o = Object.assign || 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 _ref$a = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$o = /*#__PURE__*/React__namespace.createElement("path", {
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeWidth: 2,
@@ -974,35 +974,31 @@ var _ref$a = /*#__PURE__*/React__namespace.createElement("path", {
 });
 
 function SvgDashFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$a);
+  }, props), _ref$o);
 }
 
-var COMPONENT_ID$n = 'forms.dash_svg';
+var COMPONENT_ID$o = 'forms.dash_svg';
 var StyledDashSvg = styled__default['default'](SvgDashFill).attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
 })(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props);
 });
 StyledDashSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$m = 'forms.file_upload';
-var positionStyles = function positionStyles(props) {
-  var topMargin = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
-  return styled.css(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin);
-};
+var COMPONENT_ID$n = 'forms.file_upload';
 var colorStyles$7 = function colorStyles(props) {
   var baseColor = reactTheming.getColor('primaryHue', 600, props.theme);
   var hoverColor = reactTheming.getColor('primaryHue', 700, props.theme);
@@ -1012,93 +1008,124 @@ var colorStyles$7 = function colorStyles(props) {
   var boxShadow = "inset ".concat(props.theme.shadows.md(polished.rgba(baseColor, 0.35)));
   return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&: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, boxShadow, activeColor, polished.rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
 };
+var sizeStyles$b = function sizeStyles(props) {
+  var marginTop = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
+  var paddingHorizontal = "".concat(props.isCompact ? 2 : 4, "em");
+  var paddingVertical = polished.math("".concat(props.theme.space.base * (props.isCompact ? 2.5 : 5), " - ").concat(props.theme.borderWidths.sm));
+  var fontSize = props.theme.fontSizes.md;
+  var lineHeight = reactTheming.getLineHeight(props.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);
+};
 var StyledFileUpload = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
-})(["box-sizing:content-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;padding:", ";min-width:4em;text-align:center;line-height:", ";font-size:", ";user-select:none;&:focus{outline:none;}&[aria-disabled='true']{cursor:default;}", ";", ";", ";"], function (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;", ";&:focus{outline:none;}&[aria-disabled='true']{cursor:default;}", ";", ";"], function (props) {
   return props.theme.rtl ? 'rtl' : 'ltr';
 }, function (props) {
   return props.theme.borderWidths.sm;
 }, function (props) {
   return props.theme.borderRadii.md;
-}, function (props) {
-  return "".concat(props.theme.space.base * 5, "px ").concat(props.theme.space.base * 15, "px");
-}, function (props) {
-  return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return colorStyles$7(props);
-}, function (props) {
-  return positionStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props);
+}, sizeStyles$b, colorStyles$7, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props);
 });
 StyledFileUpload.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$l = 'forms.file.close';
+var COMPONENT_ID$m = 'forms.file.close';
 var StyledFileClose = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '8.47.1'
 }).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;cursor:pointer;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props);
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;cursor:pointer;color:", ";&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], function (props) {
+  return props.theme.colors.foreground;
+}, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props);
 });
 StyledFileClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$k = 'forms.file';
+var COMPONENT_ID$l = 'forms.file';
 var colorStyles$6 = function colorStyles(props) {
-  var borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
-  var focusBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
-  var foregroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
+  var borderColor;
+  var focusBorderColor;
+  var 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;
+  } else {
+    borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
+    focusBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
+    foregroundColor = props.theme.colors.foreground;
+  }
   var boxShadow = "\n    ".concat(props.focusInset ? 'inset' : '', "\n    ").concat(props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35)));
   return "\n    border-color: ".concat(borderColor, ";\n    color: ").concat(foregroundColor, ";\n\n    &:focus {\n      box-shadow: ").concat(boxShadow, ";\n      border-color: ").concat(focusBorderColor, ";\n    }\n  ");
 };
 var sizeStyles$a = function sizeStyles(props) {
   var size = "".concat(props.theme.space.base * (props.isCompact ? 7 : 10), "px");
-  var spacing = "".concat(props.theme.space.base * 3, "px");
+  var spacing = "".concat(props.theme.space.base * (props.isCompact ? 2 : 3), "px");
   var fontSize = props.theme.fontSizes.md;
   var lineHeight = reactTheming.getLineHeight(props.theme.space.base * 5, fontSize);
   return "\n    box-sizing: border-box;\n    border: ".concat(props.theme.borders.sm, ";\n    border-radius: ").concat(props.theme.borderRadii.md, ";\n    padding: 0 ").concat(spacing, ";\n    height: ").concat(size, ";\n    line-height: ").concat(lineHeight, ";\n    font-size: ").concat(fontSize, ";\n\n    & > span {\n      width: 100%;\n    }\n\n    & > ").concat(StyledFileClose, " {\n      width: ").concat(size, ";\n      height: ").concat(size, ";\n      margin-").concat(props.theme.rtl ? 'left' : 'right', ": -").concat(spacing, ";\n    }\n  ");
 };
 var StyledFile = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.44.2'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
 })(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;", ";&:focus{outline:none;}", ";& > 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, function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props);
 });
 StyledFile.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$g = ["children"];
+var COMPONENT_ID$k = 'forms.file.delete';
+var StyledFileDelete = styled__default['default'](StyledFileClose).attrs({
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '8.47.1'
+}).withConfig({
+  displayName: "StyledFileDelete",
+  componentId: "sc-a8nnhx-0"
+})(["color:", ";", ";"], function (props) {
+  return reactTheming.getColor('dangerHue', 600, props.theme);
+}, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props);
+});
+StyledFileDelete.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+var _excluded$g = ["children", "isCompact", "theme"];
 var COMPONENT_ID$j = 'forms.file.icon';
 var StyledFileIcon = styled__default['default'](function (_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+  var children = _ref.children;
+      _ref.isCompact;
+      _ref.theme;
+      var props = _objectWithoutProperties(_ref, _excluded$g);
   return React__default['default'].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
 })(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], function (props) {
-  return props.theme.iconSizes.md;
+  return props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
 }, function (props) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
@@ -1113,7 +1140,7 @@ StyledFileIcon.defaultProps = {
 var COMPONENT_ID$i = 'forms.file_list';
 var StyledFileList = styled__default['default'].ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -1127,11 +1154,11 @@ StyledFileList.defaultProps = {
 var COMPONENT_ID$h = 'forms.file_list.item';
 var StyledFileListItem = styled__default['default'].li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
-})(["&:not(:first-child){margin-top:", "px;}", ";"], function (props) {
+})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, function (props) {
   return props.theme.space.base * 2;
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props);
@@ -1140,9 +1167,9 @@ StyledFileListItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$9() { _extends$9 = Object.assign || 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$n() { _extends$n = Object.assign || 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); }
 
-var _ref$9 = /*#__PURE__*/React__namespace.createElement("circle", {
+var _ref$n = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 6,
   cy: 6,
   r: 2,
@@ -1150,20 +1177,20 @@ var _ref$9 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgCircleSmFill$1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$9);
+  }, props), _ref$n);
 }
 
 var COMPONENT_ID$g = 'forms.radio_svg';
 var StyledRadioSvg = styled__default['default'](SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1182,7 +1209,7 @@ var sizeStyles$9 = function sizeStyles(props) {
 };
 var StyledToggleLabel = styled__default['default'](StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1198,7 +1225,7 @@ StyledToggleLabel.defaultProps = {
 var COMPONENT_ID$e = 'forms.toggle_hint';
 var StyledToggleHint = styled__default['default'](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1231,7 +1258,7 @@ var sizeStyles$8 = function sizeStyles(props) {
 };
 var StyledToggleInput = styled__default['default'](StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1249,7 +1276,7 @@ StyledToggleInput.defaultProps = {
 var COMPONENT_ID$c = 'forms.toggle_message';
 var StyledToggleMessage = styled__default['default'](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1268,9 +1295,9 @@ StyledToggleMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$8() { _extends$8 = Object.assign || 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$m() { _extends$m = Object.assign || 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); }
 
-var _ref$8 = /*#__PURE__*/React__namespace.createElement("circle", {
+var _ref$m = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 8,
   cy: 8,
   r: 6,
@@ -1278,20 +1305,20 @@ var _ref$8 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$8);
+  }, props), _ref$m);
 }
 
 var COMPONENT_ID$b = 'forms.toggle_svg';
 var StyledToggleSvg = styled__default['default'](SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1315,7 +1342,7 @@ var sizeStyles$7 = function sizeStyles(props) {
 };
 var StyledSelect = styled__default['default'](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.44.2',
+  'data-garden-version': '8.47.1',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1334,7 +1361,7 @@ StyledSelect.defaultProps = {
 var COMPONENT_ID$9 = 'forms.select_wrapper';
 var StyledSelectWrapper = styled__default['default'](StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.44.2',
+  'data-garden-version': '8.47.1',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1387,7 +1414,7 @@ var sizeStyles$6 = function sizeStyles(props) {
 var StyledRangeInput = styled__default['default'].input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$8,
-    'data-garden-version': '8.44.2',
+    'data-garden-version': '8.47.1',
     type: 'range',
     style: {
       backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1419,7 +1446,7 @@ var COMPONENT_ID$7 = 'forms.slider';
 var StyledSlider = styled__default['default'].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$7,
-    'data-garden-version': '8.44.2',
+    'data-garden-version': '8.47.1',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1459,7 +1486,7 @@ var sizeStyles$5 = function sizeStyles(props) {
 var StyledSliderThumb = styled__default['default'].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.44.2',
+    'data-garden-version': '8.47.1',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1503,7 +1530,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 var StyledSliderTrack = styled__default['default'].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.44.2',
+    'data-garden-version': '8.47.1',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1530,7 +1557,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledSliderTrackRail = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1561,7 +1588,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledTileIcon = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1601,7 +1628,7 @@ var colorStyles = function colorStyles(props) {
 var StyledTile = styled__default['default'].label.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.44.2',
+    'data-garden-version': '8.47.1',
     'data-garden-focus-visible': props.isFocused,
     'data-garden-selected': props.isSelected
   };
@@ -1639,7 +1666,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledTileDescription = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1682,7 +1709,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTileLabel = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.44.2'
+  'data-garden-version': '8.47.1'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1731,7 +1758,7 @@ var Field = React__default['default'].forwardRef(function (props, ref) {
   }, [propGetters, isLabelActive, isLabelHovered]);
   return React__default['default'].createElement(FieldContext.Provider, {
     value: fieldProps
-  }, React__default['default'].createElement(StyledField, _extends$f({}, props, {
+  }, React__default['default'].createElement(StyledField, _extends$t({}, props, {
     ref: ref
   })));
 });
@@ -1747,7 +1774,7 @@ var useFieldsetContext = function useFieldsetContext() {
 
 var Legend = React.forwardRef(function (props, ref) {
   var fieldsetContext = useFieldsetContext();
-  return React__default['default'].createElement(StyledLegend, _extends$f({}, props, fieldsetContext, {
+  return React__default['default'].createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
     ref: ref
   }));
 });
@@ -1761,7 +1788,7 @@ var Fieldset = React.forwardRef(function (props, ref) {
   }, [props.isCompact]);
   return React__default['default'].createElement(FieldsetContext.Provider, {
     value: fieldsetContext
-  }, React__default['default'].createElement(StyledFieldset, _extends$f({}, props, {
+  }, React__default['default'].createElement(StyledFieldset, _extends$t({}, props, {
     ref: ref
   })));
 });
@@ -1790,7 +1817,7 @@ var Hint = React__default['default'].forwardRef(function (props, ref) {
   if (fieldContext) {
     combinedProps = fieldContext.getHintProps(combinedProps);
   }
-  return React__default['default'].createElement(HintComponent, _extends$f({
+  return React__default['default'].createElement(HintComponent, _extends$t({
     ref: ref
   }, combinedProps));
 });
@@ -1832,7 +1859,7 @@ var Label$1 = React__default['default'].forwardRef(function (props, ref) {
     });
   }
   if (type === 'radio') {
-    return React__default['default'].createElement(StyledRadioLabel, _extends$f({
+    return React__default['default'].createElement(StyledRadioLabel, _extends$t({
       ref: ref
     }, combinedProps), React__default['default'].createElement(StyledRadioSvg, null), props.children);
   } else if (type === 'checkbox') {
@@ -1854,15 +1881,15 @@ var Label$1 = React__default['default'].forwardRef(function (props, ref) {
     combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
       onClick: containerUtilities.composeEventHandlers(combinedProps.onClick, onLabelSelect)
     });
-    return React__default['default'].createElement(StyledCheckLabel, _extends$f({
+    return React__default['default'].createElement(StyledCheckLabel, _extends$t({
       ref: ref
     }, combinedProps), React__default['default'].createElement(StyledCheckSvg, null), React__default['default'].createElement(StyledDashSvg, null), props.children);
   } else if (type === 'toggle') {
-    return React__default['default'].createElement(StyledToggleLabel, _extends$f({
+    return React__default['default'].createElement(StyledToggleLabel, _extends$t({
       ref: ref
     }, combinedProps), React__default['default'].createElement(StyledToggleSvg, null), props.children);
   }
-  return React__default['default'].createElement(StyledLabel, _extends$f({
+  return React__default['default'].createElement(StyledLabel, _extends$t({
     ref: ref
   }, combinedProps));
 });
@@ -1894,7 +1921,7 @@ var Message = React__default['default'].forwardRef(function (_ref, ref) {
   if (fieldContext) {
     combinedProps = fieldContext.getMessageProps(combinedProps);
   }
-  return React__default['default'].createElement(MessageComponent, _extends$f({
+  return React__default['default'].createElement(MessageComponent, _extends$t({
     ref: ref
   }, combinedProps), validation && React__default['default'].createElement(StyledMessageIcon, {
     validation: validation
@@ -2189,32 +2216,32 @@ var Toggle = React__default['default'].forwardRef(function (_ref, ref) {
 });
 Toggle.displayName = 'Toggle';
 
-function _extends$7() { _extends$7 = Object.assign || 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$l() { _extends$l = Object.assign || 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 _ref$7 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$l = /*#__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"
 });
 
 function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$7);
+  }, props), _ref$l);
 }
 
 var _excluded$8 = ["onFocus", "onBlur", "disabled", "readOnly", "isFocused"];
 var StartIcon = function StartIcon(props) {
-  return React__default['default'].createElement(StyledTextMediaFigure, _extends$f({
+  return React__default['default'].createElement(StyledTextMediaFigure, _extends$t({
     position: "start"
   }, props));
 };
 var EndIcon = function EndIcon(props) {
-  return React__default['default'].createElement(StyledTextMediaFigure, _extends$f({
+  return React__default['default'].createElement(StyledTextMediaFigure, _extends$t({
     position: "end"
   }, props));
 };
@@ -2235,7 +2262,7 @@ var FauxInput = React.forwardRef(function (_ref, ref) {
   var onBlurHandler = containerUtilities.composeEventHandlers(onBlur, function () {
     setIsFocused(false);
   });
-  return React__default['default'].createElement(StyledTextFauxInput, _extends$f({
+  return React__default['default'].createElement(StyledTextFauxInput, _extends$t({
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
     isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
@@ -2528,7 +2555,7 @@ var MultiThumbRange = function MultiThumbRange(_ref) {
   var maxPosition = calculateMaxPosition(MIN_DISTANCE);
   var sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
   var onSliderMouseDown = containerUtilities.composeEventHandlers(onMouseDown, onTrackMouseDown);
-  return React__default['default'].createElement(StyledSlider, _extends$f({
+  return React__default['default'].createElement(StyledSlider, _extends$t({
     isDisabled: disabled,
     onMouseDown: onSliderMouseDown
   }, props), React__default['default'].createElement(StyledSliderTrack, {
@@ -2629,13 +2656,13 @@ var Tile = React__default['default'].forwardRef(function (_ref, ref) {
       onChange: tilesContext.onChange
     };
   }
-  return React__default['default'].createElement(StyledTile, _extends$f({
+  return React__default['default'].createElement(StyledTile, _extends$t({
     ref: ref,
     "aria-disabled": disabled,
     isDisabled: disabled,
     isFocused: isFocused,
     isSelected: tilesContext && tilesContext.value === value
-  }, props), children, React__default['default'].createElement(StyledTileInput, _extends$f({}, inputProps, {
+  }, props), children, React__default['default'].createElement(StyledTileInput, _extends$t({}, inputProps, {
     disabled: disabled,
     value: value,
     onBlur: function onBlur() {
@@ -2661,7 +2688,7 @@ Tile.propTypes = {
 
 var Description = React__default['default'].forwardRef(function (props, ref) {
   var tilesContext = useTilesContext();
-  return React__default['default'].createElement(StyledTileDescription, _extends$f({
+  return React__default['default'].createElement(StyledTileDescription, _extends$t({
     ref: ref,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
@@ -2670,7 +2697,7 @@ Description.displayName = 'TileDescription';
 
 var Icon = React__default['default'].forwardRef(function (props, ref) {
   var tileContext = useTilesContext();
-  return React__default['default'].createElement(StyledTileIcon, _extends$f({
+  return React__default['default'].createElement(StyledTileIcon, _extends$t({
     ref: ref,
     isCentered: tileContext && tileContext.isCentered
   }, props));
@@ -2689,7 +2716,7 @@ var Label = React__default['default'].forwardRef(function (props, forwardedRef)
       setTitle(ref.current.textContent || undefined);
     }
   }, [ref]);
-  return React__default['default'].createElement(StyledTileLabel, _extends$f({
+  return React__default['default'].createElement(StyledTileLabel, _extends$t({
     ref: mergeRefs__default['default']([ref, forwardedRef]),
     title: title,
     isCentered: tilesContext && tilesContext.isCentered
@@ -2728,7 +2755,7 @@ var Tiles = React__default['default'].forwardRef(function (_ref, ref) {
   }, [handleOnChange, selectedValue, name, isCentered]);
   return React__default['default'].createElement(TilesContext.Provider, {
     value: tileContext
-  }, React__default['default'].createElement("div", _extends$f({
+  }, React__default['default'].createElement("div", _extends$t({
     ref: ref,
     role: "radiogroup"
   }, props)));
@@ -2759,7 +2786,7 @@ var InputGroup = React__default['default'].forwardRef(function (_ref, ref) {
   }, [isCompact]);
   return React__default['default'].createElement(InputGroupContext.Provider, {
     value: contextValue
-  }, React__default['default'].createElement(StyledInputGroup, _extends$f({
+  }, React__default['default'].createElement(StyledInputGroup, _extends$t({
     ref: ref,
     isCompact: isCompact
   }, props)));
@@ -2773,7 +2800,7 @@ var _excluded$2 = ["disabled"];
 var FileUpload = React__default['default'].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
       props = _objectWithoutProperties(_ref, _excluded$2);
-  return React__default['default'].createElement(StyledFileUpload, _extends$f({
+  return React__default['default'].createElement(StyledFileUpload, _extends$t({
     ref: ref,
     "aria-disabled": disabled
   }, props));
@@ -2786,51 +2813,338 @@ FileUpload.propTypes = {
 FileUpload.displayName = 'FileUpload';
 
 var Item = React.forwardRef(function (_ref, ref) {
-  var props = _extends$f({}, _ref);
-  return React__default['default'].createElement(StyledFileListItem, _extends$f({}, props, {
+  var props = _extends$t({}, _ref);
+  return React__default['default'].createElement(StyledFileListItem, _extends$t({}, props, {
     ref: ref
   }));
 });
-Item.displayName = 'Item';
+Item.displayName = 'FileList.Item';
 
 var FileList = React.forwardRef(function (_ref, ref) {
-  var props = _extends$f({}, _ref);
-  return React__default['default'].createElement(StyledFileList, _extends$f({}, props, {
+  var props = _extends$t({}, _ref);
+  return React__default['default'].createElement(StyledFileList, _extends$t({}, props, {
     ref: ref
   }));
 });
 FileList.displayName = 'FileList';
 FileList.Item = Item;
 
-function _extends$6() { _extends$6 = Object.assign || 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$k() { _extends$k = Object.assign || 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); }
 
-var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$k = /*#__PURE__*/React__namespace.createElement("path", {
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M3 9l6-6m0 6L3 3"
+});
+
+function SvgXStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$k);
+}
+
+function _extends$j() { _extends$j = Object.assign || 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); }
+
+var _ref$j = /*#__PURE__*/React__namespace.createElement("path", {
   stroke: "currentColor",
   strokeLinecap: "round",
   d: "M3 13L13 3m0 10L3 3"
 });
 
 function SvgXStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$6);
+  }, props), _ref$j);
 }
 
+var FileContext = React.createContext(undefined);
+var useFileContext = function useFileContext() {
+  return React.useContext(FileContext);
+};
+
 var Close = React__default['default'].forwardRef(function (props, ref) {
-  return React__default['default'].createElement(StyledFileClose, _extends$f({
+  var fileContext = useFileContext();
+  var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
+    return event.preventDefault();
+  }
+  );
+  return React__default['default'].createElement(StyledFileClose, _extends$t({
     ref: ref
-  }, props), React__default['default'].createElement(SvgXStroke, null));
+  }, props, {
+    onMouseDown: onMouseDown
+  }), fileContext && fileContext.isCompact ? React__default['default'].createElement(SvgXStroke$1, null) : React__default['default'].createElement(SvgXStroke, null));
 });
-Close.displayName = 'Close';
+Close.displayName = 'File.Close';
 
-function _extends$5() { _extends$5 = Object.assign || 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$i() { _extends$i = Object.assign || 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); }
 
-var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$i = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M4.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M2 2.5h8m-5.5 7V5m3 4.5V5m-5-.5V11c0 .3.2.5.5.5h6c.3 0 .5-.2.5-.5V4.5"
+});
+
+function SvgTrashStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$i);
+}
+
+function _extends$h() { _extends$h = Object.assign || 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); }
+
+var _ref$h = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M6.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M3 2.5h10m-6.5 11v-8m3 8v-8m-6-1V15c0 .3.2.5.5.5h8c.3 0 .5-.2.5-.5V4.5"
+});
+
+function SvgTrashStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$h);
+}
+
+var Delete = React__default['default'].forwardRef(function (props, ref) {
+  var fileContext = useFileContext();
+  var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
+    return event.preventDefault();
+  }
+  );
+  return React__default['default'].createElement(StyledFileDelete, _extends$t({
+    ref: ref
+  }, props, {
+    onMouseDown: onMouseDown
+  }), fileContext && fileContext.isCompact ? React__default['default'].createElement(SvgTrashStroke$1, null) : React__default['default'].createElement(SvgTrashStroke, null));
+});
+Delete.displayName = 'File.Delete';
+
+function _extends$g() { _extends$g = Object.assign || 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); }
+
+var _ref$g = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M10.5 3.21V11a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h5.79a.5.5 0 01.35.15l2.21 2.21a.5.5 0 01.15.35zM7.5.5V3a.5.5 0 00.5.5h2.5m-7 6h5"
+});
+
+var _ref2$3 = /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 6,
+  height: 3,
+  x: 3,
+  y: 5,
+  fill: "currentColor",
+  rx: 0.5,
+  ry: 0.5
+});
+
+function SvgFilePdfStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$g, _ref2$3);
+}
+
+function _extends$f() { _extends$f = Object.assign || 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); }
+
+var _ref$f = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M4.5.5v8m0-6h1m-2 1h1m0 1h1m-2 1h1m0 1h1m-2 1h1m6-4.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
+});
+
+function SvgFileZipStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$f);
+}
+
+function _extends$e() { _extends$e = Object.assign || 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); }
+
+var _ref$e = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5m-7 6L5 8l1.5 1.5 1-1 1 1"
+});
+
+var _ref2$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 8,
+  cy: 6,
+  r: 1,
+  fill: "currentColor"
+});
+
+function SvgFileImageStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$e, _ref2$2);
+}
+
+function _extends$d() { _extends$d = Object.assign || 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); }
+
+var _ref$d = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M3.5 5.5h5m-5 2h5m-5 2h5m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
+});
+
+function SvgFileDocumentStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$d);
+}
+
+function _extends$c() { _extends$c = Object.assign || 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); }
+
+var _ref$c = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M3.5 5.5h1m-1 2h1m-1 2h1m2-4h2m-2 2h2m-2 2h2m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
+});
+
+function SvgFileSpreadsheetStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$c);
+}
+
+function _extends$b() { _extends$b = Object.assign || 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); }
+
+var _ref$b = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM6 9.5h2c.28 0 .5-.22.5-.5V8c0-.28-.22-.5-.5-.5H6c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm-2-2h2c.28 0 .5-.22.5-.5V6c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm3.5-7V3c0 .28.22.5.5.5h2.5"
+});
+
+function SvgFilePresentationStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$b);
+}
+
+function _extends$a() { _extends$a = Object.assign || 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); }
+
+var _ref$a = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
+});
+
+function SvgFileGenericStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$a);
+}
+
+function _extends$9() { _extends$9 = Object.assign || 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); }
+
+var _ref$9 = /*#__PURE__*/React__namespace.createElement("g", {
+  fill: "none",
+  stroke: "currentColor"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  d: "M3.5 6l2 2L9 4.5"
+}), /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 6,
+  cy: 6,
+  r: 5.5
+}));
+
+function SvgCheckCircleStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$9);
+}
+
+function _extends$8() { _extends$8 = Object.assign || 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); }
+
+var _ref$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5M4 9.5l4-4m0 4l-4-4"
+});
+
+function SvgFileErrorStroke$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$8);
+}
+
+function _extends$7() { _extends$7 = Object.assign || 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); }
+
+var _ref$7 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -2848,19 +3162,19 @@ var _ref2$1 = /*#__PURE__*/React__namespace.createElement("rect", {
 });
 
 function SvgFilePdfStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$5, _ref2$1);
+  }, props), _ref$7, _ref2$1);
 }
 
-function _extends$4() { _extends$4 = Object.assign || 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$6() { _extends$6 = Object.assign || 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); }
 
-var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -2868,19 +3182,19 @@ var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
 });
 
 function SvgFileZipStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$4);
+  }, props), _ref$6);
 }
 
-function _extends$3() { _extends$3 = Object.assign || 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$5() { _extends$5 = Object.assign || 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); }
 
-var _ref$3 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -2895,19 +3209,19 @@ var _ref2 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgFileImageStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$3, _ref2);
+  }, props), _ref$5, _ref2);
 }
 
-function _extends$2() { _extends$2 = Object.assign || 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$4() { _extends$4 = Object.assign || 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); }
 
-var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -2915,6 +3229,45 @@ var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
 });
 
 function SvgFileDocumentStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$4);
+}
+
+function _extends$3() { _extends$3 = Object.assign || 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); }
+
+var _ref$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M4.5 7.5h2m-2 2h2m-2 2h2m2-4h3m-3 2h3m-3 2h3m3-7.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
+});
+
+function SvgFileSpreadsheetStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$3);
+}
+
+function _extends$2() { _extends$2 = Object.assign || 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); }
+
+var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5M7 9.5h4c.28 0 .5.22.5.5v3c0 .28-.22.5-.5.5H7c-.28 0-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5zm-.5 2H5c-.28 0-.5-.22-.5-.5V8c0-.28.22-.5.5-.5h4c.28 0 .5.22.5.5v1.5"
+});
+
+function SvgFilePresentationStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
@@ -2930,11 +3283,10 @@ function _extends$1() { _extends$1 = Object.assign || function (target) { for (v
 var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M4.5 7.5h2m-2 2h2m-2 2h2m2-4h3m-3 2h3m-3 2h3m3-7.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
+  d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
 });
 
-function SvgFileSpreadsheetStroke(props) {
+function SvgFileGenericStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
@@ -2950,10 +3302,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 var _ref = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
-  d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5M7 9.5h4c.28 0 .5.22.5.5v3c0 .28-.22.5-.5.5H7c-.28 0-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5zm-.5 2H5c-.28 0-.5-.22-.5-.5V8c0-.28.22-.5.5-.5h4c.28 0 .5.22.5.5v1.5"
+  strokeLinecap: "round",
+  d: "M14.5 4.205V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.853a.5.5 0 01.356.15l3.148 3.204a.5.5 0 01.143.35zM10.5.5V4a.5.5 0 00.5.5h3.5m-9 8l5-5m0 5l-5-5"
 });
 
-function SvgFilePresentationStroke(props) {
+function SvgFileErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
@@ -2972,36 +3325,72 @@ var FileType;
   FileType["document"] = "document";
   FileType["spreadsheet"] = "spreadsheet";
   FileType["presentation"] = "presentation";
+  FileType["generic"] = "generic";
 })(FileType || (FileType = {}));
+var ValidationType;
+(function (ValidationType) {
+  ValidationType["success"] = "success";
+  ValidationType["error"] = "error";
+})(ValidationType || (ValidationType = {}));
 var ARRAY_FILE_TYPE = _toConsumableArray(Object.values(FileType));
-var fileIcons = {
+var fileIconsDefault = {
   pdf: React__default['default'].createElement(SvgFilePdfStroke, null),
   zip: React__default['default'].createElement(SvgFileZipStroke, null),
   image: React__default['default'].createElement(SvgFileImageStroke, null),
   document: React__default['default'].createElement(SvgFileDocumentStroke, null),
   spreadsheet: React__default['default'].createElement(SvgFileSpreadsheetStroke, null),
-  presentation: React__default['default'].createElement(SvgFilePresentationStroke, null)
-};
-
-var _excluded$1 = ["children", "type", "focusInset"];
+  presentation: React__default['default'].createElement(SvgFilePresentationStroke, null),
+  generic: React__default['default'].createElement(SvgFileGenericStroke, null),
+  success: React__default['default'].createElement(SvgCheckCircleStroke$1, null),
+  error: React__default['default'].createElement(SvgFileErrorStroke, null)
+};
+var fileIconsCompact = {
+  pdf: React__default['default'].createElement(SvgFilePdfStroke$1, null),
+  zip: React__default['default'].createElement(SvgFileZipStroke$1, null),
+  image: React__default['default'].createElement(SvgFileImageStroke$1, null),
+  document: React__default['default'].createElement(SvgFileDocumentStroke$1, null),
+  spreadsheet: React__default['default'].createElement(SvgFileSpreadsheetStroke$1, null),
+  presentation: React__default['default'].createElement(SvgFilePresentationStroke$1, null),
+  generic: React__default['default'].createElement(SvgFileGenericStroke$1, null),
+  success: React__default['default'].createElement(SvgCheckCircleStroke, null),
+  error: React__default['default'].createElement(SvgFileErrorStroke$1, null)
+};
+
+var _excluded$1 = ["children", "type", "isCompact", "focusInset", "validation"];
 var File = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       type = _ref.type,
+      isCompact = _ref.isCompact,
       focusInset = _ref.focusInset,
+      validation = _ref.validation,
       props = _objectWithoutProperties(_ref, _excluded$1);
-  return React__default['default'].createElement(StyledFile, _extends$f({}, props, {
+  var fileContextValue = React.useMemo(function () {
+    return {
+      isCompact: isCompact
+    };
+  }, [isCompact]);
+  var validationType = validation || type;
+  return React__default['default'].createElement(FileContext.Provider, {
+    value: fileContextValue
+  }, React__default['default'].createElement(StyledFile, _extends$t({}, props, {
+    isCompact: isCompact,
     focusInset: focusInset,
+    validation: validation,
     ref: ref
-  }), type && React__default['default'].createElement(StyledFileIcon, null, fileIcons[type]), React.Children.map(children, function (child) {
+  }), validationType && React__default['default'].createElement(StyledFileIcon, {
+    isCompact: isCompact
+  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, function (child) {
     return typeof child === 'string' ? React__default['default'].createElement("span", null, child) : child;
-  }));
+  })));
 });
 File.displayName = 'File';
 File.Close = Close;
+File.Delete = Delete;
 File.propTypes = {
   focusInset: PropTypes__default['default'].bool,
   isCompact: PropTypes__default['default'].bool,
-  type: PropTypes__default['default'].oneOf(ARRAY_FILE_TYPE)
+  type: PropTypes__default['default'].oneOf(ARRAY_FILE_TYPE),
+  validation: PropTypes__default['default'].oneOf(['success', 'error'])
 };
 
 var _excluded = ["start", "end", "disabled", "isCompact", "isBare", "focusInset", "readOnly", "validation", "wrapperProps", "wrapperRef", "onSelect"],
@@ -3067,7 +3456,7 @@ var MediaInput = React__default['default'].forwardRef(function (_ref, ref) {
     });
     isLabelHovered = fieldContext.isLabelHovered;
   }
-  return React__default['default'].createElement(FauxInput, _extends$f({
+  return React__default['default'].createElement(FauxInput, _extends$t({
     tabIndex: null,
     onClick: onFauxInputClickHandler,
     onFocus: onFauxInputFocusHandler,