@zendeskgarden/react-forms 9.12.3 → 9.12.4

package/dist/index.cjs.js

@@ -48,7 +48,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -58,7 +58,7 @@ const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled__default.default(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -67,7 +67,7 @@ const StyledFieldset = styled__default.default(StyledField).attrs({
 const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled__default.default.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.12.3'
+  'data-garden-version': props['data-garden-version'] || '9.12.4'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -80,7 +80,7 @@ const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled__default.default(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -89,7 +89,7 @@ const StyledLegend = styled__default.default(StyledLabel).attrs({
 const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
-  'data-garden-version': props['data-garden-version'] || '9.12.3'
+  'data-garden-version': props['data-garden-version'] || '9.12.4'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -101,18 +101,17 @@ const StyledHint = styled__default.default.div.attrs(props => ({
 const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
 })(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, reactTheming.componentStyles);
 
 const COMPONENT_ID$A = 'forms.input_message';
-const colorStyles$d = _ref => {
-  let {
-    theme,
-    $validation
-  } = _ref;
+const colorStyles$d = ({
+  theme,
+  $validation
+}) => {
   let variable;
   if ($validation === 'error') {
     variable = 'foreground.danger';
@@ -129,11 +128,10 @@ const colorStyles$d = _ref => {
   });
   return styled.css(["color:", ";"], foregroundColor);
 };
-const sizeStyles$g = _ref2 => {
-  let {
-    theme,
-    $validation
-  } = _ref2;
+const sizeStyles$g = ({
+  theme,
+  $validation
+}) => {
   const fontSize = theme.fontSizes.sm;
   const lineHeight = reactTheming.getLineHeight(theme.iconSizes.md, theme.fontSizes.sm);
   const marginTop = `${theme.space.base}px`;
@@ -142,7 +140,7 @@ const sizeStyles$g = _ref2 => {
 };
 const StyledMessage = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
-  'data-garden-version': props['data-garden-version'] || '9.12.3'
+  'data-garden-version': props['data-garden-version'] || '9.12.4'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -152,14 +150,13 @@ const COMPONENT_ID$z = 'forms.input';
 const isInvalid = validation => {
   return validation === 'warning' || validation === 'error';
 };
-const colorStyles$c = _ref => {
-  let {
-    theme,
-    $isBare,
-    $isHovered,
-    $focusInset,
-    $validation
-  } = _ref;
+const colorStyles$c = ({
+  theme,
+  $isBare,
+  $isHovered,
+  $focusInset,
+  $validation
+}) => {
   const foregroundColor = reactTheming.getColor({
     theme,
     variable: 'foreground.default'
@@ -241,12 +238,11 @@ const colorStyles$c = _ref => {
     theme
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles$f = _ref2 => {
-  let {
-    theme,
-    $isBare,
-    $isCompact
-  } = _ref2;
+const sizeStyles$f = ({
+  theme,
+  $isBare,
+  $isCompact
+}) => {
   const fontSize = theme.fontSizes.md;
   const paddingHorizontal = `${theme.space.base * 3}px`;
   let height;
@@ -274,7 +270,7 @@ const sizeStyles$f = _ref2 => {
 };
 const StyledTextInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   'aria-invalid': isInvalid(props.$validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -294,20 +290,19 @@ const hiddenStyles = `
 const StyledTextarea = styled__default.default(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
 })(["resize:", ";overflow:auto;", ";", ";"], props => props.$isResizable ? 'vertical' : 'none', props => props.$isHidden && hiddenStyles, reactTheming.componentStyles);
 
 const COMPONENT_ID$x = 'forms.media_figure';
-const colorStyles$b = _ref => {
-  let {
-    theme,
-    $isDisabled,
-    $isHovered,
-    $isFocused
-  } = _ref;
+const colorStyles$b = ({
+  theme,
+  $isDisabled,
+  $isHovered,
+  $isFocused
+}) => {
   let color;
   if ($isDisabled) {
     color = reactTheming.getColor({
@@ -349,21 +344,20 @@ const sizeStyles$e = props => {
 };
 const StyledTextMediaFigure = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
 })(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$e, colorStyles$b, reactTheming.componentStyles);
 
 const COMPONENT_ID$w = 'forms.faux_input';
-const colorStyles$a = _ref => {
-  let {
-    theme,
-    $validation,
-    $focusInset,
-    $isBare,
-    $isFocused
-  } = _ref;
+const colorStyles$a = ({
+  theme,
+  $validation,
+  $focusInset,
+  $isBare,
+  $isFocused
+}) => {
   let borderVariable;
   let focusBorderColor;
   if ($validation) {
@@ -403,7 +397,7 @@ const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props
   'aria-readonly': props.$isReadOnly,
   'aria-disabled': props.$isDisabled,
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -412,7 +406,7 @@ const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props
 const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   $isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -431,7 +425,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -446,7 +440,7 @@ const sizeStyles$d = props => {
 };
 const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   $isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -456,7 +450,7 @@ const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
 const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -465,7 +459,7 @@ const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
 const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -474,17 +468,16 @@ const StyledRadioHint = styled__default.default(StyledHint).attrs({
 const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
 })(["", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$p = 'forms.radio';
-const colorStyles$9 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$9 = ({
+  theme
+}) => {
   const borderColor = reactTheming.getColor({
     theme,
     variable: 'border.emphasis'
@@ -563,11 +556,10 @@ const colorStyles$9 = _ref => {
     selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
   }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
-const sizeStyles$c = _ref2 => {
-  let {
-    theme,
-    $isCompact
-  } = _ref2;
+const sizeStyles$c = ({
+  theme,
+  $isCompact
+}) => {
   const lineHeight = `${theme.space.base * 5}px`;
   const size = `${theme.space.base * 4}px`;
   const top = polished.math(`(${lineHeight} - ${size}) / 2`);
@@ -579,7 +571,7 @@ const sizeStyles$c = _ref2 => {
 };
 const StyledRadioInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -587,10 +579,9 @@ const StyledRadioInput = styled__default.default.input.attrs({
 })(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', StyledRadioLabel, sizeStyles$c, StyledRadioLabel, StyledRadioLabel, colorStyles$9, StyledRadioLabel, reactTheming.componentStyles);
 
 const COMPONENT_ID$o = 'forms.checkbox';
-const colorStyles$8 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$8 = ({
+  theme
+}) => {
   const backgroundOptions = {
     theme,
     variable: 'background.primaryEmphasis'
@@ -642,7 +633,7 @@ const colorStyles$8 = _ref => {
 };
 const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -652,7 +643,7 @@ const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
 const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -661,7 +652,7 @@ const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
 const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -690,7 +681,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -717,18 +708,17 @@ var SvgDashFill = function SvgDashFill(props) {
 const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
 })(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, reactTheming.componentStyles);
 
 const COMPONENT_ID$j = 'forms.file_upload';
-const colorStyles$7 = _ref => {
-  let {
-    theme,
-    $isDragging
-  } = _ref;
+const colorStyles$7 = ({
+  theme,
+  $isDragging
+}) => {
   const borderOptions = {
     theme,
     variable: 'border.primaryEmphasis'
@@ -802,11 +792,10 @@ const colorStyles$7 = _ref => {
     theme
   }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles$b = _ref2 => {
-  let {
-    theme,
-    $isCompact
-  } = _ref2;
+const sizeStyles$b = ({
+  theme,
+  $isCompact
+}) => {
   const marginTop = `${theme.space.base * ($isCompact ? 1 : 2)}px`;
   const paddingHorizontal = `${$isCompact ? 2 : 4}em`;
   const paddingVertical = polished.math(`${theme.space.base * ($isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}`);
@@ -816,7 +805,7 @@ const sizeStyles$b = _ref2 => {
 };
 const StyledFileUpload = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -825,7 +814,7 @@ const StyledFileUpload = styled__default.default.div.attrs({
 const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -835,12 +824,11 @@ const StyledFileClose = styled__default.default.button.attrs({
 }), reactTheming.componentStyles);
 
 const COMPONENT_ID$h = 'forms.file';
-const colorStyles$6 = _ref => {
-  let {
-    theme,
-    $focusInset,
-    $validation
-  } = _ref;
+const colorStyles$6 = ({
+  theme,
+  $focusInset,
+  $validation
+}) => {
   let borderVariable;
   let focusBorderVariable;
   let foregroundVariable;
@@ -880,11 +868,10 @@ const colorStyles$6 = _ref => {
     }
   }));
 };
-const sizeStyles$a = _ref2 => {
-  let {
-    theme,
-    $isCompact
-  } = _ref2;
+const sizeStyles$a = ({
+  theme,
+  $isCompact
+}) => {
   const size = `${theme.space.base * ($isCompact ? 7 : 10)}px`;
   const spacing = `${theme.space.base * ($isCompact ? 2 : 3)}px`;
   const fontSize = theme.fontSizes.md;
@@ -911,7 +898,7 @@ const sizeStyles$a = _ref2 => {
 };
 const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -920,7 +907,7 @@ const StyledFile = styled__default.default.div.attrs({
 const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -930,29 +917,27 @@ const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
 }), reactTheming.componentStyles);
 
 const COMPONENT_ID$f = 'forms.file.icon';
-const colorStyles$5 = _ref => {
-  let {
-    theme,
-    $validation
-  } = _ref;
+const colorStyles$5 = ({
+  theme,
+  $validation
+}) => {
   const color = $validation ? undefined : reactTheming.getColor({
     theme,
     variable: 'foreground.subtle'
   });
   return styled.css(["color:", ";"], color);
 };
-const sizeStyles$9 = _ref2 => {
-  let {
-    $isCompact,
-    theme
-  } = _ref2;
+const sizeStyles$9 = ({
+  $isCompact,
+  theme
+}) => {
   const width = $isCompact ? theme.iconSizes.sm : theme.iconSizes.md;
   const margin = `${theme.space.base * 2}px`;
   return styled.css(["width:", ";margin-", ":", ";"], width, theme.rtl ? 'left' : 'right', margin);
 };
 const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -961,7 +946,7 @@ const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attr
 const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -970,7 +955,7 @@ const StyledFileList = styled__default.default.ul.attrs({
 const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -997,7 +982,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1011,7 +996,7 @@ const sizeStyles$8 = props => {
 };
 const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1020,17 +1005,16 @@ const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
 const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
 })(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), reactTheming.componentStyles);
 
 const COMPONENT_ID$9 = 'forms.toggle';
-const colorStyles$4 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$4 = ({
+  theme
+}) => {
   const backgroundOptions = {
     theme,
     variable: 'background.emphasis'
@@ -1056,10 +1040,9 @@ const colorStyles$4 = _ref => {
   });
   return styled.css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
 };
-const sizeStyles$7 = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const sizeStyles$7 = ({
+  theme
+}) => {
   const height = `${theme.space.base * 5}px`;
   const width = `${theme.space.base * 10}px`;
   const iconSize = theme.iconSizes.md;
@@ -1069,7 +1052,7 @@ const sizeStyles$7 = _ref2 => {
 };
 const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1078,7 +1061,7 @@ const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
 const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1105,17 +1088,16 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
 })(["transition:all 0.15s ease-in-out;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$6 = 'forms.select';
-const colorStyles$3 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$3 = ({
+  theme
+}) => {
   const color = reactTheming.getColor({
     theme,
     variable: 'foreground.subtle',
@@ -1132,12 +1114,11 @@ const colorStyles$3 = _ref => {
   });
   return styled.css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}&:disabled + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color, StyledTextMediaFigure, disabledColor);
 };
-const sizeStyles$6 = _ref2 => {
-  let {
-    theme,
-    $isBare,
-    $isCompact
-  } = _ref2;
+const sizeStyles$6 = ({
+  theme,
+  $isBare,
+  $isCompact
+}) => {
   const padding = $isBare ? undefined : polished.math(`${theme.iconSizes.md} + ${theme.space.base * 5}`);
   const iconVerticalPosition = `${theme.space.base * ($isCompact ? 1.5 : 2.5) + 1}px`;
   const iconHorizontalPosition = `${theme.space.base * 3}px`;
@@ -1145,7 +1126,7 @@ const sizeStyles$6 = _ref2 => {
 };
 const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1156,25 +1137,23 @@ const StyledSelect = styled__default.default(StyledTextInput).attrs({
 }), StyledTextMediaFigure);
 
 const COMPONENT_ID$5 = 'forms.select_wrapper';
-const sizeStyles$5 = _ref => {
-  let {
-    theme,
-    $isCompact
-  } = _ref;
+const sizeStyles$5 = ({
+  theme,
+  $isCompact
+}) => {
   const height = `${theme.space.base * ($isCompact ? 8 : 10)}px`;
   return styled.css(["max-height:", ";"], height);
 };
 const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
 })(["position:relative;padding:0;overflow:visible;", ";& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], sizeStyles$5, StyledSelect, reactTheming.SELECTOR_FOCUS_VISIBLE);
 
 const COMPONENT_ID$4 = 'forms.range';
-const thumbStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const thumbStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-thumb {
       ${styles}
@@ -1189,8 +1168,7 @@ const thumbStyles = function (styles) {
     }
   `;
 };
-const trackStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const trackStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-track {
       ${styles}
@@ -1205,8 +1183,7 @@ const trackStyles = function (styles) {
     }
   `;
 };
-const trackLowerStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const trackLowerStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-progress {
       ${styles}
@@ -1217,11 +1194,10 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles$2 = _ref => {
-  let {
-    theme,
-    $hasLowerTrack = true
-  } = _ref;
+const colorStyles$2 = ({
+  theme,
+  $hasLowerTrack = true
+}) => {
   const options = {
     theme,
     variable: 'background.primaryEmphasis'
@@ -1313,10 +1289,9 @@ const colorStyles$2 = _ref => {
         background-color: ${trackDisabledLowerBackgroundColor};
       `, ':disabled'));
 };
-const sizeStyles$4 = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const sizeStyles$4 = ({
+  theme
+}) => {
   const thumbSize = `${theme.space.base * 5}px`;
   const trackHeight = `${theme.space.base * 1.5}px`;
   const trackBorderRadius = trackHeight;
@@ -1338,7 +1313,7 @@ const sizeStyles$4 = _ref2 => {
 };
 const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   type: 'range',
   style: {
     backgroundSize: props.$hasLowerTrack ?? true ? props.$backgroundSize ?? '0%' : undefined
@@ -1364,10 +1339,9 @@ const StyledRangeInput = styled__default.default.input.attrs(props => ({
     `), colorStyles$2, reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'forms.tile';
-const colorStyles$1 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$1 = ({
+  theme
+}) => {
   const offset100 = {
     dark: {
       offset: -100
@@ -1448,28 +1422,26 @@ const colorStyles$1 = _ref => {
     }
   }), activeBorderColor, activeBackgroundColor, checkedBackgroundColor, checkedForegroundColor, checkedHoverBackgroundColor, checkedActiveBackgroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles$3 = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const sizeStyles$3 = ({
+  theme
+}) => {
   const border = theme.borders.sm;
   const padding = `${theme.space.base * 5}px`;
   return styled.css(["border:", ";padding:", ";min-width:132px;"], border, padding);
 };
 const StyledTile = styled__default.default.label.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"
 })(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";direction:", ";word-break:break-word;", ";", ";", ";"], props => props.theme.borderRadii.md, props => props.theme.rtl && 'rtl', sizeStyles$3, colorStyles$1, reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'forms.tile_description';
-const sizeStyles$2 = _ref => {
-  let {
-    theme,
-    $isCentered
-  } = _ref;
+const sizeStyles$2 = ({
+  theme,
+  $isCentered
+}) => {
   const marginTop = `${theme.space.base}px`;
   const marginHorizontal = $isCentered ? undefined : polished.math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
   const fontSize = theme.fontSizes.sm;
@@ -1478,17 +1450,16 @@ const sizeStyles$2 = _ref => {
 };
 const StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
 })(["display:block;text-align:", ";", ";", ";"], props => props.$isCentered && 'center', sizeStyles$2, reactTheming.componentStyles);
 
 const COMPONENT_ID$1 = 'forms.tile_icon';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles = ({
+  theme
+}) => {
   const options = {
     theme,
     variable: 'foreground.subtle'
@@ -1522,11 +1493,10 @@ const colorStyles = _ref => {
   });
   return styled.css(["color:", ";", ":hover &&{color:", ";}", ":active &&{color:", ";}", ":has(:checked) &&{color:", ";}", "[aria-disabled='true'] &&{color:", ";}"], color, StyledTile, hoverColor, StyledTile, activeColor, StyledTile, checkedColor, StyledTile, disabledColor);
 };
-const sizeStyles$1 = _ref2 => {
-  let {
-    theme,
-    $isCentered
-  } = _ref2;
+const sizeStyles$1 = ({
+  theme,
+  $isCentered
+}) => {
   const iconSize = polished.math(`${theme.iconSizes.md} * 2`);
   let position;
   let top;
@@ -1540,7 +1510,7 @@ const sizeStyles$1 = _ref2 => {
 };
 const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1552,11 +1522,10 @@ const StyledTileInput = styled__default.default.input.withConfig({
 })(["position:absolute;top:0;left:0;opacity:0;z-index:1;margin:0;cursor:", ";width:100%;height:100%;"], props => props.disabled ? 'default' : 'pointer');
 
 const COMPONENT_ID = 'forms.tile_label';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    $isCentered
-  } = _ref;
+const sizeStyles = ({
+  theme,
+  $isCentered
+}) => {
   const marginTop = $isCentered ? `${theme.space.base * 2}px` : 0;
   const marginHorizontal = $isCentered ? undefined : polished.math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
   const fontSize = theme.fontSizes.md;
@@ -1565,7 +1534,7 @@ const sizeStyles = _ref => {
 };
 const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1692,33 +1661,30 @@ var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
   }))));
 };
 
-const MessageIcon = _ref => {
-  let {
-    validation,
-    children,
-    ...props
-  } = _ref;
-  return  React__namespace.default.createElement(StyledMessageIcon, Object.assign({
-    "aria-hidden": false,
-    role: "img"
-  }, props), validation ? {
-    error: React__namespace.default.createElement(SvgAlertErrorStroke, null),
-    success: React__namespace.default.createElement(SvgCheckCircleStroke$1, null),
-    warning: React__namespace.default.createElement(SvgAlertWarningStroke, null)
-  }[validation] : children);
-};
+const MessageIcon = ({
+  validation,
+  children,
+  ...props
+}) =>
+React__namespace.default.createElement(StyledMessageIcon, Object.assign({
+  "aria-hidden": false,
+  role: "img"
+}, props), validation ? {
+  error: React__namespace.default.createElement(SvgAlertErrorStroke, null),
+  success: React__namespace.default.createElement(SvgCheckCircleStroke$1, null),
+  warning: React__namespace.default.createElement(SvgAlertWarningStroke, null)
+}[validation] : children);
 MessageIcon.displayName = 'Field.MessageIcon';
 MessageIcon.propTypes = {
   validation: PropTypes__default.default.oneOf(VALIDATION)
 };
 
-const Message = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    validation,
-    validationLabel,
-    children,
-    ...other
-  } = _ref;
+const Message = React__namespace.default.forwardRef(({
+  validation,
+  validationLabel,
+  children,
+  ...other
+}, ref) => {
   const {
     hasMessage,
     setHasMessage,
@@ -1773,12 +1739,11 @@ const useFieldsetContext = () => {
   return fieldsetContext;
 };
 
-const Label$1 = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    isRegular,
-    ...other
-  } = _ref;
+const Label$1 = React__namespace.default.forwardRef(({
+  children,
+  isRegular,
+  ...other
+}, ref) => {
   const fieldContext = useFieldContext();
   const fieldsetContext = useFieldsetContext();
   const type = useInputContext();
@@ -1898,11 +1863,10 @@ const LegendComponent = React.forwardRef((props, ref) => {
 LegendComponent.displayName = 'Fieldset.Legend';
 const Legend = LegendComponent;
 
-const FieldsetComponent = React.forwardRef((_ref, ref) => {
-  let {
-    isCompact,
-    ...other
-  } = _ref;
+const FieldsetComponent = React.forwardRef(({
+  isCompact,
+  ...other
+}, ref) => {
   const fieldsetContext = React.useMemo(() => ({
     isCompact
   }), [isCompact]);
@@ -1920,13 +1884,12 @@ FieldsetComponent.propTypes = {
 const Fieldset = FieldsetComponent;
 Fieldset.Legend = Legend;
 
-const Checkbox = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    indeterminate,
-    children,
-    isCompact,
-    ...other
-  } = _ref;
+const Checkbox = React__namespace.default.forwardRef(({
+  indeterminate,
+  children,
+  isCompact,
+  ...other
+}, ref) => {
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
   const inputRef = inputElement => {
@@ -1966,15 +1929,14 @@ const useInputGroupContext = () => {
   return React.useContext(InputGroupContext);
 };
 
-const Input = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    onSelect,
-    isBare,
-    isCompact,
-    focusInset,
-    validation,
-    ...other
-  } = _ref;
+const Input = React__namespace.default.forwardRef(({
+  onSelect,
+  isBare,
+  isCompact,
+  focusInset,
+  validation,
+  ...other
+}, ref) => {
   const fieldContext = useFieldContext();
   const inputGroupContext = useInputGroupContext();
   let combinedProps = other;
@@ -2002,12 +1964,11 @@ Input.propTypes = {
 };
 Input.displayName = 'Input';
 
-const Radio = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    isCompact,
-    ...other
-  } = _ref;
+const Radio = React__namespace.default.forwardRef(({
+  children,
+  isCompact,
+  ...other
+}, ref) => {
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
   let combinedProps = {
@@ -2027,14 +1988,13 @@ Radio.propTypes = {
   isCompact: PropTypes__default.default.bool
 };
 
-const Range = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    hasLowerTrack = true,
-    min = 0,
-    max = 100,
-    step = 1,
-    ...other
-  } = _ref;
+const Range = React__namespace.default.forwardRef(({
+  hasLowerTrack = true,
+  min = 0,
+  max = 100,
+  step = 1,
+  ...other
+}, ref) => {
   const [backgroundSize, setBackgroundSize] = React.useState('0');
   const rangeRef = React.useRef();
   const fieldContext = useFieldContext();
@@ -2076,20 +2036,19 @@ Range.displayName = 'Range';
 const parseStyleValue = value => {
   return parseInt(value, 10) || 0;
 };
-const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    isCompact,
-    isBare,
-    focusInset,
-    isResizable,
-    minRows,
-    maxRows,
-    style,
-    validation,
-    onChange,
-    onSelect,
-    ...other
-  } = _ref;
+const Textarea = React__namespace.default.forwardRef(({
+  isCompact,
+  isBare,
+  focusInset,
+  isResizable,
+  minRows,
+  maxRows,
+  style,
+  validation,
+  onChange,
+  onSelect,
+  ...other
+}, ref) => {
   const fieldContext = useFieldContext();
   const textAreaRef = React.useRef();
   const shadowTextAreaRef = React.useRef(null);
@@ -2195,12 +2154,11 @@ Textarea.propTypes = {
 };
 Textarea.displayName = 'Textarea';
 
-const Toggle = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    isCompact,
-    ...other
-  } = _ref;
+const Toggle = React__namespace.default.forwardRef(({
+  children,
+  isCompact,
+  ...other
+}, ref) => {
   const fieldsetContext = useFieldsetContext();
   const fieldContext = useFieldContext();
   let combinedProps = {
@@ -2237,59 +2195,52 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const StartIconComponent = _ref => {
-  let {
-    isDisabled,
-    isFocused,
-    isHovered,
-    isRotated,
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
-    $position: "start",
-    $isDisabled: isDisabled,
-    $isFocused: isFocused,
-    $isHovered: isHovered,
-    $isRotated: isRotated
-  }, props));
-};
+const StartIconComponent = ({
+  isDisabled,
+  isFocused,
+  isHovered,
+  isRotated,
+  ...props
+}) => React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
+  $position: "start",
+  $isDisabled: isDisabled,
+  $isFocused: isFocused,
+  $isHovered: isHovered,
+  $isRotated: isRotated
+}, props));
 StartIconComponent.displayName = 'FauxInput.StartIcon';
 const StartIcon = StartIconComponent;
 
-const EndIconComponent = _ref => {
-  let {
-    isDisabled,
-    isFocused,
-    isHovered,
-    isRotated,
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
-    $position: "end",
-    $isDisabled: isDisabled,
-    $isFocused: isFocused,
-    $isHovered: isHovered,
-    $isRotated: isRotated
-  }, props));
-};
+const EndIconComponent = ({
+  isDisabled,
+  isFocused,
+  isHovered,
+  isRotated,
+  ...props
+}) => React__namespace.default.createElement(StyledTextMediaFigure, Object.assign({
+  $position: "end",
+  $isDisabled: isDisabled,
+  $isFocused: isFocused,
+  $isHovered: isHovered,
+  $isRotated: isRotated
+}, props));
 EndIconComponent.displayName = 'FauxInput.EndIcon';
 const EndIcon = EndIconComponent;
 
-const FauxInputComponent = React.forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    focusInset,
-    isBare,
-    isCompact,
-    isFocused: controlledIsFocused,
-    isHovered,
-    onBlur,
-    onFocus,
-    readOnly,
-    validation,
-    mediaLayout,
-    ...other
-  } = _ref;
+const FauxInputComponent = React.forwardRef(({
+  disabled,
+  focusInset,
+  isBare,
+  isCompact,
+  isFocused: controlledIsFocused,
+  isHovered,
+  onBlur,
+  onFocus,
+  readOnly,
+  validation,
+  mediaLayout,
+  ...other
+}, ref) => {
   const [isFocused, setIsFocused] = React.useState(false);
   const onFocusHandler = containerUtilities.composeEventHandlers(onFocus, () => {
     setIsFocused(true);
@@ -2329,15 +2280,14 @@ const FauxInput = FauxInputComponent;
 FauxInput.EndIcon = EndIcon;
 FauxInput.StartIcon = StartIcon;
 
-const Select = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    isCompact,
-    validation,
-    focusInset,
-    isBare,
-    ...props
-  } = _ref;
+const Select = React__namespace.default.forwardRef(({
+  disabled,
+  isCompact,
+  validation,
+  focusInset,
+  isBare,
+  ...props
+}, ref) => {
   const fieldContext = useFieldContext();
   let combinedProps = {
     $focusInset: focusInset,
@@ -2374,13 +2324,12 @@ const useTilesContext = () => {
   return React.useContext(TilesContext);
 };
 
-const TileComponent = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    value,
-    disabled,
-    ...props
-  } = _ref;
+const TileComponent = React__namespace.default.forwardRef(({
+  children,
+  value,
+  disabled,
+  ...props
+}, ref) => {
   const tilesContext = useTilesContext();
   const inputRef = React.useRef(null);
   let inputProps;
@@ -2446,19 +2395,15 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
 LabelComponent.displayName = 'Tiles.Label';
 const Label = LabelComponent;
 
-const TilesComponent = React.forwardRef((_ref, ref) => {
-  let {
-    onChange,
-    value: controlledValue,
-    name,
-    isCentered = true,
-    ...props
-  } = _ref;
+const TilesComponent = React.forwardRef(({
+  onChange,
+  value: controlledValue,
+  name,
+  isCentered = true,
+  ...props
+}, ref) => {
   const [value, setValue] = React.useState(controlledValue);
-  const handleOnChange = React.useCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  const handleOnChange = React.useCallback((...args) => {
     setValue(args[0].target.value);
     if (onChange) {
       onChange(...args);
@@ -2491,11 +2436,10 @@ Tiles.Icon = Icon;
 Tiles.Label = Label;
 Tiles.Tile = Tile;
 
-const InputGroup = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    isCompact,
-    ...other
-  } = _ref;
+const InputGroup = React__namespace.default.forwardRef(({
+  isCompact,
+  ...other
+}, ref) => {
   const contextValue = React.useMemo(() => ({
     isCompact
   }), [isCompact]);
@@ -2511,13 +2455,12 @@ InputGroup.propTypes = {
   isCompact: PropTypes__default.default.bool
 };
 
-const FileUpload = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    isCompact,
-    isDragging,
-    ...other
-  } = _ref;
+const FileUpload = React__namespace.default.forwardRef(({
+  disabled,
+  isCompact,
+  isDragging,
+  ...other
+}, ref) => {
   return (
     React__namespace.default.createElement(StyledFileUpload, Object.assign({
       ref: ref,
@@ -2536,25 +2479,19 @@ FileUpload.propTypes = {
 };
 FileUpload.displayName = 'FileUpload';
 
-const ItemComponent = React.forwardRef((_ref, ref) => {
-  let {
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(StyledFileListItem, Object.assign({}, props, {
-    ref: ref
-  }));
-});
+const ItemComponent = React.forwardRef(({
+  ...props
+}, ref) => React__namespace.default.createElement(StyledFileListItem, Object.assign({}, props, {
+  ref: ref
+})));
 ItemComponent.displayName = 'FileList.Item';
 const Item = ItemComponent;
 
-const FileListComponent = React.forwardRef((_ref, ref) => {
-  let {
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(StyledFileList, Object.assign({}, props, {
-    ref: ref
-  }));
-});
+const FileListComponent = React.forwardRef(({
+  ...props
+}, ref) => React__namespace.default.createElement(StyledFileList, Object.assign({}, props, {
+  ref: ref
+})));
 FileListComponent.displayName = 'FileList';
 const FileList = FileListComponent;
 FileList.Item = Item;
@@ -3026,15 +2963,14 @@ const fileIconsCompact = {
   error: React__namespace.default.createElement(SvgFileErrorStroke$1, null)
 };
 
-const FileComponent = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    type,
-    isCompact,
-    focusInset,
-    validation,
-    ...props
-  } = _ref;
+const FileComponent = React.forwardRef(({
+  children,
+  type,
+  isCompact,
+  focusInset,
+  validation,
+  ...props
+}, ref) => {
   const fileContextValue = React.useMemo(() => ({
     isCompact
   }), [isCompact]);
@@ -3062,21 +2998,20 @@ const File = FileComponent;
 File.Close = Close;
 File.Delete = Delete;
 
-const MediaInput = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    start,
-    end,
-    disabled,
-    isCompact,
-    isBare,
-    focusInset,
-    readOnly,
-    validation,
-    wrapperProps = {},
-    wrapperRef,
-    onSelect,
-    ...props
-  } = _ref;
+const MediaInput = React__namespace.default.forwardRef(({
+  start,
+  end,
+  disabled,
+  isCompact,
+  isBare,
+  focusInset,
+  readOnly,
+  validation,
+  wrapperProps = {},
+  wrapperRef,
+  onSelect,
+  ...props
+}, ref) => {
   const fieldContext = useFieldContext();
   const inputRef = React.useRef();
   const [isFocused, setIsFocused] = React.useState(false);