@zendeskgarden/react-forms 8.74.3 → 8.75.1

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, Children, useState, useRef, useMemo, forwardRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { useField } from '@zendeskgarden/container-field';
 import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, focusStyles, SELECTOR_FOCUS_VISIBLE, getFocusBoxShadow, useText, useDocument } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColorV8, focusStyles, SELECTOR_FOCUS_VISIBLE, getFocusBoxShadow, useText, useDocument } from '@zendeskgarden/react-theming';
 import { hideVisually, math, em, rgba } from 'polished';
 import PropTypes from 'prop-types';
 import { composeEventHandlers, getControlledValue } from '@zendeskgarden/container-utilities';
@@ -40,7 +40,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$K = 'forms.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -53,7 +53,7 @@ const COMPONENT_ID$J = 'forms.fieldset';
 const StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -65,11 +65,11 @@ StyledFieldset.defaultProps = {
 const COMPONENT_ID$I = 'forms.input_label';
 const StyledLabel = styled.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$I,
-  'data-garden-version': props['data-garden-version'] || '8.74.3'
+  'data-garden-version': props['data-garden-version'] || '8.75.1'
 })).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 => props.theme.colors.foreground, 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$I, props));
+})(["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 => getColorV8('foreground', 600 , props.theme), 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$I, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -78,7 +78,7 @@ const COMPONENT_ID$H = 'forms.fieldset_legend';
 const StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -90,11 +90,11 @@ StyledLegend.defaultProps = {
 const COMPONENT_ID$G = 'forms.input_hint';
 const StyledHint = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$G,
-  'data-garden-version': props['data-garden-version'] || '8.74.3'
+  'data-garden-version': props['data-garden-version'] || '8.75.1'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
-})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$G, props));
+})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$G, props));
 StyledHint.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -195,7 +195,7 @@ const MessageIcon = _ref => {
 const COMPONENT_ID$F = 'forms.input_message_icon';
 const StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
@@ -210,20 +210,20 @@ const validationStyles = props => {
   const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
   let color;
   if (props.validation === 'error') {
-    color = getColor('dangerHue', 600, props.theme);
+    color = getColorV8('dangerHue', 600, props.theme);
   } else if (props.validation === 'success') {
-    color = getColor('successHue', 600, props.theme);
+    color = getColorV8('successHue', 600, props.theme);
   } else if (props.validation === 'warning') {
-    color = getColor('warningHue', 700, props.theme);
+    color = getColorV8('warningHue', 700, props.theme);
   } else {
-    color = getColor('neutralHue', 700, props.theme);
+    color = getColorV8('neutralHue', 700, props.theme);
   }
   return css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
 };
 const COMPONENT_ID$E = 'forms.input_message';
 const StyledMessage = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '8.74.3'
+  'data-garden-version': props['data-garden-version'] || '8.75.1'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -239,7 +239,7 @@ const isInvalid = validation => {
 const colorStyles$c = props => {
   const HUE = 'primaryHue';
   const SHADE = 600;
-  const placeholderColor = getColor('neutralHue', SHADE - 200, props.theme);
+  const placeholderColor = getColorV8('neutralHue', SHADE - 200, props.theme);
   let borderColor;
   let hoverBorderColor;
   let focusBorderColor;
@@ -255,20 +255,20 @@ const colorStyles$c = props => {
     } else if (props.validation === 'error') {
       hue = 'dangerHue';
     }
-    borderColor = getColor(hue, SHADE, props.theme);
+    borderColor = getColorV8(hue, SHADE, props.theme);
     hoverBorderColor = borderColor;
     focusBorderColor = borderColor;
     focusRingHue = hue;
   } else {
-    borderColor = getColor('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
+    borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
+    hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
     focusBorderColor = hoverBorderColor;
   }
-  const readOnlyBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
-  const readOnlyBorderColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const readOnlyBackgroundColor = getColorV8('neutralHue', SHADE - 500, props.theme);
+  const readOnlyBorderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
   const disabledBackgroundColor = readOnlyBackgroundColor;
-  const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme);
+  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
+  const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);
   let controlledBorderColor = borderColor;
   if (props.isFocused) {
     controlledBorderColor = focusBorderColor;
@@ -276,7 +276,7 @@ const colorStyles$c = props => {
   if (props.isHovered) {
     controlledBorderColor = hoverBorderColor;
   }
-  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusStyles({
+  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : getColorV8('background', 600 , props.theme), getColorV8('foreground', 600 , props.theme), placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusStyles({
     theme: props.theme,
     inset: props.focusInset,
     condition: !props.isBare,
@@ -313,7 +313,7 @@ const sizeStyles$f = props => {
 };
 const StyledTextInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -336,7 +336,7 @@ const hiddenStyles = `
 const StyledTextarea = styled(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -353,7 +353,7 @@ const colorStyles$b = props => {
   } else if (props.isHovered || props.isFocused) {
     shade = 700;
   }
-  return css(["color:", ";"], getColor('neutralHue', shade, props.theme));
+  return css(["color:", ";"], getColorV8('neutralHue', shade, props.theme));
 };
 const sizeStyles$e = props => {
   const size = props.theme.iconSizes.md;
@@ -382,7 +382,7 @@ _ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -420,7 +420,7 @@ const colorStyles$a = props => {
     shade: validation === 'warning' ? 700 : 600,
     selector: isFocused ? '&' : '&:focus-within',
     styles: {
-      borderColor: getColor(getValidationHue(validation), 600, theme)
+      borderColor: getColorV8(getValidationHue(validation), 600, theme)
     }
   }));
 };
@@ -429,7 +429,7 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -441,7 +441,7 @@ StyledTextFauxInput.defaultProps = {
 const COMPONENT_ID$z = 'forms.media_input';
 const StyledTextMediaInput = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -459,11 +459,11 @@ const positionStyles = props => {
 const itemStyles = props => {
   const startDirection = props.theme.rtl ? 'right' : 'left';
   const endDirection = props.theme.rtl ? 'left' : 'right';
-  return css(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", "[data-garden-focus-visible],& > button[data-garden-focus-visible],& > ", ":active,& > button:active{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > *:not(:first-child){margin-", ":-", ";}& > *:first-child:not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
+  return css(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", "[data-garden-focus-visible],& > button[data-garden-focus-visible],& > ", ":active,& > button:active,& > button[aria-pressed='true'],& > button[aria-pressed='mixed']{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > *:not(:first-child){margin-", ":-", ";}& > *:first-child:not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -481,7 +481,7 @@ const sizeStyles$d = props => {
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -494,7 +494,7 @@ StyledRadioLabel.defaultProps = {
 const COMPONENT_ID$w = 'forms.checkbox_label';
 const StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -506,7 +506,7 @@ StyledCheckLabel.defaultProps = {
 const COMPONENT_ID$v = 'forms.radio_hint';
 const StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -518,7 +518,7 @@ StyledRadioHint.defaultProps = {
 const COMPONENT_ID$u = 'forms.checkbox_hint';
 const StyledCheckHint = styled(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -530,21 +530,21 @@ StyledCheckHint.defaultProps = {
 const COMPONENT_ID$t = 'forms.radio';
 const colorStyles$9 = props => {
   const SHADE = 600;
-  const borderColor = getColor('neutralHue', SHADE - 300, props.theme);
-  const backgroundColor = props.theme.colors.background;
+  const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
+  const backgroundColor = getColorV8('background', 600 , props.theme);
   const iconColor = backgroundColor;
-  const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
+  const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08);
+  const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
   const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2);
   const activeBorderColor = focusBorderColor;
   const checkedBorderColor = focusBorderColor;
   const checkedBackgroundColor = checkedBorderColor;
-  const checkedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const checkedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
   const checkedHoverBackgroundColor = checkedHoverBorderColor;
-  const checkedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
+  const checkedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme);
   const checkedActiveBackgroundColor = checkedActiveBorderColor;
-  const disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
+  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
   return css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}", " & ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, focusStyles({
     theme: props.theme,
     styles: {
@@ -565,7 +565,7 @@ const sizeStyles$c = props => {
 };
 const StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -578,16 +578,16 @@ StyledRadioInput.defaultProps = {
 const COMPONENT_ID$s = 'forms.checkbox';
 const colorStyles$8 = props => {
   const SHADE = 600;
-  const indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme);
+  const indeterminateBorderColor = getColorV8('primaryHue', SHADE, props.theme);
   const indeterminateBackgroundColor = indeterminateBorderColor;
-  const indeterminateActiveBorderColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const indeterminateActiveBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
   const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
-  const indeterminateDisabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
+  const indeterminateDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
   return css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled:indeterminate ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledCheckLabel, indeterminateBorderColor, indeterminateBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
 };
 const StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -600,7 +600,7 @@ StyledCheckInput.defaultProps = {
 const COMPONENT_ID$r = 'forms.radio_message';
 const StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -612,7 +612,7 @@ StyledRadioMessage.defaultProps = {
 const COMPONENT_ID$q = 'forms.checkbox_message';
 const StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -644,7 +644,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$p = 'forms.check_svg';
 const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -674,7 +674,7 @@ var SvgDashFill = function SvgDashFill(props) {
 const COMPONENT_ID$o = 'forms.dash_svg';
 const StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -685,12 +685,12 @@ StyledDashSvg.defaultProps = {
 
 const COMPONENT_ID$n = 'forms.file_upload';
 const colorStyles$7 = props => {
-  const baseColor = getColor('primaryHue', 600, props.theme);
-  const hoverColor = getColor('primaryHue', 700, props.theme);
-  const activeColor = getColor('primaryHue', 800, props.theme);
-  const disabledBackgroundColor = getColor('neutralHue', 200, props.theme);
-  const disabledForegroundColor = getColor('neutralHue', 400, props.theme);
-  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:", ";}"], props.isDragging ? activeColor : getColor('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, focusStyles({
+  const baseColor = getColorV8('primaryHue', 600, props.theme);
+  const hoverColor = getColorV8('primaryHue', 700, props.theme);
+  const activeColor = getColorV8('primaryHue', 800, props.theme);
+  const disabledBackgroundColor = getColorV8('neutralHue', 200, props.theme);
+  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
+  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:", ";}"], props.isDragging ? activeColor : getColorV8('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, focusStyles({
     theme: props.theme,
     hue: baseColor
   }), activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
@@ -705,7 +705,7 @@ const sizeStyles$b = props => {
 };
 const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -717,11 +717,11 @@ StyledFileUpload.defaultProps = {
 const COMPONENT_ID$m = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledFileClose.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -732,17 +732,17 @@ const colorStyles$6 = props => {
   let focusBorderColor;
   let foregroundColor;
   if (props.validation === 'success') {
-    borderColor = getColor('successHue', 600, props.theme);
+    borderColor = getColorV8('successHue', 600, props.theme);
     focusBorderColor = borderColor;
     foregroundColor = borderColor;
   } else if (props.validation === 'error') {
-    borderColor = getColor('dangerHue', 600, props.theme);
+    borderColor = getColorV8('dangerHue', 600, props.theme);
     focusBorderColor = borderColor;
     foregroundColor = borderColor;
   } else {
-    borderColor = getColor('neutralHue', 300, props.theme);
-    focusBorderColor = getColor('primaryHue', 600, props.theme);
-    foregroundColor = props.theme.colors.foreground;
+    borderColor = getColorV8('neutralHue', 300, props.theme);
+    focusBorderColor = getColorV8('primaryHue', 600, props.theme);
+    foregroundColor = getColorV8('foreground', 600 , props.theme);
   }
   return css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({
     theme: props.theme,
@@ -780,7 +780,7 @@ const sizeStyles$a = props => {
 };
 const StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -792,11 +792,11 @@ StyledFile.defaultProps = {
 const COMPONENT_ID$k = 'forms.file.delete';
 const StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], props => getColor('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$k, props));
+})(["color:", ";", ";"], props => getColorV8('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledFileDelete.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -812,7 +812,7 @@ const StyledFileIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -824,7 +824,7 @@ StyledFileIcon.defaultProps = {
 const COMPONENT_ID$i = 'forms.file_list';
 const StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -836,7 +836,7 @@ StyledFileList.defaultProps = {
 const COMPONENT_ID$h = 'forms.file_list.item';
 const StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -866,7 +866,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 const COMPONENT_ID$g = 'forms.radio_svg';
 const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -883,7 +883,7 @@ const sizeStyles$9 = props => {
 };
 const StyledToggleLabel = styled(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -895,7 +895,7 @@ StyledToggleLabel.defaultProps = {
 const COMPONENT_ID$e = 'forms.toggle_hint';
 const StyledToggleHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -907,9 +907,9 @@ StyledToggleHint.defaultProps = {
 const COMPONENT_ID$d = 'forms.toggle';
 const colorStyles$5 = props => {
   const SHADE = 600;
-  const backgroundColor = getColor('neutralHue', SHADE - 100, props.theme);
-  const hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme);
-  const activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme);
+  const backgroundColor = getColorV8('neutralHue', SHADE - 100, props.theme);
+  const hoverBackgroundColor = getColorV8('neutralHue', SHADE, props.theme);
+  const activeBackgroundColor = getColorV8('neutralHue', SHADE + 100, props.theme);
   return css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
 };
 const sizeStyles$8 = props => {
@@ -922,7 +922,7 @@ const sizeStyles$8 = props => {
 };
 const StyledToggleInput = styled(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -934,7 +934,7 @@ StyledToggleInput.defaultProps = {
 const COMPONENT_ID$c = 'forms.toggle_message';
 const StyledToggleMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -964,7 +964,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 const COMPONENT_ID$b = 'forms.toggle_svg';
 const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -975,7 +975,7 @@ StyledToggleSvg.defaultProps = {
 
 const COMPONENT_ID$a = 'forms.select';
 const colorStyles$4 = props => {
-  const color = getColor('neutralHue', 700, props.theme);
+  const color = getColorV8('neutralHue', 700, props.theme);
   return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
 };
 const sizeStyles$7 = props => {
@@ -986,12 +986,12 @@ const sizeStyles$7 = props => {
 };
 const StyledSelect = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.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;}"], props => sizeStyles$7(props), props => colorStyles$4(props), props => props.theme.colors.foreground, StyledTextMediaFigure);
+})(["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;}"], props => sizeStyles$7(props), props => colorStyles$4(props), props => getColorV8('foreground', 600 , props.theme), StyledTextMediaFigure);
 StyledSelect.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -999,7 +999,7 @@ StyledSelect.defaultProps = {
 const COMPONENT_ID$9 = 'forms.select_wrapper';
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1055,19 +1055,19 @@ const trackLowerStyles = function (styles) {
 };
 const colorStyles$3 = props => {
   const SHADE = 600;
-  const thumbBackgroundColor = getColor('primaryHue', SHADE, props.theme);
+  const thumbBackgroundColor = getColorV8('primaryHue', SHADE, props.theme);
   const thumbBorderColor = thumbBackgroundColor;
-  const thumbBoxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
+  const thumbBoxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColorV8('neutralHue', SHADE + 200, props.theme, 0.24));
   const thumbFocusBoxShadow = getFocusBoxShadow({
     theme: props.theme
   });
-  const thumbActiveBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const thumbActiveBackgroundColor = getColorV8('primaryHue', SHADE + 100, props.theme);
   const thumbActiveBorderColor = thumbBorderColor;
-  const thumbDisabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const thumbDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 300, props.theme);
   const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
   const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
   const thumbHoverBorderColor = thumbHoverBackgroundColor;
-  const trackBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
+  const trackBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
   const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : '';
   const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
   const trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : '';
@@ -1124,7 +1124,7 @@ const sizeStyles$6 = props => {
 };
 const StyledRangeInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1157,7 +1157,7 @@ StyledRangeInput.defaultProps = {
 const COMPONENT_ID$7 = 'forms.slider';
 const StyledSlider = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledSlider",
   componentId: "sc-1di437a-0"
@@ -1169,14 +1169,14 @@ StyledSlider.defaultProps = {
 const COMPONENT_ID$6 = 'forms.slider_thumb';
 const colorStyles$2 = props => {
   const SHADE = 600;
-  const backgroundColor = getColor('primaryHue', SHADE, props.theme);
+  const backgroundColor = getColorV8('primaryHue', SHADE, props.theme);
   const borderColor = backgroundColor;
-  const boxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColor('neutralHue', SHADE + 200, props.theme, 0.24));
-  const activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme);
+  const boxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColorV8('neutralHue', SHADE + 200, props.theme, 0.24));
+  const activeBackgroundColor = getColorV8('primaryHue', SHADE + 100, props.theme);
   const activeBorderColor = borderColor;
   const hoverBackgroundColor = activeBackgroundColor;
   const hoverBorderColor = hoverBackgroundColor;
-  const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 300, props.theme);
   const disabledBorderColor = disabledBackgroundColor;
   return css(["border-color:", ";box-shadow:", ";background-color:", ";&:hover,&[data-garden-hover='true']{border-color:", ";background-color:", ";}", " &:active,&[data-garden-active='true']{border-color:", ";background-color:", ";}&[aria-disabled='true']{border-color:", ";box-shadow:none;background-color:", ";}"], borderColor, boxShadow, backgroundColor, hoverBorderColor, hoverBackgroundColor, focusStyles({
     theme: props.theme
@@ -1189,7 +1189,7 @@ const sizeStyles$5 = props => {
 };
 const StyledSliderThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   'aria-disabled': props.isDisabled
 })).withConfig({
   displayName: "StyledSliderThumb",
@@ -1203,9 +1203,9 @@ StyledSliderThumb.defaultProps = {
 const COMPONENT_ID$5 = 'forms.slider_track';
 const colorStyles$1 = props => {
   const SHADE = 600;
-  const backgroundColor = getColor('neutralHue', SHADE - 400, props.theme);
-  const backgroundImageColor = getColor('primaryHue', SHADE, props.theme);
-  const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme);
+  const backgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
+  const backgroundImageColor = getColorV8('primaryHue', SHADE, props.theme);
+  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 300, props.theme);
   return css(["background-color:", ";background-image:linear-gradient(", ",", ");&[aria-disabled='true']{background-image:linear-gradient(", ",", ");}"], backgroundColor, backgroundImageColor, backgroundImageColor, disabledBackgroundColor, disabledBackgroundColor);
 };
 const sizeStyles$4 = props => {
@@ -1219,7 +1219,7 @@ const sizeStyles$4 = props => {
 };
 const StyledSliderTrack = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   'aria-disabled': props.isDisabled
 })).withConfig({
   displayName: "StyledSliderTrack",
@@ -1239,7 +1239,7 @@ const sizeStyles$3 = props => {
 };
 const StyledSliderTrackRail = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1266,7 +1266,7 @@ const sizeStyles$2 = props => {
 };
 const StyledTileIcon = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1278,36 +1278,36 @@ StyledTileIcon.defaultProps = {
 const COMPONENT_ID$2 = 'forms.tile';
 const colorStyles = props => {
   const SHADE = 600;
-  const iconColor = getColor('neutralHue', SHADE, props.theme);
-  const color = getColor('neutralHue', SHADE + 200, props.theme);
-  const borderColor = getColor('neutralHue', SHADE - 300, props.theme);
-  const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = getColor('primaryHue', SHADE, props.theme);
+  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 = getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2);
   const activeBorderColor = focusBorderColor;
-  const disabledBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme);
-  const disabledColor = getColor('neutralHue', SHADE - 200, props.theme);
+  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 = getColor('primaryHue', SHADE + 100, props.theme);
+  const selectedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
   const selectedHoverBackgroundColor = selectedHoverBorderColor;
-  const selectedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme);
+  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, getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusStyles({
+  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,
     hue: focusBorderColor,
     styles: {
       borderColor: focusBorderColor
     },
     selector: `&:focus-within`
-  }), activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedHoverBorderColor, selectedHoverBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedActiveBorderColor, selectedActiveBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
+  }), 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);
 };
 const StyledTile = styled.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.1',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",
@@ -1331,7 +1331,7 @@ const sizeStyles$1 = props => {
 };
 const StyledTileDescription = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1364,7 +1364,7 @@ const sizeStyles = props => {
 };
 const StyledTileLabel = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.1'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"