@templatical/editor 0.26.2 → 0.27.0

package/dist/{MergeTagModeToggle-P-UguQHc.js → MergeTagModeToggle-PKCoKAoF.js}

@@ -1,9 +1,9 @@
-import { A as e, Dt as t, O as n, Ot as r, _ as i, c as a, d as o, l as s, nt as c, r as l, s as u, u as d, x as f } from "./vue.runtime.esm-bundler-D1diBMsm.js";
+import { Ot as e, S as t, c as n, d as r, j as i, k as a, kt as o, l as s, r as c, rt as l, s as u, u as d, v as f } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
 import { j as p } from "./dist-B1kLn1rs.js";
-import { E as m } from "./keys-fwF3qZax.js";
-import { t as h } from "./useI18n-DoVKdCTH.js";
-import { t as g } from "./createLucideIcon-C8WzBYCv.js";
-import { t as _ } from "./sparkles-DumaWRW-.js";
+import { T as m } from "./keys-BxixS0TN.js";
+import { t as h } from "./useI18n-BfXff_Sy.js";
+import { t as g } from "./createLucideIcon-L-wQXW_R.js";
+import { t as _ } from "./sparkles-DYEMATWC.js";
 var v = g("monitor", [
 	["rect", {
 		width: "20",
@@ -64,29 +64,29 @@ var v = g("monitor", [
 	"aria-label",
 	"title",
 	"onClick"
-], C = /* @__PURE__ */ i({
+], C = /* @__PURE__ */ f({
 	__name: "ViewportToggle",
 	props: { viewport: {} },
 	emits: ["change"],
-	setup(i, { emit: d }) {
-		let f = i, p = d, { t: m } = h(), g = u(() => [{
+	setup(t, { emit: d }) {
+		let f = t, p = d, { t: m } = h(), g = u(() => [{
 			value: "desktop",
 			label: m.viewport.desktop
 		}, {
 			value: "mobile",
 			label: m.viewport.mobile
 		}]), _ = u(() => `translateX(${g.value.findIndex((e) => e.value === f.viewport) * 100}%)`);
-		return (u, d) => (n(), o("div", {
+		return (u, d) => (a(), r("div", {
 			role: "radiogroup",
-			"aria-label": c(m).viewport.label,
+			"aria-label": l(m).viewport.label,
 			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
-			style: t({
+			style: e({
 				gridTemplateColumns: `repeat(${g.value.length}, 1fr)`,
 				backgroundColor: "var(--tpl-bg-hover)"
 			})
-		}, [a("div", {
+		}, [n("div", {
 			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
-			style: t({
+			style: e({
 				left: "4px",
 				width: `calc((100% - 8px) / ${g.value.length})`,
 				transform: _.value,
@@ -94,58 +94,58 @@ var v = g("monitor", [
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			})
-		}, null, 4), (n(!0), o(l, null, e(g.value, (e) => (n(), o("button", {
-			key: e.value,
+		}, null, 4), (a(!0), r(c, null, i(g.value, (i) => (a(), r("button", {
+			key: i.value,
 			role: "radio",
-			"aria-checked": i.viewport === e.value,
-			"aria-label": e.label,
+			"aria-checked": t.viewport === i.value,
+			"aria-label": i.label,
 			class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium",
-			style: t({
-				color: i.viewport === e.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+			style: e({
+				color: t.viewport === i.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
 				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			}),
-			title: e.label,
-			onClick: (t) => p("change", e.value)
-		}, [e.value === "desktop" ? (n(), s(c(v), {
+			title: i.label,
+			onClick: (e) => p("change", i.value)
+		}, [i.value === "desktop" ? (a(), s(l(v), {
 			key: 0,
 			size: 18,
 			"stroke-width": 1.5
-		})) : (n(), s(c(y), {
+		})) : (a(), s(l(y), {
 			key: 1,
 			size: 18,
 			"stroke-width": 1.5
-		})), a("span", null, r(e.label), 1)], 12, S))), 128))], 12, x));
+		})), n("span", null, o(i.label), 1)], 12, S))), 128))], 12, x));
 	}
 }), w = ["aria-label"], T = [
 	"aria-checked",
 	"aria-label",
 	"title",
 	"onClick"
-], E = /* @__PURE__ */ i({
+], E = /* @__PURE__ */ f({
 	__name: "MergeTagModeToggle",
 	props: { sampleMode: { type: Boolean } },
 	emits: ["change"],
-	setup(i, { emit: g }) {
-		let v = i, y = g, { t: x } = h(), S = f(m, []), C = u(() => p(S)), E = u(() => [{
+	setup(f, { emit: g }) {
+		let v = f, y = g, { t: x } = h(), S = t(m, []), C = u(() => p(S)), E = u(() => [{
 			value: !0,
 			label: x.mergeTagPreview.sample
 		}, {
 			value: !1,
 			label: x.mergeTagPreview.labelView
 		}]), D = u(() => `translateX(${E.value.findIndex((e) => e.value === v.sampleMode) * 100}%)`);
-		return (u, f) => C.value ? (n(), o("div", {
+		return (t, u) => C.value ? (a(), r("div", {
 			key: 0,
 			role: "radiogroup",
-			"aria-label": c(x).mergeTagPreview.label,
+			"aria-label": l(x).mergeTagPreview.label,
 			"data-testid": "merge-tag-mode-toggle",
 			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
-			style: t({
+			style: e({
 				gridTemplateColumns: `repeat(${E.value.length}, 1fr)`,
 				backgroundColor: "var(--tpl-bg-hover)"
 			})
-		}, [a("div", {
+		}, [n("div", {
 			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
-			style: t({
+			style: e({
 				left: "4px",
 				width: `calc((100% - 8px) / ${E.value.length})`,
 				transform: D.value,
@@ -153,27 +153,27 @@ var v = g("monitor", [
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			})
-		}, null, 4), (n(!0), o(l, null, e(E.value, (e) => (n(), o("button", {
-			key: String(e.value),
+		}, null, 4), (a(!0), r(c, null, i(E.value, (t) => (a(), r("button", {
+			key: String(t.value),
 			role: "radio",
-			"aria-checked": i.sampleMode === e.value,
-			"aria-label": e.label,
+			"aria-checked": f.sampleMode === t.value,
+			"aria-label": t.label,
 			class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium",
-			style: t({
-				color: i.sampleMode === e.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+			style: e({
+				color: f.sampleMode === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
 				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			}),
-			title: e.label,
-			onClick: (t) => y("change", e.value)
-		}, [e.value ? (n(), s(c(_), {
+			title: t.label,
+			onClick: (e) => y("change", t.value)
+		}, [t.value ? (a(), s(l(_), {
 			key: 0,
 			size: 18,
 			"stroke-width": 1.5
-		})) : (n(), s(c(b), {
+		})) : (a(), s(l(b), {
 			key: 1,
 			size: 18,
 			"stroke-width": 1.5
-		})), a("span", null, r(e.label), 1)], 12, T))), 128))], 12, w)) : d("", !0);
+		})), n("span", null, o(t.label), 1)], 12, T))), 128))], 12, w)) : d("", !0);
 	}
 });
 //#endregion

package/dist/{MergeTagSuggestion-BJ43ihWR.js → MergeTagSuggestion-DGha0WRp.js}

@@ -1,5 +1,5 @@
-import { A as e, Et as t, O as n, Ot as r, Y as i, _ as a, c as o, d as s, r as c, u as l, y as u } from "./vue.runtime.esm-bundler-D1diBMsm.js";
-import { c as d, n as f } from "./runtime-dom.esm-bundler-CepEmvwF.js";
+import { Dt as e, X as t, b as n, c as r, d as i, j as a, k as o, kt as s, r as c, u as l, v as u } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { c as d, n as f } from "./runtime-dom.esm-bundler-BgKXIPLV.js";
 import { Gn as p, H as m, Hn as h, Vn as g, Wn as _, s as v } from "./dist-ChYLhoJ4.js";
 //#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var y = Math.min, b = Math.max, x = Math.round, S = Math.floor, C = (e) => ({
@@ -1111,7 +1111,7 @@ var _t = gt, vt = ["id"], yt = {
 	"data-merge-tag-value",
 	"onMousedown",
 	"onMousemove"
-], xt = { class: "tpl:font-medium" }, St = { class: "tpl:text-[var(--tpl-text-dim)] tpl:font-mono" }, Ct = /* @__PURE__ */ a({
+], xt = { class: "tpl:font-medium" }, St = { class: "tpl:text-[var(--tpl-text-dim)] tpl:font-mono" }, Ct = /* @__PURE__ */ u({
 	__name: "MergeTagSuggestionList",
 	props: {
 		items: {},
@@ -1120,28 +1120,28 @@ var _t = gt, vt = ["id"], yt = {
 		listId: {}
 	},
 	emits: ["select", "hover"],
-	setup(i) {
-		let a = i;
+	setup(t) {
+		let n = t;
 		function u(e) {
-			return a.listId ? `${a.listId}-opt-${e}` : void 0;
+			return n.listId ? `${n.listId}-opt-${e}` : void 0;
 		}
-		return (a, f) => (n(), s("div", {
-			id: i.listId,
-			class: "tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:py-1 tpl:shadow-lg",
+		return (n, f) => (o(), i("div", {
+			id: t.listId,
+			class: "tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1 tpl:shadow-[var(--tpl-shadow-lg)]",
 			role: "listbox",
 			"data-testid": "merge-tag-suggestion-list"
-		}, [i.items.length === 0 ? (n(), s("div", yt, r(i.emptyText), 1)) : l("", !0), (n(!0), s(c, null, e(i.items, (e, c) => (n(), s("button", {
-			key: e.value,
+		}, [t.items.length === 0 ? (o(), i("div", yt, s(t.emptyText), 1)) : l("", !0), (o(!0), i(c, null, a(t.items, (a, c) => (o(), i("button", {
+			key: a.value,
 			id: u(c),
 			type: "button",
 			role: "option",
-			"aria-selected": c === i.selectedIndex,
-			"data-selected": c === i.selectedIndex ? "true" : "false",
-			"data-merge-tag-value": e.value,
-			class: t(["tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors", c === i.selectedIndex ? "tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:text-[var(--tpl-text)] hover:tpl:bg-[var(--tpl-bg-hover)]"]),
-			onMousedown: d((t) => a.$emit("select", e), ["prevent", "stop"]),
-			onMousemove: (e) => c !== i.selectedIndex && a.$emit("hover", c)
-		}, [o("span", xt, r(e.label), 1), o("span", St, r(e.value), 1)], 42, bt))), 128))], 8, vt));
+			"aria-selected": c === t.selectedIndex,
+			"data-selected": c === t.selectedIndex ? "true" : "false",
+			"data-merge-tag-value": a.value,
+			class: e(["tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors", c === t.selectedIndex ? "tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]"]),
+			onMousedown: d((e) => n.$emit("select", a), ["prevent", "stop"]),
+			onMousemove: (e) => c !== t.selectedIndex && n.$emit("hover", c)
+		}, [r("span", xt, s(a.label), 1), r("span", St, s(a.value), 1)], 42, bt))), 128))], 8, vt));
 	}
 }), wt = 10, Tt = 0;
 function Et(e, t) {
@@ -1154,8 +1154,8 @@ function Et(e, t) {
 function Dt(e, t, n, r) {
 	return t.length === 0 ? e.key === "Enter" || e.key === "Tab" : e.key === "ArrowDown" ? (n.value = (n.value + 1) % t.length, !0) : e.key === "ArrowUp" ? (n.value = (n.value - 1 + t.length) % t.length, !0) : e.key === "Enter" || e.key === "Tab" ? (r(t[n.value]), !0) : !1;
 }
-function Ot(e, t) {
-	let n = null, r = null, a = null, o = i([]), s = i(0), c = null, l = `tpl-merge-tag-suggestion-${++Tt}`, d = null, p = [], m = null;
+function Ot(e, r) {
+	let i = null, a = null, o = null, s = t([]), c = t(0), l = null, u = `tpl-merge-tag-suggestion-${++Tt}`, d = null, p = [], m = null;
 	function h() {
 		b(d?.() ?? null);
 	}
@@ -1185,14 +1185,14 @@ function Ot(e, t) {
 		window.removeEventListener("resize", h), p = [];
 	}
 	function b(e) {
-		if (!r || !e || e.bottom < 0 || e.top > window.innerHeight) return;
-		r.style.position = "absolute", r.style.zIndex = "9999";
-		let t = r.offsetParent?.getBoundingClientRect(), n = t?.top ?? 0, i = t?.left ?? 0;
-		r.style.left = `${e.left - i}px`, r.style.top = `${e.bottom - n}px`;
-		let a = r.offsetHeight;
-		if (a !== 0 && window.innerHeight - e.bottom < a) {
-			let t = Math.max(0, e.top - a);
-			r.style.top = `${t - n}px`;
+		if (!a || !e || e.bottom < 0 || e.top > window.innerHeight) return;
+		a.style.position = "absolute", a.style.zIndex = "9999";
+		let t = a.offsetParent?.getBoundingClientRect(), n = t?.top ?? 0, r = t?.left ?? 0;
+		a.style.left = `${e.left - r}px`, a.style.top = `${e.bottom - n}px`;
+		let i = a.offsetHeight;
+		if (i !== 0 && window.innerHeight - e.bottom < i) {
+			let t = Math.max(0, e.top - i);
+			a.style.top = `${t - n}px`;
 		}
 	}
 	function x(e, t) {
@@ -1208,46 +1208,46 @@ function Ot(e, t) {
 		e.style.fontFamily = i.fontFamily, e.style.fontSize = i.fontSize, e.style.lineHeight = i.lineHeight;
 	}
 	function S(e) {
-		a && (e ? (a.setAttribute("role", "combobox"), a.setAttribute("aria-haspopup", "listbox"), a.setAttribute("aria-expanded", "true"), a.setAttribute("aria-controls", l)) : (a.removeAttribute("aria-expanded"), a.removeAttribute("aria-controls"), a.removeAttribute("aria-activedescendant"), a.removeAttribute("aria-haspopup"), a.removeAttribute("role")));
+		o && (e ? (o.setAttribute("role", "combobox"), o.setAttribute("aria-haspopup", "listbox"), o.setAttribute("aria-expanded", "true"), o.setAttribute("aria-controls", u)) : (o.removeAttribute("aria-expanded"), o.removeAttribute("aria-controls"), o.removeAttribute("aria-activedescendant"), o.removeAttribute("aria-haspopup"), o.removeAttribute("role")));
 	}
 	function C() {
-		if (a) {
-			if (o.value.length === 0) {
-				a.removeAttribute("aria-activedescendant");
+		if (o) {
+			if (s.value.length === 0) {
+				o.removeAttribute("aria-activedescendant");
 				return;
 			}
-			a.setAttribute("aria-activedescendant", `${l}-opt-${s.value}`);
+			o.setAttribute("aria-activedescendant", `${u}-opt-${c.value}`);
 		}
 	}
 	function w(e) {
-		c?.(e);
+		l?.(e);
 	}
 	return {
-		open: ({ items: i, getRect: p, anchorEl: m, onCommand: h }) => {
-			o.value = i, s.value = 0, c = h, r = document.createElement("div"), r.setAttribute("data-testid", "merge-tag-suggestion-popup"), a = m, x(r, m), (t?.value ?? document.body).appendChild(r), n = f({ render() {
-				return u(Ct, {
-					items: o.value,
-					selectedIndex: s.value,
+		open: ({ items: t, getRect: p, anchorEl: m, onCommand: h }) => {
+			s.value = t, c.value = 0, l = h, a = document.createElement("div"), a.setAttribute("data-testid", "merge-tag-suggestion-popup"), o = m, x(a, m), (r?.value ?? document.body).appendChild(a), i = f({ render() {
+				return n(Ct, {
+					items: s.value,
+					selectedIndex: c.value,
 					emptyText: e,
-					listId: l,
+					listId: u,
 					onSelect: (e) => w(e),
 					onHover: (e) => {
-						s.value = e, C();
+						c.value = e, C();
 					}
 				});
-			} }), n.mount(r), S(!0), C(), d = p, g(), v(m);
+			} }), i.mount(a), S(!0), C(), d = p, g(), v(m);
 		},
 		update: ({ items: e, getRect: t, onCommand: n }) => {
-			o.value = e, s.value >= e.length && (s.value = 0), c = n, C(), d = t, g();
+			s.value = e, c.value >= e.length && (c.value = 0), l = n, C(), d = t, g();
 		},
 		handleKeyDown: (e) => {
-			let t = Dt(e, o.value, s, w);
+			let t = Dt(e, s.value, c, w);
 			return t && C(), t;
 		},
 		close: () => {
-			r !== null && (m !== null && (cancelAnimationFrame(m), m = null), y(), S(!1), n?.unmount(), r.remove(), n = null, r = null, a = null, c = null, d = null);
+			a !== null && (m !== null && (cancelAnimationFrame(m), m = null), y(), S(!1), i?.unmount(), a.remove(), i = null, a = null, o = null, l = null, d = null);
 		},
-		isOpen: () => r !== null
+		isOpen: () => a !== null
 	};
 }
 function kt(e, t) {

package/dist/{cdn/chunks/NumberWithSuffix-BXrRdfq1.js → NumberWithSuffix-DdPCXfKf.js}

@@ -1,5 +1,5 @@
-import { F as e, L as t, M as n, P as r, ct as i, f as a, g as o, h as s, it as c, lt as l, m as u, p as d, st as f, u as p, v as m, x as h } from "./draggable-DCs9qL-b.js";
-import { h as g, m as _, p as v } from "./ColorPicker-W_UyiVGc.js";
+import { Dt as e, M as t, Ot as n, P as r, c as i, d as a, h as o, j as s, k as c, kt as l, l as u, r as d, rt as f, s as p, u as m, v as h } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { g, h as _, m as v } from "./styleConstants-ByDqaYj_.js";
 //#region src/components/ToggleSwitch.vue?vue&type=script&setup=true&lang.ts
 var y = { key: 0 }, b = {
 	key: 0,
@@ -17,21 +17,21 @@ var y = { key: 0 }, b = {
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(t, { emit: r }) {
-		let i = r;
-		return (r, a) => (n(), o("label", { class: f(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", t.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [r.$slots.default || t.label || t.required ? (n(), o("span", y, [e(r.$slots, "default", {}, () => [m(l(t.label), 1)]), t.required ? (n(), o("span", b, " *")) : s("", !0)])) : s("", !0), d("button", {
+	setup(n, { emit: r }) {
+		let s = r;
+		return (r, u) => (c(), a("label", { class: e(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", n.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [r.$slots.default || n.label || n.required ? (c(), a("span", y, [t(r.$slots, "default", {}, () => [o(l(n.label), 1)]), n.required ? (c(), a("span", b, " *")) : m("", !0)])) : m("", !0), i("button", {
 			type: "button",
 			role: "switch",
-			"aria-checked": t.modelValue,
-			"aria-label": t.label,
-			disabled: t.disabled,
-			class: f([
+			"aria-checked": n.modelValue,
+			"aria-label": n.label,
+			disabled: n.disabled,
+			class: e([
 				"tpl:relative tpl:inline-flex tpl:h-5 tpl:w-9 tpl:shrink-0 tpl:rounded-full tpl:border-2 tpl:border-transparent tpl:transition-colors tpl:duration-200",
-				t.modelValue ? "tpl:bg-[var(--tpl-primary)]" : "tpl:bg-[var(--tpl-border)]",
-				t.disabled ? "tpl:cursor-not-allowed tpl:opacity-60" : "tpl:cursor-pointer"
+				n.modelValue ? "tpl:bg-[var(--tpl-primary)]" : "tpl:bg-[var(--tpl-border)]",
+				n.disabled ? "tpl:cursor-not-allowed tpl:opacity-60" : "tpl:cursor-pointer"
 			]),
-			onClick: a[0] ||= (e) => !t.disabled && i("update:modelValue", !t.modelValue)
-		}, [d("span", { class: f(["tpl:pointer-events-none tpl:inline-block tpl:size-4 tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow tpl:transition-transform tpl:duration-200", t.modelValue ? "tpl:translate-x-4" : "tpl:translate-x-0"]) }, null, 2)], 10, x)], 2));
+			onClick: u[0] ||= (e) => !n.disabled && s("update:modelValue", !n.modelValue)
+		}, [i("span", { class: e(["tpl:pointer-events-none tpl:inline-block tpl:size-4 tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow)] tpl:transition-transform tpl:duration-200", n.modelValue ? "tpl:translate-x-4" : "tpl:translate-x-0"]) }, null, 2)], 10, x)], 2));
 	}
 }), C = [
 	"aria-checked",
@@ -45,19 +45,19 @@ var y = { key: 0 }, b = {
 		modelValue: {}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: c }) {
-		let d = e, f = c, m = a(() => d.options.findIndex((e) => e.value === d.modelValue)), h = a(() => `translateX(${Math.max(m.value, 0) * 100}%)`);
-		return (a, c) => (n(), o("div", {
+	setup(e, { emit: t }) {
+		let i = e, o = t, f = p(() => i.options.findIndex((e) => e.value === i.modelValue)), h = p(() => `translateX(${Math.max(f.value, 0) * 100}%)`);
+		return (t, i) => (c(), a("div", {
 			role: "radiogroup",
 			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
-			style: i({
+			style: n({
 				gridTemplateColumns: `repeat(${e.options.length}, 1fr)`,
 				backgroundColor: "var(--tpl-bg-hover)"
 			})
-		}, [m.value >= 0 ? (n(), o("div", {
+		}, [f.value >= 0 ? (c(), a("div", {
 			key: 0,
 			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
-			style: i({
+			style: n({
 				left: "4px",
 				width: `calc((100% - 8px) / ${e.options.length})`,
 				transform: h.value,
@@ -65,32 +65,32 @@ var y = { key: 0 }, b = {
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			})
-		}, null, 4)) : s("", !0), (n(!0), o(p, null, r(e.options, (r) => (n(), o("button", {
-			key: r.value,
+		}, null, 4)) : m("", !0), (c(!0), a(d, null, s(e.options, (t) => (c(), a("button", {
+			key: t.value,
 			role: "radio",
-			"aria-checked": e.modelValue === r.value,
-			"aria-label": r.label,
+			"aria-checked": e.modelValue === t.value,
+			"aria-label": t.label,
 			class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium",
-			style: i({
-				color: e.modelValue === r.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+			style: n({
+				color: e.modelValue === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
 				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			}),
-			title: r.label,
-			onClick: (e) => f("update:modelValue", r.value)
-		}, [r.icon ? (n(), u(t(r.icon), {
+			title: t.label,
+			onClick: (e) => o("update:modelValue", t.value)
+		}, [t.icon ? (c(), u(r(t.icon), {
 			key: 0,
 			size: 14,
 			"stroke-width": 2
-		})) : (n(), o("span", w, l(r.label), 1))], 12, C))), 128))], 4));
+		})) : (c(), a("span", w, l(t.label), 1))], 12, C))), 128))], 4));
 	}
 }), E = { class: "tpl:mb-3.5" }, D = /* @__PURE__ */ h({
 	__name: "FieldRow",
 	props: { label: {} },
-	setup(t) {
-		return (r, i) => (n(), o("div", E, [t.label ? (n(), o("label", {
+	setup(n) {
+		return (r, i) => (c(), a("div", E, [n.label ? (c(), a("label", {
 			key: 0,
-			class: f(c(g))
-		}, l(t.label), 3)) : s("", !0), e(r.$slots, "default")]));
+			class: e(f(g))
+		}, l(n.label), 3)) : m("", !0), t(r.$slots, "default")]));
 	}
 }), O = { class: "tpl:flex tpl:items-stretch" }, k = [
 	"value",
@@ -105,19 +105,17 @@ var y = { key: 0 }, b = {
 		suffix: {}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: t }) {
-		let r = t;
-		return (t, i) => (n(), o("div", O, [d("input", {
+	setup(t, { emit: n }) {
+		let r = n;
+		return (n, o) => (c(), a("div", O, [i("input", {
 			type: "number",
-			class: f(c(v)),
-			value: e.modelValue,
-			min: e.min,
-			max: e.max,
-			onInput: i[0] ||= (e) => r("update:modelValue", Number(e.target.value))
-		}, null, 42, k), d("span", { class: f(c(_)) }, l(e.suffix), 3)]));
+			class: e(f(v)),
+			value: t.modelValue,
+			min: t.min,
+			max: t.max,
+			onInput: o[0] ||= (e) => r("update:modelValue", Number(e.target.value))
+		}, null, 42, k), i("span", { class: e(f(_)) }, l(t.suffix), 3)]));
 	}
 });
 //#endregion
 export { S as i, D as n, T as r, A as t };
-
-//# sourceMappingURL=NumberWithSuffix-BXrRdfq1.js.map