@sanity/color-input 6.0.11 → 6.0.12

package/dist/ColorInput.js

@@ -0,0 +1,967 @@
+import { set, setIfMissing, unset } from "sanity";
+import { Component, PureComponent, startTransition, useOptimistic, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { AddIcon } from "@sanity/icons/Add";
+import { TrashIcon } from "@sanity/icons/Trash";
+import { Box, Button, Card, Flex, Inline, Stack, Text, useTheme } from "@sanity/ui";
+import { styled } from "styled-components";
+import tinycolor from "tinycolor2";
+import throttle from "lodash-es/throttle.js";
+const ColorListWrap = styled(Flex).withConfig({
+	displayName: "ColorListWrap",
+	componentId: "sc-fcjsbz-0"
+})`gap:0.25em;`, ColorBoxContainer = styled.div.withConfig({
+	displayName: "ColorBoxContainer",
+	componentId: "sc-fcjsbz-1"
+})`width:2.1em;height:2.1em;cursor:pointer;position:relative;overflow:hidden;border-radius:3px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center #fff;`, ColorBox$1 = styled.div.withConfig({
+	displayName: "ColorBox",
+	componentId: "sc-fcjsbz-2"
+})`border-radius:inherit;box-shadow:inset 0 0 0 1px var(--card-shadow-outline-color);content:'';position:absolute;inset:0;z-index:1;`, validateColors = (colors) => {
+	let seen = /* @__PURE__ */ new Set();
+	return colors.reduce((cls, c) => {
+		let color = c.hex ? tinycolor(c.hex) : tinycolor(c);
+		if (color.isValid()) {
+			let backgroundColor = color.toRgbString(), key = JSON.stringify({
+				color: c,
+				backgroundColor
+			});
+			seen.has(key) || (seen.add(key), cls.push({
+				key,
+				color: c,
+				backgroundColor
+			}));
+		}
+		return cls;
+	}, []);
+};
+function ColorList(t0) {
+	let $ = c(7), { colors, onChange } = t0;
+	if (!colors) return null;
+	let t1;
+	if ($[0] !== colors || $[1] !== onChange) {
+		let t2;
+		$[3] === onChange ? t2 = $[4] : (t2 = (t3) => {
+			let { key, color, backgroundColor } = t3;
+			return /* @__PURE__ */ jsx(ColorBoxContainer, {
+				onClick: () => {
+					onChange(color);
+				},
+				children: /* @__PURE__ */ jsx(ColorBox$1, { style: { background: backgroundColor } })
+			}, key);
+		}, $[3] = onChange, $[4] = t2), t1 = validateColors(colors).map(t2), $[0] = colors, $[1] = onChange, $[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	return $[5] === t1 ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(ColorListWrap, {
+		wrap: "wrap",
+		children: t1
+	}), $[5] = t1, $[6] = t2), t2;
+}
+/**
+* Renders a checkerboard pattern as a data URL, used as the transparency backdrop.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/checkboard.js | react-color's checkboard helper}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*/
+const checkboardCache = {};
+function render(c1, c2, size, serverCanvas) {
+	if (typeof document > "u" && !serverCanvas) return null;
+	let canvas = serverCanvas ? new serverCanvas() : document.createElement("canvas");
+	canvas.width = size * 2, canvas.height = size * 2;
+	let ctx = canvas.getContext("2d");
+	return ctx ? (ctx.fillStyle = c1, ctx.fillRect(0, 0, canvas.width, canvas.height), ctx.fillStyle = c2, ctx.fillRect(0, 0, size, size), ctx.translate(size, size), ctx.fillRect(0, 0, size, size), canvas.toDataURL()) : null;
+}
+function get(c1, c2, size, serverCanvas) {
+	let key = `${c1}-${c2}-${size}${serverCanvas ? "-server" : ""}`, cached = checkboardCache[key];
+	if (cached) return cached;
+	let checkboard = render(c1, c2, size, serverCanvas);
+	return checkboardCache[key] = checkboard, checkboard;
+}
+const EMPTY_RENDERERS = {};
+function Checkboard(t0) {
+	let $ = c(9), { white: t1, grey: t2, size: t3, renderers: t4, borderRadius, boxShadow } = t0, white = t1 === void 0 ? "transparent" : t1, grey = t2 === void 0 ? "rgba(0,0,0,.08)" : t2, size = t3 === void 0 ? 8 : t3, renderers = t4 === void 0 ? EMPTY_RENDERERS : t4, t5;
+	$[0] !== grey || $[1] !== renderers.canvas || $[2] !== size || $[3] !== white ? (t5 = get(white, grey, size, renderers.canvas), $[0] = grey, $[1] = renderers.canvas, $[2] = size, $[3] = white, $[4] = t5) : t5 = $[4];
+	let background = t5, t6 = background ? `url(${background}) center left` : void 0, t7;
+	return $[5] !== borderRadius || $[6] !== boxShadow || $[7] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { style: {
+		borderRadius,
+		boxShadow,
+		position: "absolute",
+		inset: 0,
+		background: t6
+	} }), $[5] = borderRadius, $[6] = boxShadow, $[7] = t6, $[8] = t7) : t7 = $[8], t7;
+}
+function calculateChange$2(e, hsl, direction, initialA, container) {
+	let containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
+	if (direction === "vertical") {
+		let a;
+		return a = top < 0 ? 0 : top > containerHeight ? 1 : Math.round(top * 100 / containerHeight) / 100, hsl.a === a ? null : {
+			h: hsl.h,
+			s: hsl.s,
+			l: hsl.l,
+			a,
+			source: "rgb"
+		};
+	}
+	let a;
+	return a = left < 0 ? 0 : left > containerWidth ? 1 : Math.round(left * 100 / containerWidth) / 100, initialA === a ? null : {
+		h: hsl.h,
+		s: hsl.s,
+		l: hsl.l,
+		a,
+		source: "rgb"
+	};
+}
+/**
+* Alpha (transparency) slider.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Alpha.js | react-color's Alpha}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round (function-component conversion is a
+* follow-up PR). `reactcss` has been removed in favor of plain inline styles,
+* and the unused custom `pointer` slot dropped.
+*/
+var Alpha = class extends Component {
+	container = null;
+	componentWillUnmount() {
+		this.unbindEventListeners();
+	}
+	setContainerRef = (node) => {
+		this.container = node;
+	};
+	handleChange = (event) => {
+		if (!this.container) return;
+		let change = calculateChange$2(event, this.props.hsl, this.props.direction, this.props.a, this.container);
+		change && typeof this.props.onChange == "function" && this.props.onChange(change);
+	};
+	handleMouseDown = (event) => {
+		this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+	};
+	handleMouseUp = () => {
+		this.unbindEventListeners();
+	};
+	unbindEventListeners = () => {
+		window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+	};
+	render() {
+		let { rgb, direction, radius, shadow, renderers } = this.props, alphaValue = rgb.a ?? 1, gradient = direction === "vertical" ? `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)` : `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`, pointerStyle = direction === "vertical" ? {
+			position: "absolute",
+			left: 0,
+			top: `${alphaValue * 100}%`
+		} : {
+			position: "absolute",
+			left: `${alphaValue * 100}%`
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				inset: 0,
+				borderRadius: radius
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						inset: 0,
+						overflow: "hidden",
+						borderRadius: radius
+					},
+					children: /* @__PURE__ */ jsx(Checkboard, { renderers })
+				}),
+				/* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					inset: 0,
+					background: gradient,
+					boxShadow: shadow,
+					borderRadius: radius
+				} }),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "relative",
+						height: "100%",
+						margin: "0 3px"
+					},
+					ref: this.setContainerRef,
+					onMouseDown: this.handleMouseDown,
+					onTouchMove: this.handleChange,
+					onTouchStart: this.handleChange,
+					children: /* @__PURE__ */ jsx("div", {
+						style: pointerStyle,
+						children: /* @__PURE__ */ jsx("div", { style: {
+							width: "4px",
+							borderRadius: "1px",
+							height: "8px",
+							boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
+							background: "#fff",
+							marginTop: "1px",
+							transform: "translateX(-2px)"
+						} })
+					})
+				})
+			]
+		});
+	}
+};
+/**
+* Color conversion and validation helpers built on `tinycolor2`.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/helpers/color.js | react-color's color helpers}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*/
+const VALIDATION_KEYS = /* @__PURE__ */ new Set([
+	"r",
+	"g",
+	"b",
+	"a",
+	"h",
+	"s",
+	"l",
+	"v"
+]), PERCENT_PATTERN = /^\d+%$/;
+function simpleCheckForValidColor(data) {
+	if (typeof data == "string") return data;
+	let checked = 0, passed = 0;
+	for (let [key, value] of Object.entries(data)) !VALIDATION_KEYS.has(key) || !value || (checked += 1, Number.isNaN(Number(value)) || (passed += 1), (key === "s" || key === "l") && PERCENT_PATTERN.test(String(value)) && (passed += 1));
+	return checked === passed ? data : !1;
+}
+function toState(data, oldHue) {
+	let instance = typeof data == "string" ? tinycolor(data) : "hex" in data ? tinycolor(data.hex) : tinycolor(data), hsl = instance.toHsl(), hsv = instance.toHsv(), rgb = instance.toRgb(), hex = instance.toHex();
+	hsl.s === 0 && (hsl.h = oldHue ?? 0, hsv.h = oldHue ?? 0);
+	let transparent = hex === "000000" && rgb.a === 0, incomingHue = typeof data == "string" ? void 0 : "h" in data ? data.h : void 0, source = typeof data == "string" ? void 0 : data.source;
+	return {
+		hsl,
+		hex: transparent ? "transparent" : `#${hex}`,
+		rgb,
+		hsv,
+		oldHue: incomingHue || oldHue || hsl.h,
+		source: source ?? ""
+	};
+}
+function isValidHex(hex) {
+	if (hex === "transparent") return !0;
+	let lh = +(hex.charAt(0) === "#");
+	return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
+}
+/**
+* `CustomPicker` higher-order component: manages color state and injects the
+* normalized color (`hsl`/`hsv`/`rgb`/`hex`) plus an `onChange` handler into the
+* wrapped picker.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/ColorWrap.js | react-color's ColorWrap}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round (function-component conversion is a
+* follow-up PR). `prop-types` and the unused `lodash` `debounce` of
+* `onChangeComplete` have been removed.
+*/
+const DEFAULT_COLOR$1 = {
+	h: 250,
+	s: .5,
+	l: .2,
+	a: 1
+};
+function CustomPicker(Picker) {
+	class ColorPicker extends PureComponent {
+		static getDerivedStateFromProps(nextProps, state) {
+			return { ...toState(nextProps.color ?? DEFAULT_COLOR$1, state.oldHue) };
+		}
+		constructor(props) {
+			super(props), this.state = { ...toState(props.color ?? DEFAULT_COLOR$1, 0) };
+		}
+		handleChange = (data) => {
+			if (!simpleCheckForValidColor(data)) return;
+			let colors = toState(data, (typeof data == "string" ? void 0 : "h" in data ? data.h : void 0) || this.state.oldHue);
+			this.setState(colors), this.props.onChange?.(colors);
+		};
+		render() {
+			let injected = {
+				hsl: this.state.hsl,
+				hsv: this.state.hsv,
+				rgb: this.state.rgb,
+				hex: this.state.hex,
+				oldHue: this.state.oldHue,
+				source: this.state.source,
+				onChange: this.handleChange
+			};
+			return /* @__PURE__ */ jsx(Picker, {
+				...this.props,
+				...injected
+			});
+		}
+	}
+	return ColorPicker;
+}
+/**
+* Labeled text input with arrow-key stepping and drag-to-change support.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/EditableInput.js | react-color's EditableInput}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round; converting to a function component
+* (with `useId`, `useRef`, etc.) is deferred to a follow-up PR. `reactcss` and
+* `prop-types` have been removed, and deprecated `keyCode` checks replaced with
+* `event.key`.
+*/
+const getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
+let idCounter = 1;
+var EditableInput = class extends Component {
+	inputId;
+	input = null;
+	constructor(props) {
+		super(props);
+		let initialValue = String(props.value ?? "").toUpperCase();
+		this.state = {
+			value: initialValue,
+			blurValue: initialValue
+		}, this.inputId = `rc-editable-input-${idCounter++}`;
+	}
+	componentDidUpdate(prevProps, prevState) {
+		if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
+			let nextValue = String(this.props.value ?? "").toUpperCase(), isFocused = this.input === document.activeElement;
+			this.setState(isFocused ? { blurValue: nextValue } : {
+				value: nextValue,
+				blurValue: this.state.blurValue ? "" : nextValue
+			});
+		}
+	}
+	componentWillUnmount() {
+		this.unbindEventListeners();
+	}
+	setInputRef = (input) => {
+		this.input = input;
+	};
+	getValueObjectWithLabel = (value) => ({ [this.props.label]: String(value) });
+	getArrowOffset = () => this.props.arrowOffset ?? 1;
+	setUpdatedValue = (value, event) => {
+		this.props.onChange?.(this.getValueObjectWithLabel(value), event), this.setState({ value: String(value) });
+	};
+	handleBlur = () => {
+		this.state.blurValue && this.setState({
+			value: this.state.blurValue,
+			blurValue: ""
+		});
+	};
+	handleChange = (event) => {
+		this.setUpdatedValue(event.target.value, event);
+	};
+	handleKeyDown = (event) => {
+		let value = getNumberValue(event.currentTarget.value), isUp = event.key === "ArrowUp", isDown = event.key === "ArrowDown";
+		if (!Number.isNaN(value) && (isUp || isDown)) {
+			let offset = this.getArrowOffset(), updatedValue = isUp ? value + offset : value - offset;
+			this.setUpdatedValue(updatedValue, event);
+		}
+	};
+	handleDrag = (event) => {
+		if (!this.props.dragLabel) return;
+		let { dragMax, value } = this.props, numericValue = typeof value == "number" ? value : Number(value), newValue = Math.round(numericValue + event.movementX);
+		dragMax !== void 0 && newValue >= 0 && newValue <= dragMax && this.props.onChange?.(this.getValueObjectWithLabel(newValue), event);
+	};
+	handleMouseDown = (event) => {
+		this.props.dragLabel && (event.preventDefault(), this.handleDrag(event.nativeEvent), window.addEventListener("mousemove", this.handleDrag), window.addEventListener("mouseup", this.handleMouseUp));
+	};
+	handleMouseUp = () => {
+		this.unbindEventListeners();
+	};
+	unbindEventListeners = () => {
+		window.removeEventListener("mousemove", this.handleDrag), window.removeEventListener("mouseup", this.handleMouseUp);
+	};
+	render() {
+		let style = this.props.style ?? {}, wrapStyle = {
+			position: "relative",
+			...style.wrap
+		}, inputStyle = { ...style.input }, labelStyle = {
+			...style.label,
+			...this.props.dragLabel ? { cursor: "ew-resize" } : null
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			style: wrapStyle,
+			children: [/* @__PURE__ */ jsx("input", {
+				id: this.inputId,
+				style: inputStyle,
+				ref: this.setInputRef,
+				value: this.state.value,
+				onKeyDown: this.handleKeyDown,
+				onChange: this.handleChange,
+				onBlur: this.handleBlur,
+				placeholder: this.props.placeholder,
+				spellCheck: "false"
+			}), this.props.label && !this.props.hideLabel ? /* @__PURE__ */ jsx("label", {
+				htmlFor: this.inputId,
+				style: labelStyle,
+				onMouseDown: this.handleMouseDown,
+				children: this.props.label
+			}) : null]
+		});
+	}
+};
+function calculateChange$1(e, direction, hsl, container) {
+	let containerWidth = container.clientWidth, containerHeight = container.clientHeight, x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
+	if (direction === "vertical") {
+		let h;
+		return h = top < 0 ? 359 : top > containerHeight ? 0 : 360 * (-(top * 100 / containerHeight) + 100) / 100, hsl.h === h ? null : {
+			h,
+			s: hsl.s,
+			l: hsl.l,
+			a: hsl.a ?? 1,
+			source: "hsl"
+		};
+	}
+	let h;
+	return h = left < 0 ? 0 : left > containerWidth ? 359 : 360 * (left * 100 / containerWidth) / 100, hsl.h === h ? null : {
+		h,
+		s: hsl.s,
+		l: hsl.l,
+		a: hsl.a ?? 1,
+		source: "hsl"
+	};
+}
+/**
+* Hue slider.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Hue.js | react-color's Hue}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round (function-component conversion is a
+* follow-up PR). The upstream raw `<style>` tag holding the static hue gradient
+* has been replaced with a `styled-components` element, and `reactcss` removed.
+*/
+const HueGradient = styled.div.withConfig({
+	displayName: "HueGradient",
+	componentId: "sc-kldwsm-0"
+})`background:${({ $direction }) => $direction === "vertical" ? "linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" : "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"};`;
+var Hue = class extends Component {
+	container = null;
+	componentWillUnmount() {
+		this.unbindEventListeners();
+	}
+	setContainerRef = (node) => {
+		this.container = node;
+	};
+	handleChange = (event) => {
+		if (!this.container) return;
+		let change = calculateChange$1(event, this.props.direction, this.props.hsl, this.container);
+		change && typeof this.props.onChange == "function" && this.props.onChange(change);
+	};
+	handleMouseDown = (event) => {
+		this.handleChange(event.nativeEvent), window.addEventListener("mousemove", this.handleChange), window.addEventListener("mouseup", this.handleMouseUp);
+	};
+	handleMouseUp = () => {
+		this.unbindEventListeners();
+	};
+	unbindEventListeners = () => {
+		window.removeEventListener("mousemove", this.handleChange), window.removeEventListener("mouseup", this.handleMouseUp);
+	};
+	render() {
+		let { hsl, direction = "horizontal", radius, shadow } = this.props, pointerStyle = direction === "vertical" ? {
+			position: "absolute",
+			left: "0px",
+			top: `${-(hsl.h * 100 / 360) + 100}%`
+		} : {
+			position: "absolute",
+			left: `${hsl.h * 100 / 360}%`
+		};
+		return /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				inset: 0,
+				borderRadius: radius,
+				boxShadow: shadow
+			},
+			children: /* @__PURE__ */ jsx(HueGradient, {
+				$direction: direction,
+				style: {
+					padding: "0 2px",
+					position: "relative",
+					height: "100%",
+					borderRadius: radius
+				},
+				ref: this.setContainerRef,
+				onMouseDown: this.handleMouseDown,
+				onTouchMove: this.handleChange,
+				onTouchStart: this.handleChange,
+				children: /* @__PURE__ */ jsx("div", {
+					style: pointerStyle,
+					children: /* @__PURE__ */ jsx("div", { style: {
+						marginTop: "1px",
+						width: "4px",
+						borderRadius: "1px",
+						height: "8px",
+						boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
+						background: "#fff",
+						transform: "translateX(-2px)"
+					} })
+				})
+			})
+		});
+	}
+};
+function calculateChange(e, hsl, container) {
+	let { width: containerWidth, height: containerHeight } = container.getBoundingClientRect(), x = "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, y = "touches" in e ? e.touches[0]?.pageY ?? 0 : e.pageY, left = x - (container.getBoundingClientRect().left + window.scrollX), top = y - (container.getBoundingClientRect().top + window.scrollY);
+	left < 0 ? left = 0 : left > containerWidth && (left = containerWidth), top < 0 ? top = 0 : top > containerHeight && (top = containerHeight);
+	let saturation = left / containerWidth, bright = 1 - top / containerHeight;
+	return {
+		h: hsl.h,
+		s: saturation,
+		v: bright,
+		a: hsl.a ?? 1,
+		source: "hsv"
+	};
+}
+/**
+* Saturation / value box.
+*
+* Forked from
+* {@link https://github.com/casesandberg/react-color/blob/v2.19.3/src/components/common/Saturation.js | react-color's Saturation}
+* (MIT, Copyright (c) 2015 Case Sandberg). See the plugin LICENSE.
+*
+* @remarks
+* Kept as a class component for this round (function-component conversion is a
+* follow-up PR). The upstream raw `<style>` tag holding the static white/black
+* gradients has been replaced with `styled-components` elements, `reactcss`
+* removed, and `lodash` swapped for `lodash-es`.
+*/
+const SaturationWhite = styled.div.withConfig({
+	displayName: "SaturationWhite",
+	componentId: "sc-0wl7vo-0"
+})`background:linear-gradient(to right,#fff,rgba(255,255,255,0));`, SaturationBlack = styled.div.withConfig({
+	displayName: "SaturationBlack",
+	componentId: "sc-0wl7vo-1"
+})`background:linear-gradient(to top,#000,rgba(0,0,0,0));`;
+var Saturation = class extends Component {
+	container = null;
+	throttle = throttle((handler, data) => {
+		handler(data);
+	}, 50);
+	componentWillUnmount() {
+		this.throttle.cancel(), this.unbindEventListeners();
+	}
+	setContainerRef = (node) => {
+		this.container = node;
+	};
+	getContainerRenderWindow() {
+		let { container } = this, renderWindow = window;
+		for (; !renderWindow.document.contains(container) && renderWindow.parent !== renderWindow;) renderWindow = renderWindow.parent;
+		return renderWindow;
+	}
+	handleChange = (event) => {
+		!this.container || typeof this.props.onChange != "function" || this.throttle(this.props.onChange, calculateChange(event, this.props.hsl, this.container));
+	};
+	handleMouseDown = (event) => {
+		this.handleChange(event.nativeEvent);
+		let renderWindow = this.getContainerRenderWindow();
+		renderWindow.addEventListener("mousemove", this.handleChange), renderWindow.addEventListener("mouseup", this.handleMouseUp);
+	};
+	handleMouseUp = () => {
+		this.unbindEventListeners();
+	};
+	unbindEventListeners = () => {
+		let renderWindow = this.getContainerRenderWindow();
+		renderWindow.removeEventListener("mousemove", this.handleChange), renderWindow.removeEventListener("mouseup", this.handleMouseUp);
+	};
+	render() {
+		let { hsl, hsv, radius, shadow } = this.props, pointerStyle = {
+			position: "absolute",
+			top: `${-(hsv.v * 100) + 100}%`,
+			left: `${hsv.s * 100}%`,
+			cursor: "default"
+		};
+		return /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				inset: 0,
+				background: `hsl(${hsl.h},100%, 50%)`,
+				borderRadius: radius
+			},
+			ref: this.setContainerRef,
+			onMouseDown: this.handleMouseDown,
+			onTouchMove: this.handleChange,
+			onTouchStart: this.handleChange,
+			children: /* @__PURE__ */ jsxs(SaturationWhite, {
+				style: {
+					position: "absolute",
+					inset: 0,
+					borderRadius: radius
+				},
+				children: [/* @__PURE__ */ jsx(SaturationBlack, { style: {
+					position: "absolute",
+					inset: 0,
+					boxShadow: shadow,
+					borderRadius: radius
+				} }), /* @__PURE__ */ jsx("div", {
+					style: pointerStyle,
+					children: /* @__PURE__ */ jsx("div", { style: {
+						width: "4px",
+						height: "4px",
+						boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)",
+						borderRadius: "50%",
+						cursor: "pointer",
+						transform: "translate(-2px, -2px)"
+					} })
+				})]
+			})
+		});
+	}
+};
+const ColorPickerFields = (t0) => {
+	let $ = c(44), { onChange, rgb, hsl, hex, disableAlpha } = t0, { sanity } = useTheme(), t1 = `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`, t2 = sanity.fonts.text.sizes[0]?.fontSize, t3;
+	$[0] !== sanity.color.input.default.enabled.bg || $[1] !== sanity.color.input.default.enabled.fg || $[2] !== t1 || $[3] !== t2 ? (t3 = {
+		width: "80%",
+		padding: "4px 10% 3px",
+		border: "none",
+		boxShadow: t1,
+		color: sanity.color.input.default.enabled.fg,
+		backgroundColor: sanity.color.input.default.enabled.bg,
+		fontSize: t2,
+		textAlign: "center"
+	}, $[0] = sanity.color.input.default.enabled.bg, $[1] = sanity.color.input.default.enabled.fg, $[2] = t1, $[3] = t2, $[4] = t3) : t3 = $[4];
+	let t4 = sanity.fonts.label.sizes[0]?.fontSize, t5;
+	$[5] !== sanity.color.base.fg || $[6] !== t4 ? (t5 = {
+		display: "block",
+		textAlign: "center",
+		fontSize: t4,
+		color: sanity.color.base.fg,
+		paddingTop: "3px",
+		paddingBottom: "4px",
+		textTransform: "capitalize"
+	}, $[5] = sanity.color.base.fg, $[6] = t4, $[7] = t5) : t5 = $[7];
+	let t6;
+	$[8] !== t3 || $[9] !== t5 ? (t6 = {
+		input: t3,
+		label: t5
+	}, $[8] = t3, $[9] = t5, $[10] = t6) : t6 = $[10];
+	let inputStyles = t6, t7;
+	$[11] !== hsl || $[12] !== onChange || $[13] !== rgb ? (t7 = (data) => {
+		if ("hex" in data && data.hex && isValidHex(data.hex)) onChange({
+			hex: data.hex,
+			source: "hex"
+		});
+		else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b)) onChange({
+			r: Number(data.r) || rgb.r,
+			g: Number(data.g) || rgb.g,
+			b: Number(data.b) || rgb.b,
+			a: rgb.a,
+			source: "rgb"
+		});
+		else if (hsl && "a" in data && data.a) {
+			let alpha = Number(data.a);
+			alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
+				h: hsl.h,
+				s: hsl.s,
+				l: hsl.l,
+				a: alpha,
+				source: "hsl"
+			});
+		}
+	}, $[11] = hsl, $[12] = onChange, $[13] = rgb, $[14] = t7) : t7 = $[14];
+	let handleChange = t7, t8;
+	$[15] === hex ? t8 = $[16] : (t8 = hex?.replace("#", ""), $[15] = hex, $[16] = t8);
+	let t9;
+	$[17] !== handleChange || $[18] !== inputStyles || $[19] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, {
+		flex: 2,
+		marginRight: 1,
+		children: /* @__PURE__ */ jsx(EditableInput, {
+			style: inputStyles,
+			label: "hex",
+			value: t8,
+			onChange: handleChange
+		})
+	}), $[17] = handleChange, $[18] = inputStyles, $[19] = t8, $[20] = t9) : t9 = $[20];
+	let t10 = rgb?.r, t11;
+	$[21] !== handleChange || $[22] !== inputStyles || $[23] !== t10 ? (t11 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		marginRight: 1,
+		children: /* @__PURE__ */ jsx(EditableInput, {
+			style: inputStyles,
+			label: "r",
+			value: t10,
+			onChange: handleChange,
+			dragLabel: !0,
+			dragMax: 255
+		})
+	}), $[21] = handleChange, $[22] = inputStyles, $[23] = t10, $[24] = t11) : t11 = $[24];
+	let t12 = rgb?.g, t13;
+	$[25] !== handleChange || $[26] !== inputStyles || $[27] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		marginRight: 1,
+		children: /* @__PURE__ */ jsx(EditableInput, {
+			style: inputStyles,
+			label: "g",
+			value: t12,
+			onChange: handleChange,
+			dragLabel: !0,
+			dragMax: 255
+		})
+	}), $[25] = handleChange, $[26] = inputStyles, $[27] = t12, $[28] = t13) : t13 = $[28];
+	let t14 = rgb?.b, t15;
+	$[29] !== handleChange || $[30] !== inputStyles || $[31] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		marginRight: 1,
+		children: /* @__PURE__ */ jsx(EditableInput, {
+			style: inputStyles,
+			label: "b",
+			value: t14,
+			onChange: handleChange,
+			dragLabel: !0,
+			dragMax: 255
+		})
+	}), $[29] = handleChange, $[30] = inputStyles, $[31] = t14, $[32] = t15) : t15 = $[32];
+	let t16;
+	$[33] !== disableAlpha || $[34] !== handleChange || $[35] !== inputStyles || $[36] !== rgb?.a ? (t16 = !disableAlpha && /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		children: /* @__PURE__ */ jsx(EditableInput, {
+			style: inputStyles,
+			label: "a",
+			value: Math.round((rgb?.a ?? 1) * 100),
+			onChange: handleChange,
+			dragLabel: !0,
+			dragMax: 100
+		})
+	}), $[33] = disableAlpha, $[34] = handleChange, $[35] = inputStyles, $[36] = rgb?.a, $[37] = t16) : t16 = $[37];
+	let t17;
+	return $[38] !== t11 || $[39] !== t13 || $[40] !== t15 || $[41] !== t16 || $[42] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Flex, { children: [
+		t9,
+		t11,
+		t13,
+		t15,
+		t16
+	] }), $[38] = t11, $[39] = t13, $[40] = t15, $[41] = t16, $[42] = t9, $[43] = t17) : t17 = $[43], t17;
+}, ColorBox = styled(Box).withConfig({
+	displayName: "ColorBox",
+	componentId: "sc-pfhngk-0"
+})`position:absolute;top:0;left:0;width:100%;height:100%;`, ReadOnlyContainer = styled(Flex).withConfig({
+	displayName: "ReadOnlyContainer",
+	componentId: "sc-pfhngk-1"
+})`margin-top:6rem;background-color:var(--card-bg-color);position:relative;width:100%;`, ColorPicker = CustomPicker((props) => {
+	let $ = c(46), { width, color: t0, onChange, onUnset, disableAlpha, colorList, readOnly } = props, { rgb, hex, hsv, hsl } = t0;
+	if (!hsl || !hsv) return null;
+	let t1;
+	$[0] === width ? t1 = $[1] : (t1 = { width }, $[0] = width, $[1] = t1);
+	let t2;
+	$[2] !== disableAlpha || $[3] !== hsl || $[4] !== hsv || $[5] !== onChange || $[6] !== readOnly || $[7] !== rgb ? (t2 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Card, {
+			overflow: "hidden",
+			style: {
+				position: "relative",
+				height: "5em"
+			},
+			children: /* @__PURE__ */ jsx(Saturation, {
+				onChange,
+				hsl,
+				hsv
+			})
+		}),
+		/* @__PURE__ */ jsx(Card, {
+			shadow: 1,
+			radius: 3,
+			overflow: "hidden",
+			style: {
+				position: "relative",
+				height: "10px"
+			},
+			children: /* @__PURE__ */ jsx(Hue, {
+				hsl,
+				onChange: !readOnly && onChange
+			})
+		}),
+		!disableAlpha && /* @__PURE__ */ jsx(Card, {
+			shadow: 1,
+			radius: 3,
+			overflow: "hidden",
+			style: {
+				position: "relative",
+				height: "10px",
+				background: "#fff"
+			},
+			children: /* @__PURE__ */ jsx(Alpha, {
+				rgb,
+				hsl,
+				onChange
+			})
+		})
+	] }), $[2] = disableAlpha, $[3] = hsl, $[4] = hsv, $[5] = onChange, $[6] = readOnly, $[7] = rgb, $[8] = t2) : t2 = $[8];
+	let t3, t4;
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
+		position: "relative",
+		minWidth: "4em",
+		background: "#fff"
+	}, t4 = /* @__PURE__ */ jsx(Checkboard, {
+		size: 8,
+		white: "transparent",
+		grey: "rgba(0,0,0,.08)"
+	}), $[9] = t3, $[10] = t4) : (t3 = $[9], t4 = $[10]);
+	let t5 = `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`, t6;
+	$[11] === t5 ? t6 = $[12] : (t6 = /* @__PURE__ */ jsx(ColorBox, { style: { backgroundColor: t5 } }), $[11] = t5, $[12] = t6);
+	let t7;
+	$[13] !== hex || $[14] !== hsl?.h || $[15] !== hsl?.l || $[16] !== hsl?.s || $[17] !== readOnly || $[18] !== rgb?.b || $[19] !== rgb?.g || $[20] !== rgb?.r ? (t7 = readOnly && /* @__PURE__ */ jsx(ReadOnlyContainer, {
+		padding: 2,
+		paddingBottom: 1,
+		sizing: "border",
+		justify: "space-between",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 3,
+			marginTop: 1,
+			children: [/* @__PURE__ */ jsx(Text, {
+				size: 3,
+				weight: "bold",
+				children: hex
+			}), /* @__PURE__ */ jsxs(Inline, {
+				gap: 3,
+				children: [/* @__PURE__ */ jsxs(Text, {
+					size: 1,
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "RGB: " }),
+						rgb?.r,
+						" ",
+						rgb?.g,
+						" ",
+						rgb?.b
+					]
+				}), /* @__PURE__ */ jsxs(Text, {
+					size: 1,
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "HSL: " }),
+						" ",
+						Math.round(hsl?.h ?? 0),
+						" ",
+						Math.round((hsl?.s ?? 0) * 100),
+						"% ",
+						Math.round((hsl?.l ?? 0) * 100),
+						"%"
+					]
+				})]
+			})]
+		})
+	}), $[13] = hex, $[14] = hsl?.h, $[15] = hsl?.l, $[16] = hsl?.s, $[17] = readOnly, $[18] = rgb?.b, $[19] = rgb?.g, $[20] = rgb?.r, $[21] = t7) : t7 = $[21];
+	let t8;
+	$[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Card, {
+		flex: 1,
+		radius: 2,
+		overflow: "hidden",
+		style: t3,
+		children: [
+			t4,
+			t6,
+			t7
+		]
+	}), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
+	let t9;
+	$[25] !== disableAlpha || $[26] !== hex || $[27] !== hsl || $[28] !== onChange || $[29] !== onUnset || $[30] !== readOnly || $[31] !== rgb ? (t9 = !readOnly && /* @__PURE__ */ jsxs(Flex, {
+		align: "flex-start",
+		marginLeft: 2,
+		children: [/* @__PURE__ */ jsx(Box, {
+			style: { width: 200 },
+			children: /* @__PURE__ */ jsx(ColorPickerFields, {
+				rgb,
+				hsl,
+				hex,
+				onChange,
+				disableAlpha
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			marginLeft: 2,
+			children: /* @__PURE__ */ jsx(Button, {
+				onClick: onUnset,
+				title: "Delete color",
+				icon: TrashIcon,
+				tone: "critical"
+			})
+		})]
+	}), $[25] = disableAlpha, $[26] = hex, $[27] = hsl, $[28] = onChange, $[29] = onUnset, $[30] = readOnly, $[31] = rgb, $[32] = t9) : t9 = $[32];
+	let t10;
+	$[33] !== t8 || $[34] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, { children: [t8, t9] }), $[33] = t8, $[34] = t9, $[35] = t10) : t10 = $[35];
+	let t11;
+	$[36] !== colorList || $[37] !== onChange ? (t11 = colorList && /* @__PURE__ */ jsx(ColorList, {
+		colors: colorList,
+		onChange
+	}), $[36] = colorList, $[37] = onChange, $[38] = t11) : t11 = $[38];
+	let t12;
+	$[39] !== t10 || $[40] !== t11 || $[41] !== t2 ? (t12 = /* @__PURE__ */ jsx(Card, {
+		padding: 1,
+		border: !0,
+		radius: 1,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 2,
+			children: [
+				t2,
+				t10,
+				t11
+			]
+		})
+	}), $[39] = t10, $[40] = t11, $[41] = t2, $[42] = t12) : t12 = $[42];
+	let t13;
+	return $[43] !== t1 || $[44] !== t12 ? (t13 = /* @__PURE__ */ jsx("div", {
+		style: t1,
+		children: t12
+	}), $[43] = t1, $[44] = t12, $[45] = t13) : t13 = $[45], t13;
+}), DEFAULT_COLOR = {
+	hex: "#24a3e3",
+	hsl: {
+		h: 200,
+		s: .7732,
+		l: .5156,
+		a: 1
+	},
+	hsv: {
+		h: 200,
+		s: .8414,
+		v: .8901,
+		a: 1
+	},
+	rgb: {
+		r: 46,
+		g: 163,
+		b: 227,
+		a: 1
+	},
+	source: "hex"
+};
+function ColorInput(props) {
+	let $ = c(10), { onChange, readOnly } = props, _value = props.value, [value, setColorOptimistic] = useOptimistic(_value), type = props.schemaType, focusRef = useRef(null), t0;
+	$[0] !== onChange || $[1] !== type ? (t0 = function(nextColor) {
+		let fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field_0) => {
+			let nextFieldValue = nextColor[field_0.name];
+			return set(field_0.type.jsonType === "object" ? Object.assign({ _type: field_0.type.name }, nextFieldValue) : nextFieldValue, [field_0.name]);
+		});
+		onChange([
+			setIfMissing({ _type: type.name }),
+			set(type.name, ["_type"]),
+			set(nextColor.rgb?.a, ["alpha"]),
+			...fieldPatches
+		]);
+	}, $[0] = onChange, $[1] = type, $[2] = t0) : t0 = $[2];
+	let handleChange = t0, t1;
+	return $[3] !== handleChange || $[4] !== onChange || $[5] !== readOnly || $[6] !== setColorOptimistic || $[7] !== type || $[8] !== value ? (t1 = /* @__PURE__ */ jsx(Fragment, { children: value && value.hex ? /* @__PURE__ */ jsx(ColorPicker, {
+		color: value,
+		onChange: (nextColor_0) => startTransition(() => {
+			setColorOptimistic(nextColor_0), handleChange(nextColor_0);
+		}),
+		readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
+		disableAlpha: !!type.options?.disableAlpha,
+		colorList: type.options?.colorList,
+		onUnset: () => startTransition(() => {
+			setColorOptimistic(void 0), onChange(unset());
+		})
+	}) : /* @__PURE__ */ jsx(Button, {
+		icon: AddIcon,
+		mode: "ghost",
+		text: "Create color",
+		ref: focusRef,
+		disabled: !!readOnly,
+		onClick: () => startTransition(() => {
+			setColorOptimistic(DEFAULT_COLOR), handleChange(DEFAULT_COLOR);
+		})
+	}) }), $[3] = handleChange, $[4] = onChange, $[5] = readOnly, $[6] = setColorOptimistic, $[7] = type, $[8] = value, $[9] = t1) : t1 = $[9], t1;
+}
+export { ColorInput as default };
+
+//# sourceMappingURL=ColorInput.js.map