@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/solid-color-picker-DbT-aoVx.js

@@ -0,0 +1,1415 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { r as $4e85f108e88277b8$export$717b2c0a523a0b53, s as $4e85f108e88277b8$export$ebe63fadcdce34ed, t as $4e85f108e88277b8$export$44644b8a16031b5b } from "./RSPContexts-C_z0bI8W.js";
+import { i as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, m as $bdb11010cef70236$export$f680877a34711e37, n as $64fa3d84918910a7$export$29f1550f4b0d4415, o as $64fa3d84918910a7$export$df3a06d6289f983e, r as $64fa3d84918910a7$export$4d86445c2cf5e3, s as $64fa3d84918910a7$export$ef03459518577ad4, t as $64fa3d84918910a7$export$2881499e37b75b9a, u as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-B_uiqNa4.js";
+import { F as $c87311424ea30a05$export$a11b0059900ceec8, L as $c87311424ea30a05$export$fedb369cb70207f1, R as $7215afc6de606d6b$export$de79e2c695e052f3, T as $03deb23ff14920c4$export$4eaf04e54aa8eed6, a as $46d819fcbaf35654$export$8f71654801c2f7cd, o as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, t as $6179b936705e76d3$export$ae780daf29e6d456, v as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useHover-qaMm3XFO.js";
+import { t as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-_2_3GD-K.js";
+import { t as $313b98861ee5dd6c$export$d6875122194c7b44 } from "./useLabels-B2p7RXi5.js";
+import { t as $99facab73266f662$export$5add1d006293d136 } from "./useFormReset-DdkykzAn.js";
+import { r as $9446cca9a3875146$export$cb6e0bb50bc19463, t as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "./number-ZZIxJukn.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-C-XNeJ_l.js";
+import { t as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-Dv2diN3k.js";
+import { a as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, i as $d841c8010a73d545$export$4f384c9210e583c3, n as $d2e8511e6f209edf$export$e908e06f4b8e3402, r as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, t as $81397a9303501bda$export$23f548e970bdf099 } from "./useNumberField-2xbi3jRV.js";
+import { n as $9ab94262bd0047c7$export$420e68273165f4ec, t as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-DuYL4cdO.js";
+import { a as $6f909507e6374d18$export$6189c2744041d8f8, c as $47b897dc8cdb026b$export$8d15029008292ae, d as $e8a7022cf87cba2a$export$36da96379f79f245, l as $bcca50147b47f54d$export$56b2c08e277f365, n as $6f909507e6374d18$export$1e7083018727fa60, s as $6f909507e6374d18$export$f1fce0420cc6d8ee, t as $6f909507e6374d18$export$105594979f116971, u as $28f99e3e86e6ec45$export$e5fda3247f5d67f9 } from "./Slider-DW1RuMVp.js";
+import { n as $5c3e21d68f1c4674$export$a966af930f325cab } from "./VisuallyHidden-CfsnJHZb.js";
+import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, r as $e5be200c675c3b3a$export$a763b9476acd3eb, t as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "./FieldError-BWDbP5Db.js";
+import { i as $a049562f99e7db0e$export$f9c6924e160136d1, n as $3985021b0ad6602f$export$f5b8910cec6cf069, t as $3985021b0ad6602f$export$37fb8590cf2c088c } from "./Input-BURqyJXW.js";
+import { a as $3493a52097159720$exports, i as $799cddbef784668f$export$6e865ea70d7724f, r as $799cddbef784668f$export$4cde5df63f53f473, t as ColorSwatch } from "./color-swatch-CBYsO_Zs.js";
+import { t as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "./Label-DFXXxMKY.js";
+import { n as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-O6VBBDlP.js";
+import { BaseControl } from "./components/base-control/base-control.js";
+import { t as __ } from "./build-module-sxK3nxOK.js";
+import { dropdownCaretAlt } from "./icons/ui-icons/dropdown-caret-alt.js";
+import { TriggeredPopover } from "./components/popover/popover.js";
+import React, { createContext, forwardRef, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/@react-stately/color/dist/useColorAreaState.mjs
+var $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 = (color) => {
+		valueRef.current = color;
+		setColorState(color);
+	};
+	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;
+		setColor(color.withChannelValue(channels.xChannel, v));
+	};
+	let setYValue = (v) => {
+		if (v === yValue) return;
+		setColor(color.withChannelValue(channels.yChannel, v));
+	};
+	return {
+		channels,
+		xChannelStep: stepX,
+		yChannelStep: stepY,
+		xChannelPageStep: pageSizeX,
+		yChannelPageStep: pageSizeY,
+		value: color,
+		defaultValue: value !== void 0 ? initialValue : defaultValue,
+		setValue(value) {
+			setColor($799cddbef784668f$export$4cde5df63f53f473(value));
+		},
+		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() {
+			return {
+				x: (xValue - minValueX) / (maxValueX - minValueX),
+				y: 1 - (yValue - minValueY) / (maxValueY - minValueY)
+			};
+		},
+		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(isDragging) {
+			let wasDragging = isDraggingRef.current;
+			isDraggingRef.current = isDragging;
+			if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+			setDragging(isDragging);
+		},
+		isDragging,
+		getDisplayColor() {
+			return color.withChannelValue("alpha", 1);
+		}
+	};
+}
+//#endregion
+//#region node_modules/@react-stately/color/dist/useColorSliderState.mjs
+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,
+		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(value) {
+			setColor($799cddbef784668f$export$4cde5df63f53f473(value));
+		},
+		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)
+	};
+}
+//#endregion
+//#region node_modules/@react-stately/color/dist/useColor.mjs
+function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
+	return useMemo(() => {
+		if (typeof value === "string") try {
+			return $799cddbef784668f$export$6e865ea70d7724f(value);
+		} catch {
+			return;
+		}
+		return value;
+	}, [value]);
+}
+//#endregion
+//#region node_modules/@react-stately/color/dist/useColorFieldState.mjs
+var $b335ada08155d9c0$var$MIN_COLOR = $799cddbef784668f$export$6e865ea70d7724f("#000000");
+var $b335ada08155d9c0$var$MAX_COLOR = $799cddbef784668f$export$6e865ea70d7724f("#FFFFFF");
+var $b335ada08155d9c0$var$MIN_COLOR_INT = $b335ada08155d9c0$var$MIN_COLOR.toHexInt();
+var $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 = $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 = (value) => {
+		var _value_match;
+		return value === "" || !!((_value_match = value.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) newColor = $799cddbef784668f$export$6e865ea70d7724f(`#${clampInt.toString(16).padStart(6, "0").toUpperCase()}`);
+	return newColor;
+}
+//#endregion
+//#region node_modules/@react-stately/color/dist/useColorChannelFieldState.mjs
+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;
+	return {
+		...$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
+		}),
+		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
+	]);
+}
+//#endregion
+//#region node_modules/@react-aria/color/dist/useColorAreaGradient.mjs
+var $40297c24c53588e6$var$hue = (color) => [
+	0,
+	60,
+	120,
+	180,
+	240,
+	300,
+	360
+].map((hue) => color.withChannelValue("hue", hue).toString("css")).join(", ");
+var $40297c24c53588e6$var$saturation = (color) => `${color.withChannelValue("saturation", 0)}, transparent`;
+var $40297c24c53588e6$var$hslChannels = {
+	hue: $40297c24c53588e6$var$hue,
+	saturation: $40297c24c53588e6$var$saturation,
+	lightness: () => "black, transparent, white"
+};
+var $40297c24c53588e6$var$hsbChannels = {
+	hue: $40297c24c53588e6$var$hue,
+	saturation: $40297c24c53588e6$var$saturation,
+	brightness: () => "black, transparent"
+};
+function $40297c24c53588e6$export$dd62420467d245ca({ direction, state, zChannel, xChannel, yChannel }) {
+	return 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: [
+						`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
+	]);
+}
+//#endregion
+//#region node_modules/@react-aria/color/dist/useColorArea.mjs
+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) {
+			focusInput(dir === "x" ? inputXRef : inputYRef);
+			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, yChannelPageStep, yChannelStep, 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 > xChannelStep ? xChannelPageStep : xChannelStep;
+				let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;
+				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);
+			focusInput(focusedInput === "x" ? inputXRef : inputYRef);
+		}
+	};
+	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;
+		if (((_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) === 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) => {
+		return `${valueChangedViaInputChangeEvent || valueChangedViaKeyboard ? 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,
+			"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,
+			"aria-hidden": isMobile || focusedInput === "y" || valueChangedViaKeyboard ? void 0 : "true",
+			onChange
+		}
+	};
+}
+//#endregion
+//#region node_modules/@react-aria/color/dist/useColorSlider.mjs
+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
+	};
+}
+//#endregion
+//#region node_modules/@react-aria/color/dist/useColorField.mjs
+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
+	});
+	$7d0a636d7a4dcefd$export$2123ff2b87c81ca({
+		onScroll: 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]),
+		isDisabled: isWheelDisabled || isDisabled || isReadOnly || !focusWithin
+	}, ref);
+	let onChange = (value) => {
+		if (state.validate(value)) state.setInputValue(value);
+	};
+	let { inputProps, ...otherProps } = $d841c8010a73d545$export$4f384c9210e583c3({
+		...props,
+		id: inputId,
+		value: inputValue,
+		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
+	};
+}
+//#endregion
+//#region node_modules/@react-aria/color/dist/useColorChannelField.mjs
+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,
+		"aria-label": props["aria-label"] || (props.label || props["aria-labelledby"] ? void 0 : state.colorValue.getChannelName(props.channel, locale))
+	}, state, inputRef);
+}
+//#endregion
+//#region node_modules/react-aria-components/dist/ColorThumb.mjs
+var $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = createContext(null);
+var $e2b71ec1d6016406$export$a3cc47cee1c1ccc = 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 React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(thumbProps, hoverProps, DOMProps),
+		...renderProps,
+		ref,
+		"data-hovered": isHovered || void 0,
+		"data-dragging": state.isDragging || void 0,
+		"data-focused": isFocused || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-disabled": isDisabled || void 0
+	}, React.createElement("input", {
+		ref: inputXRef,
+		...xInputProps,
+		...focusProps
+	}), yInputProps && React.createElement("input", {
+		ref: inputYRef,
+		...yInputProps,
+		...focusProps
+	}), renderProps.children);
+});
+//#endregion
+//#region node_modules/react-aria-components/dist/ColorArea.mjs
+var $0de070065d44825d$export$6b32221de49982e = createContext(null);
+var $0de070065d44825d$export$b2103f68a961418e = 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 React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		ref,
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, colorAreaProps, renderProps),
+		slot: props.slot || void 0,
+		"data-disabled": props.isDisabled || void 0
+	}, React.createElement($64fa3d84918910a7$export$2881499e37b75b9a, { values: [[$0de070065d44825d$export$6b32221de49982e, state], [$e2b71ec1d6016406$export$c80c0ea2ca5cb846, {
+		state,
+		thumbProps,
+		inputXRef,
+		xInputProps,
+		inputYRef,
+		yInputProps,
+		isDisabled: props.isDisabled
+	}]] }, renderProps.children));
+});
+//#endregion
+//#region node_modules/react-aria-components/dist/ColorField.mjs
+var $3ada01a82feafb94$export$96b6d32b05a1a8ed = createContext(null);
+var $3ada01a82feafb94$export$b865d4358897bb17 = forwardRef(function ColorField(props, ref) {
+	[props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$44644b8a16031b5b);
+	if (props.channel) return React.createElement($3ada01a82feafb94$var$ColorChannelField, {
+		...props,
+		channel: props.channel,
+		forwardedRef: ref
+	});
+	else return React.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 React.createElement(React.Fragment, null, $3ada01a82feafb94$var$useChildren(props, state, props.forwardedRef, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation), props.name && React.createElement("input", {
+		type: "hidden",
+		name: props.name,
+		form: props.form,
+		value: isNaN(state.numberValue) ? "" : state.numberValue
+	}));
+}
+function $3ada01a82feafb94$var$HexColorField(props) {
+	var _props_validationBehavior;
+	let state = $b335ada08155d9c0$export$d52a01683abdfcd6({
+		...props,
+		validationBehavior: (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : "native"
+	});
+	let inputRef = useRef(null);
+	let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
+	var _props_validationBehavior1;
+	let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $f6896b05b2ecad12$export$77e32ca575a28fdf({
+		...$64fa3d84918910a7$export$ef03459518577ad4(props),
+		label,
+		validationBehavior: (_props_validationBehavior1 = props.validationBehavior) !== null && _props_validationBehavior1 !== void 0 ? _props_validationBehavior1 : "native"
+	}, state, inputRef);
+	return $3ada01a82feafb94$var$useChildren(props, state, props.forwardedRef, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation);
+}
+function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation) {
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		values: {
+			state,
+			channel: props.channel || "hex",
+			isDisabled: props.isDisabled || false,
+			isInvalid: validation.isInvalid || false,
+			isReadOnly: props.isReadOnly || false,
+			isRequired: props.isRequired || false
+		},
+		defaultClassName: "react-aria-ColorField"
+	});
+	let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true });
+	delete DOMProps.id;
+	return React.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]
+	] }, React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...DOMProps,
+		...renderProps,
+		ref,
+		slot: props.slot || void 0,
+		"data-channel": props.channel || "hex",
+		"data-disabled": props.isDisabled || void 0,
+		"data-invalid": validation.isInvalid || void 0,
+		"data-readonly": props.isReadOnly || void 0,
+		"data-required": props.isRequired || void 0
+	}));
+}
+//#endregion
+//#region node_modules/react-aria-components/dist/ColorSlider.mjs
+var $1cca5300a3c2e7f9$export$c7fad7ea00194428 = createContext(null);
+var $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = 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.useRef(null);
+	let inputRef = React.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 React.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
+		}]
+	] }, React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...DOMProps,
+		...renderProps,
+		ref,
+		slot: props.slot || void 0,
+		"data-orientation": state.orientation,
+		"data-disabled": state.isDisabled || void 0
+	}));
+});
+//#endregion
+//#region lib/components/color-pickers/solid-color-picker.jsx
+/**
+* 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
+* <SolidColorPicker
+* 		value={colorValue}
+* 		onChange={(color) => setColorValue(color)}
+* />
+*/
+var 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 [color, setColor] = useState((value && value?.length > 1 ? $799cddbef784668f$export$6e865ea70d7724f(value) : defaultColor).toFormat(allowTransparency ? "hsla" : "hsl"));
+	if (hidden) return null;
+	let handleChangeEnd;
+	if (onChangeEnd) handleChangeEnd = (color) => {
+		setColor(color ?? defaultColor);
+		onChange(color?.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
+	};
+	let handleChange = (color) => {
+		setColor(color ?? defaultColor);
+		onChange(color?.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
+	};
+	const valueInputClassName = clsx("es:leading-none", "es:border-none!", "es:max-w-14", "es:min-h-9", "es:px-3", "es:font-mono es:text-12", "es:rounded-lg es:focus:rounded-xl es:aria-[controls]:rounded-xl", "es:transition-plus", "es:any-focus:outline-hidden", "es:inset-ring!", "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30", "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500", "es:focus:placeholder:text-surface-400", "es:inset-ring-secondary-100", "es:focus:text-accent-950", "es:text-secondary-900", "es:placeholder:text-secondary-500/80", "es:bg-secondary-100 es:focus:bg-surface-50", "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus:inset-ring-surface-200", "es:selection:bg-surface-100 es:selection:text-accent-800");
+	return jsxs("div", {
+		className: "es:flex es:flex-col es:items-center es:gap-2",
+		children: [
+			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: 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" })
+			}),
+			jsx($1cca5300a3c2e7f9$export$44fd664bcca5b6fb, {
+				channel: "hue",
+				value: color,
+				onChange: handleChange,
+				isDisabled: disabled,
+				children: 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: 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 && jsx($1cca5300a3c2e7f9$export$44fd664bcca5b6fb, {
+				channel: "alpha",
+				value: color,
+				onChange: handleChange,
+				isDisabled: disabled,
+				children: 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: () => {
+						return { background: `linear-gradient(to right, ${color.clone().withChannelValue("alpha", 0).toString("hsla")}, ${color.clone().withChannelValue("alpha", 1).toString("hsla")}), repeating-conic-gradient(rgb(204, 204, 204) 0%, rgb(204, 204, 204) 25%, white 0%, white 50%) 50% center / 14px 14px` };
+					},
+					children: 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" })
+				})
+			}),
+			jsxs("div", {
+				className: "es:flex es:items-center es:justify-center es:gap-0.75",
+				children: [jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+					value: color,
+					onChange: (color) => handleChange(color?.toFormat("hsl")),
+					"aria-label": __("Hex color value", "eightshift-ui-components"),
+					isDisabled: disabled,
+					children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: clsx("es:leading-none", "es:w-20", "es:transition-plus", "es:any-focus:outline-hidden", "es:inset-ring", "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30", "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500", "es:focus:placeholder:text-surface-400", "es:h-8", "es:px-3", "es:font-mono es:text-12", "es:bg-white", "es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%", "es:hover:from-surface-100/0 es:hover:to-surface-100/50", "es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus:inset-ring-surface-400", "es:inset-shadow-sm es:inset-shadow-secondary-100/50", "es:hover:placeholder:text-surface-400", "es:placeholder:text-secondary-400", "es:shadow-xs es:shadow-black/5", "es:rounded-lg! es:focus:rounded-xl!", "es:border-none!") })
+				}), jsxs(TriggeredPopover, {
+					triggerButtonIcon: dropdownCaretAlt,
+					className: "es:w-52 es:p-3",
+					triggerButtonProps: {
+						disabled,
+						tooltip: __("Advanced color options", "eightshift-ui-components"),
+						className: "es:w-6 es:h-8 es:icon:size-4.5!"
+					},
+					hidden: noAdvancedOptions,
+					children: [
+						jsxs(BaseControl, {
+							label: "RGB",
+							children: [
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "red",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											color: "#ff0000",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Red", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								}),
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "green",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											color: "#00ff00",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Green", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								}),
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "blue",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											color: "#0000ff",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Blue", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								})
+							]
+						}),
+						jsxs(BaseControl, {
+							label: "HSL",
+							className: "es:mt-3",
+							children: [
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "hue",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											gradient: "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta)",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Hue", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								}),
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "saturation",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											gradient: "linear-gradient(to right, var(--es-color-surface-400), var(--es-color-accent-500))",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Saturation", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								}),
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "lightness",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											gradient: "linear-gradient(to right, var(--es-color-secondary-50), var(--es-color-secondary-100), var(--es-color-secondary-200), var(--es-color-secondary-300), var(--es-color-secondary-400), var(--es-color-secondary-500), var(--es-color-secondary-600), var(--es-color-secondary-700), var(--es-color-secondary-800), var(--es-color-secondary-900))",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Lightness", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								})
+							]
+						}),
+						jsxs(BaseControl, {
+							label: "HSB",
+							className: "es:mt-3",
+							children: [
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "hue",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											gradient: "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta)",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Hue", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								}),
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "saturation",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											gradient: "linear-gradient(to right, var(--es-color-surface-400), var(--es-color-accent-500))",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Saturation", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								}),
+								jsx($3ada01a82feafb94$export$b865d4358897bb17, {
+									value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+									onChange: (color) => handleChange(color?.toFormat("hsl")),
+									channel: "brightness",
+									children: jsx(BaseControl, {
+										icon: jsx(ColorSwatch, {
+											gradient: "linear-gradient(to right, var(--es-color-secondary-50), var(--es-color-secondary-100), var(--es-color-secondary-200), var(--es-color-secondary-300), var(--es-color-secondary-400), var(--es-color-secondary-500), var(--es-color-secondary-600), var(--es-color-secondary-700), var(--es-color-secondary-800), var(--es-color-secondary-900))",
+											className: "es:size-5!",
+											flat: true
+										}),
+										label: __("Brightness", "eightshift-ui-components"),
+										inline: true,
+										children: jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+									})
+								})
+							]
+						})
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { SolidColorPicker as t };