@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/SColorPicker-BfJD4dt_.js

@@ -1,642 +0,0 @@
-import { n as e } from "./contrastSurfaceTextColor-BDlLSSXC.js";
-import { n as t, o as n, r, t as i } from "./SColorPalette-OCu-tgZ3.js";
-import { a, n as o } from "./colorValue-CSh0chxp.js";
-import { i as s, n as c, r as l, t as u } from "./SButton-n2Zuqh04.js";
-import { s as d } from "./useFloatingOverlay-TxzVisMJ.js";
-import { t as f } from "./SDropdown-aWjZrahp.js";
-import { t as p } from "./SDropdownMenu-2koPU6IG.js";
-import { t as m } from "./SSelect-DM4-PF5I.js";
-import { Fragment as h, computed as g, createBlock as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onMounted as O, openBlock as k, ref as A, shallowRef as j, toDisplayString as M, toRef as N, unref as P, useModel as F, useTemplateRef as I, vModelText as L, watch as R, withCtx as z, withDirectives as B } from "vue";
-import { ESColorSwatchSize as V, SColorSwatch as ee, useUiKitI18n as H } from "@shtabapp/ui-kit-primitives";
-import { useEventListener as U } from "@vueuse/core";
-//#region src/utils/color/colorFormatChannels.ts
-var W = (e) => Math.max(0, Math.min(255, Math.round(e))), te = (e) => {
-	let t = e % 360;
-	return t < 0 ? t + 360 : t;
-}, G = (e) => Math.max(0, Math.min(100, Math.round(e))), ne = (e) => {
-	let t = e.slice(1);
-	if (t.length === 3) {
-		let e = t[0], n = t[1], r = t[2];
-		return !e || !n || !r ? void 0 : `${e}${e}${n}${n}${r}${r}`;
-	}
-	if (t.length === 6 || t.length === 8) return t.slice(0, 6);
-}, K = (e) => {
-	let t = ne(e);
-	if (!t) return;
-	let n = Number.parseInt(t.slice(0, 2), 16), r = Number.parseInt(t.slice(2, 4), 16), i = Number.parseInt(t.slice(4, 6), 16);
-	if (!(Number.isNaN(n) || Number.isNaN(r) || Number.isNaN(i))) return {
-		first: n,
-		second: r,
-		third: i
-	};
-}, q = (e) => {
-	let t = W(e.first), n = W(e.second), r = W(e.third);
-	return `#${t.toString(16).padStart(2, "0").toUpperCase()}${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}`;
-}, J = (e) => {
-	let t = K(e);
-	if (!t) return;
-	let n = t.first / 255, r = t.second / 255, i = t.third / 255, a = Math.max(n, r, i), o = Math.min(n, r, i), s = a - o, c = 0, l = (a + o) / 2;
-	s !== 0 && (c = a === n ? ((r - i) / s + (r < i ? 6 : 0)) * 60 : a === r ? ((i - n) / s + 2) * 60 : ((n - r) / s + 4) * 60);
-	let u = 0;
-	return s !== 0 && (u = l > .5 ? s / (2 - a - o) : s / (a + o)), {
-		first: Math.round(c),
-		second: Math.round(u * 100),
-		third: Math.round(l * 100)
-	};
-}, re = (e) => {
-	let t = te(e.first), n = G(e.second) / 100, r = G(e.third) / 100, i = (e) => {
-		let i = (t + e) / 30;
-		return W((r - n * Math.min(r, 1 - r) * Math.max(-1, Math.min(i % 2 - 1, 1))) * 255);
-	};
-	return q({
-		first: i(0),
-		second: i(8),
-		third: i(4)
-	});
-}, ie = (t) => {
-	let n = t.toUpperCase(), r = n.startsWith("#") ? n.slice(1) : n;
-	if (!/^[0-9A-F]{3}$/.test(r) && !/^[0-9A-F]{6}$/.test(r)) return;
-	let i = `#${r}`;
-	if (e(i)) return q(K(i) ?? {
-		first: 0,
-		second: 0,
-		third: 0
-	});
-}, ae = (e) => e.slice(1).toUpperCase(), oe = (e) => {
-	let t = e.first / 255, n = e.second / 255, r = e.third / 255, i = Math.max(t, n, r), a = i - Math.min(t, n, r), o = 0;
-	a !== 0 && (o = i === t ? (n - r) / a % 6 : i === n ? (r - t) / a + 2 : (t - n) / a + 4, o = Math.round(o * 60), o < 0 && (o += 360));
-	let s = i === 0 ? 0 : a / i;
-	return {
-		hue: o,
-		saturation: s,
-		value: i
-	};
-}, se = (e) => {
-	let t = e.value * e.saturation, n = e.hue / 60, r = t * (1 - Math.abs(n % 2 - 1)), i = e.value - t, a = 0, o = 0, s = 0;
-	return n >= 0 && n < 1 ? (a = t, o = r) : n >= 1 && n < 2 ? (a = r, o = t) : n >= 2 && n < 3 ? (o = t, s = r) : n >= 3 && n < 4 ? (o = r, s = t) : n >= 4 && n < 5 ? (a = r, s = t) : (a = t, s = r), {
-		first: W((a + i) * 255),
-		second: W((o + i) * 255),
-		third: W((s + i) * 255)
-	};
-}, Y = (e) => {
-	let t = K(e);
-	if (t) return oe(t);
-}, X = (e) => q(se(e)), Z = [
-	n.HEX,
-	n.RGB,
-	n.HSL
-], ce = {
-	[n.HEX]: "Hex",
-	[n.RGB]: "RGB",
-	[n.HSL]: "HSL"
-}, le = (e) => {
-	let t = getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-	if (!t) return;
-	let n = Number.parseInt(t[1] ?? "0", 10), r = Number.parseInt(t[2] ?? "0", 10), i = Number.parseInt(t[3] ?? "0", 10);
-	return `#${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}${i.toString(16).padStart(2, "0").toUpperCase()}`;
-}, ue = (t, n) => {
-	if (o(t) && e(t)) return t;
-	if (n) return le(n);
-}, de = (e, t) => t === n.HEX ? ae(e) : t === n.RGB ? K(e) ?? {
-	first: 0,
-	second: 0,
-	third: 0
-} : J(e) ?? {
-	first: 0,
-	second: 0,
-	third: 0
-}, Q = (e) => {
-	let t = Number.parseInt(e, 10);
-	if (!Number.isNaN(t)) return t;
-}, fe = (e, t) => {
-	if (e === n.HEX) return typeof t == "string" ? ie(t) : void 0;
-	if (typeof t == "string") return;
-	if (e === n.RGB) {
-		let e = q({
-			first: Q(String(t.first)) ?? 0,
-			second: Q(String(t.second)) ?? 0,
-			third: Q(String(t.third)) ?? 0
-		});
-		return K(e) ? e : void 0;
-	}
-	let r = re({
-		first: Q(String(t.first)) ?? 0,
-		second: Q(String(t.second)) ?? 0,
-		third: Q(String(t.third)) ?? 0
-	});
-	if (r && J(r)) return r;
-}, pe = 17, me = "#000000", he = (e) => e ?? me, ge = ({ modelValue: e, getEditableHex: t, saturationAreaRef: n, hueSliderRef: r, disabled: i, readonly: a }) => {
-	let o = Y(he(t())) ?? {
-		hue: 0,
-		saturation: 0,
-		value: 0
-	}, s = A(o.hue), c = A(o.saturation), l = A(o.value), u = A(!1), d = A(!1), f = A(!1), p = j(null), m = j(null), h = g(() => X({
-		hue: s.value,
-		saturation: c.value,
-		value: l.value
-	})), _ = g(() => X({
-		hue: s.value,
-		saturation: 1,
-		value: 1
-	})), v = (e) => {
-		s.value = Math.max(0, Math.min(360, e));
-	}, y = (e, t) => {
-		c.value = Math.max(0, Math.min(1, e)), l.value = Math.max(0, Math.min(1, t));
-	}, b = (e) => {
-		let t = Y(he(e));
-		t && (u.value = !0, t.saturation > 0 && (s.value = t.hue), c.value = t.saturation, l.value = t.value, u.value = !1);
-	}, x = () => {
-		let e = t();
-		e && e.toUpperCase() !== h.value.toUpperCase() && b(e);
-	}, S = () => {
-		let n = h.value;
-		t()?.toUpperCase() !== n.toUpperCase() && (u.value = !0, e.value = n, u.value = !1);
-	};
-	R([
-		s,
-		c,
-		l
-	], () => {
-		u.value || S();
-	}), R(e, () => {
-		u.value || x();
-	}), O(() => {
-		T(() => {
-			C(), w(), x();
-		});
-	});
-	let C = () => {
-		p.value = n.value?.getBoundingClientRect() ?? null;
-	}, w = () => {
-		m.value = r.value?.getBoundingClientRect() ?? null;
-	}, E = g(() => {
-		let e = p.value;
-		return e ? { transform: `translate3d(calc(${c.value * e.width}px - 50%), calc(${(1 - l.value) * e.height}px - 50%), 0)` } : {};
-	}), D = g(() => {
-		let e = m.value;
-		return e ? { transform: `translate3d(-50%, calc(${s.value / 360 * e.height}px - 50%), 0)` } : {};
-	}), k = () => !i.value && !a.value, M = (e) => {
-		let t = p.value;
-		if (!t) return;
-		let n = Math.max(0, Math.min(e.clientX - t.left, t.width)), r = Math.max(0, Math.min(e.clientY - t.top, t.height));
-		y(n / t.width, 1 - r / t.height);
-	}, N = (e) => {
-		let t = m.value;
-		t && v(Math.max(0, Math.min(e.clientY - t.top, t.height)) / t.height * 360);
-	}, P = (e) => {
-		k() && (C(), d.value = !0, M(e), e.currentTarget instanceof HTMLElement && e.currentTarget.setPointerCapture(e.pointerId));
-	}, F = (e) => {
-		k() && (w(), f.value = !0, N(e), e.currentTarget instanceof HTMLElement && e.currentTarget.setPointerCapture(e.pointerId));
-	}, I = () => {
-		d.value = !1;
-	}, L = () => {
-		f.value = !1;
-	};
-	return U(n, "pointermove", (e) => {
-		d.value && M(e);
-	}), U(n, "pointerup", I), U(n, "pointercancel", I), U(n, "lostpointercapture", I), U(r, "pointermove", (e) => {
-		f.value && N(e);
-	}), U(r, "pointerup", L), U(r, "pointercancel", L), U(r, "lostpointercapture", L), {
-		hexColor: h,
-		hueBackground: _,
-		saturationPointerStyle: E,
-		huePointerStyle: D,
-		handleSaturationPointerDown: P,
-		handleHuePointerDown: F,
-		syncFromModelValue: x
-	};
-}, _e = (e) => {
-	if (!e) return null;
-	let t = e.$el;
-	if (!(t instanceof HTMLElement)) return null;
-	let n = t.querySelector(".s-ui-color-swatch__fill");
-	return n instanceof HTMLElement ? n : null;
-}, ve = { class: "s-ui-color-area__canvas-row" }, ye = ["aria-label"], be = ["aria-label", "aria-disabled"], xe = /* @__PURE__ */ S({
-	__name: "SColorArea",
-	props: /*@__PURE__*/ C({
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		readonly: {
-			type: Boolean,
-			default: !1
-		}
-	}, {
-		modelValue: { required: !0 },
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(e) {
-		let t = F(e, "modelValue"), { t: n } = H(), r = I("colorResolutionSwatchRef"), i = I("saturationAreaRef"), o = I("hueSliderRef"), s = () => ue(t.value, _e(r.value)), c = g(() => a(t.value)), { hexColor: l, hueBackground: u, saturationPointerStyle: d, huePointerStyle: f, handleSaturationPointerDown: p, handleHuePointerDown: m } = ge({
-			modelValue: t,
-			getEditableHex: s,
-			saturationAreaRef: i,
-			hueSliderRef: o,
-			disabled: N(() => e.disabled),
-			readonly: N(() => e.readonly)
-		});
-		return (t, a) => (k(), v("div", w({ class: ["s-ui-color-area", {
-			"s-ui-color-area--disabled": e.disabled,
-			"s-ui-color-area--readonly": e.readonly
-		}] }, t.$attrs), [x(P(ee), {
-			ref_key: "colorResolutionSwatchRef",
-			ref: r,
-			class: "s-ui-color-area__color-resolution",
-			color: c.value,
-			size: P(V).SIZE_24,
-			tabindex: "-1",
-			"aria-hidden": "true"
-		}, null, 8, ["color", "size"]), y("div", ve, [y("div", {
-			ref_key: "saturationAreaRef",
-			ref: i,
-			class: "s-ui-color-area__canvas",
-			role: "img",
-			"aria-label": P(n)("colorArea.saturationBrightness"),
-			style: D({ "--s-ui-color-area-hue": P(u) }),
-			onPointerdown: a[0] ||= (...e) => P(p) && P(p)(...e)
-		}, [y("div", {
-			class: "s-ui-color-area__canvas-pointer",
-			style: D({
-				...P(d),
-				backgroundColor: P(l)
-			})
-		}, null, 4)], 44, ye), y("div", {
-			ref_key: "hueSliderRef",
-			ref: o,
-			class: "s-ui-color-area__hue",
-			role: "slider",
-			"aria-label": P(n)("colorArea.hue"),
-			"aria-valuemin": "0",
-			"aria-valuemax": "360",
-			"aria-disabled": e.disabled || e.readonly,
-			onPointerdown: a[1] ||= (...e) => P(m) && P(m)(...e)
-		}, [y("div", {
-			class: "s-ui-color-area__hue-pointer",
-			style: D({
-				...P(f),
-				backgroundColor: P(u)
-			})
-		}, null, 4)], 40, be)])], 16));
-	}
-}), Se = { class: "s-ui-color-values__left" }, Ce = { class: "s-ui-color-values__format" }, we = { class: "s-ui-color-values__value-group" }, Te = { class: "s-ui-color-values__inputs" }, Ee = {
-	key: 0,
-	class: "s-ui-color-values__input-wrap"
-}, De = [
-	"disabled",
-	"readonly",
-	"aria-label"
-], Oe = { class: "s-ui-color-values__input-wrap" }, ke = [
-	"disabled",
-	"readonly",
-	"aria-label"
-], Ae = { class: "s-ui-color-values__input-wrap" }, je = [
-	"disabled",
-	"readonly",
-	"aria-label"
-], Me = { class: "s-ui-color-values__input-wrap" }, Ne = [
-	"disabled",
-	"readonly",
-	"aria-label"
-], $ = /* @__PURE__ */ S({
-	__name: "SColorValues",
-	props: /*@__PURE__*/ C({
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		readonly: {
-			type: Boolean,
-			default: !1
-		},
-		formats: { default: () => Z }
-	}, {
-		modelValue: { required: !0 },
-		modelModifiers: {},
-		format: { default: n.HEX },
-		formatModifiers: {}
-	}),
-	emits: /*@__PURE__*/ C(["formatDropdownOpen", "formatDropdownClose"], ["update:modelValue", "update:format"]),
-	setup(e, { emit: t }) {
-		let { t: r } = H(), i = F(e, "modelValue"), o = F(e, "format"), d = t, f = I("previewSwatchRef"), p = A(""), _ = A("0"), b = A("0"), S = A("0"), C = g(() => (e.formats.length > 0 ? e.formats : Z).map((e) => ({
-			value: e,
-			label: ce[e]
-		}))), E = g(() => a(i.value)), D = g(() => ue(i.value, _e(f.value))), j = g(() => o.value === n.RGB ? r("colorValues.redChannel") : r("colorValues.hueChannel")), M = g(() => o.value === n.RGB ? r("colorValues.greenChannel") : r("colorValues.saturationChannel")), N = g(() => o.value === n.RGB ? r("colorValues.blueChannel") : r("colorValues.lightnessChannel")), z = () => {
-			let e = D.value;
-			if (!e) return;
-			let t = de(e, o.value);
-			if (o.value === n.HEX && typeof t == "string") {
-				p.value = t;
-				return;
-			}
-			typeof t == "object" && (_.value = String(t.first), b.value = String(t.second), S.value = String(t.third));
-		};
-		R([
-			i,
-			o,
-			D
-		], () => {
-			z();
-		}), O(() => {
-			T(() => {
-				z();
-			});
-		});
-		let U = () => {
-			if (e.disabled || e.readonly) return;
-			if (o.value === n.HEX) {
-				let e = fe(n.HEX, p.value);
-				e && (i.value = e), z();
-				return;
-			}
-			let t = fe(o.value, {
-				first: Number.parseInt(_.value, 10),
-				second: Number.parseInt(b.value, 10),
-				third: Number.parseInt(S.value, 10)
-			});
-			t && (i.value = t), z();
-		}, W = (e) => {
-			e.key === "Enter" && (e.preventDefault(), U());
-		};
-		return (t, i) => (k(), v("div", w({ class: ["s-ui-color-values", {
-			"s-ui-color-values--disabled": e.disabled,
-			"s-ui-color-values--readonly": e.readonly
-		}] }, t.$attrs), [y("div", Se, [x(P(ee), {
-			ref_key: "previewSwatchRef",
-			ref: f,
-			class: "s-ui-color-values__preview",
-			color: E.value,
-			size: P(V).SIZE_32,
-			disabled: e.disabled,
-			tabindex: "-1",
-			"aria-hidden": "true"
-		}, null, 8, [
-			"color",
-			"size",
-			"disabled"
-		]), y("div", Ce, [x(P(m), {
-			modelValue: o.value,
-			"onUpdate:modelValue": i[0] ||= (e) => o.value = e,
-			class: "s-ui-color-values__format-select",
-			options: C.value,
-			disabled: e.disabled,
-			readonly: e.readonly,
-			bordered: !0,
-			clearable: !1,
-			"close-on-select": !0,
-			"fit-viewport": !1,
-			"aria-label": P(r)("colorValues.format"),
-			onOpen: i[1] ||= (e) => d("formatDropdownOpen"),
-			onClose: i[2] ||= (e) => d("formatDropdownClose")
-		}, null, 8, [
-			"modelValue",
-			"options",
-			"disabled",
-			"readonly",
-			"aria-label"
-		])])]), y("div", we, [
-			x(P(u), {
-				class: "s-ui-color-values__pipette",
-				appearance: P(c).BARE,
-				variant: P(s).NEUTRAL,
-				size: P(l).SMALL,
-				icon: "pipette",
-				"aria-label": P(r)("colorValues.pickColor"),
-				"aria-disabled": "true",
-				disabled: e.disabled,
-				tabindex: "-1"
-			}, null, 8, [
-				"appearance",
-				"variant",
-				"size",
-				"aria-label",
-				"disabled"
-			]),
-			i[9] ||= y("span", {
-				class: "s-ui-color-values__separator",
-				"aria-hidden": "true"
-			}, null, -1),
-			y("div", Te, [o.value === P(n).HEX ? (k(), v("div", Ee, [B(y("input", {
-				"onUpdate:modelValue": i[3] ||= (e) => p.value = e,
-				class: "s-ui-color-values__input s-ui-typography-body-14-regular",
-				type: "text",
-				inputmode: "text",
-				spellcheck: "false",
-				disabled: e.disabled,
-				readonly: e.readonly,
-				"aria-label": P(r)("colorValues.hexValue"),
-				onBlur: U,
-				onKeydown: W
-			}, null, 40, De), [[L, p.value]])])) : (k(), v(h, { key: 1 }, [
-				y("div", Oe, [B(y("input", {
-					"onUpdate:modelValue": i[4] ||= (e) => _.value = e,
-					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
-					type: "text",
-					inputmode: "numeric",
-					spellcheck: "false",
-					disabled: e.disabled,
-					readonly: e.readonly,
-					"aria-label": j.value,
-					onBlur: U,
-					onKeydown: W
-				}, null, 40, ke), [[L, _.value]])]),
-				i[7] ||= y("span", {
-					class: "s-ui-color-values__separator",
-					"aria-hidden": "true"
-				}, null, -1),
-				y("div", Ae, [B(y("input", {
-					"onUpdate:modelValue": i[5] ||= (e) => b.value = e,
-					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
-					type: "text",
-					inputmode: "numeric",
-					spellcheck: "false",
-					disabled: e.disabled,
-					readonly: e.readonly,
-					"aria-label": M.value,
-					onBlur: U,
-					onKeydown: W
-				}, null, 40, je), [[L, b.value]])]),
-				i[8] ||= y("span", {
-					class: "s-ui-color-values__separator",
-					"aria-hidden": "true"
-				}, null, -1),
-				y("div", Me, [B(y("input", {
-					"onUpdate:modelValue": i[6] ||= (e) => S.value = e,
-					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
-					type: "text",
-					inputmode: "numeric",
-					spellcheck: "false",
-					disabled: e.disabled,
-					readonly: e.readonly,
-					"aria-label": N.value,
-					onBlur: U,
-					onKeydown: W
-				}, null, 40, Ne), [[L, S.value]])])
-			], 64))])
-		])], 16));
-	}
-}), Pe = { class: "s-ui-color-picker__section" }, Fe = { class: "s-ui-color-picker__label" }, Ie = { class: "s-ui-color-picker__section" }, Le = { class: "s-ui-color-picker__label" }, Re = { class: "s-ui-color-picker__custom-editor" }, ze = { class: "s-ui-color-picker__custom-actions" }, Be = /* @__PURE__ */ S({
-	__name: "SColorPicker",
-	props: /*@__PURE__*/ C({
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		recommendedColors: {},
-		recentColors: { default: () => [] }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ C([
-		"select",
-		"customEditorOpen",
-		"customEditorClose",
-		"formatDropdownOpen",
-		"formatDropdownClose"
-	], ["update:modelValue"]),
-	setup(e, { emit: a }) {
-		let o = F(e, "modelValue"), m = a, { t: h } = H(), v = A(!1), S = A("#526DE3"), C = A(n.HEX), T = g(() => e.recommendedColors && e.recommendedColors.length > 0 ? e.recommendedColors : r), D = g(() => e.recentColors.length <= 17 ? e.recentColors : e.recentColors.slice(0, 17)), O = () => {
-			if (o.value) {
-				S.value = o.value;
-				return;
-			}
-			S.value = "#526DE3";
-		}, j = (e) => {
-			m("select", e);
-		}, N = () => {
-			o.value = S.value, m("select", S.value), v.value = !1;
-		}, I = () => {
-			v.value = !1;
-		};
-		return R(v, (e, t) => {
-			if (e && !t) {
-				O(), m("customEditorOpen");
-				return;
-			}
-			!e && t && m("customEditorClose");
-		}), (n, r) => (k(), _(P(p), w({ width: 336 }, n.$attrs), {
-			default: z(() => [y("div", { class: E(["s-ui-color-picker", { "s-ui-color-picker--disabled": e.disabled }]) }, [y("section", Pe, [y("span", Fe, M(P(h)("colorPicker.recommendedColors")), 1), x(P(i), {
-				modelValue: o.value,
-				"onUpdate:modelValue": r[0] ||= (e) => o.value = e,
-				class: "s-ui-color-picker__palette",
-				layout: P(t).GRID,
-				colors: T.value,
-				size: P(V).SIZE_32,
-				disabled: e.disabled,
-				onSelect: j
-			}, null, 8, [
-				"modelValue",
-				"layout",
-				"colors",
-				"size",
-				"disabled"
-			])]), y("section", Ie, [y("span", Le, M(P(h)("colorPicker.recentColors")), 1), x(P(i), {
-				modelValue: o.value,
-				"onUpdate:modelValue": r[7] ||= (e) => o.value = e,
-				class: "s-ui-color-picker__palette",
-				layout: P(t).ROW,
-				colors: D.value,
-				size: P(V).SIZE_32,
-				disabled: e.disabled,
-				onSelect: j
-			}, {
-				append: z(() => [x(P(f), {
-					modelValue: v.value,
-					"onUpdate:modelValue": r[6] ||= (e) => v.value = e,
-					placement: P(d).RIGHT_START,
-					offset: 8,
-					shift: !0,
-					flip: !0,
-					disabled: e.disabled,
-					"dismiss-on-click-outside": !0,
-					"dismiss-on-escape": !0
-				}, {
-					trigger: z(({ toggle: t, triggerProps: n }) => [x(P(u), w(n, {
-						class: "s-ui-color-picker__add-button",
-						appearance: P(c).OUTLINED,
-						variant: P(s).NEUTRAL,
-						size: P(l).SMALL,
-						icon: "plus",
-						"aria-label": P(h)("colorPicker.addCustomColor"),
-						disabled: e.disabled,
-						onClick: t
-					}), null, 16, [
-						"appearance",
-						"variant",
-						"size",
-						"aria-label",
-						"disabled",
-						"onClick"
-					])]),
-					content: z(() => [x(P(p), { width: 320 }, {
-						footer: z(() => [y("div", ze, [x(P(u), {
-							class: "s-ui-color-picker__save-button",
-							appearance: P(c).MAJOR,
-							variant: P(s).MAIN,
-							size: P(l).SMALL,
-							disabled: e.disabled,
-							onClick: N
-						}, {
-							default: z(() => [b(M(P(h)("colorPicker.save")), 1)]),
-							_: 1
-						}, 8, [
-							"appearance",
-							"variant",
-							"size",
-							"disabled"
-						]), x(P(u), {
-							class: "s-ui-color-picker__cancel-button",
-							appearance: P(c).MINOR,
-							variant: P(s).NEUTRAL,
-							size: P(l).SMALL,
-							disabled: e.disabled,
-							onClick: I
-						}, {
-							default: z(() => [b(M(P(h)("colorPicker.cancel")), 1)]),
-							_: 1
-						}, 8, [
-							"appearance",
-							"variant",
-							"size",
-							"disabled"
-						])])]),
-						default: z(() => [y("div", Re, [x(xe, {
-							modelValue: S.value,
-							"onUpdate:modelValue": r[1] ||= (e) => S.value = e,
-							disabled: e.disabled
-						}, null, 8, ["modelValue", "disabled"]), x($, {
-							modelValue: S.value,
-							"onUpdate:modelValue": r[2] ||= (e) => S.value = e,
-							format: C.value,
-							"onUpdate:format": r[3] ||= (e) => C.value = e,
-							disabled: e.disabled,
-							onFormatDropdownOpen: r[4] ||= (e) => m("formatDropdownOpen"),
-							onFormatDropdownClose: r[5] ||= (e) => m("formatDropdownClose")
-						}, null, 8, [
-							"modelValue",
-							"format",
-							"disabled"
-						])])]),
-						_: 1
-					})]),
-					_: 1
-				}, 8, [
-					"modelValue",
-					"placement",
-					"disabled"
-				])]),
-				_: 1
-			}, 8, [
-				"modelValue",
-				"layout",
-				"colors",
-				"size",
-				"disabled"
-			])])], 2)]),
-			_: 1
-		}, 16));
-	}
-});
-//#endregion
-export { pe as i, $ as n, xe as r, Be as t };

package/dist/SColorPicker-NqSNxcwH.cjs

@@ -1 +0,0 @@
-const e=require("./contrastSurfaceTextColor-BRjRzXyZ.cjs"),t=require("./SColorPalette-CqIA4Qtp.cjs"),n=require("./colorValue-Dda7fKd3.cjs"),r=require("./SButton-CZW6Y8Vw.cjs"),i=require("./useFloatingOverlay-CwGCMrig.cjs"),a=require("./SDropdown-B_nsm3Jf.cjs"),o=require("./SDropdownMenu-k9SxaFVH.cjs"),s=require("./SSelect-BSbEFqAB.cjs");let c=require("vue"),l=require("@shtabapp/ui-kit-primitives"),u=require("@vueuse/core");var d=e=>Math.max(0,Math.min(255,Math.round(e))),f=e=>{let t=e%360;return t<0?t+360:t},p=e=>Math.max(0,Math.min(100,Math.round(e))),m=e=>{let t=e.slice(1);if(t.length===3){let e=t[0],n=t[1],r=t[2];return!e||!n||!r?void 0:`${e}${e}${n}${n}${r}${r}`}if(t.length===6||t.length===8)return t.slice(0,6)},h=e=>{let t=m(e);if(!t)return;let n=Number.parseInt(t.slice(0,2),16),r=Number.parseInt(t.slice(2,4),16),i=Number.parseInt(t.slice(4,6),16);if(!(Number.isNaN(n)||Number.isNaN(r)||Number.isNaN(i)))return{first:n,second:r,third:i}},g=e=>{let t=d(e.first),n=d(e.second),r=d(e.third);return`#${t.toString(16).padStart(2,`0`).toUpperCase()}${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}`},_=e=>{let t=h(e);if(!t)return;let n=t.first/255,r=t.second/255,i=t.third/255,a=Math.max(n,r,i),o=Math.min(n,r,i),s=a-o,c=0,l=(a+o)/2;s!==0&&(c=a===n?((r-i)/s+(r<i?6:0))*60:a===r?((i-n)/s+2)*60:((n-r)/s+4)*60);let u=0;return s!==0&&(u=l>.5?s/(2-a-o):s/(a+o)),{first:Math.round(c),second:Math.round(u*100),third:Math.round(l*100)}},v=e=>{let t=f(e.first),n=p(e.second)/100,r=p(e.third)/100,i=e=>{let i=(t+e)/30;return d((r-n*Math.min(r,1-r)*Math.max(-1,Math.min(i%2-1,1)))*255)};return g({first:i(0),second:i(8),third:i(4)})},y=t=>{let n=t.toUpperCase(),r=n.startsWith(`#`)?n.slice(1):n;if(!/^[0-9A-F]{3}$/.test(r)&&!/^[0-9A-F]{6}$/.test(r))return;let i=`#${r}`;if(e.n(i))return g(h(i)??{first:0,second:0,third:0})},b=e=>e.slice(1).toUpperCase(),x=e=>{let t=e.first/255,n=e.second/255,r=e.third/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o=Math.round(o*60),o<0&&(o+=360));let s=i===0?0:a/i;return{hue:o,saturation:s,value:i}},S=e=>{let t=e.value*e.saturation,n=e.hue/60,r=t*(1-Math.abs(n%2-1)),i=e.value-t,a=0,o=0,s=0;return n>=0&&n<1?(a=t,o=r):n>=1&&n<2?(a=r,o=t):n>=2&&n<3?(o=t,s=r):n>=3&&n<4?(o=r,s=t):n>=4&&n<5?(a=r,s=t):(a=t,s=r),{first:d((a+i)*255),second:d((o+i)*255),third:d((s+i)*255)}},C=e=>{let t=h(e);if(t)return x(t)},w=e=>g(S(e)),T=[t.o.HEX,t.o.RGB,t.o.HSL],E={[t.o.HEX]:`Hex`,[t.o.RGB]:`RGB`,[t.o.HSL]:`HSL`},D=e=>{let t=getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(!t)return;let n=Number.parseInt(t[1]??`0`,10),r=Number.parseInt(t[2]??`0`,10),i=Number.parseInt(t[3]??`0`,10);return`#${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}${i.toString(16).padStart(2,`0`).toUpperCase()}`},O=(t,r)=>{if(n.n(t)&&e.n(t))return t;if(r)return D(r)},k=(e,n)=>n===t.o.HEX?b(e):n===t.o.RGB?h(e)??{first:0,second:0,third:0}:_(e)??{first:0,second:0,third:0},A=e=>{let t=Number.parseInt(e,10);if(!Number.isNaN(t))return t},j=(e,n)=>{if(e===t.o.HEX)return typeof n==`string`?y(n):void 0;if(typeof n==`string`)return;if(e===t.o.RGB){let e=g({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});return h(e)?e:void 0}let r=v({first:A(String(n.first))??0,second:A(String(n.second))??0,third:A(String(n.third))??0});if(r&&_(r))return r},M=17,N=`#000000`,P=e=>e??N,F=({modelValue:e,getEditableHex:t,saturationAreaRef:n,hueSliderRef:r,disabled:i,readonly:a})=>{let o=C(P(t()))??{hue:0,saturation:0,value:0},s=(0,c.ref)(o.hue),l=(0,c.ref)(o.saturation),d=(0,c.ref)(o.value),f=(0,c.ref)(!1),p=(0,c.ref)(!1),m=(0,c.ref)(!1),h=(0,c.shallowRef)(null),g=(0,c.shallowRef)(null),_=(0,c.computed)(()=>w({hue:s.value,saturation:l.value,value:d.value})),v=(0,c.computed)(()=>w({hue:s.value,saturation:1,value:1})),y=e=>{s.value=Math.max(0,Math.min(360,e))},b=(e,t)=>{l.value=Math.max(0,Math.min(1,e)),d.value=Math.max(0,Math.min(1,t))},x=e=>{let t=C(P(e));t&&(f.value=!0,t.saturation>0&&(s.value=t.hue),l.value=t.saturation,d.value=t.value,f.value=!1)},S=()=>{let e=t();e&&e.toUpperCase()!==_.value.toUpperCase()&&x(e)},T=()=>{let n=_.value;t()?.toUpperCase()!==n.toUpperCase()&&(f.value=!0,e.value=n,f.value=!1)};(0,c.watch)([s,l,d],()=>{f.value||T()}),(0,c.watch)(e,()=>{f.value||S()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{E(),D(),S()})});let E=()=>{h.value=n.value?.getBoundingClientRect()??null},D=()=>{g.value=r.value?.getBoundingClientRect()??null},O=(0,c.computed)(()=>{let e=h.value;return e?{transform:`translate3d(calc(${l.value*e.width}px - 50%), calc(${(1-d.value)*e.height}px - 50%), 0)`}:{}}),k=(0,c.computed)(()=>{let e=g.value;return e?{transform:`translate3d(-50%, calc(${s.value/360*e.height}px - 50%), 0)`}:{}}),A=()=>!i.value&&!a.value,j=e=>{let t=h.value;if(!t)return;let n=Math.max(0,Math.min(e.clientX-t.left,t.width)),r=Math.max(0,Math.min(e.clientY-t.top,t.height));b(n/t.width,1-r/t.height)},M=e=>{let t=g.value;t&&y(Math.max(0,Math.min(e.clientY-t.top,t.height))/t.height*360)},N=e=>{A()&&(E(),p.value=!0,j(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},F=e=>{A()&&(D(),m.value=!0,M(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},I=()=>{p.value=!1},L=()=>{m.value=!1};return(0,u.useEventListener)(n,`pointermove`,e=>{p.value&&j(e)}),(0,u.useEventListener)(n,`pointerup`,I),(0,u.useEventListener)(n,`pointercancel`,I),(0,u.useEventListener)(n,`lostpointercapture`,I),(0,u.useEventListener)(r,`pointermove`,e=>{m.value&&M(e)}),(0,u.useEventListener)(r,`pointerup`,L),(0,u.useEventListener)(r,`pointercancel`,L),(0,u.useEventListener)(r,`lostpointercapture`,L),{hexColor:_,hueBackground:v,saturationPointerStyle:O,huePointerStyle:k,handleSaturationPointerDown:N,handleHuePointerDown:F,syncFromModelValue:S}},I=e=>{if(!e)return null;let t=e.$el;if(!(t instanceof HTMLElement))return null;let n=t.querySelector(`.s-ui-color-swatch__fill`);return n instanceof HTMLElement?n:null},L={class:`s-ui-color-area__canvas-row`},R=[`aria-label`],z=[`aria-label`,`aria-disabled`],B=(0,c.defineComponent)({__name:`SColorArea`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let t=(0,c.useModel)(e,`modelValue`),{t:r}=(0,l.useUiKitI18n)(),i=(0,c.useTemplateRef)(`colorResolutionSwatchRef`),a=(0,c.useTemplateRef)(`saturationAreaRef`),o=(0,c.useTemplateRef)(`hueSliderRef`),s=()=>O(t.value,I(i.value)),u=(0,c.computed)(()=>n.a(t.value)),{hexColor:d,hueBackground:f,saturationPointerStyle:p,huePointerStyle:m,handleSaturationPointerDown:h,handleHuePointerDown:g}=F({modelValue:t,getEditableHex:s,saturationAreaRef:a,hueSliderRef:o,disabled:(0,c.toRef)(()=>e.disabled),readonly:(0,c.toRef)(()=>e.readonly)});return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-area`,{"s-ui-color-area--disabled":e.disabled,"s-ui-color-area--readonly":e.readonly}]},t.$attrs),[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`colorResolutionSwatchRef`,ref:i,class:`s-ui-color-area__color-resolution`,color:u.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_24,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`]),(0,c.createElementVNode)(`div`,L,[(0,c.createElementVNode)(`div`,{ref_key:`saturationAreaRef`,ref:a,class:`s-ui-color-area__canvas`,role:`img`,"aria-label":(0,c.unref)(r)(`colorArea.saturationBrightness`),style:(0,c.normalizeStyle)({"--s-ui-color-area-hue":(0,c.unref)(f)}),onPointerdown:n[0]||=(...e)=>(0,c.unref)(h)&&(0,c.unref)(h)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__canvas-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(p),backgroundColor:(0,c.unref)(d)})},null,4)],44,R),(0,c.createElementVNode)(`div`,{ref_key:`hueSliderRef`,ref:o,class:`s-ui-color-area__hue`,role:`slider`,"aria-label":(0,c.unref)(r)(`colorArea.hue`),"aria-valuemin":`0`,"aria-valuemax":`360`,"aria-disabled":e.disabled||e.readonly,onPointerdown:n[1]||=(...e)=>(0,c.unref)(g)&&(0,c.unref)(g)(...e)},[(0,c.createElementVNode)(`div`,{class:`s-ui-color-area__hue-pointer`,style:(0,c.normalizeStyle)({...(0,c.unref)(m),backgroundColor:(0,c.unref)(f)})},null,4)],40,z)])],16))}}),V={class:`s-ui-color-values__left`},H={class:`s-ui-color-values__format`},U={class:`s-ui-color-values__value-group`},W={class:`s-ui-color-values__inputs`},G={key:0,class:`s-ui-color-values__input-wrap`},K=[`disabled`,`readonly`,`aria-label`],q={class:`s-ui-color-values__input-wrap`},J=[`disabled`,`readonly`,`aria-label`],Y={class:`s-ui-color-values__input-wrap`},X=[`disabled`,`readonly`,`aria-label`],Z={class:`s-ui-color-values__input-wrap`},Q=[`disabled`,`readonly`,`aria-label`],$=(0,c.defineComponent)({__name:`SColorValues`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},formats:{default:()=>T}},{modelValue:{required:!0},modelModifiers:{},format:{default:t.o.HEX},formatModifiers:{}}),emits:(0,c.mergeModels)([`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`,`update:format`]),setup(e,{emit:i}){let{t:a}=(0,l.useUiKitI18n)(),o=(0,c.useModel)(e,`modelValue`),u=(0,c.useModel)(e,`format`),d=i,f=(0,c.useTemplateRef)(`previewSwatchRef`),p=(0,c.ref)(``),m=(0,c.ref)(`0`),h=(0,c.ref)(`0`),g=(0,c.ref)(`0`),_=(0,c.computed)(()=>(e.formats.length>0?e.formats:T).map(e=>({value:e,label:E[e]}))),v=(0,c.computed)(()=>n.a(o.value)),y=(0,c.computed)(()=>O(o.value,I(f.value))),b=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.redChannel`):a(`colorValues.hueChannel`)),x=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.greenChannel`):a(`colorValues.saturationChannel`)),S=(0,c.computed)(()=>u.value===t.o.RGB?a(`colorValues.blueChannel`):a(`colorValues.lightnessChannel`)),C=()=>{let e=y.value;if(!e)return;let n=k(e,u.value);if(u.value===t.o.HEX&&typeof n==`string`){p.value=n;return}typeof n==`object`&&(m.value=String(n.first),h.value=String(n.second),g.value=String(n.third))};(0,c.watch)([o,u,y],()=>{C()}),(0,c.onMounted)(()=>{(0,c.nextTick)(()=>{C()})});let w=()=>{if(e.disabled||e.readonly)return;if(u.value===t.o.HEX){let e=j(t.o.HEX,p.value);e&&(o.value=e),C();return}let n=j(u.value,{first:Number.parseInt(m.value,10),second:Number.parseInt(h.value,10),third:Number.parseInt(g.value,10)});n&&(o.value=n),C()},D=e=>{e.key===`Enter`&&(e.preventDefault(),w())};return(n,i)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,(0,c.mergeProps)({class:[`s-ui-color-values`,{"s-ui-color-values--disabled":e.disabled,"s-ui-color-values--readonly":e.readonly}]},n.$attrs),[(0,c.createElementVNode)(`div`,V,[(0,c.createVNode)((0,c.unref)(l.SColorSwatch),{ref_key:`previewSwatchRef`,ref:f,class:`s-ui-color-values__preview`,color:v.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`,`disabled`]),(0,c.createElementVNode)(`div`,H,[(0,c.createVNode)((0,c.unref)(s.t),{modelValue:u.value,"onUpdate:modelValue":i[0]||=e=>u.value=e,class:`s-ui-color-values__format-select`,options:_.value,disabled:e.disabled,readonly:e.readonly,bordered:!0,clearable:!1,"close-on-select":!0,"fit-viewport":!1,"aria-label":(0,c.unref)(a)(`colorValues.format`),onOpen:i[1]||=e=>d(`formatDropdownOpen`),onClose:i[2]||=e=>d(`formatDropdownClose`)},null,8,[`modelValue`,`options`,`disabled`,`readonly`,`aria-label`])])]),(0,c.createElementVNode)(`div`,U,[(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-values__pipette`,appearance:(0,c.unref)(r.n).BARE,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,icon:`pipette`,"aria-label":(0,c.unref)(a)(`colorValues.pickColor`),"aria-disabled":`true`,disabled:e.disabled,tabindex:`-1`},null,8,[`appearance`,`variant`,`size`,`aria-label`,`disabled`]),i[9]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,W,[u.value===(0,c.unref)(t.o).HEX?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,G,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[3]||=e=>p.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`text`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":(0,c.unref)(a)(`colorValues.hexValue`),onBlur:w,onKeydown:D},null,40,K),[[c.vModelText,p.value]])])):((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,{key:1},[(0,c.createElementVNode)(`div`,q,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[4]||=e=>m.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":b.value,onBlur:w,onKeydown:D},null,40,J),[[c.vModelText,m.value]])]),i[7]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,Y,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[5]||=e=>h.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":x.value,onBlur:w,onKeydown:D},null,40,X),[[c.vModelText,h.value]])]),i[8]||=(0,c.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,c.createElementVNode)(`div`,Z,[(0,c.withDirectives)((0,c.createElementVNode)(`input`,{"onUpdate:modelValue":i[6]||=e=>g.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":S.value,onBlur:w,onKeydown:D},null,40,Q),[[c.vModelText,g.value]])])],64))])])],16))}}),ee={class:`s-ui-color-picker__section`},te={class:`s-ui-color-picker__label`},ne={class:`s-ui-color-picker__section`},re={class:`s-ui-color-picker__label`},ie={class:`s-ui-color-picker__custom-editor`},ae={class:`s-ui-color-picker__custom-actions`},oe=(0,c.defineComponent)({__name:`SColorPicker`,props:(0,c.mergeModels)({disabled:{type:Boolean,default:!1},recommendedColors:{},recentColors:{default:()=>[]}},{modelValue:{},modelModifiers:{}}),emits:(0,c.mergeModels)([`select`,`customEditorOpen`,`customEditorClose`,`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`]),setup(e,{emit:n}){let s=(0,c.useModel)(e,`modelValue`),u=n,{t:d}=(0,l.useUiKitI18n)(),f=(0,c.ref)(!1),p=(0,c.ref)(`#526DE3`),m=(0,c.ref)(t.o.HEX),h=(0,c.computed)(()=>e.recommendedColors&&e.recommendedColors.length>0?e.recommendedColors:t.r),g=(0,c.computed)(()=>e.recentColors.length<=17?e.recentColors:e.recentColors.slice(0,17)),_=()=>{if(s.value){p.value=s.value;return}p.value=`#526DE3`},v=e=>{u(`select`,e)},y=()=>{s.value=p.value,u(`select`,p.value),f.value=!1},b=()=>{f.value=!1};return(0,c.watch)(f,(e,t)=>{if(e&&!t){_(),u(`customEditorOpen`);return}!e&&t&&u(`customEditorClose`)}),(n,_)=>((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(o.t),(0,c.mergeProps)({width:336},n.$attrs),{default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)([`s-ui-color-picker`,{"s-ui-color-picker--disabled":e.disabled}])},[(0,c.createElementVNode)(`section`,ee,[(0,c.createElementVNode)(`span`,te,(0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.recommendedColors`)),1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:s.value,"onUpdate:modelValue":_[0]||=e=>s.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).GRID,colors:h.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:v},null,8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])]),(0,c.createElementVNode)(`section`,ne,[(0,c.createElementVNode)(`span`,re,(0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.recentColors`)),1),(0,c.createVNode)((0,c.unref)(t.t),{modelValue:s.value,"onUpdate:modelValue":_[7]||=e=>s.value=e,class:`s-ui-color-picker__palette`,layout:(0,c.unref)(t.n).ROW,colors:g.value,size:(0,c.unref)(l.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:v},{append:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(a.t),{modelValue:f.value,"onUpdate:modelValue":_[6]||=e=>f.value=e,placement:(0,c.unref)(i.s).RIGHT_START,offset:8,shift:!0,flip:!0,disabled:e.disabled,"dismiss-on-click-outside":!0,"dismiss-on-escape":!0},{trigger:(0,c.withCtx)(({toggle:t,triggerProps:n})=>[(0,c.createVNode)((0,c.unref)(r.t),(0,c.mergeProps)(n,{class:`s-ui-color-picker__add-button`,appearance:(0,c.unref)(r.n).OUTLINED,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,icon:`plus`,"aria-label":(0,c.unref)(d)(`colorPicker.addCustomColor`),disabled:e.disabled,onClick:t}),null,16,[`appearance`,`variant`,`size`,`aria-label`,`disabled`,`onClick`])]),content:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(o.t),{width:320},{footer:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ae,[(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-picker__save-button`,appearance:(0,c.unref)(r.n).MAJOR,variant:(0,c.unref)(r.i).MAIN,size:(0,c.unref)(r.r).SMALL,disabled:e.disabled,onClick:y},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.save`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`]),(0,c.createVNode)((0,c.unref)(r.t),{class:`s-ui-color-picker__cancel-button`,appearance:(0,c.unref)(r.n).MINOR,variant:(0,c.unref)(r.i).NEUTRAL,size:(0,c.unref)(r.r).SMALL,disabled:e.disabled,onClick:b},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(d)(`colorPicker.cancel`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`])])]),default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,ie,[(0,c.createVNode)(B,{modelValue:p.value,"onUpdate:modelValue":_[1]||=e=>p.value=e,disabled:e.disabled},null,8,[`modelValue`,`disabled`]),(0,c.createVNode)($,{modelValue:p.value,"onUpdate:modelValue":_[2]||=e=>p.value=e,format:m.value,"onUpdate:format":_[3]||=e=>m.value=e,disabled:e.disabled,onFormatDropdownOpen:_[4]||=e=>u(`formatDropdownOpen`),onFormatDropdownClose:_[5]||=e=>u(`formatDropdownClose`)},null,8,[`modelValue`,`format`,`disabled`])])]),_:1})]),_:1},8,[`modelValue`,`placement`,`disabled`])]),_:1},8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])])],2)]),_:1},16))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return B}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return oe}});