@zendeskgarden/react-colorpickers 9.0.0-next.25 → 9.0.0-next.27

package/dist/esm/elements/ColorPickerDialog/index.js

@@ -5,6 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import React__default, { forwardRef, useRef, useState, useEffect, cloneElement, Children } from 'react';
+import { useTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import { Button } from '@zendeskgarden/react-buttons';
 import { PLACEMENT } from '@zendeskgarden/react-modals';
@@ -33,7 +34,7 @@ import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
 import '../../styled/ColorSwatch/StyledColorSwatchLabel.js';
 import '../../styled/ColorSwatch/StyledIcon.js';
 import '../../styled/ColorSwatch/StyledCell.js';
-import { useText } from '@zendeskgarden/react-theming';
+import { useText, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const ColorPickerDialog = forwardRef((_ref, ref) => {
   let {
@@ -65,6 +66,7 @@ const ColorPickerDialog = forwardRef((_ref, ref) => {
   const ariaLabelText = useText(ColorPickerDialog, {
     'aria-label': ariaLabel
   }, 'aria-label', 'Color picker');
+  const theme = useTheme() || DEFAULT_THEME;
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
@@ -112,6 +114,7 @@ const ColorPickerDialog = forwardRef((_ref, ref) => {
     isAnimated: isAnimated,
     focusOnMount: false,
     placement: placement,
+    offset: theme.space.base,
     referenceElement: referenceElement,
     onClose: () => {
       closeDialog();

package/dist/esm/elements/ColorSwatch/index.js

@@ -122,7 +122,8 @@ const ColorSwatch = forwardRef((_ref, ref) => {
       }, React__default.createElement(StyledColorSwatchLabel, {
         $backgroundColor: value
       }, React__default.createElement(Tooltip, {
-        content: label
+        content: label,
+        zIndex: 1
       }, React__default.createElement(StyledColorSwatchInput, Object.assign({
         "aria-label": label,
         name: name,

package/dist/esm/elements/ColorSwatchDialog/index.js

@@ -5,10 +5,11 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import React__default, { forwardRef, useRef, useState, useEffect, cloneElement, Children } from 'react';
+import { useTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import { Button } from '@zendeskgarden/react-buttons';
 import { PLACEMENT } from '@zendeskgarden/react-modals';
-import { useText } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, useText } from '@zendeskgarden/react-theming';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 import { ColorSwatch } from '../ColorSwatch/index.js';
@@ -65,6 +66,7 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
   const [referenceElement, setReferenceElement] = useState(null);
   const [rowIndex, setRowIndex] = useState(defaultSelectedRowIndex);
   const [colIndex, setColIndex] = useState(defaultSelectedColIndex);
+  const theme = useTheme() || DEFAULT_THEME;
   let backgroundColor;
   if (isControlled) {
     if (selectedRowIndex !== null && selectedColIndex !== null) {
@@ -140,6 +142,7 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     hasArrow: hasArrow,
     focusOnMount: false,
     placement: placement,
+    offset: theme.space.base,
     isAnimated: isAnimated,
     referenceElement: referenceElement,
     onClose: closeDialog,

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.25'
+  'data-garden-version': '9.0.0-next.27'
 })).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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).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.25',
+  'data-garden-version': '9.0.0-next.27',
   'data-test-id': 'colorwell',
   style: {
     background: background(props)

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

@@ -34,7 +34,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   '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.25',
+  'data-garden-version': '9.0.0-next.27',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",

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

@@ -10,7 +10,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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"

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

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

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

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

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

@@ -11,7 +11,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).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.25',
+  'data-garden-version': '9.0.0-next.27',
   '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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"

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

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

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

@@ -33,7 +33,7 @@ const sizeStyles = props => {
 };
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"

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

@@ -9,7 +9,7 @@ import { Button } from '@zendeskgarden/react-buttons';
 
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"

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

@@ -39,7 +39,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",

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

@@ -11,7 +11,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog_body';
 const StyledTooltipBody = styled(TooltipDialog.Body).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"

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

@@ -11,7 +11,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog';
 const StyledTooltipDialog = styled(TooltipDialog).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledTooltipDialog",
   componentId: "sc-1vbkccl-0"

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

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

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

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

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

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

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

@@ -38,7 +38,7 @@ const colorStyles = _ref => {
 const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"

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

@@ -145,7 +145,7 @@ const sizeStyles = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   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$l,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
@@ -279,7 +279,7 @@ const sizeStyles$3 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -291,7 +291,7 @@ const StyledRange = styled__default.default(reactForms.Range).attrs({
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
@@ -319,7 +319,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
@@ -343,7 +343,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -362,7 +362,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -398,7 +398,7 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -412,7 +412,7 @@ const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
@@ -421,7 +421,7 @@ const StyledSliderGroup = styled__default.default.div.attrs({
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -431,7 +431,7 @@ const StyledHexField = styled__default.default(reactForms.Field).attrs({
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
@@ -440,7 +440,7 @@ const StyledLabel = styled__default.default(reactForms.Label).attrs({
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -450,7 +450,7 @@ const StyledInput = styled__default.default(reactForms.Input).attrs({
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
@@ -468,7 +468,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
@@ -499,7 +499,7 @@ const sizeStyles = props => {
 };
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
@@ -507,7 +507,7 @@ const StyledSliders = styled__default.default.div.attrs({
 
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
@@ -544,7 +544,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -554,7 +554,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
 const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipdialog';
 const StyledTooltipDialog = styled__default.default(reactModals.TooltipDialog).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledTooltipDialog",
   componentId: "sc-1vbkccl-0"
@@ -563,7 +563,7 @@ const StyledTooltipDialog = styled__default.default(reactModals.TooltipDialog).a
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipdialog_body';
 const StyledTooltipBody = styled__default.default(reactModals.TooltipDialog.Body).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
@@ -572,7 +572,7 @@ const StyledTooltipBody = styled__default.default(reactModals.TooltipDialog.Body
 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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -581,7 +581,7 @@ const StyledColorSwatch = styled__default.default.table.attrs({
 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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
@@ -616,7 +616,7 @@ const colorStyles = _ref => {
 const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -648,7 +648,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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -657,7 +657,7 @@ const StyledIcon = styled__default.default(SvgCheckSmFill).attrs({
 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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1252,6 +1252,7 @@ const ColorPickerDialog = React.forwardRef((_ref, ref) => {
   const ariaLabelText = reactTheming.useText(ColorPickerDialog, {
     'aria-label': ariaLabel
   }, 'aria-label', 'Color picker');
+  const theme = styled.useTheme() || reactTheming.DEFAULT_THEME;
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
@@ -1299,6 +1300,7 @@ const ColorPickerDialog = React.forwardRef((_ref, ref) => {
     isAnimated: isAnimated,
     focusOnMount: false,
     placement: placement,
+    offset: theme.space.base,
     referenceElement: referenceElement,
     onClose: () => {
       closeDialog();
@@ -1424,7 +1426,8 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       }, React__namespace.default.createElement(StyledColorSwatchLabel, {
         $backgroundColor: value
       }, React__namespace.default.createElement(reactTooltips.Tooltip, {
-        content: label
+        content: label,
+        zIndex: 1
       }, React__namespace.default.createElement(StyledColorSwatchInput, Object.assign({
         "aria-label": label,
         name: name,
@@ -1480,6 +1483,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [rowIndex, setRowIndex] = React.useState(defaultSelectedRowIndex);
   const [colIndex, setColIndex] = React.useState(defaultSelectedColIndex);
+  const theme = styled.useTheme() || reactTheming.DEFAULT_THEME;
   let backgroundColor;
   if (isControlled) {
     if (selectedRowIndex !== null && selectedColIndex !== null) {
@@ -1555,6 +1559,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
     hasArrow: hasArrow,
     focusOnMount: false,
     placement: placement,
+    offset: theme.space.base,
     isAnimated: isAnimated,
     referenceElement: referenceElement,
     onClose: closeDialog,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "9.0.0-next.25",
+  "version": "9.0.0-next.27",
   "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.25",
-    "@zendeskgarden/react-forms": "^9.0.0-next.25",
-    "@zendeskgarden/react-modals": "^9.0.0-next.25",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.25",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.27",
+    "@zendeskgarden/react-forms": "^9.0.0-next.27",
+    "@zendeskgarden/react-modals": "^9.0.0-next.27",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.27",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.3.1",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.25",
+    "@zendeskgarden/react-theming": "^9.0.0-next.27",
     "@zendeskgarden/svg-icons": "7.2.0"
   },
   "keywords": [
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
+  "gitHead": "1e33779f9a7a284af3eda1405fa624c00e739a6a"
 }