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

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

@@ -0,0 +1,153 @@
+/**
+* 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/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';
+
+const ColorPickerDialog = forwardRef((_ref, ref) => {
+  let {
+    color,
+    defaultColor,
+    placement,
+    onChange,
+    onClose,
+    labels,
+    hasArrow,
+    isAnimated,
+    isOpaque,
+    isOpen,
+    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,
+    zIndex: zIndex,
+    isAnimated: isAnimated,
+    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,
+  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/elements/ColorSwatch/index.js

@@ -0,0 +1,149 @@
+/**
+* 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, useContext, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
+import { ThemeContext } from 'styled-components';
+import { useGrid } from '@zendeskgarden/container-grid';
+import { useId } from '@zendeskgarden/container-utilities';
+import { DEFAULT_THEME, useDocument } from '@zendeskgarden/react-theming';
+import { Tooltip } from '@zendeskgarden/react-tooltips';
+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 '../../styled/ColorPickerDialog/StyledButton.js';
+import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
+import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
+import { StyledColorSwatch } from '../../styled/ColorSwatch/StyledColorSwatch.js';
+import { StyledColorSwatchInput } from '../../styled/ColorSwatch/StyledColorSwatchInput.js';
+import { StyledColorSwatchLabel } from '../../styled/ColorSwatch/StyledColorSwatchLabel.js';
+import { StyledIcon } from '../../styled/ColorSwatch/StyledIcon.js';
+import { StyledCell } from '../../styled/ColorSwatch/StyledCell.js';
+
+const ColorSwatch = forwardRef((_ref, ref) => {
+  let {
+    name,
+    colors,
+    isCheckboxGroup,
+    defaultSelectedColIndex,
+    defaultSelectedRowIndex,
+    selectedColIndex,
+    selectedRowIndex,
+    onSelect,
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const environment = useDocument(theme);
+  const gridRef = useRef();
+  const [rowIndex, setRowIndex] = useState(selectedRowIndex === null ? undefined : selectedRowIndex);
+  const [colIndex, setColIndex] = useState(selectedColIndex === null ? undefined : selectedColIndex);
+  const isControlled = selectedColIndex !== undefined && selectedRowIndex !== undefined;
+  const {
+    getGridCellProps
+  } = useGrid({
+    environment,
+    rtl: theme.rtl,
+    matrix: colors,
+    wrap: true,
+    idPrefix: useId(undefined),
+    defaultRowIndex: defaultSelectedRowIndex,
+    defaultColIndex: defaultSelectedColIndex,
+    rowIndex,
+    colIndex,
+    onChange: (row, col) => {
+      setRowIndex(row);
+      setColIndex(col);
+    }
+  });
+  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", {
+    key: row[0].value
+  }, row.map((color, _colIndex) => {
+    const {
+      label,
+      value
+    } = color;
+    const {
+      role,
+      ...gridCellProps
+    } = getGridCellProps({
+      colIndex: _colIndex,
+      rowIndex: _rowIndex
+    });
+    const checked = isControlled ? selectedRowIndex === _rowIndex && selectedColIndex === _colIndex : undefined;
+    const defaultChecked = isControlled ? undefined : defaultSelectedRowIndex === _rowIndex && defaultSelectedColIndex === _colIndex;
+    const handleChange = event => {
+      if (onSelect) {
+        if (event.target.checked) {
+          onSelect(_rowIndex, _colIndex);
+        } else {
+          onSelect(null, null);
+        }
+      }
+      if (isCheckboxGroup && event.target.checked) {
+        const inputs = gridRef.current?.querySelectorAll('input');
+        inputs?.forEach(input => {
+          if (input !== event.target) {
+            input.checked = false;
+          }
+        });
+      }
+    };
+    const handleBlur = event => {
+      if (!(isCheckboxGroup || gridRef.current?.contains(event.relatedTarget))) {
+        const selectedInput = gridRef.current?.querySelector(`input[name='${event.target.name}']:checked`);
+        if (selectedInput !== null) {
+          const inputs = gridRef.current?.querySelectorAll('input');
+          inputs?.forEach(input => input.setAttribute('tabIndex', input.checked ? '0' : '-1'));
+        }
+      }
+    };
+    return React__default.createElement(StyledCell, {
+      key: value,
+      role: role
+    }, React__default.createElement(StyledColorSwatchLabel, {
+      $backgroundColor: value
+    }, React__default.createElement(Tooltip, {
+      content: label
+    }, React__default.createElement(StyledColorSwatchInput, Object.assign({
+      "aria-label": label,
+      name: name,
+      type: isCheckboxGroup ? 'checkbox' : 'radio',
+      value: value,
+      defaultChecked: defaultChecked,
+      checked: checked,
+      onBlur: handleBlur,
+      onChange: handleChange
+    }, gridCellProps))), React__default.createElement(StyledIcon, null)));
+  })))));
+});
+ColorSwatch.displayName = 'ColorSwatch';
+ColorSwatch.propTypes = {
+  name: PropTypes.string.isRequired,
+  colors: PropTypes.arrayOf(PropTypes.any).isRequired,
+  isCheckboxGroup: PropTypes.bool,
+  selectedRowIndex: PropTypes.number,
+  selectedColIndex: PropTypes.number,
+  defaultSelectedRowIndex: PropTypes.number,
+  defaultSelectedColIndex: PropTypes.number,
+  onSelect: PropTypes.func
+};
+
+export { ColorSwatch };

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

@@ -0,0 +1,179 @@
+/**
+* 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 { 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';
+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/StyledColorSwatch.js';
+import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
+import '../../styled/ColorSwatch/StyledColorSwatchLabel.js';
+import '../../styled/ColorSwatch/StyledIcon.js';
+import '../../styled/ColorSwatch/StyledCell.js';
+
+const ColorSwatchDialog = forwardRef((_ref, ref) => {
+  let {
+    name,
+    colors,
+    isCheckboxGroup,
+    selectedRowIndex,
+    selectedColIndex,
+    defaultSelectedRowIndex,
+    defaultSelectedColIndex,
+    placement,
+    onSelect,
+    hasArrow,
+    isAnimated,
+    zIndex,
+    isOpen,
+    focusInset,
+    disabled,
+    buttonProps,
+    onDialogChange,
+    children,
+    'aria-label': ariaLabel,
+    ...props
+  } = _ref;
+  const isControlled = selectedRowIndex !== undefined && selectedColIndex !== undefined;
+  const isDialogControlled = isOpen !== undefined && isOpen !== null;
+  const buttonRef = useRef(null);
+  const colorSwatchRef = useRef(null);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [rowIndex, setRowIndex] = useState(defaultSelectedRowIndex);
+  const [colIndex, setColIndex] = useState(defaultSelectedColIndex);
+  let backgroundColor;
+  if (isControlled) {
+    if (selectedRowIndex !== null && selectedColIndex !== null) {
+      backgroundColor = colors[selectedRowIndex][selectedColIndex].value;
+    }
+  } else if (rowIndex !== undefined && colIndex !== undefined) {
+    backgroundColor = colors[rowIndex][colIndex].value;
+  }
+  const ariaLabelText = useText(ColorSwatchDialog, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Color swatch');
+  useEffect(() => {
+    if (isDialogControlled) {
+      if (isOpen) {
+        setReferenceElement(buttonRef.current);
+      } else {
+        setReferenceElement(null);
+      }
+    }
+  }, [isOpen, isDialogControlled]);
+  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 (referenceElement && colorSwatchRef.current) {
+      const input = colorSwatchRef.current.querySelector('[tabindex="0"]');
+      input?.focus();
+    }
+  }, [referenceElement]);
+  const handleSelect = (row, col) => {
+    if (isControlled === false) {
+      if (row === null || col === null) {
+        setRowIndex(undefined);
+        setColIndex(undefined);
+      } else {
+        setRowIndex(row);
+        setColIndex(col);
+      }
+    }
+    onSelect && onSelect(row, col);
+  };
+  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: backgroundColor
+  }), React__default.createElement(Button.EndIcon, {
+    isRotated: referenceElement !== null
+  }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, Object.assign({
+    ref: ref,
+    zIndex: zIndex,
+    hasArrow: hasArrow,
+    focusOnMount: false,
+    placement: placement,
+    isAnimated: isAnimated,
+    referenceElement: referenceElement,
+    onClose: closeDialog,
+    "aria-label": ariaLabelText
+  }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(ColorSwatch, {
+    name: name,
+    colors: colors,
+    ref: colorSwatchRef,
+    isCheckboxGroup: isCheckboxGroup,
+    selectedRowIndex: selectedRowIndex,
+    selectedColIndex: selectedColIndex,
+    defaultSelectedRowIndex: rowIndex,
+    defaultSelectedColIndex: colIndex,
+    onSelect: handleSelect
+  }))));
+});
+ColorSwatchDialog.propTypes = {
+  ...ColorSwatch.propTypes,
+  placement: PropTypes.oneOf(PLACEMENT),
+  onDialogChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  buttonProps: PropTypes.object,
+  zIndex: PropTypes.number,
+  hasArrow: PropTypes.bool,
+  isAnimated: PropTypes.bool,
+  focusInset: PropTypes.bool,
+  isOpen: PropTypes.bool
+};
+ColorSwatchDialog.defaultProps = {
+  placement: 'bottom-start',
+  isAnimated: true,
+  zIndex: 1000,
+  hasArrow: false
+};
+ColorSwatchDialog.displayName = 'ColorSwatchDialog';
+
+export { ColorSwatchDialog };

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() { 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",
+    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() { 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",
+    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/ColorPicker/StyledAlphaRange.js

@@ -0,0 +1,42 @@
+/**
+* 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, 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 positionY = getTrackMargin(props);
+  const height = getTrackHeight(props);
+  const overlay = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
+  return getCheckeredBackground({
+    theme: props.theme,
+    size: height,
+    positionY,
+    repeat: 'repeat-x',
+    overlay
+  });
+};
+const StyledAlphaRange = styled(StyledRange).attrs(props => ({
+  style: {
+    backgroundSize: 'auto',
+    background: background(props)
+  },
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+})).withConfig({
+  displayName: "StyledAlphaRange",
+  componentId: "sc-1f6hp2j-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 getColorPickerWidth = props => {
+  return props.$isOpaque ? 268 : 312;
+};
+const StyledColorPicker = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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

@@ -0,0 +1,36 @@
+/**
+* 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 { rgba, hsl } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_colorwell';
+const background = props => {
+  const blackAlpha = rgba(props.theme.palette.black, 0.9);
+  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 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.21',
+  'data-test-id': 'colorwell',
+  style: {
+    background: background(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));
+StyledColorWell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledColorWell };