@zendeskgarden/react-colorpickers 8.75.0 → 8.76.0

package/dist/esm/elements/Colorpicker/reducer.js

@@ -0,0 +1,275 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import isEqual from 'lodash.isequal';
+import { parseToHsl, parseToRgb, rgb, hsl } from 'polished';
+import { hsvToHsl } from '../../utils/conversion.js';
+import { isValidHex } from '../../utils/validation.js';
+
+function convertStringToColor(colorString) {
+  if (colorString.includes('#') && !isValidHex(colorString)) {
+    return undefined;
+  }
+  const {
+    hue,
+    saturation,
+    lightness
+  } = parseToHsl(colorString);
+  const {
+    red,
+    green,
+    blue,
+    alpha
+  } = parseToRgb(colorString);
+  const computedAlpha = alpha === undefined ? 100 : alpha * 100;
+  const computedHex = rgb({
+    red,
+    green,
+    blue
+  });
+  return {
+    hue,
+    saturation: saturation * 100,
+    lightness: lightness * 100,
+    red,
+    green,
+    blue,
+    alpha: computedAlpha,
+    hex: computedHex
+  };
+}
+const areColorsEqual = (a, b) => {
+  if (a === undefined || b === undefined) {
+    return false;
+  }
+  const colorA = typeof a === 'string' ? convertStringToColor(a) : a;
+  const colorB = typeof b === 'string' ? convertStringToColor(b) : b;
+  if (colorA === undefined || colorB === undefined) {
+    return false;
+  }
+  return isEqual(colorA, colorB);
+};
+function getInitialState(color) {
+  const whiteColor = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0,
+    red: 255,
+    green: 255,
+    blue: 255,
+    alpha: 100,
+    hex: '#ffffff'
+  };
+  if (color === undefined) {
+    return getInitialState(whiteColor);
+  }
+  if (typeof color === 'string') {
+    const computedColor = convertStringToColor(color);
+    return getInitialState(computedColor || whiteColor);
+  }
+  return {
+    color,
+    hexInput: color.hex,
+    redInput: color.red.toString(),
+    blueInput: color.blue.toString(),
+    greenInput: color.green.toString(),
+    alphaInput: color.alpha.toString()
+  };
+}
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'SATURATION_CHANGE':
+      {
+        const hsl$1 = hsvToHsl(action.payload.h, action.payload.s * 100, action.payload.v * 100);
+        const hex = hsl({
+          hue: action.payload.h,
+          saturation: hsl$1.s / 100,
+          lightness: hsl$1.l / 100
+        });
+        const rgb = parseToRgb(hex);
+        return {
+          ...state,
+          color: {
+            ...state.color,
+            saturation: hsl$1.s,
+            lightness: hsl$1.l,
+            hex,
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          }
+        };
+      }
+    case 'HUE_CHANGE':
+      {
+        const hue = Number(action.payload);
+        const hex = hsl({
+          hue,
+          saturation: state.color.saturation / 100,
+          lightness: state.color.lightness / 100
+        });
+        const rgb = parseToRgb(hex);
+        return {
+          ...state,
+          color: {
+            ...state.color,
+            hue,
+            hex,
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          }
+        };
+      }
+    case 'ALPHA_SLIDER_CHANGE':
+      {
+        return {
+          ...state,
+          color: {
+            ...state.color,
+            alpha: Math.round(Number(action.payload) * 100)
+          }
+        };
+      }
+    case 'HEX_CHANGE':
+      {
+        let color = state.color;
+        if (isValidHex(action.payload)) {
+          const rgb = parseToRgb(action.payload);
+          const hsl = parseToHsl(`rgb(${rgb.red}, ${rgb.green}, ${rgb.blue})`);
+          color = {
+            ...color,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100,
+            hex: action.payload,
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          };
+        }
+        return {
+          ...state,
+          hexInput: action.payload,
+          color
+        };
+      }
+    case 'RED_CHANGE':
+      {
+        let red = parseInt(action.payload, 10);
+        let color = state.color;
+        if (!isNaN(red)) {
+          if (red >= 255) {
+            red = 255;
+          }
+          if (red < 0) {
+            red = 0;
+          }
+          const hsl = parseToHsl(`rgb(${red}, ${color.green}, ${color.blue})`);
+          const hex = rgb(red, color.green, color.blue);
+          color = {
+            ...color,
+            hex,
+            red: action.payload === '' ? color.red : red,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
+        }
+        return {
+          ...state,
+          redInput: action.payload,
+          color
+        };
+      }
+    case 'GREEN_CHANGE':
+      {
+        let green = parseInt(action.payload, 10);
+        let color = state.color;
+        if (!isNaN(green)) {
+          if (green >= 255) {
+            green = 255;
+          }
+          if (green < 0) {
+            green = 0;
+          }
+          const hsl = parseToHsl(`rgb(${color.red}, ${green}, ${color.blue})`);
+          const hex = rgb(color.red, green, color.blue);
+          color = {
+            ...color,
+            hex,
+            green: action.payload === '' ? color.green : green,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
+        }
+        return {
+          ...state,
+          greenInput: action.payload,
+          color
+        };
+      }
+    case 'BLUE_CHANGE':
+      {
+        let blue = parseInt(action.payload, 10);
+        let color = state.color;
+        if (!isNaN(blue)) {
+          if (blue >= 255) {
+            blue = 255;
+          }
+          if (blue < 0) {
+            blue = 0;
+          }
+          const hsl = parseToHsl(`rgb(${color.red}, ${color.green}, ${blue})`);
+          const hex = rgb(color.red, color.green, blue);
+          color = {
+            ...color,
+            hex,
+            blue: action.payload === '' ? color.blue : blue,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
+        }
+        return {
+          ...state,
+          blueInput: action.payload,
+          color
+        };
+      }
+    case 'ALPHA_CHANGE':
+      {
+        let alpha = parseInt(action.payload, 10);
+        let color = state.color;
+        if (!isNaN(alpha)) {
+          if (alpha > 100) {
+            alpha = 100;
+          }
+          if (alpha < 0) {
+            alpha = 0;
+          }
+          color = {
+            ...color,
+            alpha
+          };
+        }
+        return {
+          ...state,
+          alphaInput: action.payload,
+          color
+        };
+      }
+    case 'RESET_COLOR':
+      {
+        return getInitialState(action.payload);
+      }
+    default:
+      throw new Error('Unknown reducer case.');
+  }
+};
+
+export { areColorsEqual, convertStringToColor, getInitialState, reducer };

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

@@ -0,0 +1,156 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useRef, useState, useEffect, cloneElement, Children } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@zendeskgarden/react-buttons';
+import { PLACEMENT } from '@zendeskgarden/react-modals';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+import { Colorpicker } from '../Colorpicker/index.js';
+import '../../styled/Colorpicker/StyledColorPicker.js';
+import '../../styled/Colorpicker/StyledHueRange.js';
+import '../../styled/Colorpicker/StyledAlphaRange.js';
+import '../../styled/Colorpicker/StyledPreview.js';
+import '../../styled/Colorpicker/StyledColorWell.js';
+import '../../styled/Colorpicker/StyledColorWellThumb.js';
+import '../../styled/Colorpicker/StyledSliderGroup.js';
+import '../../styled/Colorpicker/StyledHexField.js';
+import '../../styled/Colorpicker/StyledLabel.js';
+import '../../styled/Colorpicker/StyledInput.js';
+import '../../styled/Colorpicker/StyledInputGroup.js';
+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 { StyledTooltipBody } from '../../styled/ColorpickerDialog/StyledTooltipBody.js';
+import '../../styled/ColorSwatch/StyledSwatchButton.js';
+import '../../styled/ColorSwatch/StyledColorSwatch.js';
+import '../../styled/ColorSwatch/StyledIcon.js';
+import '../../styled/ColorSwatch/StyledCell.js';
+import { useText } from '@zendeskgarden/react-theming';
+
+const ColorpickerDialog = forwardRef((_ref, ref) => {
+  let {
+    color,
+    defaultColor,
+    placement,
+    onChange,
+    onClose,
+    labels,
+    hasArrow,
+    isAnimated,
+    isOpaque,
+    isOpen,
+    popperModifiers,
+    zIndex,
+    focusInset,
+    disabled,
+    buttonProps,
+    onDialogChange,
+    'aria-label': ariaLabel,
+    children,
+    ...props
+  } = _ref;
+  const isControlled = color !== null && color !== undefined;
+  const isDialogControlled = isOpen !== undefined && isOpen !== null;
+  const buttonRef = useRef(null);
+  const colorPickerRef = useRef(null);
+  const [referenceElement, setReferenceElement] = useState();
+  const [uncontrolledColor, setUncontrolledColor] = useState(defaultColor);
+  const ariaLabelText = useText(ColorpickerDialog, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Color picker');
+  const openDialog = () => {
+    setReferenceElement(buttonRef.current);
+    onDialogChange && onDialogChange({
+      isOpen: true
+    });
+  };
+  const closeDialog = () => {
+    setReferenceElement(null);
+    onDialogChange && onDialogChange({
+      isOpen: false
+    });
+  };
+  const onClick = composeEventHandlers(props.onClick, () => {
+    if (referenceElement) {
+      closeDialog();
+    } else {
+      openDialog();
+    }
+  });
+  useEffect(() => {
+    if (isDialogControlled) {
+      if (isOpen) {
+        setReferenceElement(buttonRef.current);
+      } else {
+        setReferenceElement(null);
+      }
+    }
+  }, [isOpen, isDialogControlled]);
+  return React__default.createElement(React__default.Fragment, null, children ? ( cloneElement(Children.only(children), {
+    onClick,
+    ref: buttonRef
+  })) : React__default.createElement(StyledButton, Object.assign({
+    disabled: disabled,
+    focusInset: focusInset,
+    ref: buttonRef,
+    onClick: onClick
+  }, buttonProps), React__default.createElement(StyledButtonPreview, {
+    backgroundColor: isControlled ? color : uncontrolledColor
+  }), React__default.createElement(Button.EndIcon, {
+    isRotated: referenceElement != null
+  }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, Object.assign({
+    ref: ref,
+    hasArrow: hasArrow,
+    popperModifiers: popperModifiers,
+    zIndex: zIndex,
+    isAnimated: isAnimated,
+    isOpaque: isOpaque,
+    focusOnMount: false,
+    placement: placement,
+    referenceElement: referenceElement,
+    onClose: () => {
+      closeDialog();
+      onClose && onClose(isControlled ? color : uncontrolledColor);
+    },
+    "aria-label": ariaLabelText
+  }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(Colorpicker, {
+    autofocus: true,
+    color: color,
+    isOpaque: isOpaque,
+    labels: labels,
+    ref: colorPickerRef,
+    defaultColor: uncontrolledColor,
+    onChange: isControlled ? onChange : setUncontrolledColor
+  }))));
+});
+ColorpickerDialog.propTypes = {
+  ...Colorpicker.propTypes,
+  placement: PropTypes.oneOf(PLACEMENT),
+  onClose: PropTypes.func,
+  onDialogChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  labels: PropTypes.object,
+  buttonProps: PropTypes.object,
+  popperModifiers: PropTypes.any,
+  zIndex: PropTypes.number,
+  hasArrow: PropTypes.bool,
+  isAnimated: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  focusInset: PropTypes.bool
+};
+ColorpickerDialog.defaultProps = {
+  placement: 'bottom-start',
+  isAnimated: true,
+  zIndex: 1000,
+  hasArrow: false
+};
+ColorpickerDialog.displayName = 'ColorpickerDialog';
+
+export { ColorpickerDialog };

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { Colorpicker } from './elements/Colorpicker/index.js';
+export { ColorpickerDialog } from './elements/ColorpickerDialog/index.js';
+export { ColorSwatch } from './elements/ColorSwatch/index.js';
+export { ColorSwatchDialog } from './elements/ColorSwatchDialog/index.js';

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

@@ -0,0 +1,29 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import * 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); }
+var SvgCheckSmFill = function SvgCheckSmFill(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M3 6l2 2 4-4"
+  })));
+};
+
+export { SvgCheckSmFill as default };

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

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import * 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); }
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
+
+export { SvgChevronDownStroke as default };

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

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.swatch_cell';
+const StyledCell = styled.td.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledCell",
+  componentId: "sc-qr3oit-0"
+})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCell };

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

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.color_swatch';
+const StyledColorSwatch = styled.table.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  role: 'grid'
+}).withConfig({
+  displayName: "StyledColorSwatch",
+  componentId: "sc-ajx440-0"
+})(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledColorSwatch.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledColorSwatch };

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

@@ -0,0 +1,48 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { parseToRgb, readableColor } from 'polished';
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import React__default, { Children } from 'react';
+
+const COMPONENT_ID = 'colorpickers.colorswatch_check';
+const colorStyles = props => {
+  const {
+    theme,
+    color
+  } = props;
+  const {
+    alpha
+  } = parseToRgb(color);
+  let checkColor = readableColor(color, getColorV8('foreground', 600 , theme), getColorV8('background', 600 , theme));
+  if (alpha !== undefined && alpha < 0.4) {
+    checkColor = getColorV8('foreground', 600 , theme);
+  }
+  return `
+    color: ${checkColor}
+  `;
+};
+const StyledIcon = styled(_ref => {
+  let {
+    children,
+    color,
+    theme,
+    ...props
+  } = _ref;
+  return React__default.cloneElement(Children.only(children), props);
+}).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-8oigif-0"
+})(["transition:opacity 0.2s ease-in-out;opacity:", ";width:", "px;height:", "px;", " ", ";"], props => props.selected ? 1 : 0, props => props.theme.space.base * 5, props => props.theme.space.base * 5, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon };

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

@@ -0,0 +1,27 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledButtonPreview } from '../ColorpickerDialog/StyledButtonPreview.js';
+
+const COMPONENT_ID = 'colorpickers.swatch_button';
+const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
+  as: 'button',
+  'data-garden-id': COMPONENT_ID,
+  'data-test-id': props.backgroundColor,
+  'data-garden-version': '8.76.0'
+})).withConfig({
+  displayName: "StyledSwatchButton",
+  componentId: "sc-edpwpp-0"
+})(["transition:box-shadow 0.1s ease-in-out;outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;", " ", ";"], props => props.theme.borderRadii.md, props => focusStyles({
+  theme: props.theme
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSwatchButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSwatchButton };

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

@@ -0,0 +1,37 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
+import { checkeredBackground } from '../common/checkeredBackground.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 positionY = getTrackMargin(props);
+  const height = getTrackHeight(props);
+  const gradientBackground = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
+  return `${gradientBackground}, ${checkeredBackground(props.theme, height, positionY, 'repeat-x')}`;
+};
+const StyledAlphaRange = styled(StyledRange).attrs(props => ({
+  style: {
+    backgroundSize: 'auto',
+    background: background(props)
+  },
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+})).withConfig({
+  displayName: "StyledAlphaRange",
+  componentId: "sc-kuh2xc-0"
+})([""]);
+StyledAlphaRange.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledAlphaRange };

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

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker';
+const getColorV8PickerWidth = props => {
+  return props.isOpaque ? 268 : 312;
+};
+const StyledColorPicker = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledColorPicker",
+  componentId: "sc-1donyl9-0"
+})(["width:", "px;min-width:", "px;", ";"], getColorV8PickerWidth, getColorV8PickerWidth, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledColorPicker.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledColorPicker, getColorV8PickerWidth };