@cube-dev/ui-kit 0.200.1 → 0.202.0

package/dist/components/fields/ColorPicker/ColorPicker.js

@@ -1,14 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { Text as _Text } from "../../content/Text.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ItemButton as _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
+import { TRIGGER_TOOLTIP_WARNING } from "../../form/legacy-tooltip.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { formatColor, parseColor } from "../color/color.js";
 import { ColorPanel } from "../color/ColorPanel.js";
@@ -17,7 +19,7 @@ import { ColorSwatch } from "../ColorSwatch/ColorSwatch.js";
 import { ColorInput } from "../ColorInput/ColorInput.js";
 import { ColorSwatchGroup } from "../ColorSwatchGroup/ColorSwatchGroup.js";
 import { c } from "react/compiler-runtime";
-import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/fields/ColorPicker/ColorPicker.tsx
@@ -26,11 +28,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * a short screen, and would otherwise spill outside the popover's own border.
 */
 const POPOVER_STYLES = { overflow: "auto" };
-/**
-* The rule separating the palette from the editor. `Divider` is not used: it
-* places itself on named grid lines meant for menu layouts, which this panel
-* does not define, so it lands in the wrong row and spawns a stray column.
-*/
+/** The rule separating the palette from the editor. */
 const PALETTE_STYLES = {
 	border: "top",
 	padding: "1x top",
@@ -58,7 +56,7 @@ const ColorPickerWrapper = tasty({
 * typed: a toolbar, a chart legend, a cell in a dense table.
 */
 const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
-	const $ = c(98);
+	const $ = c(89);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -69,156 +67,152 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 		$[0] = t0;
 	} else t0 = $[0];
 	const props = useFieldProps(allProps, t0);
-	const { qa, id, value: value_0, defaultValue, onChange: onChange_0, format: t1, defaultSpace: t2, isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, targetRef, placement: t3, children, placeholder: t4, size, type: t5, theme: t6, triggerTooltip, swatches, swatchColumns, triggerStyles, swatchStyles, isDisabled, isReadOnly, isLoading, isInvalid, isValid, autoFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy } = props;
+	const { qa, id, value: value_0, defaultValue, onChange: onChange_0, format: t1, defaultSpace: t2, isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, targetRef, placement: t3, children, placeholder: t4, size, type: t5, theme: t6, tooltip, triggerTooltip, swatches, swatchColumns, triggerStyles, swatchStyles, isDisabled, isReadOnly, isLoading, isInvalid, isValid, autoFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy } = props;
 	const format = t1 === void 0 ? "hex" : t1;
 	const defaultSpace = t2 === void 0 ? "hst" : t2;
 	const placement = t3 === void 0 ? "bottom start" : t3;
 	const placeholder = t4 === void 0 ? "Pick a color" : t4;
 	const type = t5 === void 0 ? "outline" : t5;
 	const theme = t6 === void 0 ? "default" : t6;
-	let t7;
-	if ($[1] !== props) {
-		t7 = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
-		$[1] = props;
-		$[2] = t7;
-	} else t7 = $[2];
-	const styles = t7;
+	const { styles, field } = splitFieldLayout(props);
+	useWarn(triggerTooltip !== void 0, TRIGGER_TOOLTIP_WARNING);
 	const isEditingDisabled = isDisabled || isLoading;
-	let t8;
-	if ($[3] !== defaultValue || $[4] !== value_0) {
-		t8 = () => parseColor((value_0 ?? defaultValue ?? "").toString());
-		$[3] = defaultValue;
-		$[4] = value_0;
-		$[5] = t8;
-	} else t8 = $[5];
-	const [color, setColor] = useState(t8);
+	let t7;
+	if ($[1] !== defaultValue || $[2] !== value_0) {
+		t7 = () => parseColor((value_0 ?? defaultValue ?? "").toString());
+		$[1] = defaultValue;
+		$[2] = value_0;
+		$[3] = t7;
+	} else t7 = $[3];
+	const [color, setColor] = useState(t7);
 	const [space, setSpace] = useState(defaultSpace);
 	const [isOpen, setOpen] = useState(defaultOpen ?? false);
 	const emitted = useRef(value_0);
-	let t10;
+	let t8;
 	let t9;
-	if ($[6] !== value_0) {
-		t9 = () => {
+	if ($[4] !== value_0) {
+		t8 = () => {
 			if (value_0 === void 0 || value_0 === emitted.current) return;
 			emitted.current = value_0;
 			setColor(parseColor((value_0 ?? "").toString()));
 		};
-		t10 = [value_0];
-		$[6] = value_0;
-		$[7] = t10;
-		$[8] = t9;
+		t9 = [value_0];
+		$[4] = value_0;
+		$[5] = t8;
+		$[6] = t9;
 	} else {
-		t10 = $[7];
-		t9 = $[8];
+		t8 = $[5];
+		t9 = $[6];
 	}
-	useEffect(t9, t10);
-	let t11;
-	if ($[9] !== format || $[10] !== onChange_0) {
-		t11 = (next) => {
+	useEffect(t8, t9);
+	let t10;
+	if ($[7] !== format || $[8] !== onChange_0) {
+		t10 = (next) => {
 			const text = formatColor(next, format);
 			emitted.current = text;
 			setColor(next);
 			onChange_0?.(text);
 		};
-		$[9] = format;
-		$[10] = onChange_0;
-		$[11] = t11;
-	} else t11 = $[11];
-	const handleColorChange = useEvent(t11);
+		$[7] = format;
+		$[8] = onChange_0;
+		$[9] = t10;
+	} else t10 = $[9];
+	const handleColorChange = useEvent(t10);
+	let t11;
+	if ($[10] !== color || $[11] !== format) {
+		t11 = color ? formatColor(color, format) : null;
+		$[10] = color;
+		$[11] = format;
+		$[12] = t11;
+	} else t11 = $[12];
+	const colorText = t11;
 	let t12;
-	if ($[12] !== color || $[13] !== format) {
-		t12 = color ? formatColor(color, format) : null;
-		$[12] = color;
-		$[13] = format;
-		$[14] = t12;
-	} else t12 = $[14];
-	const colorText = t12;
-	let t13;
-	if ($[15] !== onChange_0) {
-		t13 = (next_0) => {
+	if ($[13] !== onChange_0) {
+		t12 = (next_0) => {
 			emitted.current = next_0;
 			setColor(next_0 ? parseColor(next_0) : null);
 			onChange_0?.(next_0);
 		};
-		$[15] = onChange_0;
-		$[16] = t13;
-	} else t13 = $[16];
-	const handleValueChange = useEvent(t13);
-	let t14;
-	if ($[17] !== onOpenChange) {
-		t14 = (next_1) => {
+		$[13] = onChange_0;
+		$[14] = t12;
+	} else t12 = $[14];
+	const handleValueChange = useEvent(t12);
+	let t13;
+	if ($[15] !== onOpenChange) {
+		t13 = (next_1) => {
 			setOpen(next_1);
 			onOpenChange?.(next_1);
 		};
-		$[17] = onOpenChange;
-		$[18] = t14;
-	} else t14 = $[18];
-	const handleOpenChange = useEvent(t14);
-	let t15;
-	if ($[19] !== children || $[20] !== color || $[21] !== format || $[22] !== placeholder) {
-		t15 = children !== void 0 ? children : color ? formatColor(color, format) : /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
-		$[19] = children;
-		$[20] = color;
-		$[21] = format;
-		$[22] = placeholder;
-		$[23] = t15;
-	} else t15 = $[23];
-	const label = t15;
-	const t16 = controlledOpen ?? isOpen;
-	const t17 = qa || "ColorPickerTrigger";
-	let t18;
-	if ($[24] !== isInvalid || $[25] !== isValid || $[26] !== theme) {
-		t18 = getValidationTheme(theme, {
+		$[15] = onOpenChange;
+		$[16] = t13;
+	} else t13 = $[16];
+	const handleOpenChange = useEvent(t13);
+	let t14;
+	if ($[17] !== children || $[18] !== color || $[19] !== format || $[20] !== placeholder) {
+		t14 = children !== void 0 ? children : color ? formatColor(color, format) : /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
+		$[17] = children;
+		$[18] = color;
+		$[19] = format;
+		$[20] = placeholder;
+		$[21] = t14;
+	} else t14 = $[21];
+	const label = t14;
+	const t15 = controlledOpen ?? isOpen;
+	const t16 = qa || "ColorPickerTrigger";
+	let t17;
+	if ($[22] !== isInvalid || $[23] !== isValid || $[24] !== theme) {
+		t17 = getValidationTheme(theme, {
 			isInvalid,
 			isValid
 		});
-		$[24] = isInvalid;
-		$[25] = isValid;
-		$[26] = theme;
-		$[27] = t18;
-	} else t18 = $[27];
-	let t19;
-	if ($[28] !== color || $[29] !== swatchStyles) {
-		t19 = /* @__PURE__ */ jsx(ColorSwatch, {
+		$[22] = isInvalid;
+		$[23] = isValid;
+		$[24] = theme;
+		$[25] = t17;
+	} else t17 = $[25];
+	let t18;
+	if ($[26] !== color || $[27] !== swatchStyles) {
+		t18 = /* @__PURE__ */ jsx(ColorSwatch, {
 			size: "small",
 			color,
 			styles: swatchStyles
 		});
-		$[28] = color;
-		$[29] = swatchStyles;
-		$[30] = t19;
-	} else t19 = $[30];
-	let t20;
-	if ($[31] !== isInvalid || $[32] !== isValid) {
-		t20 = getValidationIcon({
+		$[26] = color;
+		$[27] = swatchStyles;
+		$[28] = t18;
+	} else t18 = $[28];
+	let t19;
+	if ($[29] !== isInvalid || $[30] !== isValid) {
+		t19 = getValidationIcon({
 			isInvalid,
 			isValid
 		});
-		$[31] = isInvalid;
-		$[32] = isValid;
-		$[33] = t20;
-	} else t20 = $[33];
+		$[29] = isInvalid;
+		$[30] = isValid;
+		$[31] = t19;
+	} else t19 = $[31];
+	const t20 = tooltip ?? triggerTooltip;
 	const t21 = isEditingDisabled || isReadOnly;
 	const t22 = !color;
 	let t23;
-	if ($[34] !== t22) {
+	if ($[32] !== t22) {
 		t23 = { placeholder: t22 };
-		$[34] = t22;
-		$[35] = t23;
-	} else t23 = $[35];
+		$[32] = t22;
+		$[33] = t23;
+	} else t23 = $[33];
 	let t24;
-	if ($[36] !== ariaDescribedBy || $[37] !== ariaLabel || $[38] !== autoFocus || $[39] !== id || $[40] !== label || $[41] !== size || $[42] !== t17 || $[43] !== t18 || $[44] !== t19 || $[45] !== t20 || $[46] !== t21 || $[47] !== t23 || $[48] !== triggerStyles || $[49] !== triggerTooltip || $[50] !== type) {
+	if ($[34] !== ariaDescribedBy || $[35] !== ariaLabel || $[36] !== autoFocus || $[37] !== id || $[38] !== label || $[39] !== size || $[40] !== t16 || $[41] !== t17 || $[42] !== t18 || $[43] !== t19 || $[44] !== t20 || $[45] !== t21 || $[46] !== t23 || $[47] !== triggerStyles || $[48] !== type) {
 		t24 = /* @__PURE__ */ jsx(_ItemButton, {
 			"data-popover-trigger": true,
 			id,
-			qa: t17,
+			qa: t16,
 			"data-input-type": "colorpicker",
 			type,
-			theme: t18,
+			theme: t17,
 			size,
-			icon: t19,
-			rightIcon: t20,
-			tooltip: triggerTooltip,
+			icon: t18,
+			rightIcon: t19,
+			tooltip: t20,
 			isDisabled: t21,
 			autoFocus,
 			"aria-label": ariaLabel,
@@ -227,39 +221,39 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 			styles: triggerStyles,
 			children: label
 		});
-		$[36] = ariaDescribedBy;
-		$[37] = ariaLabel;
-		$[38] = autoFocus;
-		$[39] = id;
-		$[40] = label;
-		$[41] = size;
-		$[42] = t17;
-		$[43] = t18;
-		$[44] = t19;
-		$[45] = t20;
-		$[46] = t21;
-		$[47] = t23;
-		$[48] = triggerStyles;
-		$[49] = triggerTooltip;
-		$[50] = type;
-		$[51] = t24;
-	} else t24 = $[51];
+		$[34] = ariaDescribedBy;
+		$[35] = ariaLabel;
+		$[36] = autoFocus;
+		$[37] = id;
+		$[38] = label;
+		$[39] = size;
+		$[40] = t16;
+		$[41] = t17;
+		$[42] = t18;
+		$[43] = t19;
+		$[44] = t20;
+		$[45] = t21;
+		$[46] = t23;
+		$[47] = triggerStyles;
+		$[48] = type;
+		$[49] = t24;
+	} else t24 = $[49];
 	let t25;
-	if ($[52] !== t) {
+	if ($[50] !== t) {
 		t25 = t("colorPicker.colorPicker", "Color picker");
-		$[52] = t;
-		$[53] = t25;
-	} else t25 = $[53];
+		$[50] = t;
+		$[51] = t25;
+	} else t25 = $[51];
 	const t26 = color ?? FALLBACK_COLOR;
 	const t27 = isEditingDisabled || isReadOnly;
 	let t28;
-	if ($[54] !== t) {
+	if ($[52] !== t) {
 		t28 = t("colorPicker.colorValue", "Color value");
-		$[54] = t;
-		$[55] = t28;
-	} else t28 = $[55];
+		$[52] = t;
+		$[53] = t28;
+	} else t28 = $[53];
 	let t29;
-	if ($[56] !== colorText || $[57] !== format || $[58] !== handleValueChange || $[59] !== isEditingDisabled || $[60] !== isReadOnly || $[61] !== t28) {
+	if ($[54] !== colorText || $[55] !== format || $[56] !== handleValueChange || $[57] !== isEditingDisabled || $[58] !== isReadOnly || $[59] !== t28) {
 		t29 = /* @__PURE__ */ jsx(ColorInput, {
 			isBare: true,
 			"aria-label": t28,
@@ -269,16 +263,16 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 			isReadOnly,
 			onChange: handleValueChange
 		});
-		$[56] = colorText;
-		$[57] = format;
-		$[58] = handleValueChange;
-		$[59] = isEditingDisabled;
-		$[60] = isReadOnly;
-		$[61] = t28;
-		$[62] = t29;
-	} else t29 = $[62];
+		$[54] = colorText;
+		$[55] = format;
+		$[56] = handleValueChange;
+		$[57] = isEditingDisabled;
+		$[58] = isReadOnly;
+		$[59] = t28;
+		$[60] = t29;
+	} else t29 = $[60];
 	let t30;
-	if ($[63] !== colorText || $[64] !== format || $[65] !== handleValueChange || $[66] !== isEditingDisabled || $[67] !== isReadOnly || $[68] !== swatchColumns || $[69] !== swatches || $[70] !== t) {
+	if ($[61] !== colorText || $[62] !== format || $[63] !== handleValueChange || $[64] !== isEditingDisabled || $[65] !== isReadOnly || $[66] !== swatchColumns || $[67] !== swatches || $[68] !== t) {
 		t30 = swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
 			isBare: true,
 			"aria-label": t("colorPicker.palette", "Palette"),
@@ -290,18 +284,18 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 			isDisabled: isEditingDisabled || isReadOnly,
 			onChange: handleValueChange
 		}) : null;
-		$[63] = colorText;
-		$[64] = format;
-		$[65] = handleValueChange;
-		$[66] = isEditingDisabled;
-		$[67] = isReadOnly;
-		$[68] = swatchColumns;
-		$[69] = swatches;
-		$[70] = t;
-		$[71] = t30;
-	} else t30 = $[71];
+		$[61] = colorText;
+		$[62] = format;
+		$[63] = handleValueChange;
+		$[64] = isEditingDisabled;
+		$[65] = isReadOnly;
+		$[66] = swatchColumns;
+		$[67] = swatches;
+		$[68] = t;
+		$[69] = t30;
+	} else t30 = $[69];
 	let t31;
-	if ($[72] !== format || $[73] !== handleColorChange || $[74] !== space || $[75] !== t26 || $[76] !== t27 || $[77] !== t29 || $[78] !== t30) {
+	if ($[70] !== format || $[71] !== handleColorChange || $[72] !== space || $[73] !== t26 || $[74] !== t27 || $[75] !== t29 || $[76] !== t30) {
 		t31 = /* @__PURE__ */ jsx(ColorPopoverContext.Provider, {
 			value: true,
 			children: /* @__PURE__ */ jsx(ColorPanel, {
@@ -315,69 +309,57 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 				onSpaceChange: setSpace
 			})
 		});
-		$[72] = format;
-		$[73] = handleColorChange;
-		$[74] = space;
-		$[75] = t26;
-		$[76] = t27;
-		$[77] = t29;
-		$[78] = t30;
-		$[79] = t31;
-	} else t31 = $[79];
+		$[70] = format;
+		$[71] = handleColorChange;
+		$[72] = space;
+		$[73] = t26;
+		$[74] = t27;
+		$[75] = t29;
+		$[76] = t30;
+		$[77] = t31;
+	} else t31 = $[77];
 	let t32;
-	if ($[80] !== t25 || $[81] !== t31) {
+	if ($[78] !== t25 || $[79] !== t31) {
 		t32 = /* @__PURE__ */ jsx(Dialog, {
 			"aria-label": t25,
 			width: "max-content",
 			styles: POPOVER_STYLES,
 			children: t31
 		});
-		$[80] = t25;
-		$[81] = t31;
-		$[82] = t32;
-	} else t32 = $[82];
+		$[78] = t25;
+		$[79] = t31;
+		$[80] = t32;
+	} else t32 = $[80];
 	let t33;
-	if ($[83] !== handleOpenChange || $[84] !== placement || $[85] !== shouldFlip || $[86] !== t16 || $[87] !== t24 || $[88] !== t32 || $[89] !== targetRef) {
+	if ($[81] !== handleOpenChange || $[82] !== placement || $[83] !== shouldFlip || $[84] !== t15 || $[85] !== t24 || $[86] !== t32 || $[87] !== targetRef) {
 		t33 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			placement,
 			targetRef,
-			isOpen: t16,
+			isOpen: t15,
 			shouldFlip,
 			onOpenChange: handleOpenChange,
 			children: [t24, t32]
 		});
-		$[83] = handleOpenChange;
-		$[84] = placement;
-		$[85] = shouldFlip;
-		$[86] = t16;
-		$[87] = t24;
-		$[88] = t32;
-		$[89] = targetRef;
-		$[90] = t33;
-	} else t33 = $[90];
-	let t34;
-	if ($[91] !== ref || $[92] !== styles || $[93] !== t33) {
-		t34 = /* @__PURE__ */ jsx(ColorPickerWrapper, {
-			ref,
-			styles,
-			children: t33
-		});
-		$[91] = ref;
-		$[92] = styles;
-		$[93] = t33;
-		$[94] = t34;
-	} else t34 = $[94];
-	const pickerField = t34;
-	let t35;
-	if ($[95] !== pickerField || $[96] !== props) {
-		t35 = wrapWithField(pickerField, props);
-		$[95] = pickerField;
-		$[96] = props;
-		$[97] = t35;
-	} else t35 = $[97];
-	return t35;
+		$[81] = handleOpenChange;
+		$[82] = placement;
+		$[83] = shouldFlip;
+		$[84] = t15;
+		$[85] = t24;
+		$[86] = t32;
+		$[87] = targetRef;
+		$[88] = t33;
+	} else t33 = $[88];
+	return wrapWithField(/* @__PURE__ */ jsx(ColorPickerWrapper, {
+		ref,
+		styles,
+		children: t33
+	}), {
+		...props,
+		...field,
+		tooltip: void 0
+	});
 });
 /**
 * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes

package/dist/components/fields/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useI18n","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","value_0","onChange_0","t1","t2","controlledOpen","t3","t4","t5","t6","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","undefined","t7","isEditingDisabled","t8","toString","color","setColor","space","setSpace","setOpen","emitted","t10","t9","current","t11","next","text","handleColorChange","t12","colorText","t13","next_0","handleValueChange","t14","next_1","handleOpenChange","t15","label","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","t29","t30","length","t31","t32","t33","t34","pickerField","t35","cubeInputType","_c","Text","ItemButton"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/**\n * A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n */\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the trigger. */\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from `labelTooltip`. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n  /** Ids of elements that also describe the trigger, beside the field's own description and message. */\n  'aria-describedby'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    targetRef,\n    placement = 'bottom start',\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper ref={ref} styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        placement={placement}\n        targetRef={targetRef}\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          // The trigger is the control, so the field's description and\n          // message describe it.\n          aria-describedby={ariaDescribedBy}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label={t('colorPicker.colorPicker', 'Color picker')}\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  isBare\n                  aria-label={t('colorPicker.colorValue', 'Color value')}\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    isBare\n                    aria-label={t('colorPicker.palette', 'Palette')}\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","names":["BaseProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useWarn","useI18n","FieldBaseProps","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","TRIGGER_TOOLTIP_WARNING","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","tooltip","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","value_0","onChange_0","t1","t2","controlledOpen","t3","t4","t5","t6","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","undefined","field","isEditingDisabled","t7","toString","color","setColor","space","setSpace","setOpen","emitted","t8","t9","current","t10","next","text","handleColorChange","t11","colorText","t12","next_0","handleValueChange","t13","next_1","handleOpenChange","t14","label","t15","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","t29","t30","length","t31","t32","t33","pickerField","cubeInputType","_c","Text","ItemButton"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { TRIGGER_TOOLTIP_WARNING } from '../../form/legacy-tooltip';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/**\n * A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n */\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/** The rule separating the palette from the editor. */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the trigger. */\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /**\n   * Tooltip for the trigger. The info badge next to the field's label is\n   * `labelTooltip`.\n   */\n  tooltip?: CubeItemProps['tooltip'];\n  /** @deprecated Use `tooltip`. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n  /** Ids of elements that also describe the trigger, beside the field's own description and message. */\n  'aria-describedby'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    targetRef,\n    placement = 'bottom start',\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    tooltip,\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const { styles, field } = splitFieldLayout(props);\n\n  useWarn(triggerTooltip !== undefined, TRIGGER_TOOLTIP_WARNING);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper ref={ref} styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        placement={placement}\n        targetRef={targetRef}\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={tooltip ?? triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          // The trigger is the control, so the field's description and\n          // message describe it.\n          aria-describedby={ariaDescribedBy}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label={t('colorPicker.colorPicker', 'Color picker')}\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  isBare\n                  aria-label={t('colorPicker.colorValue', 'Color value')}\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    isBare\n                    aria-label={t('colorPicker.palette', 'Palette')}\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, {\n    ...props,\n    ...field,\n    // The trigger's own. Handed on, it read as the legacy field `tooltip`.\n    tooltip: undefined,\n  });\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

package/dist/components/fields/ColorSwatch/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "../color/color.js";
 import { c } from "react/compiler-runtime";