@zendeskgarden/react-colorpickers 8.62.1 → 8.63.0

package/dist/index.cjs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var PropTypes = require('prop-types');
 var reactForms = require('@zendeskgarden/react-forms');
@@ -23,7 +21,7 @@ var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
 var containerGrid = require('@zendeskgarden/container-grid');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -39,16 +37,15 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+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) {
@@ -153,9 +150,9 @@ const COMPONENT_ID$l = 'colorpickers.colorpicker';
 const getColorPickerWidth = props => {
   return props.isOpaque ? 268 : 312;
 };
-const StyledColorPicker = styled__default["default"].div.attrs({
+const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
@@ -288,9 +285,9 @@ const sizeStyles$2 = props => {
     `)};
   `;
 };
-const StyledRange = styled__default["default"](reactForms.Range).attrs({
+const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -303,9 +300,9 @@ StyledRange.defaultProps = {
 };
 
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
-const StyledHueRange = styled__default["default"](StyledRange).attrs({
+const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -343,13 +340,13 @@ const background$3 = 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 StyledAlphaRange = styled__default["default"](StyledRange).attrs(props => ({
+const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
   style: {
     backgroundSize: 'auto',
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -368,12 +365,12 @@ const background$2 = props => {
   }
   return retVal;
 };
-const StyledPreview = styled__default["default"].div.attrs(props => ({
+const StyledPreview = styled__default.default.div.attrs(props => ({
   style: {
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -393,9 +390,9 @@ const background$1 = props => {
   const color = `linear-gradient(${colorValue}, ${colorValue})`;
   return `${black}, ${white}, ${color}`;
 };
-const StyledColorWell = styled__default["default"].div.attrs(props => ({
+const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -421,9 +418,9 @@ const sizeStyles$1 = theme => {
     height: ${size}px;
   `;
 };
-const StyledColorWellThumb = styled__default["default"].div.attrs(props => ({
+const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -438,9 +435,9 @@ StyledColorWellThumb.defaultProps = {
 };
 
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
-const StyledSliderGroup = styled__default["default"].div.attrs({
+const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -450,9 +447,9 @@ StyledSliderGroup.defaultProps = {
 };
 
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
-const StyledHexField = styled__default["default"](reactForms.Field).attrs({
+const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -463,9 +460,9 @@ StyledHexField.defaultProps = {
 };
 
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
-const StyledLabel = styled__default["default"](reactForms.Label).attrs({
+const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -475,9 +472,9 @@ StyledLabel.defaultProps = {
 };
 
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
-const StyledInput = styled__default["default"](reactForms.Input).attrs({
+const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -488,9 +485,9 @@ StyledInput.defaultProps = {
 };
 
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
-const StyledInputGroup = styled__default["default"].div.attrs({
+const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -509,9 +506,9 @@ const sizeStyles = theme => {
     min-width: ${width};
   `;
 };
-const StyledRGBAField = styled__default["default"](reactForms.Field).attrs({
+const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -521,9 +518,9 @@ StyledRGBAField.defaultProps = {
 };
 
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
-const StyledSliders = styled__default["default"].div.attrs({
+const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
@@ -533,10 +530,10 @@ StyledSliders.defaultProps = {
 };
 
 const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
-const StyledButton = styled__default["default"](reactButtons.Button).attrs({
+const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -566,12 +563,12 @@ const background = props => {
   }
   return `linear-gradient(${color}, ${color})`;
 };
-const StyledButtonPreview = styled__default["default"].span.attrs(props => ({
+const StyledButtonPreview = styled__default.default.span.attrs(props => ({
   style: {
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -582,9 +579,9 @@ StyledButtonPreview.defaultProps = {
 };
 
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
-const StyledTooltipModal = styled__default["default"](reactModals.TooltipModal).attrs({
+const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -594,9 +591,9 @@ StyledTooltipModal.defaultProps = {
 };
 
 const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
-const StyledTooltipBody = styled__default["default"](reactModals.TooltipModal.Body).attrs({
+const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -606,11 +603,11 @@ StyledTooltipBody.defaultProps = {
 };
 
 const COMPONENT_ID$3 = 'colorpickers.swatch_button';
-const StyledSwatchButton = styled__default["default"](StyledButtonPreview).attrs(props => ({
+const StyledSwatchButton = styled__default.default(StyledButtonPreview).attrs(props => ({
   as: 'button',
   'data-garden-id': COMPONENT_ID$3,
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 })).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
@@ -620,9 +617,9 @@ StyledSwatchButton.defaultProps = {
 };
 
 const COMPONENT_ID$2 = 'colorpickers.color_swatch';
-const StyledColorSwatch = styled__default["default"].table.attrs({
+const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -649,17 +646,17 @@ const colorStyles = props => {
     color: ${checkColor}
   `;
 };
-const StyledIcon = styled__default["default"](_ref => {
+const StyledIcon = styled__default.default(_ref => {
   let {
     children,
     color,
     theme,
     ...props
   } = _ref;
-  return React__default["default"].cloneElement(React.Children.only(children), props);
+  return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -669,9 +666,9 @@ StyledIcon.defaultProps = {
 };
 
 const COMPONENT_ID = 'colorpickers.swatch_cell';
-const StyledCell = styled__default["default"].td.attrs({
+const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -680,7 +677,7 @@ StyledCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const ColorWell = React__default["default"].memo(_ref => {
+const ColorWell = React__namespace.default.memo(_ref => {
   let {
     hue,
     saturation,
@@ -706,7 +703,7 @@ const ColorWell = React__default["default"].memo(_ref => {
     setLeftPosition(rtl ? 100 - hsv.s : hsv.s);
   }, [hsv.s, hsv.v, rtl]);
   const throttledChange = React.useMemo(() => {
-    return throttle__default["default"](e => {
+    return throttle__default.default(e => {
       if (containerRef.current) {
         const nextHsv = getNextHsv(e, hue, containerRef.current, rtl);
         onChange && onChange(nextHsv, e);
@@ -741,12 +738,12 @@ const ColorWell = React__default["default"].memo(_ref => {
       throttledChange.cancel();
     };
   }, [throttledChange]);
-  return React__default["default"].createElement(StyledColorWell, {
+  return React__namespace.default.createElement(StyledColorWell, {
     hue: hue,
     ref: containerRef,
     role: "presentation",
     onMouseDown: handleMouseDown
-  }, React__default["default"].createElement(StyledColorWellThumb, {
+  }, React__namespace.default.createElement(StyledColorWellThumb, {
     top: mouseActiveRef.current ? topFromMouse : topPosition,
     left: mouseActiveRef.current ? leftFromMouse : leftPosition
   }));
@@ -799,7 +796,7 @@ const areColorsEqual = (a, b) => {
   if (colorA === undefined || colorB === undefined) {
     return false;
   }
-  return isEqual__default["default"](colorA, colorB);
+  return isEqual__default.default(colorA, colorB);
 };
 function getInitialState(color) {
   const whiteColor = {
@@ -1120,33 +1117,33 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
       payload: computedColor
     });
   }, [computedColor]);
-  return React__default["default"].createElement(StyledColorPicker, _extends$2({
+  return React__namespace.default.createElement(StyledColorPicker, _extends$2({
     ref: ref,
     isOpaque: isOpaque
-  }, props), React__default["default"].createElement(ColorWell, {
+  }, props), React__namespace.default.createElement(ColorWell, {
     hue: computedColor.hue,
     saturation: computedColor.saturation,
     lightness: computedColor.lightness,
     onChange: handleColorWellChange
-  }), React__default["default"].createElement(StyledSliderGroup, null, React__default["default"].createElement(StyledPreview, {
+  }), 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
-  }), React__default["default"].createElement(StyledSliders, {
+  }), React__namespace.default.createElement(StyledSliders, {
     isOpaque: isOpaque
-  }, React__default["default"].createElement(reactForms.Field, null, React__default["default"].createElement(reactForms.Label, {
+  }, React__namespace.default.createElement(reactForms.Field, null, React__namespace.default.createElement(reactForms.Label, {
     hidden: true
-  }, labels.hueSlider || 'Hue slider'), React__default["default"].createElement(StyledHueRange, {
+  }, labels.hueSlider || 'Hue slider'), React__namespace.default.createElement(StyledHueRange, {
     step: 1,
     max: 360,
     value: computedColor.hue,
     isOpaque: isOpaque,
     onChange: handleHueChange
-  })), !isOpaque && React__default["default"].createElement(reactForms.Field, null, React__default["default"].createElement(reactForms.Label, {
+  })), !isOpaque && React__namespace.default.createElement(reactForms.Field, null, React__namespace.default.createElement(reactForms.Label, {
     hidden: true
-  }, labels.alphaSlider || 'Alpha slider'), React__default["default"].createElement(StyledAlphaRange, {
+  }, labels.alphaSlider || 'Alpha slider'), React__namespace.default.createElement(StyledAlphaRange, {
     max: 1,
     step: 0.01,
     value: computedColor.alpha / 100,
@@ -1154,9 +1151,9 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
     red: computedColor.red,
     green: computedColor.green,
     blue: computedColor.blue
-  })))), React__default["default"].createElement(StyledInputGroup, null, React__default["default"].createElement(StyledHexField, null, React__default["default"].createElement(StyledLabel, {
+  })))), React__namespace.default.createElement(StyledInputGroup, null, React__namespace.default.createElement(StyledHexField, null, React__namespace.default.createElement(StyledLabel, {
     isRegular: true
-  }, labels.hex || 'Hex'), React__default["default"].createElement(StyledInput, {
+  }, labels.hex || 'Hex'), React__namespace.default.createElement(StyledInput, {
     isCompact: true,
     maxLength: 7,
     value: state.hexInput
@@ -1165,9 +1162,9 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
     spellCheck: false,
     onBlur: handleBlur,
     onChange: handleHexChange
-  })), React__default["default"].createElement(StyledRGBAField, null, React__default["default"].createElement(StyledLabel, {
+  })), React__namespace.default.createElement(StyledRGBAField, null, React__namespace.default.createElement(StyledLabel, {
     isRegular: true
-  }, labels.red || 'R'), React__default["default"].createElement(StyledInput, {
+  }, labels.red || 'R'), React__namespace.default.createElement(StyledInput, {
     isCompact: true,
     type: "number",
     min: "0",
@@ -1176,9 +1173,9 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
     value: state.redInput,
     onBlur: handleBlur,
     onChange: handleRedChange
-  })), React__default["default"].createElement(StyledRGBAField, null, React__default["default"].createElement(StyledLabel, {
+  })), React__namespace.default.createElement(StyledRGBAField, null, React__namespace.default.createElement(StyledLabel, {
     isRegular: true
-  }, labels.green || 'G'), React__default["default"].createElement(StyledInput, {
+  }, labels.green || 'G'), React__namespace.default.createElement(StyledInput, {
     isCompact: true,
     type: "number",
     min: "0",
@@ -1187,9 +1184,9 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
     value: state.greenInput,
     onBlur: handleBlur,
     onChange: handleGreenChange
-  })), React__default["default"].createElement(StyledRGBAField, null, React__default["default"].createElement(StyledLabel, {
+  })), React__namespace.default.createElement(StyledRGBAField, null, React__namespace.default.createElement(StyledLabel, {
     isRegular: true
-  }, labels.blue || 'B'), React__default["default"].createElement(StyledInput, {
+  }, labels.blue || 'B'), React__namespace.default.createElement(StyledInput, {
     isCompact: true,
     type: "number",
     min: "0",
@@ -1198,9 +1195,9 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
     value: state.blueInput,
     onBlur: handleBlur,
     onChange: handleBlueChange
-  })), !isOpaque && React__default["default"].createElement(StyledRGBAField, null, React__default["default"].createElement(StyledLabel, {
+  })), !isOpaque && React__namespace.default.createElement(StyledRGBAField, null, React__namespace.default.createElement(StyledLabel, {
     isRegular: true
-  }, labels.alpha || 'A'), React__default["default"].createElement(StyledInput, {
+  }, labels.alpha || 'A'), React__namespace.default.createElement(StyledInput, {
     isCompact: true,
     type: "number",
     min: "0",
@@ -1215,17 +1212,15 @@ Colorpicker.defaultProps = {
 };
 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,
-  labels: PropTypes__default["default"].object,
-  defaultColor: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string])
+  color: PropTypes__default.default.oneOfType([PropTypes__default.default.object, PropTypes__default.default.string]),
+  isOpaque: PropTypes__default.default.bool,
+  onChange: PropTypes__default.default.func,
+  labels: PropTypes__default.default.object,
+  defaultColor: PropTypes__default.default.oneOfType([PropTypes__default.default.object, PropTypes__default.default.string])
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1233,8 +1228,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
@@ -1300,19 +1294,19 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
       }
     }
   }, [isOpen, isDialogControlled]);
-  return React__default["default"].createElement(React__default["default"].Fragment, null, children ? React.cloneElement(React.Children.only(children), {
+  return React__namespace.default.createElement(React__namespace.default.Fragment, null, children ? React.cloneElement(React.Children.only(children), {
     onClick,
     ref: buttonRef
-  }) : React__default["default"].createElement(StyledButton, _extends$2({
+  }) : React__namespace.default.createElement(StyledButton, _extends$2({
     disabled: disabled,
     focusInset: focusInset,
     ref: buttonRef,
     onClick: onClick
-  }, buttonProps), React__default["default"].createElement(StyledButtonPreview, {
+  }, buttonProps), React__namespace.default.createElement(StyledButtonPreview, {
     backgroundColor: isControlled ? color : uncontrolledColor
-  }), React__default["default"].createElement(reactButtons.Button.EndIcon, {
+  }), React__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: referenceElement != null
-  }, React__default["default"].createElement(SvgChevronDownStroke, null))), React__default["default"].createElement(StyledTooltipModal, _extends$2({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
     ref: ref,
     hasArrow: hasArrow,
     popperModifiers: popperModifiers,
@@ -1327,7 +1321,7 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
       onClose && onClose(isControlled ? color : uncontrolledColor);
     },
     "aria-label": ariaLabelText
-  }, props), React__default["default"].createElement(StyledTooltipBody, null, React__default["default"].createElement(Colorpicker, {
+  }, props), React__namespace.default.createElement(StyledTooltipBody, null, React__namespace.default.createElement(Colorpicker, {
     autofocus: true,
     color: color,
     isOpaque: isOpaque,
@@ -1339,18 +1333,18 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
 });
 ColorpickerDialog.propTypes = {
   ...Colorpicker.propTypes,
-  placement: PropTypes__default["default"].oneOf(reactModals.PLACEMENT),
-  onClose: PropTypes__default["default"].func,
-  onDialogChange: PropTypes__default["default"].func,
-  disabled: PropTypes__default["default"].bool,
-  labels: PropTypes__default["default"].object,
-  buttonProps: PropTypes__default["default"].object,
-  popperModifiers: PropTypes__default["default"].any,
-  zIndex: PropTypes__default["default"].number,
-  hasArrow: PropTypes__default["default"].bool,
-  isAnimated: PropTypes__default["default"].bool,
-  isOpen: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool
+  placement: PropTypes__default.default.oneOf(reactModals.PLACEMENT),
+  onClose: PropTypes__default.default.func,
+  onDialogChange: PropTypes__default.default.func,
+  disabled: PropTypes__default.default.bool,
+  labels: PropTypes__default.default.object,
+  buttonProps: PropTypes__default.default.object,
+  popperModifiers: PropTypes__default.default.any,
+  zIndex: PropTypes__default.default.number,
+  hasArrow: PropTypes__default.default.bool,
+  isAnimated: PropTypes__default.default.bool,
+  isOpen: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool
 };
 ColorpickerDialog.defaultProps = {
   placement: 'bottom-start',
@@ -1361,9 +1355,7 @@ ColorpickerDialog.defaultProps = {
 ColorpickerDialog.displayName = 'ColorpickerDialog';
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgCheckSmFill = function SvgCheckSmFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1371,8 +1363,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -1401,9 +1392,9 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
     idPrefix: containerUtilities.useId(),
     ...props
   });
-  return React__default["default"].createElement(StyledColorSwatch, {
+  return React__namespace.default.createElement(StyledColorSwatch, {
     ref: ref
-  }, React__default["default"].createElement("tbody", null, colors.map((row, rowIdx) => React__default["default"].createElement("tr", {
+  }, React__namespace.default.createElement("tbody", null, colors.map((row, rowIdx) => React__namespace.default.createElement("tr", {
     key: row[0].value
   }, row.map((color, colIdx) => {
     const {
@@ -1419,38 +1410,37 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       type: 'button',
       role: undefined
     });
-    return React__default["default"].createElement(StyledCell, {
+    return React__namespace.default.createElement(StyledCell, {
       key: value,
       "aria-selected": ariaSelected
-    }, React__default["default"].createElement(reactTooltips.Tooltip, {
+    }, React__namespace.default.createElement(reactTooltips.Tooltip, {
       content: label
-    }, React__default["default"].createElement(StyledSwatchButton, _extends$2({
+    }, React__namespace.default.createElement(StyledSwatchButton, _extends$2({
       backgroundColor: value,
       "aria-pressed": ariaSelected,
       "aria-label": label
-    }, other), React__default["default"].createElement(StyledIcon, {
+    }, other), React__namespace.default.createElement(StyledIcon, {
       color: value,
       selected: ariaSelected
-    }, React__default["default"].createElement(SvgCheckSmFill, null)))));
+    }, React__namespace.default.createElement(SvgCheckSmFill, null)))));
   })))));
 });
 ColorSwatch.displayName = 'ColorSwatch';
 ColorSwatch.propTypes = {
-  colors: PropTypes__default["default"].arrayOf(PropTypes__default["default"].any).isRequired,
-  rowIndex: PropTypes__default["default"].number,
-  colIndex: PropTypes__default["default"].number,
-  selectedRowIndex: PropTypes__default["default"].number,
-  selectedColIndex: PropTypes__default["default"].number,
-  defaultRowIndex: PropTypes__default["default"].number,
-  defaultColIndex: PropTypes__default["default"].number,
-  defaultSelectedRowIndex: PropTypes__default["default"].number,
-  defaultSelectedColIndex: PropTypes__default["default"].number,
-  onChange: PropTypes__default["default"].func,
-  onSelect: PropTypes__default["default"].func
+  colors: PropTypes__default.default.arrayOf(PropTypes__default.default.any).isRequired,
+  rowIndex: PropTypes__default.default.number,
+  colIndex: PropTypes__default.default.number,
+  selectedRowIndex: PropTypes__default.default.number,
+  selectedColIndex: PropTypes__default.default.number,
+  defaultRowIndex: PropTypes__default.default.number,
+  defaultColIndex: PropTypes__default.default.number,
+  defaultSelectedRowIndex: PropTypes__default.default.number,
+  defaultSelectedColIndex: PropTypes__default.default.number,
+  onChange: PropTypes__default.default.func,
+  onSelect: PropTypes__default.default.func
 };
 
 const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
-  var _controlledSelectedCo, _uncontrolledSelected;
   let {
     colors,
     rowIndex,
@@ -1536,23 +1526,23 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
       if (selectedCell) {
         selectedCell.children[0].focus();
       } else {
-        focusableButton === null || focusableButton === void 0 ? void 0 : focusableButton.focus();
+        focusableButton?.focus();
       }
     }
   }, [referenceElement]);
-  return React__default["default"].createElement(React__default["default"].Fragment, null, children ? React.cloneElement(React.Children.only(children), {
+  return React__namespace.default.createElement(React__namespace.default.Fragment, null, children ? React.cloneElement(React.Children.only(children), {
     onClick,
     ref: buttonRef
-  }) : React__default["default"].createElement(StyledButton, _extends$2({
+  }) : React__namespace.default.createElement(StyledButton, _extends$2({
     disabled: disabled,
     focusInset: focusInset,
     ref: buttonRef,
     onClick: onClick
-  }, buttonProps), React__default["default"].createElement(StyledButtonPreview, {
-    backgroundColor: isControlled ? (_controlledSelectedCo = controlledSelectedColor) === null || _controlledSelectedCo === void 0 ? void 0 : _controlledSelectedCo.value : (_uncontrolledSelected = uncontrolledSelectedColor) === null || _uncontrolledSelected === void 0 ? void 0 : _uncontrolledSelected.value
-  }), React__default["default"].createElement(reactButtons.Button.EndIcon, {
+  }, buttonProps), React__namespace.default.createElement(StyledButtonPreview, {
+    backgroundColor: isControlled ? controlledSelectedColor?.value : uncontrolledSelectedColor?.value
+  }), React__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: referenceElement != null
-  }, React__default["default"].createElement(SvgChevronDownStroke, null))), React__default["default"].createElement(StyledTooltipModal, _extends$2({
+  }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
     ref: ref,
     zIndex: zIndex,
     hasArrow: hasArrow,
@@ -1563,7 +1553,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
     referenceElement: referenceElement,
     onClose: closeDialog,
     "aria-label": ariaLabelText
-  }, props), React__default["default"].createElement(StyledTooltipBody, null, React__default["default"].createElement(ColorSwatch, {
+  }, props), React__namespace.default.createElement(StyledTooltipBody, null, React__namespace.default.createElement(ColorSwatch, {
     colors: colors,
     ref: colorSwatchRef,
     rowIndex: rowIndex,
@@ -1592,16 +1582,16 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
 });
 ColorSwatchDialog.propTypes = {
   ...ColorSwatch.propTypes,
-  placement: PropTypes__default["default"].oneOf(reactModals.PLACEMENT),
-  onDialogChange: PropTypes__default["default"].func,
-  disabled: PropTypes__default["default"].bool,
-  buttonProps: PropTypes__default["default"].object,
-  popperModifiers: PropTypes__default["default"].any,
-  zIndex: PropTypes__default["default"].number,
-  hasArrow: PropTypes__default["default"].bool,
-  isAnimated: PropTypes__default["default"].bool,
-  focusInset: PropTypes__default["default"].bool,
-  isOpen: PropTypes__default["default"].bool
+  placement: PropTypes__default.default.oneOf(reactModals.PLACEMENT),
+  onDialogChange: PropTypes__default.default.func,
+  disabled: PropTypes__default.default.bool,
+  buttonProps: PropTypes__default.default.object,
+  popperModifiers: PropTypes__default.default.any,
+  zIndex: PropTypes__default.default.number,
+  hasArrow: PropTypes__default.default.bool,
+  isAnimated: PropTypes__default.default.bool,
+  focusInset: PropTypes__default.default.bool,
+  isOpen: PropTypes__default.default.bool
 };
 ColorSwatchDialog.defaultProps = {
   placement: 'bottom-start',

package/dist/index.esm.js

@@ -125,7 +125,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
@@ -260,7 +260,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -275,7 +275,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -319,7 +319,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -343,7 +343,7 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -365,7 +365,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -393,7 +393,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -410,7 +410,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -422,7 +422,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -435,7 +435,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -447,7 +447,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -460,7 +460,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -481,7 +481,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -493,7 +493,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
@@ -506,7 +506,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -541,7 +541,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -554,7 +554,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -566,7 +566,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -580,7 +580,7 @@ const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
   as: 'button',
   'data-garden-id': COMPONENT_ID$3,
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 })).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
@@ -592,7 +592,7 @@ StyledSwatchButton.defaultProps = {
 const COMPONENT_ID$2 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -629,7 +629,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -641,7 +641,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1193,9 +1193,7 @@ Colorpicker.propTypes = {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1203,8 +1201,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
@@ -1331,9 +1328,7 @@ ColorpickerDialog.defaultProps = {
 ColorpickerDialog.displayName = 'ColorpickerDialog';
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgCheckSmFill = function SvgCheckSmFill(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1341,8 +1336,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -1420,7 +1414,6 @@ ColorSwatch.propTypes = {
 };
 
 const ColorSwatchDialog = forwardRef((_ref, ref) => {
-  var _controlledSelectedCo, _uncontrolledSelected;
   let {
     colors,
     rowIndex,
@@ -1506,7 +1499,7 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
       if (selectedCell) {
         selectedCell.children[0].focus();
       } else {
-        focusableButton === null || focusableButton === void 0 ? void 0 : focusableButton.focus();
+        focusableButton?.focus();
       }
     }
   }, [referenceElement]);
@@ -1519,7 +1512,7 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__default.createElement(StyledButtonPreview, {
-    backgroundColor: isControlled ? (_controlledSelectedCo = controlledSelectedColor) === null || _controlledSelectedCo === void 0 ? void 0 : _controlledSelectedCo.value : (_uncontrolledSelected = uncontrolledSelectedColor) === null || _uncontrolledSelected === void 0 ? void 0 : _uncontrolledSelected.value
+    backgroundColor: isControlled ? controlledSelectedColor?.value : uncontrolledSelectedColor?.value
   }), React__default.createElement(Button.EndIcon, {
     isRotated: referenceElement != null
   }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, _extends$2({

package/dist/typings/elements/Colorpicker/reducer.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { IColor, IHSVColor } from '../../types';
-declare type ColorPickerActionTypes = {
+type ColorPickerActionTypes = {
     type: 'SATURATION_CHANGE';
     payload: IHSVColor;
 } | {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "8.62.1",
+  "version": "8.63.0",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,11 +22,11 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-grid": "^0.1.1",
-    "@zendeskgarden/container-utilities": "^0.7.0",
-    "@zendeskgarden/react-buttons": "^8.62.1",
-    "@zendeskgarden/react-forms": "^8.62.1",
-    "@zendeskgarden/react-modals": "^8.62.1",
-    "@zendeskgarden/react-tooltips": "^8.62.1",
+    "@zendeskgarden/container-utilities": "^1.0.0",
+    "@zendeskgarden/react-buttons": "^8.63.0",
+    "@zendeskgarden/react-forms": "^8.63.0",
+    "@zendeskgarden/react-modals": "^8.63.0",
+    "@zendeskgarden/react-tooltips": "^8.63.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.6",
     "@types/lodash.throttle": "4.1.7",
-    "@zendeskgarden/react-theming": "^8.62.1",
+    "@zendeskgarden/react-theming": "^8.63.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -55,5 +55,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }