@zendeskgarden/react-forms 8.38.0 → 8.40.1

package/dist/index.cjs.js

@@ -46,47 +46,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-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 ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
     keys.push.apply(keys, symbols);
   }
 
@@ -113,6 +84,39 @@ function _objectSpread2(target) {
   return target;
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+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);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -149,35 +153,38 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
+
+  var _s, _e;
 
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
 
       if (i && _arr.length === i) break;
@@ -213,6 +220,10 @@ function _arrayLikeToArray(arr, len) {
   return arr2;
 }
 
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -223,41 +234,47 @@ var useFieldContext = function useFieldContext() {
   return fieldContext;
 };
 
-var _templateObject$F;
-var COMPONENT_ID$E = 'forms.field';
+var COMPONENT_ID$J = 'forms.field';
 var StyledField = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.38.0'
-})(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n  position: relative; /* [1] */\n  direction: ", ";\n  margin: 0; /* [2] */\n  border: 0; /* [2] */\n  padding: 0; /* [2] */\n  font-size: 0; /* [3] */\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$J,
+  'data-garden-version': '8.40.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$E, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$J, props);
 });
 StyledField.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$E;
-var COMPONENT_ID$D = 'forms.fieldset';
+var COMPONENT_ID$I = 'forms.fieldset';
 var StyledFieldset = styled__default['default'](StyledField).attrs({
   as: 'fieldset',
-  'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '8.38.0'
-})(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  ", " {\n    margin-top: ", "px;\n  }\n  ", ";\n"])), StyledField, function (props) {
+  'data-garden-id': COMPONENT_ID$I,
+  'data-garden-version': '8.40.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$D, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$I, props);
 });
 StyledFieldset.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$D;
-var COMPONENT_ID$C = 'forms.input_label';
+var COMPONENT_ID$H = 'forms.input_label';
 var StyledLabel = styled__default['default'].label.attrs({
-  'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.38.0'
-})(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n  direction: ", ";\n  vertical-align: middle; /* support label inline with input layout */\n  line-height: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  &[hidden] {\n    display: ", "; /* [1] */\n    vertical-align: ", ";\n    text-indent: ", ";\n    font-size: ", ";\n\n    ", ";\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$H,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledLabel",
+  componentId: "sc-2utmsz-0"
+})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
   return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
@@ -278,31 +295,35 @@ var StyledLabel = styled__default['default'].label.attrs({
 }, function (props) {
   return !props.isRadio && polished.hideVisually();
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$H, props);
 });
 StyledLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$C;
-var COMPONENT_ID$B = 'forms.fieldset_legend';
+var COMPONENT_ID$G = 'forms.fieldset_legend';
 var StyledLegend = styled__default['default'](StyledLabel).attrs({
   as: 'legend',
-  'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.38.0'
-})(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n  padding: 0; /* [1] */\n\n  ", ";\n"])), function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props);
+  'data-garden-id': COMPONENT_ID$G,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledLegend",
+  componentId: "sc-6s0zwq-0"
+})(["padding:0;", ";"], function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$G, props);
 });
 StyledLegend.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$B;
-var COMPONENT_ID$A = 'forms.input_hint';
+var COMPONENT_ID$F = 'forms.input_hint';
 var StyledHint = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.38.0'
-})(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n  direction: ", ";\n  display: block;\n  vertical-align: middle; /* support hint inline with input layout */\n  line-height: ", ";\n  color: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$F,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledHint",
+  componentId: "sc-17c2wu8-0"
+})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
   return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
@@ -311,15 +332,15 @@ var StyledHint = styled__default['default'].div.attrs({
 }, function (props) {
   return props.theme.fontSizes.md;
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$F, props);
 });
 StyledHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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$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$7 = /*#__PURE__*/React__namespace.createElement("g", {
+var _ref$e = /*#__PURE__*/React__namespace.createElement("g", {
   fill: "none",
   stroke: "currentColor"
 }, /*#__PURE__*/React__namespace.createElement("circle", {
@@ -331,7 +352,7 @@ var _ref$7 = /*#__PURE__*/React__namespace.createElement("g", {
   d: "M7.5 4.5V9"
 }));
 
-var _ref2$1 = /*#__PURE__*/React__namespace.createElement("circle", {
+var _ref2$3 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 7.5,
   cy: 12,
   r: 1,
@@ -339,26 +360,26 @@ var _ref2$1 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgAlertErrorStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$7, _ref2$1);
+  }, props), _ref$e, _ref2$3);
 }
 
-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$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$6 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$d = /*#__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 = /*#__PURE__*/React__namespace.createElement("circle", {
+var _ref2$2 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 7.5,
   cy: 12,
   r: 1,
@@ -366,19 +387,19 @@ var _ref2 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgAlertWarningStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$6, _ref2);
+  }, props), _ref$d, _ref2$2);
 }
 
-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$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$5 = /*#__PURE__*/React__namespace.createElement("g", {
+var _ref$c = /*#__PURE__*/React__namespace.createElement("g", {
   fill: "none",
   stroke: "currentColor"
 }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -392,22 +413,21 @@ var _ref$5 = /*#__PURE__*/React__namespace.createElement("g", {
 }));
 
 function SvgCheckCircleStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$5);
+  }, props), _ref$c);
 }
 
-var _templateObject$A;
-var _excluded$g = ["children", "validation"];
+var _excluded$i = ["children", "validation"];
 var MessageIcon = function MessageIcon(_ref) {
   var children = _ref.children,
       validation = _ref.validation,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$i);
   var retVal;
   if (validation === 'error') {
     retVal = React__default['default'].createElement(SvgAlertErrorStroke, props);
@@ -420,22 +440,24 @@ var MessageIcon = function MessageIcon(_ref) {
   }
   return retVal;
 };
-var COMPONENT_ID$z = 'forms.input_message_icon';
+var COMPONENT_ID$E = 'forms.input_message_icon';
 var StyledMessageIcon = styled__default['default'](MessageIcon).attrs({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.38.0'
-})(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$E,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledMessageIcon",
+  componentId: "sc-1ph2gba-0"
+})(["width:", ";height:", ";", ";"], function (props) {
   return props.theme.iconSizes.md;
 }, function (props) {
   return props.theme.iconSizes.md;
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$E, props);
 });
 StyledMessageIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$z;
 var validationStyles = function validationStyles(props) {
   var rtl = props.theme.rtl;
   var padding = polished.math("".concat(props.theme.space.base, " * 2px + ").concat(props.theme.iconSizes.md));
@@ -451,11 +473,14 @@ var validationStyles = function validationStyles(props) {
   }
   return styled.css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
 };
-var COMPONENT_ID$y = 'forms.input_message';
+var COMPONENT_ID$D = 'forms.input_message';
 var StyledMessage = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.38.0'
-})(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n  direction: ", ";\n  display: inline-block;\n  position: relative;\n  vertical-align: middle; /* support message inline with input layout */\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n\n  & ", " {\n    position: absolute;\n    top: -1px;\n    ", ": 0;\n  }\n\n  /* stylelint-disable-next-line */\n  ", ":not([hidden]) + & {\n    display: block;\n    margin-top: ", ";\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$D,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledMessage",
+  componentId: "sc-30hgg7-0"
+})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
   return reactTheming.getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm);
@@ -468,18 +493,17 @@ 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$y, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$D, props);
 });
 StyledMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$y;
-var COMPONENT_ID$x = 'forms.input';
+var COMPONENT_ID$C = 'forms.input';
 var isInvalid = function isInvalid(validation) {
   return validation === 'warning' || validation === 'error';
 };
-var colorStyles$a = function colorStyles(props) {
+var colorStyles$b = function colorStyles(props) {
   var SHADE = 600;
   var placeholderColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
   var borderColor;
@@ -517,7 +541,7 @@ var colorStyles$a = 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$d = function sizeStyles(props) {
+var sizeStyles$e = function sizeStyles(props) {
   var fontSize = props.theme.fontSizes.md;
   var paddingHorizontal = "".concat(props.theme.space.base * 3, "px");
   var height;
@@ -543,11 +567,14 @@ var sizeStyles$d = function sizeStyles(props) {
 };
 var StyledTextInput = styled__default['default'].input.attrs(function (props) {
   return {
-    'data-garden-id': COMPONENT_ID$x,
-    'data-garden-version': '8.38.0',
+    'data-garden-id': COMPONENT_ID$C,
+    'data-garden-version': '8.40.1',
     'aria-invalid': isInvalid(props.validation)
   };
-})(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n  appearance: none;\n  /* prettier-ignore */\n  transition:\n    border-color 0.25s ease-in-out,\n    box-shadow 0.1s ease-in-out,\n    background-color 0.25s ease-in-out,\n    color 0.25s ease-in-out,\n    z-index 0.25s ease-in-out;\n  direction: ", ";\n  border: ", ";\n  border-radius: ", ";\n  width: 100%; /* vs. display: block to limit mouse interaction area */\n  box-sizing: border-box;\n  vertical-align: middle; /* support inline label */\n  font-family: inherit;\n\n  &::-ms-browse {\n    border-radius: ", ";\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none; /* remove clear button and password reveal in IE */\n  }\n\n  &::-moz-color-swatch {\n    border: none;\n    border-radius: ", ";\n  }\n\n  &::-webkit-color-swatch {\n    border: none;\n    border-radius: ", ";\n  }\n\n  &::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n\n  &::-webkit-clear-button,\n  &::-webkit-inner-spin-button,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button {\n    display: none; /* remove non-standard browser features */\n  }\n\n  &::-webkit-datetime-edit {\n    direction: ", ";\n    line-height: 1;\n  }\n\n  &::placeholder {\n    opacity: 1;\n  }\n\n  &:invalid {\n    box-shadow: none; /* prevent FireFox validation styling */\n  }\n\n  &[type='file']::-ms-value {\n    display: none; /* remove file entry in IE */\n  }\n\n  /* stylelint-disable-next-line */\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    &[type='number'] {\n      appearance: textfield; /* remove number spinner in FireFox */\n    }\n  }\n\n  ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Color (default and validation) styling */\n  ", ";\n\n  &:disabled {\n    cursor: default;\n  }\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledTextInput",
+  componentId: "sc-k12n8x-0"
+})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";&:focus{outline:none;}", ";&:disabled{cursor:default;}", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
   return props.isBare ? 'none' : props.theme.borders.sm;
@@ -562,38 +589,39 @@ var StyledTextInput = styled__default['default'].input.attrs(function (props) {
 }, function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
-  return sizeStyles$d(props);
+  return sizeStyles$e(props);
 }, function (props) {
-  return colorStyles$a(props);
+  return colorStyles$b(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props);
 });
 StyledTextInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$x;
-var COMPONENT_ID$w = 'forms.textarea';
+var COMPONENT_ID$B = '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$w,
-  'data-garden-version': '8.38.0'
-})(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n  resize: ", ";\n  overflow: auto;\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$B,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledTextarea",
+  componentId: "sc-wxschl-0"
+})(["resize:", ";overflow:auto;", ";", ";"], function (props) {
   return props.isResizable ? 'vertical' : 'none';
 }, function (props) {
   return props.isHidden && hiddenStyles;
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props);
 });
 StyledTextarea.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$f = ["children", "position", "isHovered", "isFocused", "isDisabled", "isRotated", "theme"];
-var _templateObject$w;
-var COMPONENT_ID$v = 'forms.media_figure';
-var colorStyles$9 = function colorStyles(props) {
+var _excluded$h = ["children", "position", "isHovered", "isFocused", "isDisabled", "isRotated", "theme"];
+var COMPONENT_ID$A = 'forms.media_figure';
+var colorStyles$a = function colorStyles(props) {
   var shade = 600;
   if (props.isDisabled) {
     shade = 400;
@@ -602,7 +630,7 @@ var colorStyles$9 = function colorStyles(props) {
   }
   return styled.css(["color:", ";"], reactTheming.getColor('neutralHue', shade, props.theme));
 };
-var sizeStyles$c = function sizeStyles(props) {
+var sizeStyles$d = 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");
@@ -623,35 +651,40 @@ function (_ref) {
       _ref.isDisabled;
       _ref.isRotated;
       _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$f);
+      var props = _objectWithoutProperties(_ref, _excluded$h);
   return React__default['default'].cloneElement(React.Children.only(children), props);
 }).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.38.0'
-})(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n  transform: ", ";\n  /* prettier-ignore */\n  transition:\n    transform 0.25s ease-in-out,\n    color 0.25s ease-in-out;\n\n  ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$A,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledTextMediaFigure",
+  componentId: "sc-1qepknj-0"
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], function (props) {
   return props.isRotated && "rotate(".concat(props.theme.rtl ? '-' : '+', "180deg)");
 }, function (props) {
-  return colorStyles$9(props);
+  return colorStyles$a(props);
 }, function (props) {
-  return sizeStyles$c(props);
+  return sizeStyles$d(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props);
 });
 StyledTextMediaFigure.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$v;
-var COMPONENT_ID$u = 'forms.faux_input';
+var COMPONENT_ID$z = '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$u,
-    'data-garden-version': '8.38.0'
+    'data-garden-id': COMPONENT_ID$z,
+    'data-garden-version': '8.40.1'
   };
-})(_templateObject$v || (_templateObject$v = _taggedTemplateLiteral(["\n  display: ", ";\n  align-items: ", ";\n  cursor: ", ";\n  overflow: hidden;\n\n  & > ", " {\n    vertical-align: ", ";\n  }\n\n  & > ", " {\n    flex-shrink: ", ";\n  }\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledTextFauxInput",
+  componentId: "sc-yqw7j9-0"
+})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;& > ", "{vertical-align:", ";}& > ", "{flex-shrink:", ";}", ";"], function (props) {
   return props.mediaLayout ? 'inline-flex' : 'inline-block';
 }, function (props) {
   return props.mediaLayout && 'baseline';
@@ -662,27 +695,28 @@ var StyledTextFauxInput = styled__default['default'](StyledTextInput).attrs(func
 }, StyledTextMediaFigure, function (props) {
   return props.mediaLayout && '0';
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props);
 });
 StyledTextFauxInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$u;
-var COMPONENT_ID$t = 'forms.media_input';
+var COMPONENT_ID$y = 'forms.media_input';
 var StyledTextMediaInput = styled__default['default'](StyledTextInput).attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.38.0',
+  'data-garden-id': COMPONENT_ID$y,
+  'data-garden-version': '8.40.1',
   isBare: true
-})(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n  flex-grow: 1;\n\n  ", ";\n"])), function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props);
+}).withConfig({
+  displayName: "StyledTextMediaInput",
+  componentId: "sc-12i9xfi-0"
+})(["flex-grow:1;", ";"], function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props);
 });
 StyledTextMediaInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$t;
-var COMPONENT_ID$s = 'forms.input_group';
+var COMPONENT_ID$x = 'forms.input_group';
 var positionStyles$1 = function positionStyles(props) {
   var topMargin = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
   var startDirection = props.theme.rtl ? 'right' : 'left';
@@ -690,86 +724,97 @@ var positionStyles$1 = function positionStyles(props) {
   return styled.css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}& > ", ":not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > ", ":not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin, StyledTextInput, StyledTextInput, startDirection, startDirection, StyledTextInput, endDirection, endDirection);
 };
 var itemStyles = function itemStyles(props) {
-  return styled.css(["& > *{margin-", ":-", ";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;}"], props.theme.rtl ? 'right' : 'left', 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 horizontal = props.theme.rtl ? 'right' : 'left';
+  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$s,
-  'data-garden-version': '8.38.0'
-})(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  display: inline-flex;\n  position: relative;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  z-index: 0;\n  width: 100%;\n\n  ", ";\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '8.40.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);
 }, function (props) {
   return itemStyles(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props);
 });
 StyledInputGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$s;
-var COMPONENT_ID$r = 'forms.radio_label';
-var sizeStyles$b = function sizeStyles(props) {
+var COMPONENT_ID$w = 'forms.radio_label';
+var sizeStyles$c = 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$r,
-  'data-garden-version': '8.38.0',
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '8.40.1',
   isRadio: true
-})(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  display: inline-block; /* [1] */\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n\n  ", ";\n\n  ", ";\n"])), function (props) {
-  return sizeStyles$b(props);
+}).withConfig({
+  displayName: "StyledRadioLabel",
+  componentId: "sc-1aq2e5t-0"
+})(["display:inline-block;position:relative;cursor:pointer;user-select:none;", ";", ";"], function (props) {
+  return sizeStyles$c(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props);
 });
 StyledRadioLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$r;
-var COMPONENT_ID$q = 'forms.checkbox_label';
+var COMPONENT_ID$v = 'forms.checkbox_label';
 var StyledCheckLabel = styled__default['default'](StyledRadioLabel).attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.38.0'
-})(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props);
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledCheckLabel",
+  componentId: "sc-x7nr1-0"
+})(["", ";"], function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props);
 });
 StyledCheckLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$q;
-var COMPONENT_ID$p = 'forms.radio_hint';
+var COMPONENT_ID$u = 'forms.radio_hint';
 var StyledRadioHint = styled__default['default'](StyledHint).attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.38.0'
-})(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  /* stylelint-disable-next-line */\n  padding-", ":\n    ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$u,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledRadioHint",
+  componentId: "sc-eo8twg-0"
+})(["padding-", ":", ";", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return polished.math("".concat(props.theme.space.base, " * 6px"));
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props);
 });
 StyledRadioHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$p;
-var COMPONENT_ID$o = 'forms.checkbox_hint';
+var COMPONENT_ID$t = 'forms.checkbox_hint';
 var StyledCheckHint = styled__default['default'](StyledRadioHint).attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.38.0'
-})(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props);
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledCheckHint",
+  componentId: "sc-1kl8e8c-0"
+})(["", ";"], function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props);
 });
 StyledCheckHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$o;
-var COMPONENT_ID$n = 'forms.radio';
-var colorStyles$8 = function colorStyles(props) {
+var COMPONENT_ID$s = 'forms.radio';
+var colorStyles$9 = function colorStyles(props) {
   var SHADE = 600;
   var borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
   var backgroundColor = props.theme.colors.background;
@@ -789,7 +834,7 @@ var colorStyles$8 = 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$a = function sizeStyles(props) {
+var sizeStyles$b = 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"));
@@ -800,27 +845,29 @@ var sizeStyles$a = 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$n,
-  'data-garden-version': '8.38.0',
+  'data-garden-id': COMPONENT_ID$s,
+  'data-garden-version': '8.40.1',
   type: 'radio'
-})(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  /* hide <input> but retain accessiblity */\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n\n  & ~ ", "::before {\n    position: absolute;\n    ", ": 0;\n    /* prettier-ignore */\n    transition:\n      border-color .25s ease-in-out,\n      box-shadow .1s ease-in-out,\n      background-color .25s ease-in-out,\n      color .25s ease-in-out;\n    border: ", ";\n    border-radius: 50%;\n    background-repeat: no-repeat;\n    background-position: center;\n    content: '';\n  }\n\n  & ~ ", " > svg {\n    position: absolute;\n  }\n\n  ", ";\n\n  &:focus ~ ", "::before {\n    outline: none;\n  }\n\n  & ~ ", ":active::before {\n    /* prettier-ignore */\n    transition:\n      border-color 0.1s ease-in-out,\n      background-color 0.1s ease-in-out,\n      color 0.1s ease-in-out;\n  }\n\n  ", ";\n\n  &:disabled ~ ", " {\n    cursor: default;\n  }\n\n  ", ";\n"])), StyledRadioLabel, function (props) {
+}).withConfig({
+  displayName: "StyledRadioInput",
+  componentId: "sc-qsavpv-0"
+})(["position:absolute;clip:rect(1px,1px,1px,1px);& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return props.theme.borders.sm;
 }, StyledRadioLabel, function (props) {
-  return sizeStyles$a(props);
+  return sizeStyles$b(props);
 }, StyledRadioLabel, StyledRadioLabel, function (props) {
-  return colorStyles$8(props);
+  return colorStyles$9(props);
 }, StyledRadioLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props);
 });
 StyledRadioInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$n;
-var COMPONENT_ID$m = 'forms.checkbox';
-var colorStyles$7 = function colorStyles(props) {
+var COMPONENT_ID$r = 'forms.checkbox';
+var colorStyles$8 = function colorStyles(props) {
   var SHADE = 600;
   var indeterminateBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
   var indeterminateBackgroundColor = indeterminateBorderColor;
@@ -830,51 +877,58 @@ var colorStyles$7 = 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$m,
-  'data-garden-version': '8.38.0',
+  'data-garden-id': COMPONENT_ID$r,
+  'data-garden-version': '8.40.1',
   type: 'checkbox'
-})(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  /* stylelint-disable-next-line */\n  & ~ ", "::before {\n    border-radius: ", ";\n  }\n\n  ", ";\n\n  ", ";\n"])), StyledCheckLabel, function (props) {
+}).withConfig({
+  displayName: "StyledCheckInput",
+  componentId: "sc-176jxxe-0"
+})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, function (props) {
   return props.theme.borderRadii.md;
 }, function (props) {
-  return colorStyles$7(props);
+  return colorStyles$8(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props);
 });
 StyledCheckInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$m;
-var COMPONENT_ID$l = 'forms.radio_message';
+var COMPONENT_ID$q = 'forms.radio_message';
 var StyledRadioMessage = styled__default['default'](StyledMessage).attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.38.0'
-})(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  /* stylelint-disable-next-line */\n  padding-", ":\n    ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$q,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledRadioMessage",
+  componentId: "sc-1pmi0q8-0"
+})(["padding-", ":", ";", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return polished.math("".concat(props.theme.space.base, " * 6px"));
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props);
 });
 StyledRadioMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$l;
-var COMPONENT_ID$k = 'forms.checkbox_message';
+var COMPONENT_ID$p = 'forms.checkbox_message';
 var StyledCheckMessage = styled__default['default'](StyledRadioMessage).attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.38.0'
-})(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props);
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledCheckMessage",
+  componentId: "sc-s4p6kd-0"
+})(["", ";"], function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props);
 });
 StyledCheckMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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$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$4 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$b = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -884,31 +938,33 @@ var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
 });
 
 function SvgCheckSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  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$4);
+  }, props), _ref$b);
 }
 
-var _templateObject$k;
-var COMPONENT_ID$j = 'forms.check_svg';
+var COMPONENT_ID$o = 'forms.check_svg';
 var StyledCheckSvg = styled__default['default'](SvgCheckSmFill).attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.38.0'
-})(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  transition: opacity 0.25 ease-in-out;\n  opacity: 0;\n  pointer-events: none;\n\n  ", ":checked ~ ", " > & {\n    opacity: 1;\n  }\n\n  ", ":indeterminate ~ ", " > & {\n    opacity: 0;\n  }\n\n  ", ";\n"])), StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props);
+  'data-garden-id': COMPONENT_ID$o,
+  'data-garden-version': '8.40.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);
 });
 StyledCheckSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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$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$3 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$a = /*#__PURE__*/React__namespace.createElement("path", {
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeWidth: 2,
@@ -916,35 +972,36 @@ var _ref$3 = /*#__PURE__*/React__namespace.createElement("path", {
 });
 
 function SvgDashFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  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$3);
+  }, props), _ref$a);
 }
 
-var _templateObject$j;
-var COMPONENT_ID$i = 'forms.dash_svg';
+var COMPONENT_ID$n = 'forms.dash_svg';
 var StyledDashSvg = styled__default['default'](SvgDashFill).attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.38.0'
-})(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  transition: opacity 0.25 ease-in-out;\n  opacity: 0;\n  pointer-events: none;\n\n  ", ":indeterminate ~ ", " > & {\n    opacity: 1;\n  }\n\n  ", ";\n"])), StyledCheckInput, StyledCheckLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props);
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '8.40.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);
 });
 StyledDashSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$i;
-var COMPONENT_ID$h = 'forms.file_upload';
+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 colorStyles$6 = function colorStyles(props) {
+var colorStyles$7 = function colorStyles(props) {
   var baseColor = reactTheming.getColor('primaryHue', 600, props.theme);
   var hoverColor = reactTheming.getColor('primaryHue', 700, props.theme);
   var activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
@@ -954,9 +1011,12 @@ var colorStyles$6 = function colorStyles(props) {
   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 StyledFileUpload = styled__default['default'].div.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.38.0'
-})(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  box-sizing: content-box;\n  direction: ", ";\n  /* prettier-ignore */\n  transition:\n    border-color 0.25s ease-in-out,\n    box-shadow 0.1s ease-in-out,\n    background-color 0.25s ease-in-out,\n    color 0.25s ease-in-out;\n  border: dashed ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  padding: ", ";\n  min-width: 4em;\n  text-align: center;\n  line-height: ", ";\n  font-size: ", ";\n  user-select: none;\n\n  &:focus {\n    outline: none;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: default;\n  }\n\n  ", ";\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '8.40.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) {
   return props.theme.rtl ? 'rtl' : 'ltr';
 }, function (props) {
   return props.theme.borderWidths.sm;
@@ -969,19 +1029,118 @@ var StyledFileUpload = styled__default['default'].div.attrs({
 }, function (props) {
   return props.theme.fontSizes.md;
 }, function (props) {
-  return colorStyles$6(props);
+  return colorStyles$7(props);
 }, function (props) {
   return positionStyles(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props);
 });
 StyledFileUpload.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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 COMPONENT_ID$l = 'forms.file.close';
+var StyledFileClose = styled__default['default'].div.attrs({
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '8.40.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);
+});
+StyledFileClose.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
 
-var _ref$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+var COMPONENT_ID$k = '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 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 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.40.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);
+});
+StyledFile.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+var _excluded$g = ["children"];
+var COMPONENT_ID$j = 'forms.file.icon';
+var StyledFileIcon = styled__default['default'](function (_ref) {
+  var children = _ref.children,
+      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.40.1'
+}).withConfig({
+  displayName: "StyledFileIcon",
+  componentId: "sc-7b3q0c-0"
+})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], function (props) {
+  return props.theme.iconSizes.md;
+}, function (props) {
+  return props.theme.rtl ? 'left' : 'right';
+}, function (props) {
+  return props.theme.space.base * 2;
+}, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props);
+});
+StyledFileIcon.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+var COMPONENT_ID$i = 'forms.file_list';
+var StyledFileList = styled__default['default'].ul.attrs({
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledFileList",
+  componentId: "sc-gbahjg-0"
+})(["margin:0;padding:0;list-style:none;", ";"], function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props);
+});
+StyledFileList.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+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.40.1'
+}).withConfig({
+  displayName: "StyledFileListItem",
+  componentId: "sc-1ova3lo-0"
+})(["&:not(:first-child){margin-top:", "px;}", ";"], function (props) {
+  return props.theme.space.base * 2;
+}, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props);
+});
+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); }
+
+var _ref$9 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 6,
   cy: 6,
   r: 2,
@@ -989,29 +1148,30 @@ var _ref$2 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgCircleSmFill$1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  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$2);
+  }, props), _ref$9);
 }
 
-var _templateObject$h;
 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.38.0'
-})(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  transition: opacity 0.25 ease-in-out;\n  opacity: 0;\n\n  ", ":checked ~ ", " > & {\n    opacity: 1;\n  }\n\n  ", ";\n"])), StyledRadioInput, StyledRadioLabel, function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledRadioSvg",
+  componentId: "sc-1r1qtr1-0"
+})(["transition:opacity 0.25 ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props);
 });
 StyledRadioSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$g;
 var COMPONENT_ID$f = 'forms.toggle_label';
 var sizeStyles$9 = function sizeStyles(props) {
   var size = props.theme.space.base * 10;
@@ -1020,8 +1180,11 @@ var sizeStyles$9 = function sizeStyles(props) {
 };
 var StyledToggleLabel = styled__default['default'](StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.38.0'
-})(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledToggleLabel",
+  componentId: "sc-e0asdk-0"
+})(["", ";", ";"], function (props) {
   return sizeStyles$9(props);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props);
@@ -1030,12 +1193,14 @@ StyledToggleLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$f;
 var COMPONENT_ID$e = 'forms.toggle_hint';
 var StyledToggleHint = styled__default['default'](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.38.0'
-})(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  /* stylelint-disable-next-line */\n  padding-", ":\n    ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledToggleHint",
+  componentId: "sc-nziggu-0"
+})(["padding-", ":", ";", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return polished.math("".concat(props.theme.space.base, " * 12px"));
@@ -1046,7 +1211,6 @@ StyledToggleHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$e;
 var COMPONENT_ID$d = 'forms.toggle';
 var colorStyles$5 = function colorStyles(props) {
   var SHADE = 600;
@@ -1065,8 +1229,11 @@ var sizeStyles$8 = function sizeStyles(props) {
 };
 var StyledToggleInput = styled__default['default'](StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.38.0'
-})(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  & ~ ", "::before {\n    top: 0;\n    /* prettier-ignore */\n    transition:\n      box-shadow .1s ease-in-out,\n      background-color .15s ease-in-out,\n      color .25s ease-in-out;\n    border: none;\n    border-radius: 100px;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), StyledToggleLabel, function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledToggleInput",
+  componentId: "sc-sgp47s-0"
+})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, function (props) {
   return sizeStyles$8(props);
 }, function (props) {
   return colorStyles$5(props);
@@ -1077,12 +1244,14 @@ StyledToggleInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$d;
 var COMPONENT_ID$c = 'forms.toggle_message';
 var StyledToggleMessage = styled__default['default'](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.38.0'
-})(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  /* stylelint-disable-next-line */\n  padding-", ":\n    ", ";\n\n  & ", " {\n    ", ": ", ";\n  }\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledToggleMessage",
+  componentId: "sc-13vuvl1-0"
+})(["padding-", ":", ";& ", "{", ":", ";}", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return polished.math("".concat(props.theme.space.base, " * 12px"));
@@ -1097,9 +1266,9 @@ StyledToggleMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+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$1 = /*#__PURE__*/React__namespace.createElement("circle", {
+var _ref$8 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 8,
   cy: 8,
   r: 6,
@@ -1107,29 +1276,30 @@ var _ref$1 = /*#__PURE__*/React__namespace.createElement("circle", {
 });
 
 function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     focusable: "false",
     role: "presentation"
-  }, props), _ref$1);
+  }, props), _ref$8);
 }
 
-var _templateObject$c;
 var COMPONENT_ID$b = 'forms.toggle_svg';
 var StyledToggleSvg = styled__default['default'](SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.38.0'
-})(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  transition: all 0.15s ease-in-out;\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledToggleSvg",
+  componentId: "sc-162xbyx-0"
+})(["transition:all 0.15s ease-in-out;", ";"], function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props);
 });
 StyledToggleSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$b;
 var COMPONENT_ID$a = 'forms.select';
 var colorStyles$4 = function colorStyles(props) {
   var color = reactTheming.getColor('neutralHue', 700, props.theme);
@@ -1143,9 +1313,12 @@ var sizeStyles$7 = function sizeStyles(props) {
 };
 var StyledSelect = styled__default['default'](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.38.0',
+  'data-garden-version': '8.40.1',
   as: 'select'
-})(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  cursor: pointer;\n  text-overflow: ellipsis;\n\n  ", ";\n  ", ";\n\n  &::-ms-expand {\n    display: none; /* [1] */\n  }\n\n  &::-ms-value {\n    background-color: transparent; /* [1] */\n    color: inherit; /* [1] */\n  }\n\n  &:-moz-focusring {\n    transition: none;\n    text-shadow: 0 0 0 ", "; /* [1] */\n    color: transparent; /* [1] */\n  }\n\n  & + ", " {\n    position: absolute;\n    pointer-events: none;\n  }\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledSelect",
+  componentId: "sc-8xdxpt-0"
+})(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], function (props) {
   return sizeStyles$7(props);
 }, function (props) {
   return colorStyles$4(props);
@@ -1156,18 +1329,19 @@ StyledSelect.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$a;
 var COMPONENT_ID$9 = 'forms.select_wrapper';
 var StyledSelectWrapper = styled__default['default'](StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.38.0',
+  'data-garden-version': '8.40.1',
   isBare: true
-})(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: visible;\n"])));
+}).withConfig({
+  displayName: "StyledSelectWrapper",
+  componentId: "sc-i7b6hw-0"
+})(["position:relative;overflow:visible;"]);
 StyledSelectWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$9;
 var COMPONENT_ID$8 = 'forms.range';
 var thumbStyles = function thumbStyles(styles) {
   var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -1211,13 +1385,16 @@ 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.38.0',
+    'data-garden-version': '8.40.1',
     type: 'range',
     style: {
       backgroundSize: props.hasLowerTrack && props.backgroundSize
     }
   };
-})(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  appearance: none;\n  direction: ", ";\n  margin: 0; /* reset for WebKit & Firefox */\n  background-color: inherit; /* reset for Firefox (disabled) */\n  cursor: pointer;\n  padding: 0; /* reset for IE */\n  width: 100%;\n  vertical-align: middle;\n\n  ", "\n\n  &::-webkit-slider-container,\n  &::-webkit-slider-runnable-track {\n    background-size: inherit; /* provide means for styling WebKit lower range */\n  }\n\n  ", ";\n\n  ", "\n\n  ", ";\n\n  &::-moz-focus-outer {\n    border: 0; /* remove dotted outline from Firefox on focus */\n  }\n\n  &::-ms-tooltip {\n    display: none; /* reset for IE */\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: default;\n  }\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledRangeInput",
+  componentId: "sc-1iv2yqp-0"
+})(["appearance:none;direction:", ";margin:0;background-color:inherit;cursor:pointer;padding:0;width:100%;vertical-align:middle;", " &::-webkit-slider-container,&::-webkit-slider-runnable-track{background-size:inherit;}", ";", " ", ";&::-moz-focus-outer{border:0;}&::-ms-tooltip{display:none;}&:focus{outline:none;}&:disabled{cursor:default;}", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
   return trackStyles("\n      appearance: none;\n      border-color: transparent; /* reset for IE */\n      background-repeat: repeat-y;\n      background-size: 0;\n      background-position: ".concat(props.theme.rtl ? '100% 100%' : '0% 0%', ";\n      width: 99.8%; /* fix for IE which cuts off the upper track's border radius */\n      color: transparent; /* reset for IE */\n      box-sizing: border-box; /* reset for IE */\n    "));
@@ -1236,15 +1413,17 @@ StyledRangeInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$8;
 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.38.0',
+    'data-garden-version': '8.40.1',
     'aria-disabled': props.isDisabled
   };
-})(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  z-index: 0;\n  cursor: pointer;\n  /* thumb height + focused shadow widths */\n  height: ", ";\n\n  &[aria-disabled='true'] {\n    cursor: default;\n  }\n\n  /* stylelint-disable */\n  ", ":not([hidden]) + &,\n  ", " + &,\n  ", " + &,\n  & + ", ",\n  & + ", " {\n    margin-top: ", ";\n  }\n  /* stylelint-enable */\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledSlider",
+  componentId: "sc-1di437a-0"
+})(["display:block;position:relative;z-index:0;cursor:pointer;height:", ";&[aria-disabled='true']{cursor:default;}", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";"], function (props) {
   return polished.math("(".concat(props.theme.space.base, " * 5px) + (").concat(props.theme.shadowWidths.md, " * 2)"));
 }, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, function (props) {
   return polished.math("".concat(props.theme.space.base, " * 2px"));
@@ -1255,7 +1434,6 @@ StyledSlider.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$7;
 var COMPONENT_ID$6 = 'forms.slider_thumb';
 var colorStyles$2 = function colorStyles(props) {
   var SHADE = 600;
@@ -1279,10 +1457,13 @@ 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.38.0',
+    'data-garden-version': '8.40.1',
     'aria-disabled': props.isDisabled
   };
-})(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  appearance: none;\n  position: absolute;\n  top: 50%;\n  ", ": ", ";\n  /* prettier-ignore */\n  transition:\n    border-color 0.25s ease-in-out,\n    box-shadow 0.1s ease-in-out,\n    background-color 0.25s ease-in-out;\n  z-index: 1;\n  border: ", ";\n  border-radius: 100%;\n  cursor: inherit;\n  box-sizing: border-box;\n  font-size: 0;\n\n  ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledSliderThumb",
+  componentId: "sc-yspbwa-0"
+})(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";&:focus{outline:none;}", ";", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return polished.math("".concat(props.position, " * 1px"));
@@ -1300,7 +1481,6 @@ StyledSliderThumb.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$6;
 var COMPONENT_ID$5 = 'forms.slider_track';
 var colorStyles$1 = function colorStyles(props) {
   var SHADE = 600;
@@ -1321,10 +1501,13 @@ 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.38.0',
+    'data-garden-version': '8.40.1',
     'aria-disabled': props.isDisabled
   };
-})(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  box-sizing: border-box;\n  background-origin: content-box;\n  background-repeat: repeat-y;\n  width: 100%;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledSliderTrack",
+  componentId: "sc-aw5m6g-0"
+})(["position:absolute;top:50%;box-sizing:border-box;background-origin:content-box;background-repeat:repeat-y;width:100%;", ";", ";", ";"], function (props) {
   return sizeStyles$4(props);
 }, function (props) {
   return colorStyles$1(props);
@@ -1337,7 +1520,6 @@ StyledSliderTrack.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$5;
 var COMPONENT_ID$4 = 'forms.slider_track_rail';
 var sizeStyles$3 = function sizeStyles(props) {
   var height = polished.math("".concat(props.theme.space.base, " * 1.5px"));
@@ -1346,8 +1528,11 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledSliderTrackRail = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.38.0'
-})(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledSliderTrackRail",
+  componentId: "sc-1o5owbd-0"
+})(["position:relative;", ";", ";"], function (props) {
   return sizeStyles$3(props);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
@@ -1356,7 +1541,6 @@ StyledSliderTrackRail.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$4;
 var COMPONENT_ID$3 = 'forms.tile_icon';
 var sizeStyles$2 = function sizeStyles(props) {
   var iconSize = polished.math("".concat(props.theme.iconSizes.md, " * 2"));
@@ -1375,8 +1559,11 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledTileIcon = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.38.0'
-})(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  display: block;\n  transition: color 0.25s ease-in-out;\n  text-align: center;\n  line-height: 0;\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledTileIcon",
+  componentId: "sc-1wazhg4-0"
+})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], function (props) {
   return sizeStyles$2(props);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
@@ -1385,7 +1572,6 @@ StyledTileIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$3;
 var COMPONENT_ID$2 = 'forms.tile';
 var colorStyles = function colorStyles(props) {
   var SHADE = 600;
@@ -1413,11 +1599,14 @@ 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.38.0',
+    'data-garden-version': '8.40.1',
     'data-garden-focus-visible': props.isFocused,
     'data-garden-selected': props.isSelected
   };
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  /* prettier-ignore */\n  transition:\n    border-color .25s ease-in-out,\n    box-shadow .1s ease-in-out,\n    background-color .25s ease-in-out,\n    color .25s ease-in-out;\n  border-radius: ", ";\n  cursor: ", ";\n  padding: ", "px;\n  direction: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+}).withConfig({
+  displayName: "StyledTile",
+  componentId: "sc-1jjvmxs-0"
+})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";cursor:", ";padding:", "px;direction:", ";", ";", ";"], function (props) {
   return props.theme.borderRadii.md;
 }, function (props) {
   return !props.isDisabled && 'pointer';
@@ -1434,7 +1623,6 @@ StyledTile.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$2;
 var COMPONENT_ID$1 = 'forms.tile_description';
 var sizeStyles$1 = function sizeStyles(props) {
   var marginDirection = 'left';
@@ -1449,8 +1637,11 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledTileDescription = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.38.0'
-})(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: block;\n  text-align: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledTileDescription",
+  componentId: "sc-xfuu7u-0"
+})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], function (props) {
   return props.isCentered && 'center';
 }, function (props) {
   return reactTheming.getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm);
@@ -1465,13 +1656,14 @@ StyledTileDescription.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject$1;
-var StyledTileInput = styled__default['default'].input(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  padding: 0;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  white-space: nowrap;\n"])));
+var StyledTileInput = styled__default['default'].input.withConfig({
+  displayName: "StyledTileInput",
+  componentId: "sc-1nq2m6q-0"
+})(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 StyledTileInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _templateObject;
 var COMPONENT_ID = 'forms.tile_label';
 var sizeStyles = function sizeStyles(props) {
   var marginDirection = 'left';
@@ -1488,8 +1680,11 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTileLabel = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.38.0'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  text-align: ", ";\n  line-height: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.40.1'
+}).withConfig({
+  displayName: "StyledTileLabel",
+  componentId: "sc-1mypv27-0"
+})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], function (props) {
   return props.isCentered && 'center';
 }, function (props) {
   return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
@@ -1534,7 +1729,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$8({}, props, {
+  }, React__default['default'].createElement(StyledField, _extends$f({}, props, {
     ref: ref
   })));
 });
@@ -1550,7 +1745,7 @@ var useFieldsetContext = function useFieldsetContext() {
 
 var Legend = React.forwardRef(function (props, ref) {
   var fieldsetContext = useFieldsetContext();
-  return React__default['default'].createElement(StyledLegend, _extends$8({}, props, fieldsetContext, {
+  return React__default['default'].createElement(StyledLegend, _extends$f({}, props, fieldsetContext, {
     ref: ref
   }));
 });
@@ -1564,7 +1759,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$8({}, props, {
+  }, React__default['default'].createElement(StyledFieldset, _extends$f({}, props, {
     ref: ref
   })));
 });
@@ -1593,7 +1788,7 @@ var Hint = React__default['default'].forwardRef(function (props, ref) {
   if (fieldContext) {
     combinedProps = fieldContext.getHintProps(combinedProps);
   }
-  return React__default['default'].createElement(HintComponent, _extends$8({
+  return React__default['default'].createElement(HintComponent, _extends$f({
     ref: ref
   }, combinedProps));
 });
@@ -1635,7 +1830,7 @@ var Label$1 = React__default['default'].forwardRef(function (props, ref) {
     });
   }
   if (type === 'radio') {
-    return React__default['default'].createElement(StyledRadioLabel, _extends$8({
+    return React__default['default'].createElement(StyledRadioLabel, _extends$f({
       ref: ref
     }, combinedProps), React__default['default'].createElement(StyledRadioSvg, null), props.children);
   } else if (type === 'checkbox') {
@@ -1657,15 +1852,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$8({
+    return React__default['default'].createElement(StyledCheckLabel, _extends$f({
       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$8({
+    return React__default['default'].createElement(StyledToggleLabel, _extends$f({
       ref: ref
     }, combinedProps), React__default['default'].createElement(StyledToggleSvg, null), props.children);
   }
-  return React__default['default'].createElement(StyledLabel, _extends$8({
+  return React__default['default'].createElement(StyledLabel, _extends$f({
     ref: ref
   }, combinedProps));
 });
@@ -1674,11 +1869,11 @@ Label$1.propTypes = {
   isRegular: PropTypes__default['default'].bool
 };
 
-var _excluded$e = ["validation", "children"];
+var _excluded$f = ["validation", "children"];
 var Message = React__default['default'].forwardRef(function (_ref, ref) {
   var validation = _ref.validation,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$f);
   var fieldContext = useFieldContext();
   var type = useInputContext();
   var MessageComponent;
@@ -1697,7 +1892,7 @@ var Message = React__default['default'].forwardRef(function (_ref, ref) {
   if (fieldContext) {
     combinedProps = fieldContext.getMessageProps(combinedProps);
   }
-  return React__default['default'].createElement(MessageComponent, _extends$8({
+  return React__default['default'].createElement(MessageComponent, _extends$f({
     ref: ref
   }, combinedProps), validation && React__default['default'].createElement(StyledMessageIcon, {
     validation: validation
@@ -1708,11 +1903,11 @@ Message.propTypes = {
   validation: PropTypes__default['default'].oneOf(['success', 'warning', 'error'])
 };
 
-var _excluded$d = ["indeterminate", "children"];
+var _excluded$e = ["indeterminate", "children"];
 var Checkbox = React__default['default'].forwardRef(function (_ref, ref) {
   var indeterminate = _ref.indeterminate,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
   var fieldsetContext = useFieldsetContext();
   var fieldContext = useFieldContext();
   var inputRef = function inputRef(inputElement) {
@@ -1746,10 +1941,10 @@ var useInputGroupContext = function useInputGroupContext() {
   return React.useContext(InputGroupContext);
 };
 
-var _excluded$c = ["onSelect"];
+var _excluded$d = ["onSelect"];
 var Input = React__default['default'].forwardRef(function (_ref, ref) {
   var onSelect = _ref.onSelect,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$d);
   var fieldContext = useFieldContext();
   var inputGroupContext = useInputGroupContext();
   var onSelectHandler = props.readOnly ? containerUtilities.composeEventHandlers(onSelect, function (event) {
@@ -1779,10 +1974,10 @@ Input.propTypes = {
   validation: PropTypes__default['default'].oneOf(['success', 'warning', 'error'])
 };
 
-var _excluded$b = ["children"];
+var _excluded$c = ["children"];
 var Radio = React__default['default'].forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$c);
   var fieldsetContext = useFieldsetContext();
   var fieldContext = useFieldContext();
   var combinedProps = _objectSpread2(_objectSpread2({
@@ -1797,13 +1992,13 @@ var Radio = React__default['default'].forwardRef(function (_ref, ref) {
 });
 Radio.displayName = 'Radio';
 
-var _excluded$a = ["hasLowerTrack", "min", "max", "step"];
+var _excluded$b = ["hasLowerTrack", "min", "max", "step"];
 var Range = React__default['default'].forwardRef(function (_ref, ref) {
   var hasLowerTrack = _ref.hasLowerTrack,
       min = _ref.min,
       max = _ref.max,
       step = _ref.step,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
   var _useState = React.useState('0'),
       _useState2 = _slicedToArray(_useState, 2),
       backgroundSize = _useState2[0],
@@ -1850,7 +2045,7 @@ Range.defaultProps = {
   step: 1
 };
 
-var _excluded$9 = ["minRows", "maxRows", "style", "onChange", "onSelect"];
+var _excluded$a = ["minRows", "maxRows", "style", "onChange", "onSelect"];
 var parseStyleValue = function parseStyleValue(value) {
   return parseInt(value, 10) || 0;
 };
@@ -1860,7 +2055,7 @@ var Textarea = React__default['default'].forwardRef(function (_ref, ref) {
       style = _ref.style,
       onChange = _ref.onChange,
       onSelect = _ref.onSelect,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$a);
   var fieldContext = useFieldContext();
   var textAreaRef = containerUtilities.useCombinedRefs(ref);
   var shadowTextAreaRef = React.useRef(null);
@@ -1974,10 +2169,10 @@ Textarea.propTypes = {
   validation: PropTypes__default['default'].oneOf(['success', 'warning', 'error'])
 };
 
-var _excluded$8 = ["children"];
+var _excluded$9 = ["children"];
 var Toggle = React__default['default'].forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$9);
   var fieldsetContext = useFieldsetContext();
   var fieldContext = useFieldContext();
   var combinedProps = _objectSpread2(_objectSpread2({
@@ -1992,32 +2187,32 @@ var Toggle = React__default['default'].forwardRef(function (_ref, ref) {
 });
 Toggle.displayName = 'Toggle';
 
-function _extends() { _extends = 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.apply(this, arguments); }
+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 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$7 = /*#__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({
+  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);
+  }, props), _ref$7);
 }
 
-var _excluded$7 = ["onFocus", "onBlur", "disabled", "readOnly", "isFocused"];
+var _excluded$8 = ["onFocus", "onBlur", "disabled", "readOnly", "isFocused"];
 var StartIcon = function StartIcon(props) {
-  return React__default['default'].createElement(StyledTextMediaFigure, _extends$8({
+  return React__default['default'].createElement(StyledTextMediaFigure, _extends$f({
     position: "start"
   }, props));
 };
 var EndIcon = function EndIcon(props) {
-  return React__default['default'].createElement(StyledTextMediaFigure, _extends$8({
+  return React__default['default'].createElement(StyledTextMediaFigure, _extends$f({
     position: "end"
   }, props));
 };
@@ -2027,7 +2222,7 @@ var FauxInput = React.forwardRef(function (_ref, ref) {
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
       controlledIsFocused = _ref.isFocused,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$8);
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isFocused = _useState2[0],
@@ -2038,7 +2233,7 @@ var FauxInput = React.forwardRef(function (_ref, ref) {
   var onBlurHandler = containerUtilities.composeEventHandlers(onBlur, function () {
     setIsFocused(false);
   });
-  return React__default['default'].createElement(StyledTextFauxInput, _extends$8({
+  return React__default['default'].createElement(StyledTextFauxInput, _extends$f({
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
     isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
@@ -2061,10 +2256,10 @@ FauxInput.propTypes = {
   validation: PropTypes__default['default'].oneOf(['success', 'warning', 'error'])
 };
 
-var _excluded$6 = ["disabled"];
+var _excluded$7 = ["disabled"];
 var Select = React__default['default'].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$7);
   var fieldContext = useFieldContext();
   var selectRef = containerUtilities.useCombinedRefs(ref);
   var combinedProps = _objectSpread2({
@@ -2087,7 +2282,7 @@ Select.propTypes = {
   validation: PropTypes__default['default'].oneOf(['success', 'warning', 'error'])
 };
 
-var _excluded$5 = ["min", "max", "minValue", "maxValue", "disabled", "step", "onChange", "theme", "onMouseDown"];
+var _excluded$6 = ["min", "max", "minValue", "maxValue", "disabled", "step", "onChange", "theme", "onMouseDown"];
 var MultiThumbRange = function MultiThumbRange(_ref) {
   var min = _ref.min,
       max = _ref.max,
@@ -2098,7 +2293,7 @@ var MultiThumbRange = function MultiThumbRange(_ref) {
       onChange = _ref.onChange,
       theme = _ref.theme,
       onMouseDown = _ref.onMouseDown,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$6);
   var themedDocument = reactTheming.useDocument(theme);
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2328,7 +2523,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$8({
+  return React__default['default'].createElement(StyledSlider, _extends$f({
     isDisabled: disabled,
     onMouseDown: onSliderMouseDown
   }, props), React__default['default'].createElement(StyledSliderTrack, {
@@ -2409,12 +2604,12 @@ var useTilesContext = function useTilesContext() {
   return React.useContext(TilesContext);
 };
 
-var _excluded$4 = ["children", "value", "disabled"];
+var _excluded$5 = ["children", "value", "disabled"];
 var Tile = React__default['default'].forwardRef(function (_ref, ref) {
   var children = _ref.children,
       value = _ref.value,
       disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$5);
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isFocused = _useState2[0],
@@ -2429,13 +2624,13 @@ var Tile = React__default['default'].forwardRef(function (_ref, ref) {
       onChange: tilesContext.onChange
     };
   }
-  return React__default['default'].createElement(StyledTile, _extends$8({
+  return React__default['default'].createElement(StyledTile, _extends$f({
     ref: ref,
     "aria-disabled": disabled,
     isDisabled: disabled,
     isFocused: isFocused,
     isSelected: tilesContext && tilesContext.value === value
-  }, props), children, React__default['default'].createElement(StyledTileInput, _extends$8({}, inputProps, {
+  }, props), children, React__default['default'].createElement(StyledTileInput, _extends$f({}, inputProps, {
     disabled: disabled,
     value: value,
     onBlur: function onBlur() {
@@ -2461,7 +2656,7 @@ Tile.propTypes = {
 
 var Description = React__default['default'].forwardRef(function (props, ref) {
   var tilesContext = useTilesContext();
-  return React__default['default'].createElement(StyledTileDescription, _extends$8({
+  return React__default['default'].createElement(StyledTileDescription, _extends$f({
     ref: ref,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
@@ -2470,7 +2665,7 @@ Description.displayName = 'TileDescription';
 
 var Icon = React__default['default'].forwardRef(function (props, ref) {
   var tileContext = useTilesContext();
-  return React__default['default'].createElement(StyledTileIcon, _extends$8({
+  return React__default['default'].createElement(StyledTileIcon, _extends$f({
     ref: ref,
     isCentered: tileContext && tileContext.isCentered
   }, props));
@@ -2489,7 +2684,7 @@ var Label = React__default['default'].forwardRef(function (props, forwardedRef)
       setTitle(ref.current.textContent || undefined);
     }
   }, [ref]);
-  return React__default['default'].createElement(StyledTileLabel, _extends$8({
+  return React__default['default'].createElement(StyledTileLabel, _extends$f({
     ref: ref,
     title: title,
     isCentered: tilesContext && tilesContext.isCentered
@@ -2497,13 +2692,13 @@ var Label = React__default['default'].forwardRef(function (props, forwardedRef)
 });
 Label.displayName = 'TileLabel';
 
-var _excluded$3 = ["onChange", "value", "name", "isCentered"];
+var _excluded$4 = ["onChange", "value", "name", "isCentered"];
 var Tiles = React__default['default'].forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
       controlledValue = _ref.value,
       name = _ref.name,
       isCentered = _ref.isCentered,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$4);
   var _useState = React.useState(controlledValue),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
@@ -2528,7 +2723,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$8({
+  }, React__default['default'].createElement("div", _extends$f({
     ref: ref,
     role: "radiogroup"
   }, props)));
@@ -2548,10 +2743,10 @@ Tiles.defaultProps = {
   isCentered: true
 };
 
-var _excluded$2 = ["isCompact"];
+var _excluded$3 = ["isCompact"];
 var InputGroup = React__default['default'].forwardRef(function (_ref, ref) {
   var isCompact = _ref.isCompact,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$3);
   var contextValue = React.useMemo(function () {
     return {
       isCompact: isCompact
@@ -2559,7 +2754,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$8({
+  }, React__default['default'].createElement(StyledInputGroup, _extends$f({
     ref: ref,
     isCompact: isCompact
   }, props)));
@@ -2569,11 +2764,11 @@ InputGroup.propTypes = {
   isCompact: PropTypes__default['default'].bool
 };
 
-var _excluded$1 = ["disabled"];
+var _excluded$2 = ["disabled"];
 var FileUpload = React__default['default'].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  return React__default['default'].createElement(StyledFileUpload, _extends$8({
+      props = _objectWithoutProperties(_ref, _excluded$2);
+  return React__default['default'].createElement(StyledFileUpload, _extends$f({
     ref: ref,
     "aria-disabled": disabled
   }, props));
@@ -2585,6 +2780,225 @@ 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, {
+    ref: ref
+  }));
+});
+Item.displayName = 'Item';
+
+var FileList = React.forwardRef(function (_ref, ref) {
+  var props = _extends$f({}, _ref);
+  return React__default['default'].createElement(StyledFileList, _extends$f({}, 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); }
+
+var _ref$6 = /*#__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({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$6);
+}
+
+var Close = React__default['default'].forwardRef(function (props, ref) {
+  return React__default['default'].createElement(StyledFileClose, _extends$f({
+    ref: ref
+  }, props), React__default['default'].createElement(SvgXStroke, null));
+});
+Close.displayName = '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); }
+
+var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M14.5 4.2V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.85a.5.5 0 01.36.15l3.15 3.2a.5.5 0 01.14.35zm-10 8.3h7m-7-2h7m-1-10V4a.5.5 0 00.5.5h3.5"
+});
+
+var _ref2$1 = /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 8,
+  height: 2,
+  x: 4,
+  y: 7,
+  fill: "currentColor",
+  rx: 0.5,
+  ry: 0.5
+});
+
+function SvgFilePdfStroke(props) {
+  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$5, _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); }
+
+var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.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 SvgFileZipStroke(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: "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.5m-11 9l2.65-2.65c.2-.2.51-.2.71 0l1.79 1.79c.2.2.51.2.71 0l.79-.79c.2-.2.51-.2.71 0l1.65 1.65"
+});
+
+var _ref2 = /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 10.5,
+  cy: 8.5,
+  r: 1.5,
+  fill: "currentColor"
+});
+
+function SvgFileImageStroke(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, _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); }
+
+var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M4.5 7.5h7m-7 1.97h7m-7 2h7m3-7.27V15c0 .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 SvgFileDocumentStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$2);
+}
+
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+
+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"
+});
+
+function SvgFileSpreadsheetStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref$1);
+}
+
+function _extends() { _extends = 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.apply(this, arguments); }
+
+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"
+});
+
+function SvgFilePresentationStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    focusable: "false",
+    role: "presentation"
+  }, props), _ref);
+}
+
+var FileType;
+(function (FileType) {
+  FileType["pdf"] = "pdf";
+  FileType["zip"] = "zip";
+  FileType["image"] = "image";
+  FileType["document"] = "document";
+  FileType["spreadsheet"] = "spreadsheet";
+  FileType["presentation"] = "presentation";
+})(FileType || (FileType = {}));
+var ARRAY_FILE_TYPE = _toConsumableArray(Object.values(FileType));
+var fileIcons = {
+  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"];
+var File = React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      type = _ref.type,
+      focusInset = _ref.focusInset,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+  return React__default['default'].createElement(StyledFile, _extends$f({}, props, {
+    focusInset: focusInset,
+    ref: ref
+  }), type && React__default['default'].createElement(StyledFileIcon, null, fileIcons[type]), 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.propTypes = {
+  focusInset: PropTypes__default['default'].bool,
+  isCompact: PropTypes__default['default'].bool,
+  type: PropTypes__default['default'].oneOf(ARRAY_FILE_TYPE)
+};
+
 var _excluded = ["start", "end", "disabled", "isCompact", "isBare", "focusInset", "readOnly", "validation", "wrapperProps", "wrapperRef", "onSelect"],
     _excluded2 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut"];
 var MediaInput = React__default['default'].forwardRef(function (_ref, ref) {
@@ -2648,7 +3062,7 @@ var MediaInput = React__default['default'].forwardRef(function (_ref, ref) {
     });
     isLabelHovered = fieldContext.isLabelHovered;
   }
-  return React__default['default'].createElement(FauxInput, _extends$8({
+  return React__default['default'].createElement(FauxInput, _extends$f({
     tabIndex: null,
     onClick: onFauxInputClickHandler,
     onFocus: onFauxInputFocusHandler,
@@ -2690,6 +3104,8 @@ exports.Checkbox = Checkbox;
 exports.FauxInput = FauxInput;
 exports.Field = Field;
 exports.Fieldset = Fieldset;
+exports.File = File;
+exports.FileList = FileList;
 exports.FileUpload = FileUpload;
 exports.Hint = Hint;
 exports.Input = Input;