@zendeskgarden/react-forms 9.0.0 → 9.1.1

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

@@ -59,7 +59,7 @@ const trackLowerStyles = function (styles) {
 const colorStyles = _ref => {
   let {
     theme,
-    hasLowerTrack
+    $hasLowerTrack
   } = _ref;
   const options = {
     theme,
@@ -109,18 +109,18 @@ const colorStyles = _ref => {
       offset: -200
     }
   });
-  const trackLowerBackgroundColor = hasLowerTrack ? thumbBackgroundColor : '';
-  const trackBackgroundImage = hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
+  const trackLowerBackgroundColor = $hasLowerTrack ? thumbBackgroundColor : '';
+  const trackBackgroundImage = $hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
   const trackDisabledBackgroundColor = getColor({
     theme,
     variable: 'background.disabled',
     transparency: theme.opacity[200]
   });
-  const trackDisabledLowerBackgroundColor = hasLowerTrack ? getColor({
+  const trackDisabledLowerBackgroundColor = $hasLowerTrack ? getColor({
     theme,
     variable: 'border.emphasis'
   }) : '';
-  const trackDisabledBackgroundImage = hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
+  const trackDisabledBackgroundImage = $hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
   return css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(`
       background-color: ${trackBackgroundColor};
       background-image: ${trackBackgroundImage}; /* [1] */
@@ -177,10 +177,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledRangeInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.1',
   type: 'range',
   style: {
-    backgroundSize: props.hasLowerTrack && props.backgroundSize
+    backgroundSize: props.$hasLowerTrack && props.$backgroundSize
   }
 })).withConfig({
   displayName: "StyledRangeInput",
@@ -202,8 +202,8 @@ const StyledRangeInput = styled.input.attrs(props => ({
       box-sizing: border-box;
     `), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledRangeInput.defaultProps = {
-  backgroundSize: '0%',
-  hasLowerTrack: true,
+  $backgroundSize: '0%',
+  $hasLowerTrack: true,
   theme: DEFAULT_THEME
 };
 

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

@@ -34,22 +34,22 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isBare,
-    isCompact
+    $isBare,
+    $isCompact
   } = _ref2;
-  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 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.0.0',
+  'data-garden-version': '9.1.1',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-8xdxpt-0"
-})(["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, colorStyles, props => getColor({
   theme: props.theme,
   variable: 'foreground.default'
 }), StyledTextMediaFigure);

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

@@ -13,14 +13,14 @@ const COMPONENT_ID = 'forms.select_wrapper';
 const sizeStyles = _ref => {
   let {
     theme,
-    isCompact
+    $isCompact
   } = _ref;
-  const height = `${theme.space.base * (isCompact ? 8 : 10)}px`;
+  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.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"

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

@@ -13,19 +13,19 @@ const COMPONENT_ID = 'forms.faux_input';
 const colorStyles = _ref => {
   let {
     theme,
-    validation,
-    focusInset,
-    isBare,
-    isFocused
+    $validation,
+    $focusInset,
+    $isBare,
+    $isFocused
   } = _ref;
   let borderVariable;
   let focusBorderColor;
-  if (validation) {
-    if (validation === 'success') {
+  if ($validation) {
+    if ($validation === 'success') {
       borderVariable = 'border.successEmphasis';
-    } else if (validation === 'warning') {
+    } else if ($validation === 'warning') {
       borderVariable = 'border.warningEmphasis';
-    } else if (validation === 'error') {
+    } else if ($validation === 'error') {
       borderVariable = 'border.dangerEmphasis';
     }
     focusBorderColor = getColor({
@@ -41,26 +41,26 @@ const colorStyles = _ref => {
   }
   return css(["", ""], focusStyles({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     color: {
       variable: borderVariable
     },
-    selector: isFocused ? '&' : '&:focus-within',
+    selector: $isFocused ? '&' : '&:focus-within',
     styles: {
       borderColor: focusBorderColor
     },
-    condition: !isBare
+    condition: !$isBare
   }));
 };
 const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   as: 'div',
-  'aria-readonly': props.isReadOnly,
-  'aria-disabled': props.isDisabled,
+  'aria-readonly': props.$isReadOnly,
+  'aria-disabled': props.$isDisabled,
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 })).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', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["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', props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledTextFauxInput };

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

@@ -21,16 +21,16 @@ const isInvalid = validation => {
 const colorStyles = _ref => {
   let {
     theme,
-    isBare,
-    isHovered,
-    focusInset,
-    validation
+    $isBare,
+    $isHovered,
+    $focusInset,
+    $validation
   } = _ref;
   const foregroundColor = getColor({
     theme,
     variable: 'foreground.default'
   });
-  const backgroundColor = isBare ? 'transparent' : getColor({
+  const backgroundColor = $isBare ? 'transparent' : getColor({
     theme,
     variable: 'background.default'
   });
@@ -38,12 +38,12 @@ const colorStyles = _ref => {
   let hoverBorderColor;
   let borderVariable;
   let focusBorderColor;
-  if (validation) {
-    if (validation === 'success') {
+  if ($validation) {
+    if ($validation === 'success') {
       borderVariable = 'border.successEmphasis';
-    } else if (validation === 'warning') {
+    } else if ($validation === 'warning') {
       borderVariable = 'border.warningEmphasis';
-    } else if (validation === 'error') {
+    } else if ($validation === 'error') {
       borderVariable = 'border.dangerEmphasis';
     }
     borderColor = getColor({
@@ -70,7 +70,7 @@ const colorStyles = _ref => {
     });
     focusBorderColor = hoverBorderColor;
   }
-  const disabledBackgroundColor = isBare ? undefined : getColor({
+  const disabledBackgroundColor = $isBare ? undefined : getColor({
     theme,
     variable: 'background.disabled'
   });
@@ -88,20 +88,20 @@ const colorStyles = _ref => {
     theme,
     variable: 'foreground.subtle'
   });
-  const calendarPickerIcon = renderToString( React__default.createElement(SvgChevronDownStroke, {
+  const calendarPickerIcon = renderToString(React__default.createElement(SvgChevronDownStroke, {
     color: calendarPickerColor
   }));
   const calendarPickerBackgroundImage = `url("data:image/svg+xml,${encodeURIComponent(calendarPickerIcon)}")`;
-  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{opacity:1;color:", ";}&::-webkit-datetime-edit{color:", ";}&::-webkit-calendar-picker-indicator{background-image:", ";}&[readonly],&[aria-readonly='true']{background-color:", ";}&:hover{border-color:", ";}", " &::-webkit-calendar-picker-indicator:focus-visible{", "}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, placeholderColor, placeholderColor, calendarPickerBackgroundImage, readOnlyBackgroundColor, hoverBorderColor, focusStyles({
+  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{opacity:1;color:", ";}&::-webkit-datetime-edit{color:", ";}&::-webkit-calendar-picker-indicator{background-image:", ";}&[readonly],&[aria-readonly='true']{background-color:", ";}&:hover{border-color:", ";}", " &::-webkit-calendar-picker-indicator:focus-visible{", "}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], $isHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, placeholderColor, placeholderColor, calendarPickerBackgroundImage, readOnlyBackgroundColor, hoverBorderColor, focusStyles({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     color: {
       variable: borderVariable
     },
     styles: {
       borderColor: focusBorderColor
     },
-    condition: !isBare
+    condition: !$isBare
   }), focusStyles({
     theme
   }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
@@ -109,8 +109,8 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isBare,
-    isCompact
+    $isBare,
+    $isCompact
   } = _ref2;
   const fontSize = theme.fontSizes.md;
   const paddingHorizontal = `${theme.space.base * 3}px`;
@@ -118,7 +118,7 @@ const sizeStyles = _ref2 => {
   let paddingVertical;
   let browseFontSize;
   let swatchHeight;
-  if (isCompact) {
+  if ($isCompact) {
     height = `${theme.space.base * 8}px`;
     paddingVertical = `${theme.space.base * 1.5}px`;
     browseFontSize = math(`${theme.fontSizes.sm} - 1`);
@@ -130,20 +130,20 @@ const sizeStyles = _ref2 => {
     swatchHeight = `${theme.space.base * 7}px`;
   }
   const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${theme.borderWidths.sm} * 2)`);
-  const padding = isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`;
+  const padding = $isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`;
   const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`);
   const swatchMarginHorizontal = math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
   const calendarPickerSize = `${theme.space.base * 5}px`;
   const calendarPickerBackgroundSize = theme.iconSizes.md;
-  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));
+  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.0.0',
-  'aria-invalid': isInvalid(props.validation)
+  'data-garden-version': '9.1.1',
+  '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, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["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, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledTextInput };

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

@@ -56,7 +56,7 @@ const sizeStyles = props => {
 };
 const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"

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

@@ -11,8 +11,8 @@ import { StyledTextInput } from './StyledTextInput.js';
 const COMPONENT_ID = 'forms.media_input';
 const StyledTextMediaInput = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0',
-  isBare: true
+  'data-garden-version': '9.1.1',
+  $isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
   componentId: "sc-12i9xfi-0"

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

@@ -21,10 +21,10 @@ const hiddenStyles = `
 const StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
-})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["resize:", ";overflow:auto;", ";", ";"], props => props.$isResizable ? 'vertical' : 'none', props => props.$isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledTextarea };

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

@@ -102,7 +102,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTile = styled.label.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledTile",
   componentId: "sc-1jjvmxs-0"

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

@@ -12,20 +12,20 @@ const COMPONENT_ID = 'forms.tile_description';
 const sizeStyles = _ref => {
   let {
     theme,
-    isCentered
+    $isCentered
   } = _ref;
   const marginTop = `${theme.space.base}px`;
-  const marginHorizontal = isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
+  const marginHorizontal = $isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
   const fontSize = theme.fontSizes.sm;
   const lineHeight = getLineHeight(theme.space.base * 4, fontSize);
   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.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
-})(["display:block;text-align:", ";", ";", ";"], props => props.isCentered && 'center', sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:block;text-align:", ";", ";", ";"], props => props.$isCentered && 'center', sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledTileDescription };

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

@@ -50,13 +50,13 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isCentered
+    $isCentered
   } = _ref2;
   const iconSize = math(`${theme.iconSizes.md} * 2`);
   let position;
   let top;
   let horizontal;
-  if (!isCentered) {
+  if (!$isCentered) {
     position = 'absolute';
     top = `${theme.space.base * 6}px`;
     horizontal = `${theme.space.base * 5}px`;
@@ -65,7 +65,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"

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

@@ -12,20 +12,20 @@ const COMPONENT_ID = 'forms.tile_label';
 const sizeStyles = _ref => {
   let {
     theme,
-    isCentered
+    $isCentered
   } = _ref;
-  const marginTop = isCentered ? `${theme.space.base * 2}px` : 0;
-  const marginHorizontal = isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
+  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;
   const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
   return css(["margin-top:", ";margin-", ":", ";line-height:", ";font-size:", ";"], marginTop, theme.rtl ? 'right' : 'left', marginHorizontal, lineHeight, fontSize);
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
-})(["display:block;text-align:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => props.theme.fontWeights.semibold, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:block;text-align:", ";font-weight:", ";", ";", ";"], props => props.$isCentered && 'center', props => props.theme.fontWeights.semibold, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledTileLabel };

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

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

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

@@ -53,7 +53,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"

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

@@ -16,7 +16,7 @@ const sizeStyles = props => {
 };
 const StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).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 = 'forms.toggle_message';
 const StyledToggleMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.1'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"

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

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