@zendeskgarden/react-forms 8.47.2 → 8.48.0

package/dist/index.cjs.js

@@ -10,11 +10,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var PropTypes = require('prop-types');
 var containerField = require('@zendeskgarden/container-field');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
+var PropTypes = require('prop-types');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var mergeRefs = require('react-merge-refs');
 var debounce = require('lodash.debounce');
@@ -41,8 +41,8 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
@@ -225,7 +225,7 @@ var useFieldContext = function useFieldContext() {
 var COMPONENT_ID$K = 'forms.field';
 var StyledField = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -242,7 +242,7 @@ var COMPONENT_ID$J = 'forms.fieldset';
 var StyledFieldset = styled__default["default"](StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -258,7 +258,7 @@ StyledFieldset.defaultProps = {
 var COMPONENT_ID$I = 'forms.input_label';
 var StyledLabel = styled__default["default"].label.attrs({
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -293,7 +293,7 @@ var COMPONENT_ID$H = 'forms.fieldset_legend';
 var StyledLegend = styled__default["default"](StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -307,7 +307,7 @@ StyledLegend.defaultProps = {
 var COMPONENT_ID$G = 'forms.input_hint';
 var StyledHint = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -427,7 +427,7 @@ var MessageIcon = function MessageIcon(_ref) {
 var COMPONENT_ID$F = 'forms.input_message_icon';
 var StyledMessageIcon = styled__default["default"](MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -460,7 +460,7 @@ var validationStyles = function validationStyles(props) {
 var COMPONENT_ID$E = 'forms.input_message';
 var StyledMessage = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -552,7 +552,7 @@ var sizeStyles$f = function sizeStyles(props) {
 var StyledTextInput = styled__default["default"].input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$D,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     'aria-invalid': isInvalid(props.validation)
   };
 }).withConfig({
@@ -588,7 +588,7 @@ var hiddenStyles = "\n  visibility: hidden;\n  position: absolute;\n  overflow:
 var StyledTextarea = styled__default["default"](StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -639,7 +639,7 @@ function (_ref) {
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -663,7 +663,7 @@ var StyledTextFauxInput = styled__default["default"](StyledTextInput).attrs(func
     'aria-readonly': props.isReadOnly,
     'aria-disabled': props.isDisabled,
     'data-garden-id': COMPONENT_ID$A,
-    'data-garden-version': '8.47.2'
+    'data-garden-version': '8.48.0'
   };
 }).withConfig({
   displayName: "StyledTextFauxInput",
@@ -688,7 +688,7 @@ StyledTextFauxInput.defaultProps = {
 var COMPONENT_ID$z = 'forms.media_input';
 var StyledTextMediaInput = styled__default["default"](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -713,7 +713,7 @@ var itemStyles = function itemStyles(props) {
 };
 var StyledInputGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -737,7 +737,7 @@ var sizeStyles$d = function sizeStyles(props) {
 };
 var StyledRadioLabel = styled__default["default"](StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -754,7 +754,7 @@ StyledRadioLabel.defaultProps = {
 var COMPONENT_ID$w = 'forms.checkbox_label';
 var StyledCheckLabel = styled__default["default"](StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -768,7 +768,7 @@ StyledCheckLabel.defaultProps = {
 var COMPONENT_ID$v = 'forms.radio_hint';
 var StyledRadioHint = styled__default["default"](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -786,7 +786,7 @@ StyledRadioHint.defaultProps = {
 var COMPONENT_ID$u = 'forms.checkbox_hint';
 var StyledCheckHint = styled__default["default"](StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -826,16 +826,16 @@ var sizeStyles$c = function sizeStyles(props) {
   var iconPosition = polished.math("(".concat(size, " - ").concat(iconSize, ") / 2"));
   var iconTop = polished.math("".concat(iconPosition, " + ").concat(top));
   var marginTop = "".concat(props.theme.space.base * (props.isCompact ? 1 : 2), "px");
-  return styled.css(["& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
+  return styled.css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
 };
 var StyledRadioInput = styled__default["default"].input.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
   componentId: "sc-qsavpv-0"
-})(["position:absolute;clip:rect(1px,1px,1px,1px);& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, function (props) {
+})(["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;
@@ -862,7 +862,7 @@ var colorStyles$8 = function colorStyles(props) {
 };
 var StyledCheckInput = styled__default["default"](StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -881,7 +881,7 @@ StyledCheckInput.defaultProps = {
 var COMPONENT_ID$r = 'forms.radio_message';
 var StyledRadioMessage = styled__default["default"](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -899,7 +899,7 @@ StyledRadioMessage.defaultProps = {
 var COMPONENT_ID$q = 'forms.checkbox_message';
 var StyledCheckMessage = styled__default["default"](StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -935,7 +935,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 var COMPONENT_ID$p = 'forms.check_svg';
 var StyledCheckSvg = styled__default["default"](SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -969,7 +969,7 @@ var SvgDashFill = function SvgDashFill(props) {
 var COMPONENT_ID$o = 'forms.dash_svg';
 var StyledDashSvg = styled__default["default"](SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -1000,7 +1000,7 @@ var sizeStyles$b = function sizeStyles(props) {
 };
 var StyledFileUpload = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -1020,7 +1020,7 @@ StyledFileUpload.defaultProps = {
 var COMPONENT_ID$m = 'forms.file.close';
 var StyledFileClose = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -1063,7 +1063,7 @@ var sizeStyles$a = function sizeStyles(props) {
 };
 var StyledFile = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -1079,7 +1079,7 @@ StyledFile.defaultProps = {
 var COMPONENT_ID$k = 'forms.file.delete';
 var StyledFileDelete = styled__default["default"](StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -1102,7 +1102,7 @@ var StyledFileIcon = styled__default["default"](function (_ref) {
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -1122,7 +1122,7 @@ StyledFileIcon.defaultProps = {
 var COMPONENT_ID$i = 'forms.file_list';
 var StyledFileList = styled__default["default"].ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -1136,7 +1136,7 @@ StyledFileList.defaultProps = {
 var COMPONENT_ID$h = 'forms.file_list.item';
 var StyledFileListItem = styled__default["default"].li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -1172,7 +1172,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 var COMPONENT_ID$g = 'forms.radio_svg';
 var StyledRadioSvg = styled__default["default"](SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1191,7 +1191,7 @@ var sizeStyles$9 = function sizeStyles(props) {
 };
 var StyledToggleLabel = styled__default["default"](StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1207,7 +1207,7 @@ StyledToggleLabel.defaultProps = {
 var COMPONENT_ID$e = 'forms.toggle_hint';
 var StyledToggleHint = styled__default["default"](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1236,11 +1236,11 @@ var sizeStyles$8 = function sizeStyles(props) {
   var iconSize = props.theme.iconSizes.md;
   var iconPosition = polished.math("(".concat(height, " - ").concat(iconSize, ") / 2"));
   var checkedIconPosition = polished.math("".concat(width, " - ").concat(iconSize, " - ").concat(iconPosition));
-  return styled.css(["& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
+  return styled.css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
 };
 var StyledToggleInput = styled__default["default"](StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1258,7 +1258,7 @@ StyledToggleInput.defaultProps = {
 var COMPONENT_ID$c = 'forms.toggle_message';
 var StyledToggleMessage = styled__default["default"](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1300,7 +1300,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 var COMPONENT_ID$b = 'forms.toggle_svg';
 var StyledToggleSvg = styled__default["default"](SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1324,7 +1324,7 @@ var sizeStyles$7 = function sizeStyles(props) {
 };
 var StyledSelect = styled__default["default"](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1343,7 +1343,7 @@ StyledSelect.defaultProps = {
 var COMPONENT_ID$9 = 'forms.select_wrapper';
 var StyledSelectWrapper = styled__default["default"](StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.47.2',
+  'data-garden-version': '8.48.0',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1396,7 +1396,7 @@ var sizeStyles$6 = function sizeStyles(props) {
 var StyledRangeInput = styled__default["default"].input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$8,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     type: 'range',
     style: {
       backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1428,7 +1428,7 @@ var COMPONENT_ID$7 = 'forms.slider';
 var StyledSlider = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$7,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1468,7 +1468,7 @@ var sizeStyles$5 = function sizeStyles(props) {
 var StyledSliderThumb = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1512,7 +1512,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 var StyledSliderTrack = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1539,7 +1539,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledSliderTrackRail = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1570,7 +1570,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledTileIcon = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1610,7 +1610,7 @@ var colorStyles = function colorStyles(props) {
 var StyledTile = styled__default["default"].label.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.47.2',
+    'data-garden-version': '8.48.0',
     'data-garden-focus-visible': props.isFocused,
     'data-garden-selected': props.isSelected
   };
@@ -1648,7 +1648,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledTileDescription = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1691,7 +1691,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTileLabel = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.47.2'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1744,9 +1744,6 @@ var Field = React__default["default"].forwardRef(function (props, ref) {
     ref: ref
   })));
 });
-Field.propTypes = {
-  id: PropTypes__default["default"].string
-};
 Field.displayName = 'Field';
 
 var FieldsetContext = React.createContext(undefined);
@@ -1755,15 +1752,16 @@ var useFieldsetContext = function useFieldsetContext() {
   return fieldsetContext;
 };
 
-var Legend = React.forwardRef(function (props, ref) {
+var LegendComponent = React.forwardRef(function (props, ref) {
   var fieldsetContext = useFieldsetContext();
   return React__default["default"].createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
     ref: ref
   }));
 });
-Legend.displayName = 'Legend';
+LegendComponent.displayName = 'Fieldset.Legend';
+var Legend = LegendComponent;
 
-var Fieldset = React.forwardRef(function (props, ref) {
+var FieldsetComponent = React.forwardRef(function (props, ref) {
   var fieldsetContext = React.useMemo(function () {
     return {
       isCompact: props.isCompact
@@ -1775,8 +1773,9 @@ var Fieldset = React.forwardRef(function (props, ref) {
     ref: ref
   })));
 });
+FieldsetComponent.displayName = 'Fieldset';
+var Fieldset = FieldsetComponent;
 Fieldset.Legend = Legend;
-Fieldset.displayName = 'Fieldset';
 
 var InputContext = React.createContext(undefined);
 var useInputContext = function useInputContext() {
@@ -2220,18 +2219,24 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-var _excluded$8 = ["onFocus", "onBlur", "disabled", "readOnly", "isFocused"];
-var StartIcon = function StartIcon(props) {
+var StartIconComponent = function StartIconComponent(props) {
   return React__default["default"].createElement(StyledTextMediaFigure, _extends$t({
     position: "start"
   }, props));
 };
-var EndIcon = function EndIcon(props) {
+StartIconComponent.displayName = 'FauxInput.StartIcon';
+var StartIcon = StartIconComponent;
+
+var EndIconComponent = function EndIconComponent(props) {
   return React__default["default"].createElement(StyledTextMediaFigure, _extends$t({
     position: "end"
   }, props));
 };
-var FauxInput = React.forwardRef(function (_ref, ref) {
+EndIconComponent.displayName = 'FauxInput.EndIcon';
+var EndIcon = EndIconComponent;
+
+var _excluded$8 = ["onFocus", "onBlur", "disabled", "readOnly", "isFocused"];
+var FauxInputComponent = React.forwardRef(function (_ref, ref) {
   var onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       disabled = _ref.disabled,
@@ -2259,10 +2264,8 @@ var FauxInput = React.forwardRef(function (_ref, ref) {
     ref: ref
   }));
 });
-FauxInput.StartIcon = StartIcon;
-FauxInput.EndIcon = EndIcon;
-FauxInput.displayName = 'FauxInput';
-FauxInput.propTypes = {
+FauxInputComponent.displayName = 'FauxInput';
+FauxInputComponent.propTypes = {
   isCompact: PropTypes__default["default"].bool,
   isBare: PropTypes__default["default"].bool,
   focusInset: PropTypes__default["default"].bool,
@@ -2270,6 +2273,9 @@ FauxInput.propTypes = {
   readOnly: PropTypes__default["default"].bool,
   validation: PropTypes__default["default"].oneOf(['success', 'warning', 'error'])
 };
+var FauxInput = FauxInputComponent;
+FauxInput.EndIcon = EndIcon;
+FauxInput.StartIcon = StartIcon;
 
 var _excluded$7 = ["disabled", "isCompact"];
 var Select = React__default["default"].forwardRef(function (_ref, ref) {
@@ -2302,7 +2308,7 @@ Select.propTypes = {
 Select.displayName = 'Select';
 
 var _excluded$6 = ["min", "max", "minValue", "maxValue", "disabled", "step", "onChange", "onMouseDown"];
-var MultiThumbRange = function MultiThumbRange(_ref) {
+var MultiThumbRange = React.forwardRef(function (_ref, ref) {
   var min = _ref.min,
       max = _ref.max,
       minValue = _ref.minValue,
@@ -2543,6 +2549,7 @@ var MultiThumbRange = function MultiThumbRange(_ref) {
   var sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
   var onSliderMouseDown = containerUtilities.composeEventHandlers(onMouseDown, onTrackMouseDown);
   return React__default["default"].createElement(StyledSlider, _extends$t({
+    ref: ref,
     isDisabled: disabled,
     onMouseDown: onSliderMouseDown
   }, props), React__default["default"].createElement(StyledSliderTrack, {
@@ -2598,7 +2605,8 @@ var MultiThumbRange = function MultiThumbRange(_ref) {
       maxThumbRef.current && maxThumbRef.current.focus();
     }
   }))));
-};
+});
+MultiThumbRange.displayName = 'MultiThumbRange';
 MultiThumbRange.propTypes = {
   min: PropTypes__default["default"].number,
   max: PropTypes__default["default"].number,
@@ -2622,7 +2630,7 @@ var useTilesContext = function useTilesContext() {
 };
 
 var _excluded$5 = ["children", "value", "disabled"];
-var Tile = React__default["default"].forwardRef(function (_ref, ref) {
+var TileComponent = React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
       value = _ref.value,
       disabled = _ref.disabled,
@@ -2665,31 +2673,34 @@ var Tile = React__default["default"].forwardRef(function (_ref, ref) {
     ref: inputRef
   })));
 });
-Tile.displayName = 'Tile';
-Tile.propTypes = {
+TileComponent.displayName = 'Tiles.Tile';
+TileComponent.propTypes = {
   value: PropTypes__default["default"].string,
   disabled: PropTypes__default["default"].bool
 };
+var Tile = TileComponent;
 
-var Description = React__default["default"].forwardRef(function (props, ref) {
+var DescriptionComponent = React.forwardRef(function (props, ref) {
   var tilesContext = useTilesContext();
   return React__default["default"].createElement(StyledTileDescription, _extends$t({
     ref: ref,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
 });
-Description.displayName = 'TileDescription';
+DescriptionComponent.displayName = 'Tiles.Description';
+var Description = DescriptionComponent;
 
-var Icon = React__default["default"].forwardRef(function (props, ref) {
+var IconComponent = React.forwardRef(function (props, ref) {
   var tileContext = useTilesContext();
   return React__default["default"].createElement(StyledTileIcon, _extends$t({
     ref: ref,
     isCentered: tileContext && tileContext.isCentered
   }, props));
 });
-Icon.displayName = 'TileIcon';
+IconComponent.displayName = 'Tiles.Icon';
+var Icon = IconComponent;
 
-var Label = React__default["default"].forwardRef(function (props, forwardedRef) {
+var LabelComponent = React.forwardRef(function (props, forwardedRef) {
   var _useState = React.useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       title = _useState2[0],
@@ -2707,10 +2718,11 @@ var Label = React__default["default"].forwardRef(function (props, forwardedRef)
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
 });
-Label.displayName = 'TileLabel';
+LabelComponent.displayName = 'Tiles.Label';
+var Label = LabelComponent;
 
 var _excluded$4 = ["onChange", "value", "name", "isCentered"];
-var Tiles = React__default["default"].forwardRef(function (_ref, ref) {
+var TilesComponent = React.forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
       controlledValue = _ref.value,
       name = _ref.name,
@@ -2745,20 +2757,21 @@ var Tiles = React__default["default"].forwardRef(function (_ref, ref) {
     role: "radiogroup"
   }, props)));
 });
-Tiles.displayName = 'Tiles';
-Tiles.Tile = Tile;
-Tiles.Icon = Icon;
-Tiles.Label = Label;
-Tiles.Description = Description;
-Tiles.propTypes = {
+TilesComponent.displayName = 'Tiles';
+TilesComponent.propTypes = {
   value: PropTypes__default["default"].string,
   onChange: PropTypes__default["default"].func,
   name: PropTypes__default["default"].string.isRequired,
   isCentered: PropTypes__default["default"].bool
 };
-Tiles.defaultProps = {
+TilesComponent.defaultProps = {
   isCentered: true
 };
+var Tiles = TilesComponent;
+Tiles.Description = Description;
+Tiles.Icon = Icon;
+Tiles.Label = Label;
+Tiles.Tile = Tile;
 
 var _excluded$3 = ["isCompact"];
 var InputGroup = React__default["default"].forwardRef(function (_ref, ref) {
@@ -2797,21 +2810,23 @@ FileUpload.propTypes = {
 };
 FileUpload.displayName = 'FileUpload';
 
-var Item = React.forwardRef(function (_ref, ref) {
+var ItemComponent = React.forwardRef(function (_ref, ref) {
   var props = _extends$t({}, _ref);
   return React__default["default"].createElement(StyledFileListItem, _extends$t({}, props, {
     ref: ref
   }));
 });
-Item.displayName = 'FileList.Item';
+ItemComponent.displayName = 'FileList.Item';
+var Item = ItemComponent;
 
-var FileList = React.forwardRef(function (_ref, ref) {
+var FileListComponent = React.forwardRef(function (_ref, ref) {
   var props = _extends$t({}, _ref);
   return React__default["default"].createElement(StyledFileList, _extends$t({}, props, {
     ref: ref
   }));
 });
-FileList.displayName = 'FileList';
+FileListComponent.displayName = 'FileList';
+var FileList = FileListComponent;
 FileList.Item = Item;
 
 var _path$j;
@@ -2857,7 +2872,7 @@ var useFileContext = function useFileContext() {
   return React.useContext(FileContext);
 };
 
-var Close = React__default["default"].forwardRef(function (props, ref) {
+var CloseComponent = React__default["default"].forwardRef(function (props, ref) {
   var fileContext = useFileContext();
   var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
     return event.preventDefault();
@@ -2869,7 +2884,8 @@ var Close = React__default["default"].forwardRef(function (props, ref) {
     onMouseDown: onMouseDown
   }), fileContext && fileContext.isCompact ? React__default["default"].createElement(SvgXStroke$1, null) : React__default["default"].createElement(SvgXStroke, null));
 });
-Close.displayName = 'File.Close';
+CloseComponent.displayName = 'File.Close';
+var Close = CloseComponent;
 
 var _path$h;
 
@@ -2911,7 +2927,7 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
   })));
 };
 
-var Delete = React__default["default"].forwardRef(function (props, ref) {
+var DeleteComponent = React__default["default"].forwardRef(function (props, ref) {
   var fileContext = useFileContext();
   var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
     return event.preventDefault();
@@ -2923,7 +2939,8 @@ var Delete = React__default["default"].forwardRef(function (props, ref) {
     onMouseDown: onMouseDown
   }), fileContext && fileContext.isCompact ? React__default["default"].createElement(SvgTrashStroke$1, null) : React__default["default"].createElement(SvgTrashStroke, null));
 });
-Delete.displayName = 'File.Delete';
+DeleteComponent.displayName = 'File.Delete';
+var Delete = DeleteComponent;
 
 var _path$f, _rect$1;
 
@@ -3334,7 +3351,7 @@ var fileIconsCompact = {
 };
 
 var _excluded$1 = ["children", "type", "isCompact", "focusInset", "validation"];
-var File = React.forwardRef(function (_ref, ref) {
+var FileComponent = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       type = _ref.type,
       isCompact = _ref.isCompact,
@@ -3360,15 +3377,16 @@ var File = React.forwardRef(function (_ref, ref) {
     return typeof child === 'string' ? React__default["default"].createElement("span", null, child) : child;
   })));
 });
-File.displayName = 'File';
-File.Close = Close;
-File.Delete = Delete;
-File.propTypes = {
+FileComponent.displayName = 'File';
+FileComponent.propTypes = {
   focusInset: PropTypes__default["default"].bool,
   isCompact: PropTypes__default["default"].bool,
   type: PropTypes__default["default"].oneOf(ARRAY_FILE_TYPE),
   validation: PropTypes__default["default"].oneOf(['success', 'error'])
 };
+var 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"];