@zendeskgarden/react-forms 8.66.0 → 8.68.0

package/dist/index.cjs.js

@@ -68,7 +68,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$K = 'forms.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$K,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -81,7 +81,7 @@ const COMPONENT_ID$J = 'forms.fieldset';
 const StyledFieldset = styled__default.default(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$J,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -93,7 +93,7 @@ StyledFieldset.defaultProps = {
 const COMPONENT_ID$I = 'forms.input_label';
 const StyledLabel = styled__default.default.label.attrs({
   'data-garden-id': COMPONENT_ID$I,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -106,7 +106,7 @@ const COMPONENT_ID$H = 'forms.fieldset_legend';
 const StyledLegend = styled__default.default(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$H,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -118,7 +118,7 @@ StyledLegend.defaultProps = {
 const COMPONENT_ID$G = 'forms.input_hint';
 const StyledHint = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
@@ -223,7 +223,7 @@ const MessageIcon = _ref => {
 const COMPONENT_ID$F = 'forms.input_message_icon';
 const StyledMessageIcon = styled__default.default(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
@@ -251,7 +251,7 @@ const validationStyles = props => {
 const COMPONENT_ID$E = 'forms.input_message';
 const StyledMessage = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$E,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -264,32 +264,34 @@ const COMPONENT_ID$D = 'forms.input';
 const isInvalid = validation => {
   return validation === 'warning' || validation === 'error';
 };
-const colorStyles$b = props => {
+const colorStyles$c = props => {
+  const HUE = 'primaryHue';
   const SHADE = 600;
   const placeholderColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
   let borderColor;
   let hoverBorderColor;
   let focusBorderColor;
+  let focusRingHue = HUE;
+  let focusRingShade = SHADE;
   if (props.validation) {
-    let hue;
+    let hue = HUE;
     if (props.validation === 'success') {
       hue = 'successHue';
     } else if (props.validation === 'warning') {
       hue = 'warningHue';
+      focusRingShade = 700;
     } else if (props.validation === 'error') {
       hue = 'dangerHue';
     }
     borderColor = reactTheming.getColor(hue, SHADE, props.theme);
     hoverBorderColor = borderColor;
     focusBorderColor = borderColor;
+    focusRingHue = hue;
   } else {
     borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
     hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
     focusBorderColor = hoverBorderColor;
   }
-  const boxShadow = `
-    ${props.focusInset ? 'inset' : ''}
-    ${props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35))}`;
   const readOnlyBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
   const readOnlyBorderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
   const disabledBackgroundColor = readOnlyBackgroundColor;
@@ -302,7 +304,16 @@ const colorStyles$b = props => {
   if (props.isHovered) {
     controlledBorderColor = hoverBorderColor;
   }
-  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}&:focus,&[data-garden-focus-visible='true']{border-color:", ";box-shadow:", ";}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, !props.isBare && props.isFocused && boxShadow, props.isBare ? 'transparent' : props.theme.colors.background, props.theme.colors.foreground, placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusBorderColor, !props.isBare && boxShadow, disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
+  return styled.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, reactTheming.focusStyles({
+    theme: props.theme,
+    inset: props.focusInset,
+    condition: !props.isBare,
+    hue: focusRingHue,
+    shade: focusRingShade,
+    styles: {
+      borderColor: focusBorderColor
+    }
+  }), disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
 };
 const sizeStyles$f = props => {
   const fontSize = props.theme.fontSizes.md;
@@ -330,12 +341,12 @@ const sizeStyles$f = props => {
 };
 const StyledTextInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
   componentId: "sc-k12n8x-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;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";&:focus{outline:none;}", ";&: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', props => sizeStyles$f(props), props => colorStyles$b(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$D, 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;}&::placeholder{opacity:1;}&: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', props => sizeStyles$f(props), props => colorStyles$c(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$D, props));
 StyledTextInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -353,7 +364,7 @@ const hiddenStyles = `
 const StyledTextarea = styled__default.default(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$C,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -363,7 +374,7 @@ StyledTextarea.defaultProps = {
 };
 
 const COMPONENT_ID$B = 'forms.media_figure';
-const colorStyles$a = props => {
+const colorStyles$b = props => {
   let shade = 600;
   if (props.isDisabled) {
     shade = 400;
@@ -399,26 +410,58 @@ _ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.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)`, props => colorStyles$a(props), props => sizeStyles$e(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props));
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles$b(props), props => sizeStyles$e(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$B, props));
 StyledTextMediaFigure.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$A = 'forms.faux_input';
+const VALIDATION_HUES = {
+  success: 'successHue',
+  warning: 'warningHue',
+  error: 'dangerHue'
+};
+function getValidationHue(validation) {
+  let defaultHue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'primaryHue';
+  if (validation) {
+    return VALIDATION_HUES[validation];
+  }
+  return defaultHue;
+}
+const colorStyles$a = props => {
+  const {
+    theme,
+    validation,
+    focusInset,
+    isBare,
+    isFocused
+  } = props;
+  return styled.css(["", ""], reactTheming.focusStyles({
+    theme,
+    inset: focusInset,
+    condition: !isBare,
+    hue: getValidationHue(validation),
+    shade: validation === 'warning' ? 700 : 600,
+    selector: isFocused ? '&' : '&:focus-within',
+    styles: {
+      borderColor: reactTheming.getColor(getValidationHue(validation), 600, theme)
+    }
+  }));
+};
 const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props => ({
   as: 'div',
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
-})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;& > ", "{vertical-align:", ";}& > ", "{flex-shrink:", ";}", ";"], props => props.mediaLayout ? 'inline-flex' : 'inline-block', props => props.mediaLayout && 'baseline', props => props.mediaLayout && !props.isDisabled ? 'text' : 'default', StyledTextInput, props => !props.mediaLayout && 'baseline', StyledTextMediaFigure, props => props.mediaLayout && '0', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$A, 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$a, StyledTextInput, props => !props.mediaLayout && 'baseline', reactTheming.SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.mediaLayout && '0', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$A, props));
 StyledTextFauxInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -426,7 +469,7 @@ StyledTextFauxInput.defaultProps = {
 const COMPONENT_ID$z = 'forms.media_input';
 const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -444,11 +487,11 @@ const positionStyles = props => {
 const itemStyles = props => {
   const startDirection = props.theme.rtl ? 'right' : 'left';
   const endDirection = props.theme.rtl ? 'left' : 'right';
-  return styled.css(["& > *{z-index:-1;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", "[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, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
+  return styled.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);
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -466,7 +509,7 @@ const sizeStyles$d = props => {
 };
 const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -479,7 +522,7 @@ StyledRadioLabel.defaultProps = {
 const COMPONENT_ID$w = 'forms.checkbox_label';
 const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -491,7 +534,7 @@ StyledCheckLabel.defaultProps = {
 const COMPONENT_ID$v = 'forms.radio_hint';
 const StyledRadioHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -503,7 +546,7 @@ StyledRadioHint.defaultProps = {
 const COMPONENT_ID$u = 'forms.checkbox_hint';
 const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -523,7 +566,6 @@ const colorStyles$9 = props => {
   const focusBorderColor = hoverBorderColor;
   const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
   const activeBorderColor = focusBorderColor;
-  const boxShadow = props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35));
   const checkedBorderColor = focusBorderColor;
   const checkedBackgroundColor = checkedBorderColor;
   const checkedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
@@ -531,7 +573,13 @@ const colorStyles$9 = props => {
   const checkedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
   const checkedActiveBackgroundColor = checkedActiveBorderColor;
   const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  return styled.css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}&[data-garden-focus-visible='true'] ~ ", "::before{border-color:", ";box-shadow:", ";}& ~ ", ":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, StyledRadioLabel, focusBorderColor, boxShadow, StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
+  return styled.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, reactTheming.focusStyles({
+    theme: props.theme,
+    styles: {
+      borderColor: focusBorderColor
+    },
+    selector: `&:focus-visible ~ ${StyledRadioLabel}::before, &[data-garden-focus-visible='true'] ~ ${StyledRadioLabel}::before`
+  }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
 const sizeStyles$c = props => {
   const lineHeight = `${props.theme.space.base * 5}px`;
@@ -545,7 +593,7 @@ const sizeStyles$c = props => {
 };
 const StyledRadioInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -567,7 +615,7 @@ const colorStyles$8 = props => {
 };
 const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -580,7 +628,7 @@ StyledCheckInput.defaultProps = {
 const COMPONENT_ID$r = 'forms.radio_message';
 const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -592,7 +640,7 @@ StyledRadioMessage.defaultProps = {
 const COMPONENT_ID$q = 'forms.checkbox_message';
 const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -624,7 +672,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$p = 'forms.check_svg';
 const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -654,7 +702,7 @@ var SvgDashFill = function SvgDashFill(props) {
 const COMPONENT_ID$o = 'forms.dash_svg';
 const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -670,8 +718,10 @@ const colorStyles$7 = props => {
   const activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
   const disabledBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
   const disabledForegroundColor = reactTheming.getColor('neutralHue', 400, props.theme);
-  const boxShadow = `inset ${props.theme.shadows.md(polished.rgba(baseColor, 0.35))}`;
-  return styled.css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : reactTheming.getColor('neutralHue', 600, props.theme), props.isDragging && polished.rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, polished.rgba(baseColor, 0.08), hoverColor, boxShadow, activeColor, polished.rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
+  return styled.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 : reactTheming.getColor('neutralHue', 600, props.theme), props.isDragging && polished.rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, polished.rgba(baseColor, 0.08), hoverColor, reactTheming.focusStyles({
+    theme: props.theme,
+    hue: baseColor
+  }), activeColor, polished.rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
 };
 const sizeStyles$b = props => {
   const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
@@ -683,11 +733,11 @@ const sizeStyles$b = props => {
 };
 const StyledFileUpload = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
-})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";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;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&:focus{outline:none;}&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$b, colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
+})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";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;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$b, colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
 StyledFileUpload.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -695,7 +745,7 @@ StyledFileUpload.defaultProps = {
 const COMPONENT_ID$m = 'forms.file.close';
 const StyledFileClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -722,18 +772,14 @@ const colorStyles$6 = props => {
     focusBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
     foregroundColor = props.theme.colors.foreground;
   }
-  const boxShadow = `
-    ${props.focusInset ? 'inset' : ''}
-    ${props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35))}`;
-  return `
-    border-color: ${borderColor};
-    color: ${foregroundColor};
-
-    &:focus {
-      box-shadow: ${boxShadow};
-      border-color: ${focusBorderColor};
+  return styled.css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, reactTheming.focusStyles({
+    theme: props.theme,
+    inset: props.focusInset,
+    hue: focusBorderColor,
+    styles: {
+      borderColor: focusBorderColor
     }
-  `;
+  }));
 };
 const sizeStyles$a = props => {
   const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`;
@@ -762,11 +808,11 @@ const sizeStyles$a = props => {
 };
 const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
-})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;", ";&:focus{outline:none;}", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a, colorStyles$6, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;transition:box-shadow 0.1s ease-in-out;", ";", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$a, colorStyles$6, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledFile.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -774,7 +820,7 @@ StyledFile.defaultProps = {
 const COMPONENT_ID$k = 'forms.file.delete';
 const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
@@ -794,7 +840,7 @@ const StyledFileIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -806,7 +852,7 @@ StyledFileIcon.defaultProps = {
 const COMPONENT_ID$i = 'forms.file_list';
 const StyledFileList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -818,7 +864,7 @@ StyledFileList.defaultProps = {
 const COMPONENT_ID$h = 'forms.file_list.item';
 const StyledFileListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -848,7 +894,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 const COMPONENT_ID$g = 'forms.radio_svg';
 const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -865,7 +911,7 @@ const sizeStyles$9 = props => {
 };
 const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -877,7 +923,7 @@ StyledToggleLabel.defaultProps = {
 const COMPONENT_ID$e = 'forms.toggle_hint';
 const StyledToggleHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -904,7 +950,7 @@ const sizeStyles$8 = props => {
 };
 const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -916,7 +962,7 @@ StyledToggleInput.defaultProps = {
 const COMPONENT_ID$c = 'forms.toggle_message';
 const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -946,7 +992,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 const COMPONENT_ID$b = 'forms.toggle_svg';
 const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -958,7 +1004,7 @@ StyledToggleSvg.defaultProps = {
 const COMPONENT_ID$a = 'forms.select';
 const colorStyles$4 = props => {
   const color = reactTheming.getColor('neutralHue', 700, props.theme);
-  return styled.css(["&:hover + ", ",&:focus + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
+  return styled.css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
 };
 const sizeStyles$7 = props => {
   const padding = polished.math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`);
@@ -968,7 +1014,7 @@ const sizeStyles$7 = props => {
 };
 const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -981,12 +1027,11 @@ StyledSelect.defaultProps = {
 const COMPONENT_ID$9 = 'forms.select_wrapper';
 const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.66.0',
-  isBare: true
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
-})(["position:relative;overflow:visible;"]);
+})(["position:relative;padding:0;overflow:visible;& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], StyledSelect, reactTheming.SELECTOR_FOCUS_VISIBLE);
 StyledSelectWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -1041,11 +1086,13 @@ const colorStyles$3 = props => {
   const thumbBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
   const thumbBorderColor = thumbBackgroundColor;
   const thumbBoxShadow = props.theme.shadows.lg(polished.math(`${props.theme.space.base} * 1px`), polished.math(`${props.theme.space.base} * 2px`), reactTheming.getColor('neutralHue', SHADE + 200, props.theme, 0.24));
+  const thumbFocusBoxShadow = reactTheming.getFocusBoxShadow({
+    theme: props.theme
+  });
   const thumbActiveBackgroundColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
   const thumbActiveBorderColor = thumbBorderColor;
   const thumbDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
   const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
-  const thumbFocusBoxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', SHADE, props.theme, 0.35));
   const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
   const thumbHoverBorderColor = thumbHoverBackgroundColor;
   const trackBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
@@ -1072,7 +1119,7 @@ const colorStyles$3 = props => {
         box-shadow: ${thumbFocusBoxShadow};
       `, '[data-garden-focus-visible="true"]'), thumbStyles(`
         border-color: ${thumbActiveBorderColor};
-        background-color: ${thumbActiveBackgroundColor}
+        background-color: ${thumbActiveBackgroundColor};
       `, ':active'), trackStyles(`
         background-image: ${trackDisabledBackgroundImage};
       `, ':disabled'), thumbStyles(`
@@ -1080,7 +1127,7 @@ const colorStyles$3 = props => {
         box-shadow: none;
         background-color: ${thumbDisabledBackgroundColor};
       `, ':disabled'), trackLowerStyles(`
-        background-color: ${trackDisabledLowerBackgroundColor}
+        background-color: ${trackDisabledLowerBackgroundColor};
       `, ':disabled'));
 };
 const sizeStyles$6 = props => {
@@ -1105,7 +1152,7 @@ const sizeStyles$6 = props => {
 };
 const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1138,7 +1185,7 @@ StyledRangeInput.defaultProps = {
 const COMPONENT_ID$7 = 'forms.slider';
 const StyledSlider = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSlider",
   componentId: "sc-1di437a-0"
@@ -1157,10 +1204,11 @@ const colorStyles$2 = props => {
   const activeBorderColor = borderColor;
   const hoverBackgroundColor = activeBackgroundColor;
   const hoverBorderColor = hoverBackgroundColor;
-  const focusBoxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', SHADE, props.theme, 0.35));
   const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
   const disabledBorderColor = disabledBackgroundColor;
-  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";&[data-garden-focus-visible='true']{box-shadow:", ";}&: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, focusBoxShadow, hoverBorderColor, hoverBackgroundColor, activeBorderColor, activeBackgroundColor, disabledBorderColor, disabledBackgroundColor);
+  return styled.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, reactTheming.focusStyles({
+    theme: props.theme
+  }), activeBorderColor, activeBackgroundColor, disabledBorderColor, disabledBackgroundColor);
 };
 const sizeStyles$5 = props => {
   const size = polished.math(`${props.theme.space.base} * 5px`);
@@ -1169,12 +1217,12 @@ const sizeStyles$5 = props => {
 };
 const StyledSliderThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   'aria-disabled': props.isDisabled
 })).withConfig({
   displayName: "StyledSliderThumb",
   componentId: "sc-yspbwa-0"
-})(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";&:focus{outline:none;}", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5(props), props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["appearance:none;position:absolute;top:50%;", ":", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:1;border:", ";border-radius:100%;cursor:inherit;box-sizing:border-box;font-size:0;", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.position} * 1px`), props => props.theme.borders.md, props => sizeStyles$5(props), props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledSliderThumb.defaultProps = {
   position: 0,
   theme: reactTheming.DEFAULT_THEME
@@ -1199,7 +1247,7 @@ const sizeStyles$4 = props => {
 };
 const StyledSliderTrack = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   'aria-disabled': props.isDisabled
 })).withConfig({
   displayName: "StyledSliderTrack",
@@ -1219,7 +1267,7 @@ const sizeStyles$3 = props => {
 };
 const StyledSliderTrackRail = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSliderTrackRail",
   componentId: "sc-1o5owbd-0"
@@ -1246,7 +1294,7 @@ const sizeStyles$2 = props => {
 };
 const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1264,7 +1312,6 @@ const colorStyles = props => {
   const hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
   const hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
   const focusBorderColor = hoverBorderColor;
-  const focusBoxShadow = props.theme.shadows.md(polished.rgba(focusBorderColor, 0.35));
   const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
   const activeBorderColor = focusBorderColor;
   const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
@@ -1277,12 +1324,18 @@ const colorStyles = props => {
   const selectedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
   const selectedActiveBackgroundColor = selectedActiveBorderColor;
   const selectedDisabledBackgroundColor = disabledBorderColor;
-  return styled.css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:focus{outline:none;}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-focus-visible='true']{border-color:", ";box-shadow:", ";}&: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, reactTheming.getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusBorderColor, focusBoxShadow, 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);
+  return styled.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, reactTheming.getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, reactTheming.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);
 };
 const StyledTile = styled__default.default.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.66.0',
-  'data-garden-focus-visible': props.isFocused,
+  'data-garden-version': '8.68.0',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",
@@ -1306,7 +1359,7 @@ const sizeStyles$1 = props => {
 };
 const StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1339,7 +1392,7 @@ const sizeStyles = props => {
 };
 const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1590,7 +1643,7 @@ const Message = React__namespace.default.forwardRef((_ref, ref) => {
   if (getMessageProps) {
     combinedProps = getMessageProps(combinedProps);
   }
-  const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation);
+  const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
   return React__namespace.default.createElement(MessageComponent, _extends$t({
     ref: ref
   }, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
@@ -1991,12 +2044,18 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     disabled,
     isCompact,
+    validation,
+    focusInset,
+    isBare,
     ...props
   } = _ref;
   const fieldContext = useFieldContext();
   let combinedProps = {
     disabled,
+    isBare,
     isCompact,
+    validation,
+    focusInset,
     ref,
     ...props
   };
@@ -2006,8 +2065,11 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
     });
   }
   return React__namespace.default.createElement(StyledSelectWrapper, {
-    isCompact: isCompact
-  }, React__namespace.default.createElement(StyledSelect, combinedProps), !props.isBare && React__namespace.default.createElement(FauxInput.EndIcon, {
+    isCompact: isCompact,
+    isBare: isBare,
+    validation: validation,
+    focusInset: focusInset
+  }, React__namespace.default.createElement(StyledSelect, combinedProps), !isBare && React__namespace.default.createElement(FauxInput.EndIcon, {
     isDisabled: disabled
   }, React__namespace.default.createElement(SvgChevronDownStroke, null)));
 });
@@ -2135,7 +2197,6 @@ const TileComponent = React__namespace.default.forwardRef((_ref, ref) => {
     disabled,
     ...props
   } = _ref;
-  const [isFocused, setIsFocused] = React.useState(false);
   const tilesContext = useTilesContext();
   const inputRef = React.useRef(null);
   let inputProps;
@@ -2150,20 +2211,10 @@ const TileComponent = React__namespace.default.forwardRef((_ref, ref) => {
     ref: ref,
     "aria-disabled": disabled,
     isDisabled: disabled,
-    isFocused: isFocused,
     isSelected: tilesContext && tilesContext.value === value
   }, props), children, React__namespace.default.createElement(StyledTileInput, _extends$t({}, inputProps, {
     disabled: disabled,
     value: value,
-    onBlur: () => setIsFocused(false),
-    onFocus: e => {
-      e.persist();
-      setTimeout(() => {
-        if (e.target.getAttribute('data-garden-focus-visible')) {
-          setIsFocused(true);
-        }
-      }, 1);
-    },
     type: "radio",
     ref: inputRef
   })));