@zendeskgarden/react-colorpickers 9.0.0-next.8 → 9.0.0-next.9

package/dist/esm/styled/ColorPicker/StyledAlphaRange.js

@@ -5,9 +5,8 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getCheckeredBackground } from '@zendeskgarden/react-theming';
 import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
-import { checkeredBackground } from '../common/checkeredBackground.js';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_alpha';
 const background = props => {
@@ -16,8 +15,14 @@ const background = props => {
   const toColor = `rgb(${props.red}, ${props.green}, ${props.blue})`;
   const positionY = getTrackMargin(props);
   const height = getTrackHeight(props);
-  const gradientBackground = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
-  return `${gradientBackground}, ${checkeredBackground(props.theme, height, positionY, 'repeat-x')}`;
+  const overlay = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
+  return getCheckeredBackground({
+    theme: props.theme,
+    size: height,
+    positionY,
+    repeat: 'repeat-x',
+    overlay
+  });
 };
 const StyledAlphaRange = styled(StyledRange).attrs(props => ({
   style: {
@@ -25,7 +30,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"

package/dist/esm/styled/ColorPicker/StyledColorPicker.js

@@ -13,7 +13,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"

package/dist/esm/styled/ColorPicker/StyledColorWell.js

@@ -20,7 +20,7 @@ const background = props => {
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-test-id': 'colorwell',
   style: {
     background: background(props)

package/dist/esm/styled/ColorPicker/StyledColorWellThumb.js

@@ -23,7 +23,7 @@ const sizeStyles = theme => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,

package/dist/esm/styled/ColorPicker/StyledHexField.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",

package/dist/esm/styled/ColorPicker/StyledHueRange.js

@@ -11,7 +11,7 @@ import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRan
 const COMPONENT_ID = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"

package/dist/esm/styled/ColorPicker/StyledInput.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",

package/dist/esm/styled/ColorPicker/StyledInputGroup.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"

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

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"

package/dist/esm/styled/ColorPicker/StyledPreview.js

@@ -6,16 +6,18 @@
 */
 import styled from 'styled-components';
 import { rgba } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { checkeredBackground } from '../common/checkeredBackground.js';
+import { retrieveComponentStyles, DEFAULT_THEME, getCheckeredBackground } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_preview_box';
 const background = props => {
   const alpha = props.alpha ? props.alpha / 100 : 0;
-  const color = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
-  let retVal = `linear-gradient(${color}, ${color})`;
+  let retVal = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
   if (!props.isOpaque) {
-    retVal = `${retVal}, ${checkeredBackground(props.theme, 13)}`;
+    retVal = getCheckeredBackground({
+      theme: props.theme,
+      size: 13,
+      overlay: retVal
+    });
   }
   return retVal;
 };
@@ -24,7 +26,7 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",

package/dist/esm/styled/ColorPicker/StyledRGBAField.js

@@ -20,7 +20,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"

package/dist/esm/styled/ColorPicker/StyledSliderGroup.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"

package/dist/esm/styled/ColorPicker/StyledSliders.js

@@ -11,7 +11,7 @@ import { getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
 const COMPONENT_ID = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"

package/dist/esm/styled/ColorPickerDialog/StyledButton.js

@@ -12,7 +12,7 @@ const COMPONENT_ID = 'colorpickers.colordialog_button';
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"

package/dist/esm/styled/ColorPickerDialog/StyledButtonPreview.js

@@ -6,19 +6,18 @@
 */
 import styled from 'styled-components';
 import { rgba } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { checkeredBackground } from '../common/checkeredBackground.js';
+import { getCheckeredBackground, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colordialog_preview';
 const background = props => {
   const {
     backgroundColor
   } = props;
-  let color;
+  let retVal;
   if (typeof backgroundColor === 'string') {
-    color = backgroundColor;
+    retVal = backgroundColor;
   } else if (backgroundColor === undefined) {
-    color = props.theme.palette.white;
+    retVal = props.theme.palette.white;
   } else {
     const {
       red,
@@ -26,16 +25,20 @@ const background = props => {
       blue,
       alpha = 1
     } = backgroundColor;
-    color = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
+    retVal = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
   }
-  return `linear-gradient(${color}, ${color})`;
+  return retVal;
 };
 const StyledButtonPreview = styled.span.attrs(props => ({
   style: {
-    background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
+    background: getCheckeredBackground({
+      theme: props.theme,
+      size: 8,
+      overlay: background(props)
+    })
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",

package/dist/esm/styled/ColorPickerDialog/StyledTooltipBody.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"

package/dist/esm/styled/ColorPickerDialog/StyledTooltipModal.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-gykkrw-0"

package/dist/esm/styled/ColorSwatch/StyledCell.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatch.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatchInput.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatchLabel.js

@@ -25,7 +25,7 @@ const colorStyles = props => {
 const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"

package/dist/esm/styled/ColorSwatch/StyledIcon.js

@@ -12,7 +12,7 @@ import { StyledColorSwatchInput } from './StyledColorSwatchInput.js';
 const COMPONENT_ID = 'colorpickers.colorswatch_check';
 const StyledIcon = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"

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

@@ -136,7 +136,7 @@ const sizeStyles = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",

package/dist/index.cjs.js

@@ -137,7 +137,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
@@ -273,7 +273,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -288,7 +288,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$k = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
@@ -297,25 +297,6 @@ StyledHueRange.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const checkeredBackground = function (theme, size) {
-  let positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
-  const color = reactTheming.getColorV8('neutralHue', 400, theme);
-  const dimensions = `${size}px ${size}px`;
-  const positionX1 = theme.rtl ? '100%' : '0';
-  const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
-  const position1 = `${positionX1} ${positionY}px`;
-  const position2 = `${positionX2} ${size / 2 + positionY}px`;
-  const position3 = `${positionX2} ${positionY}px`;
-  const position4 = `${positionX1} ${size / -2 + positionY}px`;
-  return `
-    linear-gradient(45deg, ${color} 25%, transparent 25%) ${position1} / ${dimensions} ${repeat},
-    linear-gradient(45deg, transparent 75%, ${color} 75%) ${position2} / ${dimensions} ${repeat},
-    linear-gradient(135deg, ${color} 25%, transparent 25%) ${position3} / ${dimensions} ${repeat},
-    linear-gradient(135deg, transparent 75%, ${color} 75%) ${position4} / ${dimensions} ${repeat}
-  `;
-};
-
 const COMPONENT_ID$j = 'colorpickers.colorpicker_alpha';
 const background$3 = props => {
   const direction = `to ${props.theme.rtl ? 'left' : 'right'}`;
@@ -323,8 +304,14 @@ const background$3 = props => {
   const toColor = `rgb(${props.red}, ${props.green}, ${props.blue})`;
   const positionY = getTrackMargin(props);
   const height = getTrackHeight(props);
-  const gradientBackground = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
-  return `${gradientBackground}, ${checkeredBackground(props.theme, height, positionY, 'repeat-x')}`;
+  const overlay = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
+  return reactTheming.getCheckeredBackground({
+    theme: props.theme,
+    size: height,
+    positionY,
+    repeat: 'repeat-x',
+    overlay
+  });
 };
 const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
   style: {
@@ -332,7 +319,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
@@ -344,10 +331,13 @@ StyledAlphaRange.defaultProps = {
 const COMPONENT_ID$i = 'colorpickers.colorpicker_preview_box';
 const background$2 = props => {
   const alpha = props.alpha ? props.alpha / 100 : 0;
-  const color = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
-  let retVal = `linear-gradient(${color}, ${color})`;
+  let retVal = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
   if (!props.isOpaque) {
-    retVal = `${retVal}, ${checkeredBackground(props.theme, 13)}`;
+    retVal = reactTheming.getCheckeredBackground({
+      theme: props.theme,
+      size: 13,
+      overlay: retVal
+    });
   }
   return retVal;
 };
@@ -356,7 +346,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -378,7 +368,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -406,7 +396,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -423,7 +413,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$f = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
@@ -435,7 +425,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -448,7 +438,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
@@ -460,7 +450,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -473,7 +463,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
@@ -494,7 +484,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
@@ -506,7 +496,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$9 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
@@ -519,7 +509,7 @@ const COMPONENT_ID$8 = 'colorpickers.colordialog_button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
@@ -533,11 +523,11 @@ const background = props => {
   const {
     backgroundColor
   } = props;
-  let color;
+  let retVal;
   if (typeof backgroundColor === 'string') {
-    color = backgroundColor;
+    retVal = backgroundColor;
   } else if (backgroundColor === undefined) {
-    color = props.theme.palette.white;
+    retVal = props.theme.palette.white;
   } else {
     const {
       red,
@@ -545,16 +535,20 @@ const background = props => {
       blue,
       alpha = 1
     } = backgroundColor;
-    color = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
+    retVal = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
   }
-  return `linear-gradient(${color}, ${color})`;
+  return retVal;
 };
 const StyledButtonPreview = styled__default.default.span.attrs(props => ({
   style: {
-    background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
+    background: reactTheming.getCheckeredBackground({
+      theme: props.theme,
+      size: 8,
+      overlay: background(props)
+    })
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.8',
+  'data-garden-version': '9.0.0-next.9',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -567,7 +561,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-gykkrw-0"
@@ -579,7 +573,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
@@ -591,7 +585,7 @@ StyledTooltipBody.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -603,7 +597,7 @@ StyledColorSwatch.defaultProps = {
 const COMPONENT_ID$3 = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
@@ -628,7 +622,7 @@ const colorStyles = props => {
 const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -663,7 +657,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
 const StyledIcon = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -675,7 +669,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,10 +23,10 @@
   "dependencies": {
     "@zendeskgarden/container-grid": "^3.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.8",
-    "@zendeskgarden/react-forms": "^9.0.0-next.8",
-    "@zendeskgarden/react-modals": "^9.0.0-next.8",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.8",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.9",
+    "@zendeskgarden/react-forms": "^9.0.0-next.9",
+    "@zendeskgarden/react-modals": "^9.0.0-next.9",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.9",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.8",
+    "@zendeskgarden/react-theming": "^9.0.0-next.9",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }

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

@@ -1,28 +0,0 @@
-/**
-* Copyright Zendesk, Inc.
-*
-* 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 { getColorV8 } from '@zendeskgarden/react-theming';
-
-const checkeredBackground = function (theme, size) {
-  let positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
-  const color = getColorV8('neutralHue', 400, theme);
-  const dimensions = `${size}px ${size}px`;
-  const positionX1 = theme.rtl ? '100%' : '0';
-  const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
-  const position1 = `${positionX1} ${positionY}px`;
-  const position2 = `${positionX2} ${size / 2 + positionY}px`;
-  const position3 = `${positionX2} ${positionY}px`;
-  const position4 = `${positionX1} ${size / -2 + positionY}px`;
-  return `
-    linear-gradient(45deg, ${color} 25%, transparent 25%) ${position1} / ${dimensions} ${repeat},
-    linear-gradient(45deg, transparent 75%, ${color} 75%) ${position2} / ${dimensions} ${repeat},
-    linear-gradient(135deg, ${color} 25%, transparent 25%) ${position3} / ${dimensions} ${repeat},
-    linear-gradient(135deg, transparent 75%, ${color} 75%) ${position4} / ${dimensions} ${repeat}
-  `;
-};
-
-export { checkeredBackground };

package/dist/typings/styled/common/checkeredBackground.d.ts

@@ -1,8 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * 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 { DefaultTheme } from 'styled-components';
-export declare const checkeredBackground: (theme: DefaultTheme, size: number, positionY?: number, repeat?: string) => string;