@eightshift/ui-components 7.0.0 → 7.2.0

package/dist/gradient-editor-xfxA_s9a.js

@@ -0,0 +1,1583 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { n as ButtonGroup, t as Button } from "./button-D9cbyHeZ.js";
+import { n as $251c695a52d94a8d$export$cae13e90592f246a } from "./color-swatch-D2ZBkuTt.js";
+import { t as SolidColorPicker } from "./solid-color-picker-DukArNH-.js";
+import { t as NumberPicker } from "./number-picker-Dhtx4409.js";
+import { BaseControl } from "./components/base-control/base-control.js";
+import { isColorDark } from "./utilities/general.js";
+import { r as sprintf, t as __ } from "./build-module-Bsx62nlm.js";
+import { add } from "./icons/ui-icons/add.js";
+import { angle } from "./icons/ui-icons/angle.js";
+import { centerPoint } from "./icons/ui-icons/center-point.js";
+import { genericShapesAlt } from "./icons/ui-icons/generic-shapes-alt.js";
+import { gradientRepeat } from "./icons/ui-icons/gradient-repeat.js";
+import { gradientStop } from "./icons/ui-icons/gradient-stop.js";
+import { sliders } from "./icons/ui-icons/sliders.js";
+import { trash } from "./icons/ui-icons/trash.js";
+import { TriggeredPopover } from "./components/popover/popover.js";
+import { Menu, MenuItem } from "./components/menu/menu.js";
+import { Container, ContainerGroup } from "./components/base-control/container.js";
+import { DraggableList } from "./components/draggable-list/draggable-list.js";
+import { DraggableListItem } from "./components/draggable-list/draggable-list-item.js";
+import { Slider } from "./components/slider/slider.js";
+import { MatrixAlign } from "./components/matrix-align/matrix-align.js";
+import { Toggle } from "./components/toggle/toggle.js";
+import { OptionSelect } from "./components/option-select/option-select.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/css-gradient-parser/dist/index.js
+function c$1(e, o = ",") {
+	let t = [], n = 0, i = 0;
+	o = new RegExp(o);
+	for (let r = 0; r < e.length; r++) e[r] === "(" ? i++ : e[r] === ")" && i--, i === 0 && o.test(e[r]) && (t.push(e.slice(n, r).trim()), n = r + 1);
+	return t.push(e.slice(n).trim()), t;
+}
+function g(e) {
+	let o = [];
+	for (let t = 0, n = e.length; t < n;) {
+		let [i, r] = c$1(e[t], /\s+/);
+		m(e[t + 1]) ? (o.push({
+			color: i,
+			offset: l(r),
+			hint: l(e[t + 1])
+		}), t += 2) : (o.push({
+			color: i,
+			offset: l(r)
+		}), t++);
+	}
+	return o;
+}
+var u = /^(-?\d+\.?\d*)(%|vw|vh|px|em|rem|deg|rad|grad|turn|ch|vmin|vmax)?$/;
+function m(e) {
+	return u.test(e);
+}
+function l(e) {
+	if (!e) return;
+	let [, o, t] = e.trim().match(u) || [];
+	return {
+		value: o,
+		unit: t ?? "px"
+	};
+}
+function P(e) {
+	if (!/^(repeating-)?linear-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
+	let [, o, t] = e.match(/(repeating-)?linear-gradient\((.+)\)/), n = {
+		orientation: {
+			type: "directional",
+			value: "bottom"
+		},
+		repeating: !!o,
+		stops: []
+	}, i = c$1(t), r = x(i[0]);
+	return r && (n.orientation = r, i.shift()), {
+		...n,
+		stops: g(i)
+	};
+}
+function x(e) {
+	return e.startsWith("to ") ? {
+		type: "directional",
+		value: e.replace("to ", "")
+	} : [
+		"turn",
+		"deg",
+		"grad",
+		"rad"
+	].some((o) => e.endsWith(o)) ? {
+		type: "angular",
+		value: l(e)
+	} : null;
+}
+var v = new Set([
+	"closest-corner",
+	"closest-side",
+	"farthest-corner",
+	"farthest-side"
+]), w = new Set([
+	"center",
+	"left",
+	"top",
+	"right",
+	"bottom"
+]);
+function d$1(e) {
+	return v.has(e);
+}
+function h(e) {
+	return w.has(e);
+}
+function R(e) {
+	let o = Array(2).fill("");
+	for (let t = 0; t < 2; t++) e[t] ? o[t] = e[t] : o[t] = "center";
+	return o;
+}
+function K(e) {
+	if (!/(repeating-)?radial-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
+	let [, o, t] = e.match(/(repeating-)?radial-gradient\((.+)\)/), n = {
+		shape: "ellipse",
+		repeating: !!o,
+		size: [{
+			type: "keyword",
+			value: "farthest-corner"
+		}],
+		position: {
+			x: {
+				type: "keyword",
+				value: "center"
+			},
+			y: {
+				type: "keyword",
+				value: "center"
+			}
+		},
+		stops: []
+	}, i = c$1(t);
+	if (S(i[0])) return {
+		...n,
+		stops: g(i)
+	};
+	let r = i[0].split("at").map((f) => f.trim()), p = ((r[0] || "").match(/(circle|ellipse)/) || [])[1], a = (r[0] || "").match(/(-?\d+\.?\d*(vw|vh|px|em|rem|%|rad|grad|turn|deg)?|closest-corner|closest-side|farthest-corner|farthest-side)/g) || [], s = R((r[1] || "").split(" "));
+	return p ? n.shape = p : a.length === 1 && !d$1(a[0]) ? n.shape = "circle" : n.shape = "ellipse", a.length === 0 && a.push("farthest-corner"), n.size = a.map((f) => d$1(f) ? {
+		type: "keyword",
+		value: f
+	} : {
+		type: "length",
+		value: l(f)
+	}), n.position.x = h(s[0]) ? {
+		type: "keyword",
+		value: s[0]
+	} : {
+		type: "length",
+		value: l(s[0])
+	}, n.position.y = h(s[1]) ? {
+		type: "keyword",
+		value: s[1]
+	} : {
+		type: "length",
+		value: l(s[1])
+	}, (p || a.length > 0 || r[1]) && i.shift(), {
+		...n,
+		stops: g(i)
+	};
+}
+function S(e) {
+	return /(circle|ellipse|at)/.test(e) ? !1 : /^(rgba?|hwb|hsla?|lab|lch|oklab|color|#|[a-zA-Z]+)/.test(e);
+}
+var C = new Set([
+	"from",
+	"in",
+	"at"
+]);
+function j(e) {
+	if (!/(repeating-)?conic-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
+	let [, o, t] = e.match(/(repeating-)?conic-gradient\((.+)\)/), n = {
+		angle: "0deg",
+		repeating: !!o,
+		position: "center",
+		stops: []
+	}, i = c$1(t).map((s) => s.trim()), r = c$1(i[0], /\s+/), p = "", a = 0;
+	for (let s = 0, f = r.length; s < f; s++) C.has(r[s]) && (s > 0 && Object.assign(n, y(p, r, a, s)), p = r[s], a = s + 1);
+	return p && (Object.assign(n, y(p, r, a, r.length)), i.shift()), {
+		...n,
+		stops: g(i)
+	};
+}
+function y(e, o, t, n) {
+	switch (e) {
+		case "from": return { angle: o.slice(t, n).join(" ") };
+		case "at": return { position: o.slice(t, n).join(" ") };
+		case "in": {
+			let [i, ...r] = o.slice(t, n);
+			return { color: {
+				space: i,
+				method: r.length > 0 ? r.join(" ") : void 0
+			} };
+		}
+	}
+}
+//#endregion
+//#region node_modules/@thi.ng/color/api.js
+var ParsedColor = class {
+	constructor(mode, value) {
+		this.mode = mode;
+		this.value = value;
+	}
+	deref() {
+		return this.value;
+	}
+};
+//#endregion
+//#region node_modules/@thi.ng/memoize/memoizej.js
+function memoizeJ(fn, cache = Object.create(null)) {
+	return (...args) => {
+		const key = JSON.stringify(args);
+		if (key !== void 0) return key in cache ? cache[key] : cache[key] = fn.apply(null, args);
+		return fn.apply(null, args);
+	};
+}
+//#endregion
+//#region node_modules/@thi.ng/memoize/memoizeo.js
+function memoizeO(fn, cache = Object.create(null)) {
+	return (...xs) => {
+		const key = xs.join("-");
+		return key in cache ? cache[key] : cache[key] = fn(...xs);
+	};
+}
+//#endregion
+//#region node_modules/@thi.ng/strings/repeat.js
+var repeat = memoizeO((ch, n) => ch.repeat(n));
+//#endregion
+//#region node_modules/@thi.ng/strings/pad-left.js
+var padLeft = memoizeO((n, ch = " ") => {
+	const buf = repeat(String(ch), n);
+	return (x, len) => {
+		if (x == null) return buf;
+		x = x.toString();
+		len = len !== void 0 ? len : x.length;
+		return len < n ? buf.substring(len) + x : x;
+	};
+});
+var Z2 = padLeft(2, "0");
+var Z3 = padLeft(3, "0");
+var Z4 = padLeft(4, "0");
+//#endregion
+//#region node_modules/@thi.ng/strings/float.js
+var float = memoizeJ((prec, special = false) => special ? (x) => __nanOrInf(x) || x.toFixed(prec) : (x) => x.toFixed(prec));
+var floatFixedWidth = memoizeJ((width, prec = 3) => {
+	const l = width - prec - 1;
+	const pl = Math.pow(10, l);
+	const pln = -Math.pow(10, l - 1);
+	const pr = Math.pow(10, -(prec - 1));
+	const pad = padLeft(width);
+	return (x) => {
+		const ax = Math.abs(x);
+		return pad(__nanOrInf(x) || (x === 0 ? "0" : ax < pr || ax >= pl ? __exp(x, width) : x.toFixed(prec - (x < pln ? 1 : 0))));
+	};
+});
+var __exp = (x, w) => x.toExponential(Math.max(w - 4 - (Math.log(Math.abs(x)) / Math.LN10 >= 10 ? 2 : 1) - (x < 0 ? 1 : 0), 0));
+var __nanOrInf = (x) => isNaN(x) ? "NaN" : x === Infinity ? "+∞" : x === -Infinity ? "-∞" : void 0;
+//#endregion
+//#region node_modules/@thi.ng/strings/percent.js
+var percent = (prec = 0) => (x) => (x * 100).toFixed(prec) + "%";
+//#endregion
+//#region node_modules/@thi.ng/color/api/constants.js
+var BLACK = Object.freeze([
+	0,
+	0,
+	0,
+	1
+]);
+var WHITE = Object.freeze([
+	1,
+	1,
+	1,
+	1
+]);
+var RED = Object.freeze([
+	1,
+	0,
+	0,
+	1
+]);
+var GREEN = Object.freeze([
+	0,
+	1,
+	0,
+	1
+]);
+var BLUE = Object.freeze([
+	0,
+	0,
+	1,
+	1
+]);
+var CYAN = Object.freeze([
+	0,
+	1,
+	1,
+	1
+]);
+var MAGENTA = Object.freeze([
+	1,
+	0,
+	1,
+	1
+]);
+var YELLOW = Object.freeze([
+	1,
+	1,
+	0,
+	1
+]);
+var RGB_LUMINANCE_REC709 = [
+	.2126,
+	.7152,
+	.0722
+];
+var FF = float(3);
+var PC = percent(3);
+var INV8BIT = 1 / 255;
+var EPS$1 = 1 / 256;
+//#endregion
+//#region node_modules/@thi.ng/color/api/names.js
+var CSS_NAMES = {
+	aliceblue: "f0f8ff",
+	antiquewhite: "faebd7",
+	aqua: "0ff",
+	aquamarine: "7fffd4",
+	azure: "f0ffff",
+	beige: "f5f5dc",
+	bisque: "ffe4c4",
+	black: "000",
+	blanchedalmond: "ffebcd",
+	blue: "00f",
+	blueviolet: "8a2be2",
+	brown: "a52a2a",
+	burlywood: "deb887",
+	cadetblue: "5f9ea0",
+	chartreuse: "7fff00",
+	chocolate: "d2691e",
+	coral: "ff7f50",
+	cornflowerblue: "6495ed",
+	cornsilk: "fff8dc",
+	crimson: "dc143c",
+	cyan: "0ff",
+	darkblue: "00008b",
+	darkcyan: "008b8b",
+	darkgoldenrod: "b8860b",
+	darkgray: "a9a9a9",
+	darkgreen: "006400",
+	darkgrey: "a9a9a9",
+	darkkhaki: "bdb76b",
+	darkmagenta: "8b008b",
+	darkolivegreen: "556b2f",
+	darkorange: "ff8c00",
+	darkorchid: "9932cc",
+	darkred: "8b0000",
+	darksalmon: "e9967a",
+	darkseagreen: "8fbc8f",
+	darkslateblue: "483d8b",
+	darkslategray: "2f4f4f",
+	darkslategrey: "2f4f4f",
+	darkturquoise: "00ced1",
+	darkviolet: "9400d3",
+	deeppink: "ff1493",
+	deepskyblue: "00bfff",
+	dimgray: "696969",
+	dimgrey: "696969",
+	dodgerblue: "1e90ff",
+	firebrick: "b22222",
+	floralwhite: "fffaf0",
+	forestgreen: "228b22",
+	fuchsia: "f0f",
+	gainsboro: "dcdcdc",
+	ghostwhite: "f8f8ff",
+	gold: "ffd700",
+	goldenrod: "daa520",
+	gray: "808080",
+	grey: "808080",
+	green: "008000",
+	greenyellow: "adff2f",
+	honeydew: "f0fff0",
+	hotpink: "ff69b4",
+	indianred: "cd5c5c",
+	indigo: "4b0082",
+	ivory: "fffff0",
+	khaki: "f0e68c",
+	lavender: "e6e6fa",
+	lavenderblush: "fff0f5",
+	lawngreen: "7cfc00",
+	lemonchiffon: "fffacd",
+	lightblue: "add8e6",
+	lightcoral: "f08080",
+	lightcyan: "e0ffff",
+	lightgoldenrodyellow: "fafad2",
+	lightgray: "d3d3d3",
+	lightgreen: "90ee90",
+	lightgrey: "d3d3d3",
+	lightpink: "ffb6c1",
+	lightsalmon: "ffa07a",
+	lightseagreen: "20b2aa",
+	lightskyblue: "87cefa",
+	lightslategray: "789",
+	lightslategrey: "789",
+	lightsteelblue: "b0c4de",
+	lightyellow: "ffffe0",
+	lime: "0f0",
+	limegreen: "32cd32",
+	linen: "faf0e6",
+	magenta: "f0f",
+	maroon: "800000",
+	mediumaquamarine: "66cdaa",
+	mediumblue: "0000cd",
+	mediumorchid: "ba55d3",
+	mediumpurple: "9370db",
+	mediumseagreen: "3cb371",
+	mediumslateblue: "7b68ee",
+	mediumspringgreen: "00fa9a",
+	mediumturquoise: "48d1cc",
+	mediumvioletred: "c71585",
+	midnightblue: "191970",
+	mintcream: "f5fffa",
+	mistyrose: "ffe4e1",
+	moccasin: "ffe4b5",
+	navajowhite: "ffdead",
+	navy: "000080",
+	oldlace: "fdf5e6",
+	olive: "808000",
+	olivedrab: "6b8e23",
+	orange: "ffa500",
+	orangered: "ff4500",
+	orchid: "da70d6",
+	palegoldenrod: "eee8aa",
+	palegreen: "98fb98",
+	paleturquoise: "afeeee",
+	palevioletred: "db7093",
+	papayawhip: "ffefd5",
+	peachpuff: "ffdab9",
+	peru: "cd853f",
+	pink: "ffc0cb",
+	plum: "dda0dd",
+	powderblue: "b0e0e6",
+	purple: "800080",
+	red: "f00",
+	rosybrown: "bc8f8f",
+	royalblue: "4169e1",
+	saddlebrown: "8b4513",
+	salmon: "fa8072",
+	sandybrown: "f4a460",
+	seagreen: "2e8b57",
+	seashell: "fff5ee",
+	sienna: "a0522d",
+	silver: "c0c0c0",
+	skyblue: "87ceeb",
+	slateblue: "6a5acd",
+	slategray: "708090",
+	slategrey: "708090",
+	snow: "fffafa",
+	springgreen: "00ff7f",
+	steelblue: "4682b4",
+	tan: "d2b48c",
+	teal: "008080",
+	thistle: "d8bfd8",
+	tomato: "ff6347",
+	turquoise: "40e0d0",
+	violet: "ee82ee",
+	wheat: "f5deb3",
+	white: "fff",
+	whitesmoke: "f5f5f5",
+	yellow: "ff0",
+	yellowgreen: "9acd32",
+	transparent: "0000",
+	rebeccapurple: "639"
+};
+//#endregion
+//#region node_modules/@thi.ng/color/api/system.js
+var CSS_SYSTEM_COLORS = {
+	canvas: "fff",
+	canvastext: "000",
+	linktext: "001ee4",
+	visitedtext: "4e2386",
+	activetext: "eb3323",
+	buttonface: "ddd",
+	buttontext: "000",
+	buttonborder: "000",
+	field: "fff",
+	fieldtext: "000",
+	highlight: "bbd5fb",
+	highlighttext: "000",
+	mark: "000",
+	marktext: "fff",
+	graytext: "808080"
+};
+//#endregion
+//#region node_modules/@thi.ng/vectors/setc.js
+var setC3 = (out, x, y, z) => {
+	!out && (out = []);
+	out[0] = x;
+	out[1] = y;
+	out[2] = z;
+	return out;
+};
+var setC4 = (out, x, y, z, w) => {
+	!out && (out = []);
+	out[0] = x;
+	out[1] = y;
+	out[2] = z;
+	out[3] = w;
+	return out;
+};
+//#endregion
+//#region node_modules/@thi.ng/errors/deferror.js
+var defError = (prefix, suffix = (msg) => msg !== void 0 ? ": " + msg : "") => class extends Error {
+	origMessage;
+	constructor(msg) {
+		super(prefix(msg) + suffix(msg));
+		this.origMessage = msg !== void 0 ? String(msg) : "";
+	}
+};
+//#endregion
+//#region node_modules/@thi.ng/errors/unsupported.js
+var UnsupportedOperationError = defError(() => "unsupported operation");
+var unsupportedOp = (msg) => {
+	throw new UnsupportedOperationError(msg);
+};
+var UnsupportedFeatureError = defError(() => "unsupported feature");
+//#endregion
+//#region node_modules/@thi.ng/math/interval.js
+var clamp = (x, min, max) => x < min ? min : x > max ? max : x;
+var clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
+//#endregion
+//#region node_modules/@thi.ng/math/api.js
+var PI = Math.PI;
+var TAU = PI * 2;
+var HALF_PI = PI / 2;
+var THIRD_PI = PI / 3;
+var QUARTER_PI = PI / 4;
+var SIXTH_PI = PI / 6;
+var INV_PI = 1 / PI;
+var INV_TAU = 1 / TAU;
+var INV_HALF_PI = 1 / HALF_PI;
+var DEG2RAD = PI / 180;
+var RAD2DEG = 180 / PI;
+var PHI = (1 + Math.sqrt(5)) / 2;
+var SQRT2 = Math.SQRT2;
+var SQRT3 = Math.sqrt(3);
+var SQRT2_2 = SQRT2 / 2;
+var SQRT3_2 = SQRT3 / 2;
+var THIRD = 1 / 3;
+var TWO_THIRD = 2 / 3;
+var SIXTH = 1 / 6;
+var EPS = 1e-6;
+//#endregion
+//#region node_modules/@thi.ng/math/prec.js
+var fract = (x) => x - Math.floor(x);
+//#endregion
+//#region node_modules/@thi.ng/random/arandom.js
+var INV_MAX = 1 / 2 ** 32;
+var ARandom = class {
+	float(norm = 1) {
+		return this.int() * INV_MAX * norm;
+	}
+	probability(p) {
+		return this.float() < p;
+	}
+	norm(norm = 1) {
+		return (this.int() * INV_MAX - .5) * 2 * norm;
+	}
+	normMinMax(min, max) {
+		const x = this.minmax(min, max);
+		return this.float() < .5 ? x : -x;
+	}
+	minmax(min, max) {
+		return this.float() * (max - min) + min;
+	}
+	minmaxInt(min, max) {
+		min |= 0;
+		const range = (max | 0) - min;
+		return range ? min + this.int() % range : min;
+	}
+	minmaxUint(min, max) {
+		min >>>= 0;
+		const range = (max >>> 0) - min;
+		return range ? min + this.int() % range : min;
+	}
+};
+//#endregion
+//#region node_modules/@thi.ng/random/wrapped.js
+var WrappedRandom = class extends ARandom {
+	constructor(rnd) {
+		super();
+		this.rnd = rnd;
+	}
+	float(norm = 1) {
+		return this.rnd() * norm;
+	}
+	norm(norm = 1) {
+		return (this.rnd() - .5) * 2 * norm;
+	}
+	int() {
+		return this.rnd() * 4294967296 >>> 0;
+	}
+};
+//#endregion
+//#region node_modules/@thi.ng/random/system.js
+var SYSTEM = new WrappedRandom(Math.random);
+//#endregion
+//#region node_modules/@thi.ng/color/internal/ensure.js
+var __ensureAlpha = (x, def = 1) => x != void 0 ? clamp01(x) : def;
+var __ensureArgs = (args) => {
+	if (typeof args[0] === "number") switch (args.length) {
+		case 1: return args.push(0, 0, 1), [args];
+		case 2: return args.push(0, 1), [args];
+		case 3: return args.push(1), [args];
+		default: return [args];
+	}
+	return args;
+};
+//#endregion
+//#region node_modules/@thi.ng/color/clamp.js
+var clampH = (out, src, alpha = 1) => setC4(out || src, fract(src[0]), clamp01(src[1]), clamp01(src[2]), __ensureAlpha(src[3], alpha));
+//#endregion
+//#region node_modules/@thi.ng/checks/is-array.js
+var isArray = Array.isArray;
+//#endregion
+//#region node_modules/@thi.ng/checks/is-number.js
+var isNumber = (x) => typeof x === "number";
+//#endregion
+//#region node_modules/@thi.ng/checks/is-string.js
+var isString = (x) => typeof x === "string";
+//#endregion
+//#region node_modules/@thi.ng/errors/illegal-arguments.js
+var IllegalArgumentError = defError(() => "illegal argument(s)");
+var illegalArgs = (msg) => {
+	throw new IllegalArgumentError(msg);
+};
+//#endregion
+//#region node_modules/@thi.ng/errors/assert.js
+var AssertionError = defError(() => "Assertion failed");
+var assert = (typeof process !== "undefined" && process.env !== void 0 ? process.env.NODE_ENV !== "production" || !!process.env.UMBRELLA_ASSERTS : false) ? (test, msg) => {
+	if (typeof test === "function" && !test() || !test) throw new AssertionError(typeof msg === "function" ? msg() : msg);
+} : () => {};
+//#endregion
+//#region node_modules/@thi.ng/binary/rotate.js
+var rotateRight = (x, n) => (x >>> n | x << 32 - n) >>> 0;
+//#endregion
+//#region node_modules/@thi.ng/binary/splat.js
+var interleave4_12_24 = (x) => (x & 3840) * 4352 | (x & 240) * 272 | (x & 15) * 17;
+var interleave4_16_32 = (x) => ((x & 61440) * 69632 | (x & 3840) * 4352 | (x & 240) * 272 | (x & 15) * 17) >>> 0;
+//#endregion
+//#region node_modules/@thi.ng/color/int/int-srgb.js
+var intArgb32Srgb = (out, src) => setC4(out || [], (src >>> 16 & 255) * INV8BIT, (src >>> 8 & 255) * INV8BIT, (src & 255) * INV8BIT, (src >>> 24) * INV8BIT);
+var intAbgr32Srgb = (out, src) => setC4(out || [], (src & 255) * INV8BIT, (src >>> 8 & 255) * INV8BIT, (src >>> 16 & 255) * INV8BIT, (src >>> 24) * INV8BIT);
+//#endregion
+//#region node_modules/@thi.ng/color/css/parse-css.js
+var parseCss = (src) => {
+	src = (isString(src) ? src : src.deref()).toLowerCase();
+	const named = CSS_NAMES[src] || CSS_SYSTEM_COLORS[src];
+	if (named || src[0] === "#") return new ParsedColor("srgb", intArgb32Srgb([], parseHex(named || src)));
+	const parts = src.split(/[(),/ ]+/);
+	const [mode, a, b, c, d] = parts;
+	assert(parts.length === 5 || parts.length === 6, `invalid color: ${src}`);
+	switch (mode) {
+		case "rgb":
+		case "rgba": return new ParsedColor("srgb", [
+			__numOrPercent(a, 1, INV8BIT, true),
+			__numOrPercent(b, 1, INV8BIT, true),
+			__numOrPercent(c, 1, INV8BIT, true),
+			__alpha(d)
+		]);
+		case "hsl":
+		case "hsla": return new ParsedColor("hsl", [
+			__hue(a),
+			__percent(b),
+			__percent(c),
+			__alpha(d)
+		]);
+		case "lab": return new ParsedColor("lab50", [
+			__numOrPercent(a),
+			__numOrPercent(b, 1.25),
+			__numOrPercent(c, 1.25),
+			__alpha(d)
+		]);
+		case "lch": return new ParsedColor(mode, [
+			__numOrPercent(a),
+			__numOrPercent(b, 1.5),
+			__hue(c),
+			__alpha(d)
+		]);
+		case "oklab": return new ParsedColor(mode, [
+			__numOrPercent(a, 1, 1),
+			__numOrPercent(b, .4, 1),
+			__numOrPercent(c, .4, 1),
+			__alpha(d)
+		]);
+		case "oklch": return new ParsedColor(mode, [
+			__numOrPercent(a, 1, 1),
+			__numOrPercent(b, .4, 1),
+			__hue(c),
+			__alpha(d)
+		]);
+		default: unsupportedOp(`color mode: ${mode}`);
+	}
+};
+var HUE_NORMS = {
+	rad: TAU,
+	grad: 400,
+	turn: 1,
+	deg: 360
+};
+var __hue = (x) => {
+	const match = /^(-?[0-9.]+)(deg|rad|grad|turn)?$/.exec(x);
+	assert(!!match, `expected hue, got: ${x}`);
+	return fract(parseFloat(match[1]) / (HUE_NORMS[match[2]] || 360));
+};
+var __alpha = (x) => x ? __numOrPercent(x, 1, 1, true) : 1;
+var __percent = (x, clamp = true) => {
+	assert(/^([0-9.]+)%$/.test(x), `expected percentage, got: ${x}`);
+	const res = parseFloat(x) / 100;
+	return clamp ? clamp01(res) : res;
+};
+var __numOrPercent = (x, scalePerc = 1, scale = .01, clamp = false) => {
+	assert(/^-?[0-9.]+%?$/.test(x), `expected number or percentage, got: ${x}`);
+	const res = parseFloat(x) * (x.endsWith("%") ? .01 * scalePerc : scale);
+	return clamp ? clamp01(res) : res;
+};
+var parseHex = (src) => {
+	const match = /^#?([0-9a-f]{3,8})$/i.exec(src);
+	if (match) {
+		const hex = match[1];
+		const val = parseInt(hex, 16);
+		switch (hex.length) {
+			case 3: return (interleave4_12_24(val) | 4278190080) >>> 0;
+			case 4: return rotateRight(interleave4_16_32(val), 8);
+			case 6: return (val | 4278190080) >>> 0;
+			case 8: return rotateRight(val, 8);
+			default:
+		}
+	}
+	return illegalArgs(`invalid hex color: "${src}"`);
+};
+//#endregion
+//#region node_modules/@thi.ng/vectors/vop.js
+var vop = (dispatch = 1, fallback, ...optimized) => {
+	const impls = [, ,].concat(optimized);
+	const fn = (...args) => {
+		const g = impls[args[dispatch].length] || fallback;
+		return g ? g(...args) : unsupportedOp(`no impl for vec size ${args[dispatch].length}`);
+	};
+	fn.add = (dim, fn2) => impls[dim] = fn2;
+	fn.default = (fn2) => fallback = fn2;
+	fn.impl = (dim) => dim != null ? impls[dim] || fallback : fallback;
+	return fn;
+};
+//#endregion
+//#region node_modules/@thi.ng/vectors/set.js
+var set2 = (o, a) => {
+	!o && (o = []);
+	o[0] = a[0];
+	o[1] = a[1];
+	return o;
+};
+var set3 = (o, a) => {
+	!o && (o = []);
+	o[0] = a[0];
+	o[1] = a[1];
+	o[2] = a[2];
+	return o;
+};
+var set4 = (o, a) => {
+	!o && (o = []);
+	o[0] = a[0];
+	o[1] = a[1];
+	o[2] = a[2];
+	o[3] = a[3];
+	return o;
+};
+var set = vop(1, (o, a) => {
+	!o && (o = []);
+	for (let i = a.length; i-- > 0;) o[i] = a[i];
+	return o;
+}, set2, set3, set4);
+//#endregion
+//#region node_modules/@thi.ng/checks/implements-function.js
+var implementsFunction = (x, fn) => typeof x?.[fn] === "function";
+//#endregion
+//#region node_modules/@thi.ng/checks/is-arraylike.js
+var isArrayLike = (x) => x != null && typeof x !== "function" && x.length !== void 0;
+//#endregion
+//#region node_modules/@thi.ng/strings/vector.js
+var vector = memoizeJ((size, prec = 3, d = ",", pre = "[", post = "]") => {
+	const f = typeof prec === "number" ? float(prec) : prec;
+	switch (size) {
+		case 1: return (v) => `${pre}${f(v[0])}${post}`;
+		case 2: return (v) => `${pre}${f(v[0])}${d}${f(v[1])}${post}`;
+		case 3: return (v) => `${pre}${f(v[0])}${d}${f(v[1])}${d}${f(v[2])}${post}`;
+		case 4: return (v) => `${pre}${f(v[0])}${d}${f(v[1])}${d}${f(v[2])}${d}${f(v[3])}${post}`;
+		default: return (v) => {
+			const res = [];
+			for (let i = 0; i < v.length; i++) res.push(f(v[i]));
+			return `${pre}${res.join(d)}${post}`;
+		};
+	}
+});
+//#endregion
+//#region node_modules/@thi.ng/vectors/buffer.js
+var mapStridedBuffer = (ctor, buf, num, start, cstride, estride) => {
+	const res = [];
+	while (num-- > 0) {
+		res.push(new ctor(buf, start, cstride));
+		start += estride;
+	}
+	return res;
+};
+//#endregion
+//#region node_modules/@thi.ng/vectors/defopvvv.js
+var defOpVVV = (op, dispatch = 1, outA = true) => {
+	const a = outA ? (o, a2, b2, c2) => {
+		!o && (o = a2);
+		for (let i = a2.length; i-- > 0;) o[i] = op(a2[i], b2[i], c2[i]);
+		return o;
+	} : (o, a2, b2, c2) => {
+		!o && (o = c2);
+		for (let i = a2.length; i-- > 0;) o[i] = op(a2[i], b2[i], c2[i]);
+		return o;
+	};
+	const b = outA ? (o, a2, b2, c2) => {
+		!o && (o = a2);
+		o[0] = op(a2[0], b2[0], c2[0]);
+		o[1] = op(a2[1], b2[1], c2[1]);
+		return o;
+	} : (o, a2, b2, c2) => {
+		!o && (o = c2);
+		o[0] = op(a2[0], b2[0], c2[0]);
+		o[1] = op(a2[1], b2[1], c2[1]);
+		return o;
+	};
+	const c = outA ? (o, a2, b2, c2) => {
+		!o && (o = a2);
+		o[0] = op(a2[0], b2[0], c2[0]);
+		o[1] = op(a2[1], b2[1], c2[1]);
+		o[2] = op(a2[2], b2[2], c2[2]);
+		return o;
+	} : (o, a2, b2, c2) => {
+		!o && (o = c2);
+		o[0] = op(a2[0], b2[0], c2[0]);
+		o[1] = op(a2[1], b2[1], c2[1]);
+		o[2] = op(a2[2], b2[2], c2[2]);
+		return o;
+	};
+	const d = outA ? (o, a2, b2, c2) => {
+		!o && (o = a2);
+		o[0] = op(a2[0], b2[0], c2[0]);
+		o[1] = op(a2[1], b2[1], c2[1]);
+		o[2] = op(a2[2], b2[2], c2[2]);
+		o[3] = op(a2[3], b2[3], c2[3]);
+		return o;
+	} : (o, a2, b2, c2) => {
+		!o && (o = c2);
+		o[0] = op(a2[0], b2[0], c2[0]);
+		o[1] = op(a2[1], b2[1], c2[1]);
+		o[2] = op(a2[2], b2[2], c2[2]);
+		o[3] = op(a2[3], b2[3], c2[3]);
+		return o;
+	};
+	return [
+		vop(dispatch, a, b, c, d),
+		b,
+		c,
+		d
+	];
+};
+//#endregion
+//#region node_modules/@thi.ng/vectors/clamp.js
+var [a, b, c, d] = defOpVVV(clamp);
+var clamp4 = d;
+//#endregion
+//#region node_modules/@thi.ng/vectors/accessors.js
+var declareIndex = (proto, id, idx, strided = true, defNumeric = true) => {
+	const get = idx > 0 ? strided ? function() {
+		return this.buf[this.offset + idx * this.stride];
+	} : function() {
+		return this.buf[this.offset + idx];
+	} : function() {
+		return this.buf[this.offset];
+	};
+	const set = idx > 0 ? strided ? function(n) {
+		this.buf[this.offset + idx * this.stride] = n;
+	} : function(n) {
+		this.buf[this.offset + idx] = n;
+	} : function(n) {
+		this.buf[this.offset] = n;
+	};
+	defNumeric && Object.defineProperty(proto, idx, {
+		get,
+		set,
+		enumerable: true
+	});
+	Object.defineProperty(proto, id, {
+		get,
+		set,
+		enumerable: true
+	});
+};
+var declareIndices = (proto, props, strided, defNumeric) => props.forEach((id, i) => declareIndex(proto, id, i, strided, defNumeric));
+//#endregion
+//#region node_modules/@thi.ng/math/eqdelta.js
+var abs = Math.abs;
+var eqDelta$1 = (a, b, eps = EPS) => abs(a - b) <= eps;
+//#endregion
+//#region node_modules/@thi.ng/vectors/eqdelta.js
+var eqDelta2 = (a, b, eps = EPS) => {
+	return a.length === b.length && eqDelta$1(a[0], b[0], eps) && eqDelta$1(a[1], b[1], eps);
+};
+var eqDelta3 = (a, b, eps = EPS) => {
+	return a.length === b.length && eqDelta$1(a[0], b[0], eps) && eqDelta$1(a[1], b[1], eps) && eqDelta$1(a[2], b[2], eps);
+};
+var eqDelta4 = (a, b, eps = EPS) => {
+	return a.length === b.length && eqDelta$1(a[0], b[0], eps) && eqDelta$1(a[1], b[1], eps) && eqDelta$1(a[2], b[2], eps) && eqDelta$1(a[3], b[3], eps);
+};
+var eqDelta = vop(0, (v1, v2, eps = EPS) => {
+	if (implementsFunction(v1, "eqDelta")) return v1.eqDelta(v2, eps);
+	if (implementsFunction(v2, "eqDelta")) return v2.eqDelta(v1, eps);
+	return eqDeltaS(v1, v2, v1.length, eps);
+}, eqDelta2, eqDelta3, eqDelta4);
+var eqDeltaS = (a, b, n, eps = EPS, ia = 0, ib = 0, sa = 1, sb = 1) => {
+	for (; n > 0; n--, ia += sa, ib += sb) if (!eqDelta$1(a[ia], b[ib], eps)) return false;
+	return true;
+};
+//#endregion
+//#region node_modules/@thi.ng/vectors/iterator.js
+function* stridedValues(buf, num, start, stride) {
+	while (num-- > 0) {
+		yield buf[start];
+		start += stride;
+	}
+}
+//#endregion
+//#region node_modules/@thi.ng/vectors/rand-minmax.js
+var randMinMax = vop(1, (o, a, b, rnd = SYSTEM) => {
+	!o && (o = a);
+	for (let i = a.length; i-- > 0;) o[i] = rnd.minmax(a[i], b[i]);
+	return o;
+});
+//#endregion
+//#region node_modules/@thi.ng/color/convert.js
+var CONVERSIONS = {};
+var defConversions = (mode, spec) => {
+	for (const id in spec) {
+		const val = spec[id];
+		if (isArray(val)) {
+			const [a, b, c, d] = val;
+			spec[id] = val.length === 2 ? (out, src) => b(out, a(out, src)) : val.length === 3 ? (out, src) => c(out, b(out, a(out, src))) : (out, src) => d(out, c(out, b(out, a(out, src))));
+		}
+	}
+	CONVERSIONS[mode] = {
+		...CONVERSIONS[mode],
+		...spec
+	};
+};
+var convert = (res, src, destMode, srcMode) => {
+	const spec = CONVERSIONS[destMode];
+	assert(!!spec, `no conversions available for ${destMode}`);
+	let $convert = spec[srcMode];
+	return $convert ? $convert(res, src) : CONVERSIONS.rgb[srcMode] ? spec.rgb(res, CONVERSIONS.rgb[srcMode]([], src)) : unsupportedOp(`can't convert: ${srcMode} -> ${destMode}`);
+};
+//#endregion
+//#region node_modules/@thi.ng/color/defcolor.js
+var defColor = (spec) => {
+	const channels = spec.channels || {};
+	const order = spec.order;
+	const numChannels = order.length;
+	order.reduce((acc, id) => {
+		acc[id] = {
+			range: [0, 1],
+			...channels[id]
+		};
+		return acc;
+	}, channels);
+	const min = Object.freeze(order.map((id) => channels[id].range[0]));
+	const max = Object.freeze(order.map((id) => channels[id].range[1]));
+	const minR = set4([], min);
+	const maxR = set4([], max);
+	minR[numChannels - 1] = 1;
+	const hueChanID = order.findIndex((id) => !!channels[id].hue);
+	const $Color = class {
+		constructor(buf, offset = 0, stride = 1) {
+			this.offset = offset;
+			this.stride = stride;
+			this.buf = buf || [
+				0,
+				0,
+				0,
+				0
+			];
+			this.offset = offset;
+			this.stride = stride;
+		}
+		buf;
+		get mode() {
+			return spec.mode;
+		}
+		get length() {
+			return numChannels;
+		}
+		get range() {
+			return [min, max];
+		}
+		get [Symbol.toStringTag]() {
+			return spec.mode;
+		}
+		get xyz() {
+			return [
+				this[0],
+				this[1],
+				this[2]
+			];
+		}
+		[Symbol.iterator]() {
+			return stridedValues(this.buf, this.length, this.offset, this.stride);
+		}
+		copy() {
+			return new $Color(this.deref());
+		}
+		copyView() {
+			return new $Color(this.buf, this.offset, this.stride);
+		}
+		empty() {
+			return new $Color();
+		}
+		deref() {
+			return [
+				this[0],
+				this[1],
+				this[2],
+				this[3]
+			];
+		}
+		set(src) {
+			return set4(this, src);
+		}
+		clamp() {
+			hueChanID >= 0 && (this[hueChanID] = fract(this[hueChanID]));
+			clamp4(null, this, min, max);
+			return this;
+		}
+		eqDelta(o, eps = EPS) {
+			return eqDelta4(this, o, eps);
+		}
+		randomize(rnd) {
+			return randMinMax(this, minR, maxR, rnd);
+		}
+		toJSON() {
+			return this.deref();
+		}
+		toString() {
+			return vector(4, 4)(this);
+		}
+	};
+	declareIndices($Color.prototype, order);
+	defConversions(spec.mode, spec.from);
+	defConversions("rgb", { [spec.mode]: spec.toRgb });
+	const fromColor = (src, mode, args) => {
+		const res = new $Color(...args);
+		return mode !== spec.mode ? convert(res, src, spec.mode, mode) : res.set(src);
+	};
+	const factory = (src, ...args) => src == null ? new $Color() : isString(src) ? factory(parseCss(src), ...args) : isArrayLike(src) ? isString(src.mode) ? fromColor(src, src.mode, args) : new $Color(src, ...args) : implementsFunction(src, "deref") ? fromColor(src.deref(), src.mode, args) : isNumber(src) ? args.length && args.every(isNumber) ? new $Color(...__ensureArgs([src, ...args])) : fromColor(intArgb32Srgb([], src), "srgb", args) : illegalArgs(`can't create a ${spec.mode} color from: ${src}`);
+	factory.class = $Color;
+	factory.range = [min, max];
+	factory.random = (rnd, buf, idx, stride) => new $Color(buf, idx, stride).randomize(rnd);
+	factory.mapBuffer = (buf, num = buf.length / numChannels | 0, start = 0, cstride = 1, estride = numChannels) => mapStridedBuffer($Color, buf, num, start, cstride, estride);
+	return factory;
+};
+//#endregion
+//#region node_modules/@thi.ng/vectors/dot.js
+var dot2 = (a, b) => a[0] * b[0] + a[1] * b[1];
+var dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+var dot4 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2] + a[3] * b[3];
+var dot = vop(0, (a, b) => {
+	let sum = 0;
+	for (let i = a.length; i-- > 0;) sum += a[i] * b[i];
+	return sum;
+}, dot2, dot3, dot4);
+//#endregion
+//#region node_modules/@thi.ng/color/luminance-rgb.js
+var luminanceRgb = (rgb, weights = RGB_LUMINANCE_REC709) => dot3(rgb, weights);
+//#endregion
+//#region node_modules/@thi.ng/color/rgb/hue-rgb.js
+var hueRgb = (out, hue, alpha = 1) => {
+	hue = fract(hue) * 6;
+	return setC4(out || [], clamp01(Math.abs(hue - 3) - 1), clamp01(2 - Math.abs(hue - 2)), clamp01(2 - Math.abs(hue - 4)), alpha);
+};
+//#endregion
+//#region node_modules/@thi.ng/color/hcy/hcy-rgb.js
+var hcyRgb = (out, src) => {
+	const h = src[0];
+	let c = src[1];
+	const y = src[2];
+	const rgb = hueRgb(out || src, h, __ensureAlpha(src[3]));
+	const lum = luminanceRgb(rgb);
+	if (y < lum) c *= y / lum;
+	else if (lum < 1) c *= (1 - y) / (1 - lum);
+	return setC3(rgb, clamp01((rgb[0] - lum) * c + y), clamp01((rgb[1] - lum) * c + y), clamp01((rgb[2] - lum) * c + y));
+};
+//#endregion
+//#region node_modules/@thi.ng/color/hsi/hsi-rgb.js
+var hsiRgb = (out, src) => {
+	out = clampH(out || src, src);
+	const s = out[1];
+	const i = out[2];
+	if (s < 1e-6) return setC3(out, i, i, i);
+	const h = out[0] * 6 % 6;
+	const m = i * (1 - s);
+	const z = 1 - Math.abs(h % 2 - 1);
+	let c = 3 * i * s / (1 + z);
+	const x = c * z + m;
+	c += m;
+	switch (h | 0) {
+		case 0: return setC3(out, c, x, m);
+		case 1: return setC3(out, x, c, m);
+		case 2: return setC3(out, m, c, x);
+		case 3: return setC3(out, m, x, c);
+		case 4: return setC3(out, x, m, c);
+		case 5: return setC3(out, c, m, x);
+		default: return setC3(out, m, m, m);
+	}
+};
+//#endregion
+//#region node_modules/@thi.ng/color/hsl/hsl-rgb.js
+var hslRgb = (out, src) => {
+	const s = clamp01(src[1]);
+	const l = clamp01(src[2]);
+	out = hueRgb(out || src, src[0], __ensureAlpha(src[3]));
+	const c = (1 - Math.abs(2 * l - 1)) * s;
+	return setC3(out, (out[0] - .5) * c + l, (out[1] - .5) * c + l, (out[2] - .5) * c + l);
+};
+//#endregion
+//#region node_modules/@thi.ng/color/hsv/hsv-rgb.js
+var hsvRgb = (out, src) => {
+	out = clampH(out || src, src);
+	const s = out[1];
+	const v = out[2];
+	hueRgb(out, src[0], out[3]);
+	return setC3(out, ((out[0] - 1) * s + 1) * v, ((out[1] - 1) * s + 1) * v, ((out[2] - 1) * s + 1) * v);
+};
+//#endregion
+//#region node_modules/@thi.ng/color/linear.js
+var linearSrgb = (x) => x <= .0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - .055;
+var srgbLinear = (x) => x <= .04045 ? x / 12.92 : Math.pow((x + .055) / 1.055, 2.4);
+//#endregion
+//#region node_modules/@thi.ng/color/srgb/srgb-rgb.js
+var srgbRgb = (out, src) => setC4(out || src, srgbLinear(src[0]), srgbLinear(src[1]), srgbLinear(src[2]), __ensureAlpha(src[3]));
+//#endregion
+//#region node_modules/@thi.ng/color/rgb/rgb-srgb.js
+var rgbSrgb = (out, src) => setC4(out || src, linearSrgb(src[0]), linearSrgb(src[1]), linearSrgb(src[2]), __ensureAlpha(src[3]));
+var GAMMA = 1 / 2.2;
+//#endregion
+//#region node_modules/@thi.ng/color/srgb/srgb.js
+var srgb = defColor({
+	mode: "srgb",
+	order: [
+		"r",
+		"g",
+		"b",
+		"alpha"
+	],
+	from: {
+		abgr32: (out, src) => intAbgr32Srgb(out, src[0]),
+		argb32: (out, src) => intArgb32Srgb(out, src[0]),
+		hcy: hcyRgb,
+		hsi: hsiRgb,
+		hsl: hslRgb,
+		hsv: hsvRgb,
+		rgb: rgbSrgb
+	},
+	toRgb: srgbRgb
+});
+//#endregion
+//#region lib/components/color-pickers/gradient-editor.jsx
+var getGradientResult = (input, type) => {
+	if (!input || !type) return "";
+	if (typeof input === "string" || !input?.stops) return "";
+	let output = "";
+	const { repeating } = input;
+	if (repeating) output += "repeating-";
+	output += `${type}-gradient(`;
+	if (type === "linear") {
+		const { orientation } = input;
+		if (orientation?.type === "angular") output += `${orientation.value.value}${orientation.value.unit}, `;
+		else if (orientation?.type === "directional") output += `to ${orientation.value}, `;
+	}
+	if (type === "radial") {
+		const { shape, position } = input;
+		output += `${shape ?? "circle"} at ${position?.x?.value ?? "center"} ${position?.y?.value ?? "center"}, `;
+	}
+	if (type === "conic") {
+		const { angle, position } = input;
+		output += `from ${angle ?? "0deg"} at ${position ?? "center"}, `;
+	}
+	output += input.stops.map((stop) => {
+		return `${stop.color} ${stop.offset?.value ?? ""}${stop.offset?.unit ?? ""}`.trim();
+	}).join(", ");
+	output += ")";
+	return output;
+};
+var gradientTypes = [
+	{
+		label: __("Linear"),
+		value: "linear",
+		icon: jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-linear-to-br es:from-current" })
+	},
+	{
+		label: __("Radial"),
+		value: "radial",
+		icon: jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-radial es:from-current/75 es:to-current/10" })
+	},
+	{
+		label: __("Conic"),
+		value: "conic",
+		icon: jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-conic es:from-current" })
+	}
+];
+var linearDirections = [
+	{
+		label: __("Right"),
+		value: "right",
+		iconClass: "es:bg-linear-to-r",
+		valueDegrees: 90
+	},
+	{
+		label: __("Left"),
+		value: "left",
+		iconClass: "es:bg-linear-to-l",
+		valueDegrees: 180
+	},
+	{
+		label: __("Top"),
+		value: "top",
+		iconClass: "es:bg-linear-to-t",
+		valueDegrees: 270
+	},
+	{
+		label: __("Bottom"),
+		value: "bottom",
+		iconClass: "es:bg-linear-to-b",
+		valueDegrees: 90
+	},
+	{
+		label: __("Top-right"),
+		value: "top right",
+		iconClass: "es:bg-linear-to-tr",
+		valueDegrees: 45
+	},
+	{
+		label: __("Top-left"),
+		value: "top left",
+		iconClass: "es:bg-linear-to-tl",
+		valueDegrees: 315
+	},
+	{
+		label: __("Bottom-right"),
+		value: "bottom right",
+		iconClass: "es:bg-linear-to-br",
+		valueDegrees: 135
+	},
+	{
+		label: __("Bottom-left"),
+		value: "bottom left",
+		iconClass: "es:bg-linear-to-bl",
+		valueDegrees: 225
+	}
+];
+/**
+* A simple gradient editor.
+* Allows editing linear, radial, and conic gradients.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {string} props.value - The gradient definition.
+* @param {Function} props.onChange - Function to run when the gradient changes.
+* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+*
+* @returns {JSX.Element} The GradientEditor component.
+*
+* @example
+* <GradientEditor
+* 	value='linear-gradient(90deg, #000000 0%, #ffffff 100%)'
+* 	onChange={setGradient}
+* />
+*/
+var GradientEditor = (props) => {
+	const { value, onChange, hidden } = props;
+	const gradientData = useMemo(() => {
+		if (value?.startsWith("radial-gradient") || value?.startsWith("repeating-radial-gradient")) return K(value ?? "");
+		if (value?.startsWith("conic-gradient") || value?.startsWith("repeating-conic-gradient")) return j(value ?? "");
+		return P(value ?? "");
+	}, [value]);
+	const gradientType = useMemo(() => {
+		if (typeof value === "string" && value?.startsWith("radial-gradient") || value?.startsWith("repeating-radial-gradient")) return "radial";
+		if (typeof value === "string" && value?.startsWith("conic-gradient") || value?.startsWith("repeating-conic-gradient")) return "conic";
+		return "linear";
+	}, [value]);
+	const setGradientData = (data) => {
+		onChange(getGradientResult(data, gradientType));
+	};
+	const outputGradient = useMemo(() => getGradientResult(gradientData, gradientType), [gradientData, gradientType]);
+	const [squarePreview, setSquarePreview] = useState(false);
+	if (hidden) return null;
+	return jsxs("div", {
+		className: "es:w-full es:space-y-2.5",
+		children: [
+			jsx(ContainerGroup, { children: jsxs(Container, { children: [jsx("button", {
+				className: clsx("es:shadow-sm, es:mx-auto es:block es:h-40 es:rounded-lg es:border es:border-secondary-300 es:transition-[width] es:duration-300 es:ease-spring-snappy", "es:mb-2", squarePreview ? "es:w-40" : "es:w-full"),
+				style: { backgroundImage: outputGradient },
+				onClick: () => setSquarePreview((prev) => !prev),
+				"aria-label": __("Toggle preview size", "eightshift-ui-components")
+			}), jsx(Slider, {
+				className: "es:mb-5",
+				"aria-label": __("Stop positions", "eightshift-ui-components"),
+				min: 0,
+				max: 100,
+				step: 1,
+				value: gradientData?.stops?.map(({ offset }, i) => {
+					if (!offset) return i * 100 / (gradientData.stops.length - 1);
+					return parseInt(offset?.value);
+				}),
+				onChange: (value) => {
+					setGradientData({
+						...gradientData,
+						stops: gradientData.stops.map((stop, i) => {
+							return {
+								...stop,
+								offset: {
+									value: value[i],
+									unit: "%"
+								}
+							};
+						})
+					});
+				},
+				thumbContent: (index) => {
+					const colorData = srgb(gradientData.stops[index]?.color);
+					let foregroundColor = "black";
+					if (colorData.alpha >= .5 && isColorDark(colorData.r, colorData.g, colorData.b)) foregroundColor = "white";
+					return jsx("div", {
+						className: "es:pointer-events-none es:absolute es:-bottom-4.5 es:-translate-x-1/3 es:flex es:w-3 es:items-center es:justify-center es:text-center es:text-12 es:leading-none es:py-px es:rounded-sm es:font-semibold es:tabular-nums es:font-mono es:ring es:ring-accent-600",
+						style: {
+							backgroundColor: gradientData.stops[index]?.color,
+							color: foregroundColor
+						},
+						children: index + 1
+					});
+				},
+				noActiveHighlight: true,
+				tooltipContent: (value) => `${Math.round(value)}%`
+			})] }) }),
+			jsxs(ContainerGroup, { children: [
+				jsx(Container, { children: jsx(OptionSelect, {
+					label: __("Type", "eightshift-ui-components"),
+					value: gradientType,
+					onChange: (value) => onChange(getGradientResult({ stops: gradientData.stops }, value)),
+					options: gradientTypes,
+					type: "toggleButtons",
+					inline: true
+				}) }),
+				jsx(Container, {
+					hidden: gradientType !== "linear",
+					children: jsx(NumberPicker, {
+						inline: true,
+						icon: angle,
+						label: __("Angle", "eightshift-ui-components"),
+						min: 0,
+						max: 360,
+						step: 1,
+						value: gradientData?.orientation?.type === "angular" ? gradientData?.orientation?.value?.value : null,
+						onChange: (angle) => {
+							setGradientData({
+								...gradientData,
+								orientation: {
+									type: "angular",
+									value: {
+										value: angle,
+										unit: "deg"
+									}
+								}
+							});
+						},
+						suffix: "°",
+						size: "medium",
+						className: "es:grow",
+						placeholder: linearDirections.find(({ value }) => value === gradientData?.orientation?.value)?.valueDegrees ?? "",
+						children: jsx(Menu, {
+							triggerIcon: sliders,
+							triggerProps: {
+								tooltip: __("Presets", "eightshift-ui-components"),
+								slot: null
+							},
+							keepOpen: true,
+							children: linearDirections.map(({ label, value, iconClass }) => {
+								return jsx(MenuItem, {
+									icon: jsx("div", { className: clsx("es:size-5 es:rounded-sm es:from-secondary-700 es:to-secondary-200", iconClass) }),
+									onClick: () => {
+										setGradientData({
+											...gradientData,
+											orientation: {
+												type: "directional",
+												value
+											}
+										});
+									},
+									children: label
+								}, value);
+							})
+						})
+					})
+				}),
+				jsx(Container, {
+					hidden: gradientType !== "radial",
+					children: jsx(OptionSelect, {
+						label: __("Shape", "eightshift-ui-components"),
+						icon: genericShapesAlt,
+						inline: true,
+						options: [{
+							label: __("Circle", "eightshift-ui-components"),
+							value: "circle"
+						}, {
+							label: __("Ellipse", "eightshift-ui-components"),
+							value: "ellipse"
+						}],
+						value: gradientData.shape,
+						onChange: (value) => {
+							setGradientData({
+								...gradientData,
+								shape: value
+							});
+						}
+					})
+				}),
+				jsx(Container, {
+					hidden: gradientType !== "radial",
+					children: jsx(MatrixAlign, {
+						icon: centerPoint,
+						label: __("Center point", "eightshift-ui-components"),
+						value: `${gradientData?.position?.y?.value ?? "center"} ${gradientData?.position?.x?.value ?? "center"}`,
+						onChange: (position) => {
+							const [x, y] = position.split(" ");
+							setGradientData({
+								...gradientData,
+								position: {
+									x: {
+										type: "keyword",
+										value: x
+									},
+									y: {
+										type: "keyword",
+										value: y
+									}
+								}
+							});
+						}
+					})
+				}),
+				jsx(Container, {
+					hidden: gradientType !== "conic",
+					children: jsx(NumberPicker, {
+						inline: true,
+						icon: angle,
+						label: __("Angle", "eightshift-ui-components"),
+						min: 0,
+						max: 360,
+						step: 1,
+						value: parseInt(gradientData?.angle?.replace("deg", "")),
+						onChange: (value) => {
+							setGradientData({
+								...gradientData,
+								angle: `${value}deg`
+							});
+						},
+						size: "medium",
+						suffix: "°"
+					})
+				}),
+				jsx(Container, {
+					hidden: gradientType !== "conic",
+					children: jsx(MatrixAlign, {
+						icon: centerPoint,
+						label: __("Center point", "eightshift-ui-components"),
+						value: `${gradientData?.position?.y?.value ?? "center"} ${gradientData?.position?.x?.value ?? "center"}`,
+						onChange: (value) => {
+							setGradientData({
+								...gradientData,
+								position: value
+							});
+						}
+					})
+				}),
+				jsx(Container, { children: jsx(Toggle, {
+					checked: gradientData.repeating,
+					onChange: (value) => {
+						setGradientData({
+							...gradientData,
+							repeating: value
+						});
+					},
+					label: __("Repeating", "eightshift-ui-components"),
+					icon: gradientRepeat
+				}) })
+			] }),
+			jsx(BaseControl, {
+				icon: gradientStop,
+				label: __("Gradient stops", "eightshift-ui-components"),
+				inline: true,
+				children: jsx(Button, {
+					icon: add,
+					size: "small",
+					onPress: () => {
+						setGradientData({
+							...gradientData,
+							stops: [...gradientData.stops, { color: "#000000FF" }]
+						});
+					},
+					type: "simple",
+					"aria-label": __("Add stop", "eightshift-ui-components")
+				})
+			}),
+			jsx(ContainerGroup, { children: jsx(DraggableList, {
+				items: gradientData?.stops,
+				onChange: (items) => {
+					setGradientData({
+						...gradientData,
+						stops: items.map(({ color }, i) => ({
+							...gradientData.stops[i] ?? {},
+							color
+						}))
+					});
+				},
+				orientation: "vertical",
+				className: "es:contents",
+				children: (item) => {
+					const { color, updateData, itemIndex } = item;
+					return jsx(DraggableListItem, {
+						label: sprintf(__("Stop %s", "eightshift-ui-components"), itemIndex + 1),
+						subtitle: color,
+						icon: jsx(TriggeredPopover, {
+							triggerButtonIcon: jsx($251c695a52d94a8d$export$cae13e90592f246a, {
+								className: "es:size-5.5 es:rounded-full es:border es:border-white es:ring-1 es:ring-black",
+								color
+							}),
+							triggerButtonProps: {
+								size: "small",
+								type: "ghost",
+								className: "es:p-0!"
+							},
+							className: "es:p-2.5",
+							children: jsx(SolidColorPicker, {
+								value: color,
+								onChange: (color) => {
+									updateData({ color });
+								},
+								allowTransparency: true,
+								outputFormat: "rgba"
+							})
+						}),
+						children: jsx(ButtonGroup, { children: jsx(Button, {
+							onPress: () => {
+								setGradientData({
+									...gradientData,
+									stops: gradientData.stops.filter((_, i) => i !== itemIndex)
+								});
+							},
+							icon: trash,
+							size: "small",
+							"aria-label": __("Delete stop", "eightshift-ui-components"),
+							disabled: gradientData.stops.length <= 2,
+							type: "dangerGhost"
+						}) })
+					});
+				}
+			}) })
+		]
+	});
+};
+//#endregion
+export { GradientEditor as t };