@zendeskgarden/react-forms 8.39.1 → 8.42.0

package/dist/index.cjs.js

@@ -16,6 +16,7 @@ var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
 var containerUtilities = require('@zendeskgarden/container-utilities');
+var mergeRefs = require('react-merge-refs');
 var debounce = require('lodash.debounce');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -44,6 +45,7 @@ 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 mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
 function ownKeys(object, enumerableOnly) {
@@ -237,7 +239,7 @@ var useFieldContext = function useFieldContext() {
 var COMPONENT_ID$J = 'forms.field';
 var StyledField = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -254,7 +256,7 @@ var COMPONENT_ID$I = 'forms.fieldset';
 var StyledFieldset = styled__default['default'](StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -270,7 +272,7 @@ StyledFieldset.defaultProps = {
 var COMPONENT_ID$H = 'forms.input_label';
 var StyledLabel = styled__default['default'].label.attrs({
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -305,7 +307,7 @@ var COMPONENT_ID$G = 'forms.fieldset_legend';
 var StyledLegend = styled__default['default'](StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -319,7 +321,7 @@ StyledLegend.defaultProps = {
 var COMPONENT_ID$F = 'forms.input_hint';
 var StyledHint = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -443,7 +445,7 @@ var MessageIcon = function MessageIcon(_ref) {
 var COMPONENT_ID$E = 'forms.input_message_icon';
 var StyledMessageIcon = styled__default['default'](MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -476,7 +478,7 @@ var validationStyles = function validationStyles(props) {
 var COMPONENT_ID$D = 'forms.input_message';
 var StyledMessage = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -568,7 +570,7 @@ var sizeStyles$e = function sizeStyles(props) {
 var StyledTextInput = styled__default['default'].input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$C,
-    'data-garden-version': '8.39.1',
+    'data-garden-version': '8.42.0',
     'aria-invalid': isInvalid(props.validation)
   };
 }).withConfig({
@@ -604,7 +606,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$B,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -655,7 +657,7 @@ function (_ref) {
   return React__default['default'].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -679,7 +681,7 @@ var StyledTextFauxInput = styled__default['default'](StyledTextInput).attrs(func
     'aria-readonly': props.isReadOnly,
     'aria-disabled': props.isDisabled,
     'data-garden-id': COMPONENT_ID$z,
-    'data-garden-version': '8.39.1'
+    'data-garden-version': '8.42.0'
   };
 }).withConfig({
   displayName: "StyledTextFauxInput",
@@ -704,7 +706,7 @@ StyledTextFauxInput.defaultProps = {
 var COMPONENT_ID$y = 'forms.media_input';
 var StyledTextMediaInput = styled__default['default'](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -729,7 +731,7 @@ var itemStyles = function itemStyles(props) {
 };
 var StyledInputGroup = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -753,7 +755,7 @@ var sizeStyles$c = function sizeStyles(props) {
 };
 var StyledRadioLabel = styled__default['default'](StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -770,7 +772,7 @@ StyledRadioLabel.defaultProps = {
 var COMPONENT_ID$v = 'forms.checkbox_label';
 var StyledCheckLabel = styled__default['default'](StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -784,7 +786,7 @@ StyledCheckLabel.defaultProps = {
 var COMPONENT_ID$u = 'forms.radio_hint';
 var StyledRadioHint = styled__default['default'](StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -802,7 +804,7 @@ StyledRadioHint.defaultProps = {
 var COMPONENT_ID$t = 'forms.checkbox_hint';
 var StyledCheckHint = styled__default['default'](StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -846,7 +848,7 @@ var sizeStyles$b = function sizeStyles(props) {
 };
 var StyledRadioInput = styled__default['default'].input.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -878,7 +880,7 @@ var colorStyles$8 = function colorStyles(props) {
 };
 var StyledCheckInput = styled__default['default'](StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -897,7 +899,7 @@ StyledCheckInput.defaultProps = {
 var COMPONENT_ID$q = 'forms.radio_message';
 var StyledRadioMessage = styled__default['default'](StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -915,7 +917,7 @@ StyledRadioMessage.defaultProps = {
 var COMPONENT_ID$p = 'forms.checkbox_message';
 var StyledCheckMessage = styled__default['default'](StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -951,7 +953,7 @@ function SvgCheckSmFill(props) {
 var COMPONENT_ID$o = 'forms.check_svg';
 var StyledCheckSvg = styled__default['default'](SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -985,7 +987,7 @@ function SvgDashFill(props) {
 var COMPONENT_ID$n = 'forms.dash_svg';
 var StyledDashSvg = styled__default['default'](SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -1012,7 +1014,7 @@ var colorStyles$7 = function colorStyles(props) {
 };
 var StyledFileUpload = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -1042,7 +1044,7 @@ StyledFileUpload.defaultProps = {
 var COMPONENT_ID$l = 'forms.file.close';
 var StyledFileClose = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -1070,7 +1072,7 @@ var sizeStyles$a = function sizeStyles(props) {
 };
 var StyledFile = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -1091,7 +1093,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.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -1111,7 +1113,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.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -1125,7 +1127,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.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -1161,7 +1163,7 @@ function SvgCircleSmFill$1(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.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1180,7 +1182,7 @@ var sizeStyles$9 = function sizeStyles(props) {
 };
 var StyledToggleLabel = styled__default['default'](StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1196,7 +1198,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.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1229,7 +1231,7 @@ var sizeStyles$8 = function sizeStyles(props) {
 };
 var StyledToggleInput = styled__default['default'](StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1247,7 +1249,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.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1289,7 +1291,7 @@ 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.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1313,7 +1315,7 @@ var sizeStyles$7 = function sizeStyles(props) {
 };
 var StyledSelect = styled__default['default'](StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1332,7 +1334,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.39.1',
+  'data-garden-version': '8.42.0',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1385,7 +1387,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.39.1',
+    'data-garden-version': '8.42.0',
     type: 'range',
     style: {
       backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1417,7 +1419,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.39.1',
+    'data-garden-version': '8.42.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1457,7 +1459,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.39.1',
+    'data-garden-version': '8.42.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1501,7 +1503,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.39.1',
+    'data-garden-version': '8.42.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1528,7 +1530,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledSliderTrackRail = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1559,7 +1561,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledTileIcon = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1599,7 +1601,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.39.1',
+    'data-garden-version': '8.42.0',
     'data-garden-focus-visible': props.isFocused,
     'data-garden-selected': props.isSelected
   };
@@ -1637,7 +1639,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledTileDescription = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1680,7 +1682,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTileLabel = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -2003,7 +2005,7 @@ var Range = React__default['default'].forwardRef(function (_ref, ref) {
       _useState2 = _slicedToArray(_useState, 2),
       backgroundSize = _useState2[0],
       setBackgroundSize = _useState2[1];
-  var rangeRef = containerUtilities.useCombinedRefs(ref);
+  var rangeRef = React.useRef();
   var fieldContext = useFieldContext();
   var updateBackgroundWidthFromInput = React.useCallback(function (rangeTarget) {
     var relativeMax = max;
@@ -2022,7 +2024,7 @@ var Range = React__default['default'].forwardRef(function (_ref, ref) {
     updateBackgroundWidthFromInput(event.target);
   }) : props.onChange;
   var combinedProps = _objectSpread2(_objectSpread2({
-    ref: rangeRef,
+    ref: mergeRefs__default['default']([rangeRef, ref]),
     hasLowerTrack: hasLowerTrack,
     min: min,
     max: max,
@@ -2057,7 +2059,7 @@ var Textarea = React__default['default'].forwardRef(function (_ref, ref) {
       onSelect = _ref.onSelect,
       props = _objectWithoutProperties(_ref, _excluded$a);
   var fieldContext = useFieldContext();
-  var textAreaRef = containerUtilities.useCombinedRefs(ref);
+  var textAreaRef = React.useRef();
   var shadowTextAreaRef = React.useRef(null);
   var _useState = React.useState({
     overflow: false,
@@ -2136,7 +2138,7 @@ var Textarea = React__default['default'].forwardRef(function (_ref, ref) {
     event.currentTarget.select();
   }) : onSelect;
   var combinedProps = _objectSpread2({
-    ref: textAreaRef,
+    ref: mergeRefs__default['default']([textAreaRef, ref]),
     rows: minRows,
     onChange: onChangeHandler,
     onSelect: onSelectHandler,
@@ -2261,10 +2263,9 @@ var Select = React__default['default'].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
       props = _objectWithoutProperties(_ref, _excluded$7);
   var fieldContext = useFieldContext();
-  var selectRef = containerUtilities.useCombinedRefs(ref);
   var combinedProps = _objectSpread2({
     disabled: disabled,
-    ref: selectRef
+    ref: ref
   }, props);
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps, {
@@ -2677,7 +2678,7 @@ var Label = React__default['default'].forwardRef(function (props, forwardedRef)
       _useState2 = _slicedToArray(_useState, 2),
       title = _useState2[0],
       setTitle = _useState2[1];
-  var ref = containerUtilities.useCombinedRefs(forwardedRef);
+  var ref = React.useRef();
   var tilesContext = useTilesContext();
   React.useEffect(function () {
     if (ref.current) {
@@ -2685,7 +2686,7 @@ var Label = React__default['default'].forwardRef(function (props, forwardedRef)
     }
   }, [ref]);
   return React__default['default'].createElement(StyledTileLabel, _extends$f({
-    ref: ref,
+    ref: mergeRefs__default['default']([ref, forwardedRef]),
     title: title,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
@@ -3016,7 +3017,7 @@ var MediaInput = React__default['default'].forwardRef(function (_ref, ref) {
       onSelect = _ref.onSelect,
       props = _objectWithoutProperties(_ref, _excluded);
   var fieldContext = useFieldContext();
-  var inputRef = containerUtilities.useCombinedRefs(ref);
+  var inputRef = React.useRef();
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isFocused = _useState2[0],
@@ -3052,7 +3053,7 @@ var MediaInput = React__default['default'].forwardRef(function (_ref, ref) {
   var combinedProps = _objectSpread2({
     disabled: disabled,
     readOnly: readOnly,
-    ref: inputRef,
+    ref: mergeRefs__default['default']([inputRef, ref]),
     onSelect: onSelectHandler
   }, props);
   var isLabelHovered;

package/dist/index.esm.js

@@ -12,7 +12,8 @@ import { useField } from '@zendeskgarden/container-field';
 import styled, { css } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, withTheme, useDocument } from '@zendeskgarden/react-theming';
 import { hideVisually, math, rgba, em } from 'polished';
-import { composeEventHandlers, useCombinedRefs, KEY_CODES, getControlledValue } from '@zendeskgarden/container-utilities';
+import { composeEventHandlers, KEY_CODES, getControlledValue } from '@zendeskgarden/container-utilities';
+import mergeRefs from 'react-merge-refs';
 import debounce from 'lodash.debounce';
 
 function ownKeys(object, enumerableOnly) {
@@ -206,7 +207,7 @@ var useFieldContext = function useFieldContext() {
 var COMPONENT_ID$J = 'forms.field';
 var StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -223,7 +224,7 @@ var COMPONENT_ID$I = 'forms.fieldset';
 var StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -239,7 +240,7 @@ StyledFieldset.defaultProps = {
 var COMPONENT_ID$H = 'forms.input_label';
 var StyledLabel = styled.label.attrs({
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -274,7 +275,7 @@ var COMPONENT_ID$G = 'forms.fieldset_legend';
 var StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -288,7 +289,7 @@ StyledLegend.defaultProps = {
 var COMPONENT_ID$F = 'forms.input_hint';
 var StyledHint = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -412,7 +413,7 @@ var MessageIcon = function MessageIcon(_ref) {
 var COMPONENT_ID$E = 'forms.input_message_icon';
 var StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -445,7 +446,7 @@ var validationStyles = function validationStyles(props) {
 var COMPONENT_ID$D = 'forms.input_message';
 var StyledMessage = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -537,7 +538,7 @@ var sizeStyles$e = function sizeStyles(props) {
 var StyledTextInput = styled.input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$C,
-    'data-garden-version': '8.39.1',
+    'data-garden-version': '8.42.0',
     'aria-invalid': isInvalid(props.validation)
   };
 }).withConfig({
@@ -573,7 +574,7 @@ var hiddenStyles = "\n  visibility: hidden;\n  position: absolute;\n  overflow:
 var StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -624,7 +625,7 @@ function (_ref) {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -648,7 +649,7 @@ var StyledTextFauxInput = styled(StyledTextInput).attrs(function (props) {
     'aria-readonly': props.isReadOnly,
     'aria-disabled': props.isDisabled,
     'data-garden-id': COMPONENT_ID$z,
-    'data-garden-version': '8.39.1'
+    'data-garden-version': '8.42.0'
   };
 }).withConfig({
   displayName: "StyledTextFauxInput",
@@ -673,7 +674,7 @@ StyledTextFauxInput.defaultProps = {
 var COMPONENT_ID$y = 'forms.media_input';
 var StyledTextMediaInput = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -698,7 +699,7 @@ var itemStyles = function itemStyles(props) {
 };
 var StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -722,7 +723,7 @@ var sizeStyles$c = function sizeStyles(props) {
 };
 var StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -739,7 +740,7 @@ StyledRadioLabel.defaultProps = {
 var COMPONENT_ID$v = 'forms.checkbox_label';
 var StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -753,7 +754,7 @@ StyledCheckLabel.defaultProps = {
 var COMPONENT_ID$u = 'forms.radio_hint';
 var StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -771,7 +772,7 @@ StyledRadioHint.defaultProps = {
 var COMPONENT_ID$t = 'forms.checkbox_hint';
 var StyledCheckHint = styled(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -815,7 +816,7 @@ var sizeStyles$b = function sizeStyles(props) {
 };
 var StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -847,7 +848,7 @@ var colorStyles$8 = function colorStyles(props) {
 };
 var StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -866,7 +867,7 @@ StyledCheckInput.defaultProps = {
 var COMPONENT_ID$q = 'forms.radio_message';
 var StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -884,7 +885,7 @@ StyledRadioMessage.defaultProps = {
 var COMPONENT_ID$p = 'forms.checkbox_message';
 var StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -920,7 +921,7 @@ function SvgCheckSmFill(props) {
 var COMPONENT_ID$o = 'forms.check_svg';
 var StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -954,7 +955,7 @@ function SvgDashFill(props) {
 var COMPONENT_ID$n = 'forms.dash_svg';
 var StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -981,7 +982,7 @@ var colorStyles$7 = function colorStyles(props) {
 };
 var StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -1011,7 +1012,7 @@ StyledFileUpload.defaultProps = {
 var COMPONENT_ID$l = 'forms.file.close';
 var StyledFileClose = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -1039,7 +1040,7 @@ var sizeStyles$a = function sizeStyles(props) {
 };
 var StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -1060,7 +1061,7 @@ var StyledFileIcon = styled(function (_ref) {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -1080,7 +1081,7 @@ StyledFileIcon.defaultProps = {
 var COMPONENT_ID$i = 'forms.file_list';
 var StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -1094,7 +1095,7 @@ StyledFileList.defaultProps = {
 var COMPONENT_ID$h = 'forms.file_list.item';
 var StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -1130,7 +1131,7 @@ function SvgCircleSmFill$1(props) {
 var COMPONENT_ID$g = 'forms.radio_svg';
 var StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -1149,7 +1150,7 @@ var sizeStyles$9 = function sizeStyles(props) {
 };
 var StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1165,7 +1166,7 @@ StyledToggleLabel.defaultProps = {
 var COMPONENT_ID$e = 'forms.toggle_hint';
 var StyledToggleHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1198,7 +1199,7 @@ var sizeStyles$8 = function sizeStyles(props) {
 };
 var StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1216,7 +1217,7 @@ StyledToggleInput.defaultProps = {
 var COMPONENT_ID$c = 'forms.toggle_message';
 var StyledToggleMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1258,7 +1259,7 @@ function SvgCircleSmFill(props) {
 var COMPONENT_ID$b = 'forms.toggle_svg';
 var StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1282,7 +1283,7 @@ var sizeStyles$7 = function sizeStyles(props) {
 };
 var StyledSelect = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1301,7 +1302,7 @@ StyledSelect.defaultProps = {
 var COMPONENT_ID$9 = 'forms.select_wrapper';
 var StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.39.1',
+  'data-garden-version': '8.42.0',
   isBare: true
 }).withConfig({
   displayName: "StyledSelectWrapper",
@@ -1354,7 +1355,7 @@ var sizeStyles$6 = function sizeStyles(props) {
 var StyledRangeInput = styled.input.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$8,
-    'data-garden-version': '8.39.1',
+    'data-garden-version': '8.42.0',
     type: 'range',
     style: {
       backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1386,7 +1387,7 @@ var COMPONENT_ID$7 = 'forms.slider';
 var StyledSlider = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$7,
-    'data-garden-version': '8.39.1',
+    'data-garden-version': '8.42.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1426,7 +1427,7 @@ var sizeStyles$5 = function sizeStyles(props) {
 var StyledSliderThumb = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.39.1',
+    'data-garden-version': '8.42.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1470,7 +1471,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 var StyledSliderTrack = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.39.1',
+    'data-garden-version': '8.42.0',
     'aria-disabled': props.isDisabled
   };
 }).withConfig({
@@ -1497,7 +1498,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledSliderTrackRail = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1528,7 +1529,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1568,7 +1569,7 @@ var colorStyles = function colorStyles(props) {
 var StyledTile = styled.label.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.39.1',
+    'data-garden-version': '8.42.0',
     'data-garden-focus-visible': props.isFocused,
     'data-garden-selected': props.isSelected
   };
@@ -1606,7 +1607,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledTileDescription = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1649,7 +1650,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.39.1'
+  'data-garden-version': '8.42.0'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1972,7 +1973,7 @@ var Range = React__default.forwardRef(function (_ref, ref) {
       _useState2 = _slicedToArray(_useState, 2),
       backgroundSize = _useState2[0],
       setBackgroundSize = _useState2[1];
-  var rangeRef = useCombinedRefs(ref);
+  var rangeRef = useRef();
   var fieldContext = useFieldContext();
   var updateBackgroundWidthFromInput = useCallback(function (rangeTarget) {
     var relativeMax = max;
@@ -1991,7 +1992,7 @@ var Range = React__default.forwardRef(function (_ref, ref) {
     updateBackgroundWidthFromInput(event.target);
   }) : props.onChange;
   var combinedProps = _objectSpread2(_objectSpread2({
-    ref: rangeRef,
+    ref: mergeRefs([rangeRef, ref]),
     hasLowerTrack: hasLowerTrack,
     min: min,
     max: max,
@@ -2026,7 +2027,7 @@ var Textarea = React__default.forwardRef(function (_ref, ref) {
       onSelect = _ref.onSelect,
       props = _objectWithoutProperties(_ref, _excluded$a);
   var fieldContext = useFieldContext();
-  var textAreaRef = useCombinedRefs(ref);
+  var textAreaRef = useRef();
   var shadowTextAreaRef = useRef(null);
   var _useState = useState({
     overflow: false,
@@ -2105,7 +2106,7 @@ var Textarea = React__default.forwardRef(function (_ref, ref) {
     event.currentTarget.select();
   }) : onSelect;
   var combinedProps = _objectSpread2({
-    ref: textAreaRef,
+    ref: mergeRefs([textAreaRef, ref]),
     rows: minRows,
     onChange: onChangeHandler,
     onSelect: onSelectHandler,
@@ -2230,10 +2231,9 @@ var Select = React__default.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
       props = _objectWithoutProperties(_ref, _excluded$7);
   var fieldContext = useFieldContext();
-  var selectRef = useCombinedRefs(ref);
   var combinedProps = _objectSpread2({
     disabled: disabled,
-    ref: selectRef
+    ref: ref
   }, props);
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps, {
@@ -2646,7 +2646,7 @@ var Label = React__default.forwardRef(function (props, forwardedRef) {
       _useState2 = _slicedToArray(_useState, 2),
       title = _useState2[0],
       setTitle = _useState2[1];
-  var ref = useCombinedRefs(forwardedRef);
+  var ref = useRef();
   var tilesContext = useTilesContext();
   useEffect(function () {
     if (ref.current) {
@@ -2654,7 +2654,7 @@ var Label = React__default.forwardRef(function (props, forwardedRef) {
     }
   }, [ref]);
   return React__default.createElement(StyledTileLabel, _extends$f({
-    ref: ref,
+    ref: mergeRefs([ref, forwardedRef]),
     title: title,
     isCentered: tilesContext && tilesContext.isCentered
   }, props));
@@ -2985,7 +2985,7 @@ var MediaInput = React__default.forwardRef(function (_ref, ref) {
       onSelect = _ref.onSelect,
       props = _objectWithoutProperties(_ref, _excluded);
   var fieldContext = useFieldContext();
-  var inputRef = useCombinedRefs(ref);
+  var inputRef = useRef();
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isFocused = _useState2[0],
@@ -3021,7 +3021,7 @@ var MediaInput = React__default.forwardRef(function (_ref, ref) {
   var combinedProps = _objectSpread2({
     disabled: disabled,
     readOnly: readOnly,
-    ref: inputRef,
+    ref: mergeRefs([inputRef, ref]),
     onSelect: onSelectHandler
   }, props);
   var isLabelHovered;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-forms",
-  "version": "8.39.1",
+  "version": "8.42.0",
   "description": "Components relating to form elements in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,10 +22,11 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-field": "^1.3.6",
-    "@zendeskgarden/container-utilities": "^0.5.5",
+    "@zendeskgarden/container-utilities": "^0.6.0",
     "lodash.debounce": "^4.0.8",
     "polished": "^4.0.0",
-    "prop-types": "^15.5.7"
+    "prop-types": "^15.5.7",
+    "react-merge-refs": "^1.1.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.1.0",
@@ -35,9 +36,9 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.6",
-    "@zendeskgarden/react-theming": "^8.39.1",
+    "@zendeskgarden/react-theming": "^8.42.0",
     "@zendeskgarden/svg-icons": "6.30.2",
-    "react-dropzone": "11.3.4"
+    "react-dropzone": "11.4.0"
   },
   "keywords": [
     "components",
@@ -49,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a3de03c519cac3ef84f9f49cc9e29308db9ebd"
+  "gitHead": "5cac646f69c4a9bed374d530734272332392671a"
 }