npm - @zendeskgarden/react-forms - Versions diffs - 8.62.1 → 8.63.0 - Mend

@zendeskgarden/react-forms 8.62.1 → 8.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/index.cjs.js +313 -391
package/dist/index.esm.js +96 -171
package/dist/typings/elements/FileUpload.d.ts +3 -0
package/dist/typings/elements/file-list/components/Close.d.ts +2 -2
package/dist/typings/elements/file-list/components/Delete.d.ts +2 -2
package/dist/typings/styled/file-list/StyledFileClose.d.ts +1 -1
package/dist/typings/styled/file-list/StyledFileDelete.d.ts +1 -1
package/dist/typings/types/index.d.ts +3 -3
package/dist/typings/utils/useInputContext.d.ts +1 -1
package/package.json +4 -4

package/dist/index.cjs.js CHANGED Viewed

@@ -7,8 +7,6 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var containerField = require('@zendeskgarden/container-field');
 var styled = require('styled-components');
@@ -20,7 +18,7 @@ var mergeRefs = require('react-merge-refs');
 var debounce = require('lodash.debounce');
 var containerSlider = require('@zendeskgarden/container-slider');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -36,16 +34,15 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 function _extends$t() {
   _extends$t = Object.assign ? Object.assign.bind() : function (target) {
@@ -69,9 +66,9 @@ const useFieldContext = () => {
 };
 const COMPONENT_ID$K = 'forms.field';
-const StyledField = styled__default["default"].div.attrs({
+const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -81,10 +78,10 @@ StyledField.defaultProps = {
 };
 const COMPONENT_ID$J = 'forms.fieldset';
-const StyledFieldset = styled__default["default"](StyledField).attrs({
+const StyledFieldset = styled__default.default(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -94,9 +91,9 @@ StyledFieldset.defaultProps = {
 };
 const COMPONENT_ID$I = 'forms.input_label';
-const StyledLabel = styled__default["default"].label.attrs({
+const StyledLabel = styled__default.default.label.attrs({
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -106,10 +103,10 @@ StyledLabel.defaultProps = {
 };
 const COMPONENT_ID$H = 'forms.fieldset_legend';
-const StyledLegend = styled__default["default"](StyledLabel).attrs({
+const StyledLegend = styled__default.default(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -119,9 +116,9 @@ StyledLegend.defaultProps = {
 };
 const COMPONENT_ID$G = 'forms.input_hint';
-const StyledHint = styled__default["default"].div.attrs({
+const StyledHint = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -131,9 +128,7 @@ StyledHint.defaultProps = {
 };
 var _g$2, _circle$5;
 function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
@@ -141,8 +136,7 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -162,9 +156,7 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
 };
 var _path$n, _circle$4;
 function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
@@ -172,8 +164,7 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -188,9 +179,7 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
 };
 var _g$1;
 function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
@@ -198,8 +187,7 @@ var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -222,20 +210,20 @@ const MessageIcon = _ref => {
   } = _ref;
   let retVal;
   if (validation === 'error') {
-    retVal = React__default["default"].createElement(SvgAlertErrorStroke, props);
+    retVal = React__namespace.default.createElement(SvgAlertErrorStroke, props);
   } else if (validation === 'success') {
-    retVal = React__default["default"].createElement(SvgCheckCircleStroke$1, props);
+    retVal = React__namespace.default.createElement(SvgCheckCircleStroke$1, props);
   } else if (validation === 'warning') {
-    retVal = React__default["default"].createElement(SvgAlertWarningStroke, props);
+    retVal = React__namespace.default.createElement(SvgAlertWarningStroke, props);
   } else {
-    retVal = React__default["default"].cloneElement(React.Children.only(children));
+    retVal = React__namespace.default.cloneElement(React.Children.only(children));
   }
   return retVal;
 };
 const COMPONENT_ID$F = 'forms.input_message_icon';
-const StyledMessageIcon = styled__default["default"](MessageIcon).attrs({
+const StyledMessageIcon = styled__default.default(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
@@ -261,9 +249,9 @@ const validationStyles = props => {
   return styled.css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
 };
 const COMPONENT_ID$E = 'forms.input_message';
-const StyledMessage = styled__default["default"].div.attrs({
+const StyledMessage = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -340,9 +328,9 @@ const sizeStyles$f = props => {
   const swatchMarginHorizontal = polished.math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
   return styled.css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, reactTheming.getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, polished.math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
 };
-const StyledTextInput = styled__default["default"].input.attrs(props => ({
+const StyledTextInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -362,10 +350,10 @@ const hiddenStyles = `
   left: 0;
   transform: translateZ(0);
 `;
-const StyledTextarea = styled__default["default"](StyledTextInput).attrs({
+const StyledTextarea = styled__default.default(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -396,7 +384,7 @@ const sizeStyles$e = props => {
   }
   return styled.css(["margin:", ";width:", ";height:", ";"], margin, size, size);
 };
-const StyledTextMediaFigure = styled__default["default"](
+const StyledTextMediaFigure = styled__default.default(
 _ref => {
   let {
     children,
@@ -408,10 +396,10 @@ _ref => {
     theme,
     ...props
   } = _ref;
-  return React__default["default"].cloneElement(React.Children.only(children), props);
+  return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -421,12 +409,12 @@ StyledTextMediaFigure.defaultProps = {
 };
 const COMPONENT_ID$A = 'forms.faux_input';
-const StyledTextFauxInput = styled__default["default"](StyledTextInput).attrs(props => ({
+const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props => ({
   as: 'div',
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -436,9 +424,9 @@ StyledTextFauxInput.defaultProps = {
 };
 const COMPONENT_ID$z = 'forms.media_input';
-const StyledTextMediaInput = styled__default["default"](StyledTextInput).attrs({
+const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -459,9 +447,9 @@ const itemStyles = props => {
   const 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');
 };
-const StyledInputGroup = styled__default["default"].div.attrs({
+const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -477,9 +465,9 @@ const sizeStyles$d = props => {
   const 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);
 };
-const StyledRadioLabel = styled__default["default"](StyledLabel).attrs({
+const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -490,9 +478,9 @@ StyledRadioLabel.defaultProps = {
 };
 const COMPONENT_ID$w = 'forms.checkbox_label';
-const StyledCheckLabel = styled__default["default"](StyledRadioLabel).attrs({
+const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -502,9 +490,9 @@ StyledCheckLabel.defaultProps = {
 };
 const COMPONENT_ID$v = 'forms.radio_hint';
-const StyledRadioHint = styled__default["default"](StyledHint).attrs({
+const StyledRadioHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -514,9 +502,9 @@ StyledRadioHint.defaultProps = {
 };
 const COMPONENT_ID$u = 'forms.checkbox_hint';
-const StyledCheckHint = styled__default["default"](StyledRadioHint).attrs({
+const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -556,9 +544,9 @@ const sizeStyles$c = props => {
   const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
   return styled.css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
 };
-const StyledRadioInput = styled__default["default"].input.attrs({
+const StyledRadioInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -578,9 +566,9 @@ const colorStyles$8 = props => {
   const indeterminateDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
   return styled.css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled:indeterminate ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledCheckLabel, indeterminateBorderColor, indeterminateBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
 };
-const StyledCheckInput = styled__default["default"](StyledRadioInput).attrs({
+const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -591,9 +579,9 @@ StyledCheckInput.defaultProps = {
 };
 const COMPONENT_ID$r = 'forms.radio_message';
-const StyledRadioMessage = styled__default["default"](StyledMessage).attrs({
+const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -603,9 +591,9 @@ StyledRadioMessage.defaultProps = {
 };
 const COMPONENT_ID$q = 'forms.checkbox_message';
-const StyledCheckMessage = styled__default["default"](StyledRadioMessage).attrs({
+const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -615,9 +603,7 @@ StyledCheckMessage.defaultProps = {
 };
 var _path$m;
 function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 var SvgCheckSmFill = function SvgCheckSmFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
@@ -625,8 +611,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -638,9 +623,9 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 };
 const COMPONENT_ID$p = 'forms.check_svg';
-const StyledCheckSvg = styled__default["default"](SvgCheckSmFill).attrs({
+const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -650,9 +635,7 @@ StyledCheckSvg.defaultProps = {
 };
 var _path$l;
 function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 var SvgDashFill = function SvgDashFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
@@ -660,8 +643,7 @@ var SvgDashFill = function SvgDashFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -671,9 +653,9 @@ var SvgDashFill = function SvgDashFill(props) {
 };
 const COMPONENT_ID$o = 'forms.dash_svg';
-const StyledDashSvg = styled__default["default"](SvgDashFill).attrs({
+const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -700,9 +682,9 @@ const sizeStyles$b = props => {
   const lineHeight = reactTheming.getLineHeight(props.theme.space.base * 5, fontSize);
   return styled.css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
-const StyledFileUpload = styled__default["default"].div.attrs({
+const StyledFileUpload = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -712,13 +694,13 @@ StyledFileUpload.defaultProps = {
 };
 const COMPONENT_ID$m = 'forms.file.close';
-const StyledFileClose = styled__default["default"].div.attrs({
+const StyledFileClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).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;color:", ";&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => props.theme.colors.foreground, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => props.theme.colors.foreground, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledFileClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -779,9 +761,9 @@ const sizeStyles$a = props => {
     }
   `;
 };
-const StyledFile = styled__default["default"].div.attrs({
+const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -791,9 +773,9 @@ StyledFile.defaultProps = {
 };
 const COMPONENT_ID$k = 'forms.file.delete';
-const StyledFileDelete = styled__default["default"](StyledFileClose).attrs({
+const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -803,17 +785,17 @@ StyledFileDelete.defaultProps = {
 };
 const COMPONENT_ID$j = 'forms.file.icon';
-const StyledFileIcon = styled__default["default"](_ref => {
+const StyledFileIcon = styled__default.default(_ref => {
   let {
     children,
     isCompact,
     theme,
     ...props
   } = _ref;
-  return React__default["default"].cloneElement(React.Children.only(children), props);
+  return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -823,9 +805,9 @@ StyledFileIcon.defaultProps = {
 };
 const COMPONENT_ID$i = 'forms.file_list';
-const StyledFileList = styled__default["default"].ul.attrs({
+const StyledFileList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -835,9 +817,9 @@ StyledFileList.defaultProps = {
 };
 const COMPONENT_ID$h = 'forms.file_list.item';
-const StyledFileListItem = styled__default["default"].li.attrs({
+const StyledFileListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -847,9 +829,7 @@ StyledFileListItem.defaultProps = {
 };
 var _circle$3;
 function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
@@ -857,8 +837,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _circle$3 || (_circle$3 = /*#__PURE__*/React__namespace.createElement("circle", {
     cx: 6,
     cy: 6,
@@ -868,9 +847,9 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 };
 const COMPONENT_ID$g = 'forms.radio_svg';
-const StyledRadioSvg = styled__default["default"](SvgCircleSmFill$1).attrs({
+const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -885,9 +864,9 @@ const sizeStyles$9 = props => {
   const padding = size + props.theme.space.base * 2;
   return styled.css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
 };
-const StyledToggleLabel = styled__default["default"](StyledCheckLabel).attrs({
+const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -897,9 +876,9 @@ StyledToggleLabel.defaultProps = {
 };
 const COMPONENT_ID$e = 'forms.toggle_hint';
-const StyledToggleHint = styled__default["default"](StyledHint).attrs({
+const StyledToggleHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -924,9 +903,9 @@ const sizeStyles$8 = props => {
   const checkedIconPosition = polished.math(`${width} - ${iconSize} - ${iconPosition}`);
   return styled.css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
 };
-const StyledToggleInput = styled__default["default"](StyledCheckInput).attrs({
+const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -936,9 +915,9 @@ StyledToggleInput.defaultProps = {
 };
 const COMPONENT_ID$c = 'forms.toggle_message';
-const StyledToggleMessage = styled__default["default"](StyledMessage).attrs({
+const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -948,9 +927,7 @@ StyledToggleMessage.defaultProps = {
 };
 var _circle$2;
 function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgCircleSmFill = function SvgCircleSmFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
@@ -958,8 +935,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
     cx: 8,
     cy: 8,
@@ -969,9 +945,9 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 };
 const COMPONENT_ID$b = 'forms.toggle_svg';
-const StyledToggleSvg = styled__default["default"](SvgCircleSmFill).attrs({
+const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -991,9 +967,9 @@ const sizeStyles$7 = props => {
   const iconHorizontalPosition = `${props.theme.space.base * 3}px`;
   return styled.css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition);
 };
-const StyledSelect = styled__default["default"](StyledTextInput).attrs({
+const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1004,9 +980,9 @@ StyledSelect.defaultProps = {
 };
 const COMPONENT_ID$9 = 'forms.select_wrapper';
-const StyledSelectWrapper = styled__default["default"](StyledTextFauxInput).attrs({
+const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1128,9 +1104,9 @@ const sizeStyles$6 = props => {
       height: ${trackHeight};
     `));
 };
-const StyledRangeInput = styled__default["default"].input.attrs(props => ({
+const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1161,9 +1137,9 @@ StyledRangeInput.defaultProps = {
 };
 const COMPONENT_ID$7 = 'forms.slider';
-const StyledSlider = styled__default["default"].div.attrs({
+const StyledSlider = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSlider",
   componentId: "sc-1di437a-0"
@@ -1192,9 +1168,9 @@ const sizeStyles$5 = props => {
   const marginTop = polished.math(`${size} / -2`);
   return styled.css(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size);
 };
-const StyledSliderThumb = styled__default["default"].div.attrs(props => ({
+const StyledSliderThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'aria-disabled': props.isDisabled
 })).withConfig({
   displayName: "StyledSliderThumb",
@@ -1222,9 +1198,9 @@ const sizeStyles$4 = props => {
   const padding = polished.math(`${props.theme.space.base} * 2.5px`);
   return styled.css(["margin-top:", ";border-radius:", ";background-position:", ";background-size:", ";padding:0 ", ";"], marginTop, borderRadius, backgroundPosition, backgroundSize, padding);
 };
-const StyledSliderTrack = styled__default["default"].div.attrs(props => ({
+const StyledSliderTrack = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'aria-disabled': props.isDisabled
 })).withConfig({
   displayName: "StyledSliderTrack",
@@ -1242,9 +1218,9 @@ const sizeStyles$3 = props => {
   const margin = polished.math(`${props.theme.space.base} * 2.5px`);
   return styled.css(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? `-${margin}` : margin, props.theme.rtl ? margin : `-${margin}`, height);
 };
-const StyledSliderTrackRail = styled__default["default"].div.attrs({
+const StyledSliderTrackRail = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1269,9 +1245,9 @@ const sizeStyles$2 = props => {
   }
   return styled.css(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize);
 };
-const StyledTileIcon = styled__default["default"].span.attrs({
+const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1304,9 +1280,9 @@ const colorStyles = props => {
   const selectedDisabledBackgroundColor = disabledBorderColor;
   return styled.css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:focus{outline:none;}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-focus-visible='true']{border-color:", ";box-shadow:", ";}&:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, reactTheming.getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusBorderColor, focusBoxShadow, activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedHoverBorderColor, selectedHoverBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedActiveBorderColor, selectedActiveBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
 };
-const StyledTile = styled__default["default"].label.attrs(props => ({
+const StyledTile = styled__default.default.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-garden-focus-visible': props.isFocused,
   'data-garden-selected': props.isSelected
 })).withConfig({
@@ -1329,9 +1305,9 @@ const sizeStyles$1 = props => {
   }
   return styled.css(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue);
 };
-const StyledTileDescription = styled__default["default"].span.attrs({
+const StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1340,7 +1316,7 @@ StyledTileDescription.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledTileInput = styled__default["default"].input.withConfig({
+const StyledTileInput = styled__default.default.input.withConfig({
   displayName: "StyledTileInput",
   componentId: "sc-1nq2m6q-0"
 })(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
@@ -1362,9 +1338,9 @@ const sizeStyles = props => {
   }
   return styled.css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
 };
-const StyledTileLabel = styled__default["default"].span.attrs({
+const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1373,7 +1349,7 @@ StyledTileLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const Field = React__default["default"].forwardRef((props, ref) => {
+const Field = React__namespace.default.forwardRef((props, ref) => {
   const [hasHint, setHasHint] = React.useState(false);
   const [hasMessage, setHasMessage] = React.useState(false);
   const [isLabelActive, setIsLabelActive] = React.useState(false);
@@ -1408,9 +1384,9 @@ const Field = React__default["default"].forwardRef((props, ref) => {
     setHasMessage,
     multiThumbRangeRef
   }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
-  return React__default["default"].createElement(FieldContext.Provider, {
+  return React__namespace.default.createElement(FieldContext.Provider, {
     value: fieldProps
-  }, React__default["default"].createElement(StyledField, _extends$t({}, props, {
+  }, React__namespace.default.createElement(StyledField, _extends$t({}, props, {
     ref: ref
   })));
 });
@@ -1424,7 +1400,7 @@ const useFieldsetContext = () => {
 const LegendComponent = React.forwardRef((props, ref) => {
   const fieldsetContext = useFieldsetContext();
-  return React__default["default"].createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
+  return React__namespace.default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
     ref: ref
   }));
 });
@@ -1435,15 +1411,15 @@ const FieldsetComponent = React.forwardRef((props, ref) => {
   const fieldsetContext = React.useMemo(() => ({
     isCompact: props.isCompact
   }), [props.isCompact]);
-  return React__default["default"].createElement(FieldsetContext.Provider, {
+  return React__namespace.default.createElement(FieldsetContext.Provider, {
     value: fieldsetContext
-  }, React__default["default"].createElement(StyledFieldset, _extends$t({}, props, {
+  }, React__namespace.default.createElement(StyledFieldset, _extends$t({}, props, {
     ref: ref
   })));
 });
 FieldsetComponent.displayName = 'Fieldset';
 FieldsetComponent.propTypes = {
-  isCompact: PropTypes__default["default"].bool
+  isCompact: PropTypes__default.default.bool
 };
 const Fieldset = FieldsetComponent;
 Fieldset.Legend = Legend;
@@ -1453,7 +1429,7 @@ const useInputContext = () => {
   return React.useContext(InputContext);
 };
-const Hint = React__default["default"].forwardRef((props, ref) => {
+const Hint = React__namespace.default.forwardRef((props, ref) => {
   const {
     hasHint,
     setHasHint,
@@ -1484,13 +1460,13 @@ const Hint = React__default["default"].forwardRef((props, ref) => {
   if (getHintProps) {
     combinedProps = getHintProps(combinedProps);
   }
-  return React__default["default"].createElement(HintComponent, _extends$t({
+  return React__namespace.default.createElement(HintComponent, _extends$t({
     ref: ref
   }, combinedProps));
 });
 Hint.displayName = 'Hint';
-const Label$1 = React__default["default"].forwardRef((props, ref) => {
+const Label$1 = React__namespace.default.forwardRef((props, ref) => {
   const fieldContext = useFieldContext();
   const fieldsetContext = useFieldsetContext();
   const type = useInputContext();
@@ -1530,9 +1506,9 @@ const Label$1 = React__default["default"].forwardRef((props, ref) => {
     };
   }
   if (type === 'radio') {
-    return React__default["default"].createElement(StyledRadioLabel, _extends$t({
+    return React__namespace.default.createElement(StyledRadioLabel, _extends$t({
       ref: ref
-    }, combinedProps), React__default["default"].createElement(StyledRadioSvg, null), props.children);
+    }, combinedProps), React__namespace.default.createElement(StyledRadioSvg, null), props.children);
   } else if (type === 'checkbox') {
     const onLabelSelect = e => {
       const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
@@ -1553,28 +1529,28 @@ const Label$1 = React__default["default"].forwardRef((props, ref) => {
       ...combinedProps,
       onClick: containerUtilities.composeEventHandlers(combinedProps.onClick, onLabelSelect)
     };
-    return React__default["default"].createElement(StyledCheckLabel, _extends$t({
+    return React__namespace.default.createElement(StyledCheckLabel, _extends$t({
       ref: ref
-    }, combinedProps), React__default["default"].createElement(StyledCheckSvg, null), React__default["default"].createElement(StyledDashSvg, null), props.children);
+    }, combinedProps), React__namespace.default.createElement(StyledCheckSvg, null), React__namespace.default.createElement(StyledDashSvg, null), props.children);
   } else if (type === 'toggle') {
-    return React__default["default"].createElement(StyledToggleLabel, _extends$t({
+    return React__namespace.default.createElement(StyledToggleLabel, _extends$t({
       ref: ref
-    }, combinedProps), React__default["default"].createElement(StyledToggleSvg, null), props.children);
+    }, combinedProps), React__namespace.default.createElement(StyledToggleSvg, null), props.children);
   }
-  return React__default["default"].createElement(StyledLabel, _extends$t({
+  return React__namespace.default.createElement(StyledLabel, _extends$t({
     ref: ref
   }, combinedProps));
 });
 Label$1.displayName = 'Label';
 Label$1.propTypes = {
-  isRegular: PropTypes__default["default"].bool
+  isRegular: PropTypes__default.default.bool
 };
 const VALIDATION = ['success', 'warning', 'error'];
 const FILE_VALIDATION = ['success', 'error'];
 const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
-const Message = React__default["default"].forwardRef((_ref, ref) => {
+const Message = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     validation,
     validationLabel,
@@ -1616,20 +1592,20 @@ const Message = React__default["default"].forwardRef((_ref, ref) => {
     combinedProps = getMessageProps(combinedProps);
   }
   const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation);
-  return React__default["default"].createElement(MessageComponent, _extends$t({
+  return React__namespace.default.createElement(MessageComponent, _extends$t({
     ref: ref
-  }, combinedProps), validation && React__default["default"].createElement(StyledMessageIcon, {
+  }, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
     validation: validation,
     "aria-label": ariaLabel
   }), children);
 });
 Message.displayName = 'Message';
 Message.propTypes = {
-  validation: PropTypes__default["default"].oneOf(VALIDATION),
-  validationLabel: PropTypes__default["default"].string
+  validation: PropTypes__default.default.oneOf(VALIDATION),
+  validationLabel: PropTypes__default.default.string
 };
-const Checkbox = React__default["default"].forwardRef((_ref, ref) => {
+const Checkbox = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     indeterminate,
     children,
@@ -1659,14 +1635,14 @@ const Checkbox = React__default["default"].forwardRef((_ref, ref) => {
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
-  return React__default["default"].createElement(InputContext.Provider, {
+  return React__namespace.default.createElement(InputContext.Provider, {
     value: "checkbox"
-  }, React__default["default"].createElement(StyledCheckInput, combinedProps), children);
+  }, React__namespace.default.createElement(StyledCheckInput, combinedProps), children);
 });
 Checkbox.displayName = 'Checkbox';
 Checkbox.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  indeterminate: PropTypes__default["default"].bool
+  isCompact: PropTypes__default.default.bool,
+  indeterminate: PropTypes__default.default.bool
 };
 const InputGroupContext = React.createContext(undefined);
@@ -1674,7 +1650,7 @@ const useInputGroupContext = () => {
   return React.useContext(InputGroupContext);
 };
-const Input = React__default["default"].forwardRef((_ref, ref) => {
+const Input = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     onSelect,
     ...props
@@ -1699,17 +1675,17 @@ const Input = React__default["default"].forwardRef((_ref, ref) => {
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
-  return React__default["default"].createElement(StyledTextInput, combinedProps);
+  return React__namespace.default.createElement(StyledTextInput, combinedProps);
 });
 Input.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  validation: PropTypes__default["default"].oneOf(VALIDATION)
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  validation: PropTypes__default.default.oneOf(VALIDATION)
 };
 Input.displayName = 'Input';
-const Radio = React__default["default"].forwardRef((_ref, ref) => {
+const Radio = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
     ...props
@@ -1724,16 +1700,16 @@ const Radio = React__default["default"].forwardRef((_ref, ref) => {
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
-  return React__default["default"].createElement(InputContext.Provider, {
+  return React__namespace.default.createElement(InputContext.Provider, {
     value: "radio"
-  }, React__default["default"].createElement(StyledRadioInput, combinedProps), children);
+  }, React__namespace.default.createElement(StyledRadioInput, combinedProps), children);
 });
 Radio.displayName = 'Radio';
 Radio.propTypes = {
-  isCompact: PropTypes__default["default"].bool
+  isCompact: PropTypes__default.default.bool
 };
-const Range = React__default["default"].forwardRef((_ref, ref) => {
+const Range = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     hasLowerTrack,
     min,
@@ -1763,7 +1739,7 @@ const Range = React__default["default"].forwardRef((_ref, ref) => {
     updateBackgroundWidthFromInput(event.target);
   }) : props.onChange;
   let combinedProps = {
-    ref: mergeRefs__default["default"]([rangeRef, ref]),
+    ref: mergeRefs__default.default([rangeRef, ref]),
     hasLowerTrack,
     min,
     max,
@@ -1777,7 +1753,7 @@ const Range = React__default["default"].forwardRef((_ref, ref) => {
       isDescribed: true
     });
   }
-  return React__default["default"].createElement(StyledRangeInput, combinedProps);
+  return React__namespace.default.createElement(StyledRangeInput, combinedProps);
 });
 Range.defaultProps = {
   hasLowerTrack: true,
@@ -1790,7 +1766,7 @@ Range.displayName = 'Range';
 const parseStyleValue = value => {
   return parseInt(value, 10) || 0;
 };
-const Textarea = React__default["default"].forwardRef((_ref, ref) => {
+const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     minRows,
     maxRows,
@@ -1859,7 +1835,7 @@ const Textarea = React__default["default"].forwardRef((_ref, ref) => {
     }
     if (environment) {
       const win = environment.defaultView || window;
-      const resizeHandler = debounce__default["default"](calculateHeight);
+      const resizeHandler = debounce__default.default(calculateHeight);
       win.addEventListener('resize', resizeHandler);
       return () => {
         resizeHandler.cancel();
@@ -1880,7 +1856,7 @@ const Textarea = React__default["default"].forwardRef((_ref, ref) => {
     event.currentTarget.select();
   }) : onSelect;
   let combinedProps = {
-    ref: mergeRefs__default["default"]([textAreaRef, ref]),
+    ref: mergeRefs__default.default([textAreaRef, ref]),
     rows: minRows,
     onChange: onChangeHandler,
     onSelect: onSelectHandler,
@@ -1895,7 +1871,7 @@ const Textarea = React__default["default"].forwardRef((_ref, ref) => {
       isDescribed: true
     });
   }
-  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(StyledTextarea, combinedProps), isAutoResizable && React__default["default"].createElement(StyledTextarea, {
+  return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__namespace.default.createElement(StyledTextarea, {
     "aria-hidden": true,
     readOnly: true,
     isHidden: true,
@@ -1908,17 +1884,17 @@ const Textarea = React__default["default"].forwardRef((_ref, ref) => {
   }));
 });
 Textarea.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  isResizable: PropTypes__default["default"].bool,
-  minRows: PropTypes__default["default"].number,
-  maxRows: PropTypes__default["default"].number,
-  validation: PropTypes__default["default"].oneOf(VALIDATION)
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  isResizable: PropTypes__default.default.bool,
+  minRows: PropTypes__default.default.number,
+  maxRows: PropTypes__default.default.number,
+  validation: PropTypes__default.default.oneOf(VALIDATION)
 };
 Textarea.displayName = 'Textarea';
-const Toggle = React__default["default"].forwardRef((_ref, ref) => {
+const Toggle = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
     ...props
@@ -1933,19 +1909,17 @@ const Toggle = React__default["default"].forwardRef((_ref, ref) => {
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
-  return React__default["default"].createElement(InputContext.Provider, {
+  return React__namespace.default.createElement(InputContext.Provider, {
     value: "toggle"
-  }, React__default["default"].createElement(StyledToggleInput, combinedProps), children);
+  }, React__namespace.default.createElement(StyledToggleInput, combinedProps), children);
 });
 Toggle.displayName = 'Toggle';
 Toggle.propTypes = {
-  isCompact: PropTypes__default["default"].bool
+  isCompact: PropTypes__default.default.bool
 };
 var _path$k;
 function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1953,21 +1927,20 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
   })));
 };
-const StartIconComponent = props => React__default["default"].createElement(StyledTextMediaFigure, _extends$t({
+const StartIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, _extends$t({
   position: "start"
 }, props));
 StartIconComponent.displayName = 'FauxInput.StartIcon';
 const StartIcon = StartIconComponent;
-const EndIconComponent = props => React__default["default"].createElement(StyledTextMediaFigure, _extends$t({
+const EndIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, _extends$t({
   position: "end"
 }, props));
 EndIconComponent.displayName = 'FauxInput.EndIcon';
@@ -1989,7 +1962,7 @@ const FauxInputComponent = React.forwardRef((_ref, ref) => {
   const onBlurHandler = containerUtilities.composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   });
-  return React__default["default"].createElement(StyledTextFauxInput, _extends$t({
+  return React__namespace.default.createElement(StyledTextFauxInput, _extends$t({
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
     isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
@@ -2002,20 +1975,20 @@ const FauxInputComponent = React.forwardRef((_ref, ref) => {
 });
 FauxInputComponent.displayName = 'FauxInput';
 FauxInputComponent.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  readOnly: PropTypes__default["default"].bool,
-  validation: PropTypes__default["default"].oneOf(VALIDATION),
-  isFocused: PropTypes__default["default"].bool,
-  isHovered: PropTypes__default["default"].bool
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  readOnly: PropTypes__default.default.bool,
+  validation: PropTypes__default.default.oneOf(VALIDATION),
+  isFocused: PropTypes__default.default.bool,
+  isHovered: PropTypes__default.default.bool
 };
 const FauxInput = FauxInputComponent;
 FauxInput.EndIcon = EndIcon;
 FauxInput.StartIcon = StartIcon;
-const Select = React__default["default"].forwardRef((_ref, ref) => {
+const Select = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     disabled,
     isCompact,
@@ -2033,17 +2006,17 @@ const Select = React__default["default"].forwardRef((_ref, ref) => {
       isDescribed: true
     });
   }
-  return React__default["default"].createElement(StyledSelectWrapper, {
+  return React__namespace.default.createElement(StyledSelectWrapper, {
     isCompact: isCompact
-  }, React__default["default"].createElement(StyledSelect, combinedProps), !props.isBare && React__default["default"].createElement(FauxInput.EndIcon, {
+  }, React__namespace.default.createElement(StyledSelect, combinedProps), !props.isBare && React__namespace.default.createElement(FauxInput.EndIcon, {
     isDisabled: disabled
-  }, React__default["default"].createElement(SvgChevronDownStroke, null)));
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null)));
 });
 Select.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  validation: PropTypes__default["default"].oneOf(VALIDATION)
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  validation: PropTypes__default.default.oneOf(VALIDATION)
 };
 Select.displayName = 'Select';
@@ -2109,16 +2082,16 @@ const MultiThumbRange = React.forwardRef((_ref, ref) => {
   const minPosition = (updatedMinValue - min) / (max - min) * trackRect.width;
   const maxPosition = (updatedMaxValue - min) / (max - min) * trackRect.width;
   const sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
-  return React__default["default"].createElement(StyledSlider, _extends$t({
+  return React__namespace.default.createElement(StyledSlider, _extends$t({
     ref: ref,
     onMouseDown: onSliderMouseDown
-  }, props), React__default["default"].createElement(StyledSliderTrack, {
+  }, props), React__namespace.default.createElement(StyledSliderTrack, {
     backgroundSize: sliderBackgroundSize,
     backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition,
     isDisabled: disabled
-  }, React__default["default"].createElement(StyledSliderTrackRail, _extends$t({}, trackProps, {
+  }, React__namespace.default.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, {
     ref: trackRailRef
-  }), React__default["default"].createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({
+  }), React__namespace.default.createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({
     'aria-label': updatedMinValue
   }), {
     isDisabled: disabled,
@@ -2126,7 +2099,7 @@ const MultiThumbRange = React.forwardRef((_ref, ref) => {
     ref: minThumbRef,
     "data-garden-active": isLabelActive,
     "data-garden-hover": isLabelHovered
-  })), React__default["default"].createElement(StyledSliderThumb, _extends$t({}, getMaxThumbProps({
+  })), React__namespace.default.createElement(StyledSliderThumb, _extends$t({}, getMaxThumbProps({
     'aria-label': updatedMaxValue
   }), {
     isDisabled: disabled,
@@ -2136,14 +2109,14 @@ const MultiThumbRange = React.forwardRef((_ref, ref) => {
 });
 MultiThumbRange.displayName = 'MultiThumbRange';
 MultiThumbRange.propTypes = {
-  min: PropTypes__default["default"].number,
-  max: PropTypes__default["default"].number,
-  minValue: PropTypes__default["default"].number,
-  maxValue: PropTypes__default["default"].number,
-  step: PropTypes__default["default"].number,
-  jump: PropTypes__default["default"].number,
-  disabled: PropTypes__default["default"].bool,
-  onChange: PropTypes__default["default"].func
+  min: PropTypes__default.default.number,
+  max: PropTypes__default.default.number,
+  minValue: PropTypes__default.default.number,
+  maxValue: PropTypes__default.default.number,
+  step: PropTypes__default.default.number,
+  jump: PropTypes__default.default.number,
+  disabled: PropTypes__default.default.bool,
+  onChange: PropTypes__default.default.func
 };
 MultiThumbRange.defaultProps = {
   min: MIN,
@@ -2156,7 +2129,7 @@ const useTilesContext = () => {
   return React.useContext(TilesContext);
 };
-const TileComponent = React__default["default"].forwardRef((_ref, ref) => {
+const TileComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     children,
     value,
@@ -2174,13 +2147,13 @@ const TileComponent = React__default["default"].forwardRef((_ref, ref) => {
       onChange: tilesContext.onChange
     };
   }
-  return React__default["default"].createElement(StyledTile, _extends$t({
+  return React__namespace.default.createElement(StyledTile, _extends$t({
     ref: ref,
     "aria-disabled": disabled,
     isDisabled: disabled,
     isFocused: isFocused,
     isSelected: tilesContext && tilesContext.value === value
-  }, props), children, React__default["default"].createElement(StyledTileInput, _extends$t({}, inputProps, {
+  }, props), children, React__namespace.default.createElement(StyledTileInput, _extends$t({}, inputProps, {
     disabled: disabled,
     value: value,
     onBlur: () => setIsFocused(false),
@@ -2198,14 +2171,14 @@ const TileComponent = React__default["default"].forwardRef((_ref, ref) => {
 });
 TileComponent.displayName = 'Tiles.Tile';
 TileComponent.propTypes = {
-  value: PropTypes__default["default"].string,
-  disabled: PropTypes__default["default"].bool
+  value: PropTypes__default.default.string,
+  disabled: PropTypes__default.default.bool
 };
 const Tile = TileComponent;
 const DescriptionComponent = React.forwardRef((props, ref) => {
   const tilesContext = useTilesContext();
-  return React__default["default"].createElement(StyledTileDescription, _extends$t({
+  return React__namespace.default.createElement(StyledTileDescription, _extends$t({
     ref: ref,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
@@ -2215,7 +2188,7 @@ const Description = DescriptionComponent;
 const IconComponent = React.forwardRef((props, ref) => {
   const tileContext = useTilesContext();
-  return React__default["default"].createElement(StyledTileIcon, _extends$t({
+  return React__namespace.default.createElement(StyledTileIcon, _extends$t({
     ref: ref,
     isCentered: tileContext && tileContext.isCentered
   }, props));
@@ -2232,8 +2205,8 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
       setTitle(ref.current.textContent || undefined);
     }
   }, [ref]);
-  return React__default["default"].createElement(StyledTileLabel, _extends$t({
-    ref: mergeRefs__default["default"]([ref, forwardedRef]),
+  return React__namespace.default.createElement(StyledTileLabel, _extends$t({
+    ref: mergeRefs__default.default([ref, forwardedRef]),
     title: title,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
@@ -2266,19 +2239,19 @@ const TilesComponent = React.forwardRef((_ref, ref) => {
     name,
     isCentered
   }), [handleOnChange, selectedValue, name, isCentered]);
-  return React__default["default"].createElement(TilesContext.Provider, {
+  return React__namespace.default.createElement(TilesContext.Provider, {
     value: tileContext
-  }, React__default["default"].createElement("div", _extends$t({
+  }, React__namespace.default.createElement("div", _extends$t({
     ref: ref,
     role: "radiogroup"
   }, props)));
 });
 TilesComponent.displayName = 'Tiles';
 TilesComponent.propTypes = {
-  value: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func,
-  name: PropTypes__default["default"].string.isRequired,
-  isCentered: PropTypes__default["default"].bool
+  value: PropTypes__default.default.string,
+  onChange: PropTypes__default.default.func,
+  name: PropTypes__default.default.string.isRequired,
+  isCentered: PropTypes__default.default.bool
 };
 TilesComponent.defaultProps = {
   isCentered: true
@@ -2289,7 +2262,7 @@ Tiles.Icon = Icon;
 Tiles.Label = Label;
 Tiles.Tile = Tile;
-const InputGroup = React__default["default"].forwardRef((_ref, ref) => {
+const InputGroup = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     isCompact,
     ...props
@@ -2297,32 +2270,36 @@ const InputGroup = React__default["default"].forwardRef((_ref, ref) => {
   const contextValue = React.useMemo(() => ({
     isCompact
   }), [isCompact]);
-  return React__default["default"].createElement(InputGroupContext.Provider, {
+  return React__namespace.default.createElement(InputGroupContext.Provider, {
     value: contextValue
-  }, React__default["default"].createElement(StyledInputGroup, _extends$t({
+  }, React__namespace.default.createElement(StyledInputGroup, _extends$t({
     ref: ref,
     isCompact: isCompact
   }, props)));
 });
 InputGroup.displayName = 'InputGroup';
 InputGroup.propTypes = {
-  isCompact: PropTypes__default["default"].bool
+  isCompact: PropTypes__default.default.bool
 };
-const FileUpload = React__default["default"].forwardRef((_ref, ref) => {
+const FileUpload = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     disabled,
     ...props
   } = _ref;
-  return React__default["default"].createElement(StyledFileUpload, _extends$t({
-    ref: ref,
-    "aria-disabled": disabled
-  }, props));
+  return (
+    React__namespace.default.createElement(StyledFileUpload, _extends$t({
+      ref: ref,
+      "aria-disabled": disabled
+    }, props, {
+      role: "button"
+    }))
+  );
 });
 FileUpload.propTypes = {
-  isDragging: PropTypes__default["default"].bool,
-  isCompact: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool
+  isDragging: PropTypes__default.default.bool,
+  isCompact: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool
 };
 FileUpload.displayName = 'FileUpload';
@@ -2330,7 +2307,7 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
   let {
     ...props
   } = _ref;
-  return React__default["default"].createElement(StyledFileListItem, _extends$t({}, props, {
+  return React__namespace.default.createElement(StyledFileListItem, _extends$t({}, props, {
     ref: ref
   }));
 });
@@ -2341,7 +2318,7 @@ const FileListComponent = React.forwardRef((_ref, ref) => {
   let {
     ...props
   } = _ref;
-  return React__default["default"].createElement(StyledFileList, _extends$t({}, props, {
+  return React__namespace.default.createElement(StyledFileList, _extends$t({}, props, {
     ref: ref
   }));
 });
@@ -2350,9 +2327,7 @@ const FileList = FileListComponent;
 FileList.Item = Item;
 var _path$j;
 function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgXStroke$1 = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2360,8 +2335,7 @@ var SvgXStroke$1 = function SvgXStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2370,9 +2344,7 @@ var SvgXStroke$1 = function SvgXStroke(props) {
 };
 var _path$i;
 function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2380,8 +2352,7 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2394,23 +2365,25 @@ const useFileContext = () => {
   return React.useContext(FileContext);
 };
-const CloseComponent = React__default["default"].forwardRef((props, ref) => {
+const CloseComponent = React__namespace.default.forwardRef((props, ref) => {
   const fileContext = useFileContext();
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.preventDefault()
   );
-  return React__default["default"].createElement(StyledFileClose, _extends$t({
-    ref: ref
+  const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close');
+  return React__namespace.default.createElement(StyledFileClose, _extends$t({
+    ref: ref,
+    "aria-label": ariaLabel
   }, props, {
+    type: "button",
+    tabIndex: -1,
     onMouseDown: onMouseDown
-  }), fileContext && fileContext.isCompact ? React__default["default"].createElement(SvgXStroke$1, null) : React__default["default"].createElement(SvgXStroke, null));
+  }), fileContext && fileContext.isCompact ? React__namespace.default.createElement(SvgXStroke$1, null) : React__namespace.default.createElement(SvgXStroke, null));
 });
 CloseComponent.displayName = 'File.Close';
 const Close = CloseComponent;
 var _path$h;
 function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgTrashStroke$1 = function SvgTrashStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2418,8 +2391,7 @@ var SvgTrashStroke$1 = function SvgTrashStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2429,9 +2401,7 @@ var SvgTrashStroke$1 = function SvgTrashStroke(props) {
 };
 var _path$g;
 function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgTrashStroke = function SvgTrashStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2439,8 +2409,7 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2449,23 +2418,25 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
   })));
 };
-const DeleteComponent = React__default["default"].forwardRef((props, ref) => {
+const DeleteComponent = React__namespace.default.forwardRef((props, ref) => {
   const fileContext = useFileContext();
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.preventDefault()
   );
-  return React__default["default"].createElement(StyledFileDelete, _extends$t({
-    ref: ref
+  const ariaLabel = reactTheming.useText(DeleteComponent, props, 'aria-label', 'Delete');
+  return React__namespace.default.createElement(StyledFileDelete, _extends$t({
+    ref: ref,
+    "aria-label": ariaLabel
   }, props, {
+    type: "button",
+    tabIndex: -1,
     onMouseDown: onMouseDown
-  }), fileContext && fileContext.isCompact ? React__default["default"].createElement(SvgTrashStroke$1, null) : React__default["default"].createElement(SvgTrashStroke, null));
+  }), fileContext && fileContext.isCompact ? React__namespace.default.createElement(SvgTrashStroke$1, null) : React__namespace.default.createElement(SvgTrashStroke, null));
 });
 DeleteComponent.displayName = 'File.Delete';
 const Delete = DeleteComponent;
 var _path$f, _rect$1;
 function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2473,8 +2444,7 @@ var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2492,9 +2462,7 @@ var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) {
 };
 var _path$e;
 function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgFileZipStroke$1 = function SvgFileZipStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2502,8 +2470,7 @@ var SvgFileZipStroke$1 = function SvgFileZipStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2513,9 +2480,7 @@ var SvgFileZipStroke$1 = function SvgFileZipStroke(props) {
 };
 var _path$d, _circle$1;
 function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 var SvgFileImageStroke$1 = function SvgFileImageStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2523,8 +2488,7 @@ var SvgFileImageStroke$1 = function SvgFileImageStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2540,9 +2504,7 @@ var SvgFileImageStroke$1 = function SvgFileImageStroke(props) {
 };
 var _path$c;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2550,8 +2512,7 @@ var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2561,9 +2522,7 @@ var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) {
 };
 var _path$b;
 function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2571,8 +2530,7 @@ var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2582,9 +2540,7 @@ var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) {
 };
 var _path$a;
 function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2592,8 +2548,7 @@ var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2602,9 +2557,7 @@ var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) {
 };
 var _path$9;
 function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2612,8 +2565,7 @@ var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2622,9 +2574,7 @@ var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) {
 };
 var _g;
 function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2632,8 +2582,7 @@ var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -2649,9 +2598,7 @@ var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
 };
 var _path$8;
 function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2659,8 +2606,7 @@ var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2670,9 +2616,7 @@ var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) {
 };
 var _path$7, _rect;
 function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2680,8 +2624,7 @@ var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2699,9 +2642,7 @@ var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
 };
 var _path$6;
 function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 var SvgFileZipStroke = function SvgFileZipStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2709,8 +2650,7 @@ var SvgFileZipStroke = function SvgFileZipStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2720,9 +2660,7 @@ var SvgFileZipStroke = function SvgFileZipStroke(props) {
 };
 var _path$5, _circle;
 function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgFileImageStroke = function SvgFileImageStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2730,8 +2668,7 @@ var SvgFileImageStroke = function SvgFileImageStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2746,9 +2683,7 @@ var SvgFileImageStroke = function SvgFileImageStroke(props) {
 };
 var _path$4;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2756,8 +2691,7 @@ var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2767,9 +2701,7 @@ var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
 };
 var _path$3;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2777,8 +2709,7 @@ var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2788,9 +2719,7 @@ var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
 };
 var _path$2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2798,8 +2727,7 @@ var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2808,9 +2736,7 @@ var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
 };
 var _path$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2818,8 +2744,7 @@ var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2828,9 +2753,7 @@ var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
 };
 var _path;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2838,8 +2761,7 @@ var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2849,26 +2771,26 @@ var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
 };
 const fileIconsDefault = {
-  pdf: React__default["default"].createElement(SvgFilePdfStroke, null),
-  zip: React__default["default"].createElement(SvgFileZipStroke, null),
-  image: React__default["default"].createElement(SvgFileImageStroke, null),
-  document: React__default["default"].createElement(SvgFileDocumentStroke, null),
-  spreadsheet: React__default["default"].createElement(SvgFileSpreadsheetStroke, null),
-  presentation: React__default["default"].createElement(SvgFilePresentationStroke, null),
-  generic: React__default["default"].createElement(SvgFileGenericStroke, null),
-  success: React__default["default"].createElement(SvgCheckCircleStroke$1, null),
-  error: React__default["default"].createElement(SvgFileErrorStroke, null)
+  pdf: React__namespace.default.createElement(SvgFilePdfStroke, null),
+  zip: React__namespace.default.createElement(SvgFileZipStroke, null),
+  image: React__namespace.default.createElement(SvgFileImageStroke, null),
+  document: React__namespace.default.createElement(SvgFileDocumentStroke, null),
+  spreadsheet: React__namespace.default.createElement(SvgFileSpreadsheetStroke, null),
+  presentation: React__namespace.default.createElement(SvgFilePresentationStroke, null),
+  generic: React__namespace.default.createElement(SvgFileGenericStroke, null),
+  success: React__namespace.default.createElement(SvgCheckCircleStroke$1, null),
+  error: React__namespace.default.createElement(SvgFileErrorStroke, null)
 };
 const fileIconsCompact = {
-  pdf: React__default["default"].createElement(SvgFilePdfStroke$1, null),
-  zip: React__default["default"].createElement(SvgFileZipStroke$1, null),
-  image: React__default["default"].createElement(SvgFileImageStroke$1, null),
-  document: React__default["default"].createElement(SvgFileDocumentStroke$1, null),
-  spreadsheet: React__default["default"].createElement(SvgFileSpreadsheetStroke$1, null),
-  presentation: React__default["default"].createElement(SvgFilePresentationStroke$1, null),
-  generic: React__default["default"].createElement(SvgFileGenericStroke$1, null),
-  success: React__default["default"].createElement(SvgCheckCircleStroke, null),
-  error: React__default["default"].createElement(SvgFileErrorStroke$1, null)
+  pdf: React__namespace.default.createElement(SvgFilePdfStroke$1, null),
+  zip: React__namespace.default.createElement(SvgFileZipStroke$1, null),
+  image: React__namespace.default.createElement(SvgFileImageStroke$1, null),
+  document: React__namespace.default.createElement(SvgFileDocumentStroke$1, null),
+  spreadsheet: React__namespace.default.createElement(SvgFileSpreadsheetStroke$1, null),
+  presentation: React__namespace.default.createElement(SvgFilePresentationStroke$1, null),
+  generic: React__namespace.default.createElement(SvgFileGenericStroke$1, null),
+  success: React__namespace.default.createElement(SvgCheckCircleStroke, null),
+  error: React__namespace.default.createElement(SvgFileErrorStroke$1, null)
 };
 const FileComponent = React.forwardRef((_ref, ref) => {
@@ -2884,29 +2806,29 @@ const FileComponent = React.forwardRef((_ref, ref) => {
     isCompact
   }), [isCompact]);
   const validationType = validation || type;
-  return React__default["default"].createElement(FileContext.Provider, {
+  return React__namespace.default.createElement(FileContext.Provider, {
     value: fileContextValue
-  }, React__default["default"].createElement(StyledFile, _extends$t({}, props, {
+  }, React__namespace.default.createElement(StyledFile, _extends$t({}, props, {
     isCompact: isCompact,
     focusInset: focusInset,
     validation: validation,
     ref: ref
-  }), validationType && React__default["default"].createElement(StyledFileIcon, {
+  }), validationType && React__namespace.default.createElement(StyledFileIcon, {
     isCompact: isCompact
-  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, child => typeof child === 'string' ? React__default["default"].createElement("span", null, child) : child)));
+  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, child => typeof child === 'string' ? React__namespace.default.createElement("span", null, child) : child)));
 });
 FileComponent.displayName = 'File';
 FileComponent.propTypes = {
-  focusInset: PropTypes__default["default"].bool,
-  isCompact: PropTypes__default["default"].bool,
-  type: PropTypes__default["default"].oneOf(FILE_TYPE),
-  validation: PropTypes__default["default"].oneOf(FILE_VALIDATION)
+  focusInset: PropTypes__default.default.bool,
+  isCompact: PropTypes__default.default.bool,
+  type: PropTypes__default.default.oneOf(FILE_TYPE),
+  validation: PropTypes__default.default.oneOf(FILE_VALIDATION)
 };
 const File = FileComponent;
 File.Close = Close;
 File.Delete = Delete;
-const MediaInput = React__default["default"].forwardRef((_ref, ref) => {
+const MediaInput = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     start,
     end,
@@ -2954,7 +2876,7 @@ const MediaInput = React__default["default"].forwardRef((_ref, ref) => {
   let combinedProps = {
     disabled,
     readOnly,
-    ref: mergeRefs__default["default"]([inputRef, ref]),
+    ref: mergeRefs__default.default([inputRef, ref]),
     onSelect: onSelectHandler,
     ...props
   };
@@ -2965,7 +2887,7 @@ const MediaInput = React__default["default"].forwardRef((_ref, ref) => {
     });
     isLabelHovered = fieldContext.isLabelHovered;
   }
-  return React__default["default"].createElement(FauxInput, _extends$t({
+  return React__namespace.default.createElement(FauxInput, _extends$t({
     tabIndex: null,
     onClick: onFauxInputClickHandler,
     onFocus: onFauxInputFocusHandler,
@@ -2983,25 +2905,25 @@ const MediaInput = React__default["default"].forwardRef((_ref, ref) => {
     mediaLayout: true
   }, otherWrapperProps, {
     ref: wrapperRef
-  }), start && React__default["default"].createElement(FauxInput.StartIcon, {
+  }), start && React__namespace.default.createElement(FauxInput.StartIcon, {
     isDisabled: disabled,
     isFocused: isFocused,
     isHovered: isHovered || isLabelHovered
-  }, start), React__default["default"].createElement(StyledTextMediaInput, combinedProps), end && React__default["default"].createElement(FauxInput.EndIcon, {
+  }, start), React__namespace.default.createElement(StyledTextMediaInput, combinedProps), end && React__namespace.default.createElement(FauxInput.EndIcon, {
     isDisabled: disabled,
     isFocused: isFocused,
     isHovered: isHovered || isLabelHovered
   }, end));
 });
 MediaInput.propTypes = {
-  isCompact: PropTypes__default["default"].bool,
-  isBare: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  validation: PropTypes__default["default"].oneOf(VALIDATION),
-  start: PropTypes__default["default"].node,
-  end: PropTypes__default["default"].node,
-  wrapperProps: PropTypes__default["default"].object,
-  wrapperRef: PropTypes__default["default"].any
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  validation: PropTypes__default.default.oneOf(VALIDATION),
+  start: PropTypes__default.default.node,
+  end: PropTypes__default.default.node,
+  wrapperProps: PropTypes__default.default.object,
+  wrapperRef: PropTypes__default.default.any
 };
 MediaInput.displayName = 'MediaInput';