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

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

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

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

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

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

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

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

@@ -27,7 +27,7 @@ import '../../styled/ColorPicker/StyledRGBAField.js';
 import '../../styled/ColorPicker/StyledSliders.js';
 import '../../styled/ColorPickerDialog/StyledButton.js';
 import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
-import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipDialog.js';
 import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
 import { StyledColorSwatch } from '../../styled/ColorSwatch/StyledColorSwatch.js';
 import { StyledColorSwatchInput } from '../../styled/ColorSwatch/StyledColorSwatchInput.js';
@@ -70,7 +70,7 @@ const ColorSwatch = forwardRef((_ref, ref) => {
       setColIndex(col);
     }
   });
-  return React__default.createElement(StyledColorSwatch, Object.assign({
+  return  React__default.createElement(StyledColorSwatch, Object.assign({
     role: "grid",
     ref: mergeRefs([gridRef, ref])
   }, props), React__default.createElement("tbody", null, colors.map((row, _rowIndex) => React__default.createElement("tr", {
@@ -119,9 +119,10 @@ const ColorSwatch = forwardRef((_ref, ref) => {
       key: value,
       role: role
     }, React__default.createElement(StyledColorSwatchLabel, {
-      backgroundColor: value
+      $backgroundColor: value
     }, React__default.createElement(Tooltip, {
-      content: label
+      content: label,
+      zIndex: 1
     }, React__default.createElement(StyledColorSwatchInput, Object.assign({
       "aria-label": label,
       name: name,

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

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

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

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgCheckSmFill = function SvgCheckSmFill(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

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

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

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

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

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

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

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

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

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

@@ -5,20 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { Field } from '@zendeskgarden/react-forms';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.1.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
   componentId: "sc-ijq1c-0"
 })(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHexField.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledHexField };

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

@@ -5,19 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
-})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
-StyledHueRange.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.$isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
 
 export { StyledHueRange };

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

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

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

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

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

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

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

@@ -6,13 +6,13 @@
 */
 import styled from 'styled-components';
 import { rgba } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getCheckeredBackground } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getCheckeredBackground } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_preview_box';
 const background = props => {
-  const alpha = props.alpha ? props.alpha / 100 : 0;
-  let retVal = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
-  if (!props.isOpaque) {
+  const alpha = props.$alpha ? props.$alpha / 100 : 0;
+  let retVal = `rgba(${props.$red}, ${props.$green}, ${props.$blue}, ${alpha})`;
+  if (!props.$isOpaque) {
     retVal = getCheckeredBackground({
       theme: props.theme,
       size: 13,
@@ -26,14 +26,11 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.1.0',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
   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, props));
-StyledPreview.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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, props));
 
 export { StyledPreview };

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

@@ -6,7 +6,7 @@
 */
 import { Field } from '@zendeskgarden/react-forms';
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_rgb_field';
 const sizeStyles = theme => {
@@ -20,13 +20,10 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
 })(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRGBAField.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledRGBAField };

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

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