@zendeskgarden/react-colorpickers 9.0.0-next.1 → 9.0.0-next.2

package/dist/index.esm.js

@@ -6,19 +6,20 @@
  */
 
 import * as React from 'react';
-import React__default, { Children, useContext, useRef, useState, useEffect, useMemo, useCallback, forwardRef, useReducer, cloneElement } from 'react';
+import React__default, { useContext, useRef, useState, useEffect, useMemo, useCallback, forwardRef, useReducer, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import { Range, Field, Label, Input } from '@zendeskgarden/react-forms';
 import throttle from 'lodash.throttle';
 import styled, { ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, useText } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText, useDocument } from '@zendeskgarden/react-theming';
 import { stripUnit, math, rgba, hsl, parseToRgb, readableColor, parseToHsl, rgb } from 'polished';
 import { Button } from '@zendeskgarden/react-buttons';
 import { TooltipModal, PLACEMENT } from '@zendeskgarden/react-modals';
 import isEqual from 'lodash.isequal';
 import { composeEventHandlers, useId } from '@zendeskgarden/container-utilities';
-import { Tooltip } from '@zendeskgarden/react-tooltips';
+import { mergeRefs } from 'react-merge-refs';
 import { useGrid } from '@zendeskgarden/container-grid';
+import { Tooltip } from '@zendeskgarden/react-tooltips';
 
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
@@ -119,22 +120,22 @@ const getThumbPosition = (x, y, rtl, container) => {
   };
 };
 
-const COMPONENT_ID$l = 'colorpickers.colorpicker';
+const COMPONENT_ID$m = 'colorpickers.colorpicker';
 const getColorPickerWidth = props => {
   return props.isOpaque ? 268 : 312;
 };
 const StyledColorPicker = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$m,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledColorPicker.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$k = 'colorpickers.colorpicker_range';
+const COMPONENT_ID$l = 'colorpickers.colorpicker_range';
 const thumbStyles = function (styles) {
   let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return `
@@ -260,23 +261,23 @@ const sizeStyles$2 = props => {
   `;
 };
 const StyledRange = styled(Range).attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.0.0-next.2',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
   componentId: "sc-ug3wi9-0"
 })(["", ";", " ", ";", ";"], sizeStyles$2, trackStyles(`
     border-radius: 0;
-  `), colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$k, props));
+  `), colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledRange.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
+const COMPONENT_ID$k = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -304,7 +305,7 @@ const checkeredBackground = function (theme, size) {
   `;
 };
 
-const COMPONENT_ID$i = 'colorpickers.colorpicker_alpha';
+const COMPONENT_ID$j = '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)`;
@@ -319,8 +320,8 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     backgroundSize: 'auto',
     background: background$3(props)
   },
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.0.0-next.2'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -329,7 +330,7 @@ StyledAlphaRange.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$h = 'colorpickers.colorpicker_preview_box';
+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})`;
@@ -343,18 +344,18 @@ const StyledPreview = styled.div.attrs(props => ({
   style: {
     background: background$2(props)
   },
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.0.0-next.2',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
   componentId: "sc-d70mj1-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 => 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 => retrieveComponentStyles(COMPONENT_ID$h, 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 => 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 => retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledPreview.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell';
+const COMPONENT_ID$h = 'colorpickers.colorpicker_colorwell';
 const background$1 = props => {
   const blackAlpha = rgba(props.theme.palette.black, 0.9);
   const black = `linear-gradient(0deg, ${props.theme.palette.black}, ${blackAlpha} 1%, transparent 99%)`;
@@ -365,8 +366,8 @@ const background$1 = props => {
   return `${black}, ${white}, ${color}`;
 };
 const StyledColorWell = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.0.0-next.2',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -374,12 +375,12 @@ const StyledColorWell = styled.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWell",
   componentId: "sc-54ly7s-0"
-})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledColorWell.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
+const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell_thumb';
 const sizeStyles$1 = theme => {
   const borderWidth = stripUnit(theme.borderWidths.sm) * 2;
   const size = theme.space.base * 5;
@@ -393,8 +394,8 @@ const sizeStyles$1 = theme => {
   `;
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.0.0-next.2',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -403,74 +404,74 @@ const StyledColorWellThumb = styled.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1pnz3jz-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`, getColor('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$f, 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`, getColor('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledColorWellThumb.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
+const COMPONENT_ID$f = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
-})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$e, props));
+})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledSliderGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
+const COMPONENT_ID$e = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.0.0-next.2',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
   componentId: "sc-1lk14t4-0"
-})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledHexField.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
+const COMPONENT_ID$d = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
+const COMPONENT_ID$c = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.0.0-next.2',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1iap93p-0"
-})(["text-align:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["text-align:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
+const COMPONENT_ID$b = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
-})(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID$a, props));
+})(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledInputGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'colorpickers.colorpicker_rgb_field';
+const COMPONENT_ID$a = 'colorpickers.colorpicker_rgb_field';
 const sizeStyles = theme => {
   const margin = `${theme.space.base * 1.5}px`;
   const width = `${theme.space.base * 12.75}px`;
@@ -481,42 +482,42 @@ const sizeStyles = theme => {
   `;
 };
 const StyledRGBAField = styled(Field).attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
-})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledRGBAField.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
+const COMPONENT_ID$9 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-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 => retrieveComponentStyles(COMPONENT_ID$8, 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 => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledSliders.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
+const COMPONENT_ID$8 = 'colorpickers.colordialog_button';
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-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$7, 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, props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$6 = 'colorpickers.colordialog_preview';
+const COMPONENT_ID$7 = 'colorpickers.colordialog_preview';
 const background = props => {
   const {
     backgroundColor
@@ -541,102 +542,124 @@ const StyledButtonPreview = styled.span.attrs(props => ({
   style: {
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.2',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
   componentId: "sc-1jzysg3-0"
-})(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledButtonPreview.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
+const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled(TooltipModal).attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
-})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledTooltipModal.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
+const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled(TooltipModal.Body).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
-})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledTooltipBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'colorpickers.swatch_button';
-const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
-  as: 'button',
-  'data-garden-id': COMPONENT_ID$3,
-  'data-test-id': props.backgroundColor,
-  'data-garden-version': '9.0.0-next.1'
-})).withConfig({
-  displayName: "StyledSwatchButton",
-  componentId: "sc-edpwpp-0"
-})(["transition:box-shadow 0.1s ease-in-out;outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;", " ", ";"], props => props.theme.borderRadii.md, props => focusStyles({
-  theme: props.theme
-}), props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledSwatchButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'colorpickers.color_swatch';
+const COMPONENT_ID$4 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.1',
-  role: 'grid'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
-})(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledColorSwatch.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
+const COMPONENT_ID$3 = 'colorpickers.color_swatch_input';
+const StyledColorSwatchInput = styled.input.attrs({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.2'
+}).withConfig({
+  displayName: "StyledColorSwatchInput",
+  componentId: "sc-em45h0-0"
+})(["position:absolute;opacity:0;z-index:1;margin:0;width:100%;height:100%;", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
+StyledColorSwatchInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$2 = 'colorpickers.color_swatch_label';
 const colorStyles = props => {
-  const {
-    theme,
-    color
-  } = props;
+  const boxShadow = props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35));
   const {
     alpha
-  } = parseToRgb(color);
-  let checkColor = readableColor(color, theme.colors.foreground, theme.colors.background);
-  if (alpha !== undefined && alpha < 0.4) {
-    checkColor = theme.colors.foreground;
+  } = parseToRgb(props.backgroundColor);
+  let foregroundColor;
+  if (alpha && alpha < 0.4) {
+    foregroundColor = props.theme.colors.foreground;
+  } else {
+    foregroundColor = readableColor(props.backgroundColor, props.theme.colors.foreground, props.theme.colors.background);
   }
   return `
-    color: ${checkColor}
+    color: ${foregroundColor};
+
+    &[data-garden-focus-visible] {
+      box-shadow: ${boxShadow};
   `;
 };
-const StyledIcon = styled(_ref => {
-  let {
-    children,
-    color,
-    theme,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
+const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
+  as: 'label',
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.2'
+}).withConfig({
+  displayName: "StyledColorSwatchLabel",
+  componentId: "sc-1aghocg-0"
+})(["position:relative;border-radius:", ";cursor:pointer;", ";", ";"], props => props.theme.borderRadii.md, colorStyles, props => retrieveComponentStyles(COMPONENT_ID$2, props));
+StyledColorSwatchLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var SvgCheckSmFill = function SvgCheckSmFill(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M3 6l2 2 4-4"
+  })));
+};
+
+const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
+const StyledIcon = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
-})(["transition:opacity 0.2s ease-in-out;opacity:", ";width:", "px;height:", "px;", " ", ";"], props => props.selected ? 1 : 0, props => props.theme.space.base * 5, props => props.theme.space.base * 5, colorStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -644,7 +667,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1198,17 +1221,17 @@ Colorpicker.propTypes = {
   defaultColor: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
 };
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
   })));
@@ -1226,7 +1249,6 @@ const ColorpickerDialog = forwardRef((_ref, ref) => {
     isAnimated,
     isOpaque,
     isOpen,
-    popperModifiers,
     zIndex,
     focusInset,
     disabled,
@@ -1288,7 +1310,6 @@ const ColorpickerDialog = forwardRef((_ref, ref) => {
   }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, _extends$2({
     ref: ref,
     hasArrow: hasArrow,
-    popperModifiers: popperModifiers,
     zIndex: zIndex,
     isAnimated: isAnimated,
     isOpaque: isOpaque,
@@ -1318,7 +1339,6 @@ ColorpickerDialog.propTypes = {
   disabled: PropTypes.bool,
   labels: PropTypes.object,
   buttonProps: PropTypes.object,
-  popperModifiers: PropTypes.any,
   zIndex: PropTypes.number,
   hasArrow: PropTypes.bool,
   isAnimated: PropTypes.bool,
@@ -1333,109 +1353,134 @@ ColorpickerDialog.defaultProps = {
 };
 ColorpickerDialog.displayName = 'ColorpickerDialog';
 
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgCheckSmFill = function SvgCheckSmFill(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M3 6l2 2 4-4"
-  })));
-};
-
 const ColorSwatch = forwardRef((_ref, ref) => {
   let {
+    name,
     colors,
+    isCheckboxGroup,
+    defaultSelectedColIndex,
+    defaultSelectedRowIndex,
+    selectedColIndex,
+    selectedRowIndex,
+    onSelect,
     ...props
   } = _ref;
-  const {
-    rtl
-  } = useContext(ThemeContext);
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const environment = useDocument(theme);
+  const gridRef = useRef();
+  const [rowIndex, setRowIndex] = useState(selectedRowIndex === null ? undefined : selectedRowIndex);
+  const [colIndex, setColIndex] = useState(selectedColIndex === null ? undefined : selectedColIndex);
+  const isControlled = selectedColIndex !== undefined && selectedRowIndex !== undefined;
   const {
     getGridCellProps
   } = useGrid({
-    rtl,
+    environment,
+    rtl: theme.rtl,
     matrix: colors,
-    selection: true,
     wrap: true,
     idPrefix: useId(undefined),
-    ...props
+    defaultRowIndex: defaultSelectedRowIndex,
+    defaultColIndex: defaultSelectedColIndex,
+    rowIndex,
+    colIndex,
+    onChange: (row, col) => {
+      setRowIndex(row);
+      setColIndex(col);
+    }
   });
-  return React__default.createElement(StyledColorSwatch, {
-    ref: ref
-  }, React__default.createElement("tbody", null, colors.map((row, rowIdx) => React__default.createElement("tr", {
+  return React__default.createElement(StyledColorSwatch, _extends$2({
+    role: "grid",
+    ref: mergeRefs([gridRef, ref])
+  }, props), React__default.createElement("tbody", null, colors.map((row, _rowIndex) => React__default.createElement("tr", {
     key: row[0].value
-  }, row.map((color, colIdx) => {
+  }, row.map((color, _colIndex) => {
     const {
       label,
       value
     } = color;
     const {
-      'aria-selected': ariaSelected,
-      ...other
+      role,
+      onFocus,
+      ...gridCellProps
     } = getGridCellProps({
-      colIdx,
-      rowIdx,
-      type: 'button',
-      role: undefined
+      colIndex: _colIndex,
+      rowIndex: _rowIndex
     });
+    const checked = isControlled ? selectedRowIndex === _rowIndex && selectedColIndex === _colIndex : undefined;
+    const defaultChecked = isControlled ? undefined : defaultSelectedRowIndex === _rowIndex && defaultSelectedColIndex === _colIndex;
+    const handleChange = event => {
+      if (onSelect) {
+        if (event.target.checked) {
+          onSelect(_rowIndex, _colIndex);
+        } else {
+          onSelect(null, null);
+        }
+      }
+      if (isCheckboxGroup && event.target.checked) {
+        const inputs = gridRef.current?.querySelectorAll('input');
+        inputs?.forEach(input => {
+          if (input !== event.target) {
+            input.checked = false;
+          }
+        });
+      }
+    };
+    const handleBlur = event => {
+      event.target.parentElement?.removeAttribute('data-garden-focus-visible');
+      if (!(isCheckboxGroup || gridRef.current?.contains(event.relatedTarget))) {
+        const selectedInput = gridRef.current?.querySelector(`input[name='${event.target.name}']:checked`);
+        if (selectedInput !== null) {
+          const inputs = gridRef.current?.querySelectorAll('input');
+          inputs?.forEach(input => input.setAttribute('tabIndex', input.checked ? '0' : '-1'));
+        }
+      }
+    };
+    const handleFocus = composeEventHandlers(onFocus, event => event.target.parentElement?.setAttribute('data-garden-focus-visible', 'true'));
     return React__default.createElement(StyledCell, {
       key: value,
-      "aria-selected": ariaSelected
+      role: role
+    }, React__default.createElement(StyledColorSwatchLabel, {
+      backgroundColor: value
     }, React__default.createElement(Tooltip, {
       content: label
-    }, React__default.createElement(StyledSwatchButton, _extends$2({
-      backgroundColor: value,
-      "aria-pressed": ariaSelected,
-      "aria-label": label
-    }, other), React__default.createElement(StyledIcon, {
-      color: value,
-      selected: ariaSelected
-    }, React__default.createElement(SvgCheckSmFill, null)))));
+    }, React__default.createElement(StyledColorSwatchInput, _extends$2({
+      "aria-label": label,
+      name: name,
+      type: isCheckboxGroup ? 'checkbox' : 'radio',
+      value: value,
+      defaultChecked: defaultChecked,
+      checked: checked,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChange: handleChange
+    }, gridCellProps))), React__default.createElement(StyledIcon, null)));
   })))));
 });
 ColorSwatch.displayName = 'ColorSwatch';
 ColorSwatch.propTypes = {
+  name: PropTypes.string.isRequired,
   colors: PropTypes.arrayOf(PropTypes.any).isRequired,
-  rowIndex: PropTypes.number,
-  colIndex: PropTypes.number,
+  isCheckboxGroup: PropTypes.bool,
   selectedRowIndex: PropTypes.number,
   selectedColIndex: PropTypes.number,
-  defaultRowIndex: PropTypes.number,
-  defaultColIndex: PropTypes.number,
   defaultSelectedRowIndex: PropTypes.number,
   defaultSelectedColIndex: PropTypes.number,
-  onChange: PropTypes.func,
   onSelect: PropTypes.func
 };
 
 const ColorSwatchDialog = forwardRef((_ref, ref) => {
   let {
+    name,
     colors,
-    rowIndex,
-    colIndex,
+    isCheckboxGroup,
     selectedRowIndex,
     selectedColIndex,
-    defaultRowIndex,
-    defaultColIndex,
     defaultSelectedRowIndex,
     defaultSelectedColIndex,
     placement,
-    onChange,
     onSelect,
     hasArrow,
     isAnimated,
-    popperModifiers,
     zIndex,
     isOpen,
     focusInset,
@@ -1446,17 +1491,21 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     'aria-label': ariaLabel,
     ...props
   } = _ref;
-  const controlledFocus = rowIndex !== null && colIndex !== null && rowIndex !== undefined && colIndex !== undefined;
-  const controlledSelect = selectedRowIndex !== null && selectedColIndex !== null && selectedRowIndex !== undefined && selectedColIndex !== undefined;
-  const isControlled = controlledFocus || controlledSelect;
+  const isControlled = selectedRowIndex !== undefined && selectedColIndex !== undefined;
   const isDialogControlled = isOpen !== undefined && isOpen !== null;
   const buttonRef = useRef(null);
   const colorSwatchRef = useRef(null);
-  const [referenceElement, setReferenceElement] = useState();
-  const [uncontrolledSelectedRowIndex, setUncontrolledSelectedRowIndex] = useState(defaultSelectedRowIndex || 0);
-  const [uncontrolledSelectedColIndex, setUncontrolledSelectedColIndex] = useState(defaultSelectedColIndex || 0);
-  const [uncontrolledRowIndex, setUncontrolledRowIndex] = useState(defaultRowIndex || 0);
-  const [uncontrolledColIndex, setUncontrolledColIndex] = useState(defaultColIndex || 0);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [rowIndex, setRowIndex] = useState(defaultSelectedRowIndex);
+  const [colIndex, setColIndex] = useState(defaultSelectedColIndex);
+  let backgroundColor;
+  if (isControlled) {
+    if (selectedRowIndex !== null && selectedColIndex !== null) {
+      backgroundColor = colors[selectedRowIndex][selectedColIndex].value;
+    }
+  } else if (rowIndex !== undefined && colIndex !== undefined) {
+    backgroundColor = colors[rowIndex][colIndex].value;
+  }
   const ariaLabelText = useText(ColorSwatchDialog, {
     'aria-label': ariaLabel
   }, 'aria-label', 'Color swatch');
@@ -1469,14 +1518,6 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
       }
     }
   }, [isOpen, isDialogControlled]);
-  let uncontrolledSelectedColor;
-  let controlledSelectedColor;
-  if (uncontrolledSelectedRowIndex > -1 && uncontrolledSelectedColIndex > -1) {
-    uncontrolledSelectedColor = colors[uncontrolledSelectedRowIndex][uncontrolledSelectedColIndex];
-  }
-  if (selectedRowIndex !== undefined && selectedColIndex !== undefined && selectedRowIndex > -1 && selectedColIndex > -1) {
-    controlledSelectedColor = colors[selectedRowIndex][selectedColIndex];
-  }
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
@@ -1484,8 +1525,6 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     });
   };
   const closeDialog = () => {
-    setUncontrolledRowIndex(uncontrolledSelectedRowIndex);
-    setUncontrolledColIndex(uncontrolledSelectedColIndex);
     setReferenceElement(null);
     onDialogChange && onDialogChange({
       isOpen: false
@@ -1500,15 +1539,22 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
   });
   useEffect(() => {
     if (referenceElement && colorSwatchRef.current) {
-      const focusableButton = colorSwatchRef.current.querySelector('[tabindex="0"]');
-      const selectedCell = colorSwatchRef.current.querySelector('[aria-selected="true"]');
-      if (selectedCell) {
-        selectedCell.children[0].focus();
+      const input = colorSwatchRef.current.querySelector('[tabindex="0"]');
+      input?.focus();
+    }
+  }, [referenceElement]);
+  const handleSelect = (row, col) => {
+    if (isControlled === false) {
+      if (row === null || col === null) {
+        setRowIndex(undefined);
+        setColIndex(undefined);
       } else {
-        focusableButton?.focus();
+        setRowIndex(row);
+        setColIndex(col);
       }
     }
-  }, [referenceElement]);
+    onSelect && onSelect(row, col);
+  };
   return React__default.createElement(React__default.Fragment, null, children ? ( cloneElement(Children.only(children), {
     onClick,
     ref: buttonRef
@@ -1518,9 +1564,9 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__default.createElement(StyledButtonPreview, {
-    backgroundColor: isControlled ? controlledSelectedColor?.value : uncontrolledSelectedColor?.value
+    backgroundColor: backgroundColor
   }), React__default.createElement(Button.EndIcon, {
-    isRotated: referenceElement != null
+    isRotated: referenceElement !== null
   }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, _extends$2({
     ref: ref,
     zIndex: zIndex,
@@ -1528,35 +1574,19 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     focusOnMount: false,
     placement: placement,
     isAnimated: isAnimated,
-    popperModifiers: popperModifiers,
     referenceElement: referenceElement,
     onClose: closeDialog,
     "aria-label": ariaLabelText
   }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(ColorSwatch, {
+    name: name,
     colors: colors,
     ref: colorSwatchRef,
-    rowIndex: rowIndex,
-    colIndex: colIndex,
+    isCheckboxGroup: isCheckboxGroup,
     selectedRowIndex: selectedRowIndex,
     selectedColIndex: selectedColIndex,
-    defaultRowIndex: uncontrolledRowIndex,
-    defaultColIndex: uncontrolledColIndex,
-    defaultSelectedRowIndex: uncontrolledSelectedRowIndex,
-    defaultSelectedColIndex: uncontrolledSelectedColIndex,
-    onChange: (rowIdx, colIdx) => {
-      if (isControlled === false) {
-        setUncontrolledRowIndex(rowIdx);
-        setUncontrolledColIndex(colIdx);
-      }
-      onChange && onChange(rowIdx, colIdx);
-    },
-    onSelect: (rowIdx, colIdx) => {
-      if (isControlled === false) {
-        setUncontrolledSelectedRowIndex(rowIdx);
-        setUncontrolledSelectedColIndex(colIdx);
-      }
-      onSelect && onSelect(rowIdx, colIdx);
-    }
+    defaultSelectedRowIndex: rowIndex,
+    defaultSelectedColIndex: colIndex,
+    onSelect: handleSelect
   }))));
 });
 ColorSwatchDialog.propTypes = {
@@ -1565,7 +1595,6 @@ ColorSwatchDialog.propTypes = {
   onDialogChange: PropTypes.func,
   disabled: PropTypes.bool,
   buttonProps: PropTypes.object,
-  popperModifiers: PropTypes.any,
   zIndex: PropTypes.number,
   hasArrow: PropTypes.bool,
   isAnimated: PropTypes.bool,