@zendeskgarden/react-colorpickers 9.4.0 → 9.5.1

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

@@ -93,15 +93,17 @@ 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/ColorSwatch/index.js

@@ -71,7 +71,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", {

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

@@ -30,7 +30,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker';
 const getColorPickerWidth = props => {
@@ -13,10 +13,10 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, componentStyles);
 
 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 } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_colorwell';
 const background = props => {
@@ -20,7 +20,7 @@ const background = props => {
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   'data-test-id': 'colorwell',
   style: {
     background: background(props)
@@ -28,6 +28,6 @@ const StyledColorWell = styled.div.attrs(props => ({
 })).withConfig({
   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));
+})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, componentStyles);
 
 export { StyledColorWell };

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

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { stripUnit } from 'polished';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb';
 const colorStyles = _ref => {
@@ -34,7 +34,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.$top}%`,
@@ -43,6 +43,6 @@ const StyledColorWellThumb = styled.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1npyab0-0"
-})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles, colorStyles, componentStyles);
 
 export { StyledColorWellThumb };

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

@@ -5,17 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } 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.4.0',
+  'data-garden-version': '9.5.1',
   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));
+})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], componentStyles);
 
 export { StyledHexField };

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

@@ -10,7 +10,7 @@ import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRan
 const COMPONENT_ID = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"

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

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

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

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } 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.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
-})(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;justify-content:space-between;", ";"], componentStyles);
 
 export { StyledInputGroup };

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

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

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

@@ -6,7 +6,7 @@
 */
 import styled from 'styled-components';
 import { rgba } from 'polished';
-import { retrieveComponentStyles, getCheckeredBackground } from '@zendeskgarden/react-theming';
+import { componentStyles, getCheckeredBackground } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_preview_box';
 const background = props => {
@@ -26,11 +26,11 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   '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));
+})(["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), componentStyles);
 
 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 } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_rgb_field';
 const sizeStyles = theme => {
@@ -20,10 +20,10 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
-})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), componentStyles);
 
 export { StyledRGBAField };

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

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } 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.4.0'
+  'data-garden-version': '9.5.1'
 }).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));
+})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, componentStyles);
 
 export { StyledSliderGroup };

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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { getTrackHeight, getTrackMargin } from '../common/StyledRange.js';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_sliders';
@@ -33,10 +33,10 @@ const sizeStyles = props => {
 };
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
-})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, componentStyles);
 
 export { StyledSliders };

package/dist/esm/styled/ColorPickerDialog/StyledButton.js

@@ -9,7 +9,7 @@ import { Button } from '@zendeskgarden/react-buttons';
 
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"

package/dist/esm/styled/ColorPickerDialog/StyledButtonPreview.js

@@ -6,7 +6,7 @@
 */
 import styled from 'styled-components';
 import { rgba } from 'polished';
-import { getCheckeredBackground, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getCheckeredBackground, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colordialog_preview';
 const background = _ref => {
@@ -39,11 +39,11 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
   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, props));
+})(["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, componentStyles);
 
 export { StyledButtonPreview };

package/dist/esm/styled/ColorPickerDialog/StyledTooltipBody.js

@@ -6,15 +6,15 @@
 */
 import styled from 'styled-components';
 import { TooltipDialog } from '@zendeskgarden/react-modals';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog_body';
 const StyledTooltipBody = styled(TooltipDialog.Body).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
-})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["padding:0;", ";"], componentStyles);
 
 export { StyledTooltipBody };

package/dist/esm/styled/ColorPickerDialog/StyledTooltipDialog.js

@@ -6,15 +6,15 @@
 */
 import styled from 'styled-components';
 import { TooltipDialog } from '@zendeskgarden/react-modals';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog';
 const StyledTooltipDialog = styled(TooltipDialog).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledTooltipDialog",
   componentId: "sc-1vbkccl-0"
-})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["width:auto !important;", ";"], componentStyles);
 
 export { StyledTooltipDialog };

package/dist/esm/styled/ColorSwatch/StyledCell.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
-})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, componentStyles);
 
 export { StyledCell };

package/dist/esm/styled/ColorSwatch/StyledColorSwatch.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
-})(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["border-collapse:collapse;line-height:normal;", ";"], componentStyles);
 
 export { StyledColorSwatch };

package/dist/esm/styled/ColorSwatch/StyledColorSwatchInput.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
-})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], componentStyles);
 
 export { StyledColorSwatchInput };

package/dist/esm/styled/ColorSwatch/StyledColorSwatchLabel.js

@@ -6,7 +6,7 @@
 */
 import styled from 'styled-components';
 import { parseToRgb, readableColor } from 'polished';
-import { focusStyles, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { focusStyles, componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledButtonPreview } from '../ColorPickerDialog/StyledButtonPreview.js';
 
 const COMPONENT_ID = 'colorpickers.color_swatch_label';
@@ -38,13 +38,13 @@ const colorStyles = _ref => {
 const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
 })(["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, props));
+}), componentStyles);
 
 export { StyledColorSwatchLabel };

package/dist/esm/styled/ColorSwatch/StyledIcon.js

@@ -5,16 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
 import { StyledColorSwatchInput } from './StyledColorSwatchInput.js';
 
 const COMPONENT_ID = 'colorpickers.colorswatch_check';
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
-})(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, componentStyles);
 
 export { StyledIcon };

package/dist/esm/styled/common/StyledRange.js

@@ -7,7 +7,7 @@
 import { Range } from '@zendeskgarden/react-forms';
 import styled from 'styled-components';
 import { stripUnit } from 'polished';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_range';
 const thumbStyles = function (styles) {
@@ -145,13 +145,13 @@ const sizeStyles = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
   componentId: "sc-ug3wi9-0"
 })(["", ";", " ", ";", ";"], sizeStyles, trackStyles(`
     border-radius: 0;
-  `), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+  `), colorStyles, componentStyles);
 
 export { StyledRange, getTrackHeight, getTrackMargin, trackStyles };

package/dist/index.cjs.js

@@ -137,11 +137,11 @@ const getColorPickerWidth = props => {
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, reactTheming.componentStyles);
 
 const COMPONENT_ID$k = 'colorpickers.colorpicker_range';
 const thumbStyles = function (styles) {
@@ -279,19 +279,19 @@ const sizeStyles$3 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
   componentId: "sc-ug3wi9-0"
 })(["", ";", " ", ";", ";"], sizeStyles$3, trackStyles(`
     border-radius: 0;
-  `), colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
+  `), colorStyles$2, reactTheming.componentStyles);
 
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
@@ -319,7 +319,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"
@@ -343,12 +343,12 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   '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 => 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$h, props));
+})(["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), reactTheming.componentStyles);
 
 const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell';
 const background$1 = props => {
@@ -362,7 +362,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -370,7 +370,7 @@ const StyledColorWell = styled__default.default.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWell",
   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$g, props));
+})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, reactTheming.componentStyles);
 
 const COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
 const colorStyles$1 = _ref => {
@@ -398,7 +398,7 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.$top}%`,
@@ -407,54 +407,54 @@ const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1npyab0-0"
-})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles$2, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles$2, colorStyles$1, reactTheming.componentStyles);
 
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"
-})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
+})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, reactTheming.componentStyles);
 
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1uzlutt-0"
-})(["text-align:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["text-align:center;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"
-})(["display:flex;justify-content:space-between;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+})(["display:flex;justify-content:space-between;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$9 = 'colorpickers.colorpicker_rgb_field';
 const sizeStyles$1 = theme => {
@@ -468,11 +468,11 @@ const sizeStyles$1 = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"
-})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles$1(props.theme), reactTheming.componentStyles);
 
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const sizeStyles = props => {
@@ -499,15 +499,15 @@ const sizeStyles = props => {
 };
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
-})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, reactTheming.componentStyles);
 
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
@@ -544,48 +544,48 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.1',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
   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));
+})(["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, reactTheming.componentStyles);
 
 const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipdialog';
 const StyledTooltipDialog = styled__default.default(reactModals.TooltipDialog).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledTooltipDialog",
   componentId: "sc-1vbkccl-0"
-})(["width:auto !important;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["width:auto !important;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipdialog_body';
 const StyledTooltipBody = styled__default.default(reactModals.TooltipDialog.Body).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
-})(["padding:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["padding:0;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$4 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
-})(["border-collapse:collapse;line-height:normal;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["border-collapse:collapse;line-height:normal;", ";"], reactTheming.componentStyles);
 
 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.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
-})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;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%;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'colorpickers.color_swatch_label';
 const colorStyles = _ref => {
@@ -616,32 +616,32 @@ const colorStyles = _ref => {
 const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
 })(["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));
+}), reactTheming.componentStyles);
 
 const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
-})(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, reactTheming.componentStyles);
 
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.1'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
-})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, reactTheming.componentStyles);
 
 const ColorWell = React__namespace.default.memo(_ref => {
   let {
@@ -704,15 +704,17 @@ const ColorWell = React__namespace.default.memo(_ref => {
       throttledChange.cancel();
     };
   }, [throttledChange]);
-  return React__namespace.default.createElement(StyledColorWell, {
-    $hue: hue,
-    ref: containerRef,
-    role: "presentation",
-    onMouseDown: handleMouseDown
-  }, React__namespace.default.createElement(StyledColorWellThumb, {
-    $top: mouseActiveRef.current ? topFromMouse : topPosition,
-    $left: mouseActiveRef.current ? leftFromMouse : leftPosition
-  }));
+  return (
+    React__namespace.default.createElement(StyledColorWell, {
+      $hue: hue,
+      ref: containerRef,
+      role: "presentation",
+      onMouseDown: handleMouseDown
+    }, React__namespace.default.createElement(StyledColorWellThumb, {
+      $top: mouseActiveRef.current ? topFromMouse : topPosition,
+      $left: mouseActiveRef.current ? leftFromMouse : leftPosition
+    }))
+  );
 });
 ColorWell.displayName = 'ColorWell';
 
@@ -1374,7 +1376,7 @@ const ColorSwatch = React.forwardRef((_ref, ref) => {
       setColIndex(col);
     }
   });
-  return  React__namespace.default.createElement(StyledColorSwatch, Object.assign({
+  return React__namespace.default.createElement(StyledColorSwatch, Object.assign({
     role: "grid",
     ref: reactMergeRefs.mergeRefs([gridRef, ref])
   }, props), React__namespace.default.createElement("tbody", null, colors.map((row, _rowIndex) => React__namespace.default.createElement("tr", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "9.4.0",
+  "version": "9.5.1",
   "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.4.0",
-    "@zendeskgarden/react-forms": "^9.4.0",
-    "@zendeskgarden/react-modals": "^9.4.0",
-    "@zendeskgarden/react-tooltips": "^9.4.0",
+    "@zendeskgarden/react-buttons": "^9.5.1",
+    "@zendeskgarden/react-forms": "^9.5.1",
+    "@zendeskgarden/react-modals": "^9.5.1",
+    "@zendeskgarden/react-tooltips": "^9.5.1",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.3.1",
@@ -42,8 +42,8 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^9.4.0",
-    "@zendeskgarden/svg-icons": "7.3.0"
+    "@zendeskgarden/react-theming": "^9.5.1",
+    "@zendeskgarden/svg-icons": "7.5.0"
   },
   "keywords": [
     "colorpicker",
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "02e3f240b6f0c776fdae785254d6fe90cbfc37e4"
+  "gitHead": "2571d0225b784bb7c765316ed584d289d35d4605"
 }