themelia-react-ui 1.0.1 → 2.0.0

package/dist/features/event-calendar.js

@@ -1,18 +1,21 @@
 "use client";
-import { o as e } from "../ui-provider-CftIB6TY.js";
-import { useStrings as t } from "../lib/strings.js";
-import { t as n } from "../utils-C2EKeIw3.js";
-import { n as r } from "../buttons-Co6GavvM.js";
-import { a as i, i as a } from "../typography-Cv8MT-82.js";
-import { r as o, t as s } from "../date-BFNMnrS5.js";
-import { t as c } from "../date-pickers-BPIKLdsD.js";
-import { c as l } from "../choice-inputs-CC7XqPQO.js";
-import { useCallback as u, useMemo as d, useState as f } from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Calendar as g, ChevronLeft as _, ChevronRight as v, ExternalLink as y, User as b, Users as x } from "lucide-react";
-import { addMonths as S, addWeeks as C, eachDayOfInterval as w, endOfMonth as T, endOfWeek as E, format as D, isSameDay as O, isSameMonth as k, isToday as A, isWeekend as j, startOfDay as M, startOfMonth as N, startOfWeek as P, subMonths as F, subWeeks as I } from "date-fns";
+import { _ as e, o as t, s as n } from "../ui-provider-D2_TeLqw.js";
+import { useStrings as r } from "../lib/strings.js";
+import { t as i } from "../utils-Cospvlj1.js";
+import { o as a, s as o } from "../typography-CAr3dQhX.js";
+import { t as s } from "../button-BS3KDg00.js";
+import { t as c } from "../structure-hzCW-XsV.js";
+import { r as l, t as u } from "../date-uf3z37Nm.js";
+import { t as d } from "../field-affordance-recipes-CkOCdE2y.js";
+import { c as f } from "../choice-inputs-DrJ17tpL.js";
+import { t as p } from "../date-pickers-CnFCb0n2.js";
+import { r as m, t as h } from "../control-group-recipes-DBXmfh2E.js";
+import { useCallback as g, useMemo as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { ChevronLeft as S, ChevronRight as C, ExternalLink as w } from "lucide-react";
+import { addMonths as T, addWeeks as E, eachDayOfInterval as D, endOfMonth as O, endOfWeek as k, format as A, isSameDay as j, isSameMonth as M, isToday as N, isWeekend as P, startOfDay as F, startOfMonth as I, startOfWeek as L, subMonths as R, subWeeks as z } from "date-fns";
 //#region src/components/features/event-calendar/event-calendar.types.ts
-var L = {
+var B = {
 	gray: "bg-muted-foreground",
 	red: "bg-destructive",
 	orange: "bg-warning",
@@ -22,10 +25,10 @@ var L = {
 	blue: "bg-info",
 	purple: "bg-primary"
 };
-function R(e) {
+function V(e) {
 	return e?.colorToken ?? "gray";
 }
-var z = {
+var H = {
 	today: "Today",
 	previous: "Previous",
 	next: "Next",
@@ -50,75 +53,75 @@ var z = {
 };
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-event-badge.tsx
-function B({ event: e, category: t, compact: a = !1, onClick: o }) {
-	let s = L[R(t)], c = e.allDay ? null : D(e.startDate, "HH:mm"), l = e.metadata?.calendar_cell_title, u = typeof l == "string" && l.trim() !== "" ? l : e.title, d = c ? `${u} at ${c}` : u;
-	return /* @__PURE__ */ h(r, {
+function U({ event: e, category: t, compact: n = !1, onClick: r }) {
+	let a = B[V(t)], s = e.allDay ? null : A(e.startDate, "HH:mm"), c = e.metadata?.calendar_cell_title, l = typeof c == "string" && c.trim() !== "" ? c : e.title, u = s ? `${l} at ${s}` : l;
+	return /* @__PURE__ */ b("button", {
 		type: "button",
-		tone: "secondary",
-		buttonStyle: "ghost",
-		size: a ? "sm" : "md",
 		onClick: (e) => {
-			e.stopPropagation(), o?.();
+			e.stopPropagation(), r?.();
 		},
-		className: n("event-calendar-event-badge--component", "group/event flex w-full min-w-0 items-center gap-space-xs rounded-radius-md border border-border/60 bg-card px-1.5", "justify-start text-left shadow-none transition-colors hover:bg-accent/50", "max-sm:h-3 max-sm:justify-center max-sm:gap-0 max-sm:border-transparent max-sm:bg-transparent max-sm:px-0", a ? "h-5" : "h-6"),
-		"aria-label": d,
-		title: typeof u == "string" ? u : void 0,
-		children: [
-			/* @__PURE__ */ m("span", {
-				"aria-hidden": "true",
-				className: n("size-1.5 shrink-0 rounded-full", s)
-			}),
-			/* @__PURE__ */ m(i, {
-				tag: "span",
-				size: "xs",
-				weight: "medium",
-				className: "min-w-0 flex-1 truncate max-sm:hidden",
-				children: u
-			}),
-			!!c && /* @__PURE__ */ m(i, {
-				tag: "span",
-				size: "xs",
-				type: "secondary",
-				className: "shrink-0 whitespace-nowrap tabular-nums max-sm:hidden",
-				children: c
-			})
-		]
+		className: i("event-calendar-event-badge--component", d.inline, d.focus, "@container/calendar-event group/calendar-event w-full min-w-0 cursor-pointer text-left text-card-foreground"),
+		"aria-label": u,
+		title: u,
+		children: /* @__PURE__ */ x("span", {
+			className: i("box-border flex w-full min-w-0 items-center gap-space-xs overflow-hidden rounded-radius border border-border bg-card px-space-xs group-hover/calendar-event:bg-accent group-hover/calendar-event:text-accent-foreground", n ? "py-space-2xs" : "py-space-xs", "@max-[4rem]/calendar-event:min-h-action-xs @max-[4rem]/calendar-event:justify-center @max-[4rem]/calendar-event:border-transparent @max-[4rem]/calendar-event:bg-transparent @max-[4rem]/calendar-event:px-0 @max-[4rem]/calendar-event:py-space-2xs"),
+			children: [
+				/* @__PURE__ */ b("span", {
+					"aria-hidden": "true",
+					className: i("size-1.5 shrink-0 rounded-full", a)
+				}),
+				/* @__PURE__ */ b(o, {
+					tag: "span",
+					size: "xs",
+					weight: "medium",
+					className: "hidden min-w-0 flex-1 truncate @min-[4rem]/calendar-event:block",
+					children: l
+				}),
+				!!s && /* @__PURE__ */ b(o, {
+					tag: "span",
+					size: "xs",
+					type: "secondary",
+					className: "hidden shrink-0 whitespace-nowrap tabular-nums @min-[4rem]/calendar-event:inline",
+					children: s
+				})
+			]
+		})
 	});
 }
-B.displayName = "EventCalendarEventBadge";
+U.displayName = "EventCalendarEventBadge";
 //#endregion
 //#region src/components/features/event-calendar/use-event-calendar-data.tsx
-function V(e, t, n, r = {}) {
+function W(e, t, n, r = {}) {
 	let { weekStartsOn: i = 1, showWeekends: a = !0, visibleCategories: o } = r;
-	return d(() => {
-		let r = N(t), s = T(t), c, l;
-		n === "month" ? (c = P(r, { weekStartsOn: i }), l = E(s, { weekStartsOn: i })) : n === "week" ? (c = P(t, { weekStartsOn: i }), l = E(t, { weekStartsOn: i })) : (c = r, l = s);
-		let u = w({
+	return _(() => {
+		let r = I(t), s = O(t), c, l;
+		n === "month" ? (c = L(r, { weekStartsOn: i }), l = k(s, { weekStartsOn: i })) : n === "week" ? (c = L(t, { weekStartsOn: i }), l = k(t, { weekStartsOn: i })) : (c = r, l = s);
+		let u = D({
 			start: c,
 			end: l
 		}), d = o && o.length > 0 ? e.filter((e) => o.includes(e.category)) : e, f = /* @__PURE__ */ new Map();
 		return d.forEach((e) => {
-			let t = M(e.startDate);
+			let t = F(e.startDate);
 			if (Number.isNaN(t.getTime())) return;
 			let n = t;
 			if (e.endDate && !Number.isNaN(e.endDate.getTime())) {
-				let r = M(e.endDate);
+				let r = F(e.endDate);
 				!Number.isNaN(r.getTime()) && r.getTime() >= t.getTime() && (n = r);
 			}
-			w({
+			D({
 				start: t,
 				end: n
 			}).forEach((t) => {
 				let n = t.toISOString().split("T")[0];
 				f.has(n) || f.set(n, []), f.get(n).push(e);
 			});
-		}), u.filter((e) => a || !j(e)).map((e) => {
+		}), u.filter((e) => a || !P(e)).map((e) => {
 			let n = e.toISOString().split("T")[0], r = [...f.get(n) || []].sort((e, t) => e.allDay && !t.allDay ? -1 : !e.allDay && t.allDay ? 1 : e.startDate.getTime() - t.startDate.getTime());
 			return {
 				date: e,
-				isCurrentMonth: k(e, t),
-				isToday: A(e),
-				isWeekend: j(e),
+				isCurrentMonth: M(e, t),
+				isToday: N(e),
+				isWeekend: P(e),
 				events: r,
 				eventCount: r.length,
 				hasMultipleEvents: r.length > 1
@@ -133,69 +136,67 @@ function V(e, t, n, r = {}) {
 		o
 	]);
 }
-function H(e, t) {
+function ee(e, t) {
 	return e.filter((e) => {
-		let n = M(e.startDate), r = e.endDate ? M(e.endDate) : n, i = M(t);
-		return O(i, n) || O(i, r) || i > n && i < r;
+		let n = F(e.startDate), r = e.endDate ? F(e.endDate) : n, i = F(t);
+		return j(i, n) || j(i, r) || i > n && i < r;
 	}).sort((e, t) => e.allDay && !t.allDay ? -1 : !e.allDay && t.allDay ? 1 : e.startDate.getTime() - t.startDate.getTime());
 }
-function U(e, t) {
+function G(e, t) {
 	return e.find((e) => e.id === t);
 }
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-day-cell.tsx
-function W({ data: e, categories: t, maxEvents: a = 3, onClick: o, onEventClick: s, compact: c = !1, strings: l, renderEvent: u }) {
-	let d = {
-		booking: l?.booking ?? z.booking,
-		bookings: l?.bookings ?? z.bookings
-	}, { date: f, isCurrentMonth: p, isToday: g, isWeekend: _, events: v, eventCount: y } = e, b = v.slice(0, a), x = Math.max(0, y - a);
-	return /* @__PURE__ */ m("div", {
-		className: n("event-calendar-day-cell--component", "p-0 relative w-full border-r border-b border-border last:border-r-0 [&:nth-child(7n)]:border-r-0"),
-		children: /* @__PURE__ */ h("div", {
-			onClick: o,
-			className: n("event-calendar-day-cell--surface", "relative w-full min-h-24 p-space-md transition-colors", "hover:bg-accent", "flex flex-col items-start gap-space-xs", g && "h-full bg-accent text-accent-foreground", c && "min-h-20 p-space-xs"),
+function K({ data: e, categories: t, maxEvents: n = 3, onClick: r, onEventClick: a, compact: s = !1, strings: c, renderEvent: l }) {
+	let u = {
+		booking: c?.booking ?? H.booking,
+		bookings: c?.bookings ?? H.bookings
+	}, { date: f, isCurrentMonth: p, isToday: m, isWeekend: h, events: g, eventCount: _ } = e, v = g.slice(0, n), y = Math.max(0, _ - n);
+	return /* @__PURE__ */ b("div", {
+		className: i("event-calendar-day-cell--component", "box-border h-full p-0 relative w-full border-r border-b border-border last:border-r-0 [&:nth-child(7n)]:border-r-0"),
+		children: /* @__PURE__ */ x("div", {
+			onClick: r,
+			className: i("event-calendar-day-cell--surface", "box-border relative h-full w-full min-h-24 p-space-md transition-colors", "hover:bg-accent", "flex flex-col items-start gap-space-xs", m && "h-full bg-accent text-accent-foreground", s && "min-h-20 p-space-xs"),
 			"data-date": f.toISOString(),
-			"data-today": g,
-			"data-weekend": _,
+			"data-today": m,
+			"data-weekend": h,
 			"data-current-month": p,
-			children: [/* @__PURE__ */ m(r, {
+			children: [/* @__PURE__ */ b("button", {
 				type: "button",
-				tone: "secondary",
-				buttonStyle: "ghost",
 				onClick: (e) => {
-					e.stopPropagation(), o();
+					e.stopPropagation(), r();
 				},
-				className: n("event-calendar-day-cell--date", "h-auto px-0 py-0 hover:bg-transparent", "rounded-radius-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:z-10"),
+				className: i("event-calendar-day-cell--date", d.target, d.focus, "text-inherit"),
 				"aria-label": f.toDateString(),
-				children: /* @__PURE__ */ m(i, {
-					className: n("font-normal leading-none", g && "font-semibold", !p && "text-muted-foreground", c && "text-xs"),
+				children: /* @__PURE__ */ b(o, {
+					className: i("font-normal leading-none", m && "font-semibold", !p && "text-muted-foreground", s && "text-xs"),
 					children: f.getDate()
 				})
-			}), /* @__PURE__ */ h("div", {
+			}), /* @__PURE__ */ x("div", {
 				className: "w-full space-y-space-2xs",
-				children: [b.map((n) => {
-					let r = U(t, n.category);
-					return u ? /* @__PURE__ */ m("div", { children: u(n, r) }, n.id) : /* @__PURE__ */ m(B, {
+				children: [v.map((n) => {
+					let i = G(t, n.category);
+					return l ? /* @__PURE__ */ b("div", { children: l(n, i) }, n.id) : /* @__PURE__ */ b(U, {
 						event: n,
-						category: r,
-						compact: c || e.hasMultipleEvents,
+						category: i,
+						compact: s || e.hasMultipleEvents,
 						onClick: () => {
-							s ? s(n) : o();
+							a ? a(n) : r();
 						}
 					}, n.id);
-				}), x > 0 && /* @__PURE__ */ h("div", {
+				}), y > 0 && /* @__PURE__ */ x("div", {
 					className: "flex items-center gap-space-xs py-space-2xs px-space-md",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ b("div", {
 						className: "flex items-center -space-x-1",
-						children: t.slice(0, 3).map((e, t) => /* @__PURE__ */ m("span", { className: n("h-1.5 w-1.5 rounded-full border border-background", L[R(e)]) }, e.id || t))
-					}), /* @__PURE__ */ h(i, {
+						children: t.slice(0, 3).map((e, t) => /* @__PURE__ */ b("span", { className: i("h-1.5 w-1.5 rounded-full border border-background", B[V(e)]) }, e.id || t))
+					}), /* @__PURE__ */ x(o, {
 						size: "xs",
 						type: "secondary",
 						className: "font-medium text-xs",
 						children: [
-							x,
+							y,
 							" ",
-							x === 1 ? d.booking : d.bookings
+							y === 1 ? u.booking : u.bookings
 						]
 					})]
 				})]
@@ -203,115 +204,114 @@ function W({ data: e, categories: t, maxEvents: a = 3, onClick: o, onEventClick:
 		})
 	});
 }
-W.displayName = "EventCalendarDayCell";
+K.displayName = "EventCalendarDayCell";
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-header.tsx
-var G = (e, t) => {
+var q = (e, t) => {
 	if (!e) return null;
-	if (e.element) return /* @__PURE__ */ m("div", {
+	if (e.element) return /* @__PURE__ */ b("div", {
 		className: "event-calendar-header--action-slot",
 		children: e.element
 	}, e.id || t);
-	let i = e.icon, a = e.id || `action-${t}`, o = () => {
+	let n = e.icon, r = e.id || `action-${t}`, a = () => {
 		e.onClick?.();
-	}, s = e.buttonStyle === "link" ? "ghost" : e.buttonStyle ?? "solid";
-	return /* @__PURE__ */ h(r, {
+	}, o = e.buttonStyle === "link" ? "ghost" : e.buttonStyle ?? "solid";
+	return /* @__PURE__ */ x(s, {
 		tone: e.tone ?? "primary",
-		buttonStyle: s,
-		onClick: o,
-		className: n("gap-space-md", e.buttonStyle === "link" && "underline underline-offset-4"),
+		buttonStyle: o,
+		onClick: a,
+		className: i("gap-space-md", e.buttonStyle === "link" && "underline underline-offset-4"),
 		disabled: !!e.disabled,
-		children: [!!i && /* @__PURE__ */ m(i, { className: "size-icon" }), e.label]
-	}, a);
+		children: [!!n && /* @__PURE__ */ b(n, { className: "size-icon" }), e.label]
+	}, r);
 };
-function K({ currentDate: e, viewMode: n, displayLabel: i, onPrevious: o, onNext: s, onToday: u, onViewModeChange: f, onDateChange: g, locale: y, actions: b, strings: x, rangeMode: S = "date", minDate: C, maxDate: w, prevDisabled: T = !1, nextDisabled: E = !1 }) {
-	let D = t(z, x), O = d(() => (b || []).filter((e) => e.visible !== !1), [b]), k = d(() => [
+function J({ currentDate: t, viewMode: o, displayLabel: c, onPrevious: l, onNext: u, onToday: d, onViewModeChange: g, onDateChange: v, locale: w, actions: T, strings: E, rangeMode: D = "date", minDate: O, maxDate: k, prevDisabled: A = !1, nextDisabled: j = !1 }) {
+	let { defaultScale: M } = n(), N = e(void 0, M), P = r(H, E), F = _(() => (T || []).filter((e) => e.visible !== !1), [T]), I = _(() => [
 		{
 			value: "month",
-			label: D.viewMode.month
+			label: P.viewMode.month
 		},
 		{
 			value: "week",
-			label: D.viewMode.week
+			label: P.viewMode.week
 		},
 		{
 			value: "agenda",
-			label: D.viewMode.agenda
+			label: P.viewMode.agenda
 		}
 	], [
-		D.viewMode.month,
-		D.viewMode.week,
-		D.viewMode.agenda
+		P.viewMode.month,
+		P.viewMode.week,
+		P.viewMode.agenda
 	]);
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ b("div", {
 		className: "event-calendar-header--component @container/event-calendar-header mb-space-xl min-w-0",
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ x("div", {
 			className: "event-calendar-header--layout flex min-w-0 flex-col items-stretch gap-space-lg @2xl/event-calendar-header:flex-row @2xl/event-calendar-header:items-center @2xl/event-calendar-header:justify-between @2xl/event-calendar-header:gap-space-xl",
-			children: [/* @__PURE__ */ h("div", {
+			children: [/* @__PURE__ */ x("div", {
 				className: "event-calendar-header--title flex min-w-0 flex-wrap items-center gap-space-lg @2xl/event-calendar-header:flex-none",
-				children: [/* @__PURE__ */ m(a, {
+				children: [/* @__PURE__ */ b(a, {
 					tag: "h3",
 					className: "min-w-0 break-words",
-					children: i
-				}), /* @__PURE__ */ m(c, {
+					children: c
+				}), /* @__PURE__ */ b(p, {
 					iconOnly: !0,
 					className: "min-w-0 max-w-full",
 					value: {
-						month: e.getMonth(),
-						year: e.getFullYear()
+						month: t.getMonth(),
+						year: t.getFullYear()
 					},
 					onValueChange: (e) => {
-						e.date && g?.(e.date);
+						e.date && v?.(e.date);
 					},
-					fromYear: C?.getFullYear(),
-					toYear: w?.getFullYear(),
-					locale: y,
-					strings: D.monthYearPicker
+					fromYear: O?.getFullYear(),
+					toYear: k?.getFullYear(),
+					locale: w,
+					strings: P.monthYearPicker
 				})]
-			}), /* @__PURE__ */ h("div", {
+			}), /* @__PURE__ */ x("div", {
 				className: "event-calendar-header--controls flex w-full min-w-0 flex-wrap items-center gap-space-md @2xl/event-calendar-header:w-auto @2xl/event-calendar-header:flex-1 @2xl/event-calendar-header:justify-end",
 				children: [
-					O.length > 0 && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
+					F.length > 0 && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
 						className: "event-calendar-header--actions flex min-w-0 flex-wrap items-center gap-space-md",
-						children: O.map((e, t) => G(e, t))
-					}), /* @__PURE__ */ m("div", { className: "event-calendar-header--separator mx-space-sm hidden h-6 w-px bg-border @sm/event-calendar-header:block" })] }),
-					/* @__PURE__ */ m(r, {
+						children: F.map((e, t) => q(e, t))
+					}), /* @__PURE__ */ b("div", { className: "event-calendar-header--separator mx-space-sm hidden h-6 w-px bg-border @sm/event-calendar-header:block" })] }),
+					/* @__PURE__ */ b(s, {
 						tone: "secondary",
 						buttonStyle: "outline",
-						onClick: u,
-						className: "hidden @md/event-calendar-header:inline-flex",
-						children: D.today
+						onClick: d,
+						children: P.today
 					}),
-					/* @__PURE__ */ h("div", {
-						className: "flex items-center rounded-radius border border-border",
-						children: [/* @__PURE__ */ m(r, {
+					/* @__PURE__ */ x("div", {
+						className: i("event-calendar-header--navigation", m.joinedFrame, h[N]),
+						children: [/* @__PURE__ */ b(s, {
 							tone: "secondary",
 							buttonStyle: "ghost",
-							size: "md",
+							size: N,
 							iconOnly: !0,
-							onClick: o,
-							disabled: T,
-							className: "border-border rounded-r-none border-r",
-							"aria-label": D.previous,
-							children: /* @__PURE__ */ m(_, { className: "size-icon" })
-						}), /* @__PURE__ */ m(r, {
+							onClick: l,
+							disabled: A,
+							className: i(m.joinedItem, m.firstItem, "border-border border-e"),
+							"aria-label": P.previous,
+							children: /* @__PURE__ */ b(S, { className: "size-icon rtl:rotate-180" })
+						}), /* @__PURE__ */ b(s, {
 							tone: "secondary",
 							buttonStyle: "ghost",
-							size: "md",
+							size: N,
 							iconOnly: !0,
-							onClick: s,
-							disabled: E,
-							className: "rounded-l-none",
-							"aria-label": D.next,
-							children: /* @__PURE__ */ m(v, { className: "size-icon" })
+							onClick: u,
+							disabled: j,
+							className: i(m.joinedItem, m.lastItem),
+							"aria-label": P.next,
+							children: /* @__PURE__ */ b(C, { className: "size-icon rtl:rotate-180" })
 						})]
 					}),
-					!!f && /* @__PURE__ */ m(l, {
-						"aria-label": D.viewMode.label,
-						value: n,
-						options: k,
+					!!g && /* @__PURE__ */ b(f, {
+						"aria-label": P.viewMode.label,
+						value: o,
+						options: I,
 						onValueChange: (e) => {
-							e && f(e);
+							e && g(e);
 						},
 						className: "w-full max-w-full @sm/event-calendar-header:w-28"
 					})
@@ -320,10 +320,10 @@ function K({ currentDate: e, viewMode: n, displayLabel: i, onPrevious: o, onNext
 		})
 	});
 }
-K.displayName = "EventCalendarHeader";
+J.displayName = "EventCalendarHeader";
 //#endregion
 //#region src/components/features/event-calendar/colors.ts
-var ee = {
+var te = {
 	gray: {
 		badgeBg: "bg-muted",
 		border: "border-border",
@@ -365,37 +365,37 @@ var ee = {
 		swatch: "bg-primary"
 	}
 };
-function q(e) {
-	let t = R(e);
+function Y(e) {
+	let t = V(e);
 	return {
-		dot: L[t],
-		...ee[t]
+		dot: B[t],
+		...te[t]
 	};
 }
-function J(e) {
-	return L[R(e)];
+function X(e) {
+	return B[V(e)];
 }
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-legend.tsx
-function Y({ categories: e, visibleCategories: t, onToggleCategory: a, enableFiltering: o = !1 }) {
-	let s = !t || t.length === 0, c = (e) => !o || s || t?.includes(e), l = (e) => {
-		o && a && a(e);
+function Z({ categories: e, visibleCategories: t, onToggleCategory: n, enableFiltering: r = !1 }) {
+	let a = !t || t.length === 0, c = (e) => !r || a || t?.includes(e), l = (e) => {
+		r && n && n(e);
 	};
-	return e.length === 0 ? null : /* @__PURE__ */ m("div", {
-		role: o ? "group" : void 0,
-		"aria-label": o ? "Filter event categories" : void 0,
-		className: n("event-calendar-legend--component", "flex flex-wrap items-center gap-space-sm py-space-xs"),
+	return e.length === 0 ? null : /* @__PURE__ */ b("div", {
+		role: r ? "group" : void 0,
+		"aria-label": r ? "Filter event categories" : void 0,
+		className: i("event-calendar-legend--component", "flex flex-wrap items-center gap-space-sm py-space-xs"),
 		children: e.map((e) => {
-			let t = c(e.id), a = q(e), s = e.icon, u = "group inline-flex items-center gap-space-sm rounded-full border px-space-sm py-space-xs transition-colors", d = /* @__PURE__ */ h(p, { children: [
-				/* @__PURE__ */ m("span", {
-					className: n("inline-block size-2 rounded-full", t ? a.swatch : "bg-muted-foreground/40"),
+			let t = c(e.id), n = Y(e), a = e.icon, u = "group inline-flex items-center gap-space-sm rounded-inner border px-space-sm py-space-xs transition-colors", d = /* @__PURE__ */ x(y, { children: [
+				/* @__PURE__ */ b("span", {
+					className: i("inline-block size-2 rounded-radius", t ? n.swatch : "bg-muted-foreground/40"),
 					"aria-hidden": "true"
 				}),
-				!!s && /* @__PURE__ */ m(s, {
-					className: n("size-icon-sm", t ? "text-foreground" : "text-muted-foreground"),
+				!!a && /* @__PURE__ */ b(a, {
+					className: i("size-icon-sm", t ? "text-foreground" : "text-muted-foreground"),
 					"aria-hidden": "true"
 				}),
-				/* @__PURE__ */ m(i, {
+				/* @__PURE__ */ b(o, {
 					tag: "span",
 					size: "xs",
 					weight: "medium",
@@ -403,119 +403,119 @@ function Y({ categories: e, visibleCategories: t, onToggleCategory: a, enableFil
 					children: e.label
 				})
 			] });
-			return o ? /* @__PURE__ */ m(r, {
+			return r ? /* @__PURE__ */ b(s, {
 				type: "button",
 				tone: "secondary",
 				buttonStyle: "ghost",
 				size: "sm",
 				"aria-pressed": t,
 				onClick: () => l(e.id),
-				className: n(u, "h-auto cursor-pointer shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", t ? "border-border bg-card hover:bg-muted/40" : "border-dashed border-border/60 bg-transparent text-muted-foreground hover:bg-muted/30"),
+				className: i(u, "h-auto min-h-0 cursor-pointer shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", t ? "border-border bg-card hover:bg-muted/40" : "border-dashed border-border/60 bg-transparent text-muted-foreground hover:bg-muted/30"),
 				children: d
-			}, e.id) : /* @__PURE__ */ m("span", {
-				className: n(u, "border-border bg-card cursor-default"),
+			}, e.id) : /* @__PURE__ */ b("span", {
+				className: i(u, "border-border bg-card cursor-default"),
 				children: d
 			}, e.id);
 		})
 	});
 }
-Y.displayName = "EventCalendarLegend";
+Z.displayName = "EventCalendarLegend";
 //#endregion
 //#region src/components/features/event-calendar/use-event-calendar.tsx
-function te({ events: e, locale: t, date: n, defaultDate: r = /* @__PURE__ */ new Date(), viewMode: i, defaultViewMode: a = "month", onDateChange: o, onViewModeChange: s, dataOptions: c = {} }) {
-	let [l, p] = f(r), [m, h] = f(a), g = n ?? l, _ = i ?? m, v = u((e) => {
-		n === void 0 && p(e), o?.(e);
-	}, [n, o]), y = u((e) => {
-		i === void 0 && h(e), s?.(e);
-	}, [s, i]), b = V(e, g, _, c), x = d(() => c.visibleCategories && c.visibleCategories.length > 0 ? e.filter((e) => c.visibleCategories.includes(e.category)) : e, [e, c.visibleCategories]);
+function ne({ events: e, locale: t, date: n, defaultDate: r = /* @__PURE__ */ new Date(), viewMode: i, defaultViewMode: a = "month", onDateChange: o, onViewModeChange: s, dataOptions: c = {} }) {
+	let [l, u] = v(r), [d, f] = v(a), p = n ?? l, m = i ?? d, h = g((e) => {
+		n === void 0 && u(e), o?.(e);
+	}, [n, o]), y = g((e) => {
+		i === void 0 && f(e), s?.(e);
+	}, [s, i]), b = W(e, p, m, c), x = _(() => c.visibleCategories && c.visibleCategories.length > 0 ? e.filter((e) => c.visibleCategories.includes(e.category)) : e, [e, c.visibleCategories]);
 	return {
-		currentDate: g,
-		viewMode: _,
+		currentDate: p,
+		viewMode: m,
 		calendarDays: b,
 		visibleEvents: x,
-		goToToday: u(() => {
-			v(/* @__PURE__ */ new Date());
-		}, [v]),
-		goToNextPeriod: u(() => {
-			let e = _ === "month" ? S(g, 1) : C(g, 1);
-			v(e);
+		goToToday: g(() => {
+			h(/* @__PURE__ */ new Date());
+		}, [h]),
+		goToNextPeriod: g(() => {
+			let e = m === "month" ? T(p, 1) : E(p, 1);
+			h(e);
 		}, [
-			v,
-			g,
-			_
+			h,
+			p,
+			m
 		]),
-		goToPreviousPeriod: u(() => {
-			let e = _ === "month" ? F(g, 1) : I(g, 1);
-			v(e);
+		goToPreviousPeriod: g(() => {
+			let e = m === "month" ? R(p, 1) : z(p, 1);
+			h(e);
 		}, [
-			v,
-			g,
-			_
+			h,
+			p,
+			m
 		]),
-		setDate: u((e) => {
-			v(e);
-		}, [v]),
-		setViewMode: u((e) => {
+		setDate: g((e) => {
+			h(e);
+		}, [h]),
+		setViewMode: g((e) => {
 			y(e);
 		}, [y]),
-		displayLabel: d(() => {
-			if (_ === "month") return D(g, "MMMM yyyy", { locale: t });
-			if (_ === "week") {
+		displayLabel: _(() => {
+			if (m === "month") return A(p, "MMMM yyyy", { locale: t });
+			if (m === "week") {
 				let e = b[0]?.date, n = b[b.length - 1]?.date;
-				return e && n ? `${D(e, "MMM d", { locale: t })} - ${D(n, "MMM d, yyyy", { locale: t })}` : D(g, "MMMM yyyy", { locale: t });
+				return e && n ? `${A(e, "MMM d", { locale: t })} - ${A(n, "MMM d, yyyy", { locale: t })}` : A(p, "MMMM yyyy", { locale: t });
 			}
-			return D(g, "MMMM yyyy", { locale: t });
+			return A(p, "MMMM yyyy", { locale: t });
 		}, [
-			g,
-			_,
+			p,
+			m,
 			b,
 			t
 		]),
-		hasEvents: d(() => x.length > 0, [x])
+		hasEvents: _(() => x.length > 0, [x])
 	};
 }
 //#endregion
 //#region src/components/features/event-calendar/event-calendar.tsx
-function ne(e, t) {
+function re(e, t) {
 	if (!e) return !1;
 	if (Array.isArray(e)) return e.some((e) => e.toDateString() === t.toDateString());
 	if (typeof e == "function") return e(t);
 	let n = e.dates?.some((e) => e.toDateString() === t.toDateString()) ?? !1, r = e.predicate?.(t) ?? !1;
 	return n || r;
 }
-function X({ events: r, categories: a, viewMode: o, defaultViewMode: s, onViewModeChange: c, date: l, defaultDate: u, onDateChange: p, onEventClick: g, onDayClick: _, maxEventsPerDay: v = 3, showLegend: y = !0, showHeader: b = !0, showWeekends: x = !0, weekStartsOn: S, locale: C, enableCategoryFilter: w = !1, visibleCategories: T, onVisibleCategoriesChange: E, loading: D = !1, emptyStateMessage: O, className: k, compact: A = !1, actions: j, strings: M, dayHeadingVariant: N = "default", dayHeadingClassName: P, renderDayHeading: F, rangeMode: I = "date", minDate: L, maxDate: R, disabledDates: B, filterEvent: V, renderEvent: H, renderDayCell: U }) {
-	let G = t(z, M), [ee, q] = f([]), J = T ?? ee, { weekStartsOn: X, locale: Z } = e(), Q = S ?? X ?? 1, re = C ?? Z, ie = (e) => {
-		let t = J.includes(e) ? J.filter((t) => t !== e) : [...J, e];
-		E ? E(t) : q(t);
-	}, $ = te({
-		events: r,
-		locale: re,
+function Q({ events: e, categories: n, viewMode: a, defaultViewMode: s, onViewModeChange: c, date: l, defaultDate: u, onDateChange: d, onEventClick: f, onDayClick: p, maxEventsPerDay: m = 3, showLegend: h = !0, showHeader: g = !0, showWeekends: y = !0, weekStartsOn: S, locale: C, enableCategoryFilter: w = !1, visibleCategories: T, onVisibleCategoriesChange: E, loading: D = !1, emptyStateMessage: O, className: k, compact: A = !1, actions: j, strings: M, dayHeadingVariant: N = "default", dayHeadingClassName: P, renderDayHeading: F, rangeMode: I = "date", minDate: L, maxDate: R, disabledDates: z, filterEvent: B, renderEvent: V, renderDayCell: U }) {
+	let W = r(H, M), [ee, G] = v([]), q = T ?? ee, { weekStartsOn: te, locale: Y } = t(), X = S ?? te ?? 1, Q = C ?? Y, ie = (e) => {
+		let t = q.includes(e) ? q.filter((t) => t !== e) : [...q, e];
+		E ? E(t) : G(t);
+	}, $ = ne({
+		events: e,
+		locale: Q,
 		date: l,
 		defaultDate: u,
-		viewMode: o,
+		viewMode: a,
 		defaultViewMode: s,
-		onDateChange: p,
+		onDateChange: d,
 		onViewModeChange: c,
 		dataOptions: {
-			weekStartsOn: Q,
-			showWeekends: x,
-			visibleCategories: J.length > 0 ? J : void 0
+			weekStartsOn: X,
+			showWeekends: y,
+			visibleCategories: q.length > 0 ? q : void 0
 		}
-	}), ae = d(() => {
-		let e = G.weekdaysShort;
-		return Q === 1 ? [...e.slice(1), e[0]] : e;
-	}, [G.weekdaysShort, Q]), oe = (e) => {
-		ne(B, e.date) || L && e.date < L || R && e.date > R || _?.(e.date, e.events);
-	}, se = d(() => V ? $.calendarDays.map((e) => ({
+	}), ae = _(() => {
+		let e = W.weekdaysShort;
+		return X === 1 ? [...e.slice(1), e[0]] : e;
+	}, [W.weekdaysShort, X]), oe = (e) => {
+		re(z, e.date) || L && e.date < L || R && e.date > R || p?.(e.date, e.events);
+	}, se = _(() => B ? $.calendarDays.map((e) => ({
 		...e,
-		events: e.events.filter(V),
-		eventCount: e.events.filter(V).length,
-		hasMultipleEvents: e.events.filter(V).length > 1
-	})) : $.calendarDays, [$.calendarDays, V]);
+		events: e.events.filter(B),
+		eventCount: e.events.filter(B).length,
+		hasMultipleEvents: e.events.filter(B).length > 1
+	})) : $.calendarDays, [$.calendarDays, B]);
 	function ce(e) {
-		return !!(ne(B, e) || L && e < L || R && e > R);
+		return !!(re(z, e) || L && e < L || R && e > R);
 	}
-	let le = d(() => {
+	let le = _(() => {
 		let e = $.calendarDays;
 		if (e.length === 0) return {
 			prev: !1,
@@ -531,18 +531,19 @@ function X({ events: r, categories: a, viewMode: o, defaultViewMode: s, onViewMo
 		L,
 		R
 	]);
-	if (D) return /* @__PURE__ */ m("div", {
-		className: n("event-calendar--component", "flex items-center justify-center py-12"),
-		children: /* @__PURE__ */ m(i, {
+	if (D) return /* @__PURE__ */ b("div", {
+		className: i("event-calendar--component", "flex items-center justify-center p-surface-lg", k),
+		role: "status",
+		children: /* @__PURE__ */ b(o, {
 			type: "secondary",
-			children: G.loading
+			children: W.loading
 		})
 	});
-	let ue = o ? c : void 0, de = w ? ie : void 0;
-	return /* @__PURE__ */ h("div", {
-		className: n("event-calendar--component w-full space-y-space-xl", k),
+	let ue = a ? c : void 0, de = w ? ie : void 0;
+	return /* @__PURE__ */ x("div", {
+		className: i("event-calendar--component w-full space-y-space-xl", k),
 		children: [
-			!!b && /* @__PURE__ */ m(K, {
+			!!g && /* @__PURE__ */ b(J, {
 				currentDate: $.currentDate,
 				viewMode: $.viewMode,
 				displayLabel: $.displayLabel,
@@ -551,7 +552,7 @@ function X({ events: r, categories: a, viewMode: o, defaultViewMode: s, onViewMo
 				onToday: $.goToToday,
 				onViewModeChange: ue,
 				onDateChange: $.setDate,
-				locale: re,
+				locale: Q,
 				actions: j,
 				rangeMode: I,
 				minDate: L,
@@ -559,58 +560,58 @@ function X({ events: r, categories: a, viewMode: o, defaultViewMode: s, onViewMo
 				prevDisabled: le.prev,
 				nextDisabled: le.next,
 				strings: {
-					today: G.today,
-					previous: G.previous,
-					next: G.next,
-					viewMode: G.viewMode,
-					monthYearPicker: G.monthYearPicker
+					today: W.today,
+					previous: W.previous,
+					next: W.next,
+					viewMode: W.viewMode,
+					monthYearPicker: W.monthYearPicker
 				}
 			}),
-			!!y && a.length > 0 && /* @__PURE__ */ m(Y, {
-				categories: a,
-				visibleCategories: J,
+			!!h && n.length > 0 && /* @__PURE__ */ b(Z, {
+				categories: n,
+				visibleCategories: q,
 				onToggleCategory: de,
 				enableFiltering: w
 			}),
-			!$.hasEvents && O ? /* @__PURE__ */ m("div", {
+			!$.hasEvents && O ? /* @__PURE__ */ b("div", {
 				className: "flex items-center justify-center rounded-radius border border-dashed border-border p-surface",
-				children: /* @__PURE__ */ m(i, {
+				children: /* @__PURE__ */ b(o, {
 					type: "secondary",
 					children: O
 				})
-			}) : /* @__PURE__ */ h("div", {
+			}) : /* @__PURE__ */ x("div", {
 				className: "bg-background rounded-radius border border-border",
-				children: [/* @__PURE__ */ m("div", {
-					className: n("grid grid-cols-7", N === "bordered" && "border-b border-border mb-0", N === "tinted" && "bg-muted/40 rounded-t-radius mb-0 overflow-hidden", N === "accent" && "bg-primary/8 rounded-t-radius mb-0 overflow-hidden", N === "default" && "mb-space-md"),
-					children: ae.map((e, t) => F ? /* @__PURE__ */ m("div", { children: F(e, t) }, e) : /* @__PURE__ */ m("div", {
-						className: n("text-center h-8 flex items-center justify-center", P),
-						children: /* @__PURE__ */ m(i, {
+				children: [/* @__PURE__ */ b("div", {
+					className: i("grid grid-cols-7", N === "bordered" && "border-b border-border mb-0", N === "tinted" && "bg-muted/40 rounded-t-radius mb-0 overflow-hidden", N === "accent" && "bg-primary/8 rounded-t-radius mb-0 overflow-hidden", N === "default" && "mb-space-md"),
+					children: ae.map((e, t) => F ? /* @__PURE__ */ b("div", { children: F(e, t) }, e) : /* @__PURE__ */ b("div", {
+						className: i("text-center h-8 flex items-center justify-center", P),
+						children: /* @__PURE__ */ b(o, {
 							size: "xs",
 							weight: N === "accent" ? "medium" : "regular",
-							className: n(N === "default" && "text-muted-foreground", N === "tinted" && "text-muted-foreground", N === "bordered" && "text-foreground", N === "accent" && "text-primary-accent"),
+							className: i(N === "default" && "text-muted-foreground", N === "tinted" && "text-muted-foreground", N === "bordered" && "text-foreground", N === "accent" && "text-primary-accent"),
 							children: e
 						})
 					}, e))
-				}), /* @__PURE__ */ m("div", {
+				}), /* @__PURE__ */ b("div", {
 					className: "grid grid-cols-7",
 					children: se.map((e) => {
-						let t = ce(e.date), r = () => /* @__PURE__ */ m(W, {
+						let t = ce(e.date), r = () => /* @__PURE__ */ b(K, {
 							data: e,
-							categories: a,
-							maxEvents: v,
+							categories: n,
+							maxEvents: m,
 							onClick: () => oe(e),
-							onEventClick: g ? (t) => {
-								ce(e.date) || g(t);
+							onEventClick: f ? (t) => {
+								ce(e.date) || f(t);
 							} : void 0,
 							compact: A,
 							strings: {
-								booking: G.booking,
-								bookings: G.bookings
+								booking: W.booking,
+								bookings: W.bookings
 							},
-							renderEvent: H
+							renderEvent: V
 						});
-						return /* @__PURE__ */ m("div", {
-							className: n(t && "pointer-events-none opacity-40"),
+						return /* @__PURE__ */ b("div", {
+							className: i(t && "pointer-events-none opacity-40"),
 							"aria-disabled": t || void 0,
 							children: U ? U(e, r) : r()
 						}, e.date.toISOString());
@@ -620,92 +621,83 @@ function X({ events: r, categories: a, viewMode: o, defaultViewMode: s, onViewMo
 		]
 	});
 }
-X.displayName = "EventCalendar";
+Q.displayName = "EventCalendar";
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-event-card.tsx
-var Z = {
+var ie = {
 	guest: "guest",
 	guests: "guests"
 };
-function Q({ event: e, category: c, onClick: l, strings: u }) {
-	let d = t(Z, u), f = !!l, _ = () => {
-		l && l();
-	}, v = e.metadata || {}, S = v.customer_name, C = v.guest_count, w = v.service_name, T = J(c), E = /* @__PURE__ */ h(p, { children: [
-		/* @__PURE__ */ h("div", {
-			className: "event-calendar-event-card--header mb-space-lg flex min-w-0 items-start justify-between gap-space-lg",
-			children: [/* @__PURE__ */ h("div", {
-				className: "flex min-w-0 flex-1 flex-col items-start gap-space-xs sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-space-md",
-				children: [/* @__PURE__ */ m(a, {
-					tag: "h5",
-					containerClassName: "event-calendar-event-card--heading min-w-0 max-w-full sm:w-auto",
-					className: "break-words",
-					children: e.title
-				}), !!c && /* @__PURE__ */ h("div", {
-					className: "event-calendar-event-card--category inline-flex min-w-0 max-w-full items-center gap-space-xs",
-					children: [/* @__PURE__ */ m("span", {
-						"aria-hidden": "true",
-						className: n("event-calendar-event-card--category-dot size-1.5 shrink-0 rounded-full", T)
-					}), /* @__PURE__ */ m(i, {
-						tag: "span",
-						size: "xs",
-						weight: "medium",
-						className: "min-w-0 break-words",
-						children: c.label
+function $({ event: e, category: t, onClick: n, strings: s }) {
+	let d = r(ie, s), f = !!n, p = () => {
+		n && n();
+	}, m = e.metadata || {}, h = m.customer_name, g = m.guest_count, _ = m.service_name, v = X(t), y = [h, g !== void 0 && g > 0 ? `${g} ${g === 1 ? d.guest : d.guests}` : void 0].filter(Boolean).join(" · "), S = /* @__PURE__ */ x(c, {
+		gap: "lg",
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "event-calendar-event-card--header flex min-w-0 items-start justify-between gap-space-lg",
+				children: [/* @__PURE__ */ x("div", {
+					className: "flex min-w-0 flex-1 flex-col items-start gap-space-xs sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-space-md",
+					children: [/* @__PURE__ */ b(a, {
+						tag: "h5",
+						containerClassName: "event-calendar-event-card--heading min-w-0 max-w-full sm:w-auto",
+						className: "break-words",
+						children: e.title
+					}), !!t && /* @__PURE__ */ x("div", {
+						className: "event-calendar-event-card--category inline-flex min-w-0 max-w-full items-center gap-space-xs",
+						children: [/* @__PURE__ */ b("span", {
+							"aria-hidden": "true",
+							className: i("event-calendar-event-card--category-dot size-1.5 shrink-0 rounded-full", v)
+						}), /* @__PURE__ */ b(o, {
+							tag: "span",
+							size: "xs",
+							weight: "medium",
+							className: "min-w-0 break-words",
+							children: t.label
+						})]
 					})]
+				}), !!f && !!e.url && /* @__PURE__ */ b(w, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" })]
+			}),
+			!!(y || _) && /* @__PURE__ */ x(c, {
+				gap: "xs",
+				className: "event-calendar-event-card--details min-w-0",
+				children: [!!y && /* @__PURE__ */ b(o, {
+					className: "event-calendar-event-card--facts break-words",
+					children: y
+				}), !!_ && /* @__PURE__ */ b(o, {
+					type: "secondary",
+					className: "line-clamp-1",
+					children: _
 				})]
-			}), !!f && !!e.url && /* @__PURE__ */ m(y, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" })]
-		}),
-		/* @__PURE__ */ h("div", {
-			className: "grid grid-cols-1 sm:grid-cols-2 gap-space-md mb-space-lg",
-			children: [!!S && /* @__PURE__ */ h("div", {
-				className: "flex items-center gap-space-sm",
-				children: [/* @__PURE__ */ m(b, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ m(i, {
-					className: "truncate",
-					children: S
-				})]
-			}), C !== void 0 && C > 0 && /* @__PURE__ */ h("div", {
-				className: "flex items-center gap-space-sm",
-				children: [/* @__PURE__ */ m(x, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ h(i, { children: [
-					C,
-					" ",
-					C === 1 ? d.guest : d.guests
-				] })]
-			})]
-		}),
-		!!w && /* @__PURE__ */ m(i, {
-			type: "secondary",
-			className: "mb-space-md line-clamp-1",
-			children: w
-		}),
-		/* @__PURE__ */ h("div", {
-			className: "flex items-center gap-space-sm pt-space-md border-t border-border/50",
-			children: [/* @__PURE__ */ m(g, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), e.allDay ? /* @__PURE__ */ m(s, {
-				value: e.startDate,
-				preset: "long",
-				size: "xs",
-				type: "secondary"
-			}) : /* @__PURE__ */ m(o, {
-				value: e.startDate,
-				preset: "long",
-				size: "xs",
-				type: "secondary"
-			})]
-		})
-	] }), D = n("w-full min-w-0 text-left p-surface border border-border rounded-radius bg-card transition-none", f ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : "");
-	return f ? /* @__PURE__ */ m(r, {
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "event-calendar-event-card--date",
+				children: e.allDay ? /* @__PURE__ */ b(u, {
+					value: e.startDate,
+					preset: "long",
+					size: "xs",
+					type: "secondary"
+				}) : /* @__PURE__ */ b(l, {
+					value: e.startDate,
+					preset: "long",
+					size: "xs",
+					type: "secondary"
+				})
+			})
+		]
+	}), C = i("w-full min-w-0 text-left p-surface border border-border rounded-radius bg-card transition-none", f ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : "");
+	return f ? /* @__PURE__ */ b("button", {
 		type: "button",
-		tone: "secondary",
-		buttonStyle: "ghost",
-		onClick: _,
-		className: n("event-calendar-event-card--component", "h-auto flex-col items-stretch justify-start whitespace-normal shadow-none", D),
-		children: E
-	}) : /* @__PURE__ */ m("div", {
-		className: n("event-calendar-event-card--component", D),
-		children: E
+		onClick: p,
+		className: i("event-calendar-event-card--component", "box-border m-0 flex h-auto flex-col items-stretch justify-start whitespace-normal font-sans text-foreground shadow-none hover:bg-muted/40", C),
+		children: S
+	}) : /* @__PURE__ */ b("div", {
+		className: i("event-calendar-event-card--component", C),
+		children: S
 	});
 }
-Q.displayName = "EventCalendarEventCard";
+$.displayName = "EventCalendarEventCard";
 //#endregion
-export { X as EventCalendar, W as EventCalendarDayCell, B as EventCalendarEventBadge, Q as EventCalendarEventCard, K as EventCalendarHeader, Y as EventCalendarLegend, L as calendarTokenDot, Z as defaultEventCalendarEventCardStrings, z as defaultEventCalendarStrings, q as getCalendarColorClasses, J as getCalendarDotClass, U as getCategoryById, H as getEventsForDay, R as resolveCategoryColorToken, te as useEventCalendar, V as useEventCalendarData };
+export { Q as EventCalendar, K as EventCalendarDayCell, U as EventCalendarEventBadge, $ as EventCalendarEventCard, J as EventCalendarHeader, Z as EventCalendarLegend, B as calendarTokenDot, ie as defaultEventCalendarEventCardStrings, H as defaultEventCalendarStrings, Y as getCalendarColorClasses, X as getCalendarDotClass, G as getCategoryById, ee as getEventsForDay, V as resolveCategoryColorToken, ne as useEventCalendar, W as useEventCalendarData };
 
 //# sourceMappingURL=event-calendar.js.map