@zendeskgarden/react-forms 9.15.8 → 9.16.0

package/dist/esm/elements/Checkbox.js

@@ -21,6 +21,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import { StyledCheckInput } from '../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/ClearableInput.js

@@ -0,0 +1,111 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
+import { useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
+import { useText } from '@zendeskgarden/react-theming';
+import { IconButton } from '@zendeskgarden/react-buttons';
+import SvgXStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
+import { VALIDATION } from '../types/index.js';
+import useFieldContext from '../utils/useFieldContext.js';
+import { Input } from './Input.js';
+import { StyledClearableInput } from '../styled/input-group/StyledClearableInput.js';
+
+const ClearableInput = React__default.forwardRef(({
+  clearButtonLabel,
+  wrapperProps,
+  wrapperRef,
+  buttonProps: _buttonProps = {},
+  isCompact,
+  focusInset,
+  isBare,
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  readOnly,
+  ...props
+}, ref) => {
+  const fieldContext = useFieldContext();
+  const inputRef = useRef(null);
+  const generatedId = useId(props.id);
+  const inputId = props.id ?? fieldContext?.getInputProps().id ?? generatedId;
+  const ariaLabel = useText(ClearableInput, {
+    clearButtonLabel
+  }, 'clearButtonLabel', 'Clear');
+  const isControlled = value !== undefined;
+  const [uncontrolledHasValue, setUncontrolledHasValue] = useState(() => !!defaultValue);
+  const hasValue = isControlled ? !!value : uncontrolledHasValue;
+  const {
+    onClick,
+    onMouseDown,
+    ...buttonProps
+  } = _buttonProps;
+  const onClearButtonMouseDown = event => {
+    event.preventDefault();
+  };
+  const onClearButtonClick = () => {
+    const input = inputRef.current;
+    if (input) {
+      Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set?.call(input, '');
+      input.dispatchEvent(new Event('input', {
+        bubbles: true
+      }));
+      input.focus();
+    }
+  };
+  const onInputChange = event => {
+    if (!isControlled) {
+      setUncontrolledHasValue(!!event.target.value);
+    }
+  };
+  return React__default.createElement(StyledClearableInput, Object.assign({
+    focusInset: focusInset
+  }, wrapperProps, {
+    isUnified: true,
+    isCompact: isCompact,
+    $isBare: isBare,
+    onClick: composeEventHandlers(wrapperProps?.onClick, () => {
+      inputRef.current?.focus();
+    }),
+    ref: wrapperRef
+  }), React__default.createElement(Input, Object.assign({
+    ref: mergeRefs([inputRef, ref])
+  }, props, {
+    disabled: disabled,
+    readOnly: readOnly,
+    value: value,
+    defaultValue: defaultValue,
+    onChange: composeEventHandlers(onChange, onInputChange),
+    id: inputId,
+    "data-garden-id": "forms.clearable_input"
+  })), hasValue && !disabled && !readOnly ? React__default.createElement(IconButton, Object.assign({
+    "aria-label": ariaLabel,
+    "aria-controls": inputId,
+    isBasic: true
+  }, buttonProps, {
+    focusInset: !isCompact,
+    onMouseDown: composeEventHandlers(onMouseDown, onClearButtonMouseDown),
+    onClick: composeEventHandlers(onClick, onClearButtonClick)
+  }), React__default.createElement(SvgXStroke, {
+    "aria-hidden": "true"
+  })) : null);
+});
+ClearableInput.displayName = 'ClearableInput';
+ClearableInput.propTypes = {
+  isCompact: PropTypes.bool,
+  isBare: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  validation: PropTypes.oneOf(VALIDATION),
+  clearButtonLabel: PropTypes.string,
+  wrapperProps: PropTypes.object,
+  wrapperRef: PropTypes.any,
+  buttonProps: PropTypes.object
+};
+
+export { ClearableInput };

package/dist/esm/elements/FileUpload.js

@@ -19,6 +19,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import '../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/Input.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import { VALIDATION } from '../types/index.js';
 import useFieldContext from '../utils/useFieldContext.js';
-import { useInputGroupContext } from '../utils/useInputGroupContext.js';
+import { useInputGroupContext, usePublishInputGroupValidation } from '../utils/useInputGroupContext.js';
 import '../styled/common/StyledField.js';
 import '../styled/common/StyledFieldset.js';
 import '../styled/common/StyledLegend.js';
@@ -23,6 +23,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import '../styled/checkbox/StyledCheckInput.js';
@@ -65,6 +66,7 @@ const Input = React__default.forwardRef(({
 }, ref) => {
   const fieldContext = useFieldContext();
   const inputGroupContext = useInputGroupContext();
+  usePublishInputGroupValidation(validation);
   let combinedProps = other;
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
@@ -76,7 +78,7 @@ const Input = React__default.forwardRef(({
     ref: ref,
     onSelect: onSelectHandler
   }, combinedProps, {
-    $isBare: isBare,
+    $isBare: isBare === undefined && inputGroupContext?.isUnified ? true : isBare,
     $isCompact: inputGroupContext ? inputGroupContext.isCompact : isCompact,
     $focusInset: inputGroupContext && focusInset === undefined ? true : focusInset,
     $validation: validation

package/dist/esm/elements/MediaInput.js

@@ -22,6 +22,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import { StyledTextMediaInput } from '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import '../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/Radio.js

@@ -21,6 +21,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import '../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/Range.js

@@ -21,6 +21,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import '../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/Select.js

@@ -21,6 +21,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import '../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/Textarea.js

@@ -23,6 +23,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import '../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/Toggle.js

@@ -21,6 +21,7 @@ import '../styled/text/StyledTextFauxInput.js';
 import '../styled/text/StyledTextMediaInput.js';
 import '../styled/text/StyledTextMediaFigure.js';
 import '../styled/input-group/StyledInputGroup.js';
+import '../styled/input-group/StyledClearableInput.js';
 import '../styled/checkbox/StyledCheckLabel.js';
 import '../styled/checkbox/StyledCheckHint.js';
 import '../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/common/Field.js

@@ -20,6 +20,7 @@ import '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import '../../styled/checkbox/StyledCheckLabel.js';
 import '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';
@@ -58,6 +59,7 @@ import { Label } from './Label.js';
 const FieldComponent = React__default.forwardRef((props, ref) => {
   const [hasHint, setHasHint] = useState(false);
   const [hasMessage, setHasMessage] = useState(false);
+  const [hasLabel, setHasLabel] = useState(false);
   const [isLabelActive, setIsLabelActive] = useState(false);
   const [isLabelHovered, setIsLabelHovered] = useState(false);
   const {
@@ -80,8 +82,10 @@ const FieldComponent = React__default.forwardRef((props, ref) => {
     hasHint,
     setHasHint,
     hasMessage,
-    setHasMessage
-  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
+    setHasMessage,
+    hasLabel,
+    setHasLabel
+  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage, hasLabel]);
   return React__default.createElement(FieldContext.Provider, {
     value: fieldProps
   }, React__default.createElement(StyledField, Object.assign({}, props, {

package/dist/esm/elements/common/Fieldset.js

@@ -20,6 +20,7 @@ import '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import '../../styled/checkbox/StyledCheckLabel.js';
 import '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/common/Hint.js

@@ -20,6 +20,7 @@ import '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import '../../styled/checkbox/StyledCheckLabel.js';
 import { StyledCheckHint } from '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/common/Label.js

@@ -4,7 +4,7 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import React__default from 'react';
+import React__default, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import useFieldContext from '../../utils/useFieldContext.js';
@@ -23,6 +23,7 @@ import '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import { StyledCheckLabel } from '../../styled/checkbox/StyledCheckLabel.js';
 import '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';
@@ -63,6 +64,13 @@ const Label$1 = React__default.forwardRef(({
   const fieldContext = useFieldContext();
   const fieldsetContext = useFieldsetContext();
   const type = useInputContext();
+  const {
+    setHasLabel
+  } = fieldContext || {};
+  useEffect(() => {
+    setHasLabel?.(true);
+    return () => setHasLabel?.(false);
+  }, [setHasLabel]);
   const $isRegular = fieldsetContext && isRegular === undefined ? true : isRegular;
   let combinedProps = other;
   if (fieldContext) {

package/dist/esm/elements/common/Legend.js

@@ -18,6 +18,7 @@ import '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import '../../styled/checkbox/StyledCheckLabel.js';
 import '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/common/Message.js

@@ -23,6 +23,7 @@ import '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import '../../styled/checkbox/StyledCheckLabel.js';
 import '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/common/MessageIcon.js

@@ -22,6 +22,7 @@ import '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import '../../styled/checkbox/StyledCheckLabel.js';
 import '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/faux-input/FauxInput.js

@@ -21,6 +21,7 @@ import { StyledTextFauxInput } from '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import '../../styled/checkbox/StyledCheckLabel.js';
 import '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/faux-input/components/EndIcon.js

@@ -18,6 +18,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import { StyledTextMediaFigure } from '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/faux-input/components/StartIcon.js

@@ -18,6 +18,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import { StyledTextMediaFigure } from '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/file-list/FileList.js

@@ -19,6 +19,7 @@ import '../../styled/text/StyledTextFauxInput.js';
 import '../../styled/text/StyledTextMediaInput.js';
 import '../../styled/text/StyledTextMediaFigure.js';
 import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/input-group/StyledClearableInput.js';
 import '../../styled/checkbox/StyledCheckLabel.js';
 import '../../styled/checkbox/StyledCheckHint.js';
 import '../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/file-list/components/Close.js

@@ -22,6 +22,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/file-list/components/Delete.js

@@ -22,6 +22,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/file-list/components/File.js

@@ -22,6 +22,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/file-list/components/Item.js

@@ -18,6 +18,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/input-group/InputGroup.js

@@ -6,69 +6,46 @@
 */
 import React__default, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { InputGroupContext } from '../../utils/useInputGroupContext.js';
-import '../../styled/common/StyledField.js';
-import '../../styled/common/StyledFieldset.js';
-import '../../styled/common/StyledLegend.js';
-import '../../styled/common/StyledHint.js';
-import '../../styled/common/StyledLabel.js';
-import '../../styled/common/StyledMessage.js';
-import '../../styled/common/StyledMessageIcon.js';
-import '../../styled/text/StyledTextInput.js';
-import '../../styled/text/StyledTextarea.js';
-import '../../styled/text/StyledTextFauxInput.js';
-import '../../styled/text/StyledTextMediaInput.js';
-import '../../styled/text/StyledTextMediaFigure.js';
+import useFieldContext from '../../utils/useFieldContext.js';
+import { useInputGroupValidationState, InputGroupContext } from '../../utils/useInputGroupContext.js';
 import { StyledInputGroup } from '../../styled/input-group/StyledInputGroup.js';
-import '../../styled/checkbox/StyledCheckLabel.js';
-import '../../styled/checkbox/StyledCheckHint.js';
-import '../../styled/checkbox/StyledCheckInput.js';
-import '../../styled/checkbox/StyledCheckMessage.js';
-import '../../styled/checkbox/StyledCheckSvg.js';
-import '../../styled/checkbox/StyledDashSvg.js';
-import '../../styled/file-upload/StyledFileUpload.js';
-import '../../styled/file-list/StyledFile.js';
-import '../../styled/file-list/StyledFileClose.js';
-import '../../styled/file-list/StyledFileDelete.js';
-import '../../styled/file-list/StyledFileIcon.js';
-import '../../styled/file-list/StyledFileList.js';
-import '../../styled/file-list/StyledFileListItem.js';
-import '../../styled/radio/StyledRadioLabel.js';
-import '../../styled/radio/StyledRadioHint.js';
-import '../../styled/radio/StyledRadioInput.js';
-import '../../styled/radio/StyledRadioMessage.js';
-import '../../styled/radio/StyledRadioSvg.js';
-import '../../styled/toggle/StyledToggleLabel.js';
-import '../../styled/toggle/StyledToggleHint.js';
-import '../../styled/toggle/StyledToggleInput.js';
-import '../../styled/toggle/StyledToggleMessage.js';
-import '../../styled/toggle/StyledToggleSvg.js';
-import '../../styled/select/StyledSelect.js';
-import '../../styled/select/StyledSelectWrapper.js';
-import '../../styled/range/StyledRangeInput.js';
-import '../../styled/tiles/StyledTile.js';
-import '../../styled/tiles/StyledTileDescription.js';
-import '../../styled/tiles/StyledTileIcon.js';
-import '../../styled/tiles/StyledTileInput.js';
-import '../../styled/tiles/StyledTileLabel.js';
 
 const InputGroup = React__default.forwardRef(({
   isCompact,
+  isUnified,
+  focusInset,
+  children,
   ...other
 }, ref) => {
+  const fieldContext = useFieldContext();
+  const {
+    validation,
+    registerValidation
+  } = useInputGroupValidationState();
   const contextValue = useMemo(() => ({
-    isCompact
-  }), [isCompact]);
+    isCompact,
+    isUnified,
+    registerValidation
+  }), [isCompact, isUnified, registerValidation]);
+  const labelId = fieldContext?.hasLabel && !other['aria-label'] ? fieldContext.getLabelProps({}).id : undefined;
   return React__default.createElement(InputGroupContext.Provider, {
     value: contextValue
   }, React__default.createElement(StyledInputGroup, Object.assign({
+    role: "group",
+    "aria-labelledby": labelId,
     ref: ref,
-    $isCompact: isCompact
-  }, other)));
+    $isCompact: isCompact,
+    $isUnified: isUnified,
+    $focusInset: focusInset
+  }, other, {
+    $validation: validation
+  }), children));
 });
 InputGroup.displayName = 'InputGroup';
 InputGroup.propTypes = {
-  isCompact: PropTypes.bool
+  isCompact: PropTypes.bool,
+  isUnified: PropTypes.bool,
+  focusInset: PropTypes.bool
 };
 
 export { InputGroup };

package/dist/esm/elements/tiles/components/Description.js

@@ -18,6 +18,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/tiles/components/Icon.js

@@ -19,6 +19,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/tiles/components/Label.js

@@ -19,6 +19,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/elements/tiles/components/Tile.js

@@ -20,6 +20,7 @@ import '../../../styled/text/StyledTextFauxInput.js';
 import '../../../styled/text/StyledTextMediaInput.js';
 import '../../../styled/text/StyledTextMediaFigure.js';
 import '../../../styled/input-group/StyledInputGroup.js';
+import '../../../styled/input-group/StyledClearableInput.js';
 import '../../../styled/checkbox/StyledCheckLabel.js';
 import '../../../styled/checkbox/StyledCheckHint.js';
 import '../../../styled/checkbox/StyledCheckInput.js';

package/dist/esm/index.js

@@ -18,6 +18,7 @@ export { Toggle } from './elements/Toggle.js';
 export { Select } from './elements/Select.js';
 export { Tiles } from './elements/tiles/Tiles.js';
 export { InputGroup } from './elements/input-group/InputGroup.js';
+export { ClearableInput } from './elements/ClearableInput.js';
 export { FileUpload } from './elements/FileUpload.js';
 export { FileList } from './elements/file-list/FileList.js';
 export { File } from './elements/file-list/components/File.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js

@@ -6,21 +6,21 @@
 */
 import * as React from 'react';
 
-var _path$j;
-function _extends$k() { return _extends$k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$k.apply(null, arguments); }
-var SvgXStroke$1 = function SvgXStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+var _path$i;
+function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
+var SvgXStroke = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
     d: "M3 9l6-6m0 6L3 3"
   })));
 };
 
-export { SvgXStroke$1 as default };
+export { SvgXStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js

@@ -6,21 +6,21 @@
 */
 import * as React from 'react';
 
-var _path$i;
-function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
-var SvgXStroke = function SvgXStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+var _path$j;
+function _extends$k() { return _extends$k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$k.apply(null, arguments); }
+var SvgXStroke$1 = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
     d: "M3 13L13 3m0 10L3 3"
   })));
 };
 
-export { SvgXStroke as default };
+export { SvgXStroke$1 as default };

package/dist/esm/styled/checkbox/StyledCheckHint.js

@@ -11,7 +11,7 @@ import { StyledRadioHint } from '../radio/StyledRadioHint.js';
 const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"

package/dist/esm/styled/checkbox/StyledCheckInput.js

@@ -64,7 +64,7 @@ const colorStyles$8 = ({
 };
 const StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.15.8',
+  'data-garden-version': '9.16.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",