@zendeskgarden/react-colorpickers 9.0.0-next.2 → 9.0.0-next.4

package/README.md

@@ -14,15 +14,85 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
+### ColorPicker
+
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Colorpicker } from '@zendeskgarden/react-colorpickers';
+import { ColorPicker } from '@zendeskgarden/react-colorpickers';
 
 
 /**
  * Place a `ThemeProvider` at the root of your React application
  */
 <ThemeProvider>
-  <Colorpicker defaultColor="#17494D">
+  <ColorPicker defaultColor="#17494D">
 </ThemeProvider>
 ```
+
+### ColorPickerDialog
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { ColorPickerDialog } from '@zendeskgarden/react-colorpickers';
+
+/**
+ * Place a `ThemeProvider` at the root of your React application
+ */
+<ThemeProvider>
+  <ColorPickerDialog defaultColor="#17494D" buttonProps={{ 'aria-label': 'Example label' }} />
+</ThemeProvider>;
+```
+
+### ColorSwatch
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { ColorSwatch } from '@zendeskgarden/react-colorpickers';
+
+const colors = [
+  [
+    { label: 'Green-800', value: '#0b3b29' },
+    { label: 'Green-700', value: '#186146' }
+  ],
+  [
+    { label: 'Green-600', value: '#038153' },
+    { label: 'Green-500', value: '#228f67' }
+  ]
+];
+
+/**
+ * Place a `ThemeProvider` at the root of your React application
+ */
+<ThemeProvider>
+  <ColorSwatch colors={colors} name="swatch" />
+</ThemeProvider>;
+```
+
+### ColorSwatchDialog
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { ColorSwatchDialog } from '@zendeskgarden/react-colorpickers';
+
+const colors = [
+  [
+    { label: 'Green-800', value: '#0b3b29' },
+    { label: 'Green-700', value: '#186146' }
+  ],
+  [
+    { label: 'Green-600', value: '#038153' },
+    { label: 'Green-500', value: '#228f67' }
+  ]
+];
+
+/**
+ * Place a `ThemeProvider` at the root of your React application
+ */
+<ThemeProvider>
+  <ColorSwatchDialog
+    colors={colors}
+    name="swatch-dialog"
+    buttonProps={{ 'aria-label': 'Example label' }}
+  />
+</ThemeProvider>;
+```

package/dist/index.cjs.js

@@ -153,10 +153,10 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledColorPicker",
-  componentId: "sc-1donyl9-0"
+  componentId: "sc-gspq4q-0"
 })(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledColorPicker.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -289,7 +289,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -304,10 +304,10 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$k = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledHueRange",
-  componentId: "sc-13ly7p-0"
+  componentId: "sc-1gdhww1-0"
 })(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
 StyledHueRange.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -348,10 +348,10 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 })).withConfig({
   displayName: "StyledAlphaRange",
-  componentId: "sc-kuh2xc-0"
+  componentId: "sc-1f6hp2j-0"
 })([""]);
 StyledAlphaRange.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -372,11 +372,11 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
-  componentId: "sc-d70mj1-0"
+  componentId: "sc-1z5nh7-0"
 })(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => polished.rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledPreview.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -394,14 +394,14 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
   }
 })).withConfig({
   displayName: "StyledColorWell",
-  componentId: "sc-54ly7s-0"
+  componentId: "sc-1gg9z8m-0"
 })(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledColorWell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -422,7 +422,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -430,7 +430,7 @@ const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   }
 })).withConfig({
   displayName: "StyledColorWellThumb",
-  componentId: "sc-1pnz3jz-0"
+  componentId: "sc-1npyab0-0"
 })(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, reactTheming.getColor('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledColorWellThumb.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -439,10 +439,10 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$f = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSliderGroup",
-  componentId: "sc-rsq0ak-0"
+  componentId: "sc-tigkzg-0"
 })(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledSliderGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -451,11 +451,11 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
-  componentId: "sc-1lk14t4-0"
+  componentId: "sc-ijq1c-0"
 })(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledHexField.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -464,10 +464,10 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledLabel",
-  componentId: "sc-1klhp6m-0"
+  componentId: "sc-1vxt3m9-0"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -476,11 +476,11 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
-  componentId: "sc-1iap93p-0"
+  componentId: "sc-1uzlutt-0"
 })(["text-align:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -489,10 +489,10 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInputGroup",
-  componentId: "sc-mmy93w-0"
+  componentId: "sc-1m9g2wg-0"
 })(["display:flex;justify-content:space-between;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledInputGroup.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -510,10 +510,10 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledRGBAField",
-  componentId: "sc-ibo1yw-0"
+  componentId: "sc-13266k8-0"
 })(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledRGBAField.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -522,10 +522,10 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$9 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSliders",
-  componentId: "sc-aclca2-0"
+  componentId: "sc-1lgr50m-0"
 })(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledSliders.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -535,10 +535,10 @@ const COMPONENT_ID$8 = 'colorpickers.colordialog_button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledButton",
-  componentId: "sc-101xjve-0"
+  componentId: "sc-1dlijfv-0"
 })(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -570,11 +570,11 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
-  componentId: "sc-1jzysg3-0"
+  componentId: "sc-yxis8h-0"
 })(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => polished.rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledButtonPreview.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -583,10 +583,10 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTooltipModal",
-  componentId: "sc-o022s8-0"
+  componentId: "sc-gykkrw-0"
 })(["width:auto !important;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledTooltipModal.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -595,10 +595,10 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTooltipBody",
-  componentId: "sc-6gsgsy-0"
+  componentId: "sc-1ueddpo-0"
 })(["padding:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledTooltipBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
@@ -607,7 +607,7 @@ StyledTooltipBody.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -619,18 +619,17 @@ StyledColorSwatch.defaultProps = {
 const COMPONENT_ID$3 = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
-})(["position:absolute;opacity:0;z-index:1;margin:0;width:100%;height:100%;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledColorSwatchInput.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'colorpickers.color_swatch_label';
 const colorStyles = props => {
-  const boxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35));
   const {
     alpha
   } = polished.parseToRgb(props.backgroundColor);
@@ -642,19 +641,19 @@ const colorStyles = props => {
   }
   return `
     color: ${foregroundColor};
-
-    &[data-garden-focus-visible] {
-      box-shadow: ${boxShadow};
   `;
 };
 const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
-})(["position:relative;border-radius:", ";cursor:pointer;", ";", ";"], props => props.theme.borderRadii.md, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["position:relative;top:0;border-radius:", ";", ";", " ", ";"], props => props.theme.borderRadii.md, colorStyles, props => reactTheming.focusStyles({
+  theme: props.theme,
+  selector: '&:has(:focus-visible)'
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledColorSwatchLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -682,7 +681,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
 const StyledIcon = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -694,7 +693,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1046,7 +1045,7 @@ const reducer = (state, action) => {
   }
 };
 
-const Colorpicker = React.forwardRef((_ref, ref) => {
+const ColorPicker = React.forwardRef((_ref, ref) => {
   let {
     color,
     defaultColor,
@@ -1236,11 +1235,11 @@ const Colorpicker = React.forwardRef((_ref, ref) => {
     onChange: handleAlphaChange
   }))));
 });
-Colorpicker.defaultProps = {
+ColorPicker.defaultProps = {
   defaultColor: '#fff'
 };
-Colorpicker.displayName = 'Colorpicker';
-Colorpicker.propTypes = {
+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,
@@ -1264,7 +1263,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const ColorpickerDialog = React.forwardRef((_ref, ref) => {
+const ColorPickerDialog = React.forwardRef((_ref, ref) => {
   let {
     color,
     defaultColor,
@@ -1291,7 +1290,7 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
   const colorPickerRef = React.useRef(null);
   const [referenceElement, setReferenceElement] = React.useState();
   const [uncontrolledColor, setUncontrolledColor] = React.useState(defaultColor);
-  const ariaLabelText = reactTheming.useText(ColorpickerDialog, {
+  const ariaLabelText = reactTheming.useText(ColorPickerDialog, {
     'aria-label': ariaLabel
   }, 'aria-label', 'Color picker');
   const openDialog = () => {
@@ -1348,7 +1347,7 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
       onClose && onClose(isControlled ? color : uncontrolledColor);
     },
     "aria-label": ariaLabelText
-  }, props), React__namespace.default.createElement(StyledTooltipBody, null, React__namespace.default.createElement(Colorpicker, {
+  }, props), React__namespace.default.createElement(StyledTooltipBody, null, React__namespace.default.createElement(ColorPicker, {
     autofocus: true,
     color: color,
     isOpaque: isOpaque,
@@ -1358,8 +1357,8 @@ const ColorpickerDialog = React.forwardRef((_ref, ref) => {
     onChange: isControlled ? onChange : setUncontrolledColor
   }))));
 });
-ColorpickerDialog.propTypes = {
-  ...Colorpicker.propTypes,
+ColorPickerDialog.propTypes = {
+  ...ColorPicker.propTypes,
   placement: PropTypes__default.default.oneOf(reactModals.PLACEMENT),
   onClose: PropTypes__default.default.func,
   onDialogChange: PropTypes__default.default.func,
@@ -1372,13 +1371,13 @@ ColorpickerDialog.propTypes = {
   isOpen: PropTypes__default.default.bool,
   focusInset: PropTypes__default.default.bool
 };
-ColorpickerDialog.defaultProps = {
+ColorPickerDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,
   zIndex: 1000,
   hasArrow: false
 };
-ColorpickerDialog.displayName = 'ColorpickerDialog';
+ColorPickerDialog.displayName = 'ColorPickerDialog';
 
 const ColorSwatch = React.forwardRef((_ref, ref) => {
   let {
@@ -1636,7 +1635,7 @@ ColorSwatchDialog.defaultProps = {
 };
 ColorSwatchDialog.displayName = 'ColorSwatchDialog';
 
+exports.ColorPicker = ColorPicker;
+exports.ColorPickerDialog = ColorPickerDialog;
 exports.ColorSwatch = ColorSwatch;
 exports.ColorSwatchDialog = ColorSwatchDialog;
-exports.Colorpicker = Colorpicker;
-exports.ColorpickerDialog = ColorpickerDialog;

package/dist/index.esm.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { Range, Field, Label, Input } from '@zendeskgarden/react-forms';
 import throttle from 'lodash.throttle';
 import styled, { ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText, useDocument } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, useText, useDocument } from '@zendeskgarden/react-theming';
 import { stripUnit, math, rgba, hsl, parseToRgb, readableColor, parseToHsl, rgb } from 'polished';
 import { Button } from '@zendeskgarden/react-buttons';
 import { TooltipModal, PLACEMENT } from '@zendeskgarden/react-modals';
@@ -126,10 +126,10 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledColorPicker",
-  componentId: "sc-1donyl9-0"
+  componentId: "sc-gspq4q-0"
 })(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => retrieveComponentStyles(COMPONENT_ID$m, props));
 StyledColorPicker.defaultProps = {
   theme: DEFAULT_THEME
@@ -262,7 +262,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -277,10 +277,10 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$k = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledHueRange",
-  componentId: "sc-13ly7p-0"
+  componentId: "sc-1gdhww1-0"
 })(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
 StyledHueRange.defaultProps = {
   theme: DEFAULT_THEME
@@ -321,10 +321,10 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 })).withConfig({
   displayName: "StyledAlphaRange",
-  componentId: "sc-kuh2xc-0"
+  componentId: "sc-1f6hp2j-0"
 })([""]);
 StyledAlphaRange.defaultProps = {
   theme: DEFAULT_THEME
@@ -345,11 +345,11 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
-  componentId: "sc-d70mj1-0"
+  componentId: "sc-1z5nh7-0"
 })(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => retrieveComponentStyles(COMPONENT_ID$i, props));
 StyledPreview.defaultProps = {
   theme: DEFAULT_THEME
@@ -367,14 +367,14 @@ const background$1 = props => {
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
   }
 })).withConfig({
   displayName: "StyledColorWell",
-  componentId: "sc-54ly7s-0"
+  componentId: "sc-1gg9z8m-0"
 })(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$h, props));
 StyledColorWell.defaultProps = {
   theme: DEFAULT_THEME
@@ -395,7 +395,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -403,7 +403,7 @@ const StyledColorWellThumb = styled.div.attrs(props => ({
   }
 })).withConfig({
   displayName: "StyledColorWellThumb",
-  componentId: "sc-1pnz3jz-0"
+  componentId: "sc-1npyab0-0"
 })(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, getColor('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledColorWellThumb.defaultProps = {
   theme: DEFAULT_THEME
@@ -412,10 +412,10 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$f = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSliderGroup",
-  componentId: "sc-rsq0ak-0"
+  componentId: "sc-tigkzg-0"
 })(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledSliderGroup.defaultProps = {
   theme: DEFAULT_THEME
@@ -424,11 +424,11 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
-  componentId: "sc-1lk14t4-0"
+  componentId: "sc-ijq1c-0"
 })(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$e, props));
 StyledHexField.defaultProps = {
   theme: DEFAULT_THEME
@@ -437,10 +437,10 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledLabel",
-  componentId: "sc-1klhp6m-0"
+  componentId: "sc-1vxt3m9-0"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
@@ -449,11 +449,11 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
-  componentId: "sc-1iap93p-0"
+  componentId: "sc-1uzlutt-0"
 })(["text-align:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledInput.defaultProps = {
   theme: DEFAULT_THEME
@@ -462,10 +462,10 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledInputGroup",
-  componentId: "sc-mmy93w-0"
+  componentId: "sc-1m9g2wg-0"
 })(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledInputGroup.defaultProps = {
   theme: DEFAULT_THEME
@@ -483,10 +483,10 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledRGBAField",
-  componentId: "sc-ibo1yw-0"
+  componentId: "sc-13266k8-0"
 })(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledRGBAField.defaultProps = {
   theme: DEFAULT_THEME
@@ -495,10 +495,10 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$9 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledSliders",
-  componentId: "sc-aclca2-0"
+  componentId: "sc-1lgr50m-0"
 })(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledSliders.defaultProps = {
   theme: DEFAULT_THEME
@@ -508,10 +508,10 @@ const COMPONENT_ID$8 = 'colorpickers.colordialog_button';
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledButton",
-  componentId: "sc-101xjve-0"
+  componentId: "sc-1dlijfv-0"
 })(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
@@ -543,11 +543,11 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.4',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
-  componentId: "sc-1jzysg3-0"
+  componentId: "sc-yxis8h-0"
 })(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledButtonPreview.defaultProps = {
   theme: DEFAULT_THEME
@@ -556,10 +556,10 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTooltipModal",
-  componentId: "sc-o022s8-0"
+  componentId: "sc-gykkrw-0"
 })(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledTooltipModal.defaultProps = {
   theme: DEFAULT_THEME
@@ -568,10 +568,10 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTooltipBody",
-  componentId: "sc-6gsgsy-0"
+  componentId: "sc-1ueddpo-0"
 })(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledTooltipBody.defaultProps = {
   theme: DEFAULT_THEME
@@ -580,7 +580,7 @@ StyledTooltipBody.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
@@ -592,18 +592,17 @@ StyledColorSwatch.defaultProps = {
 const COMPONENT_ID$3 = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
-})(["position:absolute;opacity:0;z-index:1;margin:0;width:100%;height:100%;", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledColorSwatchInput.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'colorpickers.color_swatch_label';
 const colorStyles = props => {
-  const boxShadow = props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35));
   const {
     alpha
   } = parseToRgb(props.backgroundColor);
@@ -615,19 +614,19 @@ const colorStyles = props => {
   }
   return `
     color: ${foregroundColor};
-
-    &[data-garden-focus-visible] {
-      box-shadow: ${boxShadow};
   `;
 };
 const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
-})(["position:relative;border-radius:", ";cursor:pointer;", ";", ";"], props => props.theme.borderRadii.md, colorStyles, props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["position:relative;top:0;border-radius:", ";", ";", " ", ";"], props => props.theme.borderRadii.md, colorStyles, props => focusStyles({
+  theme: props.theme,
+  selector: '&:has(:focus-visible)'
+}), props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledColorSwatchLabel.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -655,7 +654,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
 const StyledIcon = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -667,7 +666,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
@@ -1019,7 +1018,7 @@ const reducer = (state, action) => {
   }
 };
 
-const Colorpicker = forwardRef((_ref, ref) => {
+const ColorPicker = forwardRef((_ref, ref) => {
   let {
     color,
     defaultColor,
@@ -1209,11 +1208,11 @@ const Colorpicker = forwardRef((_ref, ref) => {
     onChange: handleAlphaChange
   }))));
 });
-Colorpicker.defaultProps = {
+ColorPicker.defaultProps = {
   defaultColor: '#fff'
 };
-Colorpicker.displayName = 'Colorpicker';
-Colorpicker.propTypes = {
+ColorPicker.displayName = 'ColorPicker';
+ColorPicker.propTypes = {
   color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   isOpaque: PropTypes.bool,
   onChange: PropTypes.func,
@@ -1237,7 +1236,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-const ColorpickerDialog = forwardRef((_ref, ref) => {
+const ColorPickerDialog = forwardRef((_ref, ref) => {
   let {
     color,
     defaultColor,
@@ -1264,7 +1263,7 @@ const ColorpickerDialog = forwardRef((_ref, ref) => {
   const colorPickerRef = useRef(null);
   const [referenceElement, setReferenceElement] = useState();
   const [uncontrolledColor, setUncontrolledColor] = useState(defaultColor);
-  const ariaLabelText = useText(ColorpickerDialog, {
+  const ariaLabelText = useText(ColorPickerDialog, {
     'aria-label': ariaLabel
   }, 'aria-label', 'Color picker');
   const openDialog = () => {
@@ -1321,7 +1320,7 @@ const ColorpickerDialog = forwardRef((_ref, ref) => {
       onClose && onClose(isControlled ? color : uncontrolledColor);
     },
     "aria-label": ariaLabelText
-  }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(Colorpicker, {
+  }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(ColorPicker, {
     autofocus: true,
     color: color,
     isOpaque: isOpaque,
@@ -1331,8 +1330,8 @@ const ColorpickerDialog = forwardRef((_ref, ref) => {
     onChange: isControlled ? onChange : setUncontrolledColor
   }))));
 });
-ColorpickerDialog.propTypes = {
-  ...Colorpicker.propTypes,
+ColorPickerDialog.propTypes = {
+  ...ColorPicker.propTypes,
   placement: PropTypes.oneOf(PLACEMENT),
   onClose: PropTypes.func,
   onDialogChange: PropTypes.func,
@@ -1345,13 +1344,13 @@ ColorpickerDialog.propTypes = {
   isOpen: PropTypes.bool,
   focusInset: PropTypes.bool
 };
-ColorpickerDialog.defaultProps = {
+ColorPickerDialog.defaultProps = {
   placement: 'bottom-start',
   isAnimated: true,
   zIndex: 1000,
   hasArrow: false
 };
-ColorpickerDialog.displayName = 'ColorpickerDialog';
+ColorPickerDialog.displayName = 'ColorPickerDialog';
 
 const ColorSwatch = forwardRef((_ref, ref) => {
   let {
@@ -1609,4 +1608,4 @@ ColorSwatchDialog.defaultProps = {
 };
 ColorSwatchDialog.displayName = 'ColorSwatchDialog';
 
-export { ColorSwatch, ColorSwatchDialog, Colorpicker, ColorpickerDialog };
+export { ColorPicker, ColorPickerDialog, ColorSwatch, ColorSwatchDialog };

package/dist/typings/elements/{Colorpicker → ColorPicker}/index.d.ts

@@ -5,8 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IColorpickerProps } from '../../types';
+import { IColorPickerProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Colorpicker: React.ForwardRefExoticComponent<IColorpickerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPicker: React.ForwardRefExoticComponent<IColorPickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/{ColorpickerDialog → ColorPickerDialog}/index.d.ts

@@ -5,8 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IColorpickerDialogProps } from '../../types';
+import { IColorPickerDialogProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const ColorpickerDialog: React.ForwardRefExoticComponent<IColorpickerDialogProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerDialog: React.ForwardRefExoticComponent<IColorPickerDialogProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/index.d.ts

@@ -4,8 +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 { Colorpicker } from './elements/Colorpicker';
-export { ColorpickerDialog } from './elements/ColorpickerDialog';
+export { ColorPicker } from './elements/ColorPicker';
+export { ColorPickerDialog } from './elements/ColorPickerDialog';
 export { ColorSwatch } from './elements/ColorSwatch';
 export { ColorSwatchDialog } from './elements/ColorSwatchDialog';
-export type { IColor, IColorpickerProps, IColorpickerDialogProps, ILabeledColor, IColorSwatchProps, IColorSwatchDialogProps } from './types';
+export type { IColor, IColorPickerProps, IColorPickerDialogProps, ILabeledColor, IColorSwatchProps, IColorSwatchDialogProps } from './types';

package/dist/typings/styled/{ColorpickerDialog → 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 { IColorpickerDialogProps } from '../../types';
+import { IColorPickerDialogProps } from '../../types';
 export interface IStyleButtonPreviewProps extends ThemeProps<DefaultTheme> {
-    backgroundColor?: IColorpickerDialogProps['color'];
+    backgroundColor?: IColorPickerDialogProps['color'];
 }
 export declare const StyledButtonPreview: import("styled-components").StyledComponent<"span", DefaultTheme, IStyleButtonPreviewProps, never>;

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

@@ -8,7 +8,7 @@ import { DefaultTheme, ThemeProps } from 'styled-components';
 interface IStyledColorSwatchLabelProps extends ThemeProps<DefaultTheme> {
     backgroundColor: string;
 }
-export declare const StyledColorSwatchLabel: import("styled-components").StyledComponent<"span", DefaultTheme, import("../ColorpickerDialog/StyledButtonPreview").IStyleButtonPreviewProps & {
+export declare const StyledColorSwatchLabel: import("styled-components").StyledComponent<"span", DefaultTheme, import("../ColorPickerDialog/StyledButtonPreview").IStyleButtonPreviewProps & {
     as: string;
     'data-garden-id': string;
     'data-garden-version': string;

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

@@ -4,23 +4,23 @@
  * 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 * from './Colorpicker/StyledColorPicker';
-export * from './Colorpicker/StyledHueRange';
-export * from './Colorpicker/StyledAlphaRange';
-export * from './Colorpicker/StyledPreview';
-export * from './Colorpicker/StyledColorWell';
-export * from './Colorpicker/StyledColorWellThumb';
-export * from './Colorpicker/StyledSliderGroup';
-export * from './Colorpicker/StyledHexField';
-export * from './Colorpicker/StyledLabel';
-export * from './Colorpicker/StyledInput';
-export * from './Colorpicker/StyledInputGroup';
-export * from './Colorpicker/StyledRGBAField';
-export * from './Colorpicker/StyledSliders';
-export * from './ColorpickerDialog/StyledButton';
-export * from './ColorpickerDialog/StyledButtonPreview';
-export * from './ColorpickerDialog/StyledTooltipModal';
-export * from './ColorpickerDialog/StyledTooltipBody';
+export * from './ColorPicker/StyledColorPicker';
+export * from './ColorPicker/StyledHueRange';
+export * from './ColorPicker/StyledAlphaRange';
+export * from './ColorPicker/StyledPreview';
+export * from './ColorPicker/StyledColorWell';
+export * from './ColorPicker/StyledColorWellThumb';
+export * from './ColorPicker/StyledSliderGroup';
+export * from './ColorPicker/StyledHexField';
+export * from './ColorPicker/StyledLabel';
+export * from './ColorPicker/StyledInput';
+export * from './ColorPicker/StyledInputGroup';
+export * from './ColorPicker/StyledRGBAField';
+export * from './ColorPicker/StyledSliders';
+export * from './ColorPickerDialog/StyledButton';
+export * from './ColorPickerDialog/StyledButtonPreview';
+export * from './ColorPickerDialog/StyledTooltipModal';
+export * from './ColorPickerDialog/StyledTooltipBody';
 export * from './ColorSwatch/StyledColorSwatch';
 export * from './ColorSwatch/StyledColorSwatchInput';
 export * from './ColorSwatch/StyledColorSwatchLabel';

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

@@ -33,7 +33,7 @@ export interface IRGBColor {
     blue: number;
     alpha?: number;
 }
-export interface IColorpickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {
+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 */
@@ -59,7 +59,7 @@ export interface IColorpickerProps extends Omit<HTMLAttributes<HTMLDivElement>,
     /** @ignore */
     autofocus?: boolean;
 }
-export interface IColorpickerDialogProps extends IColorpickerProps {
+export interface IColorPickerDialogProps extends IColorPickerProps {
     /**
      * Handles close actions. Can be triggered from the backdrop.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "9.0.0-next.2",
+  "version": "9.0.0-next.4",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,10 +23,10 @@
   "dependencies": {
     "@zendeskgarden/container-grid": "^3.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.2",
-    "@zendeskgarden/react-forms": "^9.0.0-next.2",
-    "@zendeskgarden/react-modals": "^9.0.0-next.2",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.2",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.4",
+    "@zendeskgarden/react-forms": "^9.0.0-next.4",
+    "@zendeskgarden/react-modals": "^9.0.0-next.4",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.4",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.2",
+    "@zendeskgarden/react-theming": "^9.0.0-next.4",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
+  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
 }