@eightshift/ui-components 5.0.0 → 5.0.2

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

@@ -0,0 +1,1567 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useMemo, useRef, useState, useCallback, forwardRef, createContext, useContext } from "react";
+import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-2lR5GG9p.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-CZt7LCbO.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import { a as $9ab94262bd0047c7$export$420e68273165f4ec, $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
+import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, g as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, p as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, c as $c87311424ea30a05$export$fedb369cb70207f1, v as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-lVhk8V_G.js";
+import { $ as $9446cca9a3875146$export$cb6e0bb50bc19463, a as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-GajL10e1.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-B7-lUnAF.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-D2YaWRIA.js";
+import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-C-S1oEH9.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-C9GO0IDB.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BYi0pekx.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DHrSdE_Q.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.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-CU1_u8ze.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-Dy0PXJg5.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { TriggeredPopover } from "../popover/popover.js";
+import { icons } from "../../icons/icons.js";
+import { Tabs, TabList, Tab, TabPanel } from "../tabs/tabs.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 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,
+    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 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),
+    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 initialValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value);
+  let initialDefaultValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(defaultValue);
+  let [colorValue, setColorValue] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(initialValue, initialDefaultValue, onChange);
+  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);
+  };
+  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,
+    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 black = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2("#000");
+  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 = useMemo(() => {
+    let nonNullColorValue = colorValue || black;
+    return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
+  }, [
+    black,
+    colorValue,
+    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,
+    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
+  };
+}
+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 } = 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.xValue,
+    state.yValue
+  ], ([x, y]) => {
+    let newColor = state.value.withChannelValue(state.channels.xChannel, x).withChannelValue(state.channels.yChannel, y);
+    state.setValue(newColor);
+  });
+  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,
+      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,
+      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 } = 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,
+    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,
+    defaultValue: void 0,
+    validate: void 0,
+    [$e5be200c675c3b3a$export$a763b9476acd3eb]: state,
+    type: "text",
+    autoComplete: "off",
+    onChange
+  }, state, ref);
+  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);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("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__ */ React__default.createElement("input", {
+    ref: inputXRef,
+    ...xInputProps,
+    ...focusProps
+  }), yInputProps && /* @__PURE__ */ 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);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ref,
+    ...colorAreaProps,
+    ...DOMProps,
+    ...renderProps,
+    slot: props.slot || void 0,
+    "data-disabled": props.isDisabled || void 0
+  }, /* @__PURE__ */ 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__ */ React__default.createElement($3ada01a82feafb94$var$ColorChannelField, {
+    ...props,
+    channel: props.channel,
+    forwardedRef: ref
+  });
+  else return /* @__PURE__ */ 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__ */ React__default.createElement(React__default.Fragment, null, $3ada01a82feafb94$var$useChildren(props, state, props.forwardedRef, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation), props.name && /* @__PURE__ */ React__default.createElement("input", {
+    type: "hidden",
+    name: props.name,
+    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
+    },
+    defaultClassName: "react-aria-ColorField"
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $3ada01a82feafb94$export$96b6d32b05a1a8ed,
+        state
+      ],
+      [
+        $3985021b0ad6602f$export$37fb8590cf2c088c,
+        {
+          ...inputProps,
+          ref: inputRef
+        }
+      ],
+      [
+        $01b77f81d0f07f68$export$75b6ee27786ba447,
+        {
+          ...labelProps,
+          ref: labelRef
+        }
+      ],
+      [
+        $514c0188e459b4c0$export$9afb8bc826b033ea,
+        {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }
+      ],
+      [
+        $ee014567cb39d3f0$export$ff05c3ac10437e03,
+        validation
+      ]
+    ]
+  }, /* @__PURE__ */ React__default.createElement("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
+  }));
+}
+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 = React__default.useRef(null);
+  let inputRef = 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);
+  delete DOMProps.id;
+  return /* @__PURE__ */ 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__ */ React__default.createElement("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 == null ? void 0 : rawValue.replace("transparent", "rgba(0, 0, 0, 0)");
+  const defaultColor = $799cddbef784668f$export$6e865ea70d7724f("#00000000").toFormat(allowTransparency ? "hsla" : "hsl");
+  const modifiedValue = value && (value == null ? void 0 : 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 == null ? void 0 : color2.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
+    };
+  }
+  let handleChange = (color2) => {
+    setColor(color2 ?? defaultColor);
+    onChange(color2 == null ? void 0 : color2.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
+  };
+  const valueInputClassName = clsx(
+    "es:h-8 es:w-12",
+    "es:tabular-nums es:font-mono",
+    "es:border es:rounded-lg es:border-secondary-300 es:p-2 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+    "es:any-focus:outline-hidden",
+    "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
+    "es:focus-visible:border-accent-500",
+    "es:inset-ring es:inset-ring-secondary-100"
+  );
+  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-md 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-md 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-md 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", children: [
+      /* @__PURE__ */ jsx(
+        $3ada01a82feafb94$export$b865d4358897bb17,
+        {
+          value: color,
+          onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+          "aria-label": __("Hex color value", "eightshift-ui-components"),
+          isDisabled: disabled,
+          children: /* @__PURE__ */ jsx(
+            $3985021b0ad6602f$export$f5b8910cec6cf069,
+            {
+              className: clsx(
+                "es:h-9 es:w-20",
+                "es:tabular-nums es:font-mono",
+                "es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                "es:any-focus:outline-hidden",
+                "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
+                "es:focus-visible:border-accent-500",
+                "es:inset-ring es:inset-ring-secondary-100",
+                noAdvancedOptions ? "es:rounded-lg" : "es:rounded-l-lg"
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        TriggeredPopover,
+        {
+          triggerButtonIcon: icons.dropdownCaretAlt,
+          className: "es:w-52 es:p-3",
+          triggerButtonProps: {
+            disabled,
+            tooltip: __("Advanced color options", "eightshift-ui-components"),
+            className: "es:rounded-l-none es:rounded-r-l es:-ml-px es:w-6 es:icon:size-4.5!"
+          },
+          hidden: noAdvancedOptions,
+          children: [
+            /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "es:text-sm es:tracking-tight es:mb-2 es:inline-block", children: __("Advanced color options", "eightshift-ui-components") }),
+            /* @__PURE__ */ jsxs(Tabs, { type: "pillCompactInverse", children: [
+              /* @__PURE__ */ jsxs(TabList, { children: [
+                /* @__PURE__ */ jsx(Tab, { children: "RGB" }),
+                /* @__PURE__ */ jsx(Tab, { children: "HSL" }),
+                /* @__PURE__ */ jsx(Tab, { children: "HSB" })
+              ] }),
+              /* @__PURE__ */ jsxs(TabPanel, { children: [
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "red",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Red", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "green",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Green", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "blue",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Blue", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(TabPanel, { children: [
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "hue",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Hue", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "saturation",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Saturation", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "lightness",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Lightness", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(TabPanel, { children: [
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "hue",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Hue", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "saturation",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Saturation", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
+                  {
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "brightness",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Brightness", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  SolidColorPicker
+};