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

package/dist/esm/styled/file-list/StyledFileListItem.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 { StyledFileList } from './StyledFileList.js';
 import { StyledFileUpload } from '../file-upload/StyledFileUpload.js';
 
 const COMPONENT_ID = 'forms.file_list.item';
 const StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
 })(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledFileListItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledFileListItem };

package/dist/esm/styled/file-upload/StyledFileUpload.js

@@ -5,43 +5,109 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { rgba, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { math } from 'polished';
+import { retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledHint } from '../common/StyledHint.js';
 import { StyledMessage } from '../common/StyledMessage.js';
 
 const COMPONENT_ID = 'forms.file_upload';
-const colorStyles = props => {
-  const baseColor = getColorV8('primaryHue', 600, props.theme);
-  const hoverColor = getColorV8('primaryHue', 700, props.theme);
-  const activeColor = getColorV8('primaryHue', 800, props.theme);
-  const disabledBackgroundColor = getColorV8('neutralHue', 200, props.theme);
-  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
-  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : getColorV8('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, focusStyles({
-    theme: props.theme,
-    color: {
-      hue: baseColor
+const colorStyles = _ref => {
+  let {
+    theme,
+    isDragging
+  } = _ref;
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const foregroundOptions = {
+    theme,
+    variable: 'foreground.primary'
+  };
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
     }
-  }), activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const borderColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const foregroundColor = getColor(foregroundOptions);
+  const hoverBorderColor = getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverForegroundColor = getColor({
+    ...foregroundOptions,
+    ...offset100
+  });
+  const activeBorderColor = getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
+  const activeForegroundColor = getColor({
+    ...foregroundOptions,
+    ...offset200
+  });
+  const disabledBorderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isDragging ? activeBorderColor : borderColor, isDragging ? activeBackgroundColor : undefined, isDragging ? activeForegroundColor : foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+    theme
+  }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles = props => {
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  const paddingHorizontal = `${props.isCompact ? 2 : 4}em`;
-  const paddingVertical = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
-  const fontSize = props.theme.fontSizes.md;
-  const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  const paddingHorizontal = `${isCompact ? 2 : 4}em`;
+  const paddingVertical = math(`${theme.space.base * (isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}`);
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
   return css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.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;", ";&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledFileUpload.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledFileUpload };

package/dist/esm/styled/input-group/StyledInputGroup.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledTextInput } from '../text/StyledTextInput.js';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledHint } from '../common/StyledHint.js';
@@ -23,13 +23,10 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
 })(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledInputGroup.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledInputGroup };

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

@@ -6,19 +6,16 @@
 */
 import styled from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledHint } from '../common/StyledHint.js';
 
 const COMPONENT_ID = 'forms.radio_hint';
 const StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
 })(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRadioHint.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledRadioHint };

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

@@ -6,56 +6,114 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledRadioLabel } from './StyledRadioLabel.js';
 import { StyledMessage } from '../common/StyledMessage.js';
 
 const COMPONENT_ID = 'forms.radio';
-const colorStyles = props => {
-  const SHADE = 600;
-  const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const backgroundColor = getColorV8('background', 600 , props.theme);
-  const iconColor = backgroundColor;
-  const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const iconColor = getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverBorderColor = getColor(borderOptions);
   const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2);
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
   const activeBorderColor = focusBorderColor;
+  const checkedBackgroundColor = getColor(backgroundOptions);
   const checkedBorderColor = focusBorderColor;
-  const checkedBackgroundColor = checkedBorderColor;
-  const checkedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const checkedHoverBackgroundColor = checkedHoverBorderColor;
-  const checkedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme);
-  const checkedActiveBackgroundColor = checkedActiveBorderColor;
-  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const checkedHoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const checkedHoverBorderColor = getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const checkedActiveBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const checkedActiveBorderColor = getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[300]
+  });
   return css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}", " & ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, focusStyles({
-    theme: props.theme,
+    theme,
     styles: {
       borderColor: focusBorderColor
     },
     selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
   }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
-const sizeStyles = props => {
-  const lineHeight = `${props.theme.space.base * 5}px`;
-  const size = `${props.theme.space.base * 4}px`;
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const lineHeight = `${theme.space.base * 5}px`;
+  const size = `${theme.space.base * 4}px`;
   const top = math(`(${lineHeight} - ${size}) / 2`);
-  const iconSize = props.theme.iconSizes.sm;
+  const iconSize = theme.iconSizes.sm;
   const iconPosition = math(`(${size} - ${iconSize}) / 2`);
   const iconTop = math(`${iconPosition} + ${top}`);
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
+  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";border:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, theme.borders.sm, theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
 };
 const StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
   componentId: "sc-qsavpv-0"
-})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles(props), StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRadioInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', StyledRadioLabel, sizeStyles, StyledRadioLabel, StyledRadioLabel, colorStyles, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledRadioInput };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledLabel } from '../common/StyledLabel.js';
 
 const COMPONENT_ID = 'forms.radio_label';
@@ -17,14 +17,11 @@ const sizeStyles = props => {
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
   componentId: "sc-1aq2e5t-0"
 })(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRadioLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledRadioLabel };

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

@@ -6,19 +6,16 @@
 */
 import styled from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 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.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
 })(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRadioMessage.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledRadioMessage };

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

@@ -6,20 +6,17 @@
 */
 import styled from 'styled-components';
 import SvgCircleSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg.js';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledRadioInput } from './StyledRadioInput.js';
 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.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
 })(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRadioSvg.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledRadioSvg };

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,74 @@ 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({
+    variable: 'shadow.small',
+    theme
+  }));
   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 +142,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 +152,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.9',
+  'data-garden-version': '9.0.0',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -144,13 +194,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,