@zendeskgarden/react-colorpickers 8.75.1 → 8.76.1

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

@@ -0,0 +1,102 @@
+/**
+* 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 } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { Tooltip } from '@zendeskgarden/react-tooltips';
+import { useGrid } from '@zendeskgarden/container-grid';
+import { useId } from '@zendeskgarden/container-utilities';
+import SvgCheckSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.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 '../../styled/ColorpickerDialog/StyledButton.js';
+import '../../styled/ColorpickerDialog/StyledButtonPreview.js';
+import '../../styled/ColorpickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorpickerDialog/StyledTooltipBody.js';
+import { StyledSwatchButton } from '../../styled/ColorSwatch/StyledSwatchButton.js';
+import { StyledColorSwatch } from '../../styled/ColorSwatch/StyledColorSwatch.js';
+import { StyledIcon } from '../../styled/ColorSwatch/StyledIcon.js';
+import { StyledCell } from '../../styled/ColorSwatch/StyledCell.js';
+
+const ColorSwatch = forwardRef((_ref, ref) => {
+  let {
+    colors,
+    ...props
+  } = _ref;
+  const {
+    rtl
+  } = useContext(ThemeContext);
+  const {
+    getGridCellProps
+  } = useGrid({
+    rtl,
+    matrix: colors,
+    selection: true,
+    wrap: true,
+    idPrefix: useId(undefined),
+    ...props
+  });
+  return React__default.createElement(StyledColorSwatch, {
+    ref: ref
+  }, React__default.createElement("tbody", null, colors.map((row, rowIdx) => React__default.createElement("tr", {
+    key: row[0].value
+  }, row.map((color, colIdx) => {
+    const {
+      label,
+      value
+    } = color;
+    const {
+      'aria-selected': ariaSelected,
+      ...other
+    } = getGridCellProps({
+      colIdx,
+      rowIdx,
+      type: 'button',
+      role: undefined
+    });
+    return React__default.createElement(StyledCell, {
+      key: value,
+      "aria-selected": ariaSelected
+    }, React__default.createElement(Tooltip, {
+      content: label
+    }, React__default.createElement(StyledSwatchButton, Object.assign({
+      backgroundColor: value,
+      "aria-pressed": ariaSelected,
+      "aria-label": label
+    }, other), React__default.createElement(StyledIcon, {
+      color: value,
+      selected: ariaSelected
+    }, React__default.createElement(SvgCheckSmFill, null)))));
+  })))));
+});
+ColorSwatch.displayName = 'ColorSwatch';
+ColorSwatch.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.any).isRequired,
+  rowIndex: PropTypes.number,
+  colIndex: PropTypes.number,
+  selectedRowIndex: PropTypes.number,
+  selectedColIndex: PropTypes.number,
+  defaultRowIndex: PropTypes.number,
+  defaultColIndex: PropTypes.number,
+  defaultSelectedRowIndex: PropTypes.number,
+  defaultSelectedColIndex: PropTypes.number,
+  onChange: PropTypes.func,
+  onSelect: PropTypes.func
+};
+
+export { ColorSwatch };

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

@@ -0,0 +1,198 @@
+/**
+* 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/StyledSwatchButton.js';
+import '../../styled/ColorSwatch/StyledColorSwatch.js';
+import '../../styled/ColorSwatch/StyledIcon.js';
+import '../../styled/ColorSwatch/StyledCell.js';
+
+const ColorSwatchDialog = forwardRef((_ref, ref) => {
+  let {
+    colors,
+    rowIndex,
+    colIndex,
+    selectedRowIndex,
+    selectedColIndex,
+    defaultRowIndex,
+    defaultColIndex,
+    defaultSelectedRowIndex,
+    defaultSelectedColIndex,
+    placement,
+    onChange,
+    onSelect,
+    hasArrow,
+    isAnimated,
+    popperModifiers,
+    zIndex,
+    isOpen,
+    focusInset,
+    disabled,
+    buttonProps,
+    onDialogChange,
+    children,
+    'aria-label': ariaLabel,
+    ...props
+  } = _ref;
+  const controlledFocus = rowIndex !== null && colIndex !== null && rowIndex !== undefined && colIndex !== undefined;
+  const controlledSelect = selectedRowIndex !== null && selectedColIndex !== null && selectedRowIndex !== undefined && selectedColIndex !== undefined;
+  const isControlled = controlledFocus || controlledSelect;
+  const isDialogControlled = isOpen !== undefined && isOpen !== null;
+  const buttonRef = useRef(null);
+  const colorSwatchRef = useRef(null);
+  const [referenceElement, setReferenceElement] = useState();
+  const [uncontrolledSelectedRowIndex, setUncontrolledSelectedRowIndex] = useState(defaultSelectedRowIndex || 0);
+  const [uncontrolledSelectedColIndex, setUncontrolledSelectedColIndex] = useState(defaultSelectedColIndex || 0);
+  const [uncontrolledRowIndex, setUncontrolledRowIndex] = useState(defaultRowIndex || 0);
+  const [uncontrolledColIndex, setUncontrolledColIndex] = useState(defaultColIndex || 0);
+  const ariaLabelText = useText(ColorSwatchDialog, {
+    'aria-label': ariaLabel
+  }, 'aria-label', 'Color swatch');
+  useEffect(() => {
+    if (isDialogControlled) {
+      if (isOpen) {
+        setReferenceElement(buttonRef.current);
+      } else {
+        setReferenceElement(null);
+      }
+    }
+  }, [isOpen, isDialogControlled]);
+  let uncontrolledSelectedColor;
+  let controlledSelectedColor;
+  if (uncontrolledSelectedRowIndex > -1 && uncontrolledSelectedColIndex > -1) {
+    uncontrolledSelectedColor = colors[uncontrolledSelectedRowIndex][uncontrolledSelectedColIndex];
+  }
+  if (selectedRowIndex !== undefined && selectedColIndex !== undefined && selectedRowIndex > -1 && selectedColIndex > -1) {
+    controlledSelectedColor = colors[selectedRowIndex][selectedColIndex];
+  }
+  const openDialog = () => {
+    setReferenceElement(buttonRef.current);
+    onDialogChange && onDialogChange({
+      isOpen: true
+    });
+  };
+  const closeDialog = () => {
+    setUncontrolledRowIndex(uncontrolledSelectedRowIndex);
+    setUncontrolledColIndex(uncontrolledSelectedColIndex);
+    setReferenceElement(null);
+    onDialogChange && onDialogChange({
+      isOpen: false
+    });
+  };
+  const onClick = composeEventHandlers(props.onClick, () => {
+    if (referenceElement) {
+      closeDialog();
+    } else {
+      openDialog();
+    }
+  });
+  useEffect(() => {
+    if (referenceElement && colorSwatchRef.current) {
+      const focusableButton = colorSwatchRef.current.querySelector('[tabindex="0"]');
+      const selectedCell = colorSwatchRef.current.querySelector('[aria-selected="true"]');
+      if (selectedCell) {
+        selectedCell.children[0].focus();
+      } else {
+        focusableButton?.focus();
+      }
+    }
+  }, [referenceElement]);
+  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 ? controlledSelectedColor?.value : uncontrolledSelectedColor?.value
+  }), 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,
+    popperModifiers: popperModifiers,
+    referenceElement: referenceElement,
+    onClose: closeDialog,
+    "aria-label": ariaLabelText
+  }, props), React__default.createElement(StyledTooltipBody, null, React__default.createElement(ColorSwatch, {
+    colors: colors,
+    ref: colorSwatchRef,
+    rowIndex: rowIndex,
+    colIndex: colIndex,
+    selectedRowIndex: selectedRowIndex,
+    selectedColIndex: selectedColIndex,
+    defaultRowIndex: uncontrolledRowIndex,
+    defaultColIndex: uncontrolledColIndex,
+    defaultSelectedRowIndex: uncontrolledSelectedRowIndex,
+    defaultSelectedColIndex: uncontrolledSelectedColIndex,
+    onChange: (rowIdx, colIdx) => {
+      if (isControlled === false) {
+        setUncontrolledRowIndex(rowIdx);
+        setUncontrolledColIndex(colIdx);
+      }
+      onChange && onChange(rowIdx, colIdx);
+    },
+    onSelect: (rowIdx, colIdx) => {
+      if (isControlled === false) {
+        setUncontrolledSelectedRowIndex(rowIdx);
+        setUncontrolledSelectedColIndex(colIdx);
+      }
+      onSelect && onSelect(rowIdx, colIdx);
+    }
+  }))));
+});
+ColorSwatchDialog.propTypes = {
+  ...ColorSwatch.propTypes,
+  placement: PropTypes.oneOf(PLACEMENT),
+  onDialogChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  buttonProps: PropTypes.object,
+  popperModifiers: PropTypes.any,
+  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/elements/Colorpicker/ColorWell.js

@@ -0,0 +1,109 @@
+/**
+* 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, { useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import throttle from 'lodash.throttle';
+import { ThemeContext } from 'styled-components';
+import { hslToHsv } from '../../utils/conversion.js';
+import { getThumbPosition, getNextHsv } from '../../utils/saturation.js';
+import '../../styled/Colorpicker/StyledColorPicker.js';
+import '../../styled/Colorpicker/StyledHueRange.js';
+import '../../styled/Colorpicker/StyledAlphaRange.js';
+import '../../styled/Colorpicker/StyledPreview.js';
+import { StyledColorWell } from '../../styled/Colorpicker/StyledColorWell.js';
+import { StyledColorWellThumb } from '../../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 '../../styled/ColorSwatch/StyledSwatchButton.js';
+import '../../styled/ColorSwatch/StyledColorSwatch.js';
+import '../../styled/ColorSwatch/StyledIcon.js';
+import '../../styled/ColorSwatch/StyledCell.js';
+
+const ColorWell = React__default.memo(_ref => {
+  let {
+    hue,
+    saturation,
+    lightness,
+    onChange
+  } = _ref;
+  const {
+    rtl
+  } = useContext(ThemeContext);
+  const containerRef = useRef(null);
+  const hsv = hslToHsv(hue, saturation, lightness);
+  const mouseActiveRef = useRef(false);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const {
+    topFromMouse,
+    leftFromMouse
+  } = getThumbPosition(x, y, rtl, containerRef);
+  const [topPosition, setTopPosition] = useState(0);
+  const [leftPosition, setLeftPosition] = useState(0);
+  useEffect(() => {
+    setTopPosition(100 - hsv.v);
+    setLeftPosition(rtl ? 100 - hsv.s : hsv.s);
+  }, [hsv.s, hsv.v, rtl]);
+  const throttledChange = useMemo(() => {
+    return throttle(e => {
+      if (containerRef.current) {
+        const nextHsv = getNextHsv(e, hue, containerRef.current, rtl);
+        onChange && onChange(nextHsv, e);
+      }
+    }, 50);
+  }, [hue, rtl, onChange]);
+  const handleMouseMove = useCallback(e => {
+    mouseActiveRef.current = true;
+    setX(e.pageX);
+    setY(e.pageY);
+    throttledChange(e);
+  }, [throttledChange]);
+  const handleMouseUp = useCallback(() => {
+    mouseActiveRef.current = true;
+    setTimeout(() => {
+      mouseActiveRef.current = false;
+    });
+    throttledChange.cancel();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  }, [throttledChange, handleMouseMove]);
+  const handleMouseDown = useCallback(e => {
+    mouseActiveRef.current = true;
+    e.persist();
+    handleMouseMove(e);
+    throttledChange(e);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  }, [throttledChange, handleMouseMove, handleMouseUp]);
+  useEffect(() => {
+    return () => {
+      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
+    }))
+  );
+});
+ColorWell.displayName = 'ColorWell';
+
+export { ColorWell };

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

@@ -0,0 +1,236 @@
+/**
+* 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, useReducer, useRef, useMemo, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Field, Label } from '@zendeskgarden/react-forms';
+import { ColorWell } from './ColorWell.js';
+import { StyledColorPicker } from '../../styled/Colorpicker/StyledColorPicker.js';
+import { StyledHueRange } from '../../styled/Colorpicker/StyledHueRange.js';
+import { StyledAlphaRange } from '../../styled/Colorpicker/StyledAlphaRange.js';
+import { StyledPreview } from '../../styled/Colorpicker/StyledPreview.js';
+import '../../styled/Colorpicker/StyledColorWell.js';
+import '../../styled/Colorpicker/StyledColorWellThumb.js';
+import { StyledSliderGroup } from '../../styled/Colorpicker/StyledSliderGroup.js';
+import { StyledHexField } from '../../styled/Colorpicker/StyledHexField.js';
+import { StyledLabel } from '../../styled/Colorpicker/StyledLabel.js';
+import { StyledInput } from '../../styled/Colorpicker/StyledInput.js';
+import { StyledInputGroup } from '../../styled/Colorpicker/StyledInputGroup.js';
+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/StyledTooltipBody.js';
+import '../../styled/ColorSwatch/StyledSwatchButton.js';
+import '../../styled/ColorSwatch/StyledColorSwatch.js';
+import '../../styled/ColorSwatch/StyledIcon.js';
+import '../../styled/ColorSwatch/StyledCell.js';
+import { reducer, getInitialState, convertStringToColor, areColorsEqual } from './reducer.js';
+
+const Colorpicker = forwardRef((_ref, ref) => {
+  let {
+    color,
+    defaultColor,
+    isOpaque,
+    labels = {},
+    autofocus,
+    onChange,
+    ...props
+  } = _ref;
+  const [state, dispatch] = useReducer(reducer, getInitialState(color || defaultColor));
+  const previousComputedColorRef = useRef(state.color);
+  const previousStateColorRef = useRef(state.color);
+  const computedColor = useMemo(() => {
+    let retVal = state.color;
+    if (color) {
+      if (typeof color === 'string') {
+        const convertedColor = convertStringToColor(color);
+        if (convertedColor) {
+          retVal = convertedColor;
+        }
+      } else {
+        retVal = color;
+      }
+    }
+    if (isOpaque) {
+      retVal.alpha = 100;
+    }
+    if (areColorsEqual(retVal, previousComputedColorRef.current)) {
+      return previousComputedColorRef.current;
+    }
+    return retVal;
+  }, [color, isOpaque, state.color]);
+  useEffect(() => {
+    if (!areColorsEqual(previousStateColorRef.current, state.color) && !areColorsEqual(color, state.color)) {
+      onChange && onChange(state.color);
+    }
+    previousStateColorRef.current = state.color;
+  }, [color, onChange, state.color]);
+  if (previousComputedColorRef.current !== computedColor) {
+    dispatch({
+      type: 'RESET_COLOR',
+      payload: computedColor
+    });
+    previousComputedColorRef.current = computedColor;
+  }
+  const handleColorWellChange = useCallback(hsv => {
+    dispatch({
+      type: 'SATURATION_CHANGE',
+      payload: hsv
+    });
+  }, []);
+  const handleHueChange = useCallback(e => {
+    dispatch({
+      type: 'HUE_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleAlphaSliderChange = useCallback(e => {
+    dispatch({
+      type: 'ALPHA_SLIDER_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleHexChange = useCallback(e => {
+    dispatch({
+      type: 'HEX_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleRedChange = useCallback(e => {
+    dispatch({
+      type: 'RED_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleGreenChange = useCallback(e => {
+    dispatch({
+      type: 'GREEN_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleBlueChange = useCallback(e => {
+    dispatch({
+      type: 'BLUE_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleAlphaChange = useCallback(e => {
+    dispatch({
+      type: 'ALPHA_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleBlur = useCallback(() => {
+    dispatch({
+      type: 'RESET_COLOR',
+      payload: computedColor
+    });
+  }, [computedColor]);
+  return React__default.createElement(StyledColorPicker, Object.assign({
+    ref: ref,
+    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
+  }), React__default.createElement(StyledSliders, {
+    isOpaque: isOpaque
+  }, React__default.createElement(Field, null, React__default.createElement(Label, {
+    hidden: true
+  }, labels.hueSlider || 'Hue slider'), React__default.createElement(StyledHueRange, {
+    step: 1,
+    max: 360,
+    value: computedColor.hue,
+    isOpaque: isOpaque,
+    onChange: handleHueChange
+  })), !isOpaque && React__default.createElement(Field, null, React__default.createElement(Label, {
+    hidden: true
+  }, labels.alphaSlider || 'Alpha slider'), React__default.createElement(StyledAlphaRange, {
+    max: 1,
+    step: 0.01,
+    value: computedColor.alpha / 100,
+    onChange: handleAlphaSliderChange,
+    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, {
+    isCompact: true,
+    maxLength: 7,
+    value: state.hexInput
+    ,
+    autoFocus: autofocus,
+    spellCheck: false,
+    onBlur: handleBlur,
+    onChange: handleHexChange
+  })), React__default.createElement(StyledRGBAField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.red || 'R'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    type: "number",
+    min: "0",
+    max: "255",
+    maxLength: 3,
+    value: state.redInput,
+    onBlur: handleBlur,
+    onChange: handleRedChange
+  })), React__default.createElement(StyledRGBAField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.green || 'G'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    type: "number",
+    min: "0",
+    max: "255",
+    maxLength: 3,
+    value: state.greenInput,
+    onBlur: handleBlur,
+    onChange: handleGreenChange
+  })), React__default.createElement(StyledRGBAField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.blue || 'B'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    type: "number",
+    min: "0",
+    max: "255",
+    maxLength: 3,
+    value: state.blueInput,
+    onBlur: handleBlur,
+    onChange: handleBlueChange
+  })), !isOpaque && React__default.createElement(StyledRGBAField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.alpha || 'A'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    type: "number",
+    min: "0",
+    max: "100",
+    value: state.alphaInput,
+    onBlur: handleBlur,
+    onChange: handleAlphaChange
+  }))));
+});
+Colorpicker.defaultProps = {
+  defaultColor: '#fff'
+};
+Colorpicker.displayName = 'Colorpicker';
+Colorpicker.propTypes = {
+  color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  isOpaque: PropTypes.bool,
+  onChange: PropTypes.func,
+  labels: PropTypes.object,
+  defaultColor: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+};
+
+export { Colorpicker };