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

package/dist/esm/elements/ColorPicker/ColorWell.js

@@ -24,7 +24,7 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import '../../styled/ColorPickerDialog/StyledButton.js';
 import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import '../../styled/ColorSwatch/StyledColorSwatch.js';
 import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -93,17 +93,15 @@ const ColorWell = React__default.memo(_ref => {
       throttledChange.cancel();
     };
   }, [throttledChange]);
-  return (
-    React__default.createElement(StyledColorWell, {
-      hue: hue,
-      ref: containerRef,
-      role: "presentation",
-      onMouseDown: handleMouseDown
-    }, React__default.createElement(StyledColorWellThumb, {
-      top: mouseActiveRef.current ? topFromMouse : topPosition,
-      left: mouseActiveRef.current ? leftFromMouse : leftPosition
-    }))
-  );
+  return React__default.createElement(StyledColorWell, {
+    $hue: hue,
+    ref: containerRef,
+    role: "presentation",
+    onMouseDown: handleMouseDown
+  }, React__default.createElement(StyledColorWellThumb, {
+    top: mouseActiveRef.current ? topFromMouse : topPosition,
+    left: mouseActiveRef.current ? leftFromMouse : leftPosition
+  }));
 });
 ColorWell.displayName = 'ColorWell';
 

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

@@ -23,7 +23,7 @@ import { StyledRGBAField } from '../../styled/ColorPicker/StyledRGBAField.js';
 import { StyledSliders } from '../../styled/ColorPicker/StyledSliders.js';
 import '../../styled/ColorPickerDialog/StyledButton.js';
 import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import '../../styled/ColorSwatch/StyledColorSwatch.js';
 import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -134,27 +134,27 @@ const ColorPicker = forwardRef((_ref, ref) => {
   }, [computedColor]);
   return React__default.createElement(StyledColorPicker, Object.assign({
     ref: ref,
-    isOpaque: isOpaque
+    $isOpaque: isOpaque
   }, props), React__default.createElement(ColorWell, {
     hue: computedColor.hue,
     saturation: computedColor.saturation,
     lightness: computedColor.lightness,
     onChange: handleColorWellChange
   }), React__default.createElement(StyledSliderGroup, null, React__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__default.createElement(StyledSliders, {
-    isOpaque: isOpaque
+    $isOpaque: isOpaque
   }, React__default.createElement(Field, null, React__default.createElement(Field.Label, {
     hidden: true
   }, labels.hueSlider || 'Hue slider'), React__default.createElement(StyledHueRange, {
     step: 1,
     max: 360,
     value: computedColor.hue,
-    isOpaque: isOpaque,
+    $isOpaque: isOpaque,
     onChange: handleHueChange
   })), !isOpaque && React__default.createElement(Field, null, React__default.createElement(Field.Label, {
     hidden: true
@@ -163,9 +163,9 @@ const ColorPicker = 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__default.createElement(StyledInputGroup, null, React__default.createElement(StyledHexField, null, React__default.createElement(StyledLabel, {
     isRegular: true
   }, labels.hex || 'Hex'), React__default.createElement(StyledInput, {

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

@@ -5,6 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import React__default, { forwardRef, useRef, useState, useEffect, cloneElement, Children } from 'react';
+import { useTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import { Button } from '@zendeskgarden/react-buttons';
 import { PLACEMENT } from '@zendeskgarden/react-modals';
@@ -26,14 +27,14 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import { StyledButton } from '../../styled/ColorPickerDialog/StyledButton.js';
 import { StyledButtonPreview } from '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import { StyledTooltipModal } from '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import { StyledTooltipDialog } from '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import { StyledTooltipBody } from '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import '../../styled/ColorSwatch/StyledColorSwatch.js';
 import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
 import '../../styled/ColorSwatch/StyledColorSwatchLabel.js';
 import '../../styled/ColorSwatch/StyledIcon.js';
 import '../../styled/ColorSwatch/StyledCell.js';
-import { useText } from '@zendeskgarden/react-theming';
+import { useText, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const ColorPickerDialog = forwardRef((_ref, ref) => {
   let {
@@ -65,6 +66,7 @@ const ColorPickerDialog = forwardRef((_ref, ref) => {
   const ariaLabelText = useText(ColorPickerDialog, {
     'aria-label': ariaLabel
   }, 'aria-label', 'Color picker');
+  const theme = useTheme() || DEFAULT_THEME;
   const openDialog = () => {
     setReferenceElement(buttonRef.current);
     onDialogChange && onDialogChange({
@@ -102,17 +104,17 @@ const ColorPickerDialog = forwardRef((_ref, ref) => {
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__default.createElement(StyledButtonPreview, {
-    backgroundColor: isControlled ? color : uncontrolledColor
+    $backgroundColor: isControlled ? color : uncontrolledColor
   }), React__default.createElement(Button.EndIcon, {
     isRotated: referenceElement != null
-  }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, Object.assign({
+  }, React__default.createElement(SvgChevronDownStroke, null))), React__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();

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

@@ -27,7 +27,7 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import '../../styled/ColorPickerDialog/StyledButton.js';
 import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import { StyledColorSwatch } from '../../styled/ColorSwatch/StyledColorSwatch.js';
 import { StyledColorSwatchInput } from '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -70,69 +70,72 @@ const ColorSwatch = forwardRef((_ref, ref) => {
       setColIndex(col);
     }
   });
-  return React__default.createElement(StyledColorSwatch, Object.assign({
-    role: "grid",
-    ref: mergeRefs([gridRef, ref])
-  }, props), React__default.createElement("tbody", null, colors.map((row, _rowIndex) => React__default.createElement("tr", {
-    key: row[0].value
-  }, row.map((color, _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__default.createElement(StyledColorSwatch, Object.assign({
+      role: "grid",
+      ref: mergeRefs([gridRef, ref])
+    }, props), React__default.createElement("tbody", null, colors.map((row, _rowIndex) => React__default.createElement("tr", {
+      key: row[0].value
+    }, row.map((color, _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;
+            }
+          });
+        }
+      };
+      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__default.createElement(StyledCell, {
-      key: value,
-      role: role
-    }, React__default.createElement(StyledColorSwatchLabel, {
-      backgroundColor: value
-    }, React__default.createElement(Tooltip, {
-      content: label
-    }, React__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__default.createElement(StyledIcon, null)));
-  })))));
+      };
+      return React__default.createElement(StyledCell, {
+        key: value,
+        role: role
+      }, React__default.createElement(StyledColorSwatchLabel, {
+        $backgroundColor: value
+      }, React__default.createElement(Tooltip, {
+        content: label,
+        zIndex: 1
+      }, React__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__default.createElement(StyledIcon, null)));
+    })))))
+  );
 });
 ColorSwatch.displayName = 'ColorSwatch';
 ColorSwatch.propTypes = {

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

@@ -5,10 +5,11 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import React__default, { forwardRef, useRef, useState, useEffect, cloneElement, Children } from 'react';
+import { useTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import { Button } from '@zendeskgarden/react-buttons';
 import { PLACEMENT } from '@zendeskgarden/react-modals';
-import { useText } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, useText } from '@zendeskgarden/react-theming';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
 import { ColorSwatch } from '../ColorSwatch/index.js';
@@ -27,7 +28,7 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import { StyledButton } from '../../styled/ColorPickerDialog/StyledButton.js';
 import { StyledButtonPreview } from '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import { StyledTooltipModal } from '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import { StyledTooltipDialog } from '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import { StyledTooltipBody } from '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import '../../styled/ColorSwatch/StyledColorSwatch.js';
 import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -65,6 +66,7 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
   const [referenceElement, setReferenceElement] = useState(null);
   const [rowIndex, setRowIndex] = useState(defaultSelectedRowIndex);
   const [colIndex, setColIndex] = useState(defaultSelectedColIndex);
+  const theme = useTheme() || DEFAULT_THEME;
   let backgroundColor;
   if (isControlled) {
     if (selectedRowIndex !== null && selectedColIndex !== null) {
@@ -131,15 +133,16 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__default.createElement(StyledButtonPreview, {
-    backgroundColor: backgroundColor
+    $backgroundColor: backgroundColor
   }), React__default.createElement(Button.EndIcon, {
     isRotated: referenceElement !== null
-  }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, Object.assign({
+  }, React__default.createElement(SvgChevronDownStroke, null))), React__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,

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 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 SvgCheckSmFill = function SvgCheckSmFill(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 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.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -5,14 +5,14 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { DEFAULT_THEME, getCheckeredBackground } from '@zendeskgarden/react-theming';
+import { getCheckeredBackground } from '@zendeskgarden/react-theming';
 import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_alpha';
 const background = 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 overlay = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
@@ -30,13 +30,10 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
 })([""]);
-StyledAlphaRange.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledAlphaRange };

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

@@ -5,21 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker';
 const getColorPickerWidth = props => {
-  return props.isOpaque ? 268 : 312;
+  return props.$isOpaque ? 268 : 312;
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
 })(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledColorPicker.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledColorPicker, getColorPickerWidth };

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

@@ -6,7 +6,7 @@
 */
 import styled from 'styled-components';
 import { rgba, hsl } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_colorwell';
 const background = props => {
@@ -14,13 +14,13 @@ const background = props => {
   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 = hsl(props.hue, 1, 0.5);
+  const colorValue = hsl(props.$hue, 1, 0.5);
   const color = `linear-gradient(${colorValue}, ${colorValue})`;
   return `${black}, ${white}, ${color}`;
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   'data-test-id': 'colorwell',
   style: {
     background: background(props)
@@ -29,8 +29,5 @@ const StyledColorWell = styled.div.attrs(props => ({
   displayName: "StyledColorWell",
   componentId: "sc-1gg9z8m-0"
 })(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledColorWell.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledColorWell };

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

@@ -4,26 +4,37 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { stripUnit } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb';
-const sizeStyles = theme => {
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    hue: 'white'
+  });
+  const boxShadow = `${theme.shadows.xs(getColor({
+    theme,
+    hue: 'black'
+  }))}`;
+  return css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
   const borderWidth = 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 css(["transform:translate(", "px,", "px);box-sizing:border-box;border-width:", "px;width:", "px;height:", "px;"], translateValue, translateValue, borderWidth, size, size);
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -32,9 +43,6 @@ const StyledColorWellThumb = styled.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`, getColorV8('neutralHue', 800, props.theme, 0.24)), props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledColorWellThumb.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledColorWellThumb };

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

@@ -5,20 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { Field } from '@zendeskgarden/react-forms';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  '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 => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHexField.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledHexField };

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

@@ -5,19 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  '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: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledHueRange };

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

@@ -6,19 +6,16 @@
 */
 import styled from 'styled-components';
 import { Input } from '@zendeskgarden/react-forms';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1uzlutt-0"
 })(["text-align:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledInput };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
 })(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledInputGroup.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledInputGroup };

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

@@ -6,18 +6,15 @@
 */
 import styled from 'styled-components';
 import { Label } from '@zendeskgarden/react-forms';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledLabel };