npm - @zendeskgarden/react-forms - Versions diffs - 8.57.1 → 8.59.0 - Mend

@zendeskgarden/react-forms 8.57.1 → 8.59.0

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

Files changed (5) hide show

package/dist/index.cjs.js +1158 -1686
package/dist/index.esm.js +1159 -1687
package/dist/typings/styled/range/StyledSlider.d.ts +4 -5
package/dist/typings/types/index.d.ts +4 -2
package/package.json +5 -4

package/dist/index.esm.js CHANGED Viewed

@@ -12,269 +12,90 @@ import styled, { css, ThemeContext } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, useText, useDocument } from '@zendeskgarden/react-theming';
 import { hideVisually, math, rgba, em } from 'polished';
 import PropTypes from 'prop-types';
-import { composeEventHandlers, KEY_CODES, getControlledValue } from '@zendeskgarden/container-utilities';
+import { composeEventHandlers, getControlledValue } from '@zendeskgarden/container-utilities';
 import mergeRefs from 'react-merge-refs';
 import debounce from 'lodash.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;
-}
+import { useSlider } from '@zendeskgarden/container-slider';
 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 = createContext(undefined);
-var useFieldContext = function useFieldContext() {
-  var fieldContext = useContext(FieldContext);
+const FieldContext = createContext(undefined);
+const useFieldContext = () => {
+  const fieldContext = useContext(FieldContext);
   return fieldContext;
 };
-var COMPONENT_ID$K = 'forms.field';
-var StyledField = styled.div.attrs({
+const COMPONENT_ID$K = 'forms.field';
+const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$K, props);
-});
+})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID$K, props));
 StyledField.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$J = 'forms.fieldset';
-var StyledFieldset = styled(StyledField).attrs({
+const COMPONENT_ID$J = 'forms.fieldset';
+const StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$J, props);
-});
+})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID$J, props));
 StyledFieldset.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$I = 'forms.input_label';
-var StyledLabel = styled.label.attrs({
+const COMPONENT_ID$I = 'forms.input_label';
+const StyledLabel = styled.label.attrs({
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 && hideVisually();
-}, function (props) {
-  return 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 => 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 && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$I, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$H = 'forms.fieldset_legend';
-var StyledLegend = styled(StyledLabel).attrs({
+const COMPONENT_ID$H = 'forms.fieldset_legend';
+const StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
-})(["padding:0;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$H, props);
-});
+})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$H, props));
 StyledLegend.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$G = 'forms.input_hint';
-var StyledHint = styled.div.attrs({
+const COMPONENT_ID$G = 'forms.input_hint';
+const StyledHint = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$G, props);
-});
+})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$G, props));
 StyledHint.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -290,7 +111,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.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -320,7 +142,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -345,7 +168,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.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -360,12 +184,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.createElement(SvgAlertErrorStroke, props);
   } else if (validation === 'success') {
@@ -377,29 +202,23 @@ var MessageIcon = function MessageIcon(_ref) {
   }
   return retVal;
 };
-var COMPONENT_ID$F = 'forms.input_message_icon';
-var StyledMessageIcon = styled(MessageIcon).attrs({
+const COMPONENT_ID$F = 'forms.input_message_icon';
+const StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$F, props);
-});
+})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$F, props));
 StyledMessageIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
-var validationStyles = function validationStyles(props) {
-  var rtl = props.theme.rtl;
-  var padding = math("".concat(props.theme.space.base, " * 2px + ").concat(props.theme.iconSizes.md));
-  var color;
+const validationStyles = props => {
+  const rtl = props.theme.rtl;
+  const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
+  let color;
   if (props.validation === 'error') {
     color = getColor('dangerHue', 600, props.theme);
   } else if (props.validation === 'success') {
@@ -411,44 +230,30 @@ var validationStyles = function validationStyles(props) {
   }
   return css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
 };
-var COMPONENT_ID$E = 'forms.input_message';
-var StyledMessage = styled.div.attrs({
+const COMPONENT_ID$E = 'forms.input_message';
+const StyledMessage = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 math("".concat(props.theme.space.base, " * 1px"));
-}, function (props) {
-  return 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 => 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 => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID$E, props));
 StyledMessage.defaultProps = {
   theme: 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 = getColor('neutralHue', SHADE - 200, props.theme);
-  var borderColor;
-  var hoverBorderColor;
-  var focusBorderColor;
+const colorStyles$b = props => {
+  const SHADE = 600;
+  const placeholderColor = 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') {
@@ -464,13 +269,15 @@ var colorStyles$b = function colorStyles(props) {
     hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
     focusBorderColor = hoverBorderColor;
   }
-  var boxShadow = "\n    ".concat(props.focusInset ? 'inset' : '', "\n    ").concat(props.theme.shadows.md(rgba(focusBorderColor, 0.35)));
-  var readOnlyBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
-  var readOnlyBorderColor = getColor('neutralHue', SHADE - 300, props.theme);
-  var disabledBackgroundColor = readOnlyBackgroundColor;
-  var disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
-  var disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme);
-  var controlledBorderColor = borderColor;
+  const boxShadow = `
+    ${props.focusInset ? 'inset' : ''}
+    ${props.theme.shadows.md(rgba(focusBorderColor, 0.35))}`;
+  const readOnlyBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
+  const readOnlyBorderColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const disabledBackgroundColor = readOnlyBackgroundColor;
+  const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
+  const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme);
+  let controlledBorderColor = borderColor;
   if (props.isFocused) {
     controlledBorderColor = focusBorderColor;
   }
@@ -479,88 +286,67 @@ var colorStyles$b = function colorStyles(props) {
   }
   return 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 = 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 = 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 = math("".concat(height, " - (").concat(paddingVertical, " * 2) - (").concat(props.theme.borderWidths.sm, " * 2)"));
-  var padding = props.isBare ? '0' : "".concat(em(paddingVertical, fontSize), " ").concat(em(paddingHorizontal, fontSize));
-  var swatchMarginVertical = math("(".concat(lineHeight, " - ").concat(swatchHeight, ") / 2"));
-  var swatchMarginHorizontal = math("".concat(paddingVertical, " + ").concat(swatchMarginVertical, " - ").concat(paddingHorizontal));
-  return 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, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math("".concat(swatchMarginHorizontal, " * -2")), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
-};
-var StyledTextInput = styled.input.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$D,
-    'data-garden-version': '8.57.1',
-    'aria-invalid': isInvalid(props.validation)
-  };
-}).withConfig({
+  const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${props.theme.borderWidths.sm} * 2)`);
+  const padding = props.isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`;
+  const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`);
+  const swatchMarginHorizontal = math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
+  return 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, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
+};
+const StyledTextInput = styled.input.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$D,
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$D, props));
 StyledTextInput.defaultProps = {
   theme: 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(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(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$C, props);
-});
+})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID$C, props));
 StyledTextarea.defaultProps = {
   theme: 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) {
@@ -568,11 +354,11 @@ var colorStyles$a = function colorStyles(props) {
   }
   return css(["color:", ";"], 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 {
@@ -580,286 +366,220 @@ var sizeStyles$e = function sizeStyles(props) {
   }
   return css(["margin:", ";width:", ";height:", ";"], margin, size, size);
 };
-var StyledTextMediaFigure = styled(
-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(
+_ref => {
+  let {
+    children,
+    position,
+    isHovered,
+    isFocused,
+    isDisabled,
+    isRotated,
+    theme,
+    ...props
+  } = _ref;
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$B, props));
 StyledTextMediaFigure.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$A = 'forms.faux_input';
-var StyledTextFauxInput = styled(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.1'
-  };
-}).withConfig({
+const COMPONENT_ID$A = 'forms.faux_input';
+const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
+  as: 'div',
+  'aria-readonly': props.isReadOnly,
+  'aria-disabled': props.isDisabled,
+  'data-garden-id': COMPONENT_ID$A,
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$A, props));
 StyledTextFauxInput.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$z = 'forms.media_input';
-var StyledTextMediaInput = styled(StyledTextInput).attrs({
+const COMPONENT_ID$z = 'forms.media_input';
+const StyledTextMediaInput = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.59.0',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
   componentId: "sc-12i9xfi-0"
-})(["flex-grow:1;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$z, props);
-});
+})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$z, props));
 StyledTextMediaInput.defaultProps = {
   theme: 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 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 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.div.attrs({
+const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$y, props));
 StyledInputGroup.defaultProps = {
   theme: 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 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(StyledLabel).attrs({
+const StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$x, props);
-});
+})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), props => retrieveComponentStyles(COMPONENT_ID$x, props));
 StyledRadioLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$w = 'forms.checkbox_label';
-var StyledCheckLabel = styled(StyledRadioLabel).attrs({
+const COMPONENT_ID$w = 'forms.checkbox_label';
+const StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
-})(["", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$w, props);
-});
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$w, props));
 StyledCheckLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$v = 'forms.radio_hint';
-var StyledRadioHint = styled(StyledHint).attrs({
+const COMPONENT_ID$v = 'forms.radio_hint';
+const StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
-})(["padding-", ":", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return math("".concat(props.theme.space.base, " * 6px"));
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$v, props);
-});
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$v, props));
 StyledRadioHint.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$u = 'forms.checkbox_hint';
-var StyledCheckHint = styled(StyledRadioHint).attrs({
+const COMPONENT_ID$u = 'forms.checkbox_hint';
+const StyledCheckHint = styled(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
-})(["", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$u, props);
-});
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$u, props));
 StyledCheckHint.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$t = 'forms.radio';
-var colorStyles$9 = function colorStyles(props) {
-  var SHADE = 600;
-  var borderColor = getColor('neutralHue', SHADE - 300, props.theme);
-  var backgroundColor = props.theme.colors.background;
-  var iconColor = backgroundColor;
-  var hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
-  var hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
-  var focusBorderColor = hoverBorderColor;
-  var activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
-  var activeBorderColor = focusBorderColor;
-  var boxShadow = props.theme.shadows.md(rgba(focusBorderColor, 0.35));
-  var checkedBorderColor = focusBorderColor;
-  var checkedBackgroundColor = checkedBorderColor;
-  var checkedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
-  var checkedHoverBackgroundColor = checkedHoverBorderColor;
-  var checkedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
-  var checkedActiveBackgroundColor = checkedActiveBorderColor;
-  var disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
+const COMPONENT_ID$t = 'forms.radio';
+const colorStyles$9 = props => {
+  const SHADE = 600;
+  const borderColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const backgroundColor = props.theme.colors.background;
+  const iconColor = backgroundColor;
+  const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
+  const hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
+  const focusBorderColor = hoverBorderColor;
+  const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBorderColor = focusBorderColor;
+  const boxShadow = props.theme.shadows.md(rgba(focusBorderColor, 0.35));
+  const checkedBorderColor = focusBorderColor;
+  const checkedBackgroundColor = checkedBorderColor;
+  const checkedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const checkedHoverBackgroundColor = checkedHoverBorderColor;
+  const checkedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
+  const checkedActiveBackgroundColor = checkedActiveBorderColor;
+  const disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
   return 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 = math("(".concat(lineHeight, " - ").concat(size, ") / 2"));
-  var iconSize = props.theme.iconSizes.sm;
-  var iconPosition = math("(".concat(size, " - ").concat(iconSize, ") / 2"));
-  var iconTop = 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 = math(`(${lineHeight} - ${size}) / 2`);
+  const iconSize = props.theme.iconSizes.sm;
+  const iconPosition = math(`(${size} - ${iconSize}) / 2`);
+  const iconTop = math(`${iconPosition} + ${top}`);
+  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
   return 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.input.attrs({
+const StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$t, props));
 StyledRadioInput.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$s = 'forms.checkbox';
-var colorStyles$8 = function colorStyles(props) {
-  var SHADE = 600;
-  var indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme);
-  var indeterminateBackgroundColor = indeterminateBorderColor;
-  var indeterminateActiveBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
-  var indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
-  var indeterminateDisabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
+const COMPONENT_ID$s = 'forms.checkbox';
+const colorStyles$8 = props => {
+  const SHADE = 600;
+  const indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme);
+  const indeterminateBackgroundColor = indeterminateBorderColor;
+  const indeterminateActiveBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
+  const indeterminateDisabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
   return 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(StyledRadioInput).attrs({
+const StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$s, props);
-});
+})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles$8(props), props => retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledCheckInput.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$r = 'forms.radio_message';
-var StyledRadioMessage = styled(StyledMessage).attrs({
+const COMPONENT_ID$r = 'forms.radio_message';
+const StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
-})(["padding-", ":", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return math("".concat(props.theme.space.base, " * 6px"));
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$r, props);
-});
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$r, props));
 StyledRadioMessage.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$q = 'forms.checkbox_message';
-var StyledCheckMessage = styled(StyledRadioMessage).attrs({
+const COMPONENT_ID$q = 'forms.checkbox_message';
+const StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
-})(["", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$q, props);
-});
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q, props));
 StyledCheckMessage.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -875,7 +595,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -886,16 +607,14 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
   })));
 };
-var COMPONENT_ID$p = 'forms.check_svg';
-var StyledCheckSvg = styled(SvgCheckSmFill).attrs({
+const COMPONENT_ID$p = 'forms.check_svg';
+const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$p, props));
 StyledCheckSvg.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -911,7 +630,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.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -920,78 +640,64 @@ var SvgDashFill = function SvgDashFill(props) {
   })));
 };
-var COMPONENT_ID$o = 'forms.dash_svg';
-var StyledDashSvg = styled(SvgDashFill).attrs({
+const COMPONENT_ID$o = 'forms.dash_svg';
+const StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$o, props);
-});
+})(["transition:opacity 0.25 ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$o, props));
 StyledDashSvg.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$n = 'forms.file_upload';
-var colorStyles$7 = function colorStyles(props) {
-  var baseColor = getColor('primaryHue', 600, props.theme);
-  var hoverColor = getColor('primaryHue', 700, props.theme);
-  var activeColor = getColor('primaryHue', 800, props.theme);
-  var disabledBackgroundColor = getColor('neutralHue', 200, props.theme);
-  var disabledForegroundColor = getColor('neutralHue', 400, props.theme);
-  var boxShadow = "inset ".concat(props.theme.shadows.md(rgba(baseColor, 0.35)));
+const COMPONENT_ID$n = 'forms.file_upload';
+const colorStyles$7 = props => {
+  const baseColor = getColor('primaryHue', 600, props.theme);
+  const hoverColor = getColor('primaryHue', 700, props.theme);
+  const activeColor = getColor('primaryHue', 800, props.theme);
+  const disabledBackgroundColor = getColor('neutralHue', 200, props.theme);
+  const disabledForegroundColor = getColor('neutralHue', 400, props.theme);
+  const boxShadow = `inset ${props.theme.shadows.md(rgba(baseColor, 0.35))}`;
   return 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 : getColor('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, boxShadow, activeColor, 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 = math("".concat(props.theme.space.base * (props.isCompact ? 2.5 : 5), " - ").concat(props.theme.borderWidths.sm));
-  var fontSize = props.theme.fontSizes.md;
-  var lineHeight = 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 = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
+  const fontSize = props.theme.fontSizes.md;
+  const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
   return 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.div.attrs({
+const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledFileUpload.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$m = 'forms.file.close';
-var StyledFileClose = styled.div.attrs({
+const COMPONENT_ID$m = 'forms.file.close';
+const StyledFileClose = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledFileClose.defaultProps = {
   theme: 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 = getColor('successHue', 600, props.theme);
     focusBorderColor = borderColor;
@@ -1005,100 +711,107 @@ var colorStyles$6 = function colorStyles(props) {
     focusBorderColor = getColor('primaryHue', 600, props.theme);
     foregroundColor = props.theme.colors.foreground;
   }
-  var boxShadow = "\n    ".concat(props.focusInset ? 'inset' : '', "\n    ").concat(props.theme.shadows.md(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 = 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(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 = 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.div.attrs({
+const StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledFile.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$k = 'forms.file.delete';
-var StyledFileDelete = styled(StyledFileClose).attrs({
+const COMPONENT_ID$k = 'forms.file.delete';
+const StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], function (props) {
-  return getColor('dangerHue', 600, props.theme);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$k, props);
-});
+})(["color:", ";", ";"], props => getColor('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledFileDelete.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _excluded$h = ["children", "isCompact", "theme"];
-var COMPONENT_ID$j = 'forms.file.icon';
-var StyledFileIcon = styled(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(_ref => {
+  let {
+    children,
+    isCompact,
+    theme,
+    ...props
+  } = _ref;
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$j, props));
 StyledFileIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$i = 'forms.file_list';
-var StyledFileList = styled.ul.attrs({
+const COMPONENT_ID$i = 'forms.file_list';
+const StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
-})(["margin:0;padding:0;list-style:none;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$i, props);
-});
+})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledFileList.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$h = 'forms.file_list.item';
-var StyledFileListItem = styled.li.attrs({
+const COMPONENT_ID$h = 'forms.file_list.item';
+const StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$h, props);
-});
+})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledFileListItem.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -1114,7 +827,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.createElement("circle", {
     cx: 6,
     cy: 6,
@@ -1123,110 +837,82 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
   })));
 };
-var COMPONENT_ID$g = 'forms.radio_svg';
-var StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
+const COMPONENT_ID$g = 'forms.radio_svg';
+const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 retrieveComponentStyles(COMPONENT_ID$g, props);
-});
+})(["transition:opacity 0.25 ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledRadioSvg.defaultProps = {
   theme: 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 css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
 };
-var StyledToggleLabel = styled(StyledCheckLabel).attrs({
+const StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
-})(["", ";", ";"], function (props) {
-  return sizeStyles$9(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$f, props);
-});
+})(["", ";", ";"], props => sizeStyles$9(props), props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledToggleLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$e = 'forms.toggle_hint';
-var StyledToggleHint = styled(StyledHint).attrs({
+const COMPONENT_ID$e = 'forms.toggle_hint';
+const StyledToggleHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
-})(["padding-", ":", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return math("".concat(props.theme.space.base, " * 12px"));
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$e, props);
-});
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledToggleHint.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$d = 'forms.toggle';
-var colorStyles$5 = function colorStyles(props) {
-  var SHADE = 600;
-  var backgroundColor = getColor('neutralHue', SHADE - 100, props.theme);
-  var hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme);
-  var activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme);
+const COMPONENT_ID$d = 'forms.toggle';
+const colorStyles$5 = props => {
+  const SHADE = 600;
+  const backgroundColor = getColor('neutralHue', SHADE - 100, props.theme);
+  const hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme);
+  const activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme);
   return 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 = math("(".concat(height, " - ").concat(iconSize, ") / 2"));
-  var checkedIconPosition = 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 = math(`(${height} - ${iconSize}) / 2`);
+  const checkedIconPosition = math(`${width} - ${iconSize} - ${iconPosition}`);
   return 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(StyledCheckInput).attrs({
+const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledToggleInput.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$c = 'forms.toggle_message';
-var StyledToggleMessage = styled(StyledMessage).attrs({
+const COMPONENT_ID$c = 'forms.toggle_message';
+const StyledToggleMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
-})(["padding-", ":", ";& ", "{", ":", ";}", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return math("".concat(props.theme.space.base, " * 12px"));
-}, StyledMessageIcon, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return math("".concat(props.theme.space.base, " * 10px - ").concat(props.theme.iconSizes.md));
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$c, props);
-});
+})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledToggleMessage.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -1242,7 +928,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.createElement("circle", {
     cx: 8,
     cy: 8,
@@ -1251,53 +938,45 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
   })));
 };
-var COMPONENT_ID$b = 'forms.toggle_svg';
-var StyledToggleSvg = styled(SvgCircleSmFill).attrs({
+const COMPONENT_ID$b = 'forms.toggle_svg';
+const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
-})(["transition:all 0.15s ease-in-out;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$b, props);
-});
+})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledToggleSvg.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$a = 'forms.select';
-var colorStyles$4 = function colorStyles(props) {
-  var color = getColor('neutralHue', 700, props.theme);
+const COMPONENT_ID$a = 'forms.select';
+const colorStyles$4 = props => {
+  const color = getColor('neutralHue', 700, props.theme);
   return css(["&:hover + ", ",&:focus + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
 };
-var sizeStyles$7 = function sizeStyles(props) {
-  var padding = 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 = 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 css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition);
 };
-var StyledSelect = styled(StyledTextInput).attrs({
+const StyledSelect = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.59.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: DEFAULT_THEME
 };
-var COMPONENT_ID$9 = 'forms.select_wrapper';
-var StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
+const COMPONENT_ID$9 = 'forms.select_wrapper';
+const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.59.0',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1307,321 +986,331 @@ StyledSelectWrapper.defaultProps = {
   theme: 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 = getColor('primaryHue', SHADE, props.theme);
-  var thumbBorderColor = thumbBackgroundColor;
-  var thumbBoxShadow = props.theme.shadows.lg(math("".concat(props.theme.space.base, " * 1px")), math("".concat(props.theme.space.base, " * 2px")), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
-  var thumbActiveBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
-  var thumbActiveBorderColor = thumbBorderColor;
-  var thumbDisabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
-  var thumbDisabledBorderColor = thumbDisabledBackgroundColor;
-  var thumbFocusBoxShadow = props.theme.shadows.md(getColor('primaryHue', SHADE, props.theme, 0.35));
-  var thumbHoverBackgroundColor = thumbActiveBackgroundColor;
-  var thumbHoverBorderColor = thumbHoverBackgroundColor;
-  var trackBackgroundColor = 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 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 = math("".concat(props.theme.space.base, " * 5px"));
-  var trackHeight = math("".concat(props.theme.space.base, " * 1.5px"));
-  var trackBorderRadius = trackHeight;
-  var trackMargin = math("(".concat(thumbSize, " - ").concat(trackHeight, ") / 2 + ").concat(props.theme.shadowWidths.md));
-  var thumbMargin = math("(".concat(trackHeight, " - ").concat(thumbSize, ") / 2"));
-  return css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, 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.input.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$8,
-    'data-garden-version': '8.57.1',
-    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 = getColor('primaryHue', SHADE, props.theme);
+  const thumbBorderColor = thumbBackgroundColor;
+  const thumbBoxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
+  const thumbActiveBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const thumbActiveBorderColor = thumbBorderColor;
+  const thumbDisabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
+  const thumbFocusBoxShadow = props.theme.shadows.md(getColor('primaryHue', SHADE, props.theme, 0.35));
+  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
+  const thumbHoverBorderColor = thumbHoverBackgroundColor;
+  const trackBackgroundColor = 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 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 = math(`${props.theme.space.base} * 5px`);
+  const trackHeight = math(`${props.theme.space.base} * 1.5px`);
+  const trackBorderRadius = trackHeight;
+  const trackMargin = math(`(${thumbSize} - ${trackHeight}) / 2 + ${props.theme.shadowWidths.md}`);
+  const thumbMargin = math(`(${trackHeight} - ${thumbSize}) / 2`);
+  return css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, 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.input.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledRangeInput.defaultProps = {
   backgroundSize: '0%',
   hasLowerTrack: true,
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$7 = 'forms.slider';
-var StyledSlider = styled.div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$7,
-    'data-garden-version': '8.57.1',
-    'aria-disabled': props.isDisabled
-  };
+const COMPONENT_ID$7 = 'forms.slider';
+const StyledSlider = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '8.59.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 math("(".concat(props.theme.space.base, " * 5px) + (").concat(props.theme.shadowWidths.md, " * 2)"));
-}, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, function (props) {
-  return math("".concat(props.theme.space.base, " * 2px"));
-}, function (props) {
-  return 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 => math(`(${props.theme.space.base} * 5px) + (${props.theme.shadowWidths.md} * 2)`), StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props => math(`${props.theme.space.base} * 2px`), props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledSlider.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$6 = 'forms.slider_thumb';
-var colorStyles$2 = function colorStyles(props) {
-  var SHADE = 600;
-  var backgroundColor = getColor('primaryHue', SHADE, props.theme);
-  var borderColor = backgroundColor;
-  var boxShadow = props.theme.shadows.lg(math("".concat(props.theme.space.base, " * 1px")), math("".concat(props.theme.space.base, " * 2px")), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
-  var activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
-  var activeBorderColor = borderColor;
-  var hoverBackgroundColor = activeBackgroundColor;
-  var hoverBorderColor = hoverBackgroundColor;
-  var focusBoxShadow = props.theme.shadows.md(getColor('primaryHue', SHADE, props.theme, 0.35));
-  var disabledBackgroundColor = 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 = getColor('primaryHue', SHADE, props.theme);
+  const borderColor = backgroundColor;
+  const boxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
+  const activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const activeBorderColor = borderColor;
+  const hoverBackgroundColor = activeBackgroundColor;
+  const hoverBorderColor = hoverBackgroundColor;
+  const focusBoxShadow = props.theme.shadows.md(getColor('primaryHue', SHADE, props.theme, 0.35));
+  const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const disabledBorderColor = disabledBackgroundColor;
   return 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 = math("".concat(props.theme.space.base, " * 5px"));
-  var marginTop = math("".concat(size, " / -2"));
+const sizeStyles$5 = props => {
+  const size = math(`${props.theme.space.base} * 5px`);
+  const marginTop = math(`${size} / -2`);
   return css(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size);
 };
-var StyledSliderThumb = styled.div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.57.1',
-    'aria-disabled': props.isDisabled
-  };
-}).withConfig({
+const StyledSliderThumb = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.59.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 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 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 => math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5(props), props => colorStyles$2(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledSliderThumb.defaultProps = {
   position: 0,
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$5 = 'forms.slider_track';
-var colorStyles$1 = function colorStyles(props) {
-  var SHADE = 600;
-  var backgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
-  var backgroundImageColor = getColor('primaryHue', SHADE, props.theme);
-  var disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
+const COMPONENT_ID$5 = 'forms.slider_track';
+const colorStyles$1 = props => {
+  const SHADE = 600;
+  const backgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
+  const backgroundImageColor = getColor('primaryHue', SHADE, props.theme);
+  const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
   return 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 = math("".concat(props.theme.space.base, " * 1.5px"));
-  var backgroundPosition = math("".concat(props.backgroundPosition, " * 1px"));
-  var backgroundSize = math("".concat(props.backgroundSize, " * 1px"));
-  var borderRadius = height;
-  var marginTop = math("".concat(height, " / -2"));
-  var padding = math("".concat(props.theme.space.base, " * 2.5px"));
+const sizeStyles$4 = props => {
+  const height = math(`${props.theme.space.base} * 1.5px`);
+  const backgroundPosition = math(`${props.backgroundPosition} * 1px`);
+  const backgroundSize = math(`${props.backgroundSize} * 1px`);
+  const borderRadius = height;
+  const marginTop = math(`${height} / -2`);
+  const padding = math(`${props.theme.space.base} * 2.5px`);
   return css(["margin-top:", ";border-radius:", ";background-position:", ";background-size:", ";padding:0 ", ";"], marginTop, borderRadius, backgroundPosition, backgroundSize, padding);
 };
-var StyledSliderTrack = styled.div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.57.1',
-    'aria-disabled': props.isDisabled
-  };
-}).withConfig({
+const StyledSliderTrack = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledSliderTrack.defaultProps = {
   backgroundSize: 0,
   backgroundPosition: 0,
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$4 = 'forms.slider_track_rail';
-var sizeStyles$3 = function sizeStyles(props) {
-  var height = math("".concat(props.theme.space.base, " * 1.5px"));
-  var margin = math("".concat(props.theme.space.base, " * 2.5px"));
-  return 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 = math(`${props.theme.space.base} * 1.5px`);
+  const margin = math(`${props.theme.space.base} * 2.5px`);
+  return css(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? `-${margin}` : margin, props.theme.rtl ? margin : `-${margin}`, height);
 };
-var StyledSliderTrackRail = styled.div.attrs({
+const StyledSliderTrackRail = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.0'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
-})(["position:relative;", ";", ";"], function (props) {
-  return sizeStyles$3(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["position:relative;", ";", ";"], props => sizeStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledSliderTrackRail.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$3 = 'forms.tile_icon';
-var sizeStyles$2 = function sizeStyles(props) {
-  var iconSize = 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 = 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 css(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize);
 };
-var StyledTileIcon = styled.span.attrs({
+const StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledTileIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
-var COMPONENT_ID$2 = 'forms.tile';
-var colorStyles = function colorStyles(props) {
-  var SHADE = 600;
-  var iconColor = getColor('neutralHue', SHADE, props.theme);
-  var color = getColor('neutralHue', SHADE + 200, props.theme);
-  var borderColor = getColor('neutralHue', SHADE - 300, props.theme);
-  var hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
-  var hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
-  var focusBorderColor = hoverBorderColor;
-  var focusBoxShadow = props.theme.shadows.md(rgba(focusBorderColor, 0.35));
-  var activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
-  var activeBorderColor = focusBorderColor;
-  var disabledBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
-  var disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
-  var disabledColor = getColor('neutralHue', SHADE - 200, props.theme);
-  var selectedBorderColor = focusBorderColor;
-  var selectedBackgroundColor = selectedBorderColor;
-  var selectedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
-  var selectedHoverBackgroundColor = selectedHoverBorderColor;
-  var selectedActiveBorderColor = 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 = getColor('neutralHue', SHADE, props.theme);
+  const color = getColor('neutralHue', SHADE + 200, props.theme);
+  const borderColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
+  const hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
+  const focusBorderColor = hoverBorderColor;
+  const focusBoxShadow = props.theme.shadows.md(rgba(focusBorderColor, 0.35));
+  const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBorderColor = focusBorderColor;
+  const disabledBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
+  const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
+  const disabledColor = getColor('neutralHue', SHADE - 200, props.theme);
+  const selectedBorderColor = focusBorderColor;
+  const selectedBackgroundColor = selectedBorderColor;
+  const selectedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const selectedHoverBackgroundColor = selectedHoverBorderColor;
+  const selectedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
+  const selectedActiveBackgroundColor = selectedActiveBorderColor;
+  const selectedDisabledBackgroundColor = disabledBorderColor;
   return 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, 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.label.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.57.1',
-    'data-garden-focus-visible': props.isFocused,
-    'data-garden-selected': props.isSelected
-  };
-}).withConfig({
+const StyledTile = styled.label.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.59.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 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 => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledTile.defaultProps = {
   theme: 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 = math("(".concat(props.theme.iconSizes.md, " * 2) + ").concat(props.theme.space.base * 5, "px"));
+    marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
   }
   return css(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue);
 };
-var StyledTileDescription = styled.span.attrs({
+const StyledTileDescription = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTileDescription.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledTileInput = styled.input.withConfig({
+const StyledTileInput = styled.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;"]);
@@ -1629,91 +1318,66 @@ StyledTileInput.defaultProps = {
   theme: 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 = math("(".concat(props.theme.iconSizes.md, " * 2) + ").concat(props.theme.space.base * 5, "px"));
+    marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
     marginTop = '0';
   }
   return css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
 };
-var StyledTileLabel = styled.span.attrs({
+const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.59.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 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 retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTileLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _excluded$g = ["getInputProps", "getMessageProps"];
-var Field = React__default.forwardRef(function (props, ref) {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasHint = _useState2[0],
-      setHasHint = _useState2[1];
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasMessage = _useState4[0],
-      setHasMessage = _useState4[1];
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isLabelActive = _useState6[0],
-      setIsLabelActive = _useState6[1];
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isLabelHovered = _useState8[0],
-      setIsLabelHovered = _useState8[1];
-  var multiThumbRangeRef = useRef(null);
-  var _useField = useField(props.id),
-      _getInputProps = _useField.getInputProps,
-      _getMessageProps = _useField.getMessageProps,
-      propGetters = _objectWithoutProperties(_useField, _excluded$g);
-  var fieldProps = 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.forwardRef((props, ref) => {
+  const [hasHint, setHasHint] = useState(false);
+  const [hasMessage, setHasMessage] = useState(false);
+  const [isLabelActive, setIsLabelActive] = useState(false);
+  const [isLabelHovered, setIsLabelHovered] = useState(false);
+  const multiThumbRangeRef = useRef(null);
+  const {
+    getInputProps,
+    getMessageProps,
+    ...propGetters
+  } = useField(props.id);
+  const fieldProps = 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.createElement(FieldContext.Provider, {
     value: fieldProps
   }, React__default.createElement(StyledField, _extends$t({}, props, {
@@ -1722,27 +1386,25 @@ var Field = React__default.forwardRef(function (props, ref) {
 });
 Field.displayName = 'Field';
-var FieldsetContext = createContext(undefined);
-var useFieldsetContext = function useFieldsetContext() {
-  var fieldsetContext = useContext(FieldsetContext);
+const FieldsetContext = createContext(undefined);
+const useFieldsetContext = () => {
+  const fieldsetContext = useContext(FieldsetContext);
   return fieldsetContext;
 };
-var LegendComponent = forwardRef(function (props, ref) {
-  var fieldsetContext = useFieldsetContext();
+const LegendComponent = forwardRef((props, ref) => {
+  const fieldsetContext = useFieldsetContext();
   return React__default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
     ref: ref
   }));
 });
 LegendComponent.displayName = 'Fieldset.Legend';
-var Legend = LegendComponent;
+const Legend = LegendComponent;
-var FieldsetComponent = forwardRef(function (props, ref) {
-  var fieldsetContext = useMemo(function () {
-    return {
-      isCompact: props.isCompact
-    };
-  }, [props.isCompact]);
+const FieldsetComponent = forwardRef((props, ref) => {
+  const fieldsetContext = useMemo(() => ({
+    isCompact: props.isCompact
+  }), [props.isCompact]);
   return React__default.createElement(FieldsetContext.Provider, {
     value: fieldsetContext
   }, React__default.createElement(StyledFieldset, _extends$t({}, props, {
@@ -1753,31 +1415,32 @@ FieldsetComponent.displayName = 'Fieldset';
 FieldsetComponent.propTypes = {
   isCompact: PropTypes.bool
 };
-var Fieldset = FieldsetComponent;
+const Fieldset = FieldsetComponent;
 Fieldset.Legend = Legend;
-var InputContext = createContext(undefined);
-var useInputContext = function useInputContext() {
+const InputContext = createContext(undefined);
+const useInputContext = () => {
   return useContext(InputContext);
 };
-var Hint = React__default.forwardRef(function (props, ref) {
-  var _ref = useFieldContext() || {},
-      hasHint = _ref.hasHint,
-      setHasHint = _ref.setHasHint,
-      getHintProps = _ref.getHintProps;
-  var type = useInputContext();
-  useEffect(function () {
+const Hint = React__default.forwardRef((props, ref) => {
+  const {
+    hasHint,
+    setHasHint,
+    getHintProps
+  } = useFieldContext() || {};
+  const type = useInputContext();
+  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') {
@@ -1787,7 +1450,7 @@ var Hint = React__default.forwardRef(function (props, ref) {
   } else {
     HintComponent = StyledHint;
   }
-  var combinedProps = props;
+  let combinedProps = props;
   if (getHintProps) {
     combinedProps = getHintProps(combinedProps);
   }
@@ -1797,52 +1460,56 @@ var Hint = React__default.forwardRef(function (props, ref) {
 });
 Hint.displayName = 'Hint';
-var Label$1 = React__default.forwardRef(function (props, ref) {
-  var fieldContext = useFieldContext();
-  var fieldsetContext = useFieldsetContext();
-  var type = useInputContext();
-  var combinedProps = props;
+const Label$1 = React__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: composeEventHandlers(props.onMouseUp, function () {
+      const {
+        setIsLabelActive,
+        setIsLabelHovered,
+        multiThumbRangeRef
+      } = fieldContext;
+      combinedProps = {
+        ...combinedProps,
+        onMouseUp: composeEventHandlers(props.onMouseUp, () => {
           setIsLabelActive(false);
         }),
-        onMouseDown: composeEventHandlers(props.onMouseDown, function () {
+        onMouseDown: composeEventHandlers(props.onMouseDown, () => {
           setIsLabelActive(true);
         }),
-        onMouseEnter: composeEventHandlers(props.onMouseEnter, function () {
+        onMouseEnter: composeEventHandlers(props.onMouseEnter, () => {
           setIsLabelHovered(true);
         }),
-        onMouseLeave: composeEventHandlers(props.onMouseLeave, function () {
+        onMouseLeave: composeEventHandlers(props.onMouseLeave, () => {
           setIsLabelHovered(false);
         }),
-        onClick: composeEventHandlers(props.onClick, function () {
+        onClick: 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.createElement(StyledRadioLabel, _extends$t({
       ref: ref
     }, combinedProps), React__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();
@@ -1852,9 +1519,10 @@ var Label$1 = React__default.forwardRef(function (props, ref) {
         }
       }
     };
-    combinedProps = _objectSpread2(_objectSpread2({}, combinedProps), {}, {
+    combinedProps = {
+      ...combinedProps,
       onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect)
-    });
+    };
     return React__default.createElement(StyledCheckLabel, _extends$t({
       ref: ref
     }, combinedProps), React__default.createElement(StyledCheckSvg, null), React__default.createElement(StyledDashSvg, null), props.children);
@@ -1872,32 +1540,34 @@ Label$1.propTypes = {
   isRegular: PropTypes.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.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();
-  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.forwardRef((_ref, ref) => {
+  let {
+    validation,
+    validationLabel,
+    children,
+    ...props
+  } = _ref;
+  const {
+    hasMessage,
+    setHasMessage,
+    getMessageProps
+  } = useFieldContext() || {};
+  const type = useInputContext();
+  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') {
@@ -1907,14 +1577,15 @@ var Message = React__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 = useText(Message, combinedProps, 'validationLabel', validation);
+  const ariaLabel = useText(Message, combinedProps, 'validationLabel', validation);
   return React__default.createElement(MessageComponent, _extends$t({
     ref: ref
   }, combinedProps), validation && React__default.createElement(StyledMessageIcon, {
@@ -1928,18 +1599,19 @@ Message.propTypes = {
   validationLabel: PropTypes.string
 };
-var _excluded$e = ["indeterminate", "children"];
-var Checkbox = React__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.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);
@@ -1949,9 +1621,11 @@ var Checkbox = React__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);
   }
@@ -1965,29 +1639,32 @@ Checkbox.propTypes = {
   indeterminate: PropTypes.bool
 };
-var InputGroupContext = createContext(undefined);
-var useInputGroupContext = function useInputGroupContext() {
+const InputGroupContext = createContext(undefined);
+const useInputGroupContext = () => {
   return useContext(InputGroupContext);
 };
-var _excluded$d = ["onSelect"];
-var Input = React__default.forwardRef(function (_ref, ref) {
-  var onSelect = _ref.onSelect,
-      props = _objectWithoutProperties(_ref, _excluded$d);
-  var fieldContext = useFieldContext();
-  var inputGroupContext = useInputGroupContext();
-  var onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, function (event) {
+const Input = React__default.forwardRef((_ref, ref) => {
+  let {
+    onSelect,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  const inputGroupContext = useInputGroupContext();
+  const onSelectHandler = props.readOnly ? 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);
@@ -2002,15 +1679,18 @@ Input.propTypes = {
 };
 Input.displayName = 'Input';
-var _excluded$c = ["children"];
-var Radio = React__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.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const fieldsetContext = useFieldsetContext();
+  const fieldContext = useFieldContext();
+  let combinedProps = {
+    ref,
+    ...props,
+    ...fieldsetContext
+  };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
@@ -2023,45 +1703,45 @@ Radio.propTypes = {
   isCompact: PropTypes.bool
 };
-var _excluded$b = ["hasLowerTrack", "min", "max", "step"];
-var Range = React__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 = useState('0'),
-      _useState2 = _slicedToArray(_useState, 2),
-      backgroundSize = _useState2[0],
-      setBackgroundSize = _useState2[1];
-  var rangeRef = useRef();
-  var fieldContext = useFieldContext();
-  var updateBackgroundWidthFromInput = useCallback(function (rangeTarget) {
-    var relativeMax = max;
-    var value = rangeTarget.value;
+const Range = React__default.forwardRef((_ref, ref) => {
+  let {
+    hasLowerTrack,
+    min,
+    max,
+    step,
+    ...props
+  } = _ref;
+  const [backgroundSize, setBackgroundSize] = useState('0');
+  const rangeRef = useRef();
+  const fieldContext = useFieldContext();
+  const updateBackgroundWidthFromInput = 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]);
-  useEffect(function () {
+  useEffect(() => {
     updateBackgroundWidthFromInput(rangeRef.current);
   }, [rangeRef, updateBackgroundWidthFromInput, props.value]);
-  var onChange = hasLowerTrack ? composeEventHandlers(props.onChange, function (event) {
+  const onChange = hasLowerTrack ? composeEventHandlers(props.onChange, event => {
     updateBackgroundWidthFromInput(event.target);
   }) : props.onChange;
-  var combinedProps = _objectSpread2(_objectSpread2({
+  let combinedProps = {
     ref: mergeRefs([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
@@ -2077,45 +1757,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.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 = useRef();
-  var shadowTextAreaRef = useRef(null);
-  var _useState = useState({
+const Textarea = React__default.forwardRef((_ref, ref) => {
+  let {
+    minRows,
+    maxRows,
+    style,
+    onChange,
+    onSelect,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  const textAreaRef = useRef();
+  const shadowTextAreaRef = useRef(null);
+  const [state, setState] = 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 = useCallback(function () {
+  });
+  const isControlled = props.value !== null && props.value !== undefined;
+  const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
+  const calculateHeight = 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);
     }
@@ -2123,19 +1801,19 @@ var Textarea = React__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 = useCallback(function (e) {
+  const onChangeHandler = useCallback(e => {
     if (!isControlled) {
       calculateHeight();
     }
@@ -2143,37 +1821,41 @@ var Textarea = React__default.forwardRef(function (_ref, ref) {
       onChange(e);
     }
   }, [calculateHeight, isControlled, onChange]);
-  useEffect(function () {
+  useEffect(() => {
     if (!isAutoResizable) {
       return undefined;
     }
-    var resizeHandler = debounce(function () {
+    const resizeHandler = debounce(() => {
       calculateHeight();
     });
     window.addEventListener('resize', resizeHandler);
-    return function () {
+    return () => {
       resizeHandler.cancel();
       window.removeEventListener('resize', resizeHandler);
     };
   }, [calculateHeight, isAutoResizable]);
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     calculateHeight();
   });
-  var computedStyle = {};
+  const computedStyle = {};
   if (isAutoResizable) {
     computedStyle.height = state.height;
     computedStyle.overflow = state.overflow ? 'hidden' : undefined;
   }
-  var onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, function (event) {
+  const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
     event.currentTarget.select();
   }) : onSelect;
-  var combinedProps = _objectSpread2({
+  let combinedProps = {
     ref: mergeRefs([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
@@ -2202,15 +1884,18 @@ Textarea.propTypes = {
 };
 Textarea.displayName = 'Textarea';
-var _excluded$9 = ["children"];
-var Toggle = React__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.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const fieldsetContext = useFieldsetContext();
+  const fieldContext = useFieldContext();
+  let combinedProps = {
+    ref,
+    ...props,
+    ...fieldsetContext
+  };
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
   }
@@ -2234,45 +1919,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.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.createElement(StyledTextMediaFigure, _extends$t({
-    position: "start"
-  }, props));
-};
+const StartIconComponent = props => React__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.createElement(StyledTextMediaFigure, _extends$t({
-    position: "end"
-  }, props));
-};
+const EndIconComponent = props => React__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 = 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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var onFocusHandler = composeEventHandlers(onFocus, function () {
+const EndIcon = EndIconComponent;
+const FauxInputComponent = forwardRef((_ref, ref) => {
+  let {
+    onFocus,
+    onBlur,
+    disabled,
+    readOnly,
+    isFocused: controlledIsFocused,
+    ...props
+  } = _ref;
+  const [isFocused, setIsFocused] = useState(false);
+  const onFocusHandler = composeEventHandlers(onFocus, () => {
     setIsFocused(true);
   });
-  var onBlurHandler = composeEventHandlers(onBlur, function () {
+  const onBlurHandler = composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   });
   return React__default.createElement(StyledTextFauxInput, _extends$t({
@@ -2297,21 +1977,23 @@ FauxInputComponent.propTypes = {
   isFocused: PropTypes.bool,
   isHovered: PropTypes.bool
 };
-var FauxInput = FauxInputComponent;
+const FauxInput = FauxInputComponent;
 FauxInput.EndIcon = EndIcon;
 FauxInput.StartIcon = StartIcon;
-var _excluded$7 = ["disabled", "isCompact"];
-var Select = React__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.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
@@ -2331,304 +2013,92 @@ Select.propTypes = {
 };
 Select.displayName = 'Select';
-var _excluded$6 = ["min", "max", "minValue", "maxValue", "disabled", "step", "onChange", "onMouseDown"];
-var MultiThumbRange = 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 = useContext(ThemeContext);
-  var themedDocument = useDocument(theme);
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMinThumbFocused = _useState2[0],
-      setIsMinThumbFocused = _useState2[1];
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      railWidth = _useState4[0],
-      setRailWidth = _useState4[1];
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isMousedDown = _useState6[0],
-      setIsMousedDown = _useState6[1];
-  var trackRailRef = useRef(null);
-  var minThumbRef = useRef(null);
-  var maxThumbRef = useRef(null);
-  var fieldContext = useFieldContext();
-  var _ref2 = fieldContext || {},
-      isLabelHovered = _ref2.isLabelHovered,
-      isLabelActive = _ref2.isLabelActive,
-      multiThumbRangeRef = _ref2.multiThumbRangeRef;
-  var onWindowResize = useCallback(debounce(function () {
-    if (trackRailRef.current) {
-      setRailWidth(trackRailRef.current.getBoundingClientRect().width);
-    }
-  }, 100), []);
-  useEffect(function () {
+const MIN = 0;
+const MAX = 100;
+const MultiThumbRange = forwardRef((_ref, ref) => {
+  let {
+    min = MIN,
+    max = MAX,
+    minValue,
+    maxValue,
+    disabled,
+    step,
+    jump,
+    onChange,
+    onMouseDown,
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
+  const trackRailRef = useRef(null);
+  const minThumbRef = useRef(null);
+  const maxThumbRef = useRef(null);
+  const {
+    getTrackProps,
+    getMinThumbProps,
+    getMaxThumbProps,
+    trackRect,
+    minValue: updatedMinValue,
+    maxValue: updatedMaxValue
+  } = 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 || {};
+  useEffect(() => {
     if (multiThumbRangeRef) {
       multiThumbRangeRef.current = minThumbRef.current;
     }
   }, [multiThumbRangeRef]);
-  useEffect(function () {
-    onWindowResize();
-    window.addEventListener('resize', onWindowResize);
-    return function () {
-      window.removeEventListener('resize', onWindowResize);
-    };
-  }, [onWindowResize]);
-  var calculateMinPosition = 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 = 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 = 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 = 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 = 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 = 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 = useCallback(function (e) {
-    var newValue = calculateUpdatedValue(e);
-    if (isMinThumbFocused) {
-      updateMinThumbSlider(newValue);
-    } else {
-      updateMaxThumbSlider(newValue);
-    }
-  }, [calculateUpdatedValue, isMinThumbFocused, updateMinThumbSlider, updateMaxThumbSlider]);
-  var removeDragEvents = useCallback(function () {
-    if (themedDocument) {
-      themedDocument.removeEventListener('mousemove', onDocumentMouseMove);
-      themedDocument.removeEventListener('mouseup', removeDragEvents);
-    }
-    setIsMousedDown(false);
-  }, [onDocumentMouseMove, themedDocument]);
-  var onTrackMouseDown = 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]);
-  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 KEY_CODES.LEFT:
-          if (theme.rtl) {
-            incrementThumb();
-          } else {
-            decrementThumb();
-          }
-          keyIntercepted = true;
-          break;
-        case KEY_CODES.DOWN:
-          decrementThumb();
-          keyIntercepted = true;
-          break;
-        case KEY_CODES.RIGHT:
-          if (theme.rtl) {
-            decrementThumb();
-          } else {
-            incrementThumb();
-          }
-          keyIntercepted = true;
-          break;
-        case KEY_CODES.UP:
-          incrementThumb();
-          keyIntercepted = true;
-          break;
-        case KEY_CODES.HOME:
-          if (isMinThumb) {
-            updateMinThumbSlider(min);
-          } else {
-            updateMaxThumbSlider(min);
-          }
-          keyIntercepted = true;
-          break;
-        case 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 = 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.createElement(StyledSlider, _extends$t({
     ref: ref,
-    isDisabled: disabled,
     onMouseDown: onSliderMouseDown
   }, props), React__default.createElement(StyledSliderTrack, {
     backgroundSize: sliderBackgroundSize,
-    backgroundPosition: theme.rtl ? railWidth - maxPosition : minPosition,
+    backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition,
     isDisabled: disabled
-  }, React__default.createElement(StyledSliderTrackRail, {
+  }, React__default.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, {
     ref: trackRailRef
-  }, React__default.createElement(StyledSliderThumb, {
-    role: "slider",
-    tabIndex: disabled ? undefined : 0,
-    "aria-valuemin": min,
-    "aria-valuemax": maxValue,
-    "aria-valuenow": minValue,
-    "aria-valuetext": minValue,
+  }), React__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.createElement(StyledSliderThumb, {
-    role: "slider",
-    tabIndex: disabled ? undefined : 0,
-    "aria-valuemin": minValue,
-    "aria-valuemax": max,
-    "aria-valuenow": maxValue,
-    "aria-valuetext": maxValue,
+  })), React__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 = {
@@ -2637,35 +2107,32 @@ MultiThumbRange.propTypes = {
   minValue: PropTypes.number,
   maxValue: PropTypes.number,
   step: PropTypes.number,
+  jump: PropTypes.number,
   disabled: PropTypes.bool,
   onChange: PropTypes.func
 };
 MultiThumbRange.defaultProps = {
-  min: 0,
-  max: 100,
-  minValue: 0,
-  maxValue: 100,
+  min: MIN,
+  max: MAX,
   step: 1
 };
-var TilesContext = createContext(undefined);
-var useTilesContext = function useTilesContext() {
+const TilesContext = createContext(undefined);
+const useTilesContext = () => {
   return useContext(TilesContext);
 };
-var _excluded$5 = ["children", "value", "disabled"];
-var TileComponent = React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$5);
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var tilesContext = useTilesContext();
-  var inputRef = useRef(null);
-  var inputProps;
+const TileComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    value,
+    disabled,
+    ...props
+  } = _ref;
+  const [isFocused, setIsFocused] = useState(false);
+  const tilesContext = useTilesContext();
+  const inputRef = useRef(null);
+  let inputProps;
   if (tilesContext) {
     inputProps = {
       name: tilesContext.name,
@@ -2682,12 +2149,10 @@ var TileComponent = React__default.forwardRef(function (_ref, ref) {
   }, props), children, React__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);
         }
@@ -2702,36 +2167,33 @@ TileComponent.propTypes = {
   value: PropTypes.string,
   disabled: PropTypes.bool
 };
-var Tile = TileComponent;
+const Tile = TileComponent;
-var DescriptionComponent = forwardRef(function (props, ref) {
-  var tilesContext = useTilesContext();
+const DescriptionComponent = forwardRef((props, ref) => {
+  const tilesContext = useTilesContext();
   return React__default.createElement(StyledTileDescription, _extends$t({
     ref: ref,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
 });
 DescriptionComponent.displayName = 'Tiles.Description';
-var Description = DescriptionComponent;
+const Description = DescriptionComponent;
-var IconComponent = forwardRef(function (props, ref) {
-  var tileContext = useTilesContext();
+const IconComponent = forwardRef((props, ref) => {
+  const tileContext = useTilesContext();
   return React__default.createElement(StyledTileIcon, _extends$t({
     ref: ref,
     isCentered: tileContext && tileContext.isCentered
   }, props));
 });
 IconComponent.displayName = 'Tiles.Icon';
-var Icon = IconComponent;
-var LabelComponent = forwardRef(function (props, forwardedRef) {
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      title = _useState2[0],
-      setTitle = _useState2[1];
-  var ref = useRef();
-  var tilesContext = useTilesContext();
-  useEffect(function () {
+const Icon = IconComponent;
+const LabelComponent = forwardRef((props, forwardedRef) => {
+  const [title, setTitle] = useState('');
+  const ref = useRef();
+  const tilesContext = useTilesContext();
+  useEffect(() => {
     if (ref.current) {
       setTitle(ref.current.textContent || undefined);
     }
@@ -2743,37 +2205,33 @@ var LabelComponent = forwardRef(function (props, forwardedRef) {
   }, props));
 });
 LabelComponent.displayName = 'Tiles.Label';
-var Label = LabelComponent;
-var _excluded$4 = ["onChange", "value", "name", "isCentered"];
-var TilesComponent = forwardRef(function (_ref, ref) {
-  var onChange = _ref.onChange,
-      controlledValue = _ref.value,
-      name = _ref.name,
-      isCentered = _ref.isCentered,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-  var _useState = useState(controlledValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-  var handleOnChange = useCallback(function () {
+const Label = LabelComponent;
+const TilesComponent = forwardRef((_ref, ref) => {
+  let {
+    onChange,
+    value: controlledValue,
+    name,
+    isCentered,
+    ...props
+  } = _ref;
+  const [value, setValue] = useState(controlledValue);
+  const handleOnChange = 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 = getControlledValue(controlledValue, value);
-  var tileContext = useMemo(function () {
-    return {
-      onChange: handleOnChange,
-      value: selectedValue,
-      name: name,
-      isCentered: isCentered
-    };
-  }, [handleOnChange, selectedValue, name, isCentered]);
+  const selectedValue = getControlledValue(controlledValue, value);
+  const tileContext = useMemo(() => ({
+    onChange: handleOnChange,
+    value: selectedValue,
+    name,
+    isCentered
+  }), [handleOnChange, selectedValue, name, isCentered]);
   return React__default.createElement(TilesContext.Provider, {
     value: tileContext
   }, React__default.createElement("div", _extends$t({
@@ -2791,21 +2249,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.forwardRef(function (_ref, ref) {
-  var isCompact = _ref.isCompact,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-  var contextValue = useMemo(function () {
-    return {
-      isCompact: isCompact
-    };
-  }, [isCompact]);
+const InputGroup = React__default.forwardRef((_ref, ref) => {
+  let {
+    isCompact,
+    ...props
+  } = _ref;
+  const contextValue = useMemo(() => ({
+    isCompact
+  }), [isCompact]);
   return React__default.createElement(InputGroupContext.Provider, {
     value: contextValue
   }, React__default.createElement(StyledInputGroup, _extends$t({
@@ -2818,10 +2275,11 @@ InputGroup.propTypes = {
   isCompact: PropTypes.bool
 };
-var _excluded$2 = ["disabled"];
-var FileUpload = React__default.forwardRef(function (_ref, ref) {
-  var disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+const FileUpload = React__default.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    ...props
+  } = _ref;
   return React__default.createElement(StyledFileUpload, _extends$t({
     ref: ref,
     "aria-disabled": disabled
@@ -2834,23 +2292,27 @@ FileUpload.propTypes = {
 };
 FileUpload.displayName = 'FileUpload';
-var ItemComponent = forwardRef(function (_ref, ref) {
-  var props = _extends$t({}, _ref);
+const ItemComponent = forwardRef((_ref, ref) => {
+  let {
+    ...props
+  } = _ref;
   return React__default.createElement(StyledFileListItem, _extends$t({}, props, {
     ref: ref
   }));
 });
 ItemComponent.displayName = 'FileList.Item';
-var Item = ItemComponent;
+const Item = ItemComponent;
-var FileListComponent = forwardRef(function (_ref, ref) {
-  var props = _extends$t({}, _ref);
+const FileListComponent = forwardRef((_ref, ref) => {
+  let {
+    ...props
+  } = _ref;
   return React__default.createElement(StyledFileList, _extends$t({}, props, {
     ref: ref
   }));
 });
 FileListComponent.displayName = 'FileList';
-var FileList = FileListComponent;
+const FileList = FileListComponent;
 FileList.Item = Item;
 var _path$j;
@@ -2864,7 +2326,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.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2883,7 +2346,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.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2891,16 +2355,14 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
-var FileContext = createContext(undefined);
-var useFileContext = function useFileContext() {
+const FileContext = createContext(undefined);
+const useFileContext = () => {
   return useContext(FileContext);
 };
-var CloseComponent = React__default.forwardRef(function (props, ref) {
-  var fileContext = useFileContext();
-  var onMouseDown = composeEventHandlers(props.onMouseDown, function (event) {
-    return event.preventDefault();
-  }
+const CloseComponent = React__default.forwardRef((props, ref) => {
+  const fileContext = useFileContext();
+  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.preventDefault()
   );
   return React__default.createElement(StyledFileClose, _extends$t({
     ref: ref
@@ -2909,7 +2371,7 @@ var CloseComponent = React__default.forwardRef(function (props, ref) {
   }), fileContext && fileContext.isCompact ? React__default.createElement(SvgXStroke$1, null) : React__default.createElement(SvgXStroke, null));
 });
 CloseComponent.displayName = 'File.Close';
-var Close = CloseComponent;
+const Close = CloseComponent;
 var _path$h;
@@ -2922,7 +2384,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2942,7 +2405,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2951,11 +2415,9 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
   })));
 };
-var DeleteComponent = React__default.forwardRef(function (props, ref) {
-  var fileContext = useFileContext();
-  var onMouseDown = composeEventHandlers(props.onMouseDown, function (event) {
-    return event.preventDefault();
-  }
+const DeleteComponent = React__default.forwardRef((props, ref) => {
+  const fileContext = useFileContext();
+  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.preventDefault()
   );
   return React__default.createElement(StyledFileDelete, _extends$t({
     ref: ref
@@ -2964,7 +2426,7 @@ var DeleteComponent = React__default.forwardRef(function (props, ref) {
   }), fileContext && fileContext.isCompact ? React__default.createElement(SvgTrashStroke$1, null) : React__default.createElement(SvgTrashStroke, null));
 });
 DeleteComponent.displayName = 'File.Delete';
-var Delete = DeleteComponent;
+const Delete = DeleteComponent;
 var _path$f, _rect$1;
@@ -2977,7 +2439,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3005,7 +2468,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3025,7 +2489,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3051,7 +2516,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3071,7 +2537,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3091,7 +2558,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3110,7 +2578,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3129,7 +2598,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.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -3155,7 +2625,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3175,7 +2646,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3203,7 +2675,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3223,7 +2696,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3248,7 +2722,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3268,7 +2743,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3288,7 +2764,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3307,7 +2784,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3326,7 +2804,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.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3335,7 +2814,7 @@ var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
   })));
 };
-var fileIconsDefault = {
+const fileIconsDefault = {
   pdf: React__default.createElement(SvgFilePdfStroke, null),
   zip: React__default.createElement(SvgFileZipStroke, null),
   image: React__default.createElement(SvgFileImageStroke, null),
@@ -3346,7 +2825,7 @@ var fileIconsDefault = {
   success: React__default.createElement(SvgCheckCircleStroke$1, null),
   error: React__default.createElement(SvgFileErrorStroke, null)
 };
-var fileIconsCompact = {
+const fileIconsCompact = {
   pdf: React__default.createElement(SvgFilePdfStroke$1, null),
   zip: React__default.createElement(SvgFileZipStroke$1, null),
   image: React__default.createElement(SvgFileImageStroke$1, null),
@@ -3358,20 +2837,19 @@ var fileIconsCompact = {
   error: React__default.createElement(SvgFileErrorStroke$1, null)
 };
-var _excluded$1 = ["children", "type", "isCompact", "focusInset", "validation"];
-var FileComponent = 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 = useMemo(function () {
-    return {
-      isCompact: isCompact
-    };
-  }, [isCompact]);
-  var validationType = validation || type;
+const FileComponent = forwardRef((_ref, ref) => {
+  let {
+    children,
+    type,
+    isCompact,
+    focusInset,
+    validation,
+    ...props
+  } = _ref;
+  const fileContextValue = useMemo(() => ({
+    isCompact
+  }), [isCompact]);
+  const validationType = validation || type;
   return React__default.createElement(FileContext.Provider, {
     value: fileContextValue
   }, React__default.createElement(StyledFile, _extends$t({}, props, {
@@ -3381,9 +2859,7 @@ var FileComponent = forwardRef(function (_ref, ref) {
     ref: ref
   }), validationType && React__default.createElement(StyledFileIcon, {
     isCompact: isCompact
-  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, function (child) {
-    return typeof child === 'string' ? React__default.createElement("span", null, child) : child;
-  })));
+  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, child => typeof child === 'string' ? React__default.createElement("span", null, child) : child)));
 });
 FileComponent.displayName = 'File';
 FileComponent.propTypes = {
@@ -3392,67 +2868,63 @@ FileComponent.propTypes = {
   type: PropTypes.oneOf(FILE_TYPE),
   validation: PropTypes.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.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 = useRef();
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var _useState3 = 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 = composeEventHandlers(onClick, function () {
+const MediaInput = React__default.forwardRef((_ref, ref) => {
+  let {
+    start,
+    end,
+    disabled,
+    isCompact,
+    isBare,
+    focusInset,
+    readOnly,
+    validation,
+    wrapperProps = {},
+    wrapperRef,
+    onSelect,
+    ...props
+  } = _ref;
+  const fieldContext = useFieldContext();
+  const inputRef = useRef();
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const {
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    ...otherWrapperProps
+  } = wrapperProps;
+  const onFauxInputClickHandler = composeEventHandlers(onClick, () => {
     inputRef.current && inputRef.current.focus();
   });
-  var onFauxInputFocusHandler = composeEventHandlers(onFocus, function () {
+  const onFauxInputFocusHandler = composeEventHandlers(onFocus, () => {
     setIsFocused(true);
   });
-  var onFauxInputBlurHandler = composeEventHandlers(onBlur, function () {
+  const onFauxInputBlurHandler = composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   });
-  var onFauxInputMouseOverHandler = composeEventHandlers(onMouseOver, function () {
+  const onFauxInputMouseOverHandler = composeEventHandlers(onMouseOver, () => {
     setIsHovered(true);
   });
-  var onFauxInputMouseOutHandler = composeEventHandlers(onMouseOut, function () {
+  const onFauxInputMouseOutHandler = composeEventHandlers(onMouseOut, () => {
     setIsHovered(false);
   });
-  var onSelectHandler = readOnly ? composeEventHandlers(onSelect, function (event) {
+  const onSelectHandler = readOnly ? composeEventHandlers(onSelect, event => {
     event.currentTarget.select();
   }) : onSelect;
-  var combinedProps = _objectSpread2({
-    disabled: disabled,
-    readOnly: readOnly,
+  let combinedProps = {
+    disabled,
+    readOnly,
     ref: mergeRefs([inputRef, ref]),
-    onSelect: onSelectHandler
-  }, props);
-  var isLabelHovered;
+    onSelect: onSelectHandler,
+    ...props
+  };
+  let isLabelHovered;
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps, {
       isDescribed: true