@zendeskgarden/react-forms 9.15.7 → 9.16.0

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

@@ -11,7 +11,7 @@ import { StyledRadioLabel } from '../radio/StyledRadioLabel.js';
 const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"

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

@@ -11,7 +11,7 @@ import { StyledRadioMessage } from '../radio/StyledRadioMessage.js';
 const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"

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

@@ -13,7 +13,7 @@ import { StyledCheckLabel } from './StyledCheckLabel.js';
 const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"

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

@@ -13,7 +13,7 @@ import { StyledCheckLabel } from './StyledCheckLabel.js';
 const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"

package/dist/esm/styled/common/StyledField.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"

package/dist/esm/styled/common/StyledFieldset.js

@@ -12,7 +12,7 @@ const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"

package/dist/esm/styled/common/StyledHint.js

@@ -10,7 +10,7 @@ import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-t
 const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
-  'data-garden-version': props['data-garden-version'] || '9.15.7'
+  'data-garden-version': props['data-garden-version'] || '9.16.0'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"

package/dist/esm/styled/common/StyledLabel.js

@@ -11,7 +11,7 @@ import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-t
 const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.15.7'
+  'data-garden-version': props['data-garden-version'] || '9.16.0'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"

package/dist/esm/styled/common/StyledLegend.js

@@ -12,7 +12,7 @@ const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"

package/dist/esm/styled/common/StyledMessage.js

@@ -43,7 +43,7 @@ const sizeStyles$g = ({
 };
 const StyledMessage = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
-  'data-garden-version': props['data-garden-version'] || '9.15.7'
+  'data-garden-version': props['data-garden-version'] || '9.16.0'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"

package/dist/esm/styled/common/StyledMessageIcon.js

@@ -10,7 +10,7 @@ import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"

package/dist/esm/styled/file-list/StyledFile.js

@@ -83,7 +83,7 @@ const sizeStyles$a = ({
 };
 const StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"

package/dist/esm/styled/file-list/StyledFileClose.js

@@ -10,7 +10,7 @@ import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"

package/dist/esm/styled/file-list/StyledFileDelete.js

@@ -11,7 +11,7 @@ import { StyledFileClose } from './StyledFileClose.js';
 const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"

package/dist/esm/styled/file-list/StyledFileIcon.js

@@ -28,7 +28,7 @@ const sizeStyles$9 = ({
 };
 const StyledFileIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"

package/dist/esm/styled/file-list/StyledFileList.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"

package/dist/esm/styled/file-list/StyledFileListItem.js

@@ -12,7 +12,7 @@ import { StyledFileUpload } from '../file-upload/StyledFileUpload.js';
 const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"

package/dist/esm/styled/file-upload/StyledFileUpload.js

@@ -102,7 +102,7 @@ const sizeStyles$b = ({
 };
 const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"

package/dist/esm/styled/input-group/StyledClearableInput.js

@@ -0,0 +1,16 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { InputGroup } from '../../elements/input-group/InputGroup.js';
+import { StyledInputGroup } from './StyledInputGroup.js';
+
+const StyledClearableInput = styled(InputGroup).withConfig({
+  displayName: "StyledClearableInput",
+  componentId: "sc-v0381a-0"
+})(["", ""], props => props.$isBare && css(["&&", "{border:none;border-radius:0;background-color:transparent;&:focus-within{box-shadow:none;}}"], StyledInputGroup));
+
+export { StyledClearableInput };

package/dist/esm/styled/input-group/StyledInputGroup.js

@@ -5,28 +5,120 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { componentStyles } from '@zendeskgarden/react-theming';
+import { math, em } from 'polished';
+import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from '../text/StyledTextInput.js';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledHint } from '../common/StyledHint.js';
 import { StyledMessage } from '../common/StyledMessage.js';
 
 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 => 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 = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  return css(["&:has(", "[readonly]){background-color:", ";}"], StyledTextInput, backgroundColor);
+};
+const disabledStyles = props => {
+  const {
+    theme
+  } = props;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  return 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 = math(`${theme.space.base}px * ${$isCompact ? 6 : 7}`);
+  const iconButtonSize = $isCompact ? getCompactIconButtonSize(theme) : theme.space.lg;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const buttonLineHeight = math(`${buttonSize} - (${theme.borderWidths.sm} * 2)`);
+  let borderColor;
+  let hoverBorderColor;
+  let borderVariable;
+  if ($validation) {
+    borderVariable = VALIDATION_BORDER_VARIABLE[$validation];
+    borderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+    hoverBorderColor = borderColor;
+  } else {
+    borderVariable = 'border.primaryEmphasis';
+    borderColor = getColor({
+      theme,
+      variable: 'border.default',
+      dark: {
+        offset: -100
+      },
+      light: {
+        offset: 100
+      }
+    });
+    hoverBorderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+  }
+  const focusBorderColor = hoverBorderColor;
+  const buttonEdgeTarget = em(theme.space.sm, fontSize);
+  const iconButtonInset = (parseFloat(iconButtonSize) - parseFloat(theme.iconSizes.md)) / 2;
+  const iconButtonPaddingInline = `calc(${buttonEdgeTarget} - ${iconButtonInset}px)`;
+  return 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 && 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, 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 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 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 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.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.15.7'
+  '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), 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), componentStyles);
 
 export { StyledInputGroup };

package/dist/esm/styled/radio/StyledRadioHint.js

@@ -12,7 +12,7 @@ import { StyledHint } from '../common/StyledHint.js';
 const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"

package/dist/esm/styled/radio/StyledRadioInput.js

@@ -107,7 +107,7 @@ const sizeStyles$c = ({
 };
 const StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.15.7',
+  'data-garden-version': '9.16.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",

package/dist/esm/styled/radio/StyledRadioLabel.js

@@ -17,7 +17,7 @@ const sizeStyles$d = props => {
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.15.7',
+  'data-garden-version': '9.16.0',
   $isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",

package/dist/esm/styled/radio/StyledRadioMessage.js

@@ -12,7 +12,7 @@ import { StyledMessage } from '../common/StyledMessage.js';
 const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"

package/dist/esm/styled/radio/StyledRadioSvg.js

@@ -13,7 +13,7 @@ import { StyledRadioLabel } from './StyledRadioLabel.js';
 const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"

package/dist/esm/styled/range/StyledRangeInput.js

@@ -172,7 +172,7 @@ const sizeStyles$4 = ({
 };
 const StyledRangeInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.15.7',
+  'data-garden-version': '9.16.0',
   type: 'range',
   style: {
     backgroundSize: props.$hasLowerTrack ?? true ? props.$backgroundSize ?? '0%' : undefined

package/dist/esm/styled/select/StyledSelect.js

@@ -42,7 +42,7 @@ const sizeStyles$6 = ({
 };
 const StyledSelect = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.15.7',
+  'data-garden-version': '9.16.0',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",

package/dist/esm/styled/select/StyledSelectWrapper.js

@@ -19,7 +19,7 @@ const sizeStyles$5 = ({
 };
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"

package/dist/esm/styled/text/StyledTextFauxInput.js

@@ -56,7 +56,7 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   'aria-readonly': props.$isReadOnly,
   'aria-disabled': props.$isDisabled,
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"

package/dist/esm/styled/text/StyledTextInput.js

@@ -134,8 +134,8 @@ const sizeStyles$f = ({
   return css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-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, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, $isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, calendarPickerBackgroundSize, calendarPickerSize, calendarPickerSize, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, theme.space.base * ($isCompact ? 1 : 2));
 };
 const StyledTextInput = styled.input.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.15.7',
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$z,
+  'data-garden-version': '9.16.0',
   'aria-invalid': isInvalid(props.$validation)
 })).withConfig({
   displayName: "StyledTextInput",

package/dist/esm/styled/text/StyledTextMediaFigure.js

@@ -55,7 +55,7 @@ const sizeStyles$e = props => {
 };
 const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"

package/dist/esm/styled/text/StyledTextMediaInput.js

@@ -11,7 +11,7 @@ import { StyledTextInput } from './StyledTextInput.js';
 const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.15.7',
+  'data-garden-version': '9.16.0',
   $isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",

package/dist/esm/styled/text/StyledTextarea.js

@@ -21,7 +21,7 @@ const hiddenStyles = `
 const StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"

package/dist/esm/styled/tiles/StyledTile.js

@@ -100,7 +100,7 @@ const sizeStyles$3 = ({
 };
 const StyledTile = styled.label.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"

package/dist/esm/styled/tiles/StyledTileDescription.js

@@ -21,7 +21,7 @@ const sizeStyles$2 = ({
 };
 const StyledTileDescription = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"

package/dist/esm/styled/tiles/StyledTileIcon.js

@@ -63,7 +63,7 @@ const sizeStyles$1 = ({
 };
 const StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"

package/dist/esm/styled/tiles/StyledTileLabel.js

@@ -21,7 +21,7 @@ const sizeStyles = ({
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"

package/dist/esm/styled/toggle/StyledToggleHint.js

@@ -12,7 +12,7 @@ import { StyledHint } from '../common/StyledHint.js';
 const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"

package/dist/esm/styled/toggle/StyledToggleInput.js

@@ -51,7 +51,7 @@ const sizeStyles$7 = ({
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"

package/dist/esm/styled/toggle/StyledToggleLabel.js

@@ -16,7 +16,7 @@ const sizeStyles$8 = props => {
 };
 const StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"

package/dist/esm/styled/toggle/StyledToggleMessage.js

@@ -13,7 +13,7 @@ import { StyledMessageIcon } from '../common/StyledMessageIcon.js';
 const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"

package/dist/esm/styled/toggle/StyledToggleSvg.js

@@ -11,7 +11,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.15.7'
+  'data-garden-version': '9.16.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"

package/dist/esm/utils/useInputGroupContext.js

@@ -4,11 +4,62 @@
 * 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 { createContext, useContext } from 'react';
+import { createContext, useRef, useState, useCallback, useContext, useLayoutEffect } from 'react';
 
 const InputGroupContext = createContext(undefined);
 const useInputGroupContext = () => {
   return useContext(InputGroupContext);
 };
+const deriveValidation = map => {
+  let derived;
+  map.forEach(value => {
+    derived = value;
+  });
+  return derived;
+};
+const useInputGroupValidationState = () => {
+  const validationsRef = useRef(new Map());
+  const [validation, setValidation] = useState();
+  const registerValidation = 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 = useRef({});
+  const {
+    registerValidation,
+    isUnified
+  } = context || {};
+  useLayoutEffect(() => {
+    if (!registerValidation || !isUnified) {
+      return undefined;
+    }
+    const validationId = id.current;
+    registerValidation(validationId, validation);
+    return () => {
+      registerValidation(validationId, undefined);
+    };
+  }, [isUnified, registerValidation, validation]);
+};
 
-export { InputGroupContext, useInputGroupContext };
+export { InputGroupContext, useInputGroupContext, useInputGroupValidationState, usePublishInputGroupValidation };