@zendeskgarden/react-colorpickers 9.0.0-next.8 → 9.0.0

package/dist/index.cjs.js

@@ -131,22 +131,19 @@ 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.8'
+  'data-garden-id': COMPONENT_ID$l,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
-StyledColorPicker.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 
-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 `
@@ -191,17 +188,36 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles$1 = props => {
-  const thumbBackgroundColor = reactTheming.getColorV8('neutralHue', 100, props.theme);
-  const thumbBorderColor = thumbBackgroundColor;
-  const thumbActiveBackgroundColor = reactTheming.getColorV8('neutralHue', 200, props.theme);
-  const thumbActiveBorderColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
-  const thumbFocusBorderColor = reactTheming.getColorV8('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 && reactTheming.getColorV8('background', 600 , props.theme)};
-
     ${trackStyles(`
       background-color: transparent;
     `)}
@@ -231,32 +247,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;
@@ -265,89 +271,70 @@ 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.8',
+  'data-garden-id': COMPONENT_ID$k,
+  'data-garden-version': '9.0.0',
   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));
-StyledRange.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+  `), colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
 
-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.8'
+  'data-garden-id': COMPONENT_ID$j,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledHueRange",
   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.getColorV8('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}
-  `;
-};
+})(["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));
 
-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.8'
+  'data-garden-id': COMPONENT_ID$i,
+  'data-garden-version': '9.0.0'
 })).withConfig({
   displayName: "StyledAlphaRange",
   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;
 };
@@ -355,30 +342,27 @@ 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.8',
+  'data-garden-id': COMPONENT_ID$h,
+  'data-garden-version': '9.0.0',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
   componentId: "sc-1z5nh7-0"
-})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => polished.rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
-StyledPreview.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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));
 
-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.8',
+  'data-garden-id': COMPONENT_ID$g,
+  'data-garden-version': '9.0.0',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -386,27 +370,35 @@ const StyledColorWell = styled__default.default.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWell",
   componentId: "sc-1gg9z8m-0"
-})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
-StyledColorWell.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 
-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.8',
+  'data-garden-id': COMPONENT_ID$f,
+  'data-garden-version': '9.0.0',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -415,75 +407,57 @@ const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1npyab0-0"
-})(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, reactTheming.getColorV8('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
-StyledColorWellThumb.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles$2, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 
-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.8'
+  'data-garden-id': COMPONENT_ID$e,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
-})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledSliderGroup.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 
-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.8',
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.0.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
   componentId: "sc-ijq1c-0"
-})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledHexField.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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));
 
-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.8'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
-StyledLabel.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 
-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.8',
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.0.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1uzlutt-0"
-})(["text-align:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledInput.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["text-align:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 
-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.8'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
-})(["display:flex;justify-content:space-between;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledInputGroup.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;justify-content:space-between;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 
-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 `
@@ -493,133 +467,147 @@ const sizeStyles = theme => {
   `;
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
-})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledRGBAField.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 
-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.8'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
-})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledSliders.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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));
 
-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.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
-})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledButton.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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);
 
 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.8',
+  'data-garden-version': '9.0.0',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
   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
-};
 
-const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipmodal';
-const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
+const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipdialog';
+const StyledTooltipDialog = styled__default.default(reactModals.TooltipDialog).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
-  displayName: "StyledTooltipModal",
-  componentId: "sc-gykkrw-0"
+  displayName: "StyledTooltipDialog",
+  componentId: "sc-1vbkccl-0"
 })(["width:auto !important;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledTooltipModal.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
-const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal_body';
-const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
+const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipdialog_body';
+const StyledTooltipBody = styled__default.default(reactModals.TooltipDialog.Body).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
 })(["padding:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledTooltipBody.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 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.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
 })(["border-collapse:collapse;line-height:normal;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledColorSwatch.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 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.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
 })(["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 colorStyles = _ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
   const {
     alpha
-  } = polished.parseToRgb(props.backgroundColor);
-  let foregroundColor = reactTheming.getColorV8('foreground', 600 , props.theme);
+  } = polished.parseToRgb($backgroundColor);
+  const returnIfLightColor = reactTheming.getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 900
+  });
+  let foregroundColor = returnIfLightColor;
   if (alpha === undefined || alpha >= 0.4) {
-    foregroundColor = polished.readableColor(props.backgroundColor, foregroundColor, reactTheming.getColorV8('background', 600 , props.theme), false );
+    const returnIfDarkColor = reactTheming.getColor({
+      theme,
+      hue: 'white'
+    });
+    foregroundColor = polished.readableColor($backgroundColor, returnIfLightColor, returnIfDarkColor, false );
   }
   return `
     color: ${foregroundColor};
@@ -628,7 +616,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.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -636,12 +624,9 @@ const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attr
   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",
@@ -663,26 +648,20 @@ 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.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
 })(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 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.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
 })(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledCell.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const ColorWell = React__namespace.default.memo(_ref => {
   let {
@@ -745,17 +724,15 @@ const ColorWell = React__namespace.default.memo(_ref => {
       throttledChange.cancel();
     };
   }, [throttledChange]);
-  return (
-    React__namespace.default.createElement(StyledColorWell, {
-      hue: hue,
-      ref: containerRef,
-      role: "presentation",
-      onMouseDown: handleMouseDown
-    }, React__namespace.default.createElement(StyledColorWellThumb, {
-      top: mouseActiveRef.current ? topFromMouse : topPosition,
-      left: mouseActiveRef.current ? leftFromMouse : leftPosition
-    }))
-  );
+  return React__namespace.default.createElement(StyledColorWell, {
+    $hue: hue,
+    ref: containerRef,
+    role: "presentation",
+    onMouseDown: handleMouseDown
+  }, React__namespace.default.createElement(StyledColorWellThumb, {
+    top: mouseActiveRef.current ? topFromMouse : topPosition,
+    left: mouseActiveRef.current ? leftFromMouse : leftPosition
+  }));
 });
 ColorWell.displayName = 'ColorWell';
 
@@ -1129,27 +1106,27 @@ const ColorPicker = React.forwardRef((_ref, ref) => {
   }, [computedColor]);
   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
+    $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.Field.Label, {
     hidden: true
@@ -1158,9 +1135,9 @@ const ColorPicker = React.forwardRef((_ref, ref) => {
     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, {
@@ -1230,7 +1207,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",
@@ -1275,6 +1252,7 @@ const ColorPickerDialog = React.forwardRef((_ref, ref) => {
   const ariaLabelText = reactTheming.useText(ColorPickerDialog, {
     'aria-label': ariaLabel
   }, 'aria-label', 'Color picker');
+  const theme = styled.useTheme() || reactTheming.DEFAULT_THEME;
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
@@ -1312,17 +1290,17 @@ const ColorPickerDialog = React.forwardRef((_ref, ref) => {
     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, Object.assign({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipDialog, Object.assign({
     ref: ref,
     hasArrow: hasArrow,
     zIndex: zIndex,
     isAnimated: isAnimated,
-    isOpaque: isOpaque,
     focusOnMount: false,
     placement: placement,
+    offset: theme.space.base,
     referenceElement: referenceElement,
     onClose: () => {
       closeDialog();
@@ -1396,69 +1374,72 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       setColIndex(col);
     }
   });
-  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", {
-    key: row[0].value
-  }, row.map((color, _colIndex) => {
-    const {
-      label,
-      value
-    } = color;
-    const {
-      role,
-      ...gridCellProps
-    } = getGridCellProps({
-      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;
+  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", {
+      key: row[0].value
+    }, row.map((color, _colIndex) => {
+      const {
+        label,
+        value
+      } = color;
+      const {
+        role,
+        ...gridCellProps
+      } = getGridCellProps({
+        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);
           }
-        });
-      }
-    };
-    const handleBlur = event => {
-      if (!(isCheckboxGroup || gridRef.current?.contains(event.relatedTarget))) {
-        const selectedInput = gridRef.current?.querySelector(`input[name='${event.target.name}']:checked`);
-        if (selectedInput !== null) {
+        }
+        if (isCheckboxGroup && event.target.checked) {
           const inputs = gridRef.current?.querySelectorAll('input');
-          inputs?.forEach(input => input.setAttribute('tabIndex', input.checked ? '0' : '-1'));
+          inputs?.forEach(input => {
+            if (input !== event.target) {
+              input.checked = false;
+            }
+          });
         }
-      }
-    };
-    return React__namespace.default.createElement(StyledCell, {
-      key: value,
-      role: role
-    }, React__namespace.default.createElement(StyledColorSwatchLabel, {
-      backgroundColor: value
-    }, React__namespace.default.createElement(reactTooltips.Tooltip, {
-      content: label
-    }, React__namespace.default.createElement(StyledColorSwatchInput, Object.assign({
-      "aria-label": label,
-      name: name,
-      type: isCheckboxGroup ? 'checkbox' : 'radio',
-      value: value,
-      defaultChecked: defaultChecked,
-      checked: checked,
-      onBlur: handleBlur,
-      onChange: handleChange
-    }, gridCellProps))), React__namespace.default.createElement(StyledIcon, null)));
-  })))));
+      };
+      const handleBlur = event => {
+        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'));
+          }
+        }
+      };
+      return React__namespace.default.createElement(StyledCell, {
+        key: value,
+        role: role
+      }, React__namespace.default.createElement(StyledColorSwatchLabel, {
+        $backgroundColor: value
+      }, React__namespace.default.createElement(reactTooltips.Tooltip, {
+        content: label,
+        zIndex: 1
+      }, React__namespace.default.createElement(StyledColorSwatchInput, Object.assign({
+        "aria-label": label,
+        name: name,
+        type: isCheckboxGroup ? 'checkbox' : 'radio',
+        value: value,
+        defaultChecked: defaultChecked,
+        checked: checked,
+        onBlur: handleBlur,
+        onChange: handleChange
+      }, gridCellProps))), React__namespace.default.createElement(StyledIcon, null)));
+    })))))
+  );
 });
 ColorSwatch.displayName = 'ColorSwatch';
 ColorSwatch.propTypes = {
@@ -1502,6 +1483,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [rowIndex, setRowIndex] = React.useState(defaultSelectedRowIndex);
   const [colIndex, setColIndex] = React.useState(defaultSelectedColIndex);
+  const theme = styled.useTheme() || reactTheming.DEFAULT_THEME;
   let backgroundColor;
   if (isControlled) {
     if (selectedRowIndex !== null && selectedColIndex !== null) {
@@ -1568,15 +1550,16 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
     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, Object.assign({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipDialog, Object.assign({
     ref: ref,
     zIndex: zIndex,
     hasArrow: hasArrow,
     focusOnMount: false,
     placement: placement,
+    offset: theme.space.base,
     isAnimated: isAnimated,
     referenceElement: referenceElement,
     onClose: closeDialog,