@zendeskgarden/react-forms 9.4.0 → 9.5.0

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

@@ -20,7 +20,7 @@ const sizeStyles = _ref => {
 };
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from './StyledTextInput.js';
 import { StyledTextMediaFigure } from './StyledTextMediaFigure.js';
 
@@ -57,10 +57,10 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   'aria-readonly': props.$isReadOnly,
   'aria-disabled': props.$isDisabled,
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 })).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', componentStyles);
 
 export { StyledTextFauxInput };

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

@@ -8,7 +8,7 @@ import React__default from 'react';
 import { renderToString } from 'react-dom/server';
 import styled, { css } from 'styled-components';
 import { math, em } from 'polished';
-import { retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 import { StyledHint } from '../common/StyledHint.js';
 import { StyledLabel } from '../common/StyledLabel.js';
@@ -139,11 +139,11 @@ const sizeStyles = _ref2 => {
 };
 const StyledTextInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.0',
   '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, componentStyles);
 
 export { StyledTextInput };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.media_figure';
 const colorStyles = _ref => {
@@ -56,10 +56,10 @@ const sizeStyles = props => {
 };
 const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["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);
 
 export { StyledTextMediaFigure };

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

@@ -5,17 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 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.4.0',
+  'data-garden-version': '9.5.0',
   $isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
   componentId: "sc-12i9xfi-0"
-})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex-grow:1;", ";"], componentStyles);
 
 export { StyledTextMediaInput };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from './StyledTextInput.js';
 
 const COMPONENT_ID = 'forms.textarea';
@@ -21,10 +21,10 @@ const hiddenStyles = `
 const StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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, componentStyles);
 
 export { StyledTextarea };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.tile';
 const colorStyles = _ref => {
@@ -102,10 +102,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledTile = styled.label.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["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);
 
 export { StyledTile };

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

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.tile_description';
 const sizeStyles = _ref => {
@@ -22,10 +22,10 @@ const sizeStyles = _ref => {
 };
 const StyledTileDescription = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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, componentStyles);
 
 export { StyledTileDescription };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import { StyledTile } from './StyledTile.js';
 
@@ -65,10 +65,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
-})(["display:block;transition:color 0.25s ease-in-out;text-align:center;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:block;transition:color 0.25s ease-in-out;text-align:center;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
 
 export { StyledTileIcon };

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

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.tile_label';
 const sizeStyles = _ref => {
@@ -22,10 +22,10 @@ const sizeStyles = _ref => {
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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, componentStyles);
 
 export { StyledTileLabel };

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

@@ -6,16 +6,16 @@
 */
 import styled from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 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.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), componentStyles);
 
 export { StyledToggleHint };

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

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledCheckInput } from '../checkbox/StyledCheckInput.js';
 import { StyledToggleLabel } from './StyledToggleLabel.js';
 
@@ -53,10 +53,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
-})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, sizeStyles, colorStyles, componentStyles);
 
 export { StyledToggleInput };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledCheckLabel } from '../checkbox/StyledCheckLabel.js';
 
 const COMPONENT_ID = 'forms.toggle_label';
@@ -16,10 +16,10 @@ const sizeStyles = props => {
 };
 const StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
-})(["", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";", ";"], props => sizeStyles(props), componentStyles);
 
 export { StyledToggleLabel };

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

@@ -6,17 +6,17 @@
 */
 import styled from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledMessage } from '../common/StyledMessage.js';
 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.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
-})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), componentStyles);
 
 export { StyledToggleMessage };

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

@@ -6,15 +6,15 @@
 */
 import styled from 'styled-components';
 import SvgCircleSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/16/circle-sm-fill.svg.js';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.toggle_svg';
 const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
-})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["transition:all 0.15s ease-in-out;", ";"], componentStyles);
 
 export { StyledToggleSvg };