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

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -48,21 +47,6 @@ var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 
-function _extends$2() {
-  _extends$2 = 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$2.apply(this, arguments);
-}
-
 function hslToHsv(h, s, l) {
   let saturation = s;
   saturation *= (l < 50 ? l : 100 - l) / 100;
@@ -147,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;
+  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.2'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledColorPicker",
-  componentId: "sc-1donyl9-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
+  componentId: "sc-gspq4q-0"
+})(["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 `
@@ -207,17 +191,36 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles$1 = props => {
-  const thumbBackgroundColor = reactTheming.getColor('neutralHue', 100, props.theme);
-  const thumbBorderColor = thumbBackgroundColor;
-  const thumbActiveBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
-  const thumbActiveBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
-  const thumbFocusBorderColor = reactTheming.getColor('primaryHue', 400, props.theme);
-  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
-  const thumbHoverBorderColor = thumbHoverBackgroundColor;
+const colorStyles$2 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const thumbBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const thumbBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default',
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const thumbActiveBackgroundColor = thumbBackgroundColor;
+  const thumbActiveBorderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  });
+  const thumbFocusBorderColor = thumbActiveBorderColor;
+  const thumbHoverBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.subtle'
+  });
+  const thumbHoverBorderColor = thumbActiveBorderColor;
   return `
-    border-color: ${props.isOpaque && props.theme.colors.background};
-
     ${trackStyles(`
       background-color: transparent;
     `)}
@@ -239,7 +242,7 @@ const colorStyles$1 = props => {
     ${thumbStyles(`
         background-color: ${thumbBackgroundColor};
         border-color: ${thumbFocusBorderColor};
-      `, '[data-garden-focus-visible="true"]')}
+      `, ':focus-visible')}
 
     ${thumbStyles(`
         border-color: ${thumbActiveBorderColor};
@@ -247,32 +250,22 @@ const colorStyles$1 = props => {
       `, ':active')}
   `;
 };
-const getThumbSize = props => props.theme.space.base * (props.isOpaque ? 6 : 4);
-const getTrackHeight = props => props.theme.space.base * (props.isOpaque ? 6 : 3);
+const getThumbSize = props => props.theme.space.base * (props.$isOpaque ? 6 : 4);
+const getTrackHeight = props => props.theme.space.base * (props.$isOpaque ? 6 : 3);
 const getTrackMargin = props => (getThumbSize(props) - getTrackHeight(props)) / 2 + polished.stripUnit(props.theme.shadowWidths.md);
-const sizeStyles$2 = props => {
+const sizeStyles$3 = props => {
   const thumbSize = getThumbSize(props);
   const trackHeight = getTrackHeight(props);
   const trackMargin = getTrackMargin(props);
   const thumbMargin = (trackHeight - thumbSize) / 2;
-  const trackOffset = props.theme.space.base * (props.isOpaque ? -2 : -1);
-  const height = props.isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
-  let marginHorizontal;
-  let border;
-  let borderRadius;
-  if (props.isOpaque) {
-    marginHorizontal = `-${trackMargin}px`;
-    border = `${trackMargin}px ${props.theme.borderStyles.solid}`;
-    borderRadius = `${trackMargin + polished.stripUnit(props.theme.shadowWidths.md)}px`;
-  }
+  const trackOffset = props.theme.space.base * (props.$isOpaque ? -2 : -1);
+  const height = props.$isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
   return `
     /* stylelint-disable-next-line declaration-no-important */
     margin-top: 0 !important;
-    margin-${props.theme.rtl ? 'right' : 'left'}: ${marginHorizontal};
     height: ${height}px; /* [1] */
     box-sizing: content-box; /* [2] */
-    border: ${border};
-    border-radius: ${borderRadius};
+    border-radius: ${props.$isOpaque && props.theme.borderRadii.md};
 
     ${trackStyles(`
       margin: ${trackMargin}px ${trackOffset}px;
@@ -281,89 +274,79 @@ const sizeStyles$2 = props => {
 
     ${thumbStyles(`
       margin: ${thumbMargin}px 0;
-      border-width: ${polished.math(`${props.theme.borderWidths.sm} * 2`)};
+      border-width: ${props.theme.borderWidths.sm};
       height: ${thumbSize}px;
       width: ${thumbSize}px;
     `)};
   `;
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.0.0-next.21',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
   componentId: "sc-ug3wi9-0"
-})(["", ";", " ", ";", ";"], sizeStyles$2, trackStyles(`
+})(["", ";", " ", ";", ";"], sizeStyles$3, trackStyles(`
     border-radius: 0;
-  `), colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+  `), colorStyles$2, 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.2'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledHueRange",
-  componentId: "sc-13ly7p-0"
-})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
+  componentId: "sc-1gdhww1-0"
+})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.$isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
 StyledHueRange.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const checkeredBackground = function (theme, size) {
-  let positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
-  const color = reactTheming.getColor('neutralHue', 400, theme);
-  const dimensions = `${size}px ${size}px`;
-  const positionX1 = theme.rtl ? '100%' : '0';
-  const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
-  const position1 = `${positionX1} ${positionY}px`;
-  const position2 = `${positionX2} ${size / 2 + positionY}px`;
-  const position3 = `${positionX2} ${positionY}px`;
-  const position4 = `${positionX1} ${size / -2 + positionY}px`;
-  return `
-    linear-gradient(45deg, ${color} 25%, transparent 25%) ${position1} / ${dimensions} ${repeat},
-    linear-gradient(45deg, transparent 75%, ${color} 75%) ${position2} / ${dimensions} ${repeat},
-    linear-gradient(135deg, ${color} 25%, transparent 25%) ${position3} / ${dimensions} ${repeat},
-    linear-gradient(135deg, transparent 75%, ${color} 75%) ${position4} / ${dimensions} ${repeat}
-  `;
-};
-
-const COMPONENT_ID$j = 'colorpickers.colorpicker_alpha';
+const 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)`;
-  const toColor = `rgb(${props.red}, ${props.green}, ${props.blue})`;
+  const fromColor = `rgba(${props.$red}, ${props.$green}, ${props.$blue}, 0)`;
+  const toColor = `rgb(${props.$red}, ${props.$green}, ${props.$blue})`;
   const positionY = getTrackMargin(props);
   const height = getTrackHeight(props);
-  const gradientBackground = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
-  return `${gradientBackground}, ${checkeredBackground(props.theme, height, positionY, 'repeat-x')}`;
+  const overlay = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
+  return reactTheming.getCheckeredBackground({
+    theme: props.theme,
+    size: height,
+    positionY,
+    repeat: 'repeat-x',
+    overlay
+  });
 };
 const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
   style: {
     backgroundSize: 'auto',
     background: background$3(props)
   },
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.0.0-next.21'
 })).withConfig({
   displayName: "StyledAlphaRange",
-  componentId: "sc-kuh2xc-0"
+  componentId: "sc-1f6hp2j-0"
 })([""]);
 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;
-  const color = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
-  let retVal = `linear-gradient(${color}, ${color})`;
-  if (!props.isOpaque) {
-    retVal = `${retVal}, ${checkeredBackground(props.theme, 13)}`;
+  const alpha = props.$alpha ? props.$alpha / 100 : 0;
+  let retVal = `rgba(${props.$red}, ${props.$green}, ${props.$blue}, ${alpha})`;
+  if (!props.$isOpaque) {
+    retVal = reactTheming.getCheckeredBackground({
+      theme: props.theme,
+      size: 13,
+      overlay: retVal
+    });
   }
   return retVal;
 };
@@ -371,58 +354,69 @@ 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.2',
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.0.0-next.21',
   '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 => 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));
+  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$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%)`;
   const whiteAngle = `${props.theme.rtl ? -90 : 90}deg`;
   const white = `linear-gradient(${whiteAngle}, ${props.theme.palette.white} 1%, transparent)`;
-  const colorValue = polished.hsl(props.hue, 1, 0.5);
+  const colorValue = polished.hsl(props.$hue, 1, 0.5);
   const color = `linear-gradient(${colorValue}, ${colorValue})`;
   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.2',
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.0.0-next.21',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
+  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$g, props));
 StyledColorWell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell_thumb';
-const sizeStyles$1 = theme => {
+const COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
+const colorStyles$1 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    theme,
+    hue: 'white'
+  });
+  const boxShadow = `${theme.shadows.xs(reactTheming.getColor({
+    theme,
+    hue: 'black'
+  }))}`;
+  return styled.css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
+};
+const sizeStyles$2 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
   const borderWidth = polished.stripUnit(theme.borderWidths.sm) * 2;
   const size = theme.space.base * 5;
   const translateValue = size / -2;
-  return `
-    transform: translate(${translateValue}px, ${translateValue}px);
-    box-sizing: border-box;
-    border-width: ${borderWidth}px;
-    width: ${size}px;
-    height: ${size}px;
-  `;
+  return styled.css(["transform:translate(", "px,", "px);box-sizing:border-box;border-width:", "px;width:", "px;height:", "px;"], translateValue, translateValue, borderWidth, size, size);
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.0.0-next.21',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -430,76 +424,76 @@ const StyledColorWellThumb = styled__default.default.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`, reactTheming.getColor('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+  componentId: "sc-1npyab0-0"
+})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles$2, colorStyles$1, 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.2'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledSliderGroup",
-  componentId: "sc-rsq0ak-0"
-})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+  componentId: "sc-tigkzg-0"
+})(["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.2',
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.0.0-next.21',
   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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+  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$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.2'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledLabel",
-  componentId: "sc-1klhp6m-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+  componentId: "sc-1vxt3m9-0"
+})(["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.2',
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.0.0-next.21',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
-  componentId: "sc-1iap93p-0"
-})(["text-align:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
+  componentId: "sc-1uzlutt-0"
+})(["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.2'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledInputGroup",
-  componentId: "sc-mmy93w-0"
-})(["display:flex;justify-content:space-between;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+  componentId: "sc-1m9g2wg-0"
+})(["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 sizeStyles = theme => {
+const COMPONENT_ID$9 = 'colorpickers.colorpicker_rgb_field';
+const sizeStyles$1 = theme => {
   const margin = `${theme.space.base * 1.5}px`;
   const width = `${theme.space.base * 12.75}px`;
   return `
@@ -509,72 +503,97 @@ const sizeStyles = theme => {
   `;
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledRGBAField",
-  componentId: "sc-ibo1yw-0"
-})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+  componentId: "sc-13266k8-0"
+})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles$1(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 sizeStyles = props => {
+  if (props.$isOpaque) {
+    return undefined;
+  }
+  const trackHeight = getTrackHeight(props);
+  const trackMargin = getTrackMargin(props);
+  return `
+    & > * {
+      position: absolute;
+      width: 100%;
+      height: ${trackMargin * 2 + trackHeight}px;
+    }
+
+    & > :first-child {
+      top: -${trackMargin}px;
+    }
+
+    & > :last-child {
+      bottom: -${trackMargin}px;
+    }
+  `;
+};
 const StyledSliders = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.21'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+  componentId: "sc-1lgr50m-0"
+})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, 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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+  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);
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$7 = 'colorpickers.colordialog_preview';
-const background = props => {
-  const {
-    backgroundColor
-  } = props;
-  let color;
-  if (typeof backgroundColor === 'string') {
-    color = backgroundColor;
-  } else if (backgroundColor === undefined) {
-    color = props.theme.palette.white;
+const background = _ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
+  let retVal;
+  if (typeof $backgroundColor === 'string') {
+    retVal = $backgroundColor;
+  } else if ($backgroundColor === undefined) {
+    retVal = theme.palette.white;
   } else {
     const {
       red,
       green,
       blue,
       alpha = 1
-    } = backgroundColor;
-    color = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
+    } = $backgroundColor;
+    retVal = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
   }
-  return `linear-gradient(${color}, ${color})`;
+  return retVal;
 };
 const StyledButtonPreview = styled__default.default.span.attrs(props => ({
   style: {
-    background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
+    background: reactTheming.getCheckeredBackground({
+      theme: props.theme,
+      size: 8,
+      overlay: background(props)
+    })
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.21',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
-  componentId: "sc-1jzysg3-0"
+  componentId: "sc-yxis8h-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 => polished.rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledButtonPreview.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -583,10 +602,10 @@ 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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTooltipModal",
-  componentId: "sc-o022s8-0"
+  componentId: "sc-gykkrw-0"
 })(["width:auto !important;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledTooltipModal.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -595,10 +614,10 @@ 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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTooltipBody",
-  componentId: "sc-6gsgsy-0"
+  componentId: "sc-1ueddpo-0"
 })(["padding:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledTooltipBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -607,7 +626,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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -619,48 +638,58 @@ 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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
-})(["position:absolute;opacity:0;z-index:1;margin:0;width:100%;height:100%;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledColorSwatchInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'colorpickers.color_swatch_label';
-const colorStyles = props => {
-  const boxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35));
+const colorStyles = _ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
   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);
+  } = polished.parseToRgb($backgroundColor);
+  const returnIfLightColor = reactTheming.getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 900
+  });
+  let foregroundColor = returnIfLightColor;
+  if (alpha === undefined || alpha >= 0.4) {
+    const returnIfDarkColor = reactTheming.getColor({
+      theme,
+      hue: 'white'
+    });
+    foregroundColor = polished.readableColor($backgroundColor, returnIfLightColor, returnIfDarkColor, false );
   }
   return `
     color: ${foregroundColor};
-
-    &[data-garden-focus-visible] {
-      box-shadow: ${boxShadow};
   `;
 };
 const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
-})(["position:relative;border-radius:", ";cursor:pointer;", ";", ";"], props => props.theme.borderRadii.md, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["position:relative;top:0;border-radius:", ";", ";", " ", ";"], props => props.theme.borderRadii.md, colorStyles, props => reactTheming.focusStyles({
+  theme: props.theme,
+  selector: '&:has(:focus-visible)'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledColorSwatchLabel.defaultProps = {
   theme: reactTheming.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); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgCheckSmFill = function SvgCheckSmFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -682,7 +711,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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -694,7 +723,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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -766,7 +795,7 @@ const ColorWell = React__namespace.default.memo(_ref => {
   }, [throttledChange]);
   return (
     React__namespace.default.createElement(StyledColorWell, {
-      hue: hue,
+      $hue: hue,
       ref: containerRef,
       role: "presentation",
       onMouseDown: handleMouseDown
@@ -1046,7 +1075,7 @@ const reducer = (state, action) => {
   }
 };
 
-const Colorpicker = React.forwardRef((_ref, ref) => {
+const ColorPicker = React.forwardRef((_ref, ref) => {
   let {
     color,
     defaultColor,
@@ -1146,40 +1175,40 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
       payload: computedColor
     });
   }, [computedColor]);
-  return React__namespace.default.createElement(StyledColorPicker, _extends$2({
+  return React__namespace.default.createElement(StyledColorPicker, Object.assign({
     ref: ref,
-    isOpaque: isOpaque
+    $isOpaque: isOpaque
   }, props), React__namespace.default.createElement(ColorWell, {
     hue: computedColor.hue,
     saturation: computedColor.saturation,
     lightness: computedColor.lightness,
     onChange: handleColorWellChange
   }), React__namespace.default.createElement(StyledSliderGroup, null, React__namespace.default.createElement(StyledPreview, {
-    red: computedColor.red,
-    green: computedColor.green,
-    blue: computedColor.blue,
-    alpha: computedColor.alpha,
-    isOpaque: isOpaque
+    $red: computedColor.red,
+    $green: computedColor.green,
+    $blue: computedColor.blue,
+    $alpha: computedColor.alpha,
+    $isOpaque: isOpaque
   }), React__namespace.default.createElement(StyledSliders, {
-    isOpaque: isOpaque
-  }, React__namespace.default.createElement(reactForms.Field, null, React__namespace.default.createElement(reactForms.Label, {
+    $isOpaque: isOpaque
+  }, React__namespace.default.createElement(reactForms.Field, null, React__namespace.default.createElement(reactForms.Field.Label, {
     hidden: true
   }, labels.hueSlider || 'Hue slider'), React__namespace.default.createElement(StyledHueRange, {
     step: 1,
     max: 360,
     value: computedColor.hue,
-    isOpaque: isOpaque,
+    $isOpaque: isOpaque,
     onChange: handleHueChange
-  })), !isOpaque && React__namespace.default.createElement(reactForms.Field, null, React__namespace.default.createElement(reactForms.Label, {
+  })), !isOpaque && React__namespace.default.createElement(reactForms.Field, null, React__namespace.default.createElement(reactForms.Field.Label, {
     hidden: true
   }, labels.alphaSlider || 'Alpha slider'), React__namespace.default.createElement(StyledAlphaRange, {
     max: 1,
     step: 0.01,
     value: computedColor.alpha / 100,
     onChange: handleAlphaSliderChange,
-    red: computedColor.red,
-    green: computedColor.green,
-    blue: computedColor.blue
+    $red: computedColor.red,
+    $green: computedColor.green,
+    $blue: computedColor.blue
   })))), React__namespace.default.createElement(StyledInputGroup, null, React__namespace.default.createElement(StyledHexField, null, React__namespace.default.createElement(StyledLabel, {
     isRegular: true
   }, labels.hex || 'Hex'), React__namespace.default.createElement(StyledInput, {
@@ -1236,11 +1265,11 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
     onChange: handleAlphaChange
   }))));
 });
-Colorpicker.defaultProps = {
+ColorPicker.defaultProps = {
   defaultColor: '#fff'
 };
-Colorpicker.displayName = 'Colorpicker';
-Colorpicker.propTypes = {
+ColorPicker.displayName = 'ColorPicker';
+ColorPicker.propTypes = {
   color: PropTypes__default.default.oneOfType([PropTypes__default.default.object, PropTypes__default.default.string]),
   isOpaque: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func,
@@ -1249,7 +1278,7 @@ Colorpicker.propTypes = {
 };
 
 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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1264,7 +1293,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const ColorpickerDialog = React.forwardRef((_ref, ref) => {
+const ColorPickerDialog = React.forwardRef((_ref, ref) => {
   let {
     color,
     defaultColor,
@@ -1291,7 +1320,7 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
   const colorPickerRef = React.useRef(null);
   const [referenceElement, setReferenceElement] = React.useState();
   const [uncontrolledColor, setUncontrolledColor] = React.useState(defaultColor);
-  const ariaLabelText = reactTheming.useText(ColorpickerDialog, {
+  const ariaLabelText = reactTheming.useText(ColorPickerDialog, {
     'aria-label': ariaLabel
   }, 'aria-label', 'Color picker');
   const openDialog = () => {
@@ -1325,21 +1354,20 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, children ? ( React.cloneElement(React.Children.only(children), {
     onClick,
     ref: buttonRef
-  })) : React__namespace.default.createElement(StyledButton, _extends$2({
+  })) : React__namespace.default.createElement(StyledButton, Object.assign({
     disabled: disabled,
     focusInset: focusInset,
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__namespace.default.createElement(StyledButtonPreview, {
-    backgroundColor: isControlled ? color : uncontrolledColor
+    $backgroundColor: isControlled ? color : uncontrolledColor
   }), React__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: referenceElement != null
-  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, Object.assign({
     ref: ref,
     hasArrow: hasArrow,
     zIndex: zIndex,
     isAnimated: isAnimated,
-    isOpaque: isOpaque,
     focusOnMount: false,
     placement: placement,
     referenceElement: referenceElement,
@@ -1348,7 +1376,7 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
       onClose && onClose(isControlled ? color : uncontrolledColor);
     },
     "aria-label": ariaLabelText
-  }, props), React__namespace.default.createElement(StyledTooltipBody, null, React__namespace.default.createElement(Colorpicker, {
+  }, props), React__namespace.default.createElement(StyledTooltipBody, null, React__namespace.default.createElement(ColorPicker, {
     autofocus: true,
     color: color,
     isOpaque: isOpaque,
@@ -1358,8 +1386,8 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
     onChange: isControlled ? onChange : setUncontrolledColor
   }))));
 });
-ColorpickerDialog.propTypes = {
-  ...Colorpicker.propTypes,
+ColorPickerDialog.propTypes = {
+  ...ColorPicker.propTypes,
   placement: PropTypes__default.default.oneOf(reactModals.PLACEMENT),
   onClose: PropTypes__default.default.func,
   onDialogChange: PropTypes__default.default.func,
@@ -1372,13 +1400,13 @@ ColorpickerDialog.propTypes = {
   isOpen: PropTypes__default.default.bool,
   focusInset: PropTypes__default.default.bool
 };
-ColorpickerDialog.defaultProps = {
+ColorPickerDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,
   zIndex: 1000,
   hasArrow: false
 };
-ColorpickerDialog.displayName = 'ColorpickerDialog';
+ColorPickerDialog.displayName = 'ColorPickerDialog';
 
 const ColorSwatch = React.forwardRef((_ref, ref) => {
   let {
@@ -1415,7 +1443,7 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       setColIndex(col);
     }
   });
-  return React__namespace.default.createElement(StyledColorSwatch, _extends$2({
+  return React__namespace.default.createElement(StyledColorSwatch, Object.assign({
     role: "grid",
     ref: reactMergeRefs.mergeRefs([gridRef, ref])
   }, props), React__namespace.default.createElement("tbody", null, colors.map((row, _rowIndex) => React__namespace.default.createElement("tr", {
@@ -1427,7 +1455,6 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
     } = color;
     const {
       role,
-      onFocus,
       ...gridCellProps
     } = getGridCellProps({
       colIndex: _colIndex,
@@ -1453,7 +1480,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) {
@@ -1462,22 +1488,20 @@ 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
     }, React__namespace.default.createElement(StyledColorSwatchLabel, {
-      backgroundColor: value
+      $backgroundColor: value
     }, React__namespace.default.createElement(reactTooltips.Tooltip, {
       content: label
-    }, React__namespace.default.createElement(StyledColorSwatchInput, _extends$2({
+    }, React__namespace.default.createElement(StyledColorSwatchInput, Object.assign({
       "aria-label": label,
       name: name,
       type: isCheckboxGroup ? 'checkbox' : 'radio',
       value: value,
       defaultChecked: defaultChecked,
       checked: checked,
-      onFocus: handleFocus,
       onBlur: handleBlur,
       onChange: handleChange
     }, gridCellProps))), React__namespace.default.createElement(StyledIcon, null)));
@@ -1585,16 +1609,16 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, children ? ( React.cloneElement(React.Children.only(children), {
     onClick,
     ref: buttonRef
-  })) : React__namespace.default.createElement(StyledButton, _extends$2({
+  })) : React__namespace.default.createElement(StyledButton, Object.assign({
     disabled: disabled,
     focusInset: focusInset,
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__namespace.default.createElement(StyledButtonPreview, {
-    backgroundColor: backgroundColor
+    $backgroundColor: backgroundColor
   }), React__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: referenceElement !== null
-  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, Object.assign({
     ref: ref,
     zIndex: zIndex,
     hasArrow: hasArrow,
@@ -1636,7 +1660,7 @@ ColorSwatchDialog.defaultProps = {
 };
 ColorSwatchDialog.displayName = 'ColorSwatchDialog';
 
+exports.ColorPicker = ColorPicker;
+exports.ColorPickerDialog = ColorPickerDialog;
 exports.ColorSwatch = ColorSwatch;
 exports.ColorSwatchDialog = ColorSwatchDialog;
-exports.Colorpicker = Colorpicker;
-exports.ColorpickerDialog = ColorpickerDialog;