import { jsxs, jsx } from "react/jsx-runtime";
import React__default, { useState, useMemo, useRef, 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 { b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-cvK1vxO7.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, e as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, n as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, b as $c87311424ea30a05$export$fedb369cb70207f1, s as $c87311424ea30a05$export$a11b0059900ceec8, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-LmGemtHE.js";
import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-WxFE7lQB.js";
import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-7sOvrqo0.js";
import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Cdxi6JSa.js";
import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-yV9VVy9R.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-ChP04COa.js";
import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-eaZiN2tE.js";
import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-X6SggVVO.js";
import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
import { b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-ChJaTNa5.js";
import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.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-BCjjZWaz.js";
import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-CUtZcedF.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { BaseControl } from "../base-control/base-control.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.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 [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__ */ 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, {
    global: true
  });
  delete DOMProps.id;
  return /* @__PURE__ */ React__default.createElement("div", {
    ref,
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, colorAreaProps, 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,
    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
    },
    defaultClassName: "react-aria-ColorField"
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  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
        }
      ],
      [
        $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__ */ 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, {
    global: true
  });
  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?.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: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-sm 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-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", 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: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-sm 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?.toFormat(allowTransparency ? "rgba" : "rgb"),
                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "rgba" : "rgb"),
                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "rgba" : "rgb"),
                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsla" : "hsl"),
                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsla" : "hsl"),
                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsla" : "hsl"),
                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsba" : "hsb"),
                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsba" : "hsb"),
                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsba" : "hsb"),
                    onChange: (color2) => handleChange(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
};
