@zendeskgarden/react-colorpickers 9.0.0-next.11 → 9.0.0-next.12

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

@@ -30,7 +30,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-version': '9.0.0-next.12'
 })).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11',
+  'data-garden-version': '9.0.0-next.12',
   '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.11',
+  'data-garden-version': '9.0.0-next.12',
   '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.11',
+  'data-garden-version': '9.0.0-next.12',
   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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11',
+  'data-garden-version': '9.0.0-next.12',
   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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"

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

@@ -26,7 +26,7 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11',
+  'data-garden-version': '9.0.0-next.12',
   '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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"

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

@@ -5,18 +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 { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 
-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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
-})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md);
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };

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

@@ -38,7 +38,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.11',
+  'data-garden-version': '9.0.0-next.12',
   '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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).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.11',
+  'data-garden-version': '9.0.0-next.12',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",

package/dist/index.cjs.js

@@ -131,22 +131,22 @@ const getThumbPosition = (x, y, rtl, container) => {
   };
 };
 
-const COMPONENT_ID$m = 'colorpickers.colorpicker';
+const COMPONENT_ID$l = 'colorpickers.colorpicker';
 const getColorPickerWidth = props => {
   return props.isOpaque ? 268 : 312;
 };
 const StyledColorPicker = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
+})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledColorPicker.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$l = 'colorpickers.colorpicker_range';
+const COMPONENT_ID$k = 'colorpickers.colorpicker_range';
 const thumbStyles = function (styles) {
   let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return `
@@ -272,23 +272,23 @@ 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.11',
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.0.0-next.12',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
   componentId: "sc-ug3wi9-0"
 })(["", ";", " ", ";", ";"], sizeStyles$2, trackStyles(`
     border-radius: 0;
-  `), colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+  `), colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 StyledRange.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$k = 'colorpickers.colorpicker_hue';
+const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
@@ -297,7 +297,7 @@ StyledHueRange.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$j = 'colorpickers.colorpicker_alpha';
+const COMPONENT_ID$i = 'colorpickers.colorpicker_alpha';
 const background$3 = props => {
   const direction = `to ${props.theme.rtl ? 'left' : 'right'}`;
   const fromColor = `rgba(${props.red}, ${props.green}, ${props.blue}, 0)`;
@@ -318,8 +318,8 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     backgroundSize: 'auto',
     background: background$3(props)
   },
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.0.0-next.12'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
@@ -328,7 +328,7 @@ StyledAlphaRange.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$i = 'colorpickers.colorpicker_preview_box';
+const COMPONENT_ID$h = 'colorpickers.colorpicker_preview_box';
 const background$2 = props => {
   const alpha = props.alpha ? props.alpha / 100 : 0;
   let retVal = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
@@ -345,18 +345,18 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
   style: {
     background: background$2(props)
   },
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.11',
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.0.0-next.12',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
   componentId: "sc-1z5nh7-0"
-})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => polished.rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
+})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => polished.rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledPreview.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$h = 'colorpickers.colorpicker_colorwell';
+const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell';
 const background$1 = props => {
   const blackAlpha = polished.rgba(props.theme.palette.black, 0.9);
   const black = `linear-gradient(0deg, ${props.theme.palette.black}, ${blackAlpha} 1%, transparent 99%)`;
@@ -367,8 +367,8 @@ const background$1 = props => {
   return `${black}, ${white}, ${color}`;
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.11',
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.0.0-next.12',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -376,12 +376,12 @@ const StyledColorWell = styled__default.default.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWell",
   componentId: "sc-1gg9z8m-0"
-})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledColorWell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell_thumb';
+const COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
 const sizeStyles$1 = theme => {
   const borderWidth = polished.stripUnit(theme.borderWidths.sm) * 2;
   const size = theme.space.base * 5;
@@ -395,8 +395,8 @@ 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.11',
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.0.0-next.12',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -405,74 +405,74 @@ const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1npyab0-0"
-})(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, reactTheming.getColorV8('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, reactTheming.getColorV8('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledColorWellThumb.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$f = 'colorpickers.colorpicker_slider_group';
+const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
-})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledSliderGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$e = 'colorpickers.colorpicker_hex_field';
+const COMPONENT_ID$d = '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.11',
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.0.0-next.12',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
   componentId: "sc-ijq1c-0"
-})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledHexField.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$d = 'colorpickers.colorpicker_label';
+const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$c = 'colorpickers.colorpicker_input';
+const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.11',
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.0.0-next.12',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1uzlutt-0"
-})(["text-align:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["text-align:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$b = 'colorpickers.colorpicker_input_group';
+const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
-})(["display:flex;justify-content:space-between;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["display:flex;justify-content:space-between;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledInputGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$a = 'colorpickers.colorpicker_rgb_field';
+const COMPONENT_ID$9 = 'colorpickers.colorpicker_rgb_field';
 const sizeStyles = theme => {
   const margin = `${theme.space.base * 1.5}px`;
   const width = `${theme.space.base * 12.75}px`;
@@ -483,37 +483,35 @@ const sizeStyles = theme => {
   `;
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
-})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledRGBAField.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'colorpickers.colorpicker_sliders';
+const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.11'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
-})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledSliders.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
-})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md);
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -548,7 +546,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.11',
+  'data-garden-version': '9.0.0-next.12',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -561,7 +559,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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-gykkrw-0"
@@ -573,7 +571,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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
@@ -585,7 +583,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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -597,7 +595,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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
@@ -622,7 +620,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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -657,7 +655,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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -669,7 +667,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.11'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"

package/dist/typings/styled/ColorPickerDialog/StyledButton.d.ts

@@ -10,6 +10,5 @@
  */
 export declare const StyledButton: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object & {
     isNeutral: boolean;
-    'data-garden-id': string;
     'data-garden-version': string;
 }, string | number | symbol>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "9.0.0-next.11",
+  "version": "9.0.0-next.12",
   "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.11",
-    "@zendeskgarden/react-forms": "^9.0.0-next.11",
-    "@zendeskgarden/react-modals": "^9.0.0-next.11",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.11",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.12",
+    "@zendeskgarden/react-forms": "^9.0.0-next.12",
+    "@zendeskgarden/react-modals": "^9.0.0-next.12",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.12",
     "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.11",
+    "@zendeskgarden/react-theming": "^9.0.0-next.12",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "0de1cc664807bd993ccd3beeb78e8fd1f3828320"
+  "gitHead": "7925ff78236795111e2953efbce549839df3a86d"
 }