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

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

@@ -12,7 +12,7 @@ import { StyledMessage } from '../common/StyledMessage.js';
 const COMPONENT_ID = 'forms.radio_message';
 const StyledRadioMessage = styled(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"

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

@@ -13,7 +13,7 @@ import { StyledRadioLabel } from './StyledRadioLabel.js';
 const COMPONENT_ID = 'forms.radio_svg';
 const StyledRadioSvg = styled(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"

package/dist/esm/styled/range/StyledRangeInput.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getFocusBoxShadow } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getFocusBoxShadow } from '@zendeskgarden/react-theming';
 import { StyledHint } from '../common/StyledHint.js';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledMessage } from '../common/StyledMessage.js';
@@ -56,28 +56,81 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles = props => {
-  const SHADE = 600;
-  const thumbBackgroundColor = getColorV8('primaryHue', SHADE, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme,
+    hasLowerTrack
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const thumbBackgroundColor = getColor(options);
   const thumbBorderColor = thumbBackgroundColor;
-  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 thumbBoxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 1200,
+    dark: {
+      transparency: theme.opacity[1100]
+    },
+    light: {
+      transparency: theme.opacity[200]
+    }
+  }));
   const thumbFocusBoxShadow = getFocusBoxShadow({
-    theme: props.theme
+    theme
+  });
+  const thumbActiveBackgroundColor = getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
   });
-  const thumbActiveBackgroundColor = getColorV8('primaryHue', SHADE + 100, props.theme);
   const thumbActiveBorderColor = thumbBorderColor;
-  const thumbDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 300, props.theme);
+  const thumbDisabledBackgroundColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
   const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
-  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
+  const thumbHoverBackgroundColor = getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
   const thumbHoverBorderColor = thumbHoverBackgroundColor;
-  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 : '';
-  const trackDisabledBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
+  const trackBackgroundColor = getColor({
+    theme,
+    variable: 'border.emphasis',
+    dark: {
+      offset: 100
+    },
+    light: {
+      offset: -200
+    }
+  });
+  const trackLowerBackgroundColor = hasLowerTrack ? thumbBackgroundColor : '';
+  const trackBackgroundImage = hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
+  const trackDisabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[200]
+  });
+  const trackDisabledLowerBackgroundColor = hasLowerTrack ? getColor({
+    theme,
+    variable: 'border.emphasis'
+  }) : '';
+  const trackDisabledBackgroundImage = hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
   return css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(`
       background-color: ${trackBackgroundColor};
-      background-image: ${trackBackgroundImage}; /* provide means for styling lower range on WebKit */
+      background-image: ${trackBackgroundImage}; /* [1] */
     `), thumbStyles(`
       border-color: ${thumbBorderColor};
       box-shadow: ${thumbBoxShadow};
@@ -96,6 +149,7 @@ const colorStyles = props => {
         border-color: ${thumbActiveBorderColor};
         background-color: ${thumbActiveBackgroundColor};
       `, ':active'), trackStyles(`
+        background-color: ${trackDisabledBackgroundColor};
         background-image: ${trackDisabledBackgroundImage};
       `, ':disabled'), thumbStyles(`
         border-color: ${thumbDisabledBorderColor};
@@ -105,29 +159,32 @@ const colorStyles = props => {
         background-color: ${trackDisabledLowerBackgroundColor};
       `, ':disabled'));
 };
-const sizeStyles = props => {
-  const thumbSize = math(`${props.theme.space.base} * 5px`);
-  const trackHeight = math(`${props.theme.space.base} * 1.5px`);
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const thumbSize = `${theme.space.base * 5}px`;
+  const trackHeight = `${theme.space.base * 1.5}px`;
   const trackBorderRadius = trackHeight;
-  const trackMargin = math(`(${thumbSize} - ${trackHeight}) / 2 + ${props.theme.shadowWidths.md}`);
+  const trackMargin = math(`(${thumbSize} - ${trackHeight}) / 2 + ${theme.shadowWidths.md}`);
   const thumbMargin = math(`(${trackHeight} - ${thumbSize}) / 2`);
-  return css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, math(`${props.theme.space.base} * 2px`), trackStyles(`
+  return css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, `${theme.space.base * 2}px`, trackStyles(`
       margin: ${trackMargin} 0;
       border-radius: ${trackBorderRadius};
       height: ${trackHeight};
     `), thumbStyles(`
-      margin: ${thumbMargin} 0; /* reset for IE */
+      margin: ${thumbMargin} 0; /* [1] */
       width: ${thumbSize};
       height: ${thumbSize};
     `), trackLowerStyles(`
-      border-top-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
-      border-bottom-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
+      border-top-${theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
+      border-bottom-${theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
       height: ${trackHeight};
     `));
 };
 const StyledRangeInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
+  'data-garden-version': '9.0.0-next.14',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -144,13 +201,13 @@ const StyledRangeInput = styled.input.attrs(props => ({
       width: 99.8%; /* fix for IE which cuts off the upper track's border radius */
       color: transparent; /* reset for IE */
       box-sizing: border-box; /* reset for IE */
-    `), props => sizeStyles(props), props => thumbStyles(`
+    `), sizeStyles, props => thumbStyles(`
       appearance: none;
       transition: box-shadow .1s ease-in-out;
       border: ${props.theme.borders.md};
       border-radius: 100%;
       box-sizing: border-box;
-    `), props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+    `), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledRangeInput.defaultProps = {
   backgroundSize: '0%',
   hasLowerTrack: true,

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

@@ -6,29 +6,53 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from '../text/StyledTextInput.js';
 import { StyledTextMediaFigure } from '../text/StyledTextMediaFigure.js';
 
 const COMPONENT_ID = 'forms.select';
-const colorStyles = props => {
-  const color = getColorV8('neutralHue', 700, props.theme);
-  return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = getColor({
+    theme,
+    variable: 'foreground.subtle',
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const disabledColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}&:disabled + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color, StyledTextMediaFigure, disabledColor);
 };
-const sizeStyles = props => {
-  const padding = math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`);
-  const iconVerticalPosition = `${props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1}px`;
-  const iconHorizontalPosition = `${props.theme.space.base * 3}px`;
-  return css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition);
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isBare,
+    isCompact
+  } = _ref2;
+  const padding = isBare ? undefined : math(`${theme.iconSizes.md} + ${theme.space.base * 5}`);
+  const iconVerticalPosition = `${theme.space.base * (isCompact ? 1.5 : 2.5) + 1}px`;
+  const iconHorizontalPosition = `${theme.space.base * 3}px`;
+  return css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], theme.rtl ? 'left' : 'right', padding, StyledTextMediaFigure, iconVerticalPosition, theme.rtl ? 'left' : 'right', iconHorizontalPosition);
 };
 const StyledSelect = styled(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
+  'data-garden-version': '9.0.0-next.14',
   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(props), props => colorStyles(props), props => getColorV8('foreground', 600 , props.theme), 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;}"], sizeStyles, colorStyles, props => getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), StyledTextMediaFigure);
 StyledSelect.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -4,19 +4,27 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { SELECTOR_FOCUS_VISIBLE, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledTextFauxInput } from '../text/StyledTextFauxInput.js';
 import { StyledSelect } from './StyledSelect.js';
 
 const COMPONENT_ID = 'forms.select_wrapper';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    isCompact
+  } = _ref;
+  const height = `${theme.space.base * (isCompact ? 8 : 10)}px`;
+  return css(["max-height:", ";"], height);
+};
 const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
-})(["position:relative;padding:0;overflow:visible;& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], StyledSelect, SELECTOR_FOCUS_VISIBLE);
+})(["position:relative;padding:0;overflow:visible;", ";& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], sizeStyles, StyledSelect, SELECTOR_FOCUS_VISIBLE);
 StyledSelectWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -5,43 +5,51 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getColorV8 } from '@zendeskgarden/react-theming';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from './StyledTextInput.js';
 import { StyledTextMediaFigure } from './StyledTextMediaFigure.js';
 
 const COMPONENT_ID = '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 = props => {
-  const {
+const colorStyles = _ref => {
+  let {
     theme,
     validation,
     focusInset,
     isBare,
     isFocused
-  } = props;
+  } = _ref;
+  let borderVariable;
+  let focusBorderColor;
+  if (validation) {
+    if (validation === 'success') {
+      borderVariable = 'border.successEmphasis';
+    } else if (validation === 'warning') {
+      borderVariable = 'border.warningEmphasis';
+    } else if (validation === 'error') {
+      borderVariable = 'border.dangerEmphasis';
+    }
+    focusBorderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+  } else {
+    borderVariable = 'border.primaryEmphasis';
+    focusBorderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+  }
   return css(["", ""], focusStyles({
     theme,
     inset: focusInset,
-    condition: !isBare,
     color: {
-      hue: getValidationHue(validation),
-      shade: validation === 'warning' ? 700 : 600
+      variable: borderVariable
     },
     selector: isFocused ? '&' : '&:focus-within',
     styles: {
-      borderColor: getColorV8(getValidationHue(validation), 600, theme)
-    }
+      borderColor: focusBorderColor
+    },
+    condition: !isBare
   }));
 };
 const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
@@ -49,7 +57,7 @@ const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -58,4 +66,4 @@ StyledTextFauxInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledTextFauxInput, getValidationHue };
+export { StyledTextFauxInput };

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

@@ -4,9 +4,12 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
+import React__default from 'react';
+import { renderToString } from 'react-dom/server';
 import styled, { css } from 'styled-components';
 import { math, em } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 import { StyledHint } from '../common/StyledHint.js';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledMessage } from '../common/StyledMessage.js';
@@ -15,91 +18,133 @@ const COMPONENT_ID = 'forms.input';
 const isInvalid = validation => {
   return validation === 'warning' || validation === 'error';
 };
-const colorStyles = props => {
-  const HUE = 'primaryHue';
-  const SHADE = 600;
-  const placeholderColor = getColorV8('neutralHue', SHADE - 200, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme,
+    isBare,
+    isHovered,
+    focusInset,
+    validation
+  } = _ref;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const backgroundColor = isBare ? 'transparent' : getColor({
+    theme,
+    variable: 'background.default'
+  });
   let borderColor;
   let hoverBorderColor;
+  let borderVariable;
   let focusBorderColor;
-  let focusRingHue = HUE;
-  let focusRingShade = SHADE;
-  if (props.validation) {
-    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';
+  if (validation) {
+    if (validation === 'success') {
+      borderVariable = 'border.successEmphasis';
+    } else if (validation === 'warning') {
+      borderVariable = 'border.warningEmphasis';
+    } else if (validation === 'error') {
+      borderVariable = 'border.dangerEmphasis';
     }
-    borderColor = getColorV8(hue, SHADE, props.theme);
+    borderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
     hoverBorderColor = borderColor;
     focusBorderColor = borderColor;
-    focusRingHue = hue;
   } else {
-    borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
+    borderColor = getColor({
+      theme,
+      variable: 'border.default',
+      dark: {
+        offset: -100
+      },
+      light: {
+        offset: 100
+      }
+    });
+    borderVariable = 'border.primaryEmphasis';
+    hoverBorderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
     focusBorderColor = hoverBorderColor;
   }
-  const readOnlyBackgroundColor = getColorV8('neutralHue', SHADE - 500, props.theme);
-  const readOnlyBorderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const disabledBackgroundColor = readOnlyBackgroundColor;
-  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);
-  let controlledBorderColor = borderColor;
-  if (props.isFocused) {
-    controlledBorderColor = focusBorderColor;
-  }
-  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' : 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,
+  const disabledBackgroundColor = isBare ? undefined : getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledBorderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  const placeholderColor = disabledForegroundColor;
+  const readOnlyBackgroundColor = disabledBackgroundColor;
+  const calendarPickerColor = getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  const calendarPickerIcon = renderToString( React__default.createElement(SvgChevronDownStroke, {
+    color: calendarPickerColor
+  }));
+  const calendarPickerBackgroundImage = `url("data:image/svg+xml,${encodeURIComponent(calendarPickerIcon)}")`;
+  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{opacity:1;color:", ";}&::-webkit-datetime-edit{color:", ";}&::-webkit-calendar-picker-indicator{background-image:", ";}&[readonly],&[aria-readonly='true']{background-color:", ";}&:hover{border-color:", ";}", " &::-webkit-calendar-picker-indicator:focus-visible{", "}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, placeholderColor, placeholderColor, calendarPickerBackgroundImage, readOnlyBackgroundColor, hoverBorderColor, focusStyles({
+    theme,
+    inset: focusInset,
     color: {
-      hue: focusRingHue,
-      shade: focusRingShade
+      variable: borderVariable
     },
     styles: {
       borderColor: focusBorderColor
-    }
-  }), disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
+    },
+    condition: !isBare
+  }), focusStyles({
+    theme
+  }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles = props => {
-  const fontSize = props.theme.fontSizes.md;
-  const paddingHorizontal = `${props.theme.space.base * 3}px`;
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isBare,
+    isCompact
+  } = _ref2;
+  const fontSize = theme.fontSizes.md;
+  const paddingHorizontal = `${theme.space.base * 3}px`;
   let height;
   let paddingVertical;
   let browseFontSize;
   let swatchHeight;
-  if (props.isCompact) {
-    height = `${props.theme.space.base * 8}px`;
-    paddingVertical = `${props.theme.space.base * 1.5}px`;
-    browseFontSize = math(`${props.theme.fontSizes.sm} - 1`);
-    swatchHeight = `${props.theme.space.base * 6}px`;
+  if (isCompact) {
+    height = `${theme.space.base * 8}px`;
+    paddingVertical = `${theme.space.base * 1.5}px`;
+    browseFontSize = math(`${theme.fontSizes.sm} - 1`);
+    swatchHeight = `${theme.space.base * 6}px`;
   } else {
-    height = `${props.theme.space.base * 10}px`;
-    paddingVertical = `${props.theme.space.base * 2.5}px`;
-    browseFontSize = props.theme.fontSizes.sm;
-    swatchHeight = `${props.theme.space.base * 7}px`;
+    height = `${theme.space.base * 10}px`;
+    paddingVertical = `${theme.space.base * 2.5}px`;
+    browseFontSize = theme.fontSizes.sm;
+    swatchHeight = `${theme.space.base * 7}px`;
   }
-  const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${props.theme.borderWidths.sm} * 2)`);
-  const padding = props.isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`;
+  const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${theme.borderWidths.sm} * 2)`);
+  const padding = isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`;
   const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`);
   const swatchMarginHorizontal = math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
-  return css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& ~ ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
+  const calendarPickerSize = `${theme.space.base * 5}px`;
+  const calendarPickerBackgroundSize = theme.iconSizes.md;
+  return css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-calendar-picker-indicator{background-position:center;background-size:", ";padding:0;width:", ";height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& ~ ", "{margin-top:", "px;}"], padding, isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, calendarPickerBackgroundSize, calendarPickerSize, calendarPickerSize, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, theme.space.base * (isCompact ? 1 : 2));
 };
 const StyledTextInput = styled.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
+  'data-garden-version': '9.0.0-next.14',
   '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;}}", ";", ";&: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(props), props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+  componentId: "sc-1r6733h-0"
+})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::-webkit-calendar-picker-indicator{border-radius:100%;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTextInput.defaultProps = {
   theme: DEFAULT_THEME
 };