@zendeskgarden/react-forms 9.15.8 → 9.16.0

package/dist/index.cjs.js

@@ -14,6 +14,7 @@ var polished = require('polished');
 var PropTypes = require('prop-types');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactMergeRefs = require('react-merge-refs');
+var reactButtons = require('@zendeskgarden/react-buttons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -48,7 +49,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -58,7 +59,7 @@ const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled__default.default(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -67,7 +68,7 @@ const StyledFieldset = styled__default.default(StyledField).attrs({
 const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled__default.default.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.15.8'
+  'data-garden-version': props['data-garden-version'] || '9.16.0'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -80,7 +81,7 @@ const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled__default.default(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -89,7 +90,7 @@ const StyledLegend = styled__default.default(StyledLabel).attrs({
 const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
-  'data-garden-version': props['data-garden-version'] || '9.15.8'
+  'data-garden-version': props['data-garden-version'] || '9.16.0'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -101,7 +102,7 @@ const StyledHint = styled__default.default.div.attrs(props => ({
 const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
@@ -140,7 +141,7 @@ const sizeStyles$g = ({
 };
 const StyledMessage = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
-  'data-garden-version': props['data-garden-version'] || '9.15.8'
+  'data-garden-version': props['data-garden-version'] || '9.16.0'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -269,8 +270,8 @@ const sizeStyles$f = ({
   return styled.css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-calendar-picker-indicator{background-position:center;background-size:", ";padding:0;width:", ";height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& ~ ", "{margin-top:", "px;}"], padding, $isBare ? '1em' : height, reactTheming.getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, $isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, polished.math(`${swatchMarginHorizontal} * -2`), swatchHeight, calendarPickerBackgroundSize, calendarPickerSize, calendarPickerSize, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, theme.space.base * ($isCompact ? 1 : 2));
 };
 const StyledTextInput = styled__default.default.input.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.15.8',
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$z,
+  'data-garden-version': '9.16.0',
   'aria-invalid': isInvalid(props.$validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -290,7 +291,7 @@ const hiddenStyles = `
 const StyledTextarea = styled__default.default(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -344,7 +345,7 @@ const sizeStyles$e = props => {
 };
 const StyledTextMediaFigure = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -397,7 +398,7 @@ const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props
   'aria-readonly': props.$isReadOnly,
   'aria-disabled': props.$isDisabled,
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -406,7 +407,7 @@ const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props
 const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.15.8',
+  'data-garden-version': '9.16.0',
   $isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -414,22 +415,212 @@ const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
 })(["flex-grow:1;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$u = 'forms.input_group';
+const BUTTON_SELECTOR = "button[data-garden-id='buttons.button']";
+const ICON_BUTTON_SELECTOR = "button[data-garden-id='buttons.icon_button']";
+const getCompactIconButtonSize = theme => polished.math(`${theme.space.base}px * 6`);
+const VALIDATION_BORDER_VARIABLE = {
+  success: 'border.successEmphasis',
+  warning: 'border.warningEmphasis',
+  error: 'border.dangerEmphasis'
+};
+const readOnlyStyles = props => {
+  const {
+    theme
+  } = props;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  return styled.css(["&:has(", "[readonly]){background-color:", ";}"], StyledTextInput, backgroundColor);
+};
+const disabledStyles = props => {
+  const {
+    theme
+  } = props;
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  return styled.css(["&:has(", ":disabled){border-color:", ";background-color:", ";cursor:default;}"], StyledTextInput, borderColor, backgroundColor);
+};
+const unifiedItemStyles = props => {
+  const {
+    theme,
+    $isCompact,
+    $focusInset,
+    $validation
+  } = props;
+  const fontSize = theme.fontSizes.md;
+  const containerSize = $isCompact ? theme.space.lg : theme.space.xl;
+  const buttonSize = polished.math(`${theme.space.base}px * ${$isCompact ? 6 : 7}`);
+  const iconButtonSize = $isCompact ? getCompactIconButtonSize(theme) : theme.space.lg;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const buttonLineHeight = polished.math(`${buttonSize} - (${theme.borderWidths.sm} * 2)`);
+  let borderColor;
+  let hoverBorderColor;
+  let borderVariable;
+  if ($validation) {
+    borderVariable = VALIDATION_BORDER_VARIABLE[$validation];
+    borderColor = reactTheming.getColor({
+      theme,
+      variable: borderVariable
+    });
+    hoverBorderColor = borderColor;
+  } else {
+    borderVariable = 'border.primaryEmphasis';
+    borderColor = reactTheming.getColor({
+      theme,
+      variable: 'border.default',
+      dark: {
+        offset: -100
+      },
+      light: {
+        offset: 100
+      }
+    });
+    hoverBorderColor = reactTheming.getColor({
+      theme,
+      variable: borderVariable
+    });
+  }
+  const focusBorderColor = hoverBorderColor;
+  const buttonEdgeTarget = polished.em(theme.space.sm, fontSize);
+  const iconButtonInset = (parseFloat(iconButtonSize) - parseFloat(theme.iconSizes.md)) / 2;
+  const iconButtonPaddingInline = `calc(${buttonEdgeTarget} - ${iconButtonInset}px)`;
+  return styled.css(["box-sizing:border-box;align-items:center;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:", ";border-radius:", ";border-color:", ";background-color:", ";cursor:text;min-height:", ";font-size:", ";padding-inline:", ";&:hover{border-color:", ";}&:has(> ", ":first-child){padding-inline-start:", ";}&:has(> ", ":last-child){padding-inline-end:", ";}&:has(> ", ":first-child),&:has(> [data-garden-id='", "']:first-child){padding-inline-start:0;}&:has(> ", ":last-child),&:has(> [data-garden-id='", "']:last-child){padding-inline-end:0;}& > * + ", "{margin-inline-start:", ";}& > ", " + ", "{margin-inline-start:", ";}", " & ", "{align-self:stretch;}& > ", "{padding-inline:", ";}& > * + ", "{margin-inline-start:", ";}& > ", ":first-child{border-start-start-radius:", ";border-end-start-radius:", ";padding-inline-start:", ";}& > ", ":last-child{border-start-end-radius:", ";border-end-end-radius:", ";padding-inline-end:", ";}& > [data-garden-id='", "']:first-child > ", ":first-child{border-start-start-radius:", ";border-end-start-radius:", ";}& > [data-garden-id='", "']:last-child > ", ":last-child{border-start-end-radius:", ";border-end-end-radius:", ";}& ", "{flex:none;align-self:center;width:", ";min-width:", ";height:", ";min-height:", ";}& > [data-garden-id='", "']{flex:1 1 auto;align-self:stretch;border:none;background-color:transparent;min-width:0;min-height:0;padding-block:0;padding-inline:0;&:has(> ", ":last-child){padding-inline-end:0;}&:has(> ", ":first-child){padding-inline-start:0;}&:focus-within:not(:has(button:focus-visible)){border-color:transparent;box-shadow:none;}&:has(", ":disabled),&:has(", "[readonly]){background-color:transparent;}}& ", "{height:", ";min-height:", ";line-height:", ";}", " ", " ", ""], theme.borders.sm, theme.borderRadii.md, borderColor, backgroundColor, containerSize, fontSize, theme.space.xxs, hoverBorderColor, ICON_BUTTON_SELECTOR, iconButtonPaddingInline, ICON_BUTTON_SELECTOR, iconButtonPaddingInline, StyledTextInput, COMPONENT_ID$u, StyledTextInput, COMPONENT_ID$u, BUTTON_SELECTOR, theme.space.xxs, StyledTextInput, ICON_BUTTON_SELECTOR, theme.space.xxs, $isCompact && styled.css(["& > [data-garden-id='", "'] + ", "{margin-inline-start:", ";}"], COMPONENT_ID$u, ICON_BUTTON_SELECTOR, theme.space.xs), StyledTextInput, StyledTextInput, theme.space.xs, StyledTextInput, theme.space.xxs, StyledTextInput, theme.borderRadii.md, theme.borderRadii.md, theme.space.sm, StyledTextInput, theme.borderRadii.md, theme.borderRadii.md, theme.space.sm, COMPONENT_ID$u, StyledTextInput, theme.borderRadii.md, theme.borderRadii.md, COMPONENT_ID$u, StyledTextInput, theme.borderRadii.md, theme.borderRadii.md, ICON_BUTTON_SELECTOR, iconButtonSize, iconButtonSize, iconButtonSize, iconButtonSize, COMPONENT_ID$u, ICON_BUTTON_SELECTOR, ICON_BUTTON_SELECTOR, StyledTextInput, StyledTextInput, BUTTON_SELECTOR, buttonSize, buttonSize, buttonLineHeight, reactTheming.focusStyles({
+    theme,
+    inset: $focusInset,
+    color: {
+      variable: borderVariable
+    },
+    selector: '&:focus-within:not(:has(button:focus-visible))',
+    styles: {
+      borderColor: focusBorderColor
+    }
+  }), readOnlyStyles(props), disabledStyles(props));
+};
 const positionStyles = props => {
   const topMargin = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;
-  return styled.css(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin, StyledTextInput);
+  return styled.css(["", ":not([hidden]) + &&,", " + &&,", " ~ &&,&& + ", ",&& ~ ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin, StyledTextInput);
 };
-const itemStyles = props => {
+const segmentedItemStyles = props => {
   const startDirection = props.theme.rtl ? 'right' : 'left';
   const endDirection = props.theme.rtl ? 'left' : 'right';
   return styled.css(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", ":active,& > button:active,& > button[aria-pressed='true'],& > button[aria-pressed='mixed']{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > *:not(:first-child){margin-", ":-", ";}& > *:first-child:not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
-})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), reactTheming.componentStyles);
+})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";", ";"], props => positionStyles(props), props => !props.$isUnified && segmentedItemStyles(props), props => props.$isUnified && unifiedItemStyles(props), reactTheming.componentStyles);
+
+const InputGroupContext = React.createContext(undefined);
+const useInputGroupContext = () => {
+  return React.useContext(InputGroupContext);
+};
+const deriveValidation = map => {
+  let derived;
+  map.forEach(value => {
+    derived = value;
+  });
+  return derived;
+};
+const useInputGroupValidationState = () => {
+  const validationsRef = React.useRef(new Map());
+  const [validation, setValidation] = React.useState();
+  const registerValidation = React.useCallback((id, next) => {
+    const map = validationsRef.current;
+    if (next === undefined) {
+      if (!map.has(id)) {
+        return;
+      }
+      map.delete(id);
+    } else if (map.get(id) === next) {
+      return;
+    } else {
+      if (!map.has(id) && map.size > 0 && process.env.NODE_ENV === 'development') {
+        console.warn('Warning: a unified <InputGroup> supports a single Input with a `validation` prop. Multiple validation-bearing Inputs produce an ambiguous container validation state. Render a single Input per unified group, or use the classic InputGroup for multi-input layouts.');
+      }
+      map.set(id, next);
+    }
+    const derived = deriveValidation(map);
+    setValidation(prev => prev === derived ? prev : derived);
+  }, []);
+  return {
+    validation,
+    registerValidation
+  };
+};
+const usePublishInputGroupValidation = validation => {
+  const context = useInputGroupContext();
+  const id = React.useRef({});
+  const {
+    registerValidation,
+    isUnified
+  } = context || {};
+  React.useLayoutEffect(() => {
+    if (!registerValidation || !isUnified) {
+      return undefined;
+    }
+    const validationId = id.current;
+    registerValidation(validationId, validation);
+    return () => {
+      registerValidation(validationId, undefined);
+    };
+  }, [isUnified, registerValidation, validation]);
+};
+
+const InputGroup = React__namespace.default.forwardRef(({
+  isCompact,
+  isUnified,
+  focusInset,
+  children,
+  ...other
+}, ref) => {
+  const fieldContext = useFieldContext();
+  const {
+    validation,
+    registerValidation
+  } = useInputGroupValidationState();
+  const contextValue = React.useMemo(() => ({
+    isCompact,
+    isUnified,
+    registerValidation
+  }), [isCompact, isUnified, registerValidation]);
+  const labelId = fieldContext?.hasLabel && !other['aria-label'] ? fieldContext.getLabelProps({}).id : undefined;
+  return React__namespace.default.createElement(InputGroupContext.Provider, {
+    value: contextValue
+  }, React__namespace.default.createElement(StyledInputGroup, Object.assign({
+    role: "group",
+    "aria-labelledby": labelId,
+    ref: ref,
+    $isCompact: isCompact,
+    $isUnified: isUnified,
+    $focusInset: focusInset
+  }, other, {
+    $validation: validation
+  }), children));
+});
+InputGroup.displayName = 'InputGroup';
+InputGroup.propTypes = {
+  isCompact: PropTypes__default.default.bool,
+  isUnified: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool
+};
+
+const StyledClearableInput = styled__default.default(InputGroup).withConfig({
+  displayName: "StyledClearableInput",
+  componentId: "sc-v0381a-0"
+})(["", ""], props => props.$isBare && styled.css(["&&", "{border:none;border-radius:0;background-color:transparent;&:focus-within{box-shadow:none;}}"], StyledInputGroup));
 
 const COMPONENT_ID$t = 'forms.radio_label';
 const sizeStyles$d = props => {
@@ -440,7 +631,7 @@ const sizeStyles$d = props => {
 };
 const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.15.8',
+  'data-garden-version': '9.16.0',
   $isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -450,7 +641,7 @@ const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
 const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -459,7 +650,7 @@ const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
 const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -468,7 +659,7 @@ const StyledRadioHint = styled__default.default(StyledHint).attrs({
 const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled__default.default(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"
@@ -571,7 +762,7 @@ const sizeStyles$c = ({
 };
 const StyledRadioInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.15.8',
+  'data-garden-version': '9.16.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -633,7 +824,7 @@ const colorStyles$8 = ({
 };
 const StyledCheckInput = styled__default.default(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",
@@ -643,7 +834,7 @@ const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
 const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -652,7 +843,7 @@ const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
 const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -681,7 +872,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -708,7 +899,7 @@ var SvgDashFill = function SvgDashFill(props) {
 const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -805,7 +996,7 @@ const sizeStyles$b = ({
 };
 const StyledFileUpload = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -814,7 +1005,7 @@ const StyledFileUpload = styled__default.default.div.attrs({
 const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -898,7 +1089,7 @@ const sizeStyles$a = ({
 };
 const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -907,7 +1098,7 @@ const StyledFile = styled__default.default.div.attrs({
 const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -937,7 +1128,7 @@ const sizeStyles$9 = ({
 };
 const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -946,7 +1137,7 @@ const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attr
 const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -955,7 +1146,7 @@ const StyledFileList = styled__default.default.ul.attrs({
 const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -982,7 +1173,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -996,7 +1187,7 @@ const sizeStyles$8 = props => {
 };
 const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -1005,7 +1196,7 @@ const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
 const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -1052,7 +1243,7 @@ const sizeStyles$7 = ({
 };
 const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -1061,7 +1252,7 @@ const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
 const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -1088,7 +1279,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -1126,7 +1317,7 @@ const sizeStyles$6 = ({
 };
 const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.15.8',
+  'data-garden-version': '9.16.0',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1146,7 +1337,7 @@ const sizeStyles$5 = ({
 };
 const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1313,7 +1504,7 @@ const sizeStyles$4 = ({
 };
 const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.15.8',
+  'data-garden-version': '9.16.0',
   type: 'range',
   style: {
     backgroundSize: props.$hasLowerTrack ?? true ? props.$backgroundSize ?? '0%' : undefined
@@ -1431,7 +1622,7 @@ const sizeStyles$3 = ({
 };
 const StyledTile = styled__default.default.label.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"
@@ -1450,7 +1641,7 @@ const sizeStyles$2 = ({
 };
 const StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1510,7 +1701,7 @@ const sizeStyles$1 = ({
 };
 const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1534,7 +1725,7 @@ const sizeStyles = ({
 };
 const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.15.8'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1747,6 +1938,13 @@ const Label$1 = React__namespace.default.forwardRef(({
   const fieldContext = useFieldContext();
   const fieldsetContext = useFieldsetContext();
   const type = useInputContext();
+  const {
+    setHasLabel
+  } = fieldContext || {};
+  React.useEffect(() => {
+    setHasLabel?.(true);
+    return () => setHasLabel?.(false);
+  }, [setHasLabel]);
   const $isRegular = fieldsetContext && isRegular === undefined ? true : isRegular;
   let combinedProps = other;
   if (fieldContext) {
@@ -1819,6 +2017,7 @@ Label$1.propTypes = {
 const FieldComponent = React__namespace.default.forwardRef((props, ref) => {
   const [hasHint, setHasHint] = React.useState(false);
   const [hasMessage, setHasMessage] = React.useState(false);
+  const [hasLabel, setHasLabel] = React.useState(false);
   const [isLabelActive, setIsLabelActive] = React.useState(false);
   const [isLabelHovered, setIsLabelHovered] = React.useState(false);
   const {
@@ -1841,8 +2040,10 @@ const FieldComponent = React__namespace.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__namespace.default.createElement(FieldContext.Provider, {
     value: fieldProps
   }, React__namespace.default.createElement(StyledField, Object.assign({}, props, {
@@ -1924,11 +2125,6 @@ Checkbox.propTypes = {
   indeterminate: PropTypes__default.default.bool
 };
 
-const InputGroupContext = React.createContext(undefined);
-const useInputGroupContext = () => {
-  return React.useContext(InputGroupContext);
-};
-
 const Input = React__namespace.default.forwardRef(({
   onSelect,
   isBare,
@@ -1939,6 +2135,7 @@ const Input = React__namespace.default.forwardRef(({
 }, ref) => {
   const fieldContext = useFieldContext();
   const inputGroupContext = useInputGroupContext();
+  usePublishInputGroupValidation(validation);
   let combinedProps = other;
   if (fieldContext) {
     combinedProps = fieldContext.getInputProps(combinedProps);
@@ -1950,7 +2147,7 @@ const Input = React__namespace.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
@@ -2436,23 +2633,113 @@ Tiles.Icon = Icon;
 Tiles.Label = Label;
 Tiles.Tile = Tile;
 
-const InputGroup = React__namespace.default.forwardRef(({
+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__namespace.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$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
+
+const ClearableInput = React__namespace.default.forwardRef(({
+  clearButtonLabel,
+  wrapperProps,
+  wrapperRef,
+  buttonProps: _buttonProps = {},
   isCompact,
-  ...other
+  focusInset,
+  isBare,
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  readOnly,
+  ...props
 }, ref) => {
-  const contextValue = React.useMemo(() => ({
-    isCompact
-  }), [isCompact]);
-  return React__namespace.default.createElement(InputGroupContext.Provider, {
-    value: contextValue
-  }, React__namespace.default.createElement(StyledInputGroup, Object.assign({
-    ref: ref,
-    $isCompact: isCompact
-  }, other)));
+  const fieldContext = useFieldContext();
+  const inputRef = React.useRef(null);
+  const generatedId = containerUtilities.useId(props.id);
+  const inputId = props.id ?? fieldContext?.getInputProps().id ?? generatedId;
+  const ariaLabel = reactTheming.useText(ClearableInput, {
+    clearButtonLabel
+  }, 'clearButtonLabel', 'Clear');
+  const isControlled = value !== undefined;
+  const [uncontrolledHasValue, setUncontrolledHasValue] = React.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__namespace.default.createElement(StyledClearableInput, Object.assign({
+    focusInset: focusInset
+  }, wrapperProps, {
+    isUnified: true,
+    isCompact: isCompact,
+    $isBare: isBare,
+    onClick: containerUtilities.composeEventHandlers(wrapperProps?.onClick, () => {
+      inputRef.current?.focus();
+    }),
+    ref: wrapperRef
+  }), React__namespace.default.createElement(Input, Object.assign({
+    ref: reactMergeRefs.mergeRefs([inputRef, ref])
+  }, props, {
+    disabled: disabled,
+    readOnly: readOnly,
+    value: value,
+    defaultValue: defaultValue,
+    onChange: containerUtilities.composeEventHandlers(onChange, onInputChange),
+    id: inputId,
+    "data-garden-id": "forms.clearable_input"
+  })), hasValue && !disabled && !readOnly ? React__namespace.default.createElement(reactButtons.IconButton, Object.assign({
+    "aria-label": ariaLabel,
+    "aria-controls": inputId,
+    isBasic: true
+  }, buttonProps, {
+    focusInset: !isCompact,
+    onMouseDown: containerUtilities.composeEventHandlers(onMouseDown, onClearButtonMouseDown),
+    onClick: containerUtilities.composeEventHandlers(onClick, onClearButtonClick)
+  }), React__namespace.default.createElement(SvgXStroke$1, {
+    "aria-hidden": "true"
+  })) : null);
 });
-InputGroup.displayName = 'InputGroup';
-InputGroup.propTypes = {
-  isCompact: PropTypes__default.default.bool
+ClearableInput.displayName = 'ClearableInput';
+ClearableInput.propTypes = {
+  isCompact: PropTypes__default.default.bool,
+  isBare: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  validation: PropTypes__default.default.oneOf(VALIDATION),
+  clearButtonLabel: PropTypes__default.default.string,
+  wrapperProps: PropTypes__default.default.object,
+  wrapperRef: PropTypes__default.default.any,
+  buttonProps: PropTypes__default.default.object
 };
 
 const FileUpload = React__namespace.default.forwardRef(({
@@ -2496,37 +2783,20 @@ FileListComponent.displayName = 'FileList';
 const FileList = FileListComponent;
 FileList.Item = Item;
 
-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__namespace.createElement("svg", _extends$k({
-    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__namespace.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3 9l6-6m0 6L3 3"
-  })));
-};
-
 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__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
+    width: 12,
+    height: 12,
     focusable: "false",
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 12 12",
     "aria-hidden": "true"
   }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
-    d: "M3 13L13 3m0 10L3 3"
+    d: "M3 9l6-6m0 6L3 3"
   })));
 };
 
@@ -2547,7 +2817,7 @@ const CloseComponent = React__namespace.default.forwardRef((props, ref) => {
     type: "button",
     tabIndex: -1,
     onMouseDown: onMouseDown
-  }), fileContext && fileContext.isCompact ? React__namespace.default.createElement(SvgXStroke$1, null) : React__namespace.default.createElement(SvgXStroke, null));
+  }), fileContext && fileContext.isCompact ? React__namespace.default.createElement(SvgXStroke, null) : React__namespace.default.createElement(SvgXStroke$1, null));
 });
 CloseComponent.displayName = 'File.Close';
 const Close = CloseComponent;
@@ -3095,6 +3365,7 @@ MediaInput.propTypes = {
 MediaInput.displayName = 'MediaInput';
 
 exports.Checkbox = Checkbox;
+exports.ClearableInput = ClearableInput;
 exports.FauxInput = FauxInput;
 exports.Field = Field;
 exports.Fieldset = Fieldset;