@zendeskgarden/react-forms 8.57.0 → 8.58.0

package/dist/index.cjs.js

@@ -18,6 +18,7 @@ var PropTypes = require('prop-types');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 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 }; }
 
@@ -46,265 +47,85 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends$t() {
   _extends$t = 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$t.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var FieldContext = React.createContext(undefined);
-var useFieldContext = function useFieldContext() {
-  var fieldContext = React.useContext(FieldContext);
+const FieldContext = React.createContext(undefined);
+const useFieldContext = () => {
+  const fieldContext = React.useContext(FieldContext);
   return fieldContext;
 };
 
-var COMPONENT_ID$K = 'forms.field';
-var StyledField = styled__default["default"].div.attrs({
+const COMPONENT_ID$K = 'forms.field';
+const StyledField = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
-})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$K, props);
-});
+})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$K, props));
 StyledField.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$J = 'forms.fieldset';
-var StyledFieldset = styled__default["default"](StyledField).attrs({
+const COMPONENT_ID$J = 'forms.fieldset';
+const StyledFieldset = styled__default["default"](StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
-})(["", "{margin-top:", "px;}", ";"], StyledField, function (props) {
-  return props.theme.space.base * (props.isCompact ? 1 : 2);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$J, props);
-});
+})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$J, props));
 StyledFieldset.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$I = 'forms.input_label';
-var StyledLabel = styled__default["default"].label.attrs({
+const COMPONENT_ID$I = 'forms.input_label';
+const StyledLabel = styled__default["default"].label.attrs({
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
-})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.isRadio ? 'inline-block' : 'inline';
-}, function (props) {
-  return props.isRadio && 'top';
-}, function (props) {
-  return props.isRadio && '-100%';
-}, function (props) {
-  return props.isRadio && '0';
-}, function (props) {
-  return !props.isRadio && polished.hideVisually();
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$I, props);
-});
+})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$I, props));
 StyledLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$H = 'forms.fieldset_legend';
-var StyledLegend = styled__default["default"](StyledLabel).attrs({
+const COMPONENT_ID$H = 'forms.fieldset_legend';
+const StyledLegend = styled__default["default"](StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
-})(["padding:0;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$H, props);
-});
+})(["padding:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$H, props));
 StyledLegend.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$G = 'forms.input_hint';
-var StyledHint = styled__default["default"].div.attrs({
+const COMPONENT_ID$G = 'forms.input_hint';
+const StyledHint = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
-})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return reactTheming.getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$G, props);
-});
+})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$G, props));
 StyledHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -320,7 +141,8 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -350,7 +172,8 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -375,7 +198,8 @@ var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -390,12 +214,13 @@ var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
   }))));
 };
 
-var _excluded$j = ["children", "validation"];
-var MessageIcon = function MessageIcon(_ref) {
-  var children = _ref.children,
-      validation = _ref.validation,
-      props = _objectWithoutProperties(_ref, _excluded$j);
-  var retVal;
+const MessageIcon = _ref => {
+  let {
+    children,
+    validation,
+    ...props
+  } = _ref;
+  let retVal;
   if (validation === 'error') {
     retVal = React__default["default"].createElement(SvgAlertErrorStroke, props);
   } else if (validation === 'success') {
@@ -407,29 +232,23 @@ var MessageIcon = function MessageIcon(_ref) {
   }
   return retVal;
 };
-var COMPONENT_ID$F = 'forms.input_message_icon';
-var StyledMessageIcon = styled__default["default"](MessageIcon).attrs({
+const COMPONENT_ID$F = 'forms.input_message_icon';
+const StyledMessageIcon = styled__default["default"](MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
-})(["width:", ";height:", ";", ";"], function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return props.theme.iconSizes.md;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$F, props);
-});
+})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$F, props));
 StyledMessageIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var validationStyles = function validationStyles(props) {
-  var rtl = props.theme.rtl;
-  var padding = polished.math("".concat(props.theme.space.base, " * 2px + ").concat(props.theme.iconSizes.md));
-  var color;
+const validationStyles = props => {
+  const rtl = props.theme.rtl;
+  const padding = polished.math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
+  let color;
   if (props.validation === 'error') {
     color = reactTheming.getColor('dangerHue', 600, props.theme);
   } else if (props.validation === 'success') {
@@ -441,44 +260,30 @@ var validationStyles = function validationStyles(props) {
   }
   return styled.css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
 };
-var COMPONENT_ID$E = 'forms.input_message';
-var StyledMessage = styled__default["default"].div.attrs({
+const COMPONENT_ID$E = 'forms.input_message';
+const StyledMessage = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
-})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return reactTheming.getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm);
-}, function (props) {
-  return props.theme.fontSizes.sm;
-}, function (props) {
-  return validationStyles(props);
-}, StyledMessageIcon, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, StyledLabel, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * 1px"));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$E, props);
-});
+})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles(props), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => polished.math(`${props.theme.space.base} * 1px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$E, props));
 StyledMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$D = 'forms.input';
-var isInvalid = function isInvalid(validation) {
+const COMPONENT_ID$D = 'forms.input';
+const isInvalid = validation => {
   return validation === 'warning' || validation === 'error';
 };
-var colorStyles$b = function colorStyles(props) {
-  var SHADE = 600;
-  var placeholderColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
-  var borderColor;
-  var hoverBorderColor;
-  var focusBorderColor;
+const colorStyles$b = props => {
+  const SHADE = 600;
+  const placeholderColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
+  let borderColor;
+  let hoverBorderColor;
+  let focusBorderColor;
   if (props.validation) {
-    var hue;
+    let hue;
     if (props.validation === 'success') {
       hue = 'successHue';
     } else if (props.validation === 'warning') {
@@ -494,13 +299,15 @@ var colorStyles$b = function colorStyles(props) {
     hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
     focusBorderColor = hoverBorderColor;
   }
-  var boxShadow = "\n    ".concat(props.focusInset ? 'inset' : '', "\n    ").concat(props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35)));
-  var readOnlyBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
-  var readOnlyBorderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  var disabledBackgroundColor = readOnlyBackgroundColor;
-  var disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  var disabledForegroundColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
-  var controlledBorderColor = borderColor;
+  const boxShadow = `
+    ${props.focusInset ? 'inset' : ''}
+    ${props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35))}`;
+  const readOnlyBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
+  const readOnlyBorderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const disabledBackgroundColor = readOnlyBackgroundColor;
+  const disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+  const disabledForegroundColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
+  let controlledBorderColor = borderColor;
   if (props.isFocused) {
     controlledBorderColor = focusBorderColor;
   }
@@ -509,88 +316,67 @@ var colorStyles$b = function colorStyles(props) {
   }
   return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}&:focus,&[data-garden-focus-visible='true']{border-color:", ";box-shadow:", ";}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, !props.isBare && props.isFocused && boxShadow, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusBorderColor, !props.isBare && boxShadow, disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
 };
-var sizeStyles$f = function sizeStyles(props) {
-  var fontSize = props.theme.fontSizes.md;
-  var paddingHorizontal = "".concat(props.theme.space.base * 3, "px");
-  var height;
-  var paddingVertical;
-  var browseFontSize;
-  var swatchHeight;
+const sizeStyles$f = props => {
+  const fontSize = props.theme.fontSizes.md;
+  const paddingHorizontal = `${props.theme.space.base * 3}px`;
+  let height;
+  let paddingVertical;
+  let browseFontSize;
+  let swatchHeight;
   if (props.isCompact) {
-    height = "".concat(props.theme.space.base * 8, "px");
-    paddingVertical = "".concat(props.theme.space.base * 1.5, "px");
-    browseFontSize = polished.math("".concat(props.theme.fontSizes.sm, " - 1"));
-    swatchHeight = "".concat(props.theme.space.base * 6, "px");
+    height = `${props.theme.space.base * 8}px`;
+    paddingVertical = `${props.theme.space.base * 1.5}px`;
+    browseFontSize = polished.math(`${props.theme.fontSizes.sm} - 1`);
+    swatchHeight = `${props.theme.space.base * 6}px`;
   } else {
-    height = "".concat(props.theme.space.base * 10, "px");
-    paddingVertical = "".concat(props.theme.space.base * 2.5, "px");
+    height = `${props.theme.space.base * 10}px`;
+    paddingVertical = `${props.theme.space.base * 2.5}px`;
     browseFontSize = props.theme.fontSizes.sm;
-    swatchHeight = "".concat(props.theme.space.base * 7, "px");
+    swatchHeight = `${props.theme.space.base * 7}px`;
   }
-  var lineHeight = polished.math("".concat(height, " - (").concat(paddingVertical, " * 2) - (").concat(props.theme.borderWidths.sm, " * 2)"));
-  var padding = props.isBare ? '0' : "".concat(polished.em(paddingVertical, fontSize), " ").concat(polished.em(paddingHorizontal, fontSize));
-  var swatchMarginVertical = polished.math("(".concat(lineHeight, " - ").concat(swatchHeight, ") / 2"));
-  var swatchMarginHorizontal = polished.math("".concat(paddingVertical, " + ").concat(swatchMarginVertical, " - ").concat(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("".concat(swatchMarginHorizontal, " * -2")), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
-};
-var StyledTextInput = styled__default["default"].input.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$D,
-    'data-garden-version': '8.57.0',
-    'aria-invalid': isInvalid(props.validation)
-  };
-}).withConfig({
+  const lineHeight = polished.math(`${height} - (${paddingVertical} * 2) - (${props.theme.borderWidths.sm} * 2)`);
+  const padding = props.isBare ? '0' : `${polished.em(paddingVertical, fontSize)} ${polished.em(paddingHorizontal, fontSize)}`;
+  const swatchMarginVertical = polished.math(`(${lineHeight} - ${swatchHeight}) / 2`);
+  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 => ({
+  'data-garden-id': COMPONENT_ID$D,
+  'data-garden-version': '8.58.0',
+  'aria-invalid': isInvalid(props.validation)
+})).withConfig({
   displayName: "StyledTextInput",
   componentId: "sc-k12n8x-0"
-})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";&:focus{outline:none;}", ";&:disabled{cursor:default;}", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return props.isBare ? 'none' : props.theme.borders.sm;
-}, function (props) {
-  return props.isBare ? '0' : props.theme.borderRadii.md;
-}, function (props) {
-  return props.theme.borderRadii.sm;
-}, function (props) {
-  return props.theme.borderRadii.sm;
-}, function (props) {
-  return props.theme.borderRadii.sm;
-}, function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return sizeStyles$f(props);
-}, function (props) {
-  return colorStyles$b(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$D, props);
-});
+})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";&:focus{outline:none;}", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', props => sizeStyles$f(props), props => colorStyles$b(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$D, props));
 StyledTextInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$C = 'forms.textarea';
-var hiddenStyles = "\n  visibility: hidden;\n  position: absolute;\n  overflow: hidden;\n  height: 0;\n  top: 0;\n  left: 0;\n  transform: translateZ(0);\n";
-var StyledTextarea = styled__default["default"](StyledTextInput).attrs({
+const COMPONENT_ID$C = 'forms.textarea';
+const hiddenStyles = `
+  visibility: hidden;
+  position: absolute;
+  overflow: hidden;
+  height: 0;
+  top: 0;
+  left: 0;
+  transform: translateZ(0);
+`;
+const StyledTextarea = styled__default["default"](StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
-})(["resize:", ";overflow:auto;", ";", ";"], function (props) {
-  return props.isResizable ? 'vertical' : 'none';
-}, function (props) {
-  return props.isHidden && hiddenStyles;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props);
-});
+})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props));
 StyledTextarea.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$i = ["children", "position", "isHovered", "isFocused", "isDisabled", "isRotated", "theme"];
-var COMPONENT_ID$B = 'forms.media_figure';
-var colorStyles$a = function colorStyles(props) {
-  var shade = 600;
+const COMPONENT_ID$B = 'forms.media_figure';
+const colorStyles$a = props => {
+  let shade = 600;
   if (props.isDisabled) {
     shade = 400;
   } else if (props.isHovered || props.isFocused) {
@@ -598,11 +384,11 @@ var colorStyles$a = function colorStyles(props) {
   }
   return styled.css(["color:", ";"], reactTheming.getColor('neutralHue', shade, props.theme));
 };
-var sizeStyles$e = function sizeStyles(props) {
-  var size = props.theme.iconSizes.md;
-  var marginFirst = "1px ".concat(props.theme.space.base * 2, "px auto 0");
-  var marginLast = "1px 0 auto ".concat(props.theme.space.base * 2, "px");
-  var margin;
+const sizeStyles$e = props => {
+  const size = props.theme.iconSizes.md;
+  const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
+  const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
+  let margin;
   if (props.position === 'start') {
     margin = props.theme.rtl ? marginLast : marginFirst;
   } else {
@@ -610,286 +396,220 @@ var sizeStyles$e = function sizeStyles(props) {
   }
   return styled.css(["margin:", ";width:", ";height:", ";"], margin, size, size);
 };
-var StyledTextMediaFigure = styled__default["default"](
-function (_ref) {
-  var children = _ref.children;
-      _ref.position;
-      _ref.isHovered;
-      _ref.isFocused;
-      _ref.isDisabled;
-      _ref.isRotated;
-      _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$i);
+const StyledTextMediaFigure = styled__default["default"](
+_ref => {
+  let {
+    children,
+    position,
+    isHovered,
+    isFocused,
+    isDisabled,
+    isRotated,
+    theme,
+    ...props
+  } = _ref;
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], function (props) {
-  return props.isRotated && "rotate(".concat(props.theme.rtl ? '-' : '+', "180deg)");
-}, function (props) {
-  return colorStyles$a(props);
-}, function (props) {
-  return sizeStyles$e(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props);
-});
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles$a(props), props => sizeStyles$e(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props));
 StyledTextMediaFigure.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$A = 'forms.faux_input';
-var StyledTextFauxInput = styled__default["default"](StyledTextInput).attrs(function (props) {
-  return {
-    as: 'div',
-    'aria-readonly': props.isReadOnly,
-    'aria-disabled': props.isDisabled,
-    'data-garden-id': COMPONENT_ID$A,
-    'data-garden-version': '8.57.0'
-  };
-}).withConfig({
+const COMPONENT_ID$A = 'forms.faux_input';
+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.58.0'
+})).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
-})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;& > ", "{vertical-align:", ";}& > ", "{flex-shrink:", ";}", ";"], function (props) {
-  return props.mediaLayout ? 'inline-flex' : 'inline-block';
-}, function (props) {
-  return props.mediaLayout && 'baseline';
-}, function (props) {
-  return props.mediaLayout && !props.isDisabled ? 'text' : 'default';
-}, StyledTextInput, function (props) {
-  return !props.mediaLayout && 'baseline';
-}, StyledTextMediaFigure, function (props) {
-  return props.mediaLayout && '0';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props);
-});
+})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;& > ", "{vertical-align:", ";}& > ", "{flex-shrink:", ";}", ";"], props => props.mediaLayout ? 'inline-flex' : 'inline-block', props => props.mediaLayout && 'baseline', props => props.mediaLayout && !props.isDisabled ? 'text' : 'default', StyledTextInput, props => !props.mediaLayout && 'baseline', StyledTextMediaFigure, props => props.mediaLayout && '0', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props));
 StyledTextFauxInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$z = 'forms.media_input';
-var StyledTextMediaInput = styled__default["default"](StyledTextInput).attrs({
+const COMPONENT_ID$z = 'forms.media_input';
+const StyledTextMediaInput = styled__default["default"](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
   componentId: "sc-12i9xfi-0"
-})(["flex-grow:1;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props);
-});
+})(["flex-grow:1;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$z, props));
 StyledTextMediaInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$y = 'forms.input_group';
-var positionStyles = function positionStyles(props) {
-  var topMargin = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
-  var startDirection = props.theme.rtl ? 'right' : 'left';
-  var endDirection = props.theme.rtl ? 'left' : 'right';
+const COMPONENT_ID$y = 'forms.input_group';
+const positionStyles = props => {
+  const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  const startDirection = props.theme.rtl ? 'right' : 'left';
+  const endDirection = props.theme.rtl ? 'left' : 'right';
   return styled.css(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}& > ", ":not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > ", ":not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin, StyledTextInput, StyledTextInput, startDirection, startDirection, StyledTextInput, endDirection, endDirection);
 };
-var itemStyles = function itemStyles(props) {
-  var horizontal = props.theme.rtl ? 'right' : 'left';
+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');
 };
-var StyledInputGroup = styled__default["default"].div.attrs({
+const StyledInputGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
-})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], function (props) {
-  return positionStyles(props);
-}, function (props) {
-  return itemStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props);
-});
+})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$y, props));
 StyledInputGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$x = 'forms.radio_label';
-var sizeStyles$d = function sizeStyles(props) {
-  var size = props.theme.space.base * 4;
-  var padding = size + props.theme.space.base * 2;
-  var lineHeight = props.theme.space.base * 5;
+const COMPONENT_ID$x = 'forms.radio_label';
+const sizeStyles$d = props => {
+  const size = props.theme.space.base * 4;
+  const padding = size + props.theme.space.base * 2;
+  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);
 };
-var StyledRadioLabel = styled__default["default"](StyledLabel).attrs({
+const StyledRadioLabel = styled__default["default"](StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
   componentId: "sc-1aq2e5t-0"
-})(["display:inline-block;position:relative;cursor:pointer;user-select:none;", ";", ";"], function (props) {
-  return sizeStyles$d(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props);
-});
+})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledRadioLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$w = 'forms.checkbox_label';
-var StyledCheckLabel = styled__default["default"](StyledRadioLabel).attrs({
+const COMPONENT_ID$w = 'forms.checkbox_label';
+const StyledCheckLabel = styled__default["default"](StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
-})(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props);
-});
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props));
 StyledCheckLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$v = 'forms.radio_hint';
-var StyledRadioHint = styled__default["default"](StyledHint).attrs({
+const COMPONENT_ID$v = 'forms.radio_hint';
+const StyledRadioHint = styled__default["default"](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
-})(["padding-", ":", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * 6px"));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props);
-});
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 6px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledRadioHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$u = 'forms.checkbox_hint';
-var StyledCheckHint = styled__default["default"](StyledRadioHint).attrs({
+const COMPONENT_ID$u = 'forms.checkbox_hint';
+const StyledCheckHint = styled__default["default"](StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
-})(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props);
-});
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
 StyledCheckHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$t = 'forms.radio';
-var colorStyles$9 = function colorStyles(props) {
-  var SHADE = 600;
-  var borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  var backgroundColor = props.theme.colors.background;
-  var iconColor = backgroundColor;
-  var hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
-  var hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  var focusBorderColor = hoverBorderColor;
-  var activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
-  var activeBorderColor = focusBorderColor;
-  var boxShadow = props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35));
-  var checkedBorderColor = focusBorderColor;
-  var checkedBackgroundColor = checkedBorderColor;
-  var checkedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  var checkedHoverBackgroundColor = checkedHoverBorderColor;
-  var checkedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
-  var checkedActiveBackgroundColor = checkedActiveBorderColor;
-  var disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+const COMPONENT_ID$t = 'forms.radio';
+const colorStyles$9 = props => {
+  const SHADE = 600;
+  const borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const backgroundColor = props.theme.colors.background;
+  const iconColor = backgroundColor;
+  const hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
+  const hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const focusBorderColor = hoverBorderColor;
+  const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBorderColor = focusBorderColor;
+  const boxShadow = props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35));
+  const checkedBorderColor = focusBorderColor;
+  const checkedBackgroundColor = checkedBorderColor;
+  const checkedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const checkedHoverBackgroundColor = checkedHoverBorderColor;
+  const checkedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
+  const checkedActiveBackgroundColor = checkedActiveBorderColor;
+  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
   return styled.css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}&[data-garden-focus-visible='true'] ~ ", "::before{border-color:", ";box-shadow:", ";}& ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, StyledRadioLabel, focusBorderColor, boxShadow, StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
-var sizeStyles$c = function sizeStyles(props) {
-  var lineHeight = "".concat(props.theme.space.base * 5, "px");
-  var size = "".concat(props.theme.space.base * 4, "px");
-  var top = polished.math("(".concat(lineHeight, " - ").concat(size, ") / 2"));
-  var iconSize = props.theme.iconSizes.sm;
-  var iconPosition = polished.math("(".concat(size, " - ").concat(iconSize, ") / 2"));
-  var iconTop = polished.math("".concat(iconPosition, " + ").concat(top));
-  var marginTop = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
+const sizeStyles$c = props => {
+  const lineHeight = `${props.theme.space.base * 5}px`;
+  const size = `${props.theme.space.base * 4}px`;
+  const top = polished.math(`(${lineHeight} - ${size}) / 2`);
+  const iconSize = props.theme.iconSizes.sm;
+  const iconPosition = polished.math(`(${size} - ${iconSize}) / 2`);
+  const iconTop = polished.math(`${iconPosition} + ${top}`);
+  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);
 };
-var StyledRadioInput = styled__default["default"].input.attrs({
+const StyledRadioInput = styled__default["default"].input.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
   componentId: "sc-qsavpv-0"
-})(["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:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.borders.sm;
-}, StyledRadioLabel, function (props) {
-  return sizeStyles$c(props);
-}, StyledRadioLabel, StyledRadioLabel, function (props) {
-  return colorStyles$9(props);
-}, StyledRadioLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props);
-});
+})(["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:", ";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', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles$c(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles$9(props), StyledRadioLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
 StyledRadioInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$s = 'forms.checkbox';
-var colorStyles$8 = function colorStyles(props) {
-  var SHADE = 600;
-  var indeterminateBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  var indeterminateBackgroundColor = indeterminateBorderColor;
-  var indeterminateActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  var indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
-  var indeterminateDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+const COMPONENT_ID$s = 'forms.checkbox';
+const colorStyles$8 = props => {
+  const SHADE = 600;
+  const indeterminateBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const indeterminateBackgroundColor = indeterminateBorderColor;
+  const indeterminateActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
+  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);
 };
-var StyledCheckInput = styled__default["default"](StyledRadioInput).attrs({
+const StyledCheckInput = styled__default["default"](StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
   componentId: "sc-176jxxe-0"
-})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return colorStyles$8(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props);
-});
+})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles$8(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledCheckInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$r = 'forms.radio_message';
-var StyledRadioMessage = styled__default["default"](StyledMessage).attrs({
+const COMPONENT_ID$r = 'forms.radio_message';
+const StyledRadioMessage = styled__default["default"](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
-})(["padding-", ":", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * 6px"));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props);
-});
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 6px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledRadioMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$q = 'forms.checkbox_message';
-var StyledCheckMessage = styled__default["default"](StyledRadioMessage).attrs({
+const COMPONENT_ID$q = 'forms.checkbox_message';
+const StyledCheckMessage = styled__default["default"](StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
-})(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props);
-});
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledCheckMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -905,7 +625,8 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -916,16 +637,14 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
   })));
 };
 
-var COMPONENT_ID$p = 'forms.check_svg';
-var StyledCheckSvg = styled__default["default"](SvgCheckSmFill).attrs({
+const COMPONENT_ID$p = 'forms.check_svg';
+const StyledCheckSvg = styled__default["default"](SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
-})(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props);
-});
+})(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledCheckSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -941,7 +660,8 @@ var SvgDashFill = function SvgDashFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -950,78 +670,64 @@ var SvgDashFill = function SvgDashFill(props) {
   })));
 };
 
-var COMPONENT_ID$o = 'forms.dash_svg';
-var StyledDashSvg = styled__default["default"](SvgDashFill).attrs({
+const COMPONENT_ID$o = 'forms.dash_svg';
+const StyledDashSvg = styled__default["default"](SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
-})(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props);
-});
+})(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledDashSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$n = 'forms.file_upload';
-var colorStyles$7 = function colorStyles(props) {
-  var baseColor = reactTheming.getColor('primaryHue', 600, props.theme);
-  var hoverColor = reactTheming.getColor('primaryHue', 700, props.theme);
-  var activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
-  var disabledBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
-  var disabledForegroundColor = reactTheming.getColor('neutralHue', 400, props.theme);
-  var boxShadow = "inset ".concat(props.theme.shadows.md(polished.rgba(baseColor, 0.35)));
+const COMPONENT_ID$n = 'forms.file_upload';
+const colorStyles$7 = props => {
+  const baseColor = reactTheming.getColor('primaryHue', 600, props.theme);
+  const hoverColor = reactTheming.getColor('primaryHue', 700, props.theme);
+  const activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
+  const disabledBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
+  const disabledForegroundColor = reactTheming.getColor('neutralHue', 400, props.theme);
+  const boxShadow = `inset ${props.theme.shadows.md(polished.rgba(baseColor, 0.35))}`;
   return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : reactTheming.getColor('neutralHue', 600, props.theme), props.isDragging && polished.rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, polished.rgba(baseColor, 0.08), hoverColor, boxShadow, activeColor, polished.rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
 };
-var sizeStyles$b = function sizeStyles(props) {
-  var marginTop = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
-  var paddingHorizontal = "".concat(props.isCompact ? 2 : 4, "em");
-  var paddingVertical = polished.math("".concat(props.theme.space.base * (props.isCompact ? 2.5 : 5), " - ").concat(props.theme.borderWidths.sm));
-  var fontSize = props.theme.fontSizes.md;
-  var lineHeight = reactTheming.getLineHeight(props.theme.space.base * 5, fontSize);
+const sizeStyles$b = props => {
+  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  const paddingHorizontal = `${props.isCompact ? 2 : 4}em`;
+  const paddingVertical = polished.math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
+  const fontSize = props.theme.fontSizes.md;
+  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);
 };
-var StyledFileUpload = styled__default["default"].div.attrs({
+const StyledFileUpload = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
-})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&:focus{outline:none;}&[aria-disabled='true']{cursor:default;}", ";", ";"], function (props) {
-  return props.theme.rtl ? 'rtl' : 'ltr';
-}, function (props) {
-  return props.theme.borderWidths.sm;
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, sizeStyles$b, colorStyles$7, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props);
-});
+})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&:focus{outline:none;}&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$b, colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledFileUpload.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$m = 'forms.file.close';
-var StyledFileClose = styled__default["default"].div.attrs({
+const COMPONENT_ID$m = 'forms.file.close';
+const StyledFileClose = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.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;}", ";"], function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return 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;cursor:pointer;color:", ";&: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
 };
 
-var COMPONENT_ID$l = 'forms.file';
-var colorStyles$6 = function colorStyles(props) {
-  var borderColor;
-  var focusBorderColor;
-  var foregroundColor;
+const COMPONENT_ID$l = 'forms.file';
+const colorStyles$6 = props => {
+  let borderColor;
+  let focusBorderColor;
+  let foregroundColor;
   if (props.validation === 'success') {
     borderColor = reactTheming.getColor('successHue', 600, props.theme);
     focusBorderColor = borderColor;
@@ -1035,100 +741,107 @@ var colorStyles$6 = function colorStyles(props) {
     focusBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
     foregroundColor = props.theme.colors.foreground;
   }
-  var boxShadow = "\n    ".concat(props.focusInset ? 'inset' : '', "\n    ").concat(props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35)));
-  return "\n    border-color: ".concat(borderColor, ";\n    color: ").concat(foregroundColor, ";\n\n    &:focus {\n      box-shadow: ").concat(boxShadow, ";\n      border-color: ").concat(focusBorderColor, ";\n    }\n  ");
-};
-var sizeStyles$a = function sizeStyles(props) {
-  var size = "".concat(props.theme.space.base * (props.isCompact ? 7 : 10), "px");
-  var spacing = "".concat(props.theme.space.base * (props.isCompact ? 2 : 3), "px");
-  var fontSize = props.theme.fontSizes.md;
-  var lineHeight = reactTheming.getLineHeight(props.theme.space.base * 5, fontSize);
-  return "\n    box-sizing: border-box;\n    border: ".concat(props.theme.borders.sm, ";\n    border-radius: ").concat(props.theme.borderRadii.md, ";\n    padding: 0 ").concat(spacing, ";\n    height: ").concat(size, ";\n    line-height: ").concat(lineHeight, ";\n    font-size: ").concat(fontSize, ";\n\n    & > span {\n      width: 100%;\n    }\n\n    & > ").concat(StyledFileClose, " {\n      width: ").concat(size, ";\n      height: ").concat(size, ";\n      margin-").concat(props.theme.rtl ? 'left' : 'right', ": -").concat(spacing, ";\n    }\n  ");
+  const boxShadow = `
+    ${props.focusInset ? 'inset' : ''}
+    ${props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35))}`;
+  return `
+    border-color: ${borderColor};
+    color: ${foregroundColor};
+
+    &:focus {
+      box-shadow: ${boxShadow};
+      border-color: ${focusBorderColor};
+    }
+  `;
+};
+const sizeStyles$a = props => {
+  const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`;
+  const spacing = `${props.theme.space.base * (props.isCompact ? 2 : 3)}px`;
+  const fontSize = props.theme.fontSizes.md;
+  const lineHeight = reactTheming.getLineHeight(props.theme.space.base * 5, fontSize);
+  return `
+    box-sizing: border-box;
+    border: ${props.theme.borders.sm};
+    border-radius: ${props.theme.borderRadii.md};
+    padding: 0 ${spacing};
+    height: ${size};
+    line-height: ${lineHeight};
+    font-size: ${fontSize};
+
+    & > span {
+      width: 100%;
+    }
+
+    & > ${StyledFileClose} {
+      width: ${size};
+      height: ${size};
+      margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing};
+    }
+  `;
 };
-var StyledFile = styled__default["default"].div.attrs({
+const StyledFile = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
-})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;", ";&:focus{outline:none;}", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a, colorStyles$6, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props);
-});
+})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;", ";&:focus{outline:none;}", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a, colorStyles$6, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledFile.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$k = 'forms.file.delete';
-var StyledFileDelete = styled__default["default"](StyledFileClose).attrs({
+const COMPONENT_ID$k = 'forms.file.delete';
+const StyledFileDelete = styled__default["default"](StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], function (props) {
-  return reactTheming.getColor('dangerHue', 600, props.theme);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props);
-});
+})(["color:", ";", ";"], props => reactTheming.getColor('dangerHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledFileDelete.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$h = ["children", "isCompact", "theme"];
-var COMPONENT_ID$j = 'forms.file.icon';
-var StyledFileIcon = styled__default["default"](function (_ref) {
-  var children = _ref.children;
-      _ref.isCompact;
-      _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$h);
+const COMPONENT_ID$j = 'forms.file.icon';
+const StyledFileIcon = styled__default["default"](_ref => {
+  let {
+    children,
+    isCompact,
+    theme,
+    ...props
+  } = _ref;
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
-})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], function (props) {
-  return props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return props.theme.space.base * 2;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props);
-});
+})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledFileIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$i = 'forms.file_list';
-var StyledFileList = styled__default["default"].ul.attrs({
+const COMPONENT_ID$i = 'forms.file_list';
+const StyledFileList = styled__default["default"].ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
-})(["margin:0;padding:0;list-style:none;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props);
-});
+})(["margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledFileList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$h = 'forms.file_list.item';
-var StyledFileListItem = styled__default["default"].li.attrs({
+const COMPONENT_ID$h = 'forms.file_list.item';
+const StyledFileListItem = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
-})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, function (props) {
-  return props.theme.space.base * 2;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props);
-});
+})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledFileListItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -1144,7 +857,8 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _circle$3 || (_circle$3 = /*#__PURE__*/React__namespace.createElement("circle", {
     cx: 6,
     cy: 6,
@@ -1153,110 +867,82 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
   })));
 };
 
-var COMPONENT_ID$g = 'forms.radio_svg';
-var StyledRadioSvg = styled__default["default"](SvgCircleSmFill$1).attrs({
+const COMPONENT_ID$g = 'forms.radio_svg';
+const StyledRadioSvg = styled__default["default"](SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
-})(["transition:opacity 0.25 ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props);
-});
+})(["transition:opacity 0.25 ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledRadioSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$f = 'forms.toggle_label';
-var sizeStyles$9 = function sizeStyles(props) {
-  var size = props.theme.space.base * 10;
-  var padding = size + props.theme.space.base * 2;
+const COMPONENT_ID$f = 'forms.toggle_label';
+const sizeStyles$9 = props => {
+  const size = props.theme.space.base * 10;
+  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);
 };
-var StyledToggleLabel = styled__default["default"](StyledCheckLabel).attrs({
+const StyledToggleLabel = styled__default["default"](StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
-})(["", ";", ";"], function (props) {
-  return sizeStyles$9(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props);
-});
+})(["", ";", ";"], props => sizeStyles$9(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledToggleLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$e = 'forms.toggle_hint';
-var StyledToggleHint = styled__default["default"](StyledHint).attrs({
+const COMPONENT_ID$e = 'forms.toggle_hint';
+const StyledToggleHint = styled__default["default"](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
-})(["padding-", ":", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * 12px"));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props);
-});
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledToggleHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$d = 'forms.toggle';
-var colorStyles$5 = function colorStyles(props) {
-  var SHADE = 600;
-  var backgroundColor = reactTheming.getColor('neutralHue', SHADE - 100, props.theme);
-  var hoverBackgroundColor = reactTheming.getColor('neutralHue', SHADE, props.theme);
-  var activeBackgroundColor = reactTheming.getColor('neutralHue', SHADE + 100, props.theme);
+const COMPONENT_ID$d = 'forms.toggle';
+const colorStyles$5 = props => {
+  const SHADE = 600;
+  const backgroundColor = reactTheming.getColor('neutralHue', SHADE - 100, props.theme);
+  const hoverBackgroundColor = reactTheming.getColor('neutralHue', SHADE, props.theme);
+  const activeBackgroundColor = reactTheming.getColor('neutralHue', SHADE + 100, props.theme);
   return styled.css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
 };
-var sizeStyles$8 = function sizeStyles(props) {
-  var height = "".concat(props.theme.space.base * 5, "px");
-  var width = "".concat(props.theme.space.base * 10, "px");
-  var iconSize = props.theme.iconSizes.md;
-  var iconPosition = polished.math("(".concat(height, " - ").concat(iconSize, ") / 2"));
-  var checkedIconPosition = polished.math("".concat(width, " - ").concat(iconSize, " - ").concat(iconPosition));
+const sizeStyles$8 = props => {
+  const height = `${props.theme.space.base * 5}px`;
+  const width = `${props.theme.space.base * 10}px`;
+  const iconSize = props.theme.iconSizes.md;
+  const iconPosition = polished.math(`(${height} - ${iconSize}) / 2`);
+  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);
 };
-var StyledToggleInput = styled__default["default"](StyledCheckInput).attrs({
+const StyledToggleInput = styled__default["default"](StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
-})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, function (props) {
-  return sizeStyles$8(props);
-}, function (props) {
-  return colorStyles$5(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props);
-});
+})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, props => sizeStyles$8(props), props => colorStyles$5(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledToggleInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$c = 'forms.toggle_message';
-var StyledToggleMessage = styled__default["default"](StyledMessage).attrs({
+const COMPONENT_ID$c = 'forms.toggle_message';
+const StyledToggleMessage = styled__default["default"](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
-})(["padding-", ":", ";& ", "{", ":", ";}", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * 12px"));
-}, StyledMessageIcon, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * 10px - ").concat(props.theme.iconSizes.md));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props);
-});
+})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledToggleMessage.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -1272,7 +958,8 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
     cx: 8,
     cy: 8,
@@ -1281,53 +968,45 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
   })));
 };
 
-var COMPONENT_ID$b = 'forms.toggle_svg';
-var StyledToggleSvg = styled__default["default"](SvgCircleSmFill).attrs({
+const COMPONENT_ID$b = 'forms.toggle_svg';
+const StyledToggleSvg = styled__default["default"](SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
-})(["transition:all 0.15s ease-in-out;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props);
-});
+})(["transition:all 0.15s ease-in-out;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledToggleSvg.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$a = 'forms.select';
-var colorStyles$4 = function colorStyles(props) {
-  var color = reactTheming.getColor('neutralHue', 700, props.theme);
+const COMPONENT_ID$a = 'forms.select';
+const colorStyles$4 = props => {
+  const color = reactTheming.getColor('neutralHue', 700, props.theme);
   return styled.css(["&:hover + ", ",&:focus + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
 };
-var sizeStyles$7 = function sizeStyles(props) {
-  var padding = polished.math("".concat(props.theme.iconSizes.md, " + ").concat(props.theme.space.base * 5));
-  var iconVerticalPosition = "".concat(props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1, "px");
-  var iconHorizontalPosition = "".concat(props.theme.space.base * 3, "px");
+const sizeStyles$7 = props => {
+  const padding = polished.math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`);
+  const iconVerticalPosition = `${props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1}px`;
+  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);
 };
-var StyledSelect = styled__default["default"](StyledTextInput).attrs({
+const StyledSelect = styled__default["default"](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-8xdxpt-0"
-})(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], function (props) {
-  return sizeStyles$7(props);
-}, function (props) {
-  return colorStyles$4(props);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, StyledTextMediaFigure);
+})(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], props => sizeStyles$7(props), props => colorStyles$4(props), props => props.theme.colors.foreground, StyledTextMediaFigure);
 StyledSelect.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$9 = 'forms.select_wrapper';
-var StyledSelectWrapper = styled__default["default"](StyledTextFauxInput).attrs({
+const COMPONENT_ID$9 = 'forms.select_wrapper';
+const StyledSelectWrapper = styled__default["default"](StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.0',
+  'data-garden-version': '8.58.0',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1337,321 +1016,331 @@ StyledSelectWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$8 = 'forms.range';
-var thumbStyles = function thumbStyles(styles) {
-  var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return "\n    &".concat(modifier, "::-moz-range-thumb {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-ms-thumb {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-webkit-slider-thumb {\n      ").concat(styles, "\n    }\n  ");
-};
-var trackStyles = function trackStyles(styles) {
-  var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return "\n    &".concat(modifier, "::-moz-range-track {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-ms-track {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-webkit-slider-runnable-track {\n      ").concat(styles, "\n    }\n  ");
-};
-var trackLowerStyles = function trackLowerStyles(styles) {
-  var modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return "\n    &".concat(modifier, "::-moz-range-progress {\n      ").concat(styles, "\n    }\n\n    &").concat(modifier, "::-ms-fill-lower {\n      ").concat(styles, "\n    }\n  ");
-};
-var colorStyles$3 = function colorStyles(props) {
-  var SHADE = 600;
-  var thumbBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  var thumbBorderColor = thumbBackgroundColor;
-  var thumbBoxShadow = props.theme.shadows.lg(polished.math("".concat(props.theme.space.base, " * 1px")), polished.math("".concat(props.theme.space.base, " * 2px")), reactTheming.getColor('neutralHue', SHADE + 200, props.theme, 0.24));
-  var thumbActiveBackgroundColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  var thumbActiveBorderColor = thumbBorderColor;
-  var thumbDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  var thumbDisabledBorderColor = thumbDisabledBackgroundColor;
-  var thumbFocusBoxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', SHADE, props.theme, 0.35));
-  var thumbHoverBackgroundColor = thumbActiveBackgroundColor;
-  var thumbHoverBorderColor = thumbHoverBackgroundColor;
-  var trackBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  var trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : '';
-  var trackBackgroundImage = props.hasLowerTrack ? "linear-gradient(".concat(trackLowerBackgroundColor, ", ").concat(trackLowerBackgroundColor, ")") : '';
-  var trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : '';
-  var trackDisabledBackgroundImage = props.hasLowerTrack ? "linear-gradient(".concat(trackDisabledLowerBackgroundColor, ", ").concat(trackDisabledLowerBackgroundColor, ")") : '';
-  return styled.css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles("\n      background-color: ".concat(trackBackgroundColor, ";\n      background-image: ").concat(trackBackgroundImage, "; /* provide means for styling lower range on WebKit */\n    ")), thumbStyles("\n      border-color: ".concat(thumbBorderColor, ";\n      box-shadow: ").concat(thumbBoxShadow, ";\n      background-color: ").concat(thumbBackgroundColor, ";\n    ")), trackLowerStyles("\n      background-color: ".concat(trackLowerBackgroundColor, ";\n    ")), thumbStyles("\n        transition:\n          border-color .25s ease-in-out,\n          background-color .25s ease-in-out;\n        border-color: ".concat(thumbHoverBorderColor, ";\n        background-color: ").concat(thumbHoverBackgroundColor, ";\n      "), ':hover'), thumbStyles("\n        box-shadow: ".concat(thumbFocusBoxShadow, ";\n      "), '[data-garden-focus-visible="true"]'), thumbStyles("\n        border-color: ".concat(thumbActiveBorderColor, ";\n        background-color: ").concat(thumbActiveBackgroundColor, "\n      "), ':active'), trackStyles("\n        background-image: ".concat(trackDisabledBackgroundImage, ";\n      "), ':disabled'), thumbStyles("\n        border-color: ".concat(thumbDisabledBorderColor, ";\n        box-shadow: none;\n        background-color: ").concat(thumbDisabledBackgroundColor, ";\n      "), ':disabled'), trackLowerStyles("\n        background-color: ".concat(trackDisabledLowerBackgroundColor, "\n      "), ':disabled'));
-};
-var sizeStyles$6 = function sizeStyles(props) {
-  var thumbSize = polished.math("".concat(props.theme.space.base, " * 5px"));
-  var trackHeight = polished.math("".concat(props.theme.space.base, " * 1.5px"));
-  var trackBorderRadius = trackHeight;
-  var trackMargin = polished.math("(".concat(thumbSize, " - ").concat(trackHeight, ") / 2 + ").concat(props.theme.shadowWidths.md));
-  var thumbMargin = polished.math("(".concat(trackHeight, " - ").concat(thumbSize, ") / 2"));
-  return styled.css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, polished.math("".concat(props.theme.space.base, " * 2px")), trackStyles("\n      margin: ".concat(trackMargin, " 0;\n      border-radius: ").concat(trackBorderRadius, ";\n      height: ").concat(trackHeight, ";\n    ")), thumbStyles("\n      margin: ".concat(thumbMargin, " 0; /* reset for IE */\n      width: ").concat(thumbSize, ";\n      height: ").concat(thumbSize, ";\n    ")), trackLowerStyles("\n      border-top-".concat(props.theme.rtl ? 'right' : 'left', "-radius: ").concat(trackBorderRadius, ";\n      border-bottom-").concat(props.theme.rtl ? 'right' : 'left', "-radius: ").concat(trackBorderRadius, ";\n      height: ").concat(trackHeight, ";\n    ")));
-};
-var StyledRangeInput = styled__default["default"].input.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$8,
-    'data-garden-version': '8.57.0',
-    type: 'range',
-    style: {
-      backgroundSize: props.hasLowerTrack && props.backgroundSize
+const COMPONENT_ID$8 = 'forms.range';
+const thumbStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-thumb {
+      ${styles}
     }
-  };
-}).withConfig({
+
+    &${modifier}::-ms-thumb {
+      ${styles}
+    }
+
+    &${modifier}::-webkit-slider-thumb {
+      ${styles}
+    }
+  `;
+};
+const trackStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-track {
+      ${styles}
+    }
+
+    &${modifier}::-ms-track {
+      ${styles}
+    }
+
+    &${modifier}::-webkit-slider-runnable-track {
+      ${styles}
+    }
+  `;
+};
+const trackLowerStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-progress {
+      ${styles}
+    }
+
+    &${modifier}::-ms-fill-lower {
+      ${styles}
+    }
+  `;
+};
+const colorStyles$3 = props => {
+  const SHADE = 600;
+  const thumbBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const thumbBorderColor = thumbBackgroundColor;
+  const thumbBoxShadow = props.theme.shadows.lg(polished.math(`${props.theme.space.base} * 1px`), polished.math(`${props.theme.space.base} * 2px`), reactTheming.getColor('neutralHue', SHADE + 200, props.theme, 0.24));
+  const thumbActiveBackgroundColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const thumbActiveBorderColor = thumbBorderColor;
+  const thumbDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
+  const thumbFocusBoxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', SHADE, props.theme, 0.35));
+  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
+  const thumbHoverBorderColor = thumbHoverBackgroundColor;
+  const trackBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+  const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : '';
+  const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
+  const trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : '';
+  const trackDisabledBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
+  return styled.css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(`
+      background-color: ${trackBackgroundColor};
+      background-image: ${trackBackgroundImage}; /* provide means for styling lower range on WebKit */
+    `), thumbStyles(`
+      border-color: ${thumbBorderColor};
+      box-shadow: ${thumbBoxShadow};
+      background-color: ${thumbBackgroundColor};
+    `), trackLowerStyles(`
+      background-color: ${trackLowerBackgroundColor};
+    `), thumbStyles(`
+        transition:
+          border-color .25s ease-in-out,
+          background-color .25s ease-in-out;
+        border-color: ${thumbHoverBorderColor};
+        background-color: ${thumbHoverBackgroundColor};
+      `, ':hover'), thumbStyles(`
+        box-shadow: ${thumbFocusBoxShadow};
+      `, '[data-garden-focus-visible="true"]'), thumbStyles(`
+        border-color: ${thumbActiveBorderColor};
+        background-color: ${thumbActiveBackgroundColor}
+      `, ':active'), trackStyles(`
+        background-image: ${trackDisabledBackgroundImage};
+      `, ':disabled'), thumbStyles(`
+        border-color: ${thumbDisabledBorderColor};
+        box-shadow: none;
+        background-color: ${thumbDisabledBackgroundColor};
+      `, ':disabled'), trackLowerStyles(`
+        background-color: ${trackDisabledLowerBackgroundColor}
+      `, ':disabled'));
+};
+const sizeStyles$6 = props => {
+  const thumbSize = polished.math(`${props.theme.space.base} * 5px`);
+  const trackHeight = polished.math(`${props.theme.space.base} * 1.5px`);
+  const trackBorderRadius = trackHeight;
+  const trackMargin = polished.math(`(${thumbSize} - ${trackHeight}) / 2 + ${props.theme.shadowWidths.md}`);
+  const thumbMargin = polished.math(`(${trackHeight} - ${thumbSize}) / 2`);
+  return styled.css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, polished.math(`${props.theme.space.base} * 2px`), trackStyles(`
+      margin: ${trackMargin} 0;
+      border-radius: ${trackBorderRadius};
+      height: ${trackHeight};
+    `), thumbStyles(`
+      margin: ${thumbMargin} 0; /* reset for IE */
+      width: ${thumbSize};
+      height: ${thumbSize};
+    `), trackLowerStyles(`
+      border-top-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
+      border-bottom-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
+      height: ${trackHeight};
+    `));
+};
+const StyledRangeInput = styled__default["default"].input.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '8.58.0',
+  type: 'range',
+  style: {
+    backgroundSize: props.hasLowerTrack && props.backgroundSize
+  }
+})).withConfig({
   displayName: "StyledRangeInput",
   componentId: "sc-1iv2yqp-0"
-})(["appearance:none;direction:", ";margin:0;background-color:inherit;cursor:pointer;padding:0;width:100%;vertical-align:middle;", " &::-webkit-slider-container,&::-webkit-slider-runnable-track{background-size:inherit;}", ";", " ", ";&::-moz-focus-outer{border:0;}&::-ms-tooltip{display:none;}&:focus{outline:none;}&:disabled{cursor:default;}", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return trackStyles("\n      appearance: none;\n      border-color: transparent; /* reset for IE */\n      background-repeat: repeat-y;\n      background-size: 0;\n      background-position: ".concat(props.theme.rtl ? '100% 100%' : '0% 0%', ";\n      width: 99.8%; /* fix for IE which cuts off the upper track's border radius */\n      color: transparent; /* reset for IE */\n      box-sizing: border-box; /* reset for IE */\n    "));
-}, function (props) {
-  return sizeStyles$6(props);
-}, function (props) {
-  return thumbStyles("\n      appearance: none;\n      transition: box-shadow .1s ease-in-out;\n      border: ".concat(props.theme.borders.md, ";\n      border-radius: 100%;\n      box-sizing: border-box;\n    "));
-}, function (props) {
-  return colorStyles$3(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["appearance:none;direction:", ";margin:0;background-color:inherit;cursor:pointer;padding:0;width:100%;vertical-align:middle;", " &::-webkit-slider-container,&::-webkit-slider-runnable-track{background-size:inherit;}", ";", " ", ";&::-moz-focus-outer{border:0;}&::-ms-tooltip{display:none;}&:focus{outline:none;}&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => trackStyles(`
+      appearance: none;
+      border-color: transparent; /* reset for IE */
+      background-repeat: repeat-y;
+      background-size: 0;
+      background-position: ${props.theme.rtl ? '100% 100%' : '0% 0%'};
+      width: 99.8%; /* fix for IE which cuts off the upper track's border radius */
+      color: transparent; /* reset for IE */
+      box-sizing: border-box; /* reset for IE */
+    `), props => sizeStyles$6(props), props => thumbStyles(`
+      appearance: none;
+      transition: box-shadow .1s ease-in-out;
+      border: ${props.theme.borders.md};
+      border-radius: 100%;
+      box-sizing: border-box;
+    `), props => colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledRangeInput.defaultProps = {
   backgroundSize: '0%',
   hasLowerTrack: true,
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'forms.slider';
-var StyledSlider = styled__default["default"].div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$7,
-    'data-garden-version': '8.57.0',
-    'aria-disabled': props.isDisabled
-  };
+const COMPONENT_ID$7 = 'forms.slider';
+const StyledSlider = styled__default["default"].div.attrs({
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSlider",
   componentId: "sc-1di437a-0"
-})(["display:block;position:relative;z-index:0;cursor:pointer;height:", ";&[aria-disabled='true']{cursor:default;}", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";"], function (props) {
-  return polished.math("(".concat(props.theme.space.base, " * 5px) + (").concat(props.theme.shadowWidths.md, " * 2)"));
-}, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, function (props) {
-  return polished.math("".concat(props.theme.space.base, " * 2px"));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+})(["display:block;position:relative;z-index:0;cursor:pointer;height:", ";&[aria-disabled='true']{cursor:default;}", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";"], props => polished.math(`(${props.theme.space.base} * 5px) + (${props.theme.shadowWidths.md} * 2)`), StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props => polished.math(`${props.theme.space.base} * 2px`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledSlider.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$6 = 'forms.slider_thumb';
-var colorStyles$2 = function colorStyles(props) {
-  var SHADE = 600;
-  var backgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  var borderColor = backgroundColor;
-  var boxShadow = props.theme.shadows.lg(polished.math("".concat(props.theme.space.base, " * 1px")), polished.math("".concat(props.theme.space.base, " * 2px")), reactTheming.getColor('neutralHue', SHADE + 200, props.theme, 0.24));
-  var activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  var activeBorderColor = borderColor;
-  var hoverBackgroundColor = activeBackgroundColor;
-  var hoverBorderColor = hoverBackgroundColor;
-  var focusBoxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', SHADE, props.theme, 0.35));
-  var disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  var disabledBorderColor = disabledBackgroundColor;
+const COMPONENT_ID$6 = 'forms.slider_thumb';
+const colorStyles$2 = props => {
+  const SHADE = 600;
+  const backgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const borderColor = backgroundColor;
+  const boxShadow = props.theme.shadows.lg(polished.math(`${props.theme.space.base} * 1px`), polished.math(`${props.theme.space.base} * 2px`), reactTheming.getColor('neutralHue', SHADE + 200, props.theme, 0.24));
+  const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const activeBorderColor = borderColor;
+  const hoverBackgroundColor = activeBackgroundColor;
+  const hoverBorderColor = hoverBackgroundColor;
+  const focusBoxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', SHADE, props.theme, 0.35));
+  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const disabledBorderColor = disabledBackgroundColor;
   return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";&[data-garden-focus-visible='true']{box-shadow:", ";}&:hover,&[data-garden-hover='true']{border-color:", ";background-color:", ";}&:active,&[data-garden-active='true']{border-color:", ";background-color:", ";}&[aria-disabled='true']{border-color:", ";box-shadow:none;background-color:", ";}"], borderColor, boxShadow, backgroundColor, focusBoxShadow, hoverBorderColor, hoverBackgroundColor, activeBorderColor, activeBackgroundColor, disabledBorderColor, disabledBackgroundColor);
 };
-var sizeStyles$5 = function sizeStyles(props) {
-  var size = polished.math("".concat(props.theme.space.base, " * 5px"));
-  var marginTop = polished.math("".concat(size, " / -2"));
+const sizeStyles$5 = props => {
+  const size = polished.math(`${props.theme.space.base} * 5px`);
+  const marginTop = polished.math(`${size} / -2`);
   return styled.css(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size);
 };
-var StyledSliderThumb = styled__default["default"].div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.57.0',
-    'aria-disabled': props.isDisabled
-  };
-}).withConfig({
+const StyledSliderThumb = styled__default["default"].div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.58.0',
+  'aria-disabled': props.isDisabled
+})).withConfig({
   displayName: "StyledSliderThumb",
   componentId: "sc-yspbwa-0"
-})(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";&:focus{outline:none;}", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return polished.math("".concat(props.position, " * 1px"));
-}, function (props) {
-  return props.theme.borders.md;
-}, function (props) {
-  return sizeStyles$5(props);
-}, function (props) {
-  return colorStyles$2(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";&:focus{outline:none;}", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5(props), props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledSliderThumb.defaultProps = {
   position: 0,
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'forms.slider_track';
-var colorStyles$1 = function colorStyles(props) {
-  var SHADE = 600;
-  var backgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  var backgroundImageColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  var disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+const COMPONENT_ID$5 = 'forms.slider_track';
+const colorStyles$1 = props => {
+  const SHADE = 600;
+  const backgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+  const backgroundImageColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
   return styled.css(["background-color:", ";background-image:linear-gradient(", ",", ");&[aria-disabled='true']{background-image:linear-gradient(", ",", ");}"], backgroundColor, backgroundImageColor, backgroundImageColor, disabledBackgroundColor, disabledBackgroundColor);
 };
-var sizeStyles$4 = function sizeStyles(props) {
-  var height = polished.math("".concat(props.theme.space.base, " * 1.5px"));
-  var backgroundPosition = polished.math("".concat(props.backgroundPosition, " * 1px"));
-  var backgroundSize = polished.math("".concat(props.backgroundSize, " * 1px"));
-  var borderRadius = height;
-  var marginTop = polished.math("".concat(height, " / -2"));
-  var padding = polished.math("".concat(props.theme.space.base, " * 2.5px"));
+const sizeStyles$4 = props => {
+  const height = polished.math(`${props.theme.space.base} * 1.5px`);
+  const backgroundPosition = polished.math(`${props.backgroundPosition} * 1px`);
+  const backgroundSize = polished.math(`${props.backgroundSize} * 1px`);
+  const borderRadius = height;
+  const marginTop = polished.math(`${height} / -2`);
+  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);
 };
-var StyledSliderTrack = styled__default["default"].div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.57.0',
-    'aria-disabled': props.isDisabled
-  };
-}).withConfig({
+const StyledSliderTrack = styled__default["default"].div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.58.0',
+  'aria-disabled': props.isDisabled
+})).withConfig({
   displayName: "StyledSliderTrack",
   componentId: "sc-aw5m6g-0"
-})(["position:absolute;top:50%;box-sizing:border-box;background-origin:content-box;background-repeat:repeat-y;width:100%;", ";", ";", ";"], function (props) {
-  return sizeStyles$4(props);
-}, function (props) {
-  return colorStyles$1(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["position:absolute;top:50%;box-sizing:border-box;background-origin:content-box;background-repeat:repeat-y;width:100%;", ";", ";", ";"], props => sizeStyles$4(props), props => colorStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledSliderTrack.defaultProps = {
   backgroundSize: 0,
   backgroundPosition: 0,
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'forms.slider_track_rail';
-var sizeStyles$3 = function sizeStyles(props) {
-  var height = polished.math("".concat(props.theme.space.base, " * 1.5px"));
-  var margin = polished.math("".concat(props.theme.space.base, " * 2.5px"));
-  return styled.css(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? "-".concat(margin) : margin, props.theme.rtl ? margin : "-".concat(margin), height);
+const COMPONENT_ID$4 = 'forms.slider_track_rail';
+const sizeStyles$3 = props => {
+  const height = polished.math(`${props.theme.space.base} * 1.5px`);
+  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);
 };
-var StyledSliderTrackRail = styled__default["default"].div.attrs({
+const StyledSliderTrackRail = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
-})(["position:relative;", ";", ";"], function (props) {
-  return sizeStyles$3(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["position:relative;", ";", ";"], props => sizeStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledSliderTrackRail.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'forms.tile_icon';
-var sizeStyles$2 = function sizeStyles(props) {
-  var iconSize = polished.math("".concat(props.theme.iconSizes.md, " * 2"));
-  var position;
-  var top;
-  var horizontalValue;
+const COMPONENT_ID$3 = 'forms.tile_icon';
+const sizeStyles$2 = props => {
+  const iconSize = polished.math(`${props.theme.iconSizes.md} * 2`);
+  let position;
+  let top;
+  let horizontalValue;
   if (!props.isCentered) {
     position = 'absolute';
-    top = "".concat(props.theme.space.base * 6, "px");
-    horizontalValue = "left: ".concat(props.theme.space.base * 5, "px");
+    top = `${props.theme.space.base * 6}px`;
+    horizontalValue = `left: ${props.theme.space.base * 5}px`;
     if (props.theme.rtl) {
-      horizontalValue = "right: ".concat(props.theme.space.base * 5, "px");
+      horizontalValue = `right: ${props.theme.space.base * 5}px`;
     }
   }
   return styled.css(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize);
 };
-var StyledTileIcon = styled__default["default"].span.attrs({
+const StyledTileIcon = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
-})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], function (props) {
-  return sizeStyles$2(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], props => sizeStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledTileIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'forms.tile';
-var colorStyles = function colorStyles(props) {
-  var SHADE = 600;
-  var iconColor = reactTheming.getColor('neutralHue', SHADE, props.theme);
-  var color = reactTheming.getColor('neutralHue', SHADE + 200, props.theme);
-  var borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  var hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
-  var hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
-  var focusBorderColor = hoverBorderColor;
-  var focusBoxShadow = props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35));
-  var activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
-  var activeBorderColor = focusBorderColor;
-  var disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
-  var disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  var disabledColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
-  var selectedBorderColor = focusBorderColor;
-  var selectedBackgroundColor = selectedBorderColor;
-  var selectedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
-  var selectedHoverBackgroundColor = selectedHoverBorderColor;
-  var selectedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
-  var selectedActiveBackgroundColor = selectedActiveBorderColor;
-  var selectedDisabledBackgroundColor = disabledBorderColor;
+const COMPONENT_ID$2 = 'forms.tile';
+const colorStyles = props => {
+  const SHADE = 600;
+  const iconColor = reactTheming.getColor('neutralHue', SHADE, props.theme);
+  const color = reactTheming.getColor('neutralHue', SHADE + 200, props.theme);
+  const borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
+  const hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const focusBorderColor = hoverBorderColor;
+  const focusBoxShadow = props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35));
+  const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBorderColor = focusBorderColor;
+  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
+  const disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+  const disabledColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
+  const selectedBorderColor = focusBorderColor;
+  const selectedBackgroundColor = selectedBorderColor;
+  const selectedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const selectedHoverBackgroundColor = selectedHoverBorderColor;
+  const selectedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
+  const selectedActiveBackgroundColor = selectedActiveBorderColor;
+  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);
 };
-var StyledTile = styled__default["default"].label.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.57.0',
-    'data-garden-focus-visible': props.isFocused,
-    'data-garden-selected': props.isSelected
-  };
-}).withConfig({
+const StyledTile = styled__default["default"].label.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.58.0',
+  'data-garden-focus-visible': props.isFocused,
+  'data-garden-selected': props.isSelected
+})).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"
-})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";cursor:", ";padding:", "px;direction:", ";", ";", ";"], function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return !props.isDisabled && 'pointer';
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";cursor:", ";padding:", "px;direction:", ";min-width:132px;word-break:break-word;", ";", ";"], props => props.theme.borderRadii.md, props => !props.isDisabled && 'pointer', props => props.theme.space.base * 5, props => props.theme.rtl && 'rtl', props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledTile.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'forms.tile_description';
-var sizeStyles$1 = function sizeStyles(props) {
-  var marginDirection = 'left';
-  var marginValue;
+const COMPONENT_ID$1 = 'forms.tile_description';
+const sizeStyles$1 = props => {
+  let marginDirection = 'left';
+  let marginValue;
   if (props.theme.rtl) {
     marginDirection = 'right';
   }
   if (!props.isCentered) {
-    marginValue = polished.math("(".concat(props.theme.iconSizes.md, " * 2) + ").concat(props.theme.space.base * 5, "px"));
+    marginValue = polished.math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
   }
   return styled.css(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue);
 };
-var StyledTileDescription = styled__default["default"].span.attrs({
+const StyledTileDescription = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
-})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], function (props) {
-  return props.isCentered && 'center';
-}, function (props) {
-  return reactTheming.getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm);
-}, function (props) {
-  return props.theme.fontSizes.sm;
-}, function (props) {
-  return sizeStyles$1(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], props => props.isCentered && 'center', props => reactTheming.getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTileDescription.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var 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;"]);
@@ -1659,91 +1348,66 @@ StyledTileInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'forms.tile_label';
-var sizeStyles = function sizeStyles(props) {
-  var marginDirection = 'left';
-  var marginTop = "".concat(props.theme.space.base * 2, "px");
-  var marginValue;
+const COMPONENT_ID = 'forms.tile_label';
+const sizeStyles = props => {
+  let marginDirection = 'left';
+  let marginTop = `${props.theme.space.base * 2}px`;
+  let marginValue;
   if (props.theme.rtl) {
     marginDirection = 'right';
   }
   if (!props.isCentered) {
-    marginValue = polished.math("(".concat(props.theme.iconSizes.md, " * 2) + ").concat(props.theme.space.base * 5, "px"));
+    marginValue = polished.math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
     marginTop = '0';
   }
   return styled.css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
 };
-var StyledTileLabel = styled__default["default"].span.attrs({
+const StyledTileLabel = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
-})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], function (props) {
-  return props.isCentered && 'center';
-}, function (props) {
-  return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledTileLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _excluded$g = ["getInputProps", "getMessageProps"];
-var Field = React__default["default"].forwardRef(function (props, ref) {
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasHint = _useState2[0],
-      setHasHint = _useState2[1];
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasMessage = _useState4[0],
-      setHasMessage = _useState4[1];
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isLabelActive = _useState6[0],
-      setIsLabelActive = _useState6[1];
-  var _useState7 = React.useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isLabelHovered = _useState8[0],
-      setIsLabelHovered = _useState8[1];
-  var multiThumbRangeRef = React.useRef(null);
-  var _useField = containerField.useField(props.id),
-      _getInputProps = _useField.getInputProps,
-      _getMessageProps = _useField.getMessageProps,
-      propGetters = _objectWithoutProperties(_useField, _excluded$g);
-  var fieldProps = React.useMemo(function () {
-    return _objectSpread2(_objectSpread2({}, propGetters), {}, {
-      getInputProps: function getInputProps(options) {
-        var describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        return _getInputProps(options, _objectSpread2(_objectSpread2({}, describeOptions), {}, {
-          isDescribed: hasHint,
-          hasMessage: hasMessage
-        }));
-      },
-      getMessageProps: function getMessageProps(options) {
-        return _getMessageProps(_objectSpread2({
-          role: 'alert'
-        }, options));
-      },
-      isLabelActive: isLabelActive,
-      setIsLabelActive: setIsLabelActive,
-      isLabelHovered: isLabelHovered,
-      setIsLabelHovered: setIsLabelHovered,
-      hasHint: hasHint,
-      setHasHint: setHasHint,
-      hasMessage: hasMessage,
-      setHasMessage: setHasMessage,
-      multiThumbRangeRef: multiThumbRangeRef
-    });
-  }, [propGetters, _getInputProps, _getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
+const Field = React__default["default"].forwardRef((props, ref) => {
+  const [hasHint, setHasHint] = React.useState(false);
+  const [hasMessage, setHasMessage] = React.useState(false);
+  const [isLabelActive, setIsLabelActive] = React.useState(false);
+  const [isLabelHovered, setIsLabelHovered] = React.useState(false);
+  const multiThumbRangeRef = React.useRef(null);
+  const {
+    getInputProps,
+    getMessageProps,
+    ...propGetters
+  } = containerField.useField(props.id);
+  const fieldProps = React.useMemo(() => ({
+    ...propGetters,
+    getInputProps: function (options) {
+      let describeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return getInputProps(options, {
+        ...describeOptions,
+        isDescribed: hasHint,
+        hasMessage
+      });
+    },
+    getMessageProps: options => getMessageProps({
+      role: 'alert',
+      ...options
+    }),
+    isLabelActive,
+    setIsLabelActive,
+    isLabelHovered,
+    setIsLabelHovered,
+    hasHint,
+    setHasHint,
+    hasMessage,
+    setHasMessage,
+    multiThumbRangeRef
+  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
   return React__default["default"].createElement(FieldContext.Provider, {
     value: fieldProps
   }, React__default["default"].createElement(StyledField, _extends$t({}, props, {
@@ -1752,27 +1416,25 @@ var Field = React__default["default"].forwardRef(function (props, ref) {
 });
 Field.displayName = 'Field';
 
-var FieldsetContext = React.createContext(undefined);
-var useFieldsetContext = function useFieldsetContext() {
-  var fieldsetContext = React.useContext(FieldsetContext);
+const FieldsetContext = React.createContext(undefined);
+const useFieldsetContext = () => {
+  const fieldsetContext = React.useContext(FieldsetContext);
   return fieldsetContext;
 };
 
-var LegendComponent = React.forwardRef(function (props, ref) {
-  var fieldsetContext = useFieldsetContext();
+const LegendComponent = React.forwardRef((props, ref) => {
+  const fieldsetContext = useFieldsetContext();
   return React__default["default"].createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
     ref: ref
   }));
 });
 LegendComponent.displayName = 'Fieldset.Legend';
-var Legend = LegendComponent;
+const Legend = LegendComponent;
 
-var FieldsetComponent = React.forwardRef(function (props, ref) {
-  var fieldsetContext = React.useMemo(function () {
-    return {
-      isCompact: props.isCompact
-    };
-  }, [props.isCompact]);
+const FieldsetComponent = React.forwardRef((props, ref) => {
+  const fieldsetContext = React.useMemo(() => ({
+    isCompact: props.isCompact
+  }), [props.isCompact]);
   return React__default["default"].createElement(FieldsetContext.Provider, {
     value: fieldsetContext
   }, React__default["default"].createElement(StyledFieldset, _extends$t({}, props, {
@@ -1783,31 +1445,32 @@ FieldsetComponent.displayName = 'Fieldset';
 FieldsetComponent.propTypes = {
   isCompact: PropTypes__default["default"].bool
 };
-var Fieldset = FieldsetComponent;
+const Fieldset = FieldsetComponent;
 Fieldset.Legend = Legend;
 
-var InputContext = React.createContext(undefined);
-var useInputContext = function useInputContext() {
+const InputContext = React.createContext(undefined);
+const useInputContext = () => {
   return React.useContext(InputContext);
 };
 
-var Hint = React__default["default"].forwardRef(function (props, ref) {
-  var _ref = useFieldContext() || {},
-      hasHint = _ref.hasHint,
-      setHasHint = _ref.setHasHint,
-      getHintProps = _ref.getHintProps;
-  var type = useInputContext();
-  React.useEffect(function () {
+const Hint = React__default["default"].forwardRef((props, ref) => {
+  const {
+    hasHint,
+    setHasHint,
+    getHintProps
+  } = useFieldContext() || {};
+  const type = useInputContext();
+  React.useEffect(() => {
     if (!hasHint && setHasHint) {
       setHasHint(true);
     }
-    return function () {
+    return () => {
       if (hasHint && setHasHint) {
         setHasHint(false);
       }
     };
   }, [hasHint, setHasHint]);
-  var HintComponent;
+  let HintComponent;
   if (type === 'checkbox') {
     HintComponent = StyledCheckHint;
   } else if (type === 'radio') {
@@ -1817,7 +1480,7 @@ var Hint = React__default["default"].forwardRef(function (props, ref) {
   } else {
     HintComponent = StyledHint;
   }
-  var combinedProps = props;
+  let combinedProps = props;
   if (getHintProps) {
     combinedProps = getHintProps(combinedProps);
   }
@@ -1827,52 +1490,56 @@ var Hint = React__default["default"].forwardRef(function (props, ref) {
 });
 Hint.displayName = 'Hint';
 
-var Label$1 = React__default["default"].forwardRef(function (props, ref) {
-  var fieldContext = useFieldContext();
-  var fieldsetContext = useFieldsetContext();
-  var type = useInputContext();
-  var combinedProps = props;
+const Label$1 = React__default["default"].forwardRef((props, ref) => {
+  const fieldContext = useFieldContext();
+  const fieldsetContext = useFieldsetContext();
+  const type = useInputContext();
+  let combinedProps = props;
   if (fieldContext) {
     combinedProps = fieldContext.getLabelProps(combinedProps);
     if (type === undefined) {
-      var setIsLabelActive = fieldContext.setIsLabelActive,
-          setIsLabelHovered = fieldContext.setIsLabelHovered,
-          multiThumbRangeRef = fieldContext.multiThumbRangeRef;
-      combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
-        onMouseUp: containerUtilities.composeEventHandlers(props.onMouseUp, function () {
+      const {
+        setIsLabelActive,
+        setIsLabelHovered,
+        multiThumbRangeRef
+      } = fieldContext;
+      combinedProps = {
+        ...combinedProps,
+        onMouseUp: containerUtilities.composeEventHandlers(props.onMouseUp, () => {
           setIsLabelActive(false);
         }),
-        onMouseDown: containerUtilities.composeEventHandlers(props.onMouseDown, function () {
+        onMouseDown: containerUtilities.composeEventHandlers(props.onMouseDown, () => {
           setIsLabelActive(true);
         }),
-        onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, function () {
+        onMouseEnter: containerUtilities.composeEventHandlers(props.onMouseEnter, () => {
           setIsLabelHovered(true);
         }),
-        onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, function () {
+        onMouseLeave: containerUtilities.composeEventHandlers(props.onMouseLeave, () => {
           setIsLabelHovered(false);
         }),
-        onClick: containerUtilities.composeEventHandlers(props.onClick, function () {
+        onClick: containerUtilities.composeEventHandlers(props.onClick, () => {
           multiThumbRangeRef.current && multiThumbRangeRef.current.focus();
         })
-      });
+      };
     }
   }
   if (fieldsetContext) {
-    combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
+    combinedProps = {
+      ...combinedProps,
       isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular
-    });
+    };
   }
   if (type === 'radio') {
     return React__default["default"].createElement(StyledRadioLabel, _extends$t({
       ref: ref
     }, combinedProps), React__default["default"].createElement(StyledRadioSvg, null), props.children);
   } else if (type === 'checkbox') {
-    var onLabelSelect = function onLabelSelect(e) {
-      var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+    const onLabelSelect = e => {
+      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
       if (fieldContext && isFirefox && e.target instanceof Element) {
-        var inputId = e.target.getAttribute('for');
+        const inputId = e.target.getAttribute('for');
         if (!inputId) return;
-        var input = document.getElementById(inputId);
+        const input = document.getElementById(inputId);
         if (input && input.type === 'checkbox') {
           if (e.shiftKey) {
             input.click();
@@ -1882,9 +1549,10 @@ var Label$1 = React__default["default"].forwardRef(function (props, ref) {
         }
       }
     };
-    combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
+    combinedProps = {
+      ...combinedProps,
       onClick: containerUtilities.composeEventHandlers(combinedProps.onClick, onLabelSelect)
-    });
+    };
     return React__default["default"].createElement(StyledCheckLabel, _extends$t({
       ref: ref
     }, combinedProps), React__default["default"].createElement(StyledCheckSvg, null), React__default["default"].createElement(StyledDashSvg, null), props.children);
@@ -1902,32 +1570,34 @@ Label$1.propTypes = {
   isRegular: PropTypes__default["default"].bool
 };
 
-var VALIDATION = ['success', 'warning', 'error'];
-var FILE_VALIDATION = ['success', 'error'];
-var FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
-
-var _excluded$f = ["validation", "validationLabel", "children"];
-var Message = React__default["default"].forwardRef(function (_ref, ref) {
-  var validation = _ref.validation,
-      validationLabel = _ref.validationLabel,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$f);
-  var _ref2 = useFieldContext() || {},
-      hasMessage = _ref2.hasMessage,
-      setHasMessage = _ref2.setHasMessage,
-      getMessageProps = _ref2.getMessageProps;
-  var type = useInputContext();
-  React.useEffect(function () {
+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) => {
+  let {
+    validation,
+    validationLabel,
+    children,
+    ...props
+  } = _ref;
+  const {
+    hasMessage,
+    setHasMessage,
+    getMessageProps
+  } = useFieldContext() || {};
+  const type = useInputContext();
+  React.useEffect(() => {
     if (!hasMessage && setHasMessage) {
       setHasMessage(true);
     }
-    return function () {
+    return () => {
       if (hasMessage && setHasMessage) {
         setHasMessage(false);
       }
     };
   }, [hasMessage, setHasMessage]);
-  var MessageComponent;
+  let MessageComponent;
   if (type === 'checkbox') {
     MessageComponent = StyledCheckMessage;
   } else if (type === 'radio') {
@@ -1937,14 +1607,15 @@ var Message = React__default["default"].forwardRef(function (_ref, ref) {
   } else {
     MessageComponent = StyledMessage;
   }
-  var combinedProps = _objectSpread2({
-    validation: validation,
-    validationLabel: validationLabel
-  }, props);
+  let combinedProps = {
+    validation,
+    validationLabel,
+    ...props
+  };
   if (getMessageProps) {
     combinedProps = getMessageProps(combinedProps);
   }
-  var ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation);
+  const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation);
   return React__default["default"].createElement(MessageComponent, _extends$t({
     ref: ref
   }, combinedProps), validation && React__default["default"].createElement(StyledMessageIcon, {
@@ -1958,18 +1629,19 @@ Message.propTypes = {
   validationLabel: PropTypes__default["default"].string
 };
 
-var _excluded$e = ["indeterminate", "children"];
-var Checkbox = React__default["default"].forwardRef(function (_ref, ref) {
-  var indeterminate = _ref.indeterminate,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$e);
-  var fieldsetContext = useFieldsetContext();
-  var fieldContext = useFieldContext();
-  var inputRef = function inputRef(inputElement) {
+const Checkbox = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    indeterminate,
+    children,
+    ...props
+  } = _ref;
+  const fieldsetContext = useFieldsetContext();
+  const fieldContext = useFieldContext();
+  const inputRef = inputElement => {
     inputElement && (inputElement.indeterminate = indeterminate);
   };
-  var combinedRef = function combinedRef(inputElement) {
-    [inputRef, ref].forEach(function (targetRef) {
+  const combinedRef = inputElement => {
+    [inputRef, ref].forEach(targetRef => {
       if (targetRef) {
         if (typeof targetRef === 'function') {
           targetRef(inputElement);
@@ -1979,9 +1651,11 @@ var Checkbox = React__default["default"].forwardRef(function (_ref, ref) {
       }
     });
   };
-  var combinedProps = _objectSpread2(_objectSpread2({
-    ref: combinedRef
-  }, props), fieldsetContext);
+  let combinedProps = {
+    ref: combinedRef,
+    ...props,
+    ...fieldsetContext
+  };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
@@ -1995,29 +1669,32 @@ Checkbox.propTypes = {
   indeterminate: PropTypes__default["default"].bool
 };
 
-var InputGroupContext = React.createContext(undefined);
-var useInputGroupContext = function useInputGroupContext() {
+const InputGroupContext = React.createContext(undefined);
+const useInputGroupContext = () => {
   return React.useContext(InputGroupContext);
 };
 
-var _excluded$d = ["onSelect"];
-var Input = React__default["default"].forwardRef(function (_ref, ref) {
-  var onSelect = _ref.onSelect,
-      props = _objectWithoutProperties(_ref, _excluded$d);
-  var fieldContext = useFieldContext();
-  var inputGroupContext = useInputGroupContext();
-  var onSelectHandler = props.readOnly ? containerUtilities.composeEventHandlers(onSelect, function (event) {
+const Input = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    onSelect,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  const inputGroupContext = useInputGroupContext();
+  const onSelectHandler = props.readOnly ? containerUtilities.composeEventHandlers(onSelect, event => {
     event.currentTarget.select();
   }) : onSelect;
-  var combinedProps = _objectSpread2({
-    ref: ref,
-    onSelect: onSelectHandler
-  }, props);
+  let combinedProps = {
+    ref,
+    onSelect: onSelectHandler,
+    ...props
+  };
   if (inputGroupContext) {
-    combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
+    combinedProps = {
+      ...combinedProps,
       isCompact: inputGroupContext.isCompact || combinedProps.isCompact,
       focusInset: props.focusInset === undefined ? true : props.focusInset
-    });
+    };
   }
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
@@ -2032,15 +1709,18 @@ Input.propTypes = {
 };
 Input.displayName = 'Input';
 
-var _excluded$c = ["children"];
-var Radio = React__default["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$c);
-  var fieldsetContext = useFieldsetContext();
-  var fieldContext = useFieldContext();
-  var combinedProps = _objectSpread2(_objectSpread2({
-    ref: ref
-  }, props), fieldsetContext);
+const Radio = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const fieldsetContext = useFieldsetContext();
+  const fieldContext = useFieldContext();
+  let combinedProps = {
+    ref,
+    ...props,
+    ...fieldsetContext
+  };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
@@ -2053,45 +1733,45 @@ Radio.propTypes = {
   isCompact: PropTypes__default["default"].bool
 };
 
-var _excluded$b = ["hasLowerTrack", "min", "max", "step"];
-var Range = React__default["default"].forwardRef(function (_ref, ref) {
-  var hasLowerTrack = _ref.hasLowerTrack,
-      min = _ref.min,
-      max = _ref.max,
-      step = _ref.step,
-      props = _objectWithoutProperties(_ref, _excluded$b);
-  var _useState = React.useState('0'),
-      _useState2 = _slicedToArray(_useState, 2),
-      backgroundSize = _useState2[0],
-      setBackgroundSize = _useState2[1];
-  var rangeRef = React.useRef();
-  var fieldContext = useFieldContext();
-  var updateBackgroundWidthFromInput = React.useCallback(function (rangeTarget) {
-    var relativeMax = max;
-    var value = rangeTarget.value;
+const Range = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    hasLowerTrack,
+    min,
+    max,
+    step,
+    ...props
+  } = _ref;
+  const [backgroundSize, setBackgroundSize] = React.useState('0');
+  const rangeRef = React.useRef();
+  const fieldContext = useFieldContext();
+  const updateBackgroundWidthFromInput = React.useCallback(rangeTarget => {
+    let relativeMax = max;
+    const {
+      value
+    } = rangeTarget;
     if (parseFloat(relativeMax) < parseFloat(min)) {
       relativeMax = 100;
     }
-    var percentage = 100 * (value - min) / (relativeMax - min);
-    setBackgroundSize("".concat(percentage, "%"));
+    const percentage = 100 * (value - min) / (relativeMax - min);
+    setBackgroundSize(`${percentage}%`);
   },
   [max, min, step]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     updateBackgroundWidthFromInput(rangeRef.current);
   }, [rangeRef, updateBackgroundWidthFromInput, props.value]);
-  var onChange = hasLowerTrack ? containerUtilities.composeEventHandlers(props.onChange, function (event) {
+  const onChange = hasLowerTrack ? containerUtilities.composeEventHandlers(props.onChange, event => {
     updateBackgroundWidthFromInput(event.target);
   }) : props.onChange;
-  var combinedProps = _objectSpread2(_objectSpread2({
+  let combinedProps = {
     ref: mergeRefs__default["default"]([rangeRef, ref]),
-    hasLowerTrack: hasLowerTrack,
-    min: min,
-    max: max,
-    step: step,
-    backgroundSize: backgroundSize
-  }, props), {}, {
-    onChange: onChange
-  });
+    hasLowerTrack,
+    min,
+    max,
+    step,
+    backgroundSize,
+    ...props,
+    onChange
+  };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps, {
       isDescribed: true
@@ -2107,45 +1787,43 @@ Range.defaultProps = {
 };
 Range.displayName = 'Range';
 
-var _excluded$a = ["minRows", "maxRows", "style", "onChange", "onSelect"];
-var parseStyleValue = function parseStyleValue(value) {
+const parseStyleValue = value => {
   return parseInt(value, 10) || 0;
 };
-var Textarea = React__default["default"].forwardRef(function (_ref, ref) {
-  var minRows = _ref.minRows,
-      maxRows = _ref.maxRows,
-      style = _ref.style,
-      onChange = _ref.onChange,
-      onSelect = _ref.onSelect,
-      props = _objectWithoutProperties(_ref, _excluded$a);
-  var fieldContext = useFieldContext();
-  var textAreaRef = React.useRef();
-  var shadowTextAreaRef = React.useRef(null);
-  var _useState = React.useState({
+const Textarea = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    minRows,
+    maxRows,
+    style,
+    onChange,
+    onSelect,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  const textAreaRef = React.useRef();
+  const shadowTextAreaRef = React.useRef(null);
+  const [state, setState] = React.useState({
     overflow: false,
     height: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-  var isControlled = props.value !== null && props.value !== undefined;
-  var isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
-  var calculateHeight = React.useCallback(function () {
+  });
+  const isControlled = props.value !== null && props.value !== undefined;
+  const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
+  const calculateHeight = React.useCallback(() => {
     if (!isAutoResizable) {
       return;
     }
-    var textarea = textAreaRef.current;
-    var computedStyle = window.getComputedStyle(textarea);
-    var shadowTextArea = shadowTextAreaRef.current;
+    const textarea = textAreaRef.current;
+    const computedStyle = window.getComputedStyle(textarea);
+    const shadowTextArea = shadowTextAreaRef.current;
     shadowTextArea.style.width = computedStyle.width;
     shadowTextArea.value = textarea.value || textarea.placeholder || ' ';
-    var boxSizing = computedStyle.boxSizing;
-    var padding = parseStyleValue(computedStyle.paddingBottom) + parseStyleValue(computedStyle.paddingTop);
-    var border = parseStyleValue(computedStyle.borderTopWidth) + parseStyleValue(computedStyle.borderBottomWidth);
-    var innerHeight = shadowTextArea.scrollHeight - padding;
+    const boxSizing = computedStyle.boxSizing;
+    const padding = parseStyleValue(computedStyle.paddingBottom) + parseStyleValue(computedStyle.paddingTop);
+    const border = parseStyleValue(computedStyle.borderTopWidth) + parseStyleValue(computedStyle.borderBottomWidth);
+    const innerHeight = shadowTextArea.scrollHeight - padding;
     shadowTextArea.value = 'x';
-    var singleRowHeight = shadowTextArea.scrollHeight - padding;
-    var outerHeight = innerHeight;
+    const singleRowHeight = shadowTextArea.scrollHeight - padding;
+    let outerHeight = innerHeight;
     if (minRows) {
       outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
     }
@@ -2153,19 +1831,19 @@ var Textarea = React__default["default"].forwardRef(function (_ref, ref) {
       outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
     }
     outerHeight = Math.max(outerHeight, singleRowHeight);
-    var updatedHeight = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
-    var overflow = Math.abs(outerHeight - innerHeight) <= 1;
-    setState(function (prevState) {
+    const updatedHeight = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
+    const overflow = Math.abs(outerHeight - innerHeight) <= 1;
+    setState(prevState => {
       if (updatedHeight > 0 && Math.abs((prevState.height || 0) - updatedHeight) > 1 || prevState.overflow !== overflow) {
         return {
-          overflow: overflow,
+          overflow,
           height: updatedHeight
         };
       }
       return prevState;
     });
   }, [maxRows, minRows, textAreaRef, isAutoResizable]);
-  var onChangeHandler = React.useCallback(function (e) {
+  const onChangeHandler = React.useCallback(e => {
     if (!isControlled) {
       calculateHeight();
     }
@@ -2173,37 +1851,41 @@ var Textarea = React__default["default"].forwardRef(function (_ref, ref) {
       onChange(e);
     }
   }, [calculateHeight, isControlled, onChange]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!isAutoResizable) {
       return undefined;
     }
-    var resizeHandler = debounce__default["default"](function () {
+    const resizeHandler = debounce__default["default"](() => {
       calculateHeight();
     });
     window.addEventListener('resize', resizeHandler);
-    return function () {
+    return () => {
       resizeHandler.cancel();
       window.removeEventListener('resize', resizeHandler);
     };
   }, [calculateHeight, isAutoResizable]);
-  React.useLayoutEffect(function () {
+  React.useLayoutEffect(() => {
     calculateHeight();
   });
-  var computedStyle = {};
+  const computedStyle = {};
   if (isAutoResizable) {
     computedStyle.height = state.height;
     computedStyle.overflow = state.overflow ? 'hidden' : undefined;
   }
-  var onSelectHandler = props.readOnly ? containerUtilities.composeEventHandlers(onSelect, function (event) {
+  const onSelectHandler = props.readOnly ? containerUtilities.composeEventHandlers(onSelect, event => {
     event.currentTarget.select();
   }) : onSelect;
-  var combinedProps = _objectSpread2({
+  let combinedProps = {
     ref: mergeRefs__default["default"]([textAreaRef, ref]),
     rows: minRows,
     onChange: onChangeHandler,
     onSelect: onSelectHandler,
-    style: _objectSpread2(_objectSpread2({}, computedStyle), style)
-  }, props);
+    style: {
+      ...computedStyle,
+      ...style
+    },
+    ...props
+  };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps, {
       isDescribed: true
@@ -2232,15 +1914,18 @@ Textarea.propTypes = {
 };
 Textarea.displayName = 'Textarea';
 
-var _excluded$9 = ["children"];
-var Toggle = React__default["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$9);
-  var fieldsetContext = useFieldsetContext();
-  var fieldContext = useFieldContext();
-  var combinedProps = _objectSpread2(_objectSpread2({
-    ref: ref
-  }, props), fieldsetContext);
+const Toggle = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const fieldsetContext = useFieldsetContext();
+  const fieldContext = useFieldContext();
+  let combinedProps = {
+    ref,
+    ...props,
+    ...fieldsetContext
+  };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
@@ -2264,45 +1949,40 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, 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"
   })));
 };
 
-var StartIconComponent = function StartIconComponent(props) {
-  return React__default["default"].createElement(StyledTextMediaFigure, _extends$t({
-    position: "start"
-  }, props));
-};
+const StartIconComponent = props => React__default["default"].createElement(StyledTextMediaFigure, _extends$t({
+  position: "start"
+}, props));
 StartIconComponent.displayName = 'FauxInput.StartIcon';
-var StartIcon = StartIconComponent;
+const StartIcon = StartIconComponent;
 
-var EndIconComponent = function EndIconComponent(props) {
-  return React__default["default"].createElement(StyledTextMediaFigure, _extends$t({
-    position: "end"
-  }, props));
-};
+const EndIconComponent = props => React__default["default"].createElement(StyledTextMediaFigure, _extends$t({
+  position: "end"
+}, props));
 EndIconComponent.displayName = 'FauxInput.EndIcon';
-var EndIcon = EndIconComponent;
-
-var _excluded$8 = ["onFocus", "onBlur", "disabled", "readOnly", "isFocused"];
-var FauxInputComponent = React.forwardRef(function (_ref, ref) {
-  var onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
-      controlledIsFocused = _ref.isFocused,
-      props = _objectWithoutProperties(_ref, _excluded$8);
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var onFocusHandler = containerUtilities.composeEventHandlers(onFocus, function () {
+const EndIcon = EndIconComponent;
+
+const FauxInputComponent = React.forwardRef((_ref, ref) => {
+  let {
+    onFocus,
+    onBlur,
+    disabled,
+    readOnly,
+    isFocused: controlledIsFocused,
+    ...props
+  } = _ref;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const onFocusHandler = containerUtilities.composeEventHandlers(onFocus, () => {
     setIsFocused(true);
   });
-  var onBlurHandler = containerUtilities.composeEventHandlers(onBlur, function () {
+  const onBlurHandler = containerUtilities.composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   });
   return React__default["default"].createElement(StyledTextFauxInput, _extends$t({
@@ -2327,21 +2007,23 @@ FauxInputComponent.propTypes = {
   isFocused: PropTypes__default["default"].bool,
   isHovered: PropTypes__default["default"].bool
 };
-var FauxInput = FauxInputComponent;
+const FauxInput = FauxInputComponent;
 FauxInput.EndIcon = EndIcon;
 FauxInput.StartIcon = StartIcon;
 
-var _excluded$7 = ["disabled", "isCompact"];
-var Select = React__default["default"].forwardRef(function (_ref, ref) {
-  var disabled = _ref.disabled,
-      isCompact = _ref.isCompact,
-      props = _objectWithoutProperties(_ref, _excluded$7);
-  var fieldContext = useFieldContext();
-  var combinedProps = _objectSpread2({
-    disabled: disabled,
-    isCompact: isCompact,
-    ref: ref
-  }, props);
+const Select = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    isCompact,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  let combinedProps = {
+    disabled,
+    isCompact,
+    ref,
+    ...props
+  };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps, {
       isDescribed: true
@@ -2361,304 +2043,92 @@ Select.propTypes = {
 };
 Select.displayName = 'Select';
 
-var _excluded$6 = ["min", "max", "minValue", "maxValue", "disabled", "step", "onChange", "onMouseDown"];
-var MultiThumbRange = React.forwardRef(function (_ref, ref) {
-  var min = _ref.min,
-      max = _ref.max,
-      minValue = _ref.minValue,
-      maxValue = _ref.maxValue,
-      disabled = _ref.disabled,
-      step = _ref.step,
-      onChange = _ref.onChange,
-      onMouseDown = _ref.onMouseDown,
-      props = _objectWithoutProperties(_ref, _excluded$6);
-  var theme = React.useContext(styled.ThemeContext);
-  var themedDocument = reactTheming.useDocument(theme);
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMinThumbFocused = _useState2[0],
-      setIsMinThumbFocused = _useState2[1];
-  var _useState3 = React.useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      railWidth = _useState4[0],
-      setRailWidth = _useState4[1];
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isMousedDown = _useState6[0],
-      setIsMousedDown = _useState6[1];
-  var trackRailRef = React.useRef(null);
-  var minThumbRef = React.useRef(null);
-  var maxThumbRef = React.useRef(null);
-  var fieldContext = useFieldContext();
-  var _ref2 = fieldContext || {},
-      isLabelHovered = _ref2.isLabelHovered,
-      isLabelActive = _ref2.isLabelActive,
-      multiThumbRangeRef = _ref2.multiThumbRangeRef;
-  var onWindowResize = React.useCallback(debounce__default["default"](function () {
-    if (trackRailRef.current) {
-      setRailWidth(trackRailRef.current.getBoundingClientRect().width);
-    }
-  }, 100), []);
-  React.useEffect(function () {
+const MIN = 0;
+const MAX = 100;
+const MultiThumbRange = React.forwardRef((_ref, ref) => {
+  let {
+    min = MIN,
+    max = MAX,
+    minValue,
+    maxValue,
+    disabled,
+    step,
+    jump,
+    onChange,
+    onMouseDown,
+    ...props
+  } = _ref;
+  const theme = React.useContext(styled.ThemeContext);
+  const environment = reactTheming.useDocument(theme);
+  const trackRailRef = React.useRef(null);
+  const minThumbRef = React.useRef(null);
+  const maxThumbRef = React.useRef(null);
+  const {
+    getTrackProps,
+    getMinThumbProps,
+    getMaxThumbProps,
+    trackRect,
+    minValue: updatedMinValue,
+    maxValue: updatedMaxValue
+  } = containerSlider.useSlider({
+    trackRef: trackRailRef,
+    minThumbRef,
+    maxThumbRef,
+    min,
+    max,
+    minValue,
+    maxValue,
+    onChange,
+    step,
+    jump,
+    disabled,
+    rtl: theme.rtl,
+    environment
+  });
+  const {
+    onMouseDown: onSliderMouseDown,
+    ...trackProps
+  } = getTrackProps({
+    onMouseDown
+  });
+  const fieldContext = useFieldContext();
+  const {
+    isLabelHovered,
+    isLabelActive,
+    multiThumbRangeRef
+  } = fieldContext || {};
+  React.useEffect(() => {
     if (multiThumbRangeRef) {
       multiThumbRangeRef.current = minThumbRef.current;
     }
   }, [multiThumbRangeRef]);
-  React.useEffect(function () {
-    onWindowResize();
-    window.addEventListener('resize', onWindowResize);
-    return function () {
-      window.removeEventListener('resize', onWindowResize);
-    };
-  }, [onWindowResize]);
-  var calculateMinPosition = React.useCallback(function (minDistance) {
-    var boundedMinValue = minValue;
-    if (boundedMinValue < min) {
-      boundedMinValue = min;
-    } else if (boundedMinValue > maxValue) {
-      boundedMinValue = maxValue;
-    } else if (boundedMinValue > max) {
-      boundedMinValue = max;
-    }
-    return (boundedMinValue - min) / (max - min) * (railWidth - minDistance);
-  }, [max, maxValue, min, minValue, railWidth]);
-  var calculateMaxPosition = React.useCallback(function (minDistance) {
-    var boundedMaxValue = maxValue;
-    if (boundedMaxValue > max) {
-      boundedMaxValue = max;
-    } else if (boundedMaxValue < minValue) {
-      boundedMaxValue = minValue;
-    } else if (boundedMaxValue < min) {
-      boundedMaxValue = min;
-    }
-    return (boundedMaxValue - min) / (max - min) * (railWidth - minDistance) + minDistance;
-  }, [max, maxValue, min, minValue, railWidth]);
-  var onRangeValuesChange = React.useCallback(function () {
-    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        newMinValue = _ref3.minValue,
-        newMaxValue = _ref3.maxValue;
-    if (disabled) {
-      return;
-    }
-    if (onChange && (newMinValue !== minValue || newMaxValue !== maxValue)) {
-      onChange({
-        minValue: newMinValue,
-        maxValue: newMaxValue
-      });
-    }
-  }, [disabled, maxValue, minValue, onChange]);
-  var updateMinThumbSlider = React.useCallback(function (value) {
-    var managedValue = value;
-    if (value < min) {
-      managedValue = min;
-    } else if (value > maxValue) {
-      managedValue = maxValue;
-    }
-    onRangeValuesChange({
-      maxValue: maxValue,
-      minValue: managedValue
-    });
-  }, [maxValue, min, onRangeValuesChange]);
-  var updateMaxThumbSlider = React.useCallback(function (value) {
-    var managedValue = value;
-    if (value < minValue) {
-      managedValue = minValue;
-    } else if (value > max) {
-      managedValue = max;
-    }
-    onRangeValuesChange({
-      maxValue: managedValue,
-      minValue: minValue
-    });
-  }, [max, minValue, onRangeValuesChange]);
-  var calculateUpdatedValue = React.useCallback(function (e) {
-    if (!trackRailRef.current) {
-      return undefined;
-    }
-    var trackOffsetLeft = trackRailRef.current.getBoundingClientRect().left;
-    var trackOffsetRight = trackOffsetLeft + trackRailRef.current.getBoundingClientRect().width;
-    var trackWidth = trackRailRef.current.getBoundingClientRect().width;
-    var diffX = e.pageX - (theme.rtl ? trackOffsetRight : trackOffsetLeft);
-    if (theme.rtl) {
-      diffX *= -1;
-    }
-    var newValue = min + parseInt((max - min) * diffX / trackWidth, 10);
-    return Math.floor(newValue / step) * step;
-  }, [max, min, step, theme.rtl]);
-  var onDocumentMouseMove = React.useCallback(function (e) {
-    var newValue = calculateUpdatedValue(e);
-    if (isMinThumbFocused) {
-      updateMinThumbSlider(newValue);
-    } else {
-      updateMaxThumbSlider(newValue);
-    }
-  }, [calculateUpdatedValue, isMinThumbFocused, updateMinThumbSlider, updateMaxThumbSlider]);
-  var removeDragEvents = React.useCallback(function () {
-    if (themedDocument) {
-      themedDocument.removeEventListener('mousemove', onDocumentMouseMove);
-      themedDocument.removeEventListener('mouseup', removeDragEvents);
-    }
-    setIsMousedDown(false);
-  }, [onDocumentMouseMove, themedDocument]);
-  var onTrackMouseDown = React.useCallback(function (e) {
-    if (e.button !== 0 || disabled) {
-      return;
-    }
-    e.preventDefault();
-    var valueAtMouseDown = calculateUpdatedValue(e);
-    if (valueAtMouseDown === undefined || minValue === undefined || maxValue === undefined) {
-      return;
-    }
-    var distanceFromMinThumb = Math.abs(minValue - valueAtMouseDown);
-    var distanceFromMaxThumb = Math.abs(maxValue - valueAtMouseDown);
-    if (distanceFromMinThumb <= distanceFromMaxThumb) {
-      minThumbRef.current && minThumbRef.current.focus();
-      updateMinThumbSlider(valueAtMouseDown);
-    } else {
-      maxThumbRef.current && maxThumbRef.current.focus();
-      updateMaxThumbSlider(valueAtMouseDown);
-    }
-  }, [calculateUpdatedValue, disabled, maxValue, minValue, updateMaxThumbSlider, updateMinThumbSlider]);
-  React.useEffect(function () {
-    if (isMousedDown && themedDocument) {
-      themedDocument.addEventListener('mousemove', onDocumentMouseMove);
-      themedDocument.addEventListener('mouseup', removeDragEvents);
-    }
-    return function () {
-      if (isMousedDown && themedDocument) {
-        themedDocument.removeEventListener('mousemove', onDocumentMouseMove);
-        themedDocument.removeEventListener('mouseup', removeDragEvents);
-      }
-    };
-  }, [isMousedDown, onDocumentMouseMove, removeDragEvents, themedDocument]);
-  var _onKeyDown = function onKeyDown(type) {
-    return function (e) {
-      var isMinThumb = type === 'min';
-      var keyIntercepted = false;
-      var decrementThumb = function decrementThumb() {
-        if (isMinThumb) {
-          updateMinThumbSlider(minValue - step);
-        } else {
-          updateMaxThumbSlider(maxValue - step);
-        }
-      };
-      var incrementThumb = function incrementThumb() {
-        if (isMinThumb) {
-          updateMinThumbSlider(minValue + step);
-        } else {
-          updateMaxThumbSlider(maxValue + step);
-        }
-      };
-      switch (e.keyCode) {
-        case containerUtilities.KEY_CODES.LEFT:
-          if (theme.rtl) {
-            incrementThumb();
-          } else {
-            decrementThumb();
-          }
-          keyIntercepted = true;
-          break;
-        case containerUtilities.KEY_CODES.DOWN:
-          decrementThumb();
-          keyIntercepted = true;
-          break;
-        case containerUtilities.KEY_CODES.RIGHT:
-          if (theme.rtl) {
-            decrementThumb();
-          } else {
-            incrementThumb();
-          }
-          keyIntercepted = true;
-          break;
-        case containerUtilities.KEY_CODES.UP:
-          incrementThumb();
-          keyIntercepted = true;
-          break;
-        case containerUtilities.KEY_CODES.HOME:
-          if (isMinThumb) {
-            updateMinThumbSlider(min);
-          } else {
-            updateMaxThumbSlider(min);
-          }
-          keyIntercepted = true;
-          break;
-        case containerUtilities.KEY_CODES.END:
-          if (isMinThumb) {
-            updateMinThumbSlider(max);
-          } else {
-            updateMaxThumbSlider(max);
-          }
-          keyIntercepted = true;
-          break;
-      }
-      if (keyIntercepted) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-  };
-  var MIN_DISTANCE = 0;
-  var minPosition = calculateMinPosition(MIN_DISTANCE);
-  var maxPosition = calculateMaxPosition(MIN_DISTANCE);
-  var sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
-  var onSliderMouseDown = containerUtilities.composeEventHandlers(onMouseDown, onTrackMouseDown);
+  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({
     ref: ref,
-    isDisabled: disabled,
     onMouseDown: onSliderMouseDown
   }, props), React__default["default"].createElement(StyledSliderTrack, {
     backgroundSize: sliderBackgroundSize,
-    backgroundPosition: theme.rtl ? railWidth - maxPosition : minPosition,
+    backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition,
     isDisabled: disabled
-  }, React__default["default"].createElement(StyledSliderTrackRail, {
+  }, React__default["default"].createElement(StyledSliderTrackRail, _extends$t({}, trackProps, {
     ref: trackRailRef
-  }, React__default["default"].createElement(StyledSliderThumb, {
-    role: "slider",
-    tabIndex: disabled ? undefined : 0,
-    "aria-valuemin": min,
-    "aria-valuemax": maxValue,
-    "aria-valuenow": minValue,
-    "aria-valuetext": minValue,
+  }), React__default["default"].createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({
+    'aria-label': updatedMinValue
+  }), {
     isDisabled: disabled,
     position: minPosition,
     ref: minThumbRef,
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown('min')(e);
-    },
-    onFocus: function onFocus() {
-      setIsMinThumbFocused(true);
-    },
-    onBlur: function onBlur() {
-      setIsMinThumbFocused(false);
-    },
-    onMouseDown: function onMouseDown(e) {
-      setIsMousedDown(true);
-      e.preventDefault();
-      e.stopPropagation();
-      minThumbRef.current && minThumbRef.current.focus();
-    },
     "data-garden-active": isLabelActive,
     "data-garden-hover": isLabelHovered
-  }), React__default["default"].createElement(StyledSliderThumb, {
-    role: "slider",
-    tabIndex: disabled ? undefined : 0,
-    "aria-valuemin": minValue,
-    "aria-valuemax": max,
-    "aria-valuenow": maxValue,
-    "aria-valuetext": maxValue,
+  })), React__default["default"].createElement(StyledSliderThumb, _extends$t({}, getMaxThumbProps({
+    'aria-label': updatedMaxValue
+  }), {
     isDisabled: disabled,
     position: maxPosition,
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown('max')(e);
-    },
-    ref: maxThumbRef,
-    onMouseDown: function onMouseDown(e) {
-      setIsMousedDown(true);
-      e.preventDefault();
-      e.stopPropagation();
-      maxThumbRef.current && maxThumbRef.current.focus();
-    }
-  }))));
+    ref: maxThumbRef
+  })))));
 });
 MultiThumbRange.displayName = 'MultiThumbRange';
 MultiThumbRange.propTypes = {
@@ -2667,35 +2137,32 @@ MultiThumbRange.propTypes = {
   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: 0,
-  max: 100,
-  minValue: 0,
-  maxValue: 100,
+  min: MIN,
+  max: MAX,
   step: 1
 };
 
-var TilesContext = React.createContext(undefined);
-var useTilesContext = function useTilesContext() {
+const TilesContext = React.createContext(undefined);
+const useTilesContext = () => {
   return React.useContext(TilesContext);
 };
 
-var _excluded$5 = ["children", "value", "disabled"];
-var TileComponent = React__default["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$5);
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var tilesContext = useTilesContext();
-  var inputRef = React.useRef(null);
-  var inputProps;
+const TileComponent = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    value,
+    disabled,
+    ...props
+  } = _ref;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const tilesContext = useTilesContext();
+  const inputRef = React.useRef(null);
+  let inputProps;
   if (tilesContext) {
     inputProps = {
       name: tilesContext.name,
@@ -2712,12 +2179,10 @@ var TileComponent = React__default["default"].forwardRef(function (_ref, ref) {
   }, props), children, React__default["default"].createElement(StyledTileInput, _extends$t({}, inputProps, {
     disabled: disabled,
     value: value,
-    onBlur: function onBlur() {
-      return setIsFocused(false);
-    },
-    onFocus: function onFocus(e) {
+    onBlur: () => setIsFocused(false),
+    onFocus: e => {
       e.persist();
-      setTimeout(function () {
+      setTimeout(() => {
         if (e.target.getAttribute('data-garden-focus-visible')) {
           setIsFocused(true);
         }
@@ -2732,36 +2197,33 @@ TileComponent.propTypes = {
   value: PropTypes__default["default"].string,
   disabled: PropTypes__default["default"].bool
 };
-var Tile = TileComponent;
+const Tile = TileComponent;
 
-var DescriptionComponent = React.forwardRef(function (props, ref) {
-  var tilesContext = useTilesContext();
+const DescriptionComponent = React.forwardRef((props, ref) => {
+  const tilesContext = useTilesContext();
   return React__default["default"].createElement(StyledTileDescription, _extends$t({
     ref: ref,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
 });
 DescriptionComponent.displayName = 'Tiles.Description';
-var Description = DescriptionComponent;
+const Description = DescriptionComponent;
 
-var IconComponent = React.forwardRef(function (props, ref) {
-  var tileContext = useTilesContext();
+const IconComponent = React.forwardRef((props, ref) => {
+  const tileContext = useTilesContext();
   return React__default["default"].createElement(StyledTileIcon, _extends$t({
     ref: ref,
     isCentered: tileContext && tileContext.isCentered
   }, props));
 });
 IconComponent.displayName = 'Tiles.Icon';
-var Icon = IconComponent;
-
-var LabelComponent = React.forwardRef(function (props, forwardedRef) {
-  var _useState = React.useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      title = _useState2[0],
-      setTitle = _useState2[1];
-  var ref = React.useRef();
-  var tilesContext = useTilesContext();
-  React.useEffect(function () {
+const Icon = IconComponent;
+
+const LabelComponent = React.forwardRef((props, forwardedRef) => {
+  const [title, setTitle] = React.useState('');
+  const ref = React.useRef();
+  const tilesContext = useTilesContext();
+  React.useEffect(() => {
     if (ref.current) {
       setTitle(ref.current.textContent || undefined);
     }
@@ -2773,37 +2235,33 @@ var LabelComponent = React.forwardRef(function (props, forwardedRef) {
   }, props));
 });
 LabelComponent.displayName = 'Tiles.Label';
-var Label = LabelComponent;
-
-var _excluded$4 = ["onChange", "value", "name", "isCentered"];
-var TilesComponent = React.forwardRef(function (_ref, ref) {
-  var onChange = _ref.onChange,
-      controlledValue = _ref.value,
-      name = _ref.name,
-      isCentered = _ref.isCentered,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-  var _useState = React.useState(controlledValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-  var handleOnChange = React.useCallback(function () {
+const Label = LabelComponent;
+
+const TilesComponent = React.forwardRef((_ref, ref) => {
+  let {
+    onChange,
+    value: controlledValue,
+    name,
+    isCentered,
+    ...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];
     }
     setValue(args[0].target.value);
     if (onChange) {
-      onChange.apply(void 0, args);
+      onChange(...args);
     }
   }, [onChange]);
-  var selectedValue = containerUtilities.getControlledValue(controlledValue, value);
-  var tileContext = React.useMemo(function () {
-    return {
-      onChange: handleOnChange,
-      value: selectedValue,
-      name: name,
-      isCentered: isCentered
-    };
-  }, [handleOnChange, selectedValue, name, isCentered]);
+  const selectedValue = containerUtilities.getControlledValue(controlledValue, value);
+  const tileContext = React.useMemo(() => ({
+    onChange: handleOnChange,
+    value: selectedValue,
+    name,
+    isCentered
+  }), [handleOnChange, selectedValue, name, isCentered]);
   return React__default["default"].createElement(TilesContext.Provider, {
     value: tileContext
   }, React__default["default"].createElement("div", _extends$t({
@@ -2821,21 +2279,20 @@ TilesComponent.propTypes = {
 TilesComponent.defaultProps = {
   isCentered: true
 };
-var Tiles = TilesComponent;
+const Tiles = TilesComponent;
 Tiles.Description = Description;
 Tiles.Icon = Icon;
 Tiles.Label = Label;
 Tiles.Tile = Tile;
 
-var _excluded$3 = ["isCompact"];
-var InputGroup = React__default["default"].forwardRef(function (_ref, ref) {
-  var isCompact = _ref.isCompact,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-  var contextValue = React.useMemo(function () {
-    return {
-      isCompact: isCompact
-    };
-  }, [isCompact]);
+const InputGroup = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    ...props
+  } = _ref;
+  const contextValue = React.useMemo(() => ({
+    isCompact
+  }), [isCompact]);
   return React__default["default"].createElement(InputGroupContext.Provider, {
     value: contextValue
   }, React__default["default"].createElement(StyledInputGroup, _extends$t({
@@ -2848,10 +2305,11 @@ InputGroup.propTypes = {
   isCompact: PropTypes__default["default"].bool
 };
 
-var _excluded$2 = ["disabled"];
-var FileUpload = React__default["default"].forwardRef(function (_ref, ref) {
-  var disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+const FileUpload = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    ...props
+  } = _ref;
   return React__default["default"].createElement(StyledFileUpload, _extends$t({
     ref: ref,
     "aria-disabled": disabled
@@ -2864,23 +2322,27 @@ FileUpload.propTypes = {
 };
 FileUpload.displayName = 'FileUpload';
 
-var ItemComponent = React.forwardRef(function (_ref, ref) {
-  var props = _extends$t({}, _ref);
+const ItemComponent = React.forwardRef((_ref, ref) => {
+  let {
+    ...props
+  } = _ref;
   return React__default["default"].createElement(StyledFileListItem, _extends$t({}, props, {
     ref: ref
   }));
 });
 ItemComponent.displayName = 'FileList.Item';
-var Item = ItemComponent;
+const Item = ItemComponent;
 
-var FileListComponent = React.forwardRef(function (_ref, ref) {
-  var props = _extends$t({}, _ref);
+const FileListComponent = React.forwardRef((_ref, ref) => {
+  let {
+    ...props
+  } = _ref;
   return React__default["default"].createElement(StyledFileList, _extends$t({}, props, {
     ref: ref
   }));
 });
 FileListComponent.displayName = 'FileList';
-var FileList = FileListComponent;
+const FileList = FileListComponent;
 FileList.Item = Item;
 
 var _path$j;
@@ -2894,7 +2356,8 @@ var SvgXStroke$1 = function SvgXStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2913,7 +2376,8 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2921,16 +2385,14 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-var FileContext = React.createContext(undefined);
-var useFileContext = function useFileContext() {
+const FileContext = React.createContext(undefined);
+const useFileContext = () => {
   return React.useContext(FileContext);
 };
 
-var CloseComponent = React__default["default"].forwardRef(function (props, ref) {
-  var fileContext = useFileContext();
-  var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
-    return event.preventDefault();
-  }
+const CloseComponent = React__default["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
@@ -2939,7 +2401,7 @@ var CloseComponent = React__default["default"].forwardRef(function (props, ref)
   }), fileContext && fileContext.isCompact ? React__default["default"].createElement(SvgXStroke$1, null) : React__default["default"].createElement(SvgXStroke, null));
 });
 CloseComponent.displayName = 'File.Close';
-var Close = CloseComponent;
+const Close = CloseComponent;
 
 var _path$h;
 
@@ -2952,7 +2414,8 @@ var SvgTrashStroke$1 = function SvgTrashStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2972,7 +2435,8 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2981,11 +2445,9 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
   })));
 };
 
-var DeleteComponent = React__default["default"].forwardRef(function (props, ref) {
-  var fileContext = useFileContext();
-  var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
-    return event.preventDefault();
-  }
+const DeleteComponent = React__default["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
@@ -2994,7 +2456,7 @@ var DeleteComponent = React__default["default"].forwardRef(function (props, ref)
   }), fileContext && fileContext.isCompact ? React__default["default"].createElement(SvgTrashStroke$1, null) : React__default["default"].createElement(SvgTrashStroke, null));
 });
 DeleteComponent.displayName = 'File.Delete';
-var Delete = DeleteComponent;
+const Delete = DeleteComponent;
 
 var _path$f, _rect$1;
 
@@ -3007,7 +2469,8 @@ var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3035,7 +2498,8 @@ var SvgFileZipStroke$1 = function SvgFileZipStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3055,7 +2519,8 @@ var SvgFileImageStroke$1 = function SvgFileImageStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3081,7 +2546,8 @@ var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3101,7 +2567,8 @@ var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3121,7 +2588,8 @@ var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3140,7 +2608,8 @@ var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3159,7 +2628,8 @@ var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -3185,7 +2655,8 @@ var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3205,7 +2676,8 @@ var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3233,7 +2705,8 @@ var SvgFileZipStroke = function SvgFileZipStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3253,7 +2726,8 @@ var SvgFileImageStroke = function SvgFileImageStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3278,7 +2752,8 @@ var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3298,7 +2773,8 @@ var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3318,7 +2794,8 @@ var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3337,7 +2814,8 @@ var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3356,7 +2834,8 @@ var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3365,7 +2844,7 @@ var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
   })));
 };
 
-var fileIconsDefault = {
+const fileIconsDefault = {
   pdf: React__default["default"].createElement(SvgFilePdfStroke, null),
   zip: React__default["default"].createElement(SvgFileZipStroke, null),
   image: React__default["default"].createElement(SvgFileImageStroke, null),
@@ -3376,7 +2855,7 @@ var fileIconsDefault = {
   success: React__default["default"].createElement(SvgCheckCircleStroke$1, null),
   error: React__default["default"].createElement(SvgFileErrorStroke, null)
 };
-var fileIconsCompact = {
+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),
@@ -3388,20 +2867,19 @@ var fileIconsCompact = {
   error: React__default["default"].createElement(SvgFileErrorStroke$1, null)
 };
 
-var _excluded$1 = ["children", "type", "isCompact", "focusInset", "validation"];
-var FileComponent = React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      type = _ref.type,
-      isCompact = _ref.isCompact,
-      focusInset = _ref.focusInset,
-      validation = _ref.validation,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  var fileContextValue = React.useMemo(function () {
-    return {
-      isCompact: isCompact
-    };
-  }, [isCompact]);
-  var validationType = validation || type;
+const FileComponent = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    type,
+    isCompact,
+    focusInset,
+    validation,
+    ...props
+  } = _ref;
+  const fileContextValue = React.useMemo(() => ({
+    isCompact
+  }), [isCompact]);
+  const validationType = validation || type;
   return React__default["default"].createElement(FileContext.Provider, {
     value: fileContextValue
   }, React__default["default"].createElement(StyledFile, _extends$t({}, props, {
@@ -3411,9 +2889,7 @@ var FileComponent = React.forwardRef(function (_ref, ref) {
     ref: ref
   }), validationType && React__default["default"].createElement(StyledFileIcon, {
     isCompact: isCompact
-  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, function (child) {
-    return typeof child === 'string' ? React__default["default"].createElement("span", null, child) : child;
-  })));
+  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, child => typeof child === 'string' ? React__default["default"].createElement("span", null, child) : child)));
 });
 FileComponent.displayName = 'File';
 FileComponent.propTypes = {
@@ -3422,67 +2898,63 @@ FileComponent.propTypes = {
   type: PropTypes__default["default"].oneOf(FILE_TYPE),
   validation: PropTypes__default["default"].oneOf(FILE_VALIDATION)
 };
-var File = FileComponent;
+const File = FileComponent;
 File.Close = Close;
 File.Delete = Delete;
 
-var _excluded = ["start", "end", "disabled", "isCompact", "isBare", "focusInset", "readOnly", "validation", "wrapperProps", "wrapperRef", "onSelect"],
-    _excluded2 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut"];
-var MediaInput = React__default["default"].forwardRef(function (_ref, ref) {
-  var start = _ref.start,
-      end = _ref.end,
-      disabled = _ref.disabled,
-      isCompact = _ref.isCompact,
-      isBare = _ref.isBare,
-      focusInset = _ref.focusInset,
-      readOnly = _ref.readOnly,
-      validation = _ref.validation,
-      _ref$wrapperProps = _ref.wrapperProps,
-      wrapperProps = _ref$wrapperProps === void 0 ? {} : _ref$wrapperProps,
-      wrapperRef = _ref.wrapperRef,
-      onSelect = _ref.onSelect,
-      props = _objectWithoutProperties(_ref, _excluded);
-  var fieldContext = useFieldContext();
-  var inputRef = React.useRef();
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isHovered = _useState4[0],
-      setIsHovered = _useState4[1];
-  var onClick = wrapperProps.onClick,
-      onFocus = wrapperProps.onFocus,
-      onBlur = wrapperProps.onBlur,
-      onMouseOver = wrapperProps.onMouseOver,
-      onMouseOut = wrapperProps.onMouseOut,
-      otherWrapperProps = _objectWithoutProperties(wrapperProps, _excluded2);
-  var onFauxInputClickHandler = containerUtilities.composeEventHandlers(onClick, function () {
+const MediaInput = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    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);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const {
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    ...otherWrapperProps
+  } = wrapperProps;
+  const onFauxInputClickHandler = containerUtilities.composeEventHandlers(onClick, () => {
     inputRef.current && inputRef.current.focus();
   });
-  var onFauxInputFocusHandler = containerUtilities.composeEventHandlers(onFocus, function () {
+  const onFauxInputFocusHandler = containerUtilities.composeEventHandlers(onFocus, () => {
     setIsFocused(true);
   });
-  var onFauxInputBlurHandler = containerUtilities.composeEventHandlers(onBlur, function () {
+  const onFauxInputBlurHandler = containerUtilities.composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   });
-  var onFauxInputMouseOverHandler = containerUtilities.composeEventHandlers(onMouseOver, function () {
+  const onFauxInputMouseOverHandler = containerUtilities.composeEventHandlers(onMouseOver, () => {
     setIsHovered(true);
   });
-  var onFauxInputMouseOutHandler = containerUtilities.composeEventHandlers(onMouseOut, function () {
+  const onFauxInputMouseOutHandler = containerUtilities.composeEventHandlers(onMouseOut, () => {
     setIsHovered(false);
   });
-  var onSelectHandler = readOnly ? containerUtilities.composeEventHandlers(onSelect, function (event) {
+  const onSelectHandler = readOnly ? containerUtilities.composeEventHandlers(onSelect, event => {
     event.currentTarget.select();
   }) : onSelect;
-  var combinedProps = _objectSpread2({
-    disabled: disabled,
-    readOnly: readOnly,
+  let combinedProps = {
+    disabled,
+    readOnly,
     ref: mergeRefs__default["default"]([inputRef, ref]),
-    onSelect: onSelectHandler
-  }, props);
-  var isLabelHovered;
+    onSelect: onSelectHandler,
+    ...props
+  };
+  let isLabelHovered;
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps, {
       isDescribed: true