@zendeskgarden/react-forms 9.0.0 → 9.1.0

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

@@ -0,0 +1,78 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
+import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
+import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
+import '../../styled/common/StyledField.js';
+import '../../styled/common/StyledFieldset.js';
+import '../../styled/common/StyledLegend.js';
+import '../../styled/common/StyledHint.js';
+import '../../styled/common/StyledLabel.js';
+import '../../styled/common/StyledMessage.js';
+import { StyledMessageIcon } from '../../styled/common/StyledMessageIcon.js';
+import '../../styled/text/StyledTextInput.js';
+import '../../styled/text/StyledTextarea.js';
+import '../../styled/text/StyledTextFauxInput.js';
+import '../../styled/text/StyledTextMediaInput.js';
+import '../../styled/text/StyledTextMediaFigure.js';
+import '../../styled/input-group/StyledInputGroup.js';
+import '../../styled/checkbox/StyledCheckLabel.js';
+import '../../styled/checkbox/StyledCheckHint.js';
+import '../../styled/checkbox/StyledCheckInput.js';
+import '../../styled/checkbox/StyledCheckMessage.js';
+import '../../styled/checkbox/StyledCheckSvg.js';
+import '../../styled/checkbox/StyledDashSvg.js';
+import '../../styled/file-upload/StyledFileUpload.js';
+import '../../styled/file-list/StyledFile.js';
+import '../../styled/file-list/StyledFileClose.js';
+import '../../styled/file-list/StyledFileDelete.js';
+import '../../styled/file-list/StyledFileIcon.js';
+import '../../styled/file-list/StyledFileList.js';
+import '../../styled/file-list/StyledFileListItem.js';
+import '../../styled/radio/StyledRadioLabel.js';
+import '../../styled/radio/StyledRadioHint.js';
+import '../../styled/radio/StyledRadioInput.js';
+import '../../styled/radio/StyledRadioMessage.js';
+import '../../styled/radio/StyledRadioSvg.js';
+import '../../styled/toggle/StyledToggleLabel.js';
+import '../../styled/toggle/StyledToggleHint.js';
+import '../../styled/toggle/StyledToggleInput.js';
+import '../../styled/toggle/StyledToggleMessage.js';
+import '../../styled/toggle/StyledToggleSvg.js';
+import '../../styled/select/StyledSelect.js';
+import '../../styled/select/StyledSelectWrapper.js';
+import '../../styled/range/StyledRangeInput.js';
+import '../../styled/tiles/StyledTile.js';
+import '../../styled/tiles/StyledTileDescription.js';
+import '../../styled/tiles/StyledTileIcon.js';
+import '../../styled/tiles/StyledTileInput.js';
+import '../../styled/tiles/StyledTileLabel.js';
+import { VALIDATION } from '../../types/index.js';
+
+const MessageIcon = _ref => {
+  let {
+    validation,
+    children,
+    ...props
+  } = _ref;
+  return  React__default.createElement(StyledMessageIcon, Object.assign({
+    "aria-hidden": null,
+    role: "img"
+  }, props), validation ? {
+    error: React__default.createElement(SvgAlertErrorStroke, null),
+    success: React__default.createElement(SvgCheckCircleStroke, null),
+    warning: React__default.createElement(SvgAlertWarningStroke, null)
+  }[validation] : children);
+};
+MessageIcon.displayName = 'Field.MessageIcon';
+MessageIcon.propTypes = {
+  validation: PropTypes.oneOf(VALIDATION)
+};
+
+export { MessageIcon };

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

@@ -57,12 +57,18 @@ import { EndIcon } from './components/EndIcon.js';
 
 const FauxInputComponent = forwardRef((_ref, ref) => {
   let {
-    onFocus,
-    onBlur,
     disabled,
-    readOnly,
+    focusInset,
+    isBare,
+    isCompact,
     isFocused: controlledIsFocused,
-    ...props
+    isHovered,
+    onBlur,
+    onFocus,
+    readOnly,
+    validation,
+    mediaLayout,
+    ...other
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const onFocusHandler = composeEventHandlers(onFocus, () => {
@@ -74,11 +80,17 @@ const FauxInputComponent = forwardRef((_ref, ref) => {
   return React__default.createElement(StyledTextFauxInput, Object.assign({
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
-    isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
-    isReadOnly: readOnly,
-    isDisabled: disabled,
+    $focusInset: focusInset,
+    $isBare: isBare,
+    $isCompact: isCompact,
+    $isDisabled: disabled,
+    $isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
+    $isHovered: isHovered,
+    $isReadOnly: readOnly,
+    $mediaLayout: mediaLayout,
+    $validation: validation,
     tabIndex: disabled ? undefined : 0
-  }, props, {
+  }, other, {
     ref: ref
   }));
 });

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

@@ -72,9 +72,9 @@ const FileComponent = forwardRef((_ref, ref) => {
   return React__default.createElement(FileContext.Provider, {
     value: fileContextValue
   }, React__default.createElement(StyledFile, Object.assign({}, props, {
-    isCompact: isCompact,
-    focusInset: focusInset,
-    validation: validation,
+    $isCompact: isCompact,
+    $focusInset: focusInset,
+    $validation: validation,
     ref: ref
   }), !!validationType && React__default.createElement(StyledFileIcon, {
     $isCompact: isCompact,

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

@@ -55,7 +55,7 @@ import '../../styled/tiles/StyledTileLabel.js';
 const InputGroup = React__default.forwardRef((_ref, ref) => {
   let {
     isCompact,
-    ...props
+    ...other
   } = _ref;
   const contextValue = useMemo(() => ({
     isCompact
@@ -64,8 +64,8 @@ const InputGroup = React__default.forwardRef((_ref, ref) => {
     value: contextValue
   }, React__default.createElement(StyledInputGroup, Object.assign({
     ref: ref,
-    isCompact: isCompact
-  }, props)));
+    $isCompact: isCompact
+  }, other)));
 });
 InputGroup.displayName = 'InputGroup';
 InputGroup.propTypes = {

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

@@ -55,7 +55,7 @@ const DescriptionComponent = forwardRef((props, ref) => {
   const tilesContext = useTilesContext();
   return React__default.createElement(StyledTileDescription, Object.assign({
     ref: ref,
-    isCentered: tilesContext?.isCentered
+    $isCentered: tilesContext?.isCentered
   }, props));
 });
 DescriptionComponent.displayName = 'Tiles.Description';

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

@@ -55,7 +55,7 @@ const IconComponent = forwardRef((props, ref) => {
   const tileContext = useTilesContext();
   return React__default.createElement(StyledTileIcon, Object.assign({
     ref: ref,
-    isCentered: tileContext?.isCentered
+    $isCentered: tileContext?.isCentered
   }, props));
 });
 IconComponent.displayName = 'Tiles.Icon';

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

@@ -64,7 +64,7 @@ const LabelComponent = forwardRef((props, forwardedRef) => {
   return React__default.createElement(StyledTileLabel, Object.assign({
     ref: mergeRefs([ref, forwardedRef]),
     title: title,
-    isCentered: tilesContext?.isCentered
+    $isCentered: tilesContext?.isCentered
   }, props));
 });
 LabelComponent.displayName = 'Tiles.Label';

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

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

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

@@ -65,7 +65,7 @@ const colorStyles = _ref => {
 };
 const StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0',
+  'data-garden-version': '9.1.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",

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

@@ -11,7 +11,7 @@ import { StyledRadioLabel } from '../radio/StyledRadioLabel.js';
 const COMPONENT_ID = 'forms.checkbox_label';
 const StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.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 = 'forms.checkbox_message';
 const StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.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 = 'forms.check_svg';
 const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.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 = 'forms.dash_svg';
 const StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"

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

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

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

@@ -12,10 +12,10 @@ const COMPONENT_ID = 'forms.fieldset';
 const StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
-})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.$isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledFieldset };

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

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

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

@@ -11,13 +11,13 @@ import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden
 const COMPONENT_ID = 'forms.input_label';
 const StyledLabel = styled.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0'
+  'data-garden-version': props['data-garden-version'] || '9.1.0'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
 })(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor({
   theme: props.theme,
   variable: 'foreground.default'
-}), props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+}), props => props.theme.fontSizes.md, props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.$isRadio ? 'inline-block' : 'inline', props => props.$isRadio && 'top', props => props.$isRadio && '-100%', props => props.$isRadio && '0', props => !props.$isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledLabel };

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

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

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

@@ -14,14 +14,14 @@ const COMPONENT_ID = 'forms.input_message';
 const colorStyles = _ref => {
   let {
     theme,
-    validation
+    $validation
   } = _ref;
   let variable;
-  if (validation === 'error') {
+  if ($validation === 'error') {
     variable = 'foreground.danger';
-  } else if (validation === 'success') {
+  } else if ($validation === 'success') {
     variable = 'foreground.success';
-  } else if (validation === 'warning') {
+  } else if ($validation === 'warning') {
     variable = 'foreground.warning';
   } else {
     variable = 'foreground.subtle';
@@ -35,17 +35,17 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    validation
+    $validation
   } = _ref2;
   const fontSize = theme.fontSizes.sm;
   const lineHeight = getLineHeight(theme.iconSizes.md, theme.fontSizes.sm);
   const marginTop = `${theme.space.base}px`;
-  const paddingHorizontal = validation ? math(`${theme.space.base * 2} + ${theme.iconSizes.md}`) : undefined;
+  const paddingHorizontal = $validation ? math(`${theme.space.base * 2} + ${theme.iconSizes.md}`) : undefined;
   return css(["padding-", ":", ";line-height:", ";font-size:", ";", ":not([hidden]) + &{margin-top:", ";}"], theme.rtl ? 'right' : 'left', paddingHorizontal, lineHeight, fontSize, StyledLabel, marginTop);
 };
 const StyledMessage = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0'
+  'data-garden-version': props['data-garden-version'] || '9.1.0'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"

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

@@ -5,36 +5,12 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import React__default, { Children } from 'react';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
-import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
-import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
-import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
+import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
-const MessageIcon = _ref => {
-  let {
-    children,
-    validation,
-    ...props
-  } = _ref;
-  let retVal;
-  if (validation === 'error') {
-    retVal = React__default.createElement(SvgAlertErrorStroke, props);
-  } else if (validation === 'success') {
-    retVal = React__default.createElement(SvgCheckCircleStroke, props);
-  } else if (validation === 'warning') {
-    retVal = React__default.createElement(SvgAlertWarningStroke, props);
-  } else {
-    retVal = React__default.cloneElement(Children.only(children));
-  }
-  return retVal;
-};
 const COMPONENT_ID = 'forms.input_message_icon';
-const StyledMessageIcon = styled(MessageIcon).attrs({
+const StyledMessageIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0',
-  'aria-hidden': null,
-  role: 'img'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"

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

@@ -12,17 +12,17 @@ const COMPONENT_ID = 'forms.file';
 const colorStyles = _ref => {
   let {
     theme,
-    focusInset,
-    validation
+    $focusInset,
+    $validation
   } = _ref;
   let borderVariable;
   let focusBorderVariable;
   let foregroundVariable;
-  if (validation === 'success') {
+  if ($validation === 'success') {
     borderVariable = 'border.successEmphasis';
     focusBorderVariable = borderVariable;
     foregroundVariable = 'foreground.success';
-  } else if (validation === 'error') {
+  } else if ($validation === 'error') {
     borderVariable = 'border.dangerEmphasis';
     focusBorderVariable = borderVariable;
     foregroundVariable = 'foreground.danger';
@@ -45,7 +45,7 @@ const colorStyles = _ref => {
   });
   return css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({
     theme,
-    inset: focusInset,
+    inset: $focusInset,
     color: {
       variable: focusBorderVariable
     },
@@ -57,10 +57,10 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isCompact
+    $isCompact
   } = _ref2;
-  const size = `${theme.space.base * (isCompact ? 7 : 10)}px`;
-  const spacing = `${theme.space.base * (isCompact ? 2 : 3)}px`;
+  const size = `${theme.space.base * ($isCompact ? 7 : 10)}px`;
+  const spacing = `${theme.space.base * ($isCompact ? 2 : 3)}px`;
   const fontSize = theme.fontSizes.md;
   const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
   return `
@@ -85,7 +85,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"

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

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.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 = 'forms.file.delete';
 const StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"

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

@@ -30,7 +30,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledFileIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'forms.file_list';
 const StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.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 = 'forms.file_list.item';
 const StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"

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

@@ -15,7 +15,7 @@ const COMPONENT_ID = 'forms.file_upload';
 const colorStyles = _ref => {
   let {
     theme,
-    isDragging
+    $isDragging
   } = _ref;
   const borderOptions = {
     theme,
@@ -86,25 +86,25 @@ const colorStyles = _ref => {
     theme,
     variable: 'foreground.disabled'
   });
-  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isDragging ? activeBorderColor : borderColor, isDragging ? activeBackgroundColor : undefined, isDragging ? activeForegroundColor : foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], $isDragging ? activeBorderColor : borderColor, $isDragging ? activeBackgroundColor : undefined, $isDragging ? activeForegroundColor : foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
     theme
   }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isCompact
+    $isCompact
   } = _ref2;
-  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
-  const paddingHorizontal = `${isCompact ? 2 : 4}em`;
-  const paddingVertical = math(`${theme.space.base * (isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}`);
+  const marginTop = `${theme.space.base * ($isCompact ? 1 : 2)}px`;
+  const paddingHorizontal = `${$isCompact ? 2 : 4}em`;
+  const paddingVertical = math(`${theme.space.base * ($isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}`);
   const fontSize = theme.fontSizes.md;
   const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
   return css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"

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

@@ -13,7 +13,7 @@ import { StyledMessage } from '../common/StyledMessage.js';
 
 const COMPONENT_ID = 'forms.input_group';
 const positionStyles = props => {
-  const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  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);
 };
 const itemStyles = props => {
@@ -23,7 +23,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"

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

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

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

@@ -96,7 +96,7 @@ const colorStyles = _ref => {
 const sizeStyles = _ref2 => {
   let {
     theme,
-    isCompact
+    $isCompact
   } = _ref2;
   const lineHeight = `${theme.space.base * 5}px`;
   const size = `${theme.space.base * 4}px`;
@@ -104,12 +104,12 @@ const sizeStyles = _ref2 => {
   const iconSize = theme.iconSizes.sm;
   const iconPosition = math(`(${size} - ${iconSize}) / 2`);
   const iconTop = math(`${iconPosition} + ${top}`);
-  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  const marginTop = `${theme.space.base * ($isCompact ? 1 : 2)}px`;
   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.0.0',
+  'data-garden-version': '9.1.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",

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

@@ -17,8 +17,8 @@ const sizeStyles = props => {
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0',
-  isRadio: true
+  'data-garden-version': '9.1.0',
+  $isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
   componentId: "sc-1aq2e5t-0"

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

@@ -12,7 +12,7 @@ import { StyledMessage } from '../common/StyledMessage.js';
 const COMPONENT_ID = 'forms.radio_message';
 const StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.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 = 'forms.radio_svg';
 const StyledRadioSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"