@eightshift/ui-components 6.3.0 → 7.1.0

package/dist/components/color-pickers/solid-color-picker.js

@@ -1,1710 +1,3 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import $dbSRa$react__default, { useState, useMemo, useRef, useCallback, forwardRef, useContext, createContext } from "react";
-import { b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-Cr3pLd9c.js";
-import { d as $4e85f108e88277b8$export$ebe63fadcdce34ed, e as $4e85f108e88277b8$export$44644b8a16031b5b, f as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-CJ-HBf0L.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-B2glEZ25.js";
-import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, g as $03deb23ff14920c4$export$4eaf04e54aa8eed6, A as $7215afc6de606d6b$export$de79e2c695e052f3, B as $46d819fcbaf35654$export$8f71654801c2f7cd, o as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, d as $c87311424ea30a05$export$fedb369cb70207f1, s as $c87311424ea30a05$export$a11b0059900ceec8, y as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-DkmPQdGE.js";
-import { a as $799cddbef784668f$export$4cde5df63f53f473, b as $799cddbef784668f$export$6e865ea70d7724f, c as $3493a52097159720$exports, C as ColorSwatch } from "../../color-swatch-bUFkK7ox.js";
-import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-7sOvrqo0.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-D8O3gOdV.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-BoxsKyJ9.js";
-import { d as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, e as $e8a7022cf87cba2a$export$36da96379f79f245, f as $bcca50147b47f54d$export$56b2c08e277f365, g as $47b897dc8cdb026b$export$8d15029008292ae, h as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-bR3fAmim.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-iUFQCK8m.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-CEDs0LsA.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-DZnWrkn8.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-BPG0hKfB.js";
-import { b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BG9DaxYN.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-_aSf9-8u.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-CjFEHSfr.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CsygZKz9.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-BrbMhS2N.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { TriggeredPopover } from "../popover/popover.js";
-import { icons } from "../../icons/icons.js";
-const $6e14a98a7f67141d$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7724f("#ffffff");
-function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
-  let { value, defaultValue, colorSpace, xChannel, yChannel, onChange, onChangeEnd } = props;
-  if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
-  if (value) value = $799cddbef784668f$export$4cde5df63f53f473(value);
-  if (defaultValue) defaultValue = $799cddbef784668f$export$4cde5df63f53f473(defaultValue);
-  let [colorValue, setColorState] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange);
-  let [initialValue] = useState(colorValue);
-  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
-    colorValue,
-    colorSpace
-  ]);
-  let valueRef = useRef(color);
-  let setColor = (color2) => {
-    valueRef.current = color2;
-    setColorState(color2);
-  };
-  let channels = useMemo(() => color.getColorSpaceAxes({
-    xChannel,
-    yChannel
-  }), [
-    color,
-    xChannel,
-    yChannel
-  ]);
-  let xChannelRange = color.getChannelRange(channels.xChannel);
-  let yChannelRange = color.getChannelRange(channels.yChannel);
-  let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
-  let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
-  let [isDragging, setDragging] = useState(false);
-  let isDraggingRef = useRef(false);
-  let xValue = color.getChannelValue(channels.xChannel);
-  let yValue = color.getChannelValue(channels.yChannel);
-  let setXValue = (v) => {
-    if (v === xValue) return;
-    let newColor = color.withChannelValue(channels.xChannel, v);
-    setColor(newColor);
-  };
-  let setYValue = (v) => {
-    if (v === yValue) return;
-    let newColor = color.withChannelValue(channels.yChannel, v);
-    setColor(newColor);
-  };
-  return {
-    channels,
-    xChannelStep: stepX,
-    yChannelStep: stepY,
-    xChannelPageStep: pageSizeX,
-    yChannelPageStep: pageSizeY,
-    value: color,
-    defaultValue: value !== void 0 ? initialValue : defaultValue,
-    setValue(value2) {
-      setColor($799cddbef784668f$export$4cde5df63f53f473(value2));
-    },
-    xValue,
-    setXValue,
-    yValue,
-    setYValue,
-    setColorFromPoint(x, y) {
-      let newXValue = minValueX + $9446cca9a3875146$export$7d15b64cf5a3a4c4(x, 0, 1) * (maxValueX - minValueX);
-      let newYValue = minValueY + (1 - $9446cca9a3875146$export$7d15b64cf5a3a4c4(y, 0, 1)) * (maxValueY - minValueY);
-      let newColor;
-      if (newXValue !== xValue) {
-        newXValue = $9446cca9a3875146$export$cb6e0bb50bc19463(newXValue, minValueX, maxValueX, stepX);
-        newColor = color.withChannelValue(channels.xChannel, newXValue);
-      }
-      if (newYValue !== yValue) {
-        newYValue = $9446cca9a3875146$export$cb6e0bb50bc19463(newYValue, minValueY, maxValueY, stepY);
-        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
-      }
-      if (newColor) setColor(newColor);
-    },
-    getThumbPosition() {
-      let x = (xValue - minValueX) / (maxValueX - minValueX);
-      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
-      return {
-        x,
-        y
-      };
-    },
-    incrementX(stepSize = 1) {
-      setXValue(xValue + stepSize > maxValueX ? maxValueX : $9446cca9a3875146$export$cb6e0bb50bc19463(xValue + stepSize, minValueX, maxValueX, stepX));
-    },
-    incrementY(stepSize = 1) {
-      setYValue(yValue + stepSize > maxValueY ? maxValueY : $9446cca9a3875146$export$cb6e0bb50bc19463(yValue + stepSize, minValueY, maxValueY, stepY));
-    },
-    decrementX(stepSize = 1) {
-      setXValue($9446cca9a3875146$export$cb6e0bb50bc19463(xValue - stepSize, minValueX, maxValueX, stepX));
-    },
-    decrementY(stepSize = 1) {
-      setYValue($9446cca9a3875146$export$cb6e0bb50bc19463(yValue - stepSize, minValueY, maxValueY, stepY));
-    },
-    setDragging(isDragging2) {
-      let wasDragging = isDraggingRef.current;
-      isDraggingRef.current = isDragging2;
-      if (onChangeEnd && !isDragging2 && wasDragging) onChangeEnd(valueRef.current);
-      setDragging(isDragging2);
-    },
-    isDragging,
-    getDisplayColor() {
-      return color.withChannelValue("alpha", 1);
-    }
-  };
-}
-function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
-  let { channel, colorSpace, value, defaultValue, onChange, locale, ...otherProps } = props;
-  if (value == null && defaultValue == null) throw new Error("useColorSliderState requires a value or defaultValue");
-  if (value) value = $799cddbef784668f$export$4cde5df63f53f473(value);
-  if (defaultValue) defaultValue = $799cddbef784668f$export$4cde5df63f53f473(defaultValue);
-  let [colorValue, setColor] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange);
-  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
-    colorValue,
-    colorSpace
-  ]);
-  let [initialValue] = useState(colorValue);
-  let defaultColorValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue;
-  let defaultColor = useMemo(() => colorSpace && defaultColorValue ? defaultColorValue.toFormat(colorSpace) : defaultColorValue, [
-    defaultColorValue,
-    colorSpace
-  ]);
-  let sliderState = $28f99e3e86e6ec45$export$e5fda3247f5d67f9({
-    ...color.getChannelRange(channel),
-    ...otherProps,
-    // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
-    // @ts-ignore
-    numberFormatter: null,
-    value: color.getChannelValue(channel),
-    defaultValue: defaultColor.getChannelValue(channel),
-    onChange(v) {
-      setColor(color.withChannelValue(channel, v));
-    },
-    onChangeEnd(v) {
-      if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
-    }
-  });
-  let { step, pageSize } = color.getChannelRange(channel);
-  return {
-    ...sliderState,
-    value: color,
-    setValue(value2) {
-      setColor($799cddbef784668f$export$4cde5df63f53f473(value2));
-    },
-    getDisplayColor() {
-      switch (channel) {
-        case "hue":
-          return $799cddbef784668f$export$6e865ea70d7724f(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
-        case "lightness":
-        case "brightness":
-        case "saturation":
-        case "red":
-        case "green":
-        case "blue":
-          return color.withChannelValue("alpha", 1);
-        case "alpha":
-          return color;
-        default:
-          throw new Error("Unknown color channel: " + channel);
-      }
-    },
-    getThumbValueLabel() {
-      return color.formatChannelValue(channel, locale);
-    },
-    step,
-    pageSize,
-    isDragging: sliderState.isThumbDragging(0)
-  };
-}
-function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
-  return useMemo(() => {
-    if (typeof value === "string") try {
-      return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
-    } catch {
-      return void 0;
-    }
-    return value;
-  }, [
-    value
-  ]);
-}
-const $b335ada08155d9c0$var$MIN_COLOR = $799cddbef784668f$export$6e865ea70d7724f("#000000");
-const $b335ada08155d9c0$var$MAX_COLOR = $799cddbef784668f$export$6e865ea70d7724f("#FFFFFF");
-const $b335ada08155d9c0$var$MIN_COLOR_INT = $b335ada08155d9c0$var$MIN_COLOR.toHexInt();
-const $b335ada08155d9c0$var$MAX_COLOR_INT = $b335ada08155d9c0$var$MAX_COLOR.toHexInt();
-function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
-  let { value, defaultValue, onChange } = props;
-  let { step } = $b335ada08155d9c0$var$MIN_COLOR.getChannelRange("red");
-  let initialDefaultValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(defaultValue);
-  let [colorValue, setColorValue] = $458b0a5536c1a7cf$export$40bfa8c7b0832715($aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value), initialDefaultValue, onChange);
-  let [initialValue] = useState(colorValue);
-  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString("hex") : "");
-  let validation = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
-    ...props,
-    value: colorValue
-  });
-  let safelySetColorValue = (newColor) => {
-    if (!colorValue || !newColor) {
-      setColorValue(newColor);
-      return;
-    }
-    if (newColor.toHexInt() !== colorValue.toHexInt()) {
-      setColorValue(newColor);
-      return;
-    }
-  };
-  let [prevValue, setPrevValue] = useState(colorValue);
-  if (prevValue !== colorValue) {
-    setInputValue(colorValue ? colorValue.toString("hex") : "");
-    setPrevValue(colorValue);
-  }
-  let parsedValue = useMemo(() => {
-    let color;
-    try {
-      color = (0, $799cddbef784668f$export$6e865ea70d7724f)(inputValue.startsWith("#") ? inputValue : `#${inputValue}`);
-    } catch {
-      color = null;
-    }
-    return color;
-  }, [
-    inputValue
-  ]);
-  let commit = () => {
-    if (!inputValue.length) {
-      safelySetColorValue(null);
-      if (value === void 0 || colorValue === null) setInputValue("");
-      else setInputValue(colorValue.toString("hex"));
-      return;
-    }
-    if (parsedValue == null) {
-      setInputValue(colorValue ? colorValue.toString("hex") : "");
-      return;
-    }
-    safelySetColorValue(parsedValue);
-    let newColorValue = "";
-    if (colorValue) newColorValue = colorValue.toString("hex");
-    setInputValue(newColorValue);
-    validation.commitValidation();
-  };
-  let increment = () => {
-    let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, step);
-    if (newValue === colorValue) setInputValue(newValue.toString("hex"));
-    safelySetColorValue(newValue);
-    validation.commitValidation();
-  };
-  let decrement = () => {
-    let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, -step);
-    if (newValue === colorValue) setInputValue(newValue.toString("hex"));
-    safelySetColorValue(newValue);
-    validation.commitValidation();
-  };
-  let incrementToMax = () => safelySetColorValue($b335ada08155d9c0$var$MAX_COLOR);
-  let decrementToMin = () => safelySetColorValue($b335ada08155d9c0$var$MIN_COLOR);
-  let validate = (value2) => {
-    var _value_match;
-    return value2 === "" || !!((_value_match = value2.match(/^#?[0-9a-f]{0,6}$/i)) === null || _value_match === void 0 ? void 0 : _value_match[0]);
-  };
-  return {
-    ...validation,
-    validate,
-    colorValue,
-    defaultColorValue: initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialValue,
-    setColorValue,
-    inputValue,
-    setInputValue,
-    commit,
-    increment,
-    incrementToMax,
-    decrement,
-    decrementToMin
-  };
-}
-function $b335ada08155d9c0$var$addColorValue(color, step) {
-  let newColor = color ? color : $b335ada08155d9c0$var$MIN_COLOR;
-  let colorInt = newColor.toHexInt();
-  let clampInt = Math.min(Math.max(colorInt + step, $b335ada08155d9c0$var$MIN_COLOR_INT), $b335ada08155d9c0$var$MAX_COLOR_INT);
-  if (clampInt !== colorInt) {
-    let newColorString = `#${clampInt.toString(16).padStart(6, "0").toUpperCase()}`;
-    newColor = $799cddbef784668f$export$6e865ea70d7724f(newColorString);
-  }
-  return newColor;
-}
-function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
-  let { channel, colorSpace, locale } = props;
-  let initialValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(props.value);
-  let initialDefaultValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(props.defaultValue);
-  let [colorValue, setColor] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
-  let color = $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace);
-  let [initialColorValue] = useState(colorValue);
-  let defaultColorValue = initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialColorValue;
-  let defaultColor = $31a863bb88e75dd6$var$useConvertColor(defaultColorValue, colorSpace);
-  let value = color.getChannelValue(channel);
-  let range = color.getChannelRange(channel);
-  let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [
-    color,
-    channel
-  ]);
-  let multiplier = formatOptions.style === "percent" && range.maxValue === 100 ? 100 : 1;
-  let numberFieldState = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
-    locale,
-    value: colorValue === null ? NaN : value / multiplier,
-    defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
-    onChange: (v) => {
-      if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
-      else setColor(null);
-    },
-    minValue: range.minValue / multiplier,
-    maxValue: range.maxValue / multiplier,
-    step: range.step / multiplier,
-    formatOptions
-  });
-  return {
-    ...numberFieldState,
-    colorValue: color,
-    defaultColorValue,
-    setColorValue: setColor
-  };
-}
-function $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace) {
-  let black = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2("#000");
-  return useMemo(() => {
-    let nonNullColorValue = colorValue || black;
-    return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
-  }, [
-    black,
-    colorValue,
-    colorSpace
-  ]);
-}
-const $40297c24c53588e6$var$hue = (color) => [
-  0,
-  60,
-  120,
-  180,
-  240,
-  300,
-  360
-].map((hue) => color.withChannelValue("hue", hue).toString("css")).join(", ");
-const $40297c24c53588e6$var$saturation = (color) => `${color.withChannelValue("saturation", 0)}, transparent`;
-const $40297c24c53588e6$var$hslChannels = {
-  hue: $40297c24c53588e6$var$hue,
-  saturation: $40297c24c53588e6$var$saturation,
-  lightness: () => "black, transparent, white"
-};
-const $40297c24c53588e6$var$hsbChannels = {
-  hue: $40297c24c53588e6$var$hue,
-  saturation: $40297c24c53588e6$var$saturation,
-  brightness: () => "black, transparent"
-};
-function $40297c24c53588e6$export$dd62420467d245ca({ direction, state, zChannel, xChannel, yChannel }) {
-  let returnVal = useMemo(() => {
-    let end = direction === "rtl" ? "left" : "right";
-    let colorAreaStyles = {};
-    let zValue = state.value.getChannelValue(zChannel);
-    switch (state.value.getColorSpace()) {
-      case "rgb": {
-        let rgb = $799cddbef784668f$export$6e865ea70d7724f("rgb(0, 0, 0)");
-        colorAreaStyles = {
-          background: [
-            // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
-            // Create a layer for each channel, with the other channels as 0. After blending, this should
-            // result in the gradients being combined channel by channel.
-            `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
-            `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
-            rgb.withChannelValue(zChannel, zValue)
-          ].join(","),
-          backgroundBlendMode: "screen"
-        };
-        break;
-      }
-      case "hsl": {
-        let channels = state.value.getColorChannels();
-        let value = $799cddbef784668f$export$6e865ea70d7724f("hsl(0, 100%, 50%)").withChannelValue(zChannel, zValue);
-        let bg = channels.filter((c) => c !== zChannel).map((c) => `linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hslChannels[c](value)})`).reverse();
-        if (zChannel === "hue") bg.push(value.toString("css"));
-        colorAreaStyles = {
-          background: bg.join(", ")
-        };
-        break;
-      }
-      case "hsb": {
-        let channels = state.value.getColorChannels();
-        let value = $799cddbef784668f$export$6e865ea70d7724f("hsb(0, 100%, 100%)").withChannelValue(zChannel, zValue);
-        let bg = channels.filter((c) => c !== zChannel).map((c) => `linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hsbChannels[c](value)})`).reverse();
-        if (zChannel === "hue") bg.push(value.toString("css"));
-        colorAreaStyles = {
-          background: bg.join(", ")
-        };
-        break;
-      }
-    }
-    let { x, y } = state.getThumbPosition();
-    if (direction === "rtl") x = 1 - x;
-    let forcedColorAdjustNoneStyle = {
-      forcedColorAdjust: "none"
-    };
-    return {
-      colorAreaStyleProps: {
-        style: {
-          position: "relative",
-          touchAction: "none",
-          ...forcedColorAdjustNoneStyle,
-          ...colorAreaStyles
-        }
-      },
-      thumbStyleProps: {
-        style: {
-          position: "absolute",
-          left: `${x * 100}%`,
-          top: `${y * 100}%`,
-          transform: "translate(-50%, -50%)",
-          touchAction: "none",
-          ...forcedColorAdjustNoneStyle
-        }
-      }
-    };
-  }, [
-    direction,
-    state,
-    zChannel,
-    xChannel,
-    yChannel
-  ]);
-  return returnVal;
-}
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
-  let { isDisabled, inputXRef, inputYRef, containerRef, "aria-label": ariaLabel, xName, yName, form } = props;
-  let stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1($parcel$interopDefault($3493a52097159720$exports), "@react-aria/color");
-  let { addGlobalListener, removeGlobalListener } = $03deb23ff14920c4$export$4eaf04e54aa8eed6();
-  let { direction, locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  let [focusedInput, setFocusedInput] = useState(null);
-  let focusInput = useCallback((inputRef = inputXRef) => {
-    if (inputRef.current) $7215afc6de606d6b$export$de79e2c695e052f3(inputRef.current);
-  }, [
-    inputXRef
-  ]);
-  $99facab73266f662$export$5add1d006293d136(inputXRef, state.defaultValue, state.setValue);
-  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
-  let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);
-  let { xChannel, yChannel, zChannel } = state.channels;
-  let xChannelStep = state.xChannelStep;
-  let yChannelStep = state.yChannelStep;
-  let currentPosition = useRef(null);
-  let { keyboardProps } = $46d819fcbaf35654$export$8f71654801c2f7cd({
-    onKeyDown(e) {
-      if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
-        e.continuePropagation();
-        return;
-      }
-      e.preventDefault();
-      state.setDragging(true);
-      setValueChangedViaKeyboard(true);
-      let dir;
-      switch (e.key) {
-        case "PageUp":
-          state.incrementY(state.yChannelPageStep);
-          dir = "y";
-          break;
-        case "PageDown":
-          state.decrementY(state.yChannelPageStep);
-          dir = "y";
-          break;
-        case "Home":
-          direction === "rtl" ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
-          dir = "x";
-          break;
-        case "End":
-          direction === "rtl" ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
-          dir = "x";
-          break;
-      }
-      state.setDragging(false);
-      if (dir) {
-        let input = dir === "x" ? inputXRef : inputYRef;
-        focusInput(input);
-        setFocusedInput(dir);
-      }
-    }
-  });
-  let moveHandler = {
-    onMoveStart() {
-      currentPosition.current = null;
-      state.setDragging(true);
-    },
-    onMove({ deltaX, deltaY, pointerType, shiftKey }) {
-      var _containerRef_current;
-      let { incrementX, decrementX, incrementY, decrementY, xChannelPageStep, xChannelStep: xChannelStep2, yChannelPageStep, yChannelStep: yChannelStep2, getThumbPosition, setColorFromPoint } = state;
-      if (currentPosition.current == null) currentPosition.current = getThumbPosition();
-      let { width, height } = ((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect()) || {
-        width: 0,
-        height: 0
-      };
-      let valueChanged = deltaX !== 0 || deltaY !== 0;
-      if (pointerType === "keyboard") {
-        let deltaXValue = shiftKey && xChannelPageStep > xChannelStep2 ? xChannelPageStep : xChannelStep2;
-        let deltaYValue = shiftKey && yChannelPageStep > yChannelStep2 ? yChannelPageStep : yChannelStep2;
-        if (deltaX > 0 && direction === "ltr" || deltaX < 0 && direction === "rtl") incrementX(deltaXValue);
-        else if (deltaX < 0 && direction === "ltr" || deltaX > 0 && direction === "rtl") decrementX(deltaXValue);
-        else if (deltaY > 0) decrementY(deltaYValue);
-        else if (deltaY < 0) incrementY(deltaYValue);
-        setValueChangedViaKeyboard(valueChanged);
-        focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? "y" : "x";
-        setFocusedInput(focusedInput);
-      } else {
-        currentPosition.current.x += (direction === "rtl" ? -1 : 1) * deltaX / width;
-        currentPosition.current.y += deltaY / height;
-        setColorFromPoint(currentPosition.current.x, currentPosition.current.y);
-      }
-    },
-    onMoveEnd() {
-      isOnColorArea.current = false;
-      state.setDragging(false);
-      let input = focusedInput === "x" ? inputXRef : inputYRef;
-      focusInput(input);
-    }
-  };
-  let { moveProps: movePropsThumb } = $e8a7022cf87cba2a$export$36da96379f79f245(moveHandler);
-  let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
-    onFocusWithinChange: (focusWithin) => {
-      if (!focusWithin) {
-        setValueChangedViaKeyboard(false);
-        setValueChangedViaInputChangeEvent(false);
-      }
-    }
-  });
-  let currentPointer = useRef(void 0);
-  let isOnColorArea = useRef(false);
-  let { moveProps: movePropsContainer } = $e8a7022cf87cba2a$export$36da96379f79f245({
-    onMoveStart() {
-      if (isOnColorArea.current) moveHandler.onMoveStart();
-    },
-    onMove(e) {
-      if (isOnColorArea.current) moveHandler.onMove(e);
-    },
-    onMoveEnd() {
-      if (isOnColorArea.current) moveHandler.onMoveEnd();
-    }
-  });
-  let onThumbDown = (id) => {
-    if (!state.isDragging) {
-      currentPointer.current = id;
-      setValueChangedViaKeyboard(false);
-      focusInput();
-      state.setDragging(true);
-      if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
-      else {
-        addGlobalListener(window, "mouseup", onThumbUp, false);
-        addGlobalListener(window, "touchend", onThumbUp, false);
-      }
-    }
-  };
-  let onThumbUp = (e) => {
-    var _e_changedTouches;
-    var _e_pointerId;
-    let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
-    if (id === currentPointer.current) {
-      setValueChangedViaKeyboard(false);
-      focusInput();
-      state.setDragging(false);
-      currentPointer.current = void 0;
-      isOnColorArea.current = false;
-      if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
-      else {
-        removeGlobalListener(window, "mouseup", onThumbUp, false);
-        removeGlobalListener(window, "touchend", onThumbUp, false);
-      }
-    }
-  };
-  let onColorAreaDown = (colorArea, id, clientX, clientY) => {
-    let rect = colorArea.getBoundingClientRect();
-    let { width, height } = rect;
-    let x = (clientX - rect.x) / width;
-    let y = (clientY - rect.y) / height;
-    if (direction === "rtl") x = 1 - x;
-    if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === void 0) {
-      isOnColorArea.current = true;
-      setValueChangedViaKeyboard(false);
-      currentPointer.current = id;
-      state.setColorFromPoint(x, y);
-      focusInput();
-      state.setDragging(true);
-      if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onColorAreaUp, false);
-      else {
-        addGlobalListener(window, "mouseup", onColorAreaUp, false);
-        addGlobalListener(window, "touchend", onColorAreaUp, false);
-      }
-    }
-  };
-  let onColorAreaUp = (e) => {
-    var _e_changedTouches;
-    var _e_pointerId;
-    let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
-    if (isOnColorArea.current && id === currentPointer.current) {
-      isOnColorArea.current = false;
-      setValueChangedViaKeyboard(false);
-      currentPointer.current = void 0;
-      state.setDragging(false);
-      focusInput();
-      if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onColorAreaUp, false);
-      else {
-        removeGlobalListener(window, "mouseup", onColorAreaUp, false);
-        removeGlobalListener(window, "touchend", onColorAreaUp, false);
-      }
-    }
-  };
-  let colorAreaInteractions = isDisabled ? {} : $3ef42575df84b30b$export$9d1611c77c2fe928({
-    ...typeof PointerEvent !== "undefined" ? {
-      onPointerDown: (e) => {
-        if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
-        onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
-      }
-    } : {
-      onMouseDown: (e) => {
-        if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
-        onColorAreaDown(e.currentTarget, void 0, e.clientX, e.clientY);
-      },
-      onTouchStart: (e) => {
-        onColorAreaDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
-      }
-    }
-  }, movePropsContainer);
-  let thumbInteractions = isDisabled ? {} : $3ef42575df84b30b$export$9d1611c77c2fe928({
-    ...typeof PointerEvent !== "undefined" ? {
-      onPointerDown: (e) => {
-        if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
-        onThumbDown(e.pointerId);
-      }
-    } : {
-      onMouseDown: (e) => {
-        if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
-        onThumbDown(void 0);
-      },
-      onTouchStart: (e) => {
-        onThumbDown(e.changedTouches[0].identifier);
-      }
-    }
-  }, focusWithinProps, keyboardProps, movePropsThumb);
-  let { focusProps: xInputFocusProps } = $a1ea59d68270f0dd$export$f8168d8dd8fd66e6({
-    onFocus: () => {
-      setFocusedInput("x");
-    }
-  });
-  let { focusProps: yInputFocusProps } = $a1ea59d68270f0dd$export$f8168d8dd8fd66e6({
-    onFocus: () => {
-      setFocusedInput("y");
-    }
-  });
-  const onChange = (e) => {
-    const { target } = e;
-    setValueChangedViaInputChangeEvent(true);
-    if (target === inputXRef.current) state.setXValue(parseFloat(target.value));
-    else if (target === inputYRef.current) state.setYValue(parseFloat(target.value));
-  };
-  let isMobile = $c87311424ea30a05$export$fedb369cb70207f1() || $c87311424ea30a05$export$a11b0059900ceec8();
-  let value = state.getDisplayColor();
-  const getAriaValueTextForChannel = useCallback((channel) => {
-    const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;
-    return `${isAfterInput ? stringFormatter.format("colorNameAndValue", {
-      name: value.getChannelName(channel, locale),
-      value: value.formatChannelValue(channel, locale)
-    }) : [
-      stringFormatter.format("colorNameAndValue", {
-        name: value.getChannelName(channel, locale),
-        value: value.formatChannelValue(channel, locale)
-      }),
-      stringFormatter.format("colorNameAndValue", {
-        name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
-        value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
-      }),
-      stringFormatter.format("colorNameAndValue", {
-        name: value.getChannelName(zChannel, locale),
-        value: value.formatChannelValue(zChannel, locale)
-      })
-    ].join(", ")}, ${value.getColorName(locale)}`;
-  }, [
-    locale,
-    value,
-    stringFormatter,
-    valueChangedViaInputChangeEvent,
-    valueChangedViaKeyboard,
-    xChannel,
-    yChannel,
-    zChannel
-  ]);
-  let colorPickerLabel = stringFormatter.format("colorPicker");
-  let xInputLabellingProps = $313b98861ee5dd6c$export$d6875122194c7b44({
-    ...props,
-    "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
-      label: ariaLabel,
-      channelLabel: colorPickerLabel
-    }) : colorPickerLabel
-  });
-  let yInputLabellingProps = $313b98861ee5dd6c$export$d6875122194c7b44({
-    ...props,
-    "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
-      label: ariaLabel,
-      channelLabel: colorPickerLabel
-    }) : colorPickerLabel
-  });
-  let colorAreaLabellingProps = $313b98861ee5dd6c$export$d6875122194c7b44({
-    ...props,
-    "aria-label": ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : void 0
-  }, isMobile ? colorPickerLabel : void 0);
-  let ariaRoleDescription = stringFormatter.format("twoDimensionalSlider");
-  let { visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab({
-    style: {
-      opacity: "0.0001",
-      width: "100%",
-      height: "100%",
-      pointerEvents: "none"
-    }
-  });
-  let { colorAreaStyleProps, thumbStyleProps } = $40297c24c53588e6$export$dd62420467d245ca({
-    direction,
-    state,
-    xChannel,
-    yChannel,
-    zChannel
-  });
-  return {
-    colorAreaProps: {
-      ...colorAreaLabellingProps,
-      ...colorAreaInteractions,
-      ...colorAreaStyleProps,
-      role: "group"
-    },
-    thumbProps: {
-      ...thumbInteractions,
-      ...thumbStyleProps,
-      role: "presentation"
-    },
-    xInputProps: {
-      ...xInputLabellingProps,
-      ...visuallyHiddenProps,
-      ...xInputFocusProps,
-      type: "range",
-      min: state.value.getChannelRange(xChannel).minValue,
-      max: state.value.getChannelRange(xChannel).maxValue,
-      step: xChannelStep,
-      "aria-roledescription": ariaRoleDescription,
-      "aria-valuetext": getAriaValueTextForChannel(xChannel),
-      "aria-orientation": "horizontal",
-      "aria-describedby": props["aria-describedby"],
-      "aria-details": props["aria-details"],
-      disabled: isDisabled,
-      value: state.value.getChannelValue(xChannel),
-      name: xName,
-      form,
-      tabIndex: isMobile || !focusedInput || focusedInput === "x" ? void 0 : -1,
-      /*
-        So that only a single "2d slider" control shows up when listing form elements for screen readers,
-        add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
-        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
-      */
-      "aria-hidden": isMobile || !focusedInput || focusedInput === "x" || valueChangedViaKeyboard ? void 0 : "true",
-      onChange
-    },
-    yInputProps: {
-      ...yInputLabellingProps,
-      ...visuallyHiddenProps,
-      ...yInputFocusProps,
-      type: "range",
-      min: state.value.getChannelRange(yChannel).minValue,
-      max: state.value.getChannelRange(yChannel).maxValue,
-      step: yChannelStep,
-      "aria-roledescription": ariaRoleDescription,
-      "aria-valuetext": getAriaValueTextForChannel(yChannel),
-      "aria-orientation": "vertical",
-      "aria-describedby": props["aria-describedby"],
-      "aria-details": props["aria-details"],
-      disabled: isDisabled,
-      value: state.value.getChannelValue(yChannel),
-      name: yName,
-      form,
-      tabIndex: isMobile || focusedInput === "y" ? void 0 : -1,
-      /*
-        So that only a single "2d slider" control shows up when listing form elements for screen readers,
-        add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
-        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
-      */
-      "aria-hidden": isMobile || focusedInput === "y" || valueChangedViaKeyboard ? void 0 : "true",
-      onChange
-    }
-  };
-}
-function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
-  let { trackRef, inputRef, orientation, channel, "aria-label": ariaLabel, name, form } = props;
-  let { locale, direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
-  let { groupProps, trackProps, labelProps, outputProps } = $bcca50147b47f54d$export$56b2c08e277f365({
-    ...props,
-    "aria-label": ariaLabel
-  }, state, trackRef);
-  let { inputProps, thumbProps } = $47b897dc8cdb026b$export$8d15029008292ae({
-    index: 0,
-    orientation,
-    isDisabled: props.isDisabled,
-    name,
-    form,
-    trackRef,
-    inputRef
-  }, state);
-  let value = state.getDisplayColor();
-  let generateBackground = () => {
-    let to;
-    if (orientation === "vertical") to = "top";
-    else if (direction === "ltr") to = "right";
-    else to = "left";
-    switch (channel) {
-      case "hue": {
-        let stops = [
-          0,
-          60,
-          120,
-          180,
-          240,
-          300,
-          360
-        ].map((hue) => value.withChannelValue("hue", hue).toString("css")).join(", ");
-        return `linear-gradient(to ${to}, ${stops})`;
-      }
-      case "lightness": {
-        let min = state.getThumbMinValue(0);
-        let max = state.getThumbMaxValue(0);
-        let start = value.withChannelValue(channel, min).toString("css");
-        let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
-        let end = value.withChannelValue(channel, max).toString("css");
-        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
-      }
-      case "saturation":
-      case "brightness":
-      case "red":
-      case "green":
-      case "blue":
-      case "alpha": {
-        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
-        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
-        return `linear-gradient(to ${to}, ${start}, ${end})`;
-      }
-      default:
-        throw new Error("Unknown color channel: " + channel);
-    }
-  };
-  let forcedColorAdjustNoneStyle = {
-    forcedColorAdjust: "none"
-  };
-  if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
-  else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
-  let { visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab({
-    style: {
-      opacity: "0.0001",
-      width: "100%",
-      height: "100%",
-      pointerEvents: "none"
-    }
-  });
-  return {
-    trackProps: {
-      ...$3ef42575df84b30b$export$9d1611c77c2fe928(groupProps, trackProps),
-      style: {
-        ...trackProps.style,
-        ...forcedColorAdjustNoneStyle,
-        background: generateBackground()
-      }
-    },
-    inputProps: {
-      ...inputProps,
-      style: {
-        ...inputProps.style,
-        ...visuallyHiddenProps.style
-      }
-    },
-    thumbProps: {
-      ...thumbProps,
-      style: {
-        ...thumbProps.style,
-        ...forcedColorAdjustNoneStyle
-      }
-    },
-    labelProps,
-    outputProps
-  };
-}
-function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
-  let { isDisabled, isReadOnly, isRequired, isWheelDisabled, validationBehavior = "aria" } = props;
-  let { colorValue, inputValue, increment, decrement, incrementToMax, decrementToMin, commit } = state;
-  let inputId = $bdb11010cef70236$export$f680877a34711e37();
-  let { spinButtonProps } = $d2e8511e6f209edf$export$e908e06f4b8e3402({
-    isDisabled,
-    isReadOnly,
-    isRequired,
-    maxValue: 16777215,
-    minValue: 0,
-    onIncrement: increment,
-    onIncrementToMax: incrementToMax,
-    onDecrement: decrement,
-    onDecrementToMin: decrementToMin,
-    value: colorValue ? colorValue.toHexInt() : void 0,
-    textValue: colorValue ? colorValue.toString("hex") : void 0
-  });
-  let [focusWithin, setFocusWithin] = useState(false);
-  let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
-    isDisabled,
-    onFocusWithinChange: setFocusWithin
-  });
-  let onWheel = useCallback((e) => {
-    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
-    if (e.deltaY > 0) increment();
-    else if (e.deltaY < 0) decrement();
-  }, [
-    decrement,
-    increment
-  ]);
-  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
-  $7d0a636d7a4dcefd$export$2123ff2b87c81ca({
-    onScroll: onWheel,
-    isDisabled: scrollingDisabled
-  }, ref);
-  let onChange = (value) => {
-    if (state.validate(value)) state.setInputValue(value);
-  };
-  let { inputProps, ...otherProps } = $d841c8010a73d545$export$4f384c9210e583c3({
-    ...props,
-    id: inputId,
-    value: inputValue,
-    // Intentionally invalid value that will be ignored by onChange during form reset
-    // This is handled separately below.
-    defaultValue: "!",
-    validate: void 0,
-    [$e5be200c675c3b3a$export$a763b9476acd3eb]: state,
-    type: "text",
-    autoComplete: "off",
-    onChange
-  }, state, ref);
-  $99facab73266f662$export$5add1d006293d136(ref, state.defaultColorValue, state.setColorValue);
-  inputProps = $3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, spinButtonProps, focusWithinProps, {
-    role: "textbox",
-    "aria-valuemax": null,
-    "aria-valuemin": null,
-    "aria-valuenow": null,
-    "aria-valuetext": null,
-    autoCorrect: "off",
-    spellCheck: "false",
-    onBlur: commit
-  });
-  if (validationBehavior === "native") inputProps["aria-required"] = void 0;
-  return {
-    inputProps,
-    ...otherProps
-  };
-}
-function $5e632d1ff0188f00$export$e55dd820142d3131(props, state, inputRef) {
-  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  return $81397a9303501bda$export$23f548e970bdf099({
-    ...props,
-    value: void 0,
-    defaultValue: void 0,
-    onChange: void 0,
-    validate: void 0,
-    // Provide a default aria-label if no other label is provided.
-    "aria-label": props["aria-label"] || (props.label || props["aria-labelledby"] ? void 0 : state.colorValue.getChannelName(props.channel, locale))
-  }, state, inputRef);
-}
-const $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = /* @__PURE__ */ createContext(null);
-const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /* @__PURE__ */ forwardRef(function ColorThumb(props, ref) {
-  let { state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false } = useContext($e2b71ec1d6016406$export$c80c0ea2ca5cb846);
-  let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f();
-  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-ColorThumb",
-    defaultStyle: {
-      ...thumbProps.style,
-      backgroundColor: state.getDisplayColor().toString()
-    },
-    values: {
-      color: state.getDisplayColor(),
-      isHovered,
-      isDragging: state.isDragging,
-      isFocused,
-      isFocusVisible,
-      isDisabled
-    }
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.id;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(thumbProps, hoverProps, DOMProps),
-    ...renderProps,
-    ref,
-    "data-hovered": isHovered || void 0,
-    "data-dragging": state.isDragging || void 0,
-    "data-focused": isFocused || void 0,
-    "data-focus-visible": isFocusVisible || void 0,
-    "data-disabled": isDisabled || void 0
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
-    ref: inputXRef,
-    ...xInputProps,
-    ...focusProps
-  }), yInputProps && /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
-    ref: inputYRef,
-    ...yInputProps,
-    ...focusProps
-  }), renderProps.children);
-});
-const $0de070065d44825d$export$6b32221de49982e = /* @__PURE__ */ createContext(null);
-const $0de070065d44825d$export$b2103f68a961418e = /* @__PURE__ */ forwardRef(function ColorArea(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$ebe63fadcdce34ed);
-  let inputXRef = useRef(null);
-  let inputYRef = useRef(null);
-  let state = $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props);
-  let { colorAreaProps, xInputProps, yInputProps, thumbProps } = $60bd7d6e45dcddfa$export$2f92a7a615a014f6({
-    ...props,
-    inputXRef,
-    inputYRef,
-    containerRef: ref
-  }, state);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-ColorArea",
-    defaultStyle: colorAreaProps.style,
-    values: {
-      state,
-      isDisabled: props.isDisabled || false
-    }
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.id;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ref,
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, colorAreaProps, renderProps),
-    slot: props.slot || void 0,
-    "data-disabled": props.isDisabled || void 0
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $0de070065d44825d$export$6b32221de49982e,
-        state
-      ],
-      [
-        $e2b71ec1d6016406$export$c80c0ea2ca5cb846,
-        {
-          state,
-          thumbProps,
-          inputXRef,
-          xInputProps,
-          inputYRef,
-          yInputProps,
-          isDisabled: props.isDisabled
-        }
-      ]
-    ]
-  }, renderProps.children));
-});
-const $3ada01a82feafb94$export$96b6d32b05a1a8ed = /* @__PURE__ */ createContext(null);
-const $3ada01a82feafb94$export$b865d4358897bb17 = /* @__PURE__ */ forwardRef(function ColorField(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$44644b8a16031b5b);
-  if (props.channel) return /* @__PURE__ */ $dbSRa$react__default.createElement($3ada01a82feafb94$var$ColorChannelField, {
-    ...props,
-    channel: props.channel,
-    forwardedRef: ref
-  });
-  else return /* @__PURE__ */ $dbSRa$react__default.createElement($3ada01a82feafb94$var$HexColorField, {
-    ...props,
-    forwardedRef: ref
-  });
-});
-function $3ada01a82feafb94$var$ColorChannelField(props) {
-  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  let state = $31a863bb88e75dd6$export$b9fc0d69c9190c4a({
-    ...props,
-    locale
-  });
-  let inputRef = useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  var _props_validationBehavior;
-  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $5e632d1ff0188f00$export$e55dd820142d3131({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    label,
-    validationBehavior: (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : "native"
-  }, state, inputRef);
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($dbSRa$react__default.Fragment, null, $3ada01a82feafb94$var$useChildren(props, state, props.forwardedRef, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation), props.name && /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
-    type: "hidden",
-    name: props.name,
-    form: props.form,
-    value: isNaN(state.numberValue) ? "" : state.numberValue
-  }));
-}
-function $3ada01a82feafb94$var$HexColorField(props) {
-  var _props_validationBehavior;
-  let state = $b335ada08155d9c0$export$d52a01683abdfcd6({
-    ...props,
-    validationBehavior: (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : "native"
-  });
-  let inputRef = useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  var _props_validationBehavior1;
-  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $f6896b05b2ecad12$export$77e32ca575a28fdf({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    label,
-    validationBehavior: (_props_validationBehavior1 = props.validationBehavior) !== null && _props_validationBehavior1 !== void 0 ? _props_validationBehavior1 : "native"
-  }, state, inputRef);
-  return $3ada01a82feafb94$var$useChildren(props, state, props.forwardedRef, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation);
-}
-function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation) {
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: {
-      state,
-      channel: props.channel || "hex",
-      isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid || false,
-      isReadOnly: props.isReadOnly || false,
-      isRequired: props.isRequired || false
-    },
-    defaultClassName: "react-aria-ColorField"
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.id;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $3ada01a82feafb94$export$96b6d32b05a1a8ed,
-        state
-      ],
-      [
-        $3985021b0ad6602f$export$37fb8590cf2c088c,
-        {
-          ...inputProps,
-          ref: inputRef
-        }
-      ],
-      [
-        $01b77f81d0f07f68$export$75b6ee27786ba447,
-        {
-          ...labelProps,
-          ref: labelRef
-        }
-      ],
-      [
-        $a049562f99e7db0e$export$f9c6924e160136d1,
-        {
-          role: "presentation",
-          isInvalid: validation.isInvalid,
-          isDisabled: props.isDisabled || false
-        }
-      ],
-      [
-        $514c0188e459b4c0$export$9afb8bc826b033ea,
-        {
-          slots: {
-            description: descriptionProps,
-            errorMessage: errorMessageProps
-          }
-        }
-      ],
-      [
-        $ee014567cb39d3f0$export$ff05c3ac10437e03,
-        validation
-      ]
-    ]
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ...DOMProps,
-    ...renderProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-channel": props.channel || "hex",
-    "data-disabled": props.isDisabled || void 0,
-    "data-invalid": validation.isInvalid || void 0,
-    "data-readonly": props.isReadOnly || void 0,
-    "data-required": props.isRequired || void 0
-  }));
-}
-const $1cca5300a3c2e7f9$export$c7fad7ea00194428 = /* @__PURE__ */ createContext(null);
-const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef(function ColorSlider(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$717b2c0a523a0b53);
-  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  let state = $25a25ac0d1624665$export$57bc203e1c9c6d44({
-    ...props,
-    locale
-  });
-  let trackRef = $dbSRa$react__default.useRef(null);
-  let inputRef = $dbSRa$react__default.useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  let { trackProps, thumbProps, inputProps, labelProps, outputProps } = $40af666d6c251e36$export$106b7a4e66508f66({
-    ...props,
-    label,
-    trackRef,
-    inputRef
-  }, state);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: {
-      orientation: state.orientation,
-      isDisabled: state.isDisabled,
-      state
-    },
-    defaultClassName: "react-aria-ColorSlider"
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.id;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $1cca5300a3c2e7f9$export$c7fad7ea00194428,
-        state
-      ],
-      [
-        $6f909507e6374d18$export$1e7083018727fa60,
-        state
-      ],
-      [
-        $6f909507e6374d18$export$f1fce0420cc6d8ee,
-        {
-          ...trackProps,
-          ref: trackRef
-        }
-      ],
-      [
-        $6f909507e6374d18$export$6189c2744041d8f8,
-        outputProps
-      ],
-      [
-        $01b77f81d0f07f68$export$75b6ee27786ba447,
-        {
-          ...labelProps,
-          ref: labelRef,
-          children: state.value.getChannelName(props.channel, locale)
-        }
-      ],
-      [
-        $e2b71ec1d6016406$export$c80c0ea2ca5cb846,
-        {
-          state,
-          thumbProps,
-          inputXRef: inputRef,
-          xInputProps: inputProps,
-          isDisabled: props.isDisabled
-        }
-      ]
-    ]
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ...DOMProps,
-    ...renderProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-orientation": state.orientation,
-    "data-disabled": state.isDisabled || void 0
-  }));
-});
-/**
- * A solid color picker.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {import('react-aria-components').Color} props.value - The color value. Hex format is preferred, but HSL, HSB, and RGB are also supported.
- * @param {Function} props.onChange - The change handler.
- * @param {boolean} [props.disabled] - Whether the color picker is disabled.
- * @param {Function} [props.onChangeEnd] - The change end handler.
- * @param {boolean} [props.allowTransparency=false] - Whether the color picker allows transparency.
- * @param {OutputColorFormat} [props.outputFormat] - The output format. Default is 'hex' (or 'hexa' if `allowTransparency` is true).
- * @param {boolean} [props.noAdvancedOptions] - If `true`, the advanced options are hidden.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @typedef {'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba'} OutputColorFormat
- *
- * @returns {JSX.Element} The ButtonGroup component.
- *
- * @example
- * <ButtonGroup
- *
- * @preserve
- */
-const SolidColorPicker = (props) => {
-  const { value: rawValue, onChange, disabled, onChangeEnd, allowTransparency = false, outputFormat, hidden, noAdvancedOptions } = props;
-  const value = rawValue?.replace("transparent", "rgba(0, 0, 0, 0)");
-  const defaultColor = $799cddbef784668f$export$6e865ea70d7724f("#00000000").toFormat(allowTransparency ? "hsla" : "hsl");
-  const modifiedValue = value && value?.length > 1 ? $799cddbef784668f$export$6e865ea70d7724f(value) : defaultColor;
-  const [color, setColor] = useState(modifiedValue.toFormat(allowTransparency ? "hsla" : "hsl"));
-  if (hidden) {
-    return null;
-  }
-  let handleChangeEnd;
-  if (onChangeEnd) {
-    handleChangeEnd = (color2) => {
-      setColor(color2 ?? defaultColor);
-      onChange(color2?.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
-    };
-  }
-  let handleChange = (color2) => {
-    setColor(color2 ?? defaultColor);
-    onChange(color2?.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
-  };
-  const valueInputClassName = clsx(
-    "es:leading-none",
-    "es:border-none!",
-    "es:max-w-14",
-    "es:min-h-9",
-    "es:px-3",
-    "es:font-mono es:text-12",
-    "es:rounded-lg es:focus:rounded-xl es:aria-[controls]:rounded-xl",
-    "es:transition-plus",
-    "es:any-focus:outline-hidden",
-    "es:inset-ring!",
-    "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30",
-    "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500",
-    "es:focus:placeholder:text-surface-400",
-    "es:inset-ring-secondary-100",
-    "es:focus:text-accent-950",
-    "es:text-secondary-900",
-    "es:placeholder:text-secondary-500/80",
-    "es:bg-secondary-100 es:focus:bg-surface-50",
-    "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus:inset-ring-surface-200",
-    "es:selection:bg-surface-100 es:selection:text-accent-800"
-  );
-  return /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-col es:items-center es:gap-2", children: [
-    /* @__PURE__ */ jsx(
-      $0de070065d44825d$export$b2103f68a961418e,
-      {
-        value: color,
-        xChannel: "saturation",
-        yChannel: "lightness",
-        className: clsx(
-          "es:size-48 es:rounded-xl es:border es:border-secondary-300 es:shadow-sm es:transition",
-          'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
-          "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
-        ),
-        onChange: handleChange,
-        onChangeEnd: handleChangeEnd,
-        isDisabled: disabled,
-        children: /* @__PURE__ */ jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, { className: "es:size-5 es:rounded-full es:transition es:dragging:scale-110! es:border es:border-white es:shadow-[0_0_0_1px_black] es:disabled:invisible" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      $1cca5300a3c2e7f9$export$44fd664bcca5b6fb,
-      {
-        channel: "hue",
-        value: color,
-        onChange: handleChange,
-        isDisabled: disabled,
-        children: /* @__PURE__ */ jsx(
-          $6f909507e6374d18$export$105594979f116971,
-          {
-            className: clsx(
-              "es:h-7 es:w-48 es:rounded-10 es:border es:border-secondary-300 es:shadow-sm",
-              'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
-              "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
-            ),
-            children: /* @__PURE__ */ jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, { className: "es:top-3.25 es:size-5 es:rounded-full es:border es:border-white es:shadow-[0_0_0_1px_black] es:transition es:dragging:scale-110! es:disabled:invisible" })
-          }
-        )
-      }
-    ),
-    allowTransparency && /* @__PURE__ */ jsx(
-      $1cca5300a3c2e7f9$export$44fd664bcca5b6fb,
-      {
-        channel: "alpha",
-        value: color,
-        onChange: handleChange,
-        isDisabled: disabled,
-        children: /* @__PURE__ */ jsx(
-          $6f909507e6374d18$export$105594979f116971,
-          {
-            className: clsx(
-              "es:h-7 es:w-48 es:rounded-10 es:border es:border-secondary-300 es:shadow-sm",
-              'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
-              "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
-            ),
-            style: () => {
-              const startColor = color.clone().withChannelValue("alpha", 0).toString("hsla");
-              const endColor = color.clone().withChannelValue("alpha", 1).toString("hsla");
-              return {
-                background: `linear-gradient(to right, ${startColor}, ${endColor}), repeating-conic-gradient(rgb(204, 204, 204) 0%, rgb(204, 204, 204) 25%, white 0%, white 50%) 50% center / 14px 14px`
-              };
-            },
-            children: /* @__PURE__ */ jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, { className: "es:top-3.25 es:size-5 es:rounded-full es:border es:border-white es:shadow-[0_0_0_1px_black] es:transition es:disabled:invisible" })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:justify-center es:gap-0.75", children: [
-      /* @__PURE__ */ jsx(
-        $3ada01a82feafb94$export$b865d4358897bb17,
-        {
-          value: color,
-          onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-          "aria-label": __("Hex color value", "eightshift-ui-components"),
-          isDisabled: disabled,
-          children: /* @__PURE__ */ jsx(
-            $3985021b0ad6602f$export$f5b8910cec6cf069,
-            {
-              className: clsx(
-                "es:leading-none",
-                "es:w-20",
-                "es:transition-plus",
-                "es:any-focus:outline-hidden",
-                "es:inset-ring",
-                "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30",
-                "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500",
-                "es:focus:placeholder:text-surface-400",
-                "es:h-8",
-                "es:px-3",
-                "es:font-mono es:text-12",
-                "es:bg-white",
-                "es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
-                "es:hover:from-surface-100/0 es:hover:to-surface-100/50",
-                "es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus:inset-ring-surface-400",
-                "es:inset-shadow-sm es:inset-shadow-secondary-100/50",
-                "es:hover:placeholder:text-surface-400",
-                "es:placeholder:text-secondary-400",
-                "es:shadow-xs es:shadow-black/5",
-                "es:rounded-lg! es:focus:rounded-xl!",
-                "es:border-none!"
-              )
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        TriggeredPopover,
-        {
-          triggerButtonIcon: icons.dropdownCaretAlt,
-          className: "es:w-52 es:p-3",
-          triggerButtonProps: {
-            disabled,
-            tooltip: __("Advanced color options", "eightshift-ui-components"),
-            className: "es:w-6 es:h-8 es:icon:size-4.5!"
-          },
-          hidden: noAdvancedOptions,
-          children: [
-            /* @__PURE__ */ jsxs(BaseControl, { label: "RGB", children: [
-              /* @__PURE__ */ jsx(
-                $3ada01a82feafb94$export$b865d4358897bb17,
-                {
-                  value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
-                  onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                  channel: "red",
-                  children: /* @__PURE__ */ jsx(
-                    BaseControl,
-                    {
-                      icon: /* @__PURE__ */ jsx(
-                        ColorSwatch,
-                        {
-                          color: "#ff0000",
-                          className: "es:size-5!",
-                          flat: true
-                        }
-                      ),
-                      label: __("Red", "eightshift-ui-components"),
-                      inline: true,
-                      children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                $3ada01a82feafb94$export$b865d4358897bb17,
-                {
-                  value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
-                  onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                  channel: "green",
-                  children: /* @__PURE__ */ jsx(
-                    BaseControl,
-                    {
-                      icon: /* @__PURE__ */ jsx(
-                        ColorSwatch,
-                        {
-                          color: "#00ff00",
-                          className: "es:size-5!",
-                          flat: true
-                        }
-                      ),
-                      label: __("Green", "eightshift-ui-components"),
-                      inline: true,
-                      children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                $3ada01a82feafb94$export$b865d4358897bb17,
-                {
-                  value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
-                  onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                  channel: "blue",
-                  children: /* @__PURE__ */ jsx(
-                    BaseControl,
-                    {
-                      icon: /* @__PURE__ */ jsx(
-                        ColorSwatch,
-                        {
-                          color: "#0000ff",
-                          className: "es:size-5!",
-                          flat: true
-                        }
-                      ),
-                      label: __("Blue", "eightshift-ui-components"),
-                      inline: true,
-                      children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                    }
-                  )
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(
-              BaseControl,
-              {
-                label: "HSL",
-                className: "es:mt-3",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    $3ada01a82feafb94$export$b865d4358897bb17,
-                    {
-                      value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
-                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                      channel: "hue",
-                      children: /* @__PURE__ */ jsx(
-                        BaseControl,
-                        {
-                          icon: /* @__PURE__ */ jsx(
-                            ColorSwatch,
-                            {
-                              gradient: "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta)",
-                              className: "es:size-5!",
-                              flat: true
-                            }
-                          ),
-                          label: __("Hue", "eightshift-ui-components"),
-                          inline: true,
-                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    $3ada01a82feafb94$export$b865d4358897bb17,
-                    {
-                      value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
-                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                      channel: "saturation",
-                      children: /* @__PURE__ */ jsx(
-                        BaseControl,
-                        {
-                          icon: /* @__PURE__ */ jsx(
-                            ColorSwatch,
-                            {
-                              gradient: "linear-gradient(to right, var(--es-color-surface-400), var(--es-color-accent-500))",
-                              className: "es:size-5!",
-                              flat: true
-                            }
-                          ),
-                          label: __("Saturation", "eightshift-ui-components"),
-                          inline: true,
-                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    $3ada01a82feafb94$export$b865d4358897bb17,
-                    {
-                      value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
-                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                      channel: "lightness",
-                      children: /* @__PURE__ */ jsx(
-                        BaseControl,
-                        {
-                          icon: /* @__PURE__ */ jsx(
-                            ColorSwatch,
-                            {
-                              gradient: "linear-gradient(to right, var(--es-color-secondary-50), var(--es-color-secondary-100), var(--es-color-secondary-200), var(--es-color-secondary-300), var(--es-color-secondary-400), var(--es-color-secondary-500), var(--es-color-secondary-600), var(--es-color-secondary-700), var(--es-color-secondary-800), var(--es-color-secondary-900))",
-                              className: "es:size-5!",
-                              flat: true
-                            }
-                          ),
-                          label: __("Lightness", "eightshift-ui-components"),
-                          inline: true,
-                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              BaseControl,
-              {
-                label: "HSB",
-                className: "es:mt-3",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    $3ada01a82feafb94$export$b865d4358897bb17,
-                    {
-                      value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
-                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                      channel: "hue",
-                      children: /* @__PURE__ */ jsx(
-                        BaseControl,
-                        {
-                          icon: /* @__PURE__ */ jsx(
-                            ColorSwatch,
-                            {
-                              gradient: "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta)",
-                              className: "es:size-5!",
-                              flat: true
-                            }
-                          ),
-                          label: __("Hue", "eightshift-ui-components"),
-                          inline: true,
-                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    $3ada01a82feafb94$export$b865d4358897bb17,
-                    {
-                      value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
-                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                      channel: "saturation",
-                      children: /* @__PURE__ */ jsx(
-                        BaseControl,
-                        {
-                          icon: /* @__PURE__ */ jsx(
-                            ColorSwatch,
-                            {
-                              gradient: "linear-gradient(to right, var(--es-color-surface-400), var(--es-color-accent-500))",
-                              className: "es:size-5!",
-                              flat: true
-                            }
-                          ),
-                          label: __("Saturation", "eightshift-ui-components"),
-                          inline: true,
-                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    $3ada01a82feafb94$export$b865d4358897bb17,
-                    {
-                      value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
-                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                      channel: "brightness",
-                      children: /* @__PURE__ */ jsx(
-                        BaseControl,
-                        {
-                          icon: /* @__PURE__ */ jsx(
-                            ColorSwatch,
-                            {
-                              gradient: "linear-gradient(to right, var(--es-color-secondary-50), var(--es-color-secondary-100), var(--es-color-secondary-200), var(--es-color-secondary-300), var(--es-color-secondary-400), var(--es-color-secondary-500), var(--es-color-secondary-600), var(--es-color-secondary-700), var(--es-color-secondary-800), var(--es-color-secondary-900))",
-                              className: "es:size-5!",
-                              flat: true
-                            }
-                          ),
-                          label: __("Brightness", "eightshift-ui-components"),
-                          inline: true,
-                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  SolidColorPicker
-};
+import { t as SolidColorPicker } from "../../solid-color-picker-DbT-aoVx.js";
+import "../../build-module-sxK3nxOK.js";
+export { SolidColorPicker };