@nexxtmove/ui 1.12.0 → 1.14.0

package/dist/index.js

@@ -396,7 +396,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			class: "relative block shrink-0 overflow-hidden",
 			style: x(o.value)
 		}, [c("svg", {
-			class: "absolute h-0 w-0 overflow-hidden",
+			class: "absolute size-0 overflow-hidden",
 			"aria-hidden": "true",
 			focusable: "false",
 			width: "0",
@@ -445,11 +445,11 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			key: 0,
 			size: t.size
 		}, {
-			default: B(() => [c("div", { class: y(["flex h-full w-full items-center justify-center bg-cornflower-blue-50 font-semibold text-cornflower-blue-500", [f[t.size]]]) }, [o.value ? (w(), s("img", {
+			default: B(() => [c("div", { class: y(["flex size-full items-center justify-center bg-cornflower-blue-50 font-semibold text-cornflower-blue-500", [f[t.size]]]) }, [o.value ? (w(), s("img", {
 				key: 0,
 				src: t.src,
 				alt: t.name,
-				class: "h-full w-full object-cover",
+				class: "size-full object-cover",
 				onError: i[0] ||= (e) => r.value = !0
 			}, null, 40, _t)) : (w(), s(e, { key: 1 }, [d(k(l.value), 1)], 64))], 2)]),
 			_: 1
@@ -464,7 +464,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			key: 0,
 			src: t.src,
 			alt: t.name,
-			class: "h-full w-full object-cover",
+			class: "size-full object-cover",
 			onError: i[1] ||= (e) => r.value = !0
 		}, null, 40, vt)) : (w(), s(e, { key: 1 }, [d(k(l.value), 1)], 64))], 2));
 	}
@@ -495,16 +495,24 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 		}
 	},
 	setup(e) {
-		return (t, r) => (w(), s("button", {
+		let t = {
+			primary: "button-primary",
+			secondary: "button-secondary",
+			success: "button-success",
+			danger: "button-danger",
+			warning: "button-warning",
+			link: "button-link"
+		};
+		return (r, i) => (w(), s("button", {
 			type: e.buttonType,
 			disabled: e.disabled,
 			class: y([
 				"button relative flex h-10 cursor-pointer items-center overflow-hidden transition-colors duration-200 focus-visible:outline-3 disabled:cursor-not-allowed",
 				e.fullWidth ? "w-full justify-start" : "justify-center",
 				e.rounded ? "rounded-full" : "rounded-lg",
-				`button-${e.variant}`,
-				t.$slots.default ?? "w-10",
-				!t.$slots.default && e.icon ? "aspect-square px-0" : "",
+				t[e.variant],
+				r.$slots.default ?? "w-10",
+				!r.$slots.default && e.icon ? "aspect-square px-0" : "",
 				e.loading ? "pointer-events-none" : ""
 			]),
 			"data-variant": e.variant
@@ -517,7 +525,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					"opacity-0": e.loading
 				}])
 			}, null, 8, ["name", "class"])) : o("", !0),
-			t.$slots.default ? (w(), s("span", {
+			r.$slots.default ? (w(), s("span", {
 				key: 1,
 				class: y([
 					"inline-block transition-all duration-200",
@@ -526,7 +534,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					e.variant === "link" ? "body-link underline-offset-1" : "body-normal",
 					e.variant === "link" && !e.loading && !e.disabled ? "hover:underline-offset-2" : ""
 				])
-			}, [D(t.$slots, "default")], 2)) : o("", !0),
+			}, [D(r.$slots, "default")], 2)) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-200",
 				"enter-from-class": "opacity-0",
@@ -549,7 +557,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 	}
 }), St = { class: "mb-4 flex items-center justify-between" }, Ct = ["disabled"], wt = {
 	key: 2,
-	class: "h-7 w-7"
+	class: "size-7"
 }, Tt = {
 	class: "flex items-center gap-1 font-normal text-sm text-cornflower-blue-600",
 	role: "status",
@@ -562,7 +570,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 	class: "relative h-5 overflow-hidden"
 }, Ot = { key: 2 }, kt = ["disabled"], At = {
 	key: 4,
-	class: "h-7 w-7"
+	class: "size-7"
 }, jt = /* @__PURE__ */ p({
 	__name: "_CalendarHeader",
 	props: {
@@ -595,7 +603,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 				key: 0,
 				type: "button",
 				disabled: !e.canGoPrev,
-				class: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30",
+				class: "flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30",
 				onClick: r[0] ||= (e) => a("prev"),
 				"aria-label": "Vorige maand"
 			}, [f(Q, {
@@ -604,7 +612,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			})], 8, Ct)) : e.pickerView === "years" ? (w(), s("button", {
 				key: 1,
 				type: "button",
-				class: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300",
+				class: "flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300",
 				onClick: r[1] ||= (e) => a("closePicker"),
 				"aria-label": "Terug naar maanden"
 			}, [f(Q, {
@@ -616,7 +624,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					default: B(() => [e.monthYearPicker ? (w(), s("button", {
 						key: `button-${l.value}`,
 						type: "button",
-						class: "block cursor-pointer rounded px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700",
+						class: "block cursor-pointer rounded-sm px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700",
 						onClick: r[2] ||= (e) => a("openMonthPicker")
 					}, k(l.value), 1)) : (w(), s("span", {
 						key: l.value,
@@ -628,7 +636,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					default: B(() => [e.monthYearPicker ? (w(), s("button", {
 						key: `button-${u.value}`,
 						type: "button",
-						class: "block cursor-pointer rounded px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700",
+						class: "block cursor-pointer rounded-sm px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700",
 						onClick: r[3] ||= (e) => a("openYearPicker")
 					}, k(u.value), 1)) : (w(), s("span", {
 						key: u.value,
@@ -642,7 +650,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 				key: 3,
 				type: "button",
 				disabled: !e.canGoNext,
-				class: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30",
+				class: "flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30",
 				onClick: r[4] ||= (e) => a("next"),
 				"aria-label": "Volgende maand"
 			}, [f(Q, {
@@ -742,7 +750,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			"aria-label": A(J)(e, "d MMMM yyyy", { locale: t.locale }),
 			tabindex: A(se)(e, t.viewDate) ? 0 : -1,
 			class: y([
-				"relative flex h-8 w-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1",
+				"relative flex size-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1",
 				A(se)(e, t.viewDate) ? "text-gray-900" : "text-gray-300",
 				f(e) ? "bg-cornflower-blue-500 font-medium text-white!" : "",
 				d(e) && !f(e) ? "font-medium text-cornflower-blue-500! ring-1 ring-cornflower-blue-500" : "",
@@ -754,7 +762,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			onKeydown: (e) => g(e, r * 7 + n)
 		}, [c("span", Lt, k(A(J)(e, "d")), 1), p(e) ? (w(), s("span", {
 			key: 0,
-			class: y(["absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full", f(e) ? "bg-white" : "bg-cornflower-blue-500"])
+			class: y(["absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full", f(e) ? "bg-white" : "bg-cornflower-blue-500"])
 		}, null, 2)) : o("", !0)], 42, It)], 8, Ft))), 128))]))), 128))]));
 	}
 }), zt = {
@@ -878,13 +886,13 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			c("div", qt, [
 				c("button", {
 					type: "button",
-					class: "flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
+					class: "flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
 					onClick: u
 				}, [f(Q, { name: "chevron-up" })]),
 				c("span", Jt, k(l(a.value)), 1),
 				c("button", {
 					type: "button",
-					class: "flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
+					class: "flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
 					onClick: d
 				}, [f(Q, { name: "chevron-down" })])
 			]),
@@ -892,13 +900,13 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			c("div", Yt, [
 				c("button", {
 					type: "button",
-					class: "flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
+					class: "flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
 					onClick: p
 				}, [f(Q, { name: "chevron-up" })]),
 				c("span", Xt, k(l(o.value)), 1),
 				c("button", {
 					type: "button",
-					class: "flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
+					class: "flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
 					onClick: m
 				}, [f(Q, { name: "chevron-down" })])
 			])
@@ -1082,7 +1090,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			key: 0,
 			src: e.image,
 			alt: e.imageAlt ?? "Card afbeelding",
-			class: "block h-40 max-h-40 min-h-40 w-full rounded-tl-lg rounded-tr-lg object-cover"
+			class: "block h-40 max-h-40 min-h-40 w-full rounded-t-lg object-cover"
 		}, null, 8, tn)) : o("", !0)]) : o("", !0), c("div", { class: y(["card-content box-border flex w-full flex-col gap-2 rounded-b-lg border border-gray-200 px-4 py-2", { "rounded-t-lg border-t": !e.image && !t.$slots.image }]) }, [D(t.$slots, "default")], 2)]));
 	}
 }), rn = ["disabled"], an = /* @__PURE__ */ p({
@@ -1110,7 +1118,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 		}), null, 16, rn), [[F, t.value]]), c("span", {
 			"aria-hidden": "true",
 			class: y([
-				"flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors duration-200",
+				"flex size-5 shrink-0 items-center justify-center rounded-sm border transition-colors duration-200",
 				"peer-focus-visible:ring-2 peer-focus-visible:ring-cornflower-blue-400 peer-focus-visible:ring-offset-2",
 				t.value || e.indeterminate ? "border-cornflower-blue-600 text-cornflower-blue-600" : "border-gray-300 text-transparent"
 			])
@@ -1437,7 +1445,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					f(A(Ce), {
 						color: g.value,
 						"aria-label": v.value ? `Geselecteerde kleur: ${v.value}` : "Geen kleur geselecteerd",
-						class: "h-5 w-5 shrink-0 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]",
+						class: "size-5 shrink-0 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]",
 						style: { backgroundColor: "var(--reka-color-swatch-color)" }
 					}, null, 8, ["color", "aria-label"]),
 					c("span", { class: y(["flex-1 text-left text-sm", v.value ? "text-gray-900" : "text-gray-400"]) }, k(v.value || e.placeholder), 3),
@@ -1459,7 +1467,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							class: "relative h-40 w-full cursor-crosshair outline-none",
 							style: x(e)
 						}, {
-							default: B(() => [f(A(ve), { class: "block h-4 w-4 cursor-grab rounded-full border-2 border-white shadow focus:outline-none active:cursor-grabbing" })]),
+							default: B(() => [f(A(ve), { class: "block size-4 cursor-grab rounded-full border-2 border-white shadow-sm focus:outline-none active:cursor-grabbing" })]),
 							_: 1
 						}, 8, ["style"])])]),
 						_: 1
@@ -1471,7 +1479,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 						class: "relative flex h-5 w-full touch-none items-center select-none",
 						"onUpdate:color": C
 					}, {
-						default: B(() => [f(A(Se), { class: "relative h-3 flex-1 overflow-hidden rounded-full" }), f(A(xe), { class: "block h-5 w-5 cursor-grab rounded-full border-2 border-white bg-white shadow focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing" })]),
+						default: B(() => [f(A(Se), { class: "relative h-3 flex-1 overflow-hidden rounded-full" }), f(A(xe), { class: "block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing" })]),
 						_: 1
 					}, 8, ["model-value"]),
 					e.showAlpha ? (w(), s("div", fn, [i[8] ||= c("div", {
@@ -1484,10 +1492,10 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 						"model-value": u.value,
 						channel: "alpha",
 						"color-space": "hsl",
-						class: "relative z-10 flex h-full w-full touch-none items-center select-none",
+						class: "relative z-10 flex size-full touch-none items-center select-none",
 						"onUpdate:color": C
 					}, {
-						default: B(() => [f(A(Se), { class: "relative h-3 flex-1 overflow-hidden rounded-full" }), f(A(xe), { class: "block h-5 w-5 cursor-grab rounded-full border-2 border-white bg-white shadow focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing" })]),
+						default: B(() => [f(A(Se), { class: "relative h-3 flex-1 overflow-hidden rounded-full" }), f(A(xe), { class: "block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing" })]),
 						_: 1
 					}, 8, ["model-value"])])) : o("", !0),
 					c("div", pn, [c("div", mn, [c("span", hn, k(_.value.toUpperCase()), 1), e.formats.length > 1 ? (w(), s("div", gn, [c("button", {
@@ -1515,7 +1523,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 						"onUpdate:color": C
 					}, {
 						default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", p.value ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-							class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+							class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 							placeholder: "#000000",
 							onInput: E
 						})], 2), p.value ? (w(), s("p", _n, k(p.value), 1)) : o("", !0)]),
@@ -1529,7 +1537,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.hue ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "H",
 								onInput: i[2] ||= (e) => D(e, "hue")
 							})], 2)]),
@@ -1543,7 +1551,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.saturation ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "S",
 								onInput: i[3] ||= (e) => D(e, "saturation")
 							})], 2)]),
@@ -1557,7 +1565,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.lightness ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "L",
 								onInput: i[4] ||= (e) => D(e, "lightness")
 							})], 2)]),
@@ -1572,7 +1580,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.red ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "R",
 								onInput: i[5] ||= (e) => D(e, "red")
 							})], 2)]),
@@ -1586,7 +1594,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.green ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "G",
 								onInput: i[6] ||= (e) => D(e, "green")
 							})], 2)]),
@@ -1600,7 +1608,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.blue ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "B",
 								onInput: i[7] ||= (e) => D(e, "blue")
 							})], 2)]),
@@ -1694,7 +1702,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					id: r,
 					"onUpdate:modelValue": i[0] ||= (e) => p.value = e,
 					placeholder: e.placeholder
-				}, u.value, { class: ["bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
+				}, u.value, { class: ["h-10 w-full min-w-60 bg-transparent text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
 					"pl-3": !e.leftIcon,
 					"pr-3": !e.rightIcon
 				}] }), null, 16, wn), [[I, p.value]]),
@@ -3018,7 +3026,7 @@ var cr = /* @__PURE__ */ p({
 		}, {
 			default: B(() => [r.value ? (w(), s("div", {
 				key: 0,
-				class: y(["flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-tl-md rounded-bl-md", p.value])
+				class: y(["flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-l-md", p.value])
 			}, [f(Q, {
 				name: r.value,
 				class: "text-2xl",
@@ -3137,7 +3145,7 @@ var cr = /* @__PURE__ */ p({
 	"height"
 ], yr = {
 	xmlns: "http://www.w3.org/1999/xhtml",
-	class: "flex h-full w-full items-center justify-center"
+	class: "flex size-full items-center justify-center"
 }, br = { class: "heading-1" }, xr = /* @__PURE__ */ p({
 	name: "NexxtDoughnutChart",
 	__name: "DoughnutChart",
@@ -3251,7 +3259,7 @@ var cr = /* @__PURE__ */ p({
 				class: y(["h-7 w-px rounded-sm", t.variant === "primary" ? "bg-white" : "bg-gray-200"]),
 				"aria-hidden": "true"
 			}, null, 2)], 64)), c("button", {
-				class: y(["w-10 shrink-0 cursor-pointer transition-colors duration-200", [C.value, t.iconOnly ? "p-2" : "px-2 py-2"]]),
+				class: y(["w-10 shrink-0 cursor-pointer transition-colors duration-200", [C.value, (t.iconOnly, "p-2")]]),
 				"aria-haspopup": "menu",
 				"aria-expanded": n,
 				"aria-label": r.value,
@@ -3306,7 +3314,7 @@ var cr = /* @__PURE__ */ p({
 		return (e, t) => (w(), s("span", {
 			role: "img",
 			"aria-label": `Energielabel ${n.value}`,
-			class: "relative isolate mr-3 inline-flex h-6 items-center justify-center rounded-l px-2 extra-small-semibold text-white after:absolute after:top-1/2 after:left-full after:size-4.25 after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 after:rounded-tr after:bg-(--energy-label-color) after:content-['']",
+			class: "relative isolate mr-3 inline-flex h-6 items-center justify-center rounded-l px-2 extra-small-semibold text-white after:absolute after:top-1/2 after:left-full after:size-4.25 after:-translate-1/2 after:rotate-45 after:rounded-tr after:bg-(--energy-label-color) after:content-['']",
 			style: x({
 				backgroundColor: r.value,
 				"--energy-label-color": r.value
@@ -3498,7 +3506,7 @@ var cr = /* @__PURE__ */ p({
 				id: A(l),
 				"onUpdate:modelValue": i[0] ||= (e) => S.value = e,
 				placeholder: t.placeholder
-			}, h.value, { class: "bg-transparant h-10 w-full min-w-40 px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none" }), null, 16, Vr), [[I, S.value]])], 2),
+			}, h.value, { class: "h-10 w-full min-w-40 bg-transparent px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none" }), null, 16, Vr), [[I, S.value]])], 2),
 			f(n, {
 				"enter-active-class": "transition-all duration-200 ease-out",
 				"enter-from-class": "opacity-0 -translate-y-1",
@@ -3622,13 +3630,13 @@ var cr = /* @__PURE__ */ p({
 								D(i.$slots, "header")
 							]), e.showClose ? (w(), a(A(we), {
 								key: 0,
-								class: "ml-4 shrink-0 cursor-pointer rounded p-1 focus-visible:outline-2"
+								class: "ml-4 shrink-0 cursor-pointer rounded-sm p-1 focus-visible:outline-2"
 							}, {
 								default: B(() => [f(Q, { name: "xmark" })]),
 								_: 1
 							})) : o("", !0)])) : e.showClose ? (w(), a(A(we), {
 								key: 1,
-								class: "absolute top-3 right-3 cursor-pointer rounded p-1 focus-visible:outline-2"
+								class: "absolute top-3 right-3 cursor-pointer rounded-sm p-1 focus-visible:outline-2"
 							}, {
 								default: B(() => [f(Q, { name: "xmark" })]),
 								_: 1
@@ -3765,14 +3773,14 @@ var cr = /* @__PURE__ */ p({
 				default: B(({ items: n }) => [
 					n.some((e) => e.type === "ellipsis") ? (w(), a(A(Me), {
 						key: 0,
-						class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: t.disabled
 					}, {
 						default: B(() => [f(Q, { name: "angles-left" })]),
 						_: 1
 					}, 8, ["disabled"])) : o("", !0),
 					f(A(Le), {
-						class: "mr-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "mr-4 flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: t.disabled
 					}, {
 						default: B(() => [f(Q, { name: "chevron-left" })]),
@@ -3789,13 +3797,13 @@ var cr = /* @__PURE__ */ p({
 					}, 1032, ["value", "disabled"])) : (w(), a(A(je), {
 						key: n.type,
 						index: r,
-						class: "flex h-8 w-8 items-center justify-center"
+						class: "flex size-8 items-center justify-center"
 					}, {
 						default: B(() => [...i[1] ||= [d(" … ", -1)]]),
 						_: 1
 					}, 8, ["index"]))], 64))), 256)),
 					f(A(Ie), {
-						class: "ml-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "ml-4 flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: t.disabled
 					}, {
 						default: B(() => [f(Q, { name: "chevron-right" })]),
@@ -3803,7 +3811,7 @@ var cr = /* @__PURE__ */ p({
 					}, 8, ["disabled"]),
 					n.some((e) => e.type === "ellipsis") ? (w(), a(A(Ne), {
 						key: 1,
-						class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: t.disabled
 					}, {
 						default: B(() => [f(Q, { name: "angles-right" })]),
@@ -3821,9 +3829,9 @@ var cr = /* @__PURE__ */ p({
 			"show-edges"
 		]));
 	}
-}), ii = ["aria-label"], ai = { class: "relative flex h-1.5 w-1.5" }, oi = {
+}), ii = ["aria-label"], ai = { class: "relative flex size-1.5" }, oi = {
 	key: 0,
-	class: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
+	class: "absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75"
 }, si = /* @__PURE__ */ p({
 	name: "NexxtPresenceIndicator",
 	__name: "PresenceIndicator",
@@ -3836,7 +3844,7 @@ var cr = /* @__PURE__ */ p({
 			class: y(["inline-flex h-6 items-center gap-1.5 rounded-sm px-2.5 extra-small-semibold", e.online ? "bg-green-100 text-green-600" : "bg-gray-100 text-gray-700"]),
 			"aria-label": e.online ? "Online" : "Offline",
 			role: "status"
-		}, [c("span", ai, [e.online ? (w(), s("span", oi)) : o("", !0), c("i", { class: y(["relative block h-1.5 w-1.5 rounded-full", e.online ? "bg-green-500" : "bg-gray-700"]) }, null, 2)]), d(" " + k(e.online ? "Actief" : "Inactief"), 1)], 10, ii));
+		}, [c("span", ai, [e.online ? (w(), s("span", oi)) : o("", !0), c("i", { class: y(["relative block size-1.5 rounded-full", e.online ? "bg-green-500" : "bg-gray-700"]) }, null, 2)]), d(" " + k(e.online ? "Actief" : "Inactief"), 1)], 10, ii));
 	}
 }), ci = { class: "@container" }, li = { class: "flex flex-col @md:gap-2" }, ui = { class: "flex items-center justify-between gap-2" }, di = [
 	"aria-label",
@@ -3962,7 +3970,7 @@ var cr = /* @__PURE__ */ p({
 	class: "shrink-0 body-normal text-gray-950"
 }, wi = {
 	key: 0,
-	class: "wrap-break-words w-full body-normal text-gray-950"
+	class: "w-full body-normal wrap-break-word text-gray-950"
 }, Ti = /* @__PURE__ */ p({
 	__name: "PropertyListing",
 	props: {
@@ -3977,7 +3985,7 @@ var cr = /* @__PURE__ */ p({
 			c("div", { class: y(["min-w-0 truncate text-gray-950", e.price ? "body-normal" : "body-semibold"]) }, k(e.city), 3)
 		]), e.text ? (w(), s("div", wi, k(e.text), 1)) : o("", !0)]));
 	}
-}), Ei = new URL("assets/property_placeholder-CxdNZf4X.jpg", import.meta.url).href, Di = { class: "relative isolate h-40 w-full overflow-hidden rounded-tl-lg rounded-tr-lg" }, Oi = ["src"], ki = { class: "absolute inset-0 flex items-center justify-center rounded-tl-lg rounded-tr-lg bg-white/20 backdrop-blur-sm" }, Ai = /* @__PURE__ */ p({
+}), Ei = new URL("assets/property_placeholder-CxdNZf4X.jpg", import.meta.url).href, Di = { class: "relative isolate h-40 w-full overflow-hidden rounded-t-lg" }, Oi = ["src"], ki = { class: "absolute inset-0 flex items-center justify-center rounded-t-lg bg-white/20 backdrop-blur-sm" }, Ai = /* @__PURE__ */ p({
 	name: "NexxtPropertyCard",
 	__name: "PropertyCard",
 	props: {
@@ -4008,10 +4016,10 @@ var cr = /* @__PURE__ */ p({
 				src: A(Ei),
 				alt: "Woning placeholder",
 				loading: "lazy",
-				class: "h-full w-full object-cover"
+				class: "size-full object-cover"
 			}, null, 8, Oi), c("div", ki, [f(Q, {
 				name: "house",
-				class: "text-6xl text-white drop-shadow"
+				class: "text-6xl text-white drop-shadow-sm"
 			})])])]),
 			key: "0"
 		}]), 1032, ["image", "image-alt"]));
@@ -4278,7 +4286,7 @@ var cr = /* @__PURE__ */ p({
 	}
 }), ta = ["disabled", "aria-pressed"], na = {
 	key: 0,
-	class: "absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow"
+	class: "absolute -top-2 -right-2 flex size-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow-sm"
 }, ra = /* @__PURE__ */ p({
 	name: "NexxtSelectableOption",
 	__name: "SelectableOption",
@@ -4361,7 +4369,7 @@ var cr = /* @__PURE__ */ p({
 			e.notificationCount ? (w(), s("span", ca, ", " + k(e.notificationCount) + " notifications", 1)) : o("", !0)
 		], 10, ia));
 	}
-}), ua = { class: "animate-pulse rounded bg-gray-200" }, da = /* @__PURE__ */ p({
+}), ua = { class: "animate-pulse rounded-sm bg-gray-200" }, da = /* @__PURE__ */ p({
 	name: "NexxtSkeleton",
 	__name: "Skeleton",
 	setup(e) {
@@ -4376,9 +4384,9 @@ var cr = /* @__PURE__ */ p({
 			class: "inline-flex w-80 flex-col items-start justify-start rounded-t-lg bg-white",
 			role: "status",
 			"aria-label": e.ariaLabel
-		}, [f(da, { class: "h-40 w-full rounded-tl-lg rounded-tr-lg rounded-b-none" }), c("div", pa, [c("div", ma, [
+		}, [f(da, { class: "h-40 w-full rounded-t-lg rounded-b-none" }), c("div", pa, [c("div", ma, [
 			f(da, { class: "h-4 w-24" }),
-			f(da, { class: "h-4 w-4" }),
+			f(da, { class: "size-4" }),
 			f(da, { class: "h-4 w-28" })
 		]), f(da, { class: "h-4 w-36" })])], 8, fa));
 	}
@@ -4525,7 +4533,7 @@ var cr = /* @__PURE__ */ p({
 		}, o = i(() => r.filter((e) => n[e.name]));
 		return (t, n) => (w(), s("ul", ba, [(w(!0), s(e, null, E(o.value, (e) => (w(), s("li", {
 			key: e.name,
-			class: y(["inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white", a[e.name]]),
+			class: y(["inline-flex size-5 items-center justify-center rounded-full outline-1 outline-white", a[e.name]]),
 			"aria-label": e.label
 		}, [f(Q, {
 			name: e.icon,
@@ -4557,7 +4565,7 @@ var cr = /* @__PURE__ */ p({
 			muted: "",
 			playsinline: "",
 			loop: n.value,
-			class: "h-full w-full object-cover",
+			class: "size-full object-cover",
 			poster: Ca,
 			onEndedOnce: r
 		}, null, 40, Ta)], 32));
@@ -4565,7 +4573,7 @@ var cr = /* @__PURE__ */ p({
 }), Da = ["aria-pressed"], Oa = {
 	key: 0,
 	class: "col-start-1 row-span-2 row-start-1"
-}, ka = ["srcset"], Aa = ["src"], ja = ["muted"], Ma = ["src", "type"], Na = { class: "heading-4" }, Pa = { class: "extra-small" }, Fa = /* @__PURE__ */ p({
+}, ka = ["srcset"], Aa = ["src"], ja = ["muted"], Ma = ["src", "type"], Na = { class: "heading-4" }, Pa = { class: "extra-small-normal" }, Fa = /* @__PURE__ */ p({
 	name: "NexxtSocialMediaTemplate",
 	__name: "SocialMediaTemplate",
 	props: {
@@ -4610,14 +4618,14 @@ var cr = /* @__PURE__ */ p({
 			e.mediaType === "image" ? (w(), s("picture", Oa, [c("source", { srcset: e.media }, null, 8, ka), c("img", {
 				src: e.media,
 				alt: "Media content",
-				class: "h-full w-full object-cover object-center"
+				class: "size-full object-cover object-center"
 			}, null, 8, Aa)])) : (w(), s("video", {
 				key: 1,
 				ref_key: "videoRef",
 				ref: r,
 				muted: e.muted,
 				loop: "true",
-				class: "col-start-1 row-span-2 row-start-1 h-full w-full object-cover"
+				class: "col-start-1 row-span-2 row-start-1 size-full object-cover"
 			}, [c("source", {
 				src: e.media,
 				type: a.value
@@ -4626,7 +4634,7 @@ var cr = /* @__PURE__ */ p({
 				name: "check",
 				class: "ml-auto block shrink-0 text-3xl text-white"
 			})], 2)], 2),
-			c("div", { class: y(["goup-hover:opacity-0 z-20 col-start-1 row-start-2 flex items-center px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full", e.variant === "video" ? "bg-purple-500" : "bg-social-media-template-info-bg"]) }, [c("div", null, [c("div", Na, k(e.name), 1), c("div", Pa, k(e.type), 1)]), f(Q, {
+			c("div", { class: y(["z-20 col-start-1 row-start-2 flex items-center px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full group-hover:opacity-0", e.variant === "video" ? "bg-purple-500" : "bg-social-media-template-info-bg"]) }, [c("div", null, [c("div", Na, k(e.name), 1), c("div", Pa, k(e.type), 1)]), f(Q, {
 				name: e.variant === "post" ? "image" : e.variant === "video" ? "play-circle" : "images",
 				class: "mb-1 ml-auto block shrink-0 self-end text-lg"
 			}, null, 8, ["name"])], 2)
@@ -5201,7 +5209,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				"onUpdate:modelValue"
 			])])) : o("", !0), (w(!0), s(e, null, E(t.columns, (e, i) => (w(), s("div", {
 				key: e.key,
-				class: "flex items-center truncate px-4 py-4 extra-small-normal text-slate-700",
+				class: "flex items-center truncate p-4 extra-small-normal text-slate-700",
 				role: "gridcell",
 				"aria-colindex": i + (t.selectable ? 2 : 1)
 			}, [D(r.$slots, L(e.key), {
@@ -5275,16 +5283,29 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			_: 3
 		}));
 	}
-}), Po = { class: "w-full max-w-105 rounded-xl border border-gray-200" }, Fo = { class: "h-38 w-full" }, Io = ["src", "alt"], Lo = {
+}), Po = { class: "block h-38 w-full" }, Fo = ["src"], Io = {
 	key: 1,
 	class: "flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100"
-}, Ro = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, zo = { class: "truncate heading-4 text-gray-900" }, Bo = {
+}, Lo = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, Ro = { class: "truncate heading-4 text-gray-900" }, zo = {
 	key: 0,
 	class: "truncate body-normal text-gray-700"
-}, Vo = {
+}, Bo = {
 	key: 1,
 	class: "mt-3 flex flex-wrap gap-2"
-}, Ho = { class: "body-small text-gray-700" }, Uo = /* @__PURE__ */ p({
+}, Vo = { class: "sr-only" }, Ho = { class: "small-normal text-gray-700" }, Uo = [
+	"aria-label",
+	"aria-pressed",
+	"disabled"
+], Wo = {
+	key: 1,
+	class: "absolute top-4 right-4 z-20"
+}, Go = {
+	key: 2,
+	class: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-xl bg-white/60 opacity-0 backdrop-blur-xs transition-opacity duration-200 ease-out *:pointer-events-auto group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:inset-x-0 pointer-coarse:top-0 pointer-coarse:bottom-auto pointer-coarse:h-38 pointer-coarse:justify-end pointer-coarse:bg-transparent pointer-coarse:p-4 pointer-coarse:opacity-100 pointer-coarse:backdrop-blur-none"
+}, Ko = {
+	key: 3,
+	class: "absolute -top-2 -right-2 z-30 flex size-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow-sm"
+}, qo = /* @__PURE__ */ p({
 	name: "NexxtTemplateCard",
 	__name: "TemplateCard",
 	props: {
@@ -5292,10 +5313,27 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 		title: {},
 		subtitle: { default: void 0 },
 		contentFeatures: { default: () => [] },
-		messages: { default: () => ({}) }
+		messages: { default: () => ({}) },
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		checkmark: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
 	},
-	setup(t) {
-		let n = {
+	emits: ["select"],
+	setup(t, { emit: n }) {
+		let r = {
 			references: {
 				icon: "house-circle-check",
 				textColor: "text-cornflower-blue-500",
@@ -5316,41 +5354,68 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				textColor: "text-green-500",
 				backgroundColor: "bg-green-50"
 			}
-		}, r = {
+		}, a = {
 			references: "Referenties",
 			valuation: "Waardebepaling",
 			reviews: "Reviews",
 			packages: "Courtage"
-		}, a = t, l = i(() => ({
-			...r,
-			...a.messages
-		}));
-		return (r, i) => (w(), s("div", Po, [c("picture", Fo, [t.image ? (w(), s("img", {
-			key: 0,
-			src: t.image,
-			alt: t.title,
-			loading: "lazy",
-			class: "w-full rounded-t-xl object-cover"
-		}, null, 8, Io)) : (w(), s("div", Lo, [f(Q, {
-			name: "image",
-			class: "text-4xl text-gray-400"
-		})]))]), c("div", Ro, [
-			c("h3", zo, k(t.title), 1),
-			t.subtitle ? (w(), s("p", Bo, k(t.subtitle), 1)) : o("", !0),
-			t.contentFeatures.length ? (w(), s("ul", Vo, [(w(!0), s(e, null, E(t.contentFeatures, (e) => (w(), s("li", { key: e }, [f(No, null, {
-				tooltip: B(() => [c("span", Ho, k(l.value[e]), 1)]),
-				default: B(() => [c("div", { class: y([[n[e].backgroundColor, n[e].textColor], "flex size-8 items-center justify-center rounded-full"]) }, [f(Q, { name: n[e].icon }, null, 8, ["name"])], 2)]),
-				_: 2
-			}, 1024)]))), 128))])) : o("", !0)
-		])]));
+		}, l = t, u = n, d = i(() => ({
+			...a,
+			...l.messages
+		})), p = () => {
+			l.selectable && !l.disabled && u("select");
+		};
+		return (n, i) => (w(), s("div", { class: y(["group relative size-full max-w-105 rounded-xl border border-gray-200 transition-colors duration-200 ease-out", [t.selectable && t.selected && "border-cornflower-blue-500", t.selectable && !t.selected && !t.disabled && "hover:border-gray-300"]]) }, [
+			c("div", { class: y(["relative z-10 transition-opacity duration-200 ease-out", [
+				t.selectable && "pointer-events-none",
+				t.selectable && t.disabled && "opacity-50",
+				n.$slots.overlay && !(t.selectable && t.disabled) && "group-focus-within:opacity-40 group-hover:opacity-40 pointer-coarse:opacity-100!"
+			]]) }, [c("picture", Po, [t.image ? (w(), s("img", {
+				key: 0,
+				src: t.image,
+				alt: "",
+				loading: "lazy",
+				class: "h-38 w-full rounded-t-xl object-cover"
+			}, null, 8, Fo)) : (w(), s("div", Io, [f(Q, {
+				name: "image",
+				class: "text-4xl text-gray-400"
+			})]))]), c("div", Lo, [
+				c("h3", Ro, k(t.title), 1),
+				t.subtitle ? (w(), s("p", zo, k(t.subtitle), 1)) : o("", !0),
+				t.contentFeatures.length ? (w(), s("ul", Bo, [(w(!0), s(e, null, E(t.contentFeatures, (e) => (w(), s("li", { key: e }, [f(No, null, {
+					tooltip: B(() => [c("span", Ho, k(d.value[e]), 1)]),
+					default: B(() => [c("div", {
+						class: y([[r[e].backgroundColor, r[e].textColor], "pointer-events-auto flex size-8 items-center justify-center rounded-full"]),
+						onClick: p
+					}, [f(Q, { name: r[e].icon }, null, 8, ["name"]), c("span", Vo, k(d.value[e]), 1)], 2)]),
+					_: 2
+				}, 1024)]))), 128))])) : o("", !0)
+			])], 2),
+			t.selectable ? (w(), s("button", {
+				key: 0,
+				type: "button",
+				"aria-label": t.title,
+				"aria-pressed": t.selected,
+				disabled: t.disabled || void 0,
+				class: "absolute inset-0 cursor-pointer rounded-xl focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500 disabled:cursor-not-allowed",
+				onClick: p
+			}, null, 8, Uo)) : o("", !0),
+			n.$slots.actions ? (w(), s("div", Wo, [D(n.$slots, "actions", { selected: t.selected })])) : o("", !0),
+			n.$slots.overlay && !(t.selectable && t.disabled) ? (w(), s("div", Go, [D(n.$slots, "overlay", { selected: t.selected })])) : o("", !0),
+			t.selectable && t.selected && t.checkmark ? (w(), s("span", Ko, [f(Q, {
+				name: "check",
+				type: "solid",
+				class: "text-xs"
+			})])) : o("", !0)
+		], 2));
 	}
-}), Wo = {
+}), Jo = {
 	key: 0,
 	class: "text-brick-500"
-}, Go = ["rows", "placeholder"], Ko = {
+}, Yo = ["rows", "placeholder"], Xo = {
 	key: 1,
 	class: "small-normal text-brick-400"
-}, qo = /* @__PURE__ */ p({
+}, Zo = /* @__PURE__ */ p({
 	name: "NexxtTextarea",
 	inheritAttrs: !1,
 	__name: "Textarea",
@@ -5406,7 +5471,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				key: 0,
 				class: "justify-start small-normal text-gray-700",
 				for: n
-			}, [d(k(e.label) + " ", 1), e.required ? (w(), s("span", Wo, "*")) : o("", !0)])) : o("", !0),
+			}, [d(k(e.label) + " ", 1), e.required ? (w(), s("span", Jo, "*")) : o("", !0)])) : o("", !0),
 			V(c("textarea", _({
 				id: n,
 				ref_key: "textareaEl",
@@ -5417,21 +5482,21 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				placeholder: e.placeholder,
 				class: ["min-h-10 w-full rounded-lg border px-3 py-2 small-normal text-gray-900 transition-colors outline-none placeholder:text-gray-400 focus:border-cornflower-blue-500", [e.error ? "border-brick-400" : "border-gray-200", e.autosize || e.resize === "none" ? "resize-none" : "resize-y"]],
 				onInput: p
-			}), null, 16, Go), [[L, r.value]]),
-			e.error && e.errorMessage ? (w(), s("p", Ko, k(e.errorMessage), 1)) : o("", !0)
+			}), null, 16, Yo), [[L, r.value]]),
+			e.error && e.errorMessage ? (w(), s("p", Xo, k(e.errorMessage), 1)) : o("", !0)
 		], 6));
 	}
-}), Jo = [
+}), Qo = [
 	"data-event-source",
 	"data-event-date",
 	"date-event-type"
-], Yo = { class: "heading-3" }, Xo = ["href"], Zo = { class: "truncate group-hover:underline" }, Qo = {
+], $o = { class: "heading-3" }, es = ["href"], ts = { class: "truncate group-hover:underline" }, ns = {
 	key: 1,
 	class: "mt-1 text-sm text-gray-500"
-}, $o = {
+}, rs = {
 	key: 2,
 	class: "mt-1 text-sm text-gray-500"
-}, es = /* @__PURE__ */ p({
+}, is = /* @__PURE__ */ p({
 	name: "NexxtTimelineEvent",
 	__name: "TimelineEvent",
 	props: {
@@ -5469,24 +5534,24 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			"data-event-date": e.event.happened_at,
 			"date-event-type": e.event.type,
 			class: y(["relative z-20 flex flex-wrap items-center gap-x-6 gap-y-2", { "justify-end": l.value }])
-		}, [c("div", { class: y(["w-full px-24 extra-small-normal text-gray-600", { "text-right": l.value }]) }, k(a.value), 3), c("div", { class: y(["flex w-full shrink-0 items-center gap-6", { "flex-row-reverse": l.value }]) }, [c("div", { class: y(["flex h-10 w-10 shrink-0 items-center justify-center rounded-full", [n.value.color]]) }, [f(Q, {
+		}, [c("div", { class: y(["w-full px-24 extra-small-normal text-gray-600", { "text-right": l.value }]) }, k(a.value), 3), c("div", { class: y(["flex w-full shrink-0 items-center gap-6", { "flex-row-reverse": l.value }]) }, [c("div", { class: y(["flex size-10 shrink-0 items-center justify-center rounded-full", [n.value.color]]) }, [f(Q, {
 			name: n.value.icon,
-			class: "flex h-6 w-6 text-xl text-white"
+			class: "flex size-6 text-xl text-white"
 		}, null, 8, ["name"])], 2), c("div", { class: y(["flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8", { "max-w-lg": e.splitView }]) }, [
-			c("span", Yo, k(n.value.label), 1),
+			c("span", $o, k(n.value.label), 1),
 			e.event.url ? (w(), s("a", {
 				key: 0,
 				href: e.event.url,
 				target: "_blank",
 				class: "group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
-			}, [c("span", Zo, k(e.event.description || e.event.url), 1), f(Q, {
+			}, [c("span", ts, k(e.event.description || e.event.url), 1), f(Q, {
 				name: "external-link",
-				class: "ml-1 h-4 w-4 text-gray-950"
-			})], 8, Xo)) : e.event.description ? (w(), s("span", Qo, k(e.event.description), 1)) : o("", !0),
-			e.event.request_reason ? (w(), s("span", $o, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
-		], 2)], 2)], 10, Jo));
+				class: "ml-1 size-4 text-gray-950"
+			})], 8, es)) : e.event.description ? (w(), s("span", ns, k(e.event.description), 1)) : o("", !0),
+			e.event.request_reason ? (w(), s("span", rs, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
+		], 2)], 2)], 10, Qo));
 	}
-}), ts = { class: "relative z-10" }, ns = { class: "flex items-center justify-between px-4 py-2" }, rs = { class: "flex gap-1" }, is = { class: "text-sm" }, as = { class: "flex gap-1" }, os = { class: "text-sm" }, ss = /* @__PURE__ */ p({
+}), as = { class: "relative z-10" }, os = { class: "flex items-center justify-between px-4 py-2" }, ss = { class: "flex gap-1" }, cs = { class: "text-sm" }, ls = { class: "flex gap-1" }, us = { class: "text-sm" }, ds = /* @__PURE__ */ p({
 	name: "NexxtTimelineLanes",
 	__name: "TimelineLanes",
 	props: {
@@ -5496,26 +5561,26 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 		rightTooltip: { default: "Vanuit relatie" }
 	},
 	setup(e) {
-		return (t, n) => (w(), s("div", ts, [c("div", ns, [c("span", rs, [d(k(e.leftLabel) + " ", 1), e.leftTooltip ? (w(), a(No, { key: 0 }, {
-			tooltip: B(() => [c("span", is, k(e.leftTooltip), 1)]),
+		return (t, n) => (w(), s("div", as, [c("div", os, [c("span", ss, [d(k(e.leftLabel) + " ", 1), e.leftTooltip ? (w(), a(No, { key: 0 }, {
+			tooltip: B(() => [c("span", cs, k(e.leftTooltip), 1)]),
 			default: B(() => [f(Q, {
 				name: "circle-info",
-				class: "h-4 w-4 text-xs text-gray-600"
+				class: "size-4 text-xs text-gray-600"
 			})]),
 			_: 1
-		})) : o("", !0)]), c("span", as, [d(k(e.rightLabel) + " ", 1), e.rightTooltip ? (w(), a(No, { key: 0 }, {
-			tooltip: B(() => [c("span", os, k(e.rightTooltip), 1)]),
+		})) : o("", !0)]), c("span", ls, [d(k(e.rightLabel) + " ", 1), e.rightTooltip ? (w(), a(No, { key: 0 }, {
+			tooltip: B(() => [c("span", us, k(e.rightTooltip), 1)]),
 			default: B(() => [f(Q, {
 				name: "circle-info",
-				class: "h-4 w-4 text-xs text-gray-600"
+				class: "size-4 text-xs text-gray-600"
 			})]),
 			_: 1
 		})) : o("", !0)])])]));
 	}
-}), cs = ["data-phase"], ls = { class: "text-sm font-semibold tracking-wider uppercase" }, us = { class: "mt-2 font-medium text-xs text-gray-500" }, ds = {
+}), fs = ["data-phase"], ps = { class: "text-sm font-semibold tracking-wider uppercase" }, ms = { class: "mt-2 font-medium text-xs text-gray-500" }, hs = {
 	key: 1,
 	class: "h-1"
-}, fs = /* @__PURE__ */ p({
+}, gs = /* @__PURE__ */ p({
 	name: "NexxtTimelinePhaseblock",
 	__name: "TimelinePhaseblock",
 	props: {
@@ -5551,13 +5616,13 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			class: "relative z-10 flex flex-col gap-16",
 			"data-phase": t.phase.phase.value
 		}, [
-			t.index === 0 && t.isSplitView ? (w(), a(ss, { key: 0 })) : o("", !0),
+			t.index === 0 && t.isSplitView ? (w(), a(ds, { key: 0 })) : o("", !0),
 			c("div", { class: y(["absolute bottom-0 left-5 w-0 border-l", [A(Z)[t.phase.phase.value].color, t.index === 0 && t.isSplitView ? "top-10" : "top-0"]]) }, null, 2),
 			t.isSplitView ? (w(), s("div", {
 				key: 1,
 				class: y(["absolute right-5 bottom-0 w-0 border-l", [A(Z)[t.phase.phase.value].color, t.index === 0 ? "top-10" : "top-0"]])
 			}, null, 2)) : o("", !0),
-			(w(!0), s(e, null, E(t.phase.events, (e) => (w(), a(es, {
+			(w(!0), s(e, null, E(t.phase.events, (e) => (w(), a(is, {
 				key: e.id,
 				event: e,
 				"split-view": t.isSplitView
@@ -5566,26 +5631,26 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				key: 2,
 				class: y(["relative flex flex-col items-center pt-8 pb-24 text-center", { "pl-16": !t.isSplitView }])
 			}, [
-				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A(Z)[t.phase.phase.value].bgColor, A(Z)[t.phase.phase.value].textColor]]) }, [c("span", ls, k(A(Z)[t.phase.phase.value].label), 1), d() ? (w(), a(Q, {
+				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A(Z)[t.phase.phase.value].bgColor, A(Z)[t.phase.phase.value].textColor]]) }, [c("span", ps, k(A(Z)[t.phase.phase.value].label), 1), d() ? (w(), a(Q, {
 					key: 0,
 					name: d() === "up" ? "arrow-up" : "arrow-down",
-					class: "h-4 w-4 text-white"
+					class: "size-4 text-white"
 				}, null, 8, ["name"])) : o("", !0)], 2),
-				c("span", us, k(u()), 1),
+				c("span", ms, k(u()), 1),
 				t.isSplitView ? (w(), s("div", {
 					key: 0,
 					class: y(["mt-4 h-px w-[75%]", A(Z)[t.phase.phase.value].bgColor])
 				}, null, 2)) : o("", !0),
-				t.isLast ? o("", !0) : (w(), s("div", ds)),
-				c("div", { class: y(["absolute top-0 bottom-0 left-5 w-px bg-linear-to-b", r.value]) }, null, 2),
+				t.isLast ? o("", !0) : (w(), s("div", hs)),
+				c("div", { class: y(["absolute inset-y-0 left-5 w-px bg-linear-to-b", r.value]) }, null, 2),
 				t.isSplitView ? (w(), s("div", {
 					key: 2,
-					class: y(["absolute top-0 right-5 bottom-0 w-px bg-linear-to-b", r.value])
+					class: y(["absolute inset-y-0 right-5 w-px bg-linear-to-b", r.value])
 				}, null, 2)) : o("", !0)
 			], 2))
-		], 8, cs));
+		], 8, fs));
 	}
-}), ps = { class: "relative z-10 flex flex-col gap-16" }, ms = /* @__PURE__ */ p({
+}), _s = { class: "relative z-10 flex flex-col gap-16" }, vs = /* @__PURE__ */ p({
 	name: "NexxtTimelineTrack",
 	__name: "TimelineTrack",
 	props: {
@@ -5606,8 +5671,8 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 	},
 	setup(t) {
 		let n = t, r = i(() => n.splitView && n.showLanes);
-		return (n, i) => (w(), s("div", ps, [
-			r.value ? (w(), a(ss, {
+		return (n, i) => (w(), s("div", _s, [
+			r.value ? (w(), a(ds, {
 				key: 0,
 				"left-label": t.leftLabel,
 				"right-label": t.rightLabel,
@@ -5624,24 +5689,24 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				key: 1,
 				class: y(["absolute right-5 bottom-0 w-0 border-l", [t.color, r.value ? "top-10" : "top-0"]])
 			}, null, 2)) : o("", !0),
-			D(n.$slots, "default", {}, () => [(w(!0), s(e, null, E(t.events, (e) => (w(), a(es, {
+			D(n.$slots, "default", {}, () => [(w(!0), s(e, null, E(t.events, (e) => (w(), a(is, {
 				key: e.id,
 				event: e,
 				"split-view": t.splitView
 			}, null, 8, ["event", "split-view"]))), 128))])
 		]));
 	}
-}), hs = ["role", "aria-live"], gs = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, _s = {
+}), ys = ["role", "aria-live"], bs = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, xs = {
 	key: 1,
 	class: "body-normal"
-}, vs = ["aria-label"], ys = {
+}, Ss = ["aria-label"], Cs = {
 	key: 0,
 	class: "absolute inset-0 -rotate-90 text-gray-400",
 	viewBox: "0 0 24 24",
 	width: "32",
 	height: "32",
 	"aria-hidden": "true"
-}, bs = 56.55, xs = /*#__PURE__*/ Un(/* @__PURE__ */ p({
+}, ws = 56.55, Ts = /*#__PURE__*/ Un(/* @__PURE__ */ p({
 	name: "NexxtToast",
 	__name: "Toast",
 	props: {
@@ -5656,7 +5721,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 	},
 	emits: ["dismiss"],
 	setup(e, { emit: t }) {
-		M((e) => ({ b622135e: bs }));
+		M((e) => ({ fa0d20de: ws }));
 		let n = {
 			info: {
 				icon: "info",
@@ -5678,47 +5743,52 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				iconBg: "bg-brick-500",
 				titleColor: "text-brick-600"
 			}
-		}, r = t, a = T(!1), l = i(() => n[e.variant]), u = null, d = e.autoClose, p = 0, m = (e) => {
-			p = Date.now(), u = setTimeout(() => r("dismiss"), e);
-		}, h = () => {
-			u && (clearTimeout(u), u = null, d -= Date.now() - p, a.value = !0);
+		}, r = {
+			info: "toast-info",
+			success: "toast-success",
+			warning: "toast-warning",
+			error: "toast-error"
+		}, a = t, l = T(!1), u = i(() => n[e.variant]), d = null, p = e.autoClose, m = 0, h = (e) => {
+			m = Date.now(), d = setTimeout(() => a("dismiss"), e);
 		}, g = () => {
-			d <= 0 || (a.value = !1, m(d));
+			d && (clearTimeout(d), d = null, p -= Date.now() - m, l.value = !0);
+		}, _ = () => {
+			p <= 0 || (l.value = !1, h(p));
 		};
 		return S(() => {
-			e.autoClose > 0 && m(e.autoClose);
+			e.autoClose > 0 && h(e.autoClose);
 		}), C(() => {
-			u && clearTimeout(u);
+			d && clearTimeout(d);
 		}), (t, n) => (w(), s("div", {
 			role: e.variant === "error" ? "alert" : "status",
 			"aria-live": e.variant === "error" ? "assertive" : "polite",
 			"aria-atomic": "true",
-			class: y(["toast flex w-100 gap-4 rounded-xl bg-white shadow-md", `toast-${e.variant}`]),
-			onMouseenter: n[1] ||= (t) => e.autoClose ? h() : void 0,
-			onMouseleave: n[2] ||= (t) => e.autoClose ? g() : void 0
+			class: y(["toast flex w-100 gap-4 rounded-xl bg-white shadow-md", r[e.variant]]),
+			onMouseenter: n[1] ||= (t) => e.autoClose ? g() : void 0,
+			onMouseleave: n[2] ||= (t) => e.autoClose ? _() : void 0
 		}, [
 			c("div", {
 				"aria-hidden": "true",
-				class: y(["flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white", l.value.iconBg])
+				class: y(["flex size-8 shrink-0 items-center justify-center rounded-full text-white", u.value.iconBg])
 			}, [f(Q, {
-				name: l.value.icon,
+				name: u.value.icon,
 				class: "text-xl"
 			}, null, 8, ["name"])], 2),
-			c("div", gs, [
+			c("div", bs, [
 				e.title ? (w(), s("p", {
 					key: 0,
-					class: y(["heading-4", l.value.titleColor])
+					class: y(["heading-4", u.value.titleColor])
 				}, k(e.title), 3)) : o("", !0),
-				e.message ? (w(), s("p", _s, k(e.message), 1)) : o("", !0),
+				e.message ? (w(), s("p", xs, k(e.message), 1)) : o("", !0),
 				D(t.$slots, "default", {}, void 0, !0)
 			]),
 			e.dismissible ? (w(), s("button", {
 				key: 0,
 				type: "button",
-				class: "relative flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none",
+				class: "relative flex size-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none",
 				"aria-label": e.autoClose ? `Sluiten (verdwijnt automatisch na ${e.autoClose / 1e3} seconden)` : "Sluiten",
-				onClick: n[0] ||= (e) => r("dismiss")
-			}, [e.autoClose ? (w(), s("svg", ys, [c("circle", {
+				onClick: n[0] ||= (e) => a("dismiss")
+			}, [e.autoClose ? (w(), s("svg", Cs, [c("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9",
@@ -5726,19 +5796,19 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				stroke: "currentColor",
 				"stroke-width": "1.2",
 				"stroke-linecap": "round",
-				"stroke-dasharray": bs,
+				"stroke-dasharray": ws,
 				class: "timer-circle",
 				style: x({
 					animationDuration: `${e.autoClose}ms`,
-					animationPlayState: a.value ? "paused" : "running"
+					animationPlayState: l.value ? "paused" : "running"
 				})
 			}, null, 4)])) : o("", !0), f(Q, {
 				name: "xmark",
 				class: "text-sm"
-			})], 8, vs)) : o("", !0)
-		], 42, hs));
+			})], 8, Ss)) : o("", !0)
+		], 42, ys));
 	}
-}), [["__scopeId", "data-v-d13bb383"]]), Ss = /* @__PURE__ */ p({
+}), [["__scopeId", "data-v-7e3c5bda"]]), Es = /* @__PURE__ */ p({
 	name: "NexxtToaster",
 	__name: "Toaster",
 	props: {
@@ -5771,7 +5841,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			default: B(() => [(w(!0), s(e, null, E(n.toasts, (e) => (w(), s("div", {
 				key: e.id,
 				class: "pointer-events-auto"
-			}, [f(xs, _({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
+			}, [f(Ts, _({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
 			_: 1
 		}, 8, [
 			"class",
@@ -5779,19 +5849,19 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			"leave-to-class"
 		])], 2)]));
 	}
-}), Cs = { class: "flex flex-col gap-1" }, ws = {
+}), Ds = { class: "flex flex-col gap-1" }, Os = {
 	key: 0,
 	class: "justify-start small-normal text-gray-700"
-}, Ts = ["onClick"], Es = {
+}, ks = ["onClick"], As = {
 	key: 1,
 	class: "extra-small-semibold"
-}, Ds = ["onClick"], Os = {
+}, js = ["onClick"], Ms = {
 	key: 1,
 	class: "extra-small-semibold"
-}, ks = {
+}, Ns = {
 	key: 1,
 	class: "extra-small-semibold"
-}, As = /* @__PURE__ */ p({
+}, Ps = /* @__PURE__ */ p({
 	name: "NexxtToggleGroup",
 	__name: "ToggleGroup",
 	props: /*@__PURE__*/ g({
@@ -5822,7 +5892,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 		};
 		return R(r, async () => await m()), ot(i, () => m()), S(async () => {
 			await document.fonts.ready, await m(), await v(), p.value = !0;
-		}), (n, m) => (w(), s("div", Cs, [t.label ? (w(), s("label", ws, k(t.label), 1)) : o("", !0), c("div", {
+		}), (n, m) => (w(), s("div", Ds, [t.label ? (w(), s("label", Os, k(t.label), 1)) : o("", !0), c("div", {
 			ref_key: "containerRef",
 			ref: i,
 			class: y(["relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1", { "flex-wrap": !t.equalWidth }])
@@ -5846,7 +5916,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				}, [n.icon ? (w(), a(Q, {
 					key: 0,
 					name: n.icon
-				}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Es, k(n.label), 1)) : o("", !0)], 10, Ts)]),
+				}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", As, k(n.label), 1)) : o("", !0)], 10, ks)]),
 				_: 2
 			}, 1024)) : (w(), s("button", {
 				key: 1,
@@ -5858,7 +5928,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			}, [n.icon ? (w(), a(Q, {
 				key: 0,
 				name: n.icon
-			}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Os, k(n.label), 1)) : o("", !0)], 10, Ds))], 64))), 128)),
+			}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Ms, k(n.label), 1)) : o("", !0)], 10, js))], 64))), 128)),
 			c("div", {
 				"aria-hidden": "true",
 				class: y(["pointer-events-none absolute inset-0 z-20 flex gap-1 p-1", [p.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : "", { "flex-wrap": !t.equalWidth }]]),
@@ -5869,29 +5939,29 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			}, [e.icon ? (w(), a(Q, {
 				key: 0,
 				name: e.icon
-			}, null, 8, ["name"])) : o("", !0), e.label ? (w(), s("span", ks, k(e.label), 1)) : o("", !0)], 2))), 128))], 6)
+			}, null, 8, ["name"])) : o("", !0), e.label ? (w(), s("span", Ns, k(e.label), 1)) : o("", !0)], 2))), 128))], 6)
 		], 2)]));
 	}
-}), js = [
+}), Fs = [
 	"src",
 	"loop",
 	"aria-label"
-], Ms = {
+], Is = {
 	key: 0,
 	role: "alert",
 	class: "absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
-}, Ns = { class: "heading-4" }, Ps = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Fs = {
+}, Ls = { class: "heading-4" }, Rs = { class: "max-w-xs truncate extra-small-normal text-white/50" }, zs = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
-}, Is = {
-	class: "flex h-16 w-16 items-center justify-center rounded-full bg-black/50 text-white",
+}, Bs = {
+	class: "flex size-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
-}, Ls = [
+}, Vs = [
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext"
-], Rs = { class: "flex items-center gap-2" }, zs = ["aria-label"], Bs = { class: "extra-small-normal text-white/70 tabular-nums" }, Vs = ["aria-label"], Hs = ["aria-label"], Us = /* @__PURE__ */ p({
+], Hs = { class: "flex items-center gap-2" }, Us = ["aria-label"], Ws = { class: "extra-small-normal text-white/70 tabular-nums" }, Gs = ["aria-label"], Ks = ["aria-label"], qs = /* @__PURE__ */ p({
 	__name: "VideoPlayer",
 	props: {
 		src: {},
@@ -5972,15 +6042,15 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				"aria-label": a.value.video,
 				onError: r[0] ||= (e) => E.value = !0,
 				onClick: r[1] ||= (t) => e.showControls === !1 ? void 0 : I()
-			}, null, 42, js),
-			E.value ? (w(), s("div", Ms, [
+			}, null, 42, Fs),
+			E.value ? (w(), s("div", Is, [
 				f(Q, {
 					name: "circle-exclamation",
 					class: "text-3xl text-red-400",
 					"aria-hidden": "true"
 				}),
-				c("p", Ns, k(a.value.error), 1),
-				c("p", Ps, k(e.src), 1)
+				c("p", Ls, k(a.value.error), 1),
+				c("p", Rs, k(e.src), 1)
 			])) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-100 ease-out",
@@ -5988,7 +6058,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: B(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", Fs, [c("div", Is, [f(Q, {
+				default: B(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", zs, [c("div", Bs, [f(Q, {
 					name: D.value,
 					class: "text-2xl"
 				}, null, 8, ["name"])])])) : o("", !0)]),
@@ -6028,45 +6098,45 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 					style: x({ width: `${ee.value}%` })
 				}, null, 4),
 				c("div", {
-					class: "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-sapphire-100 opacity-0 shadow transition-opacity group-hover/player:opacity-100",
+					class: "absolute top-1/2 size-3 -translate-1/2 rounded-full bg-sapphire-100 opacity-0 shadow-sm transition-opacity group-hover/player:opacity-100",
 					style: x({ left: `${ee.value}%` })
 				}, null, 4)
-			], 40, Ls), c("div", Rs, [
+			], 40, Vs), c("div", Hs, [
 				c("button", {
 					type: "button",
 					"aria-label": A(u) ? a.value.pause : a.value.play,
-					class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
+					class: "flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
 					onClick: I
 				}, [f(Q, {
 					name: A(u) ? "pause" : "play",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, zs),
-				c("span", Bs, k(F(W.value)) + " / " + k(F(A(m))), 1),
+				}, null, 8, ["name"])], 8, Us),
+				c("span", Ws, k(F(W.value)) + " / " + k(F(A(m))), 1),
 				r[7] ||= c("div", { class: "flex-1" }, null, -1),
 				c("button", {
 					type: "button",
 					"aria-label": A(h) ? a.value.unmute : a.value.mute,
-					class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
+					class: "flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
 					onClick: L
 				}, [f(Q, {
 					name: A(h) ? "volume-xmark" : "volume-high",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Vs),
+				}, null, 8, ["name"])], 8, Gs),
 				c("button", {
 					type: "button",
 					"aria-label": A(_) ? a.value.exitFullscreen : a.value.enterFullscreen,
-					class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
+					class: "flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
 					onClick: r[4] ||= (...e) => A(v) && A(v)(...e)
 				}, [f(Q, {
 					name: A(_) ? "compress" : "expand",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Hs)
+				}, null, 8, ["name"])], 8, Ks)
 			])], 4)) : o("", !0)
 		], 32));
 	}
 });
 //#endregion
-export { st as EVENT_CONFIG_MAP, ct as NexxtAnimatedNumber, mt as NexxtAnnouncement, yt as NexxtAvatar, xt as NexxtButton, $t as NexxtCalendar, nn as NexxtCard, an as NexxtCheckbox, on as NexxtChip, xn as NexxtColorPicker, Hn as NexxtCombobox, Vn as NexxtComboboxPanel, Yn as NexxtContactInfoCard, cr as NexxtCountrySelect, fr as NexxtCustomerJourneyTile, pr as NexxtDatePicker, xr as NexxtDoughnutChart, Er as NexxtDropdownButton, kr as NexxtEnergyLabel, $ as NexxtFloatingPanel, Nr as NexxtHeader, Q as NexxtIcon, Fr as NexxtInfoBlock, On as NexxtInputField, Ur as NexxtInputSelect, Gr as NexxtLoader, Yr as NexxtModal, Zr as NexxtModalFooter, ni as NexxtPageContainer, ri as NexxtPagination, si as NexxtPresenceIndicator, yi as NexxtProgressBar, Ai as NexxtPropertyCard, Ti as NexxtPropertyListing, Ki as NexxtReferenceCard, ea as NexxtSelect, ra as NexxtSelectableOption, la as NexxtSidebarMenuItem, da as NexxtSkeleton, ha as NexxtSkeletonPropertyCard, ya as NexxtSlider, Sa as NexxtSocialIcons, Ea as NexxtSocialMediaCustomTemplate, Fa as NexxtSocialMediaTemplate, Ya as NexxtSocialMediaType, co as NexxtSource, gt as NexxtSquircle, lo as NexxtStepperHeader, fo as NexxtSwitch, yo as NexxtTabbedContent, Mo as NexxtTable, ho as NexxtTabs, Uo as NexxtTemplateCard, qo as NexxtTextarea, es as NexxtTimelineEvent, ss as NexxtTimelineLanes, fs as NexxtTimelinePhaseblock, ms as NexxtTimelineTrack, xs as NexxtToast, Ss as NexxtToaster, As as NexxtToggleGroup, No as NexxtTooltip, Us as NexxtVideoPlayer, Z as PHASE_MAP, ao as SOURCE_MAP };
+export { st as EVENT_CONFIG_MAP, ct as NexxtAnimatedNumber, mt as NexxtAnnouncement, yt as NexxtAvatar, xt as NexxtButton, $t as NexxtCalendar, nn as NexxtCard, an as NexxtCheckbox, on as NexxtChip, xn as NexxtColorPicker, Hn as NexxtCombobox, Vn as NexxtComboboxPanel, Yn as NexxtContactInfoCard, cr as NexxtCountrySelect, fr as NexxtCustomerJourneyTile, pr as NexxtDatePicker, xr as NexxtDoughnutChart, Er as NexxtDropdownButton, kr as NexxtEnergyLabel, $ as NexxtFloatingPanel, Nr as NexxtHeader, Q as NexxtIcon, Fr as NexxtInfoBlock, On as NexxtInputField, Ur as NexxtInputSelect, Gr as NexxtLoader, Yr as NexxtModal, Zr as NexxtModalFooter, ni as NexxtPageContainer, ri as NexxtPagination, si as NexxtPresenceIndicator, yi as NexxtProgressBar, Ai as NexxtPropertyCard, Ti as NexxtPropertyListing, Ki as NexxtReferenceCard, ea as NexxtSelect, ra as NexxtSelectableOption, la as NexxtSidebarMenuItem, da as NexxtSkeleton, ha as NexxtSkeletonPropertyCard, ya as NexxtSlider, Sa as NexxtSocialIcons, Ea as NexxtSocialMediaCustomTemplate, Fa as NexxtSocialMediaTemplate, Ya as NexxtSocialMediaType, co as NexxtSource, gt as NexxtSquircle, lo as NexxtStepperHeader, fo as NexxtSwitch, yo as NexxtTabbedContent, Mo as NexxtTable, ho as NexxtTabs, qo as NexxtTemplateCard, Zo as NexxtTextarea, is as NexxtTimelineEvent, ds as NexxtTimelineLanes, gs as NexxtTimelinePhaseblock, vs as NexxtTimelineTrack, Ts as NexxtToast, Es as NexxtToaster, Ps as NexxtToggleGroup, No as NexxtTooltip, qs as NexxtVideoPlayer, Z as PHASE_MAP, ao as SOURCE_MAP };