@zendeskgarden/react-colorpickers 9.0.0-next.5 → 9.0.0-next.7

package/dist/index.cjs.js

@@ -153,7 +153,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
@@ -216,7 +216,7 @@ const colorStyles$1 = props => {
   const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
   const thumbHoverBorderColor = thumbHoverBackgroundColor;
   return `
-    border-color: ${props.isOpaque && props.theme.colors.background};
+    border-color: ${props.isOpaque && reactTheming.getColorV8('background', 600 , props.theme)};
 
     ${trackStyles(`
       background-color: transparent;
@@ -239,7 +239,7 @@ const colorStyles$1 = props => {
     ${thumbStyles(`
         background-color: ${thumbBackgroundColor};
         border-color: ${thumbFocusBorderColor};
-      `, '[data-garden-focus-visible="true"]')}
+      `, ':focus-visible')}
 
     ${thumbStyles(`
         border-color: ${thumbActiveBorderColor};
@@ -289,7 +289,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -304,7 +304,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$k = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
@@ -348,7 +348,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
@@ -372,7 +372,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -394,7 +394,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -422,7 +422,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -439,7 +439,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$f = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
@@ -451,7 +451,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -464,7 +464,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
@@ -476,7 +476,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -489,7 +489,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
@@ -510,7 +510,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
@@ -522,7 +522,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$9 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
@@ -535,7 +535,7 @@ const COMPONENT_ID$8 = 'colorpickers.colordialog_button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
@@ -570,7 +570,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -583,7 +583,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-gykkrw-0"
@@ -595,7 +595,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
@@ -607,7 +607,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -619,7 +619,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
@@ -633,11 +633,9 @@ const colorStyles = props => {
   const {
     alpha
   } = polished.parseToRgb(props.backgroundColor);
-  let foregroundColor;
-  if (alpha && alpha < 0.4) {
-    foregroundColor = props.theme.colors.foreground;
-  } else {
-    foregroundColor = polished.readableColor(props.backgroundColor, props.theme.colors.foreground, props.theme.colors.background);
+  let foregroundColor = reactTheming.getColorV8('foreground', 600 , props.theme);
+  if (alpha === undefined || alpha >= 0.4) {
+    foregroundColor = polished.readableColor(props.backgroundColor, foregroundColor, reactTheming.getColorV8('background', 600 , props.theme), false );
   }
   return `
     color: ${foregroundColor};
@@ -646,7 +644,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -681,7 +679,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -693,7 +691,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1426,7 +1424,6 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
     } = color;
     const {
       role,
-      onFocus,
       ...gridCellProps
     } = getGridCellProps({
       colIndex: _colIndex,
@@ -1452,7 +1449,6 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       }
     };
     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) {
@@ -1461,7 +1457,6 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
         }
       }
     };
-    const handleFocus = containerUtilities.composeEventHandlers(onFocus, event => event.target.parentElement?.setAttribute('data-garden-focus-visible', 'true'));
     return React__namespace.default.createElement(StyledCell, {
       key: value,
       role: role
@@ -1476,7 +1471,6 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       value: value,
       defaultChecked: defaultChecked,
       checked: checked,
-      onFocus: handleFocus,
       onBlur: handleBlur,
       onChange: handleChange
     }, gridCellProps))), React__namespace.default.createElement(StyledIcon, null)));

package/dist/index.esm.js

@@ -126,7 +126,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
@@ -189,7 +189,7 @@ const colorStyles$1 = props => {
   const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
   const thumbHoverBorderColor = thumbHoverBackgroundColor;
   return `
-    border-color: ${props.isOpaque && props.theme.colors.background};
+    border-color: ${props.isOpaque && getColorV8('background', 600 , props.theme)};
 
     ${trackStyles(`
       background-color: transparent;
@@ -212,7 +212,7 @@ const colorStyles$1 = props => {
     ${thumbStyles(`
         background-color: ${thumbBackgroundColor};
         border-color: ${thumbFocusBorderColor};
-      `, '[data-garden-focus-visible="true"]')}
+      `, ':focus-visible')}
 
     ${thumbStyles(`
         border-color: ${thumbActiveBorderColor};
@@ -262,7 +262,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -277,7 +277,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$k = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
@@ -321,7 +321,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
@@ -345,7 +345,7 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -367,7 +367,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -395,7 +395,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -412,7 +412,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$f = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
@@ -424,7 +424,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -437,7 +437,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
@@ -449,7 +449,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -462,7 +462,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
@@ -483,7 +483,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
@@ -495,7 +495,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$9 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
@@ -508,7 +508,7 @@ const COMPONENT_ID$8 = 'colorpickers.colordialog_button';
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
@@ -543,7 +543,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.5',
+  'data-garden-version': '9.0.0-next.7',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -556,7 +556,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-gykkrw-0"
@@ -568,7 +568,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
@@ -580,7 +580,7 @@ StyledTooltipBody.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -592,7 +592,7 @@ StyledColorSwatch.defaultProps = {
 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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
@@ -606,11 +606,9 @@ const colorStyles = props => {
   const {
     alpha
   } = 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);
+  let foregroundColor = getColorV8('foreground', 600 , props.theme);
+  if (alpha === undefined || alpha >= 0.4) {
+    foregroundColor = readableColor(props.backgroundColor, foregroundColor, getColorV8('background', 600 , props.theme), false );
   }
   return `
     color: ${foregroundColor};
@@ -619,7 +617,7 @@ const colorStyles = props => {
 const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -654,7 +652,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -666,7 +664,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.5'
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1399,7 +1397,6 @@ const ColorSwatch = forwardRef((_ref, ref) => {
     } = color;
     const {
       role,
-      onFocus,
       ...gridCellProps
     } = getGridCellProps({
       colIndex: _colIndex,
@@ -1425,7 +1422,6 @@ const ColorSwatch = forwardRef((_ref, ref) => {
       }
     };
     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) {
@@ -1434,7 +1430,6 @@ const ColorSwatch = forwardRef((_ref, ref) => {
         }
       }
     };
-    const handleFocus = composeEventHandlers(onFocus, event => event.target.parentElement?.setAttribute('data-garden-focus-visible', 'true'));
     return React__default.createElement(StyledCell, {
       key: value,
       role: role
@@ -1449,7 +1444,6 @@ const ColorSwatch = forwardRef((_ref, ref) => {
       value: value,
       defaultChecked: defaultChecked,
       checked: checked,
-      onFocus: handleFocus,
       onBlur: handleBlur,
       onChange: handleChange
     }, gridCellProps))), React__default.createElement(StyledIcon, null)));

package/dist/typings/styled/ColorSwatch/StyledColorSwatchLabel.d.ts

@@ -12,5 +12,5 @@ export declare const StyledColorSwatchLabel: import("styled-components").StyledC
     as: string;
     'data-garden-id': string;
     'data-garden-version': string;
-} & IStyledColorSwatchLabelProps, "data-garden-id" | "data-garden-version" | "as">;
+} & IStyledColorSwatchLabelProps, "as" | "data-garden-id" | "data-garden-version">;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "9.0.0-next.5",
+  "version": "9.0.0-next.7",
   "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.5",
-    "@zendeskgarden/react-forms": "^9.0.0-next.5",
-    "@zendeskgarden/react-modals": "^9.0.0-next.5",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.5",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.7",
+    "@zendeskgarden/react-forms": "^9.0.0-next.7",
+    "@zendeskgarden/react-modals": "^9.0.0-next.7",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.7",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
@@ -34,7 +34,7 @@
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^9.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.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.5",
+    "@zendeskgarden/react-theming": "^9.0.0-next.7",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
+  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
 }