@zendeskgarden/react-forms 9.0.0-next.12 → 9.0.0-next.14

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

@@ -5,17 +5,42 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.media_figure';
-const colorStyles = props => {
-  let shade = 600;
-  if (props.$isDisabled) {
-    shade = 400;
-  } else if (props.$isHovered || props.$isFocused) {
-    shade = 700;
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isDisabled,
+    $isHovered,
+    $isFocused
+  } = _ref;
+  let color;
+  if ($isDisabled) {
+    color = getColor({
+      theme,
+      variable: 'foreground.disabled'
+    });
+  } else {
+    const options = {
+      theme,
+      variable: 'foreground.subtle'
+    };
+    if ($isHovered || $isFocused) {
+      color = getColor({
+        ...options,
+        dark: {
+          offset: -100
+        },
+        light: {
+          offset: 100
+        }
+      });
+    } else {
+      color = getColor(options);
+    }
   }
-  return css(["color:", ";"], getColorV8('neutralHue', shade, props.theme));
+  return css(["color:", ";"], color);
 };
 const sizeStyles = props => {
   const size = props.theme.iconSizes.md;
@@ -31,11 +56,11 @@ const sizeStyles = props => {
 };
 const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).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)`, props => colorStyles(props), props => sizeStyles(props), 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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTextMediaFigure.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -11,7 +11,7 @@ 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-next.12',
+  'data-garden-version': '9.0.0-next.14',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",

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

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

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

@@ -5,49 +5,108 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
-import { StyledTileIcon } from './StyledTileIcon.js';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.tile';
-const colorStyles = props => {
-  const SHADE = 600;
-  const iconColor = getColorV8('neutralHue', SHADE, props.theme);
-  const color = getColorV8('neutralHue', SHADE + 200, props.theme);
-  const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
-  const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2);
-  const activeBorderColor = focusBorderColor;
-  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  const disabledColor = getColorV8('neutralHue', SHADE - 200, props.theme);
-  const selectedBorderColor = focusBorderColor;
-  const selectedBackgroundColor = selectedBorderColor;
-  const selectedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const selectedHoverBackgroundColor = selectedHoverBorderColor;
-  const selectedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme);
-  const selectedActiveBackgroundColor = selectedActiveBorderColor;
-  const selectedDisabledBackgroundColor = disabledBorderColor;
-  return css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}", " &:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, getColorV8('neutralHue', SHADE - 300, props.theme), borderColor, getColorV8('background', 600 , props.theme), color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusStyles({
-    theme: props.theme,
-    color: {
-      hue: focusBorderColor
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
     },
+    light: {
+      offset: 200
+    }
+  };
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default',
+    ...offset100
+  });
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverBorderColor = getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  });
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
+  const focusBorderColor = hoverBorderColor;
+  const activeBorderColor = hoverBorderColor;
+  const checkedBackgroundColor = getColor(backgroundOptions);
+  const checkedForegroundColor = getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const checkedHoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const checkedActiveBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledBorderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";}", ";&:active{border-color:", ";background-color:", ";}&:has(:checked){border-color:transparent;background-color:", ";color:", ";}&:hover:has(:checked){background-color:", ";}&:active:has(:checked){background-color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], borderColor, backgroundColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, focusStyles({
+    theme,
+    selector: '&:has(:focus-visible)',
     styles: {
       borderColor: focusBorderColor
-    },
-    selector: `&:focus-within`
-  }), activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), selectedHoverBorderColor, selectedHoverBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), selectedActiveBorderColor, selectedActiveBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
+    }
+  }), activeBorderColor, activeBackgroundColor, checkedBackgroundColor, checkedForegroundColor, checkedHoverBackgroundColor, checkedActiveBackgroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  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(props => ({
+const StyledTile = styled.label.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
-  'data-garden-selected': props.isSelected
-})).withConfig({
+  'data-garden-version': '9.0.0-next.14'
+}).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:", ";cursor:", ";padding:", "px;direction:", ";min-width:132px;word-break:break-word;", ";", ";"], props => props.theme.borderRadii.md, props => !props.isDisabled && 'pointer', props => props.theme.space.base * 5, props => props.theme.rtl && 'rtl', props => colorStyles(props), 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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTile.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -6,27 +6,27 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.tile_description';
-const sizeStyles = props => {
-  let marginDirection = 'left';
-  let marginValue;
-  if (props.theme.rtl) {
-    marginDirection = 'right';
-  }
-  if (!props.isCentered) {
-    marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
-  }
-  return css(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue);
+const sizeStyles = _ref => {
+  let {
+    theme,
+    isCentered
+  } = _ref;
+  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;
+  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-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
-})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:block;text-align:", ";", ";", ";"], props => props.isCentered && 'center', sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTileDescription.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -5,32 +5,71 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
+import { StyledTile } from './StyledTile.js';
 
 const COMPONENT_ID = 'forms.tile_icon';
-const sizeStyles = props => {
-  const iconSize = math(`${props.theme.iconSizes.md} * 2`);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const color = getColor(options);
+  const hoverColor = getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeColor = getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
+  const checkedColor = getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const disabledColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  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 iconSize = math(`${theme.iconSizes.md} * 2`);
   let position;
   let top;
-  let horizontalValue;
-  if (!props.isCentered) {
+  let horizontal;
+  if (!isCentered) {
     position = 'absolute';
-    top = `${props.theme.space.base * 6}px`;
-    horizontalValue = `left: ${props.theme.space.base * 5}px`;
-    if (props.theme.rtl) {
-      horizontalValue = `right: ${props.theme.space.base * 5}px`;
-    }
+    top = `${theme.space.base * 6}px`;
+    horizontal = `${theme.space.base * 5}px`;
   }
-  return css(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize);
+  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.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
-})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:block;transition:color 0.25s ease-in-out;text-align:center;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTileIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -10,7 +10,7 @@ import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 const StyledTileInput = styled.input.withConfig({
   displayName: "StyledTileInput",
   componentId: "sc-1nq2m6q-0"
-})(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
+})(["position:absolute;top:0;left:0;opacity:0;z-index:1;margin:0;cursor:", ";width:100%;height:100%;"], props => props.disabled ? 'default' : 'pointer');
 StyledTileInput.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -6,29 +6,27 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.tile_label';
-const sizeStyles = props => {
-  let marginDirection = 'left';
-  let marginTop = `${props.theme.space.base * 2}px`;
-  let marginValue;
-  if (props.theme.rtl) {
-    marginDirection = 'right';
-  }
-  if (!props.isCentered) {
-    marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
-    marginTop = '0';
-  }
-  return css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
+const sizeStyles = _ref => {
+  let {
+    theme,
+    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 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-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
-})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles(props), 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));
 StyledTileLabel.defaultProps = {
   theme: DEFAULT_THEME
 };

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-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"

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

@@ -6,33 +6,58 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledCheckInput } from '../checkbox/StyledCheckInput.js';
 import { StyledToggleLabel } from './StyledToggleLabel.js';
 
 const COMPONENT_ID = 'forms.toggle';
-const colorStyles = props => {
-  const SHADE = 600;
-  const backgroundColor = getColorV8('neutralHue', SHADE - 100, props.theme);
-  const hoverBackgroundColor = getColorV8('neutralHue', SHADE, props.theme);
-  const activeBackgroundColor = getColorV8('neutralHue', SHADE + 100, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundOptions = {
+    theme,
+    variable: 'background.emphasis'
+  };
+  const backgroundColor = getColor(backgroundOptions);
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
   return css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
 };
-const sizeStyles = props => {
-  const height = `${props.theme.space.base * 5}px`;
-  const width = `${props.theme.space.base * 10}px`;
-  const iconSize = props.theme.iconSizes.md;
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const height = `${theme.space.base * 5}px`;
+  const width = `${theme.space.base * 10}px`;
+  const iconSize = theme.iconSizes.md;
   const iconPosition = math(`(${height} - ${iconSize}) / 2`);
   const checkedIconPosition = math(`${width} - ${iconSize} - ${iconPosition}`);
-  return css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
+  return css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, theme.rtl ? 'right' : 'left', checkedIconPosition);
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).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, props => sizeStyles(props), props => colorStyles(props), 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, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledToggleInput.defaultProps = {
   theme: DEFAULT_THEME
 };

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-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).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-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"

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

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