@zendeskgarden/react-forms 9.12.3 → 9.12.4

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

@@ -10,11 +10,10 @@ import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-the
 import { StyledRadioLabel } from './StyledRadioLabel.js';
 import { StyledMessage } from '../common/StyledMessage.js';
 
-const COMPONENT_ID = 'forms.radio';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$p = 'forms.radio';
+const colorStyles$9 = ({
+  theme
+}) => {
   const borderColor = getColor({
     theme,
     variable: 'border.emphasis'
@@ -93,11 +92,10 @@ const colorStyles = _ref => {
     selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
   }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isCompact
-  } = _ref2;
+const sizeStyles$c = ({
+  theme,
+  $isCompact
+}) => {
   const lineHeight = `${theme.space.base * 5}px`;
   const size = `${theme.space.base * 4}px`;
   const top = math(`(${lineHeight} - ${size}) / 2`);
@@ -108,12 +106,12 @@ const sizeStyles = _ref2 => {
   return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";border:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, theme.borders.sm, theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
 };
 const StyledRadioInput = styled.input.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$p,
+  'data-garden-version': '9.12.4',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
   componentId: "sc-qsavpv-0"
-})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', StyledRadioLabel, sizeStyles, StyledRadioLabel, StyledRadioLabel, colorStyles, StyledRadioLabel, componentStyles);
+})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', StyledRadioLabel, sizeStyles$c, StyledRadioLabel, StyledRadioLabel, colorStyles$9, StyledRadioLabel, componentStyles);
 
 export { StyledRadioInput };

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

@@ -8,20 +8,20 @@ import styled, { css } from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledLabel } from '../common/StyledLabel.js';
 
-const COMPONENT_ID = 'forms.radio_label';
-const sizeStyles = props => {
+const COMPONENT_ID$t = 'forms.radio_label';
+const sizeStyles$d = props => {
   const size = props.theme.space.base * 4;
   const padding = size + props.theme.space.base * 2;
   const lineHeight = props.theme.space.base * 5;
   return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight);
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$t,
+  'data-garden-version': '9.12.4',
   $isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
   componentId: "sc-1aq2e5t-0"
-})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles(props), componentStyles);
+})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), componentStyles);
 
 export { StyledRadioLabel };

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

@@ -9,10 +9,10 @@ import { math } from 'polished';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledMessage } from '../common/StyledMessage.js';
 
-const COMPONENT_ID = 'forms.radio_message';
+const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled(StyledMessage).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$n,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"

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

@@ -10,10 +10,10 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledRadioInput } from './StyledRadioInput.js';
 import { StyledRadioLabel } from './StyledRadioLabel.js';
 
-const COMPONENT_ID = 'forms.radio_svg';
+const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled(SvgCircleSmFill).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"

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

@@ -11,9 +11,8 @@ import { StyledHint } from '../common/StyledHint.js';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledMessage } from '../common/StyledMessage.js';
 
-const COMPONENT_ID = 'forms.range';
-const thumbStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const COMPONENT_ID$4 = 'forms.range';
+const thumbStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-thumb {
       ${styles}
@@ -28,8 +27,7 @@ const thumbStyles = function (styles) {
     }
   `;
 };
-const trackStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const trackStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-track {
       ${styles}
@@ -44,8 +42,7 @@ const trackStyles = function (styles) {
     }
   `;
 };
-const trackLowerStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const trackLowerStyles = (styles, modifier = '') => {
   return `
     &${modifier}::-moz-range-progress {
       ${styles}
@@ -56,11 +53,10 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles = _ref => {
-  let {
-    theme,
-    $hasLowerTrack = true
-  } = _ref;
+const colorStyles$2 = ({
+  theme,
+  $hasLowerTrack = true
+}) => {
   const options = {
     theme,
     variable: 'background.primaryEmphasis'
@@ -152,10 +148,9 @@ const colorStyles = _ref => {
         background-color: ${trackDisabledLowerBackgroundColor};
       `, ':disabled'));
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const sizeStyles$4 = ({
+  theme
+}) => {
   const thumbSize = `${theme.space.base * 5}px`;
   const trackHeight = `${theme.space.base * 1.5}px`;
   const trackBorderRadius = trackHeight;
@@ -176,8 +171,8 @@ const sizeStyles = _ref2 => {
     `));
 };
 const StyledRangeInput = styled.input.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.12.4',
   type: 'range',
   style: {
     backgroundSize: props.$hasLowerTrack ?? true ? props.$backgroundSize ?? '0%' : undefined
@@ -194,12 +189,12 @@ const StyledRangeInput = styled.input.attrs(props => ({
       width: 99.8%; /* fix for IE which cuts off the upper track's border radius */
       color: transparent; /* reset for IE */
       box-sizing: border-box; /* reset for IE */
-    `), sizeStyles, props => thumbStyles(`
+    `), sizeStyles$4, props => thumbStyles(`
       appearance: none;
       transition: box-shadow .1s ease-in-out;
       border: ${props.theme.borders.md};
       border-radius: 100%;
       box-sizing: border-box;
-    `), colorStyles, componentStyles);
+    `), colorStyles$2, componentStyles);
 
 export { StyledRangeInput };

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

@@ -10,11 +10,10 @@ import { getColor } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from '../text/StyledTextInput.js';
 import { StyledTextMediaFigure } from '../text/StyledTextMediaFigure.js';
 
-const COMPONENT_ID = 'forms.select';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$6 = 'forms.select';
+const colorStyles$3 = ({
+  theme
+}) => {
   const color = getColor({
     theme,
     variable: 'foreground.subtle',
@@ -31,25 +30,24 @@ const colorStyles = _ref => {
   });
   return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}&:disabled + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color, StyledTextMediaFigure, disabledColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isBare,
-    $isCompact
-  } = _ref2;
+const sizeStyles$6 = ({
+  theme,
+  $isBare,
+  $isCompact
+}) => {
   const padding = $isBare ? undefined : math(`${theme.iconSizes.md} + ${theme.space.base * 5}`);
   const iconVerticalPosition = `${theme.space.base * ($isCompact ? 1.5 : 2.5) + 1}px`;
   const iconHorizontalPosition = `${theme.space.base * 3}px`;
   return css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], theme.rtl ? 'left' : 'right', padding, StyledTextMediaFigure, iconVerticalPosition, theme.rtl ? 'left' : 'right', iconHorizontalPosition);
 };
 const StyledSelect = styled(StyledTextInput).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.12.4',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-8xdxpt-0"
-})(["opacity:1;cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], sizeStyles, colorStyles, props => getColor({
+})(["opacity:1;cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], sizeStyles$6, colorStyles$3, props => getColor({
   theme: props.theme,
   variable: 'foreground.default'
 }), StyledTextMediaFigure);

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

@@ -9,21 +9,20 @@ import { SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming';
 import { StyledTextFauxInput } from '../text/StyledTextFauxInput.js';
 import { StyledSelect } from './StyledSelect.js';
 
-const COMPONENT_ID = 'forms.select_wrapper';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    $isCompact
-  } = _ref;
+const COMPONENT_ID$5 = 'forms.select_wrapper';
+const sizeStyles$5 = ({
+  theme,
+  $isCompact
+}) => {
   const height = `${theme.space.base * ($isCompact ? 8 : 10)}px`;
   return css(["max-height:", ";"], height);
 };
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
-})(["position:relative;padding:0;overflow:visible;", ";& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], sizeStyles, StyledSelect, SELECTOR_FOCUS_VISIBLE);
+})(["position:relative;padding:0;overflow:visible;", ";& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], sizeStyles$5, StyledSelect, SELECTOR_FOCUS_VISIBLE);
 
 export { StyledSelectWrapper };

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

@@ -9,15 +9,14 @@ import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles } from '
 import { StyledTextInput } from './StyledTextInput.js';
 import { StyledTextMediaFigure } from './StyledTextMediaFigure.js';
 
-const COMPONENT_ID = 'forms.faux_input';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $validation,
-    $focusInset,
-    $isBare,
-    $isFocused
-  } = _ref;
+const COMPONENT_ID$w = 'forms.faux_input';
+const colorStyles$a = ({
+  theme,
+  $validation,
+  $focusInset,
+  $isBare,
+  $isFocused
+}) => {
   let borderVariable;
   let focusBorderColor;
   if ($validation) {
@@ -56,11 +55,11 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   as: 'div',
   'aria-readonly': props.$isReadOnly,
   'aria-disabled': props.$isDisabled,
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$w,
+  'data-garden-version': '9.12.4'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
-})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;", " & > ", "{vertical-align:", ";", "{box-shadow:unset;}}& > ", "{flex-shrink:", ";}", ";"], props => props.$mediaLayout ? 'inline-flex' : 'inline-block', props => props.$mediaLayout && 'baseline', props => props.$mediaLayout && !props.$isDisabled ? 'text' : 'default', colorStyles, StyledTextInput, props => !props.$mediaLayout && 'baseline', SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.$mediaLayout && '0', componentStyles);
+})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;", " & > ", "{vertical-align:", ";", "{box-shadow:unset;}}& > ", "{flex-shrink:", ";}", ";"], props => props.$mediaLayout ? 'inline-flex' : 'inline-block', props => props.$mediaLayout && 'baseline', props => props.$mediaLayout && !props.$isDisabled ? 'text' : 'default', colorStyles$a, StyledTextInput, props => !props.$mediaLayout && 'baseline', SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.$mediaLayout && '0', componentStyles);
 
 export { StyledTextFauxInput };

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

@@ -6,23 +6,22 @@
 */
 import styled, { css } from 'styled-components';
 import { math, em } from 'polished';
-import { componentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledHint } from '../common/StyledHint.js';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledMessage } from '../common/StyledMessage.js';
 
-const COMPONENT_ID = 'forms.input';
+const COMPONENT_ID$z = 'forms.input';
 const isInvalid = validation => {
   return validation === 'warning' || validation === 'error';
 };
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isBare,
-    $isHovered,
-    $focusInset,
-    $validation
-  } = _ref;
+const colorStyles$c = ({
+  theme,
+  $isBare,
+  $isHovered,
+  $focusInset,
+  $validation
+}) => {
   const foregroundColor = getColor({
     theme,
     variable: 'foreground.default'
@@ -104,12 +103,11 @@ const colorStyles = _ref => {
     theme
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isBare,
-    $isCompact
-  } = _ref2;
+const sizeStyles$f = ({
+  theme,
+  $isBare,
+  $isCompact
+}) => {
   const fontSize = theme.fontSizes.md;
   const paddingHorizontal = `${theme.space.base * 3}px`;
   let height;
@@ -136,12 +134,12 @@ const sizeStyles = _ref2 => {
   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,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$z,
+  'data-garden-version': '9.12.4',
   'aria-invalid': isInvalid(props.$validation)
 })).withConfig({
   displayName: "StyledTextInput",
   componentId: "sc-1r6733h-0"
-})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::-webkit-calendar-picker-indicator{border-radius:100%;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, componentStyles);
+})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::-webkit-calendar-picker-indicator{border-radius:100%;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', sizeStyles$f, colorStyles$c, componentStyles);
 
 export { StyledTextInput };

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

@@ -7,14 +7,13 @@
 import styled, { css } from 'styled-components';
 import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'forms.media_figure';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isDisabled,
-    $isHovered,
-    $isFocused
-  } = _ref;
+const COMPONENT_ID$x = 'forms.media_figure';
+const colorStyles$b = ({
+  theme,
+  $isDisabled,
+  $isHovered,
+  $isFocused
+}) => {
   let color;
   if ($isDisabled) {
     color = getColor({
@@ -42,7 +41,7 @@ const colorStyles = _ref => {
   }
   return css(["color:", ";"], color);
 };
-const sizeStyles = props => {
+const sizeStyles$e = props => {
   const size = props.theme.iconSizes.md;
   const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
   const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
@@ -55,11 +54,11 @@ const sizeStyles = props => {
   return css(["margin:", ";width:", ";height:", ";"], margin, size, size);
 };
 const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$x,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles, colorStyles, componentStyles);
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$e, colorStyles$b, componentStyles);
 
 export { StyledTextMediaFigure };

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

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from './StyledTextInput.js';
 
-const COMPONENT_ID = 'forms.media_input';
+const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled(StyledTextInput).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$v,
+  'data-garden-version': '9.12.4',
   $isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",

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

@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from './StyledTextInput.js';
 
-const COMPONENT_ID = 'forms.textarea';
+const COMPONENT_ID$y = 'forms.textarea';
 const hiddenStyles = `
   visibility: hidden;
   position: absolute;
@@ -20,8 +20,8 @@ const hiddenStyles = `
 `;
 const StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$y,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"

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

@@ -7,11 +7,10 @@
 import styled, { css } from 'styled-components';
 import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'forms.tile';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$3 = 'forms.tile';
+const colorStyles$1 = ({
+  theme
+}) => {
   const offset100 = {
     dark: {
       offset: -100
@@ -92,20 +91,19 @@ const colorStyles = _ref => {
     }
   }), activeBorderColor, activeBackgroundColor, checkedBackgroundColor, checkedForegroundColor, checkedHoverBackgroundColor, checkedActiveBackgroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme
-  } = _ref2;
+const sizeStyles$3 = ({
+  theme
+}) => {
   const border = theme.borders.sm;
   const padding = `${theme.space.base * 5}px`;
   return css(["border:", ";padding:", ";min-width:132px;"], border, padding);
 };
 const StyledTile = styled.label.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"
-})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";direction:", ";word-break:break-word;", ";", ";", ";"], props => props.theme.borderRadii.md, props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, componentStyles);
+})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";direction:", ";word-break:break-word;", ";", ";", ";"], props => props.theme.borderRadii.md, props => props.theme.rtl && 'rtl', sizeStyles$3, colorStyles$1, componentStyles);
 
 export { StyledTile };

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

@@ -8,12 +8,11 @@ import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'forms.tile_description';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    $isCentered
-  } = _ref;
+const COMPONENT_ID$2 = 'forms.tile_description';
+const sizeStyles$2 = ({
+  theme,
+  $isCentered
+}) => {
   const marginTop = `${theme.space.base}px`;
   const marginHorizontal = $isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
   const fontSize = theme.fontSizes.sm;
@@ -21,11 +20,11 @@ const sizeStyles = _ref => {
   return css(["margin-top:", ";margin-", ":", ";line-height:", ";font-size:", ";"], marginTop, theme.rtl ? 'right' : 'left', marginHorizontal, lineHeight, fontSize);
 };
 const StyledTileDescription = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
-})(["display:block;text-align:", ";", ";", ";"], props => props.$isCentered && 'center', sizeStyles, componentStyles);
+})(["display:block;text-align:", ";", ";", ";"], props => props.$isCentered && 'center', sizeStyles$2, componentStyles);
 
 export { StyledTileDescription };

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

@@ -9,11 +9,10 @@ import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { StyledTile } from './StyledTile.js';
 
-const COMPONENT_ID = 'forms.tile_icon';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$1 = 'forms.tile_icon';
+const colorStyles = ({
+  theme
+}) => {
   const options = {
     theme,
     variable: 'foreground.subtle'
@@ -47,11 +46,10 @@ const colorStyles = _ref => {
   });
   return css(["color:", ";", ":hover &&{color:", ";}", ":active &&{color:", ";}", ":has(:checked) &&{color:", ";}", "[aria-disabled='true'] &&{color:", ";}"], color, StyledTile, hoverColor, StyledTile, activeColor, StyledTile, checkedColor, StyledTile, disabledColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isCentered
-  } = _ref2;
+const sizeStyles$1 = ({
+  theme,
+  $isCentered
+}) => {
   const iconSize = math(`${theme.iconSizes.md} * 2`);
   let position;
   let top;
@@ -64,11 +62,11 @@ const sizeStyles = _ref2 => {
   return css(["position:", ";top:", ";", ":", ";line-height:0;& > *{width:", ";height:", ";}"], position, top, theme.rtl ? 'right' : 'left', horizontal, iconSize, iconSize);
 };
 const StyledTileIcon = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
-})(["display:block;transition:color 0.25s ease-in-out;text-align:center;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
+})(["display:block;transition:color 0.25s ease-in-out;text-align:center;", ";", ";", ";"], sizeStyles$1, colorStyles, componentStyles);
 
 export { StyledTileIcon };

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

@@ -9,11 +9,10 @@ import { math } from 'polished';
 import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.tile_label';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    $isCentered
-  } = _ref;
+const sizeStyles = ({
+  theme,
+  $isCentered
+}) => {
   const marginTop = $isCentered ? `${theme.space.base * 2}px` : 0;
   const marginHorizontal = $isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
   const fontSize = theme.fontSizes.md;
@@ -22,7 +21,7 @@ const sizeStyles = _ref => {
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"

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

@@ -9,10 +9,10 @@ import { math } from 'polished';
 import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledHint } from '../common/StyledHint.js';
 
-const COMPONENT_ID = 'forms.toggle_hint';
+const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled(StyledHint).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"