@zendeskgarden/react-colorpickers 8.49.1 → 8.49.4

package/dist/index.cjs.js

@@ -291,7 +291,7 @@ var getColorPickerWidth = function getColorPickerWidth(props) {
 };
 var StyledColorPicker = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
@@ -352,7 +352,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledRange = styled__default["default"](reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.49.1',
+  'data-garden-version': '8.49.4',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -367,7 +367,7 @@ StyledRange.defaultProps = {
 var COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 var StyledHueRange = styled__default["default"](StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -413,7 +413,7 @@ var StyledAlphaRange = styled__default["default"](StyledRange).attrs(function (p
       background: background$3(props)
     },
     'data-garden-id': COMPONENT_ID$i,
-    'data-garden-version': '8.49.1'
+    'data-garden-version': '8.49.4'
   };
 }).withConfig({
   displayName: "StyledAlphaRange",
@@ -439,7 +439,7 @@ var StyledPreview = styled__default["default"].div.attrs(function (props) {
       background: background$2(props)
     },
     'data-garden-id': COMPONENT_ID$h,
-    'data-garden-version': '8.49.1',
+    'data-garden-version': '8.49.4',
     'data-test-id': 'preview-box'
   };
 }).withConfig({
@@ -475,7 +475,7 @@ var background$1 = function background(props) {
 var StyledColorWell = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$g,
-    'data-garden-version': '8.49.1',
+    'data-garden-version': '8.49.4',
     'data-test-id': 'colorwell',
     style: {
       background: background$1(props)
@@ -503,7 +503,7 @@ var sizeStyles$1 = function sizeStyles(theme) {
 var StyledColorWellThumb = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$f,
-    'data-garden-version': '8.49.1',
+    'data-garden-version': '8.49.4',
     'data-test-id': 'colorwell-thumb',
     style: {
       top: "".concat(props.top, "%"),
@@ -529,7 +529,7 @@ StyledColorWellThumb.defaultProps = {
 var COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 var StyledSliderGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -545,7 +545,7 @@ StyledSliderGroup.defaultProps = {
 var COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 var StyledHexField = styled__default["default"](reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.49.1',
+  'data-garden-version': '8.49.4',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -560,7 +560,7 @@ StyledHexField.defaultProps = {
 var COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 var StyledLabel = styled__default["default"](reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -574,7 +574,7 @@ StyledLabel.defaultProps = {
 var COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 var StyledInput = styled__default["default"](reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.49.1',
+  'data-garden-version': '8.49.4',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -589,7 +589,7 @@ StyledInput.defaultProps = {
 var COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 var StyledInputGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -608,7 +608,7 @@ var sizeStyles = function sizeStyles(theme) {
 };
 var StyledRGBAField = styled__default["default"](reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -624,11 +624,11 @@ StyledRGBAField.defaultProps = {
 var COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 var StyledSliders = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
-})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& >:first-child{top:-", "px;}& >:last-child{bottom:-", "px;}", ";"], function (props) {
+})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return props.theme.space.base * 2;
@@ -645,7 +645,7 @@ var COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 var StyledButton = styled__default["default"](reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -692,7 +692,7 @@ var StyledButtonPreview = styled__default["default"].span.attrs(function (props)
       background: "".concat(background(props), ", ").concat(checkeredBackground(props.theme, 8))
     },
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.49.1',
+    'data-garden-version': '8.49.4',
     'data-test-id': 'dialog-preview'
   };
 }).withConfig({
@@ -720,7 +720,7 @@ StyledButtonPreview.defaultProps = {
 var COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 var StyledTooltipModal = styled__default["default"](reactModals.TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -734,7 +734,7 @@ StyledTooltipModal.defaultProps = {
 var COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 var StyledTooltipBody = styled__default["default"](reactModals.TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -751,7 +751,7 @@ var StyledSwatchButton = styled__default["default"](StyledButtonPreview).attrs(f
     as: 'button',
     'data-garden-id': COMPONENT_ID$3,
     'data-test-id': props.backgroundColor,
-    'data-garden-version': '8.49.1'
+    'data-garden-version': '8.49.4'
   };
 }).withConfig({
   displayName: "StyledSwatchButton",
@@ -770,7 +770,7 @@ StyledSwatchButton.defaultProps = {
 var COMPONENT_ID$2 = 'colorpickers.color_swatch';
 var StyledColorSwatch = styled__default["default"].table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.1',
+  'data-garden-version': '8.49.4',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -803,7 +803,7 @@ var StyledIcon = styled__default["default"](function (_ref) {
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -823,7 +823,7 @@ StyledIcon.defaultProps = {
 var COMPONENT_ID = 'colorpickers.swatch_cell';
 var StyledCell = styled__default["default"].td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1485,17 +1485,20 @@ var ColorpickerDialog = React.forwardRef(function (_ref, ref) {
     onChange: isControlled ? onChange : setUncontrolledColor
   }))));
 });
-ColorpickerDialog.propTypes = {
-  placement: PropTypes__default["default"].oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
+ColorpickerDialog.propTypes = _objectSpread2(_objectSpread2({}, Colorpicker.propTypes), {}, {
+  placement: PropTypes__default["default"].oneOf(reactModals.PLACEMENT),
   onClose: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func,
   onDialogChange: PropTypes__default["default"].func,
   disabled: PropTypes__default["default"].bool,
   labels: PropTypes__default["default"].object,
-  color: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string]),
-  defaultColor: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string]),
-  buttonProps: 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',
   isAnimated: true,
@@ -1738,13 +1741,18 @@ var ColorSwatchDialog = React.forwardRef(function (_ref, ref) {
     }
   }))));
 });
-ColorSwatchDialog.propTypes = {
-  placement: PropTypes__default["default"].oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
-  onChange: PropTypes__default["default"].func,
+ColorSwatchDialog.propTypes = _objectSpread2(_objectSpread2({}, ColorSwatch.propTypes), {}, {
+  placement: PropTypes__default["default"].oneOf(reactModals.PLACEMENT),
   onDialogChange: PropTypes__default["default"].func,
   disabled: PropTypes__default["default"].bool,
-  buttonProps: 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,
+  focusInset: PropTypes__default["default"].bool,
+  isOpen: PropTypes__default["default"].bool
+});
 ColorSwatchDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,

package/dist/index.esm.js

@@ -14,7 +14,7 @@ import styled, { ThemeContext } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { stripUnit, math, rgba, hsl, parseToRgb, readableColor, parseToHsl, rgb } from 'polished';
 import { Button } from '@zendeskgarden/react-buttons';
-import { TooltipModal } from '@zendeskgarden/react-modals';
+import { TooltipModal, PLACEMENT } from '@zendeskgarden/react-modals';
 import isEqual from 'lodash.isequal';
 import { composeEventHandlers, useId } from '@zendeskgarden/container-utilities';
 import { Tooltip } from '@zendeskgarden/react-tooltips';
@@ -261,7 +261,7 @@ var getColorPickerWidth = function getColorPickerWidth(props) {
 };
 var StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
@@ -322,7 +322,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.49.1',
+  'data-garden-version': '8.49.4',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -337,7 +337,7 @@ StyledRange.defaultProps = {
 var COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 var StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -383,7 +383,7 @@ var StyledAlphaRange = styled(StyledRange).attrs(function (props) {
       background: background$3(props)
     },
     'data-garden-id': COMPONENT_ID$i,
-    'data-garden-version': '8.49.1'
+    'data-garden-version': '8.49.4'
   };
 }).withConfig({
   displayName: "StyledAlphaRange",
@@ -409,7 +409,7 @@ var StyledPreview = styled.div.attrs(function (props) {
       background: background$2(props)
     },
     'data-garden-id': COMPONENT_ID$h,
-    'data-garden-version': '8.49.1',
+    'data-garden-version': '8.49.4',
     'data-test-id': 'preview-box'
   };
 }).withConfig({
@@ -445,7 +445,7 @@ var background$1 = function background(props) {
 var StyledColorWell = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$g,
-    'data-garden-version': '8.49.1',
+    'data-garden-version': '8.49.4',
     'data-test-id': 'colorwell',
     style: {
       background: background$1(props)
@@ -473,7 +473,7 @@ var sizeStyles$1 = function sizeStyles(theme) {
 var StyledColorWellThumb = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$f,
-    'data-garden-version': '8.49.1',
+    'data-garden-version': '8.49.4',
     'data-test-id': 'colorwell-thumb',
     style: {
       top: "".concat(props.top, "%"),
@@ -499,7 +499,7 @@ StyledColorWellThumb.defaultProps = {
 var COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 var StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -515,7 +515,7 @@ StyledSliderGroup.defaultProps = {
 var COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 var StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.49.1',
+  'data-garden-version': '8.49.4',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -530,7 +530,7 @@ StyledHexField.defaultProps = {
 var COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 var StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -544,7 +544,7 @@ StyledLabel.defaultProps = {
 var COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 var StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.49.1',
+  'data-garden-version': '8.49.4',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -559,7 +559,7 @@ StyledInput.defaultProps = {
 var COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 var StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -578,7 +578,7 @@ var sizeStyles = function sizeStyles(theme) {
 };
 var StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -594,11 +594,11 @@ StyledRGBAField.defaultProps = {
 var COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 var StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
-})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& >:first-child{top:-", "px;}& >:last-child{bottom:-", "px;}", ";"], function (props) {
+})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return props.theme.space.base * 2;
@@ -615,7 +615,7 @@ var COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 var StyledButton = styled(Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -662,7 +662,7 @@ var StyledButtonPreview = styled.span.attrs(function (props) {
       background: "".concat(background(props), ", ").concat(checkeredBackground(props.theme, 8))
     },
     'data-garden-id': COMPONENT_ID$6,
-    'data-garden-version': '8.49.1',
+    'data-garden-version': '8.49.4',
     'data-test-id': 'dialog-preview'
   };
 }).withConfig({
@@ -690,7 +690,7 @@ StyledButtonPreview.defaultProps = {
 var COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 var StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -704,7 +704,7 @@ StyledTooltipModal.defaultProps = {
 var COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 var StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -721,7 +721,7 @@ var StyledSwatchButton = styled(StyledButtonPreview).attrs(function (props) {
     as: 'button',
     'data-garden-id': COMPONENT_ID$3,
     'data-test-id': props.backgroundColor,
-    'data-garden-version': '8.49.1'
+    'data-garden-version': '8.49.4'
   };
 }).withConfig({
   displayName: "StyledSwatchButton",
@@ -740,7 +740,7 @@ StyledSwatchButton.defaultProps = {
 var COMPONENT_ID$2 = 'colorpickers.color_swatch';
 var StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.1',
+  'data-garden-version': '8.49.4',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -773,7 +773,7 @@ var StyledIcon = styled(function (_ref) {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -793,7 +793,7 @@ StyledIcon.defaultProps = {
 var COMPONENT_ID = 'colorpickers.swatch_cell';
 var StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.1'
+  'data-garden-version': '8.49.4'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1455,17 +1455,20 @@ var ColorpickerDialog = forwardRef(function (_ref, ref) {
     onChange: isControlled ? onChange : setUncontrolledColor
   }))));
 });
-ColorpickerDialog.propTypes = {
-  placement: PropTypes.oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
+ColorpickerDialog.propTypes = _objectSpread2(_objectSpread2({}, Colorpicker.propTypes), {}, {
+  placement: PropTypes.oneOf(PLACEMENT),
   onClose: PropTypes.func,
-  onChange: PropTypes.func,
   onDialogChange: PropTypes.func,
   disabled: PropTypes.bool,
   labels: PropTypes.object,
-  color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  defaultColor: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  buttonProps: PropTypes.object
-};
+  buttonProps: PropTypes.object,
+  popperModifiers: PropTypes.any,
+  zIndex: PropTypes.number,
+  hasArrow: PropTypes.bool,
+  isAnimated: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  focusInset: PropTypes.bool
+});
 ColorpickerDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,
@@ -1708,13 +1711,18 @@ var ColorSwatchDialog = forwardRef(function (_ref, ref) {
     }
   }))));
 });
-ColorSwatchDialog.propTypes = {
-  placement: PropTypes.oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
-  onChange: PropTypes.func,
+ColorSwatchDialog.propTypes = _objectSpread2(_objectSpread2({}, ColorSwatch.propTypes), {}, {
+  placement: PropTypes.oneOf(PLACEMENT),
   onDialogChange: PropTypes.func,
   disabled: PropTypes.bool,
-  buttonProps: PropTypes.object
-};
+  buttonProps: PropTypes.object,
+  popperModifiers: PropTypes.any,
+  zIndex: PropTypes.number,
+  hasArrow: PropTypes.bool,
+  isAnimated: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  isOpen: PropTypes.bool
+});
 ColorSwatchDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,

package/dist/typings/elements/ColorSwatch/index.d.ts

@@ -4,43 +4,8 @@
  * 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 React, { HTMLAttributes } from 'react';
-export interface ILabeledColor {
-    value: string;
-    label: string;
-}
-export interface IColorSwatchProps extends Omit<HTMLAttributes<HTMLTableElement>, 'onChange' | 'onSelect'> {
-    /** Sets the two-dimension array of labeled HEX and RGB/A string colors */
-    colors: ILabeledColor[][];
-    /** Sets the focused row index in a controlled color swatch */
-    rowIndex?: number;
-    /** Sets the focused column index in a controlled color swatch.
-     * Can be set to `-1` to clear the row focus.
-     */
-    colIndex?: number;
-    /** Sets the selected row index in a controlled color swatch.
-     * Can be set to `-1` to clear the column focus.
-     */
-    selectedRowIndex?: number;
-    /** Sets the selected column index in a controlled color swatch.
-     * Can be set to `-1` to clear the row selection.
-     */
-    selectedColIndex?: number;
-    /** Sets the default focused row index in an uncontrolled color swatch.
-     * Can be set to `-1` to clear the column selection.
-     */
-    defaultRowIndex?: number;
-    /** Sets the default focused column index in an uncontrolled color swatch */
-    defaultColIndex?: number;
-    /** Sets the default selected row index in an uncontrolled color swatch */
-    defaultSelectedRowIndex?: number;
-    /** Sets the default selected column index in an uncontrolled color swatch */
-    defaultSelectedColIndex?: number;
-    /** Handles color swatch changes */
-    onChange?: (rowIndex: number, colIndex: number) => void;
-    /** Handles color swatch select event */
-    onSelect?: (rowIndex: number, colIndex: number) => void;
-}
+import React from 'react';
+import { IColorSwatchProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLTableElement>
  */

package/dist/typings/elements/ColorSwatchDialog/index.d.ts

@@ -4,41 +4,9 @@
  * 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 React, { HTMLAttributes } from 'react';
-import { Modifier } from 'react-popper';
-import { GARDEN_PLACEMENT } from '@zendeskgarden/react-modals';
-import { IColorSwatchProps } from '../ColorSwatch';
-interface IDialogChanges {
-    isOpen?: boolean;
-}
-export interface IColorSwatchDialogProps extends IColorSwatchProps {
-    /** Adjusts the placement of the color dialog */
-    placement?: GARDEN_PLACEMENT;
-    /** Disables the color dialog button */
-    disabled?: boolean;
-    /** Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic */
-    popperModifiers?: Partial<Modifier<any, any>>[];
-    /** Sets the `z-index` of the color dialog */
-    zIndex?: number;
-    /** Adds an arrow to the color dialog */
-    hasArrow?: boolean;
-    /** Animates the color dialog */
-    isAnimated?: boolean;
-    /** Applies inset `box-shadow` styling on focus */
-    focusInset?: boolean;
-    /** Passes HTML attributes to the color dialog button element */
-    buttonProps?: HTMLAttributes<HTMLButtonElement>;
-    /** Opens the dialog in a controlled color swatch dialog */
-    isOpen?: boolean;
-    /**
-     * Handles dialog changes
-     *
-     * @param {Object} changes The changed dialog state
-     */
-    onDialogChange?: (changes: IDialogChanges) => void;
-}
+import React from 'react';
+import { IColorSwatchDialogProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const ColorSwatchDialog: React.ForwardRefExoticComponent<IColorSwatchDialogProps & React.RefAttributes<HTMLDivElement>>;
-export {};

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IHSVColor } from '../../utils/types';
+import { IHSVColor } from '../../types';
 interface IColorWellProps {
     hue: number;
     saturation: number;

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

@@ -4,34 +4,8 @@
  * 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 React, { HTMLAttributes } from 'react';
-import { IColor } from '../../utils/types';
-export interface IColorpickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {
-    /** Sets the color for an uncontrolled color picker */
-    defaultColor?: string | IColor;
-    /** Sets the color for a controlled color picker */
-    color?: string | IColor;
-    /** Hides alpha transparency fields */
-    isOpaque?: boolean;
-    /**
-     * Handles color picker changes
-     *
-     * @param {Object} color A color picker state
-     */
-    onChange?: (color: IColor) => void;
-    /** Replaces label text within the color picker */
-    labels?: {
-        hueSlider?: string;
-        alphaSlider?: string;
-        hex?: string;
-        red?: string;
-        green?: string;
-        blue?: string;
-        alpha?: string;
-    };
-    /** @ignore */
-    autofocus?: boolean;
-}
+import React from 'react';
+import { IColorpickerProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

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

@@ -4,7 +4,7 @@
  * 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 { IColor, IHSVColor } from '../../utils/types';
+import { IColor, IHSVColor } from '../../types';
 declare type ColorPickerActionTypes = {
     type: 'SATURATION_CHANGE';
     payload: IHSVColor;

package/dist/typings/elements/ColorpickerDialog/index.d.ts

@@ -4,60 +4,8 @@
  * 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 React, { HTMLAttributes } from 'react';
-import { Modifier } from 'react-popper';
-import { GARDEN_PLACEMENT } from '@zendeskgarden/react-modals';
-import { IColorpickerProps } from '../Colorpicker';
-import { IColor } from '../../utils/types';
-export interface IColorpickerDialogChanges {
-    isOpen?: boolean;
-}
-export interface IColorpickerDialogProps extends IColorpickerProps {
-    /**
-     * Handles close actions. Can be triggered from the backdrop.
-     *
-     * @param {Object} color A color picker state
-     */
-    onClose?: (color: IColor) => void;
-    /** Adjusts the placement of the color dialog */
-    placement?: GARDEN_PLACEMENT;
-    /** Disables the color dialog button */
-    disabled?: boolean;
-    /**
-     * Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic
-     */
-    popperModifiers?: Partial<Modifier<any, any>>[];
-    /**
-     * Sets the `z-index` of the color dialog
-     */
-    zIndex?: number;
-    /**
-     * Adds an arrow to the color dialog
-     */
-    hasArrow?: boolean;
-    /**
-     * Animates the color dialog
-     */
-    isAnimated?: boolean;
-    /**
-     * Opens the dialog in a controlled color picker dialog
-     */
-    isOpen?: boolean;
-    /**
-     * Applies inset `box-shadow` styling on focus
-     */
-    focusInset?: boolean;
-    /**
-     * Passes HTML attributes to the color dialog button element
-     */
-    buttonProps?: HTMLAttributes<HTMLButtonElement>;
-    /**
-     * Handles dialog changes
-     *
-     * @param {Object} changes The changed dialog state
-     */
-    onDialogChange?: (changes: IColorpickerDialogChanges) => void;
-}
+import React from 'react';
+import { IColorpickerDialogProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */

package/dist/typings/index.d.ts

@@ -4,12 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export type { IColor } from './utils/types';
 export { Colorpicker } from './elements/Colorpicker';
-export type { IColorpickerProps } from './elements/Colorpicker';
 export { ColorpickerDialog } from './elements/ColorpickerDialog';
-export type { IColorpickerDialogProps, IColorpickerDialogChanges } from './elements/ColorpickerDialog';
 export { ColorSwatch } from './elements/ColorSwatch';
-export type { IColorSwatchProps, ILabeledColor } from './elements/ColorSwatch';
 export { ColorSwatchDialog } from './elements/ColorSwatchDialog';
-export type { IColorSwatchDialogProps } from './elements/ColorSwatchDialog';
+export type { IColor, IColorpickerProps, IColorpickerDialogProps, ILabeledColor, IColorSwatchProps, IColorSwatchDialogProps } from './types';

package/dist/typings/styled/ColorSwatch/StyledCell.d.ts

@@ -4,11 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-interface IStyledCell {
-    isCompact?: boolean;
-}
 export declare const StyledCell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-} & IStyledCell, "data-garden-id" | "data-garden-version">;
-export {};
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/Colorpicker/StyledAlphaRange.d.ts

@@ -5,5 +5,5 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-import { IRGBColor } from '../../utils/types';
+import { IRGBColor } from '../../types';
 export declare const StyledAlphaRange: import("styled-components").StyledComponent<"input", DefaultTheme, IRGBColor, never>;

package/dist/typings/styled/Colorpicker/StyledPreview.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-import { IRGBColor } from '../../utils/types';
+import { IRGBColor } from '../../types';
 interface IStyledColorPreviewProps extends IRGBColor {
     isOpaque?: boolean;
 }

package/dist/typings/styled/ColorpickerDialog/StyledButtonPreview.d.ts

@@ -5,8 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
-import { IColor } from '../../utils/types';
+import { IColorpickerDialogProps } from '../../types';
 export interface IStyleButtonPreviewProps extends ThemeProps<DefaultTheme> {
-    backgroundColor?: string | IColor;
+    backgroundColor?: IColorpickerDialogProps['color'];
 }
 export declare const StyledButtonPreview: import("styled-components").StyledComponent<"span", DefaultTheme, IStyleButtonPreviewProps, never>;

package/dist/typings/types/index.d.ts

@@ -0,0 +1,176 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { HTMLAttributes } from 'react';
+import { ITooltipModalProps } from '@zendeskgarden/react-modals';
+export interface IColor {
+    hex: string;
+    hue: number;
+    saturation: number;
+    lightness: number;
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+}
+export interface IHSVColor {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface IHSLColor {
+    h: number;
+    s: number;
+    l: number;
+    a?: number;
+}
+export interface IRGBColor {
+    red: number;
+    green: number;
+    blue: number;
+    alpha?: number;
+}
+export interface IColorpickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {
+    /** Sets the color for an uncontrolled color picker */
+    defaultColor?: string | IColor;
+    /** Sets the color for a controlled color picker */
+    color?: string | IColor;
+    /** Hides alpha transparency fields */
+    isOpaque?: boolean;
+    /**
+     * Handles color picker changes
+     *
+     * @param {Object} color A color picker state
+     */
+    onChange?: (color: IColor) => void;
+    /** Replaces label text within the color picker */
+    labels?: {
+        hueSlider?: string;
+        alphaSlider?: string;
+        hex?: string;
+        red?: string;
+        green?: string;
+        blue?: string;
+        alpha?: string;
+    };
+    /** @ignore */
+    autofocus?: boolean;
+}
+export interface IColorpickerDialogProps extends IColorpickerProps {
+    /**
+     * Handles close actions. Can be triggered from the backdrop.
+     *
+     * @param {Object} color A color picker state
+     */
+    onClose?: (color: IColor) => void;
+    /** Adjusts the placement of the color dialog */
+    placement?: ITooltipModalProps['placement'];
+    /** Disables the color dialog button */
+    disabled?: boolean;
+    /**
+     * Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic
+     */
+    popperModifiers?: ITooltipModalProps['popperModifiers'];
+    /**
+     * Sets the `z-index` of the color dialog
+     */
+    zIndex?: ITooltipModalProps['zIndex'];
+    /**
+     * Adds an arrow to the color dialog
+     */
+    hasArrow?: ITooltipModalProps['hasArrow'];
+    /**
+     * Animates the color dialog
+     */
+    isAnimated?: ITooltipModalProps['isAnimated'];
+    /**
+     * Opens the dialog in a controlled color picker dialog
+     */
+    isOpen?: boolean;
+    /**
+     * Applies inset `box-shadow` styling on focus
+     */
+    focusInset?: boolean;
+    /**
+     * Passes HTML attributes to the color dialog button element
+     */
+    buttonProps?: HTMLAttributes<HTMLButtonElement>;
+    /**
+     * Handles dialog changes
+     *
+     * @param {Object} changes The changed dialog state
+     */
+    onDialogChange?: (changes: {
+        isOpen: boolean;
+    }) => void;
+}
+export interface ILabeledColor {
+    value: string;
+    label: string;
+}
+export interface IColorSwatchProps extends Omit<HTMLAttributes<HTMLTableElement>, 'onChange' | 'onSelect'> {
+    /** Sets the two-dimension array of labeled HEX and RGB/A string colors */
+    colors: {
+        value: string;
+        label: string;
+    }[][];
+    /** Sets the focused row index in a controlled color swatch */
+    rowIndex?: number;
+    /** Sets the focused column index in a controlled color swatch.
+     * Can be set to `-1` to clear the row focus.
+     */
+    colIndex?: number;
+    /** Sets the selected row index in a controlled color swatch.
+     * Can be set to `-1` to clear the column focus.
+     */
+    selectedRowIndex?: number;
+    /** Sets the selected column index in a controlled color swatch.
+     * Can be set to `-1` to clear the row selection.
+     */
+    selectedColIndex?: number;
+    /** Sets the default focused row index in an uncontrolled color swatch.
+     * Can be set to `-1` to clear the column selection.
+     */
+    defaultRowIndex?: number;
+    /** Sets the default focused column index in an uncontrolled color swatch */
+    defaultColIndex?: number;
+    /** Sets the default selected row index in an uncontrolled color swatch */
+    defaultSelectedRowIndex?: number;
+    /** Sets the default selected column index in an uncontrolled color swatch */
+    defaultSelectedColIndex?: number;
+    /** Handles color swatch changes */
+    onChange?: (rowIndex: number, colIndex: number) => void;
+    /** Handles color swatch select event */
+    onSelect?: (rowIndex: number, colIndex: number) => void;
+}
+export interface IColorSwatchDialogProps extends IColorSwatchProps {
+    /** Adjusts the placement of the color dialog */
+    placement?: ITooltipModalProps['placement'];
+    /** Disables the color dialog button */
+    disabled?: boolean;
+    /** Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic */
+    popperModifiers?: ITooltipModalProps['popperModifiers'];
+    /** Sets the `z-index` of the color dialog */
+    zIndex?: ITooltipModalProps['zIndex'];
+    /** Adds an arrow to the color dialog */
+    hasArrow?: ITooltipModalProps['hasArrow'];
+    /** Animates the color dialog */
+    isAnimated?: ITooltipModalProps['isAnimated'];
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Passes HTML attributes to the color dialog button element */
+    buttonProps?: HTMLAttributes<HTMLButtonElement>;
+    /** Opens the dialog in a controlled color swatch dialog */
+    isOpen?: boolean;
+    /**
+     * Handles dialog changes
+     *
+     * @param {Object} changes The changed dialog state
+     */
+    onDialogChange?: (changes: {
+        isOpen: boolean;
+    }) => void;
+}

package/dist/typings/utils/saturation.d.ts

@@ -4,12 +4,10 @@
  * 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 { IHSVColor } from '../utils/types';
+import { IHSVColor } from '../types';
 export declare function limit(value: number, max: number, min?: number): number;
 export declare function getNextHsv(e: MouseEvent, hue: number, container: HTMLDivElement, rtl: boolean): IHSVColor;
-declare type GET_THUMB_POSITION = (x: number, y: number, rtl: boolean, container: React.RefObject<HTMLDivElement>) => {
+export declare const getThumbPosition: (x: number, y: number, rtl: boolean, container: React.RefObject<HTMLDivElement>) => {
     topFromMouse: number;
     leftFromMouse: number;
 };
-export declare const getThumbPosition: GET_THUMB_POSITION;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "8.49.1",
+  "version": "8.49.4",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -24,10 +24,10 @@
     "@popperjs/core": "^2.4.4",
     "@zendeskgarden/container-grid": "^0.1.1",
     "@zendeskgarden/container-utilities": "^0.7.0",
-    "@zendeskgarden/react-buttons": "^8.49.1",
-    "@zendeskgarden/react-forms": "^8.49.1",
-    "@zendeskgarden/react-modals": "^8.49.1",
-    "@zendeskgarden/react-tooltips": "^8.49.1",
+    "@zendeskgarden/react-buttons": "^8.49.4",
+    "@zendeskgarden/react-forms": "^8.49.4",
+    "@zendeskgarden/react-modals": "^8.49.4",
+    "@zendeskgarden/react-tooltips": "^8.49.4",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
@@ -43,8 +43,8 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.5",
     "@types/lodash.throttle": "4.1.6",
-    "@zendeskgarden/react-theming": "^8.49.1",
-    "@zendeskgarden/svg-icons": "6.30.2"
+    "@zendeskgarden/react-theming": "^8.49.4",
+    "@zendeskgarden/svg-icons": "6.31.1"
   },
   "keywords": [
     "colorpicker",
@@ -57,5 +57,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "40c9f918b5517480f73fc0ed4a47ffde212b28b6"
+  "gitHead": "7d8cf45fb734c345fac9e0673236578b2ac9c03b"
 }

package/dist/typings/utils/types.d.ts

@@ -1,33 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-export interface IColor {
-    hex: string;
-    hue: number;
-    saturation: number;
-    lightness: number;
-    red: number;
-    green: number;
-    blue: number;
-    alpha: number;
-}
-export interface IHSVColor {
-    h: number;
-    s: number;
-    v: number;
-}
-export interface IHSLColor {
-    h: number;
-    s: number;
-    l: number;
-    a?: number;
-}
-export interface IRGBColor {
-    red: number;
-    green: number;
-    blue: number;
-    alpha?: number;
-}