@zendeskgarden/react-forms 9.0.0-next.8 → 9.0.0

package/dist/esm/styled/checkbox/StyledCheckInput.js

@@ -5,30 +5,71 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledRadioInput } from '../radio/StyledRadioInput.js';
 import { StyledCheckLabel } from './StyledCheckLabel.js';
 
 const COMPONENT_ID = 'forms.checkbox';
-const colorStyles = props => {
-  const SHADE = 600;
-  const indeterminateBorderColor = getColorV8('primaryHue', SHADE, props.theme);
-  const indeterminateBackgroundColor = indeterminateBorderColor;
-  const indeterminateActiveBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
-  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 colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const indeterminateBackgroundColor = getColor(backgroundOptions);
+  const indeterminateBorderColor = getColor(borderOptions);
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const indeterminateHoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const indeterminateHoverBorderColor = getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const indeterminateActiveBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const indeterminateActiveBorderColor = getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const indeterminateDisabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[300]
+  });
+  return css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":hover::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, indeterminateHoverBorderColor, indeterminateHoverBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
 };
 const StyledCheckInput = styled(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
   componentId: "sc-176jxxe-0"
-})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCheckInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledCheckInput };

package/dist/esm/styled/checkbox/StyledCheckLabel.js

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledRadioLabel } from '../radio/StyledRadioLabel.js';
 
 const COMPONENT_ID = 'forms.checkbox_label';
 const StyledCheckLabel = styled(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCheckLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCheckLabel };

package/dist/esm/styled/checkbox/StyledCheckMessage.js

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledRadioMessage } from '../radio/StyledRadioMessage.js';
 
 const COMPONENT_ID = 'forms.checkbox_message';
 const StyledCheckMessage = styled(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCheckMessage.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCheckMessage };

package/dist/esm/styled/checkbox/StyledCheckSvg.js

@@ -6,20 +6,17 @@
 */
 import styled from 'styled-components';
 import SvgCheckSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledCheckInput } from './StyledCheckInput.js';
 import { StyledCheckLabel } from './StyledCheckLabel.js';
 
 const COMPONENT_ID = 'forms.check_svg';
 const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
 })(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCheckSvg.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCheckSvg };

package/dist/esm/styled/checkbox/StyledDashSvg.js

@@ -6,20 +6,17 @@
 */
 import styled from 'styled-components';
 import SvgDashFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/dash-fill.svg.js';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledCheckInput } from './StyledCheckInput.js';
 import { StyledCheckLabel } from './StyledCheckLabel.js';
 
 const COMPONENT_ID = 'forms.dash_svg';
 const StyledDashSvg = styled(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
 })(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledDashSvg.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledDashSvg };

package/dist/esm/styled/common/StyledField.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
 })(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledField.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledField };

package/dist/esm/styled/common/StyledFieldset.js

@@ -5,20 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledField } from './StyledField.js';
 
 const COMPONENT_ID = 'forms.fieldset';
 const StyledFieldset = styled(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
 })(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledFieldset.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledFieldset };

package/dist/esm/styled/common/StyledHint.js

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.input_hint';
 const StyledHint = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0'
 })).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 => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHint.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledHint };

package/dist/esm/styled/common/StyledLabel.js

@@ -6,18 +6,18 @@
 */
 import styled from 'styled-components';
 import { hideVisually } from 'polished';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.input_label';
 const StyledLabel = styled.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0'
 })).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 => 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, props));
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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 => getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), 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, props));
 
 export { StyledLabel };

package/dist/esm/styled/common/StyledLegend.js

@@ -5,20 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledLabel } from './StyledLabel.js';
 
 const COMPONENT_ID = 'forms.fieldset_legend';
 const StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
 })(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledLegend.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledLegend };

package/dist/esm/styled/common/StyledMessage.js

@@ -6,35 +6,49 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledMessageIcon } from './StyledMessageIcon.js';
 import { StyledLabel } from './StyledLabel.js';
 
-const validationStyles = props => {
-  const rtl = props.theme.rtl;
-  const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
-  let color;
-  if (props.validation === 'error') {
-    color = getColorV8('dangerHue', 600, props.theme);
-  } else if (props.validation === 'success') {
-    color = getColorV8('successHue', 600, props.theme);
-  } else if (props.validation === 'warning') {
-    color = getColorV8('warningHue', 700, props.theme);
+const COMPONENT_ID = 'forms.input_message';
+const colorStyles = _ref => {
+  let {
+    theme,
+    validation
+  } = _ref;
+  let variable;
+  if (validation === 'error') {
+    variable = 'foreground.danger';
+  } else if (validation === 'success') {
+    variable = 'foreground.success';
+  } else if (validation === 'warning') {
+    variable = 'foreground.warning';
   } else {
-    color = getColorV8('neutralHue', 700, props.theme);
+    variable = 'foreground.subtle';
   }
-  return css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
+  const foregroundColor = getColor({
+    theme,
+    variable
+  });
+  return css(["color:", ";"], foregroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    validation
+  } = _ref2;
+  const fontSize = theme.fontSizes.sm;
+  const lineHeight = getLineHeight(theme.iconSizes.md, theme.fontSizes.sm);
+  const marginTop = `${theme.space.base}px`;
+  const paddingHorizontal = validation ? math(`${theme.space.base * 2} + ${theme.iconSizes.md}`) : undefined;
+  return css(["padding-", ":", ";line-height:", ";font-size:", ";", ":not([hidden]) + &{margin-top:", ";}"], theme.rtl ? 'right' : 'left', paddingHorizontal, lineHeight, fontSize, StyledLabel, marginTop);
 };
-const COMPONENT_ID = 'forms.input_message';
 const StyledMessage = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.8'
+  'data-garden-version': props['data-garden-version'] || '9.0.0'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
-})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles(props), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMessage.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;}", ";"], props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledMessage };

package/dist/esm/styled/common/StyledMessageIcon.js

@@ -6,7 +6,7 @@
 */
 import styled from 'styled-components';
 import React__default, { Children } from 'react';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
 import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
 import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
@@ -32,14 +32,12 @@ const MessageIcon = _ref => {
 const COMPONENT_ID = 'forms.input_message_icon';
 const StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
-  'aria-hidden': null
+  'data-garden-version': '9.0.0',
+  'aria-hidden': null,
+  role: 'img'
 }).withConfig({
   displayName: "StyledMessageIcon",
   componentId: "sc-1ph2gba-0"
 })(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMessageIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMessageIcon };

package/dist/esm/styled/file-list/StyledFile.js

@@ -5,47 +5,68 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledFileClose } from './StyledFileClose.js';
 
 const COMPONENT_ID = 'forms.file';
-const colorStyles = props => {
-  let borderColor;
-  let focusBorderColor;
-  let foregroundColor;
-  if (props.validation === 'success') {
-    borderColor = getColorV8('successHue', 600, props.theme);
-    focusBorderColor = borderColor;
-    foregroundColor = borderColor;
-  } else if (props.validation === 'error') {
-    borderColor = getColorV8('dangerHue', 600, props.theme);
-    focusBorderColor = borderColor;
-    foregroundColor = borderColor;
+const colorStyles = _ref => {
+  let {
+    theme,
+    focusInset,
+    validation
+  } = _ref;
+  let borderVariable;
+  let focusBorderVariable;
+  let foregroundVariable;
+  if (validation === 'success') {
+    borderVariable = 'border.successEmphasis';
+    focusBorderVariable = borderVariable;
+    foregroundVariable = 'foreground.success';
+  } else if (validation === 'error') {
+    borderVariable = 'border.dangerEmphasis';
+    focusBorderVariable = borderVariable;
+    foregroundVariable = 'foreground.danger';
   } else {
-    borderColor = getColorV8('neutralHue', 300, props.theme);
-    focusBorderColor = getColorV8('primaryHue', 600, props.theme);
-    foregroundColor = getColorV8('foreground', 600 , props.theme);
+    borderVariable = 'border.default';
+    focusBorderVariable = 'border.primaryEmphasis';
+    foregroundVariable = 'foreground.default';
   }
+  const borderColor = getColor({
+    theme,
+    variable: borderVariable
+  });
+  const focusBorderColor = getColor({
+    theme,
+    variable: focusBorderVariable
+  });
+  const foregroundColor = getColor({
+    theme,
+    variable: foregroundVariable
+  });
   return css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({
-    theme: props.theme,
-    inset: props.focusInset,
+    theme,
+    inset: focusInset,
     color: {
-      hue: focusBorderColor
+      variable: focusBorderVariable
     },
     styles: {
       borderColor: focusBorderColor
     }
   }));
 };
-const sizeStyles = props => {
-  const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`;
-  const spacing = `${props.theme.space.base * (props.isCompact ? 2 : 3)}px`;
-  const fontSize = props.theme.fontSizes.md;
-  const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const size = `${theme.space.base * (isCompact ? 7 : 10)}px`;
+  const spacing = `${theme.space.base * (isCompact ? 2 : 3)}px`;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
   return `
     box-sizing: border-box;
-    border: ${props.theme.borders.sm};
-    border-radius: ${props.theme.borderRadii.md};
+    border: ${theme.borders.sm};
+    border-radius: ${theme.borderRadii.md};
     padding: 0 ${spacing};
     height: ${size};
     line-height: ${lineHeight};
@@ -58,19 +79,16 @@ const sizeStyles = props => {
     & > ${StyledFileClose} {
       width: ${size};
       height: ${size};
-      margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing};
+      margin-${theme.rtl ? 'left' : 'right'}: -${spacing};
     }
   `;
 };
 const StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
 })(["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, colorStyles, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledFile.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledFile };

package/dist/esm/styled/file-list/StyledFileClose.js

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).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 => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledFileClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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 => getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledFileClose };

package/dist/esm/styled/file-list/StyledFileDelete.js

@@ -5,19 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledFileClose } from './StyledFileClose.js';
 
 const COMPONENT_ID = 'forms.file.delete';
 const StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], props => getColorV8('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledFileDelete.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["color:", ";", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'foreground.danger'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledFileDelete };

package/dist/esm/styled/file-list/StyledFileIcon.js

@@ -4,28 +4,36 @@
 * 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, { Children } from 'react';
-import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.file.icon';
-const StyledFileIcon = styled(_ref => {
+const colorStyles = _ref => {
   let {
-    children,
-    isCompact,
     theme,
-    ...props
+    $validation
   } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
+  const color = $validation ? undefined : getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  return css(["color:", ";"], color);
+};
+const sizeStyles = _ref2 => {
+  let {
+    $isCompact,
+    theme
+  } = _ref2;
+  const width = $isCompact ? theme.iconSizes.sm : theme.iconSizes.md;
+  const margin = `${theme.space.base * 2}px`;
+  return css(["width:", ";margin-", ":", ";"], width, theme.rtl ? 'left' : 'right', margin);
+};
+const StyledFileIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
-})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledFileIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledFileIcon };