@zendeskgarden/react-colorpickers 8.75.1 → 8.76.0

package/dist/index.esm.js

@@ -1,1583 +0,0 @@
-/**
- * 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';
-import React__default, { Children, useContext, useRef, useState, useEffect, useMemo, useCallback, forwardRef, useReducer, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import { Range, Field, Label, Input } from '@zendeskgarden/react-forms';
-import throttle from 'lodash.throttle';
-import styled, { ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, useText } from '@zendeskgarden/react-theming';
-import { stripUnit, math, rgba, hsl, parseToRgb, readableColor, parseToHsl, rgb } from 'polished';
-import { Button } from '@zendeskgarden/react-buttons';
-import { TooltipModal, PLACEMENT } from '@zendeskgarden/react-modals';
-import isEqual from 'lodash.isequal';
-import { composeEventHandlers, useId } from '@zendeskgarden/container-utilities';
-import { Tooltip } from '@zendeskgarden/react-tooltips';
-import { useGrid } from '@zendeskgarden/container-grid';
-
-function _extends$2() {
-  _extends$2 = 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$2.apply(this, arguments);
-}
-
-function hslToHsv(h, s, l) {
-  let saturation = s;
-  saturation *= (l < 50 ? l : 100 - l) / 100;
-  const v = l + saturation;
-  return {
-    h,
-    s: v === 0 ? 0 : 2 * saturation / v * 100,
-    v
-  };
-}
-function hsvToHsl(h, s, v) {
-  let saturation = s;
-  let value = v;
-  saturation /= 100;
-  value /= 100;
-  let l = (2 - saturation) * value;
-  let sl = saturation * value;
-  sl /= l <= 1 ? l : 2 - l;
-  sl = sl || 0;
-  l /= 2;
-  return {
-    h,
-    s: sl * 100,
-    l: l * 100
-  };
-}
-
-const getSaturationLightness = (element, x, y, rtl) => {
-  const {
-    width,
-    height
-  } = element.getBoundingClientRect();
-  let left = x - (element.getBoundingClientRect().left + window.pageXOffset);
-  let top = y - (element.getBoundingClientRect().top + window.pageYOffset);
-  if (left < 0) {
-    left = 0;
-  } else if (left > width) {
-    left = width;
-  }
-  if (top < 0) {
-    top = 0;
-  } else if (top > height) {
-    top = height;
-  }
-  if (rtl) {
-    left = width - left;
-  }
-  const saturation = left / width;
-  const bright = 1 - top / height;
-  return {
-    saturation,
-    bright
-  };
-};
-function getNextHsv(e, hue, container, rtl) {
-  const {
-    saturation,
-    bright
-  } = getSaturationLightness(container, e.pageX, e.pageY, rtl);
-  return {
-    h: hue,
-    s: saturation,
-    v: bright
-  };
-}
-const getThumbPosition = (x, y, rtl, container) => {
-  if (container.current) {
-    const {
-      saturation,
-      bright
-    } = getSaturationLightness(container.current, x, y, rtl);
-    const topFromMouse = (1 - bright) * 100;
-    const leftFromMouse = rtl ? 100 - saturation * 100 : saturation * 100;
-    return {
-      topFromMouse,
-      leftFromMouse
-    };
-  }
-  return {
-    topFromMouse: 0,
-    leftFromMouse: 0
-  };
-};
-
-const COMPONENT_ID$l = 'colorpickers.colorpicker';
-const getColorV8PickerWidth = props => {
-  return props.isOpaque ? 268 : 312;
-};
-const StyledColorPicker = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledColorPicker",
-  componentId: "sc-1donyl9-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorV8PickerWidth, getColorV8PickerWidth, props => retrieveComponentStyles(COMPONENT_ID$l, props));
-StyledColorPicker.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$k = 'colorpickers.colorpicker_range';
-const thumbStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return `
-    &${modifier}::-moz-range-thumb {
-      ${styles}
-    }
-
-    &${modifier}::-ms-thumb {
-      ${styles}
-    }
-
-    &${modifier}::-webkit-slider-thumb {
-      ${styles}
-    }
-  `;
-};
-const trackStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return `
-    &${modifier}::-moz-range-track {
-      ${styles}
-    }
-
-    &${modifier}::-ms-track {
-      ${styles}
-    }
-
-    &${modifier}::-webkit-slider-runnable-track {
-      ${styles}
-    }
-  `;
-};
-const trackLowerStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return `
-    &${modifier}::-moz-range-progress {
-      ${styles}
-    }
-
-    &${modifier}::-ms-fill-lower {
-      ${styles}
-    }
-  `;
-};
-const colorStyles$1 = props => {
-  const thumbBackgroundColor = getColorV8('neutralHue', 100, props.theme);
-  const thumbBorderColor = thumbBackgroundColor;
-  const thumbActiveBackgroundColor = getColorV8('neutralHue', 200, props.theme);
-  const thumbActiveBorderColor = getColorV8('primaryHue', 600, props.theme);
-  const thumbFocusBorderColor = getColorV8('primaryHue', 400, props.theme);
-  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
-  const thumbHoverBorderColor = thumbHoverBackgroundColor;
-  return `
-    border-color: ${props.isOpaque && getColorV8('background', 600 , props.theme)};
-
-    ${trackStyles(`
-      background-color: transparent;
-    `)}
-
-    ${thumbStyles(`
-      border-color: ${thumbBorderColor};
-      background-color: ${thumbBackgroundColor};
-    `)}
-
-    ${trackLowerStyles(`
-      background-color: transparent;
-    `)}
-
-    ${thumbStyles(`
-        border-color: ${thumbHoverBorderColor};
-        background-color: ${thumbHoverBackgroundColor};
-      `, ':hover')}
-
-    ${thumbStyles(`
-        background-color: ${thumbBackgroundColor};
-        border-color: ${thumbFocusBorderColor};
-      `, '[data-garden-focus-visible="true"]')}
-
-    ${thumbStyles(`
-        border-color: ${thumbActiveBorderColor};
-        background-color: ${thumbActiveBackgroundColor}
-      `, ':active')}
-  `;
-};
-const getThumbSize = props => props.theme.space.base * (props.isOpaque ? 6 : 4);
-const getTrackHeight = props => props.theme.space.base * (props.isOpaque ? 6 : 3);
-const getTrackMargin = props => (getThumbSize(props) - getTrackHeight(props)) / 2 + stripUnit(props.theme.shadowWidths.md);
-const sizeStyles$2 = props => {
-  const thumbSize = getThumbSize(props);
-  const trackHeight = getTrackHeight(props);
-  const trackMargin = getTrackMargin(props);
-  const thumbMargin = (trackHeight - thumbSize) / 2;
-  const trackOffset = props.theme.space.base * (props.isOpaque ? -2 : -1);
-  const height = props.isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
-  let marginHorizontal;
-  let border;
-  let borderRadius;
-  if (props.isOpaque) {
-    marginHorizontal = `-${trackMargin}px`;
-    border = `${trackMargin}px ${props.theme.borderStyles.solid}`;
-    borderRadius = `${trackMargin + stripUnit(props.theme.shadowWidths.md)}px`;
-  }
-  return `
-    /* stylelint-disable-next-line declaration-no-important */
-    margin-top: 0 !important;
-    margin-${props.theme.rtl ? 'right' : 'left'}: ${marginHorizontal};
-    height: ${height}px; /* [1] */
-    box-sizing: content-box; /* [2] */
-    border: ${border};
-    border-radius: ${borderRadius};
-
-    ${trackStyles(`
-      margin: ${trackMargin}px ${trackOffset}px;
-      height: ${trackHeight}px;
-    `)}
-
-    ${thumbStyles(`
-      margin: ${thumbMargin}px 0;
-      border-width: ${math(`${props.theme.borderWidths.sm} * 2`)};
-      height: ${thumbSize}px;
-      width: ${thumbSize}px;
-    `)};
-  `;
-};
-const StyledRange = styled(Range).attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.75.1',
-  hasLowerTrack: false
-}).withConfig({
-  displayName: "StyledRange",
-  componentId: "sc-ug3wi9-0"
-})(["", ";", " ", ";", ";"], sizeStyles$2, trackStyles(`
-    border-radius: 0;
-  `), colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$k, props));
-StyledRange.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
-const StyledHueRange = styled(StyledRange).attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledHueRange",
-  componentId: "sc-13ly7p-0"
-})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
-StyledHueRange.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const checkeredBackground = function (theme, size) {
-  let positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
-  const color = getColorV8('neutralHue', 400, theme);
-  const dimensions = `${size}px ${size}px`;
-  const positionX1 = theme.rtl ? '100%' : '0';
-  const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
-  const position1 = `${positionX1} ${positionY}px`;
-  const position2 = `${positionX2} ${size / 2 + positionY}px`;
-  const position3 = `${positionX2} ${positionY}px`;
-  const position4 = `${positionX1} ${size / -2 + positionY}px`;
-  return `
-    linear-gradient(45deg, ${color} 25%, transparent 25%) ${position1} / ${dimensions} ${repeat},
-    linear-gradient(45deg, transparent 75%, ${color} 75%) ${position2} / ${dimensions} ${repeat},
-    linear-gradient(135deg, ${color} 25%, transparent 25%) ${position3} / ${dimensions} ${repeat},
-    linear-gradient(135deg, transparent 75%, ${color} 75%) ${position4} / ${dimensions} ${repeat}
-  `;
-};
-
-const COMPONENT_ID$i = 'colorpickers.colorpicker_alpha';
-const background$3 = 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$3(props)
-  },
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.75.1'
-})).withConfig({
-  displayName: "StyledAlphaRange",
-  componentId: "sc-kuh2xc-0"
-})([""]);
-StyledAlphaRange.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$h = 'colorpickers.colorpicker_preview_box';
-const background$2 = props => {
-  const alpha = props.alpha ? props.alpha / 100 : 0;
-  const color = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
-  let retVal = `linear-gradient(${color}, ${color})`;
-  if (!props.isOpaque) {
-    retVal = `${retVal}, ${checkeredBackground(props.theme, 13)}`;
-  }
-  return retVal;
-};
-const StyledPreview = styled.div.attrs(props => ({
-  style: {
-    background: background$2(props)
-  },
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.75.1',
-  'data-test-id': 'preview-box'
-})).withConfig({
-  displayName: "StyledPreview",
-  componentId: "sc-d70mj1-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$h, props));
-StyledPreview.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell';
-const background$1 = 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$g,
-  'data-garden-version': '8.75.1',
-  'data-test-id': 'colorwell',
-  style: {
-    background: background$1(props)
-  }
-})).withConfig({
-  displayName: "StyledColorWell",
-  componentId: "sc-54ly7s-0"
-})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$g, props));
-StyledColorWell.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
-const sizeStyles$1 = theme => {
-  const borderWidth = stripUnit(theme.borderWidths.sm) * 2;
-  const size = theme.space.base * 5;
-  const translateValue = size / -2;
-  return `
-    transform: translate(${translateValue}px, ${translateValue}px);
-    box-sizing: border-box;
-    border-width: ${borderWidth}px;
-    width: ${size}px;
-    height: ${size}px;
-  `;
-};
-const StyledColorWellThumb = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.75.1',
-  'data-test-id': 'colorwell-thumb',
-  style: {
-    top: `${props.top}%`,
-    left: `${props.left}%`
-  }
-})).withConfig({
-  displayName: "StyledColorWellThumb",
-  componentId: "sc-1pnz3jz-0"
-})(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, getColorV8('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledColorWellThumb.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
-const StyledSliderGroup = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledSliderGroup",
-  componentId: "sc-rsq0ak-0"
-})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledSliderGroup.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
-const StyledHexField = styled(Field).attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.75.1',
-  spellcheck: false
-}).withConfig({
-  displayName: "StyledHexField",
-  componentId: "sc-1lk14t4-0"
-})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$d, props));
-StyledHexField.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
-const StyledLabel = styled(Label).attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledLabel",
-  componentId: "sc-1klhp6m-0"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
-const StyledInput = styled(Input).attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.75.1',
-  focusInset: false
-}).withConfig({
-  displayName: "StyledInput",
-  componentId: "sc-1iap93p-0"
-})(["text-align:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
-const StyledInputGroup = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledInputGroup",
-  componentId: "sc-mmy93w-0"
-})(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledInputGroup.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$9 = 'colorpickers.colorpicker_rgb_field';
-const sizeStyles = theme => {
-  const margin = `${theme.space.base * 1.5}px`;
-  const width = `${theme.space.base * 12.75}px`;
-  return `
-    margin-${theme.rtl ? 'right' : 'left'}: ${margin};
-    width: ${width};
-    min-width: ${width};
-  `;
-};
-const StyledRGBAField = styled(Field).attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledRGBAField",
-  componentId: "sc-ibo1yw-0"
-})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledRGBAField.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
-const StyledSliders = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledSliders",
-  componentId: "sc-aclca2-0"
-})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledSliders.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
-const StyledButton = styled(Button).attrs({
-  isNeutral: true,
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledButton",
-  componentId: "sc-101xjve-0"
-})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$6 = 'colorpickers.colordialog_preview';
-const background = props => {
-  const {
-    backgroundColor
-  } = props;
-  let color;
-  if (typeof backgroundColor === 'string') {
-    color = backgroundColor;
-  } else if (backgroundColor === undefined) {
-    color = props.theme.palette.white;
-  } else {
-    const {
-      red,
-      green,
-      blue,
-      alpha = 1
-    } = backgroundColor;
-    color = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
-  }
-  return `linear-gradient(${color}, ${color})`;
-};
-const StyledButtonPreview = styled.span.attrs(props => ({
-  style: {
-    background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
-  },
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.75.1',
-  'data-test-id': 'dialog-preview'
-})).withConfig({
-  displayName: "StyledButtonPreview",
-  componentId: "sc-1jzysg3-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$6, props));
-StyledButtonPreview.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
-const StyledTooltipModal = styled(TooltipModal).attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledTooltipModal",
-  componentId: "sc-o022s8-0"
-})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledTooltipModal.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
-const StyledTooltipBody = styled(TooltipModal.Body).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.75.1'
-}).withConfig({
-  displayName: "StyledTooltipBody",
-  componentId: "sc-6gsgsy-0"
-})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledTooltipBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'colorpickers.swatch_button';
-const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
-  as: 'button',
-  'data-garden-id': COMPONENT_ID$3,
-  'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.75.1'
-})).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$3, props));
-StyledSwatchButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'colorpickers.color_swatch';
-const StyledColorSwatch = styled.table.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.75.1',
-  role: 'grid'
-}).withConfig({
-  displayName: "StyledColorSwatch",
-  componentId: "sc-ajx440-0"
-})(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledColorSwatch.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = '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$1,
-  'data-garden-version': '8.75.1'
-}).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$1, props));
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'colorpickers.swatch_cell';
-const StyledCell = styled.td.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.75.1'
-}).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
-};
-
-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';
-
-const isValidHex = hexString => {
-  const regEx = /^#(?:(?:[0-9A-F]{6}(?:[0-9A-F]{2})?)|(?:[0-9A-F]{3})(?:[0-9A-F]?))$/iu;
-  return regEx.test(hexString);
-};
-
-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.');
-  }
-};
-
-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, _extends$2({
-    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])
-};
-
-var _path$1;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__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"
-  })));
-};
-
-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, _extends$2({
-    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, _extends$2({
-    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';
-
-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"
-  })));
-};
-
-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, _extends$2({
-      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
-};
-
-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, _extends$2({
-    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, _extends$2({
-    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 { ColorSwatch, ColorSwatchDialog, Colorpicker, ColorpickerDialog };