@zendeskgarden/react-colorpickers 8.62.2 → 8.63.0

package/dist/index.cjs.js

@@ -152,7 +152,7 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
@@ -287,7 +287,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -302,7 +302,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -346,7 +346,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -370,7 +370,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -392,7 +392,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -420,7 +420,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -437,7 +437,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -449,7 +449,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -462,7 +462,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -474,7 +474,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -487,7 +487,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -508,7 +508,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -520,7 +520,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
@@ -533,7 +533,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -568,7 +568,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -581,7 +581,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -593,7 +593,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -607,7 +607,7 @@ const StyledSwatchButton = styled__default.default(StyledButtonPreview).attrs(pr
   as: 'button',
   'data-garden-id': COMPONENT_ID$3,
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 })).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
@@ -619,7 +619,7 @@ StyledSwatchButton.defaultProps = {
 const COMPONENT_ID$2 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -656,7 +656,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -668,7 +668,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1220,9 +1220,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__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1230,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"
@@ -1358,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",
@@ -1368,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",
@@ -1447,7 +1441,6 @@ ColorSwatch.propTypes = {
 };
 
 const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
-  var _controlledSelectedCo, _uncontrolledSelected;
   let {
     colors,
     rowIndex,
@@ -1533,7 +1526,7 @@ 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]);
@@ -1546,7 +1539,7 @@ const ColorSwatchDialog = React.forwardRef((_ref, ref) => {
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__namespace.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__namespace.default.createElement(reactButtons.Button.EndIcon, {
     isRotated: referenceElement != null
   }, React__namespace.default.createElement(SvgChevronDownStroke, null))), React__namespace.default.createElement(StyledTooltipModal, _extends$2({

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.2'
+  '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.2',
+  '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.2'
+  '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.2'
+  '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.2',
+  '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.2',
+  '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.2',
+  '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.2'
+  '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.2',
+  '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.2'
+  '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.2',
+  '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.2'
+  '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.2'
+  '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.2'
+  '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.2'
+  '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.2',
+  '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.2'
+  '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.2'
+  '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.2'
+  '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.2',
+  '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.2'
+  '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.2'
+  '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.2",
+  "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.2",
-    "@zendeskgarden/react-forms": "^8.62.2",
-    "@zendeskgarden/react-modals": "^8.62.2",
-    "@zendeskgarden/react-tooltips": "^8.62.2",
+    "@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.2",
+    "@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": "27a7d6c021f3360396af60d51ecbf66e9076a405"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }