themelia-react-ui 2.0.5 → 3.0.0

package/dist/features/appointment-calendar.js

@@ -1,33 +1,34 @@
 "use client";
-import { f as e, u as t } from "../ui-provider-C-74NVLc.js";
+import { d as e, p as t } from "../ui-provider-Bu1S-o96.js";
 import { useStrings as n } from "../lib/strings.js";
-import { t as r } from "../utils-B6kKb8jB.js";
-import { n as i } from "../buttons-BedGfygC.js";
-import { c as a, s as o } from "../typography-BQnine1k.js";
-import { n as s } from "../text.styles-B64My8RZ.js";
-import { t as c } from "../focus-recipes-B653VaLq.js";
-import { t as l } from "../structure-DuxKl954.js";
+import { t as r } from "../utils-BVbAG2J6.js";
+import { c as i, s as a } from "../typography-C0dELqYV.js";
+import { n as o } from "../text.styles-B64My8RZ.js";
+import { t as s } from "../focus-recipes-DSkiUvUp.js";
+import { n as c } from "../buttons-pZVgPTZn.js";
+import { t as l } from "../structure-DElaQwwN.js";
 import { i as u, t as d } from "../tone-recipes-BPsRAvhu.js";
-import { h as f, m as p, p as m, t as h, v as g } from "../smart-card-CW0hjetE.js";
-import { t as _ } from "../feedback-Dm4izqFn.js";
-import { t as v } from "../composition.recipes-COdiFhxB.js";
-import { n as y } from "../action-menu-Dr8K-ghE.js";
-import { r as b } from "../skeleton-BapcJd9C.js";
-import { t as x } from "../interaction-recipes-XR9ZpVYL.js";
-import { t as S } from "../initials-format-CDoQEOd_.js";
-import { i as C, n as w, s as T } from "../avatar-CeZaFmNH.js";
-import { t as E } from "../badge-xIiV_E7f.js";
-import { l as D } from "../choice-inputs-zUgBZfE4.js";
-import { o as O } from "../display-KsZLw9Ov.js";
-import { t as k } from "../scroll-area-B0dB2cBi.js";
-import { i as ee, n as te, r as ne, t as re, u as ie } from "../item-DjCcM18E.js";
-import { i as ae, r as oe, t as se } from "../tabs-e7ko9S2o.js";
-import { s as ce } from "../data-display-BdgCAw8T.js";
-import { isValidElement as le, useEffect as A, useId as ue, useLayoutEffect as de, useMemo as j, useRef as M, useState as N } from "react";
-import { Fragment as fe, jsx as P, jsxs as F } from "react/jsx-runtime";
-import { ChevronLeft as pe, ChevronRight as me, Plus as he, TriangleAlert as ge } from "lucide-react";
+import { c as f, o as p } from "../surface-recipes-DV6rrOFq.js";
+import { _ as m, f as h, m as g, p as _ } from "../smart-card-C59z6KFO.js";
+import { t as v } from "../feedback-DmqmXKLn.js";
+import { t as y } from "../composition.recipes-COdiFhxB.js";
+import { n as b } from "../action-menu-D5343RwT.js";
+import { r as x } from "../skeleton-Cab_KgVo.js";
+import { t as S } from "../interaction-recipes-DmuS1ase.js";
+import { t as C } from "../initials-format-CDoQEOd_.js";
+import { i as w, n as T, s as E } from "../avatar-Ca3Ihrq4.js";
+import { t as D } from "../badge-oGiXblW7.js";
+import { l as O } from "../choice-inputs-oJEsrb5Y.js";
+import { a as k } from "../display-VlmP1I0i.js";
+import { t as ee } from "../scroll-area-B9HKbji0.js";
+import { i as A, n as j, r as M, t as N, u as te } from "../item-GJ9mvCcg.js";
+import { i as ne, r as re, t as ie } from "../tabs-WnHfV2pM.js";
+import { s as ae } from "../data-display-CWe9SOYh.js";
+import { isValidElement as oe, useEffect as se, useId as ce, useLayoutEffect as le, useMemo as P, useRef as F, useState as I } from "react";
+import { jsx as L, jsxs as R } from "react/jsx-runtime";
+import { ChevronLeft as ue, ChevronRight as de, Plus as fe, TriangleAlert as pe } from "lucide-react";
 //#region src/components/features/appointment-calendar/appointment-calendar.types.ts
-var _e = {
+var me = {
 	formatBooked: (e) => `${e} booked`,
 	formatConflicts: (e) => e === 1 ? "1 conflict" : `${e} conflicts`,
 	viewLabel: "View",
@@ -63,59 +64,65 @@ var _e = {
 	errorDescription: "The appointments could not be loaded.",
 	retry: "Retry",
 	formatActionsLabel: (e) => `Actions for ${e}`
-}, I = [
+}, he = [
 	"chart-1",
 	"chart-2",
 	"chart-3",
 	"chart-4",
-	"chart-5"
-], L = {
+	"chart-5",
+	"chart-6",
+	"chart-7",
+	"chart-8"
+], ge = {
 	"chart-1": "bg-chart-1",
 	"chart-2": "bg-chart-2",
 	"chart-3": "bg-chart-3",
 	"chart-4": "bg-chart-4",
-	"chart-5": "bg-chart-5"
+	"chart-5": "bg-chart-5",
+	"chart-6": "bg-chart-6",
+	"chart-7": "bg-chart-7",
+	"chart-8": "bg-chart-8"
 };
-function ve(e, t) {
+function _e(e, t) {
 	let n = e.findIndex((e) => e.id === t);
-	return n < 0 ? "chart-1" : e[n]?.color ?? I[n % I.length] ?? "chart-1";
+	return n < 0 ? "chart-1" : e[n]?.color ?? he[n % he.length] ?? "chart-1";
 }
-function R(e) {
+function z(e) {
 	return new Date(e.getFullYear(), e.getMonth(), e.getDate());
 }
-function z(e, t) {
+function B(e, t) {
 	return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
 }
-function B(e, t) {
+function V(e, t) {
 	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
-function V(e, t) {
+function H(e, t) {
 	let n = new Date(e.getFullYear(), e.getMonth() + t, 1), r = new Date(n.getFullYear(), n.getMonth() + 1, 0).getDate();
 	return new Date(n.getFullYear(), n.getMonth(), Math.min(e.getDate(), r));
 }
-function H(e, t) {
-	let n = R(e);
-	return z(n, -((n.getDay() - t + 7) % 7));
+function U(e, t) {
+	let n = z(e);
+	return B(n, -((n.getDay() - t + 7) % 7));
+}
+function ve(e, t) {
+	let n = U(e, t);
+	return Array.from({ length: 7 }, (e, t) => B(n, t));
 }
 function ye(e, t) {
-	let n = H(e, t);
-	return Array.from({ length: 7 }, (e, t) => z(n, t));
+	let n = U(new Date(e.getFullYear(), e.getMonth(), 1), t);
+	return Array.from({ length: 6 }, (e, t) => Array.from({ length: 7 }, (e, r) => B(n, t * 7 + r)));
 }
 function be(e, t) {
-	let n = H(new Date(e.getFullYear(), e.getMonth(), 1), t);
-	return Array.from({ length: 6 }, (e, t) => Array.from({ length: 7 }, (e, r) => z(n, t * 7 + r)));
-}
-function xe(e, t) {
-	let n = R(t).getTime(), r = z(t, 1).getTime();
+	let n = z(t).getTime(), r = B(t, 1).getTime();
 	return e.start.getTime() < r && e.end.getTime() > n;
 }
-function U(e, t) {
-	return e.filter((e) => xe(e, t)).sort((e, t) => e.start.getTime() - t.start.getTime() || e.end.getTime() - t.end.getTime());
+function W(e, t) {
+	return e.filter((e) => be(e, t)).sort((e, t) => e.start.getTime() - t.start.getTime() || e.end.getTime() - t.end.getTime());
 }
-function Se(e, t, n) {
+function xe(e, t, n) {
 	return e.filter((e) => (t === "all" || e.category === t) && (n === "all" || e.staff?.id === n));
 }
-function Ce(e) {
+function Se(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
 		if (!n.staff || n.status === "cancelled") continue;
@@ -137,15 +144,15 @@ function Ce(e) {
 	}
 	return n.sort((e, t) => e.start.getTime() - t.start.getTime());
 }
-function we(e) {
+function Ce(e) {
 	return new Set(e.flatMap((e) => e.appointments.map((e) => e.id)));
 }
-function Te(e) {
+function we(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) n.staff && !t.has(n.staff.id) && t.set(n.staff.id, n.staff);
 	return [...t.values()];
 }
-function Ee(e, t) {
+function Te(e, t) {
 	let { hour12: n } = new Intl.DateTimeFormat(t, { hour: "numeric" }).resolvedOptions();
 	if (!n) return new Intl.DateTimeFormat(t, {
 		hour: "2-digit",
@@ -157,7 +164,7 @@ function Ee(e, t) {
 	};
 	return new Intl.DateTimeFormat(t, r).format(e);
 }
-function W(e) {
+function Ee(e) {
 	return typeof e == "string" ? e : e?.name;
 }
 //#endregion
@@ -170,99 +177,128 @@ var G = {
 	noShow: "destructive"
 };
 function De({ appointment: e, context: t }) {
-	let n = ue(), i = W(e.client), o = e.staff, { open: s, conflict: l } = t, d = t.actions.length > 0, f = [
+	let n = ce(), a = Ee(e.client), o = e.staff, c = [a, o?.name].filter(Boolean).join(" · "), { open: d, conflict: f } = t, p = t.actions.length > 0, m = [
 		`${n}-title`,
 		`${n}-status`,
-		`${n}-detail`,
-		o && `${n}-staff`
-	].filter(Boolean).join(" "), p = M(null), m = M(!1);
-	return de(() => {
-		!d && m.current && (m.current = !1, (!document.activeElement || document.activeElement === document.body) && p.current?.focus());
-	}, [d]), /* @__PURE__ */ F(re, {
-		variant: "outline",
+		`${n}-time`,
+		c && `${n}-people`
+	].filter(Boolean).join(" "), h = F(null), g = F(!1);
+	return le(() => {
+		!p && g.current && (g.current = !1, (!document.activeElement || document.activeElement === document.body) && h.current?.focus());
+	}, [p]), /* @__PURE__ */ R(N, {
 		size: "sm",
 		padding: "default",
 		"data-status": e.status,
-		"data-conflict": l ? "" : void 0,
-		className: r("appointment-agenda--row relative w-full flex-nowrap", !!s && x.rowHover, l && r(u.destructive.wash, u.destructive.edge)),
+		"data-conflict": f ? "" : void 0,
+		className: r("appointment-agenda--row relative w-full flex-nowrap", !!d && S.rowHover, f && u.destructive.wash),
 		children: [
-			!!s && /* @__PURE__ */ P("button", {
-				ref: p,
+			!!d && /* @__PURE__ */ L("button", {
+				ref: h,
 				type: "button",
-				"aria-labelledby": f,
-				onClick: s,
-				className: r("appointment-agenda--open absolute inset-0 z-0 cursor-pointer rounded-radius focus-visible:outline-none", x.nativeButtonReset, c.inset)
+				"aria-labelledby": m,
+				onClick: d,
+				className: r("appointment-agenda--open absolute inset-0 z-0 cursor-pointer rounded-radius focus-visible:outline-none", S.nativeButtonReset, s.inset)
 			}),
-			/* @__PURE__ */ P("span", {
+			/* @__PURE__ */ R(l, {
+				gap: "none",
+				className: "appointment-agenda--time w-16 shrink-0 tabular-nums",
+				children: [
+					/* @__PURE__ */ L(i, {
+						tag: "span",
+						type: "inherit",
+						weight: "medium",
+						"aria-hidden": "true",
+						className: "whitespace-nowrap",
+						children: t.slot.start
+					}),
+					/* @__PURE__ */ L(i, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						"aria-hidden": "true",
+						className: "whitespace-nowrap",
+						children: t.slot.end
+					}),
+					/* @__PURE__ */ L(k, { children: /* @__PURE__ */ L("span", {
+						id: `${n}-time`,
+						children: t.time
+					}) })
+				]
+			}),
+			/* @__PURE__ */ L("span", {
 				"aria-hidden": "true",
 				className: r("appointment-agenda--stripe w-1 shrink-0 self-stretch rounded-full", t.categoryColorClass)
 			}),
-			/* @__PURE__ */ F(ne, {
+			/* @__PURE__ */ R(M, {
 				className: "min-w-0",
-				children: [/* @__PURE__ */ F(ie, {
+				children: [/* @__PURE__ */ R(te, {
 					className: "flex-wrap",
-					children: [/* @__PURE__ */ P(a, {
+					children: [/* @__PURE__ */ L(i, {
 						type: "inherit",
 						id: `${n}-title`,
 						tag: "span",
 						weight: "medium",
-						className: "truncate",
+						className: "min-w-0 break-words",
 						children: e.title
-					}), /* @__PURE__ */ P(E, {
+					}), /* @__PURE__ */ L(D, {
 						id: `${n}-status`,
 						tone: t.statusTone,
 						size: "sm",
 						children: t.statusLabel
 					})]
-				}), /* @__PURE__ */ P(ee, {
-					id: `${n}-detail`,
+				}), !!c && /* @__PURE__ */ L(A, {
+					id: `${n}-people`,
 					clamp: 1,
-					children: i ? `${t.time} · ${i}` : t.time
+					className: "appointment-agenda--people",
+					children: c
 				})]
 			}),
-			(!!o || d) && /* @__PURE__ */ F(te, {
+			(!!o || p) && /* @__PURE__ */ R(j, {
+				className: "relative z-10",
 				onFocus: () => {
-					m.current = !0;
+					g.current = !0;
 				},
 				onBlur: (e) => {
-					e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget) && (m.current = !1);
+					e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget) && (g.current = !1);
 				},
-				children: [!!o && /* @__PURE__ */ F(fe, { children: [/* @__PURE__ */ P(O, { children: /* @__PURE__ */ P("span", {
-					id: `${n}-staff`,
-					children: o.name
-				}) }), /* @__PURE__ */ F(w, {
+				children: [!!o && /* @__PURE__ */ R(T, {
 					size: "sm",
 					"aria-hidden": "true",
-					children: [!!o.avatarUrl && /* @__PURE__ */ P(T, {
+					className: "appointment-agenda--staff hidden @md/appointment-calendar:flex",
+					children: [!!o.avatarUrl && /* @__PURE__ */ L(E, {
 						src: o.avatarUrl,
 						alt: ""
-					}), /* @__PURE__ */ P(C, { children: S(o.name) })]
-				})] }), t.actionsMenu]
+					}), /* @__PURE__ */ L(w, { children: C(o.name) })]
+				}), t.actionsMenu]
 			})
 		]
 	});
 }
-function Oe({ days: e, appointments: t, categories: n, conflicts: r, heading: i, loading: c, error: u, onRetry: d, locale: f, onAppointmentClick: p, appointmentActions: m, renderAppointment: g, strings: v }) {
-	let x = e.map((e) => ({
+function Oe({ days: e, appointments: t, categories: n, conflicts: c, heading: u, loading: d, error: f, onRetry: m, locale: h, onAppointmentClick: g, appointmentActions: _, renderAppointment: y, strings: S, regionRef: C, className: w }) {
+	let T = e.map((e) => ({
 		day: e,
-		items: U(t, e)
-	})), S = x.reduce((e, t) => e + t.items.length, 0), C = new Intl.DateTimeFormat(f, {
+		items: W(t, e)
+	})), E = new Set(T.flatMap((e) => e.items.map((e) => e.id))).size, D = new Intl.DateTimeFormat(h, {
 		weekday: "long",
 		month: "long",
 		day: "numeric"
-	}), w = e.length > 1, T = (e) => {
-		let t = r.has(e.id), i = (m?.(e) ?? []).filter((e) => e.visible !== !1), a = {
+	}), O = e.length > 1, A = (e) => {
+		let t = c.has(e.id), r = (_?.(e) ?? []).filter((e) => e.visible !== !1), i = {
+			start: Te(e.start, h),
+			end: Te(e.end, h)
+		}, a = {
 			category: n.find((t) => t.id === e.category),
-			categoryColorClass: L[ve(n, e.category)],
+			categoryColorClass: ge[_e(n, e.category)],
 			conflict: t,
-			statusLabel: t ? v.conflict : v.status[e.status],
+			statusLabel: t ? S.conflict : S.status[e.status],
 			statusTone: t ? "destructive" : G[e.status],
-			time: v.formatTimeRange(Ee(e.start, f), Ee(e.end, f)),
-			open: p ? () => p(e) : void 0,
-			actions: i,
-			actionsMenu: i.length > 0 ? /* @__PURE__ */ P(y, {
-				actions: i,
-				srText: v.formatActionsLabel(e.title),
+			time: S.formatTimeRange(i.start, i.end),
+			slot: i,
+			open: g ? () => g(e) : void 0,
+			actions: r,
+			actionsMenu: r.length > 0 ? /* @__PURE__ */ L(b, {
+				actions: r,
+				srText: S.formatActionsLabel(e.title),
 				buttonProps: {
 					size: "sm",
 					className: "appointment-agenda--actions relative z-10"
@@ -271,213 +307,265 @@ function Oe({ days: e, appointments: t, categories: n, conflicts: r, heading: i,
 		};
 		return {
 			...a,
-			defaultRender: () => /* @__PURE__ */ P(De, {
+			defaultRender: () => /* @__PURE__ */ L(De, {
 				appointment: e,
 				context: a
 			})
 		};
-	}, E = (e) => /* @__PURE__ */ P(l, {
-		render: /* @__PURE__ */ P("ul", {}),
-		gap: "sm",
-		className: "appointment-agenda--list m-0 list-none p-0",
+	}, j = (e) => /* @__PURE__ */ L("ul", {
+		className: "appointment-agenda--list -mx-row-x m-0 list-none p-0",
 		children: e.map((e) => {
-			let t = T(e);
-			return /* @__PURE__ */ P("li", {
-				className: "min-w-0",
-				children: g ? g(e, t) : t.defaultRender()
+			let t = A(e);
+			return /* @__PURE__ */ L("li", {
+				className: r("min-w-0 last:border-b-0", p.header),
+				children: y ? y(e, t) : t.defaultRender()
 			}, e.id);
 		})
-	}), D;
-	return D = c ? /* @__PURE__ */ F(l, {
+	}), M;
+	return M = d ? /* @__PURE__ */ R(l, {
 		gap: "sm",
 		"aria-busy": "true",
 		className: "appointment-agenda--loading",
-		children: [/* @__PURE__ */ P(O, { children: v.loading }), Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ P(b, { className: "h-control-lg w-full rounded-radius" }, t))]
-	}) : u ? le(u) ? u : /* @__PURE__ */ P(_, {
+		children: [/* @__PURE__ */ L(k, { children: S.loading }), Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ L(x, { className: "h-control-lg w-full rounded-radius" }, t))]
+	}) : f ? oe(f) ? f : /* @__PURE__ */ L(v, {
 		variant: "inline",
-		title: v.errorTitle,
-		description: u instanceof Error ? u.message : typeof u == "string" || typeof u == "number" ? String(u) : v.errorDescription,
-		onRetry: d,
-		retryLabel: v.retry,
+		title: S.errorTitle,
+		description: f instanceof Error ? f.message : typeof f == "string" || typeof f == "number" ? String(f) : S.errorDescription,
+		onRetry: m,
+		retryLabel: S.retry,
 		className: "appointment-agenda--error"
-	}) : S === 0 ? /* @__PURE__ */ P(ce, {
+	}) : O ? /* @__PURE__ */ L(l, {
+		gap: "xl",
+		children: T.map((e) => {
+			let t = D.format(e.day);
+			return /* @__PURE__ */ R(l, {
+				render: /* @__PURE__ */ L("section", {}),
+				gap: "sm",
+				"aria-label": t,
+				className: "appointment-agenda--day",
+				children: [/* @__PURE__ */ R(l, {
+					direction: "horizontal",
+					align: "baseline",
+					justify: "between",
+					gap: "md",
+					wrap: !1,
+					children: [/* @__PURE__ */ L(a, {
+						className: "min-w-0 text-inherit",
+						tag: "h3",
+						size: o.subsection,
+						children: t
+					}), e.items.length > 0 && /* @__PURE__ */ L(i, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						className: "appointment-agenda--day-count shrink-0 tabular-nums",
+						children: S.formatCount(e.items.length)
+					})]
+				}), e.items.length > 0 ? j(e.items) : /* @__PURE__ */ L(i, {
+					size: "xs",
+					type: "secondary",
+					className: "appointment-agenda--day-empty",
+					children: S.empty
+				})]
+			}, e.day.toISOString());
+		})
+	}) : E === 0 ? /* @__PURE__ */ L(ae, {
 		padding: "sm",
-		title: v.empty,
+		title: S.empty,
 		description: !1,
-		ariaLabel: v.empty,
+		ariaLabel: S.empty,
 		className: "appointment-agenda--empty"
-	}) : w ? /* @__PURE__ */ P(l, {
-		gap: "xl",
-		children: x.filter((e) => e.items.length > 0).map((e) => /* @__PURE__ */ F(l, {
-			render: /* @__PURE__ */ P("section", {}),
-			gap: "sm",
-			"aria-label": C.format(e.day),
-			className: "appointment-agenda--day",
-			children: [/* @__PURE__ */ P(o, {
-				className: "text-inherit",
-				tag: "h3",
-				size: s.subsection,
-				children: C.format(e.day)
-			}), E(e.items)]
-		}, e.day.toISOString()))
-	}) : E(x[0]?.items ?? []), /* @__PURE__ */ P(h, {
-		surface: "card",
-		title: i,
-		headerEnd: c || u ? void 0 : /* @__PURE__ */ P(a, {
-			size: "xs",
-			type: "secondary",
-			className: "tabular-nums",
-			children: v.formatCount(S)
-		}),
-		className: "appointment-agenda--component h-full min-h-0",
-		contentClassName: "min-h-0 flex-1",
-		children: /* @__PURE__ */ P(k, {
-			className: "appointment-agenda--scroll h-full min-h-0",
-			children: D
-		})
+	}) : j(T[0]?.items ?? []), /* @__PURE__ */ R(l, {
+		ref: C,
+		gap: "lg",
+		role: "group",
+		"aria-label": u,
+		tabIndex: -1,
+		className: r("appointment-agenda--component min-h-0 min-w-0 outline-none", s.inset, w),
+		children: [/* @__PURE__ */ R(l, {
+			direction: "horizontal",
+			align: "baseline",
+			justify: "between",
+			gap: "md",
+			wrap: !1,
+			className: "appointment-agenda--heading",
+			children: [/* @__PURE__ */ L(a, {
+				tag: "p",
+				className: "min-w-0 text-inherit",
+				children: u
+			}), !d && !f && /* @__PURE__ */ L(i, {
+				tag: "span",
+				size: "xs",
+				type: "secondary",
+				className: "appointment-agenda--count shrink-0 tabular-nums",
+				children: S.formatCount(E)
+			})]
+		}), /* @__PURE__ */ L(ee, {
+			className: "appointment-agenda--scroll min-h-0 flex-1",
+			children: M
+		})]
 	});
 }
 //#endregion
 //#region src/components/features/appointment-calendar/partials/appointment-month.tsx
 var K = 3;
-function ke({ selected: e, onSelect: t, onVisibleMonthChange: n, appointments: o, categories: s, weekStartsOn: u, locale: f, strings: p }) {
-	let [m, h] = N(e), g = M(null), _ = M(!1), v = j(() => /* @__PURE__ */ new Date(), []);
-	A(() => h(e), [e]);
-	let y = m.getFullYear() * 12 + m.getMonth();
-	A(() => {
-		n?.(new Date(Math.floor(y / 12), y % 12, 1));
-	}, [y, n]), A(() => {
+function ke({ selected: e, onSelect: t, onVisibleMonthChange: n, appointments: a, categories: o, weekStartsOn: u, locale: f, strings: p }) {
+	let [m, h] = I(e), g = F(null), _ = F(!1), [v] = I(() => /* @__PURE__ */ new Date()), y = e.getFullYear(), b = e.getMonth(), x = e.getDate();
+	se(() => h(new Date(y, b, x)), [
+		y,
+		b,
+		x
+	]);
+	let C = m.getFullYear() * 12 + m.getMonth();
+	se(() => {
+		n?.(new Date(Math.floor(C / 12), C % 12, 1));
+	}, [C, n]), se(() => {
 		_.current && (_.current = !1, g.current?.querySelector("[data-focus-target]")?.focus());
 	}, [m]);
-	let b = j(() => be(m, u), [m, u]), S = j(() => new Intl.DateTimeFormat(f, { month: "long" }), [f]), C = j(() => new Intl.DateTimeFormat(f, { weekday: "short" }), [f]), w = j(() => new Intl.DateTimeFormat(f, {
+	let w = P(() => ye(m, u), [m, u]), T = P(() => new Intl.DateTimeFormat(f, { month: "long" }), [f]), E = P(() => new Intl.DateTimeFormat(f, {
+		month: "long",
+		year: "numeric"
+	}), [f]), D = P(() => new Intl.DateTimeFormat(f, { weekday: "short" }), [f]), k = P(() => new Intl.DateTimeFormat(f, { weekday: "long" }), [f]), ee = P(() => new Intl.DateTimeFormat(f, {
 		weekday: "long",
 		month: "long",
 		day: "numeric",
 		year: "numeric"
-	}), [f]), T = j(() => Array.from({ length: 12 }, (e, t) => ({
+	}), [f]), A = P(() => Array.from({ length: 12 }, (e, t) => ({
 		value: String(t),
-		label: S.format(new Date(2e3, t, 1))
-	})), [S]), E = j(() => {
+		label: T.format(new Date(2e3, t, 1))
+	})), [T]), j = P(() => {
 		let e = /* @__PURE__ */ new Set([v.getFullYear(), m.getFullYear()]);
-		for (let t of o) e.add(t.start.getFullYear());
+		for (let t of a) e.add(t.start.getFullYear());
 		let t = Math.min(...e) - 1, n = Math.max(...e) + 1;
 		return Array.from({ length: n - t + 1 }, (e, n) => ({
 			value: String(t + n),
 			label: String(t + n)
 		}));
 	}, [
-		o,
+		a,
 		m,
 		v
-	]), O = (e, n = !1) => {
+	]), M = (e, n = !1) => {
 		_.current = !0, h(e), n && t(e);
-	}, k = (n) => {
-		let r = V(e, n);
-		h(r), t(r);
+	}, N = (e) => {
+		let n = H(m, e);
+		h(n), t(n);
 	};
-	return /* @__PURE__ */ F(l, {
+	return /* @__PURE__ */ R(l, {
 		gap: "lg",
 		className: "appointment-month--component min-w-0",
-		children: [/* @__PURE__ */ F("div", {
+		children: [/* @__PURE__ */ R("div", {
 			className: "appointment-month--header flex min-w-0 items-center gap-space-xs",
 			children: [
-				/* @__PURE__ */ P(i, {
+				/* @__PURE__ */ L(c, {
 					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
 					size: "sm",
 					iconOnly: !0,
 					"aria-label": p.previousMonth,
-					onClick: () => k(-1),
-					children: /* @__PURE__ */ P(pe, {
+					onClick: () => N(-1),
+					children: /* @__PURE__ */ L(ue, {
 						"aria-hidden": "true",
 						className: "size-icon"
 					})
 				}),
-				/* @__PURE__ */ P(D, {
+				/* @__PURE__ */ L(O, {
 					size: "sm",
 					"aria-label": p.monthLabel,
-					options: T,
-					value: String(e.getMonth()),
-					onValueChange: (t) => t !== void 0 && k(Number(t) - e.getMonth()),
+					options: A,
+					value: String(m.getMonth()),
+					onValueChange: (e) => e !== void 0 && N(Number(e) - m.getMonth()),
 					className: "min-w-0 flex-1"
 				}),
-				/* @__PURE__ */ P(D, {
+				/* @__PURE__ */ L(O, {
 					size: "sm",
 					"aria-label": p.yearLabel,
-					options: E,
-					value: String(e.getFullYear()),
-					onValueChange: (t) => t !== void 0 && k((Number(t) - e.getFullYear()) * 12),
+					options: j,
+					value: String(m.getFullYear()),
+					onValueChange: (e) => e !== void 0 && N((Number(e) - m.getFullYear()) * 12),
 					className: "min-w-0 flex-1"
 				}),
-				/* @__PURE__ */ P(i, {
+				/* @__PURE__ */ L(c, {
 					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
 					size: "sm",
 					iconOnly: !0,
 					"aria-label": p.nextMonth,
-					onClick: () => k(1),
-					children: /* @__PURE__ */ P(me, {
+					onClick: () => N(1),
+					children: /* @__PURE__ */ L(de, {
 						"aria-hidden": "true",
 						className: "size-icon"
 					})
 				})
 			]
-		}), /* @__PURE__ */ F("div", {
+		}), /* @__PURE__ */ R("div", {
 			ref: g,
 			role: "grid",
-			"aria-label": `${S.format(m)} ${m.getFullYear()}`,
+			"aria-label": E.format(m),
 			onKeyDown: (e) => {
 				let t = {
-					ArrowLeft: () => z(m, -1),
-					ArrowRight: () => z(m, 1),
-					ArrowUp: () => z(m, -7),
-					ArrowDown: () => z(m, 7),
-					Home: () => H(m, u),
-					End: () => z(H(m, u), 6),
-					PageUp: () => V(m, -1),
-					PageDown: () => V(m, 1)
+					ArrowLeft: () => B(m, -1),
+					ArrowRight: () => B(m, 1),
+					ArrowUp: () => B(m, -7),
+					ArrowDown: () => B(m, 7),
+					Home: () => U(m, u),
+					End: () => B(U(m, u), 6),
+					PageUp: () => H(m, e.shiftKey ? -12 : -1),
+					PageDown: () => H(m, e.shiftKey ? 12 : 1)
 				}[e.key];
-				t && (e.preventDefault(), O(t()));
+				t && (e.preventDefault(), M(t()));
 			},
-			className: "appointment-month--grid grid min-w-0 grid-cols-7 gap-space-2xs",
-			children: [/* @__PURE__ */ P("div", {
+			className: "appointment-month--grid grid w-full min-w-0 grid-cols-7 gap-space-2xs",
+			children: [/* @__PURE__ */ L("div", {
 				role: "row",
 				className: "contents",
-				children: b[0]?.map((e) => /* @__PURE__ */ P(a, {
+				children: w[0]?.map((e) => /* @__PURE__ */ L(i, {
 					tag: "div",
 					role: "columnheader",
+					"aria-label": k.format(e),
 					size: "xs",
 					type: "secondary",
 					weight: "medium",
 					align: "center",
 					className: "appointment-month--weekday py-space-xs",
-					children: C.format(e)
+					children: D.format(e)
 				}, e.getDay()))
-			}), b.map((t) => /* @__PURE__ */ P("div", {
+			}), w.map((t) => /* @__PURE__ */ L("div", {
 				role: "row",
 				className: "contents",
 				children: t.map((t) => {
-					let n = U(o, t), i = [...new Set(n.map((e) => e.category))], a = B(t, e), l = B(t, m), u = t.getMonth() !== m.getMonth();
-					return /* @__PURE__ */ P("div", {
+					let n = W(a, t), c = new Set(n.map((e) => e.category)), l = [...o.filter((e) => c.has(e.id)).map((e) => e.id), ...[...c].filter((e) => !o.some((t) => t.id === e))], u = V(t, e), f = V(t, m), h = V(t, v), g = t.getMonth() !== m.getMonth();
+					return /* @__PURE__ */ L("div", {
 						role: "gridcell",
-						"aria-selected": a,
-						className: "flex min-w-0 justify-center",
-						children: /* @__PURE__ */ F("button", {
+						"aria-selected": u,
+						className: "min-w-0",
+						children: /* @__PURE__ */ R("button", {
 							type: "button",
-							tabIndex: l ? 0 : -1,
-							"data-focus-target": l ? "" : void 0,
-							"data-selected": a ? "" : void 0,
-							"data-outside": u ? "" : void 0,
-							"aria-current": B(t, v) ? "date" : void 0,
-							"aria-label": p.formatDayLabel(w.format(t), n.length),
-							onClick: () => O(t, !0),
-							className: r(x.nativeButtonReset, "appointment-month--day relative flex size-action flex-col items-center justify-center rounded-radius text-sm tabular-nums outline-none", c.edge, a ? "bg-primary font-semibold text-primary-foreground" : r(x.rowHover, u ? "text-muted-foreground" : "text-foreground"), !a && B(t, v) && "font-semibold"),
-							children: [t.getDate(), i.length > 0 && /* @__PURE__ */ P("span", {
+							tabIndex: f ? 0 : -1,
+							"data-focus-target": f ? "" : void 0,
+							"data-selected": u ? "" : void 0,
+							"data-outside": g ? "" : void 0,
+							"data-today": h ? "" : void 0,
+							"aria-current": h ? "date" : void 0,
+							"aria-label": p.formatDayLabel(ee.format(t), n.length),
+							onClick: () => M(t, !0),
+							className: r(S.nativeButtonReset, "appointment-month--day flex h-action-lg w-full cursor-pointer flex-col items-center justify-center gap-space-2xs rounded-radius border border-transparent text-sm tabular-nums outline-none", s.frame, u ? "bg-primary font-semibold text-primary-foreground" : r(S.rowHover, g ? "text-muted-foreground" : "text-foreground"), !u && h && "border-input font-semibold"),
+							children: [t.getDate(), /* @__PURE__ */ R("span", {
 								"aria-hidden": "true",
-								className: "appointment-month--dots absolute inset-x-0 bottom-space-2xs flex justify-center gap-space-2xs",
-								children: i.slice(0, K).map((e) => /* @__PURE__ */ P("span", { className: r(d.inline, L[ve(s, e)]) }, e))
+								className: "appointment-month--dots flex h-1.5 items-center justify-center gap-space-2xs",
+								children: [l.slice(0, K).map((e) => /* @__PURE__ */ L("span", {
+									"data-category": e,
+									className: r(d.inline, ge[_e(o, e)])
+								}, e)), l.length > K && /* @__PURE__ */ L(i, {
+									tag: "span",
+									size: "xs",
+									type: "inherit",
+									lineHeight: "none",
+									className: "appointment-month--more",
+									children: "+"
+								})]
 							})]
 						})
 					}, t.toISOString());
@@ -488,198 +576,206 @@ function ke({ selected: e, onSelect: t, onVisibleMonthChange: n, appointments: o
 }
 //#endregion
 //#region src/components/features/appointment-calendar/appointment-calendar.tsx
-function q(e, t, n) {
-	let [r, i] = N(t);
+function Ae(e, t, n) {
+	let [r, i] = I(t);
 	return [e ?? r, (t) => {
 		e === void 0 && i(t), n?.(t);
 	}];
 }
-function Ae({ appointments: s, categories: c, staff: u, title: _, date: y, defaultDate: b, onDateChange: x, view: S, defaultView: C = "day", onViewChange: w, category: T, defaultCategory: E = "all", onCategoryChange: O, staffId: k, defaultStaffId: ee = "all", onStaffChange: te, onAppointmentClick: ne, appointmentActions: re, renderAppointment: ie, onRangeChange: ce, onCreateAppointment: le, onConflictsDismiss: ue, loading: de = !1, error: fe, onRetry: pe, weekStartsOn: me, strings: I, className: B }) {
-	let V = n(_e, I), { locale: H } = e(), U = t(), W = me ?? U.weekStartsOn ?? 0, [G, De] = q(y, b ?? R(/* @__PURE__ */ new Date()), x), [K, Ae] = q(S, C, w), [J, je] = q(T, E, O), [Y, Me] = q(k, ee, te), [Ne, Pe] = N(""), [Fe, Ie] = N(() => new Date(G.getFullYear(), G.getMonth(), 1)), Le = j(() => u ?? Te(s), [u, s]), X = j(() => K === "week" ? ye(G, W) : [R(G)], [
-		K,
-		G,
-		W
-	]), Z = j(() => Se(s, J, Y), [
-		s,
+function je({ appointments: o, categories: s, staff: u, title: v, date: b, defaultDate: x, onDateChange: S, view: C, defaultView: w = "day", onViewChange: T, category: E, defaultCategory: D = "all", onCategoryChange: k, staffId: ee, defaultStaffId: A = "all", onStaffIdChange: j, onAppointmentClick: M, appointmentActions: N, renderAppointment: te, onRangeChange: ae, onCreateAppointment: oe, onConflictsDismiss: ce, loading: ue = !1, error: de, onRetry: he, weekStartsOn: V, locale: H, surface: U = "card", strings: W, className: Ee }) {
+	let G = n(me, W), De = t(), K = H ?? De.locale, je = e(), q = V ?? je.weekStartsOn ?? 0, [Me] = I(() => z(/* @__PURE__ */ new Date())), [J, Ne] = Ae(b, x ?? Me, S), [Y, Pe] = Ae(C, w, T), [Fe, Ie] = Ae(E, D, k), [X, Le] = Ae(ee, A, j), [Re, ze] = I(""), [Be, Ve] = I(() => new Date(J.getFullYear(), J.getMonth(), 1)), He = P(() => u ?? we(o), [u, o]), Z = P(() => Y === "week" ? ve(J, q) : [z(J)], [
+		Y,
 		J,
-		Y
-	]), Q = j(() => {
-		let e = [...be(Fe, W).flat(), ...X].map((e) => e.getTime());
+		q
+	]), Ue = P(() => xe(o, Fe, X), [
+		o,
+		Fe,
+		X
+	]), We = P(() => {
+		let e = [...ye(Be, q).flat(), ...Z].map((e) => e.getTime());
 		return {
 			start: new Date(Math.min(...e)),
-			end: z(new Date(Math.max(...e)), 1)
+			end: B(new Date(Math.max(...e)), 1)
 		};
 	}, [
-		Fe,
-		W,
-		X
-	]), Re = M("");
-	A(() => {
-		let e = `${Q.start.getTime()}:${Q.end.getTime()}`;
-		e !== Re.current && (Re.current = e, ce?.(Q));
-	}, [Q, ce]);
-	let ze = j(() => Z.filter((e) => X.some((t) => xe(e, t))), [Z, X]), $ = j(() => Ce(Se(s, "all", Y).filter((e) => X.some((t) => xe(e, t)))), [
-		s,
-		Y,
-		X
-	]), Be = j(() => we($), [$]), Ve = ze.filter((e) => Be.has(e.id)).length, He = ze.filter((e) => e.status !== "cancelled").length, Ue = [...Be].sort().join("|"), We = $.length > 0 && Ne !== Ue, Ge = new Intl.DateTimeFormat(H, {
+		Be,
+		q,
+		Z
+	]), Ge = F("");
+	se(() => {
+		let e = `${We.start.getTime()}:${We.end.getTime()}`;
+		e !== Ge.current && (Ge.current = e, ae?.(We));
+	}, [We, ae]);
+	let Ke = P(() => Ue.filter((e) => Z.some((t) => be(e, t))), [Ue, Z]), Q = P(() => Se(xe(o, "all", X).filter((e) => Z.some((t) => be(e, t)))), [
+		o,
+		X,
+		Z
+	]), qe = P(() => Ce(Q), [Q]), Je = Ke.filter((e) => qe.has(e.id)).length, Ye = Ke.filter((e) => e.status !== "cancelled").length, Xe = [...qe].sort().join("|"), Ze = Q.length > 0 && Re !== Xe, Qe = new Intl.DateTimeFormat(K, {
 		weekday: "long",
 		month: "long",
 		day: "numeric"
-	}), Ke = new Intl.DateTimeFormat(H, {
+	}), $e = new Intl.DateTimeFormat(K, {
 		month: "long",
 		day: "numeric"
-	}), qe = K === "week" ? V.formatWeekRange(Ke.format(X[0] ?? G), Ke.format(X[X.length - 1] ?? G)) : Ge.format(G), Je = (e) => {
-		Pe(Ue), ue?.(e);
+	}), et = Y === "week" ? G.formatWeekRange($e.format(Z[0] ?? J), $e.format(Z[Z.length - 1] ?? J)) : Qe.format(J), tt = F(null), nt = F(!1), rt = (e) => {
+		nt.current = !0, ze(Xe), ce?.(e);
 	};
-	return /* @__PURE__ */ F(l, {
-		gap: "xl",
+	le(() => {
+		!Ze && nt.current && (nt.current = !1, tt.current?.focus());
+	}, [Ze]);
+	let $ = U === "card";
+	return /* @__PURE__ */ R("div", {
 		"data-slot": "appointment-calendar",
-		"data-view": K,
-		className: r("appointment-calendar--component @container/appointment-calendar min-h-0 min-w-0", B),
+		"data-view": Y,
+		"data-surface": U,
+		className: r("appointment-calendar--component @container/appointment-calendar flex min-h-0 min-w-0 flex-col", $ && r(f.frame, "overflow-hidden"), Ee),
 		children: [
-			/* @__PURE__ */ F("div", {
-				className: "appointment-calendar--header flex min-w-0 flex-wrap items-start justify-between gap-space-lg",
-				children: [/* @__PURE__ */ F(l, {
-					gap: "xs",
+			/* @__PURE__ */ R("div", {
+				className: r("appointment-calendar--header flex min-w-0 flex-wrap items-start justify-between gap-space-lg", p.header, $ ? "p-surface" : "pb-surface"),
+				children: [/* @__PURE__ */ R(l, {
+					gap: "normal",
 					className: "min-w-0",
-					children: [!!_ && /* @__PURE__ */ P(o, {
+					children: [!!v && /* @__PURE__ */ L(a, {
 						className: "text-inherit",
 						tag: "h2",
 						size: "lg",
-						children: _
-					}), !de && !fe && /* @__PURE__ */ F(a, {
+						children: v
+					}), !ue && !de && /* @__PURE__ */ R(i, {
 						size: "xs",
 						type: "secondary",
 						className: "appointment-calendar--counts tabular-nums",
-						children: [V.formatBooked(He), Ve > 0 && ` · ${V.formatConflicts(Ve)}`]
+						children: [G.formatBooked(Ye), Je > 0 && ` · ${G.formatConflicts(Je)}`]
 					})]
-				}), /* @__PURE__ */ F("div", {
-					className: r("appointment-calendar--actions flex min-w-0 flex-wrap items-center", v.commands),
+				}), /* @__PURE__ */ R("div", {
+					className: r("appointment-calendar--actions flex min-w-0 flex-wrap items-center", y.commands),
 					children: [
-						/* @__PURE__ */ P(se, {
-							value: K,
-							onValueChange: (e) => (e === "day" || e === "week") && Ae(e),
-							children: /* @__PURE__ */ P(oe, {
+						/* @__PURE__ */ L(ie, {
+							value: Y,
+							onValueChange: (e) => (e === "day" || e === "week") && Pe(e),
+							children: /* @__PURE__ */ L(re, {
 								role: "group",
-								"aria-label": V.viewLabel,
+								"aria-label": G.viewLabel,
 								"aria-orientation": void 0,
-								activateOnFocus: !0,
-								children: ["day", "week"].map((e) => /* @__PURE__ */ P(ae, {
+								children: ["day", "week"].map((e) => /* @__PURE__ */ L(ne, {
 									value: e,
 									role: "button",
 									"aria-selected": void 0,
 									"aria-controls": void 0,
-									"aria-pressed": K === e,
-									children: V[e]
+									"aria-pressed": Y === e,
+									children: G[e]
 								}, e))
 							})
 						}),
-						Le.length > 0 && /* @__PURE__ */ P(D, {
-							"aria-label": V.staffLabel,
+						He.length > 0 && /* @__PURE__ */ L(O, {
+							"aria-label": G.staffLabel,
 							options: [{
 								value: "all",
-								label: V.allStaff
-							}, ...Le.map((e) => ({
+								label: G.allStaff
+							}, ...He.map((e) => ({
 								value: e.id,
 								label: e.name
 							}))],
-							value: Y,
-							onValueChange: (e) => Me(e ?? "all"),
+							value: X,
+							onValueChange: (e) => Le(e ?? "all"),
 							className: "appointment-calendar--staff w-44"
 						}),
-						!!le && /* @__PURE__ */ F(i, {
+						!!oe && /* @__PURE__ */ R(c, {
 							type: "button",
 							tone: "primary",
-							onClick: () => le(G),
+							onClick: () => oe(J),
 							className: "appointment-calendar--create",
-							children: [/* @__PURE__ */ P(he, {
+							children: [/* @__PURE__ */ L(fe, {
 								"aria-hidden": "true",
 								className: "size-icon"
-							}), V.newAppointment]
+							}), G.newAppointment]
 						})
 					]
 				})]
 			}),
-			We && /* @__PURE__ */ F(m, {
-				tone: "destructive",
-				className: "appointment-calendar--alert",
-				children: [
-					/* @__PURE__ */ P(ge, { "aria-hidden": "true" }),
-					/* @__PURE__ */ P(g, { children: V.conflictTitle }),
-					/* @__PURE__ */ P(f, { children: $.map((e) => V.formatConflict(e.staff.name, e.appointments.length, Ee(e.start, H))).join(" ") }),
-					/* @__PURE__ */ P(p, { children: /* @__PURE__ */ P(i, {
-						type: "button",
-						size: "sm",
-						onClick: () => Je($),
-						children: V.dismiss
-					}) })
-				]
+			Ze && /* @__PURE__ */ L("div", {
+				className: r("appointment-calendar--notice min-w-0", p.header, $ ? "p-surface" : "py-surface"),
+				children: /* @__PURE__ */ R(h, {
+					tone: "destructive",
+					className: "appointment-calendar--alert",
+					children: [
+						/* @__PURE__ */ L(pe, { "aria-hidden": "true" }),
+						/* @__PURE__ */ L(m, { children: G.conflictTitle }),
+						/* @__PURE__ */ L(g, { children: Q.map((e) => G.formatConflict(e.staff.name, e.appointments.length, Te(e.start, K))).join(" ") }),
+						/* @__PURE__ */ L(_, { children: /* @__PURE__ */ L(c, {
+							type: "button",
+							size: "sm",
+							onClick: () => rt(Q),
+							children: G.dismiss
+						}) })
+					]
+				})
 			}),
-			/* @__PURE__ */ F("div", {
-				className: "appointment-calendar--body grid min-h-0 min-w-0 flex-1 gap-space-xl @3xl/appointment-calendar:grid-cols-[minmax(17rem,20rem)_minmax(0,1fr)]",
-				children: [/* @__PURE__ */ P(h, {
-					surface: "card",
-					className: "appointment-calendar--aside min-w-0 self-start",
-					children: /* @__PURE__ */ F(l, {
+			/* @__PURE__ */ R("div", {
+				className: "appointment-calendar--body grid min-h-0 min-w-0 flex-1 @2xl/appointment-calendar:grid-cols-[minmax(17rem,20rem)_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ L("div", {
+					className: r("appointment-calendar--aside min-w-0", p.header, "@2xl/appointment-calendar:border-b-0 @2xl/appointment-calendar:border-e @2xl/appointment-calendar:border-border/60", $ ? "p-surface" : "py-surface @2xl/appointment-calendar:pe-surface"),
+					children: /* @__PURE__ */ R(l, {
 						gap: "xl",
-						children: [/* @__PURE__ */ P(ke, {
-							selected: G,
-							onSelect: De,
-							onVisibleMonthChange: Ie,
-							appointments: Z,
-							categories: c,
-							weekStartsOn: W,
-							locale: H,
-							strings: V
-						}), c.length > 0 && /* @__PURE__ */ P(se, {
-							value: J,
-							onValueChange: (e) => typeof e == "string" && je(e),
-							children: /* @__PURE__ */ P(oe, {
+						className: "appointment-calendar--aside-content max-w-sm",
+						children: [/* @__PURE__ */ L(ke, {
+							selected: J,
+							onSelect: Ne,
+							onVisibleMonthChange: Ve,
+							appointments: Ue,
+							categories: s,
+							weekStartsOn: q,
+							locale: K,
+							strings: G
+						}), s.length > 0 && /* @__PURE__ */ L(ie, {
+							value: Fe,
+							onValueChange: (e) => typeof e == "string" && Ie(e),
+							children: /* @__PURE__ */ L(re, {
 								variant: "chips",
 								role: "group",
-								"aria-label": V.categoriesLabel,
+								"aria-label": G.categoriesLabel,
 								"aria-orientation": void 0,
-								activateOnFocus: !0,
+								className: "appointment-calendar--categories w-full",
 								children: [{
 									id: "all",
-									label: V.allCategories
-								}, ...c].map((e) => /* @__PURE__ */ F(ae, {
+									label: G.allCategories
+								}, ...s].map((e) => /* @__PURE__ */ R(ne, {
 									value: e.id,
 									role: "button",
 									"aria-selected": void 0,
 									"aria-controls": void 0,
-									"aria-pressed": J === e.id,
+									"aria-pressed": Fe === e.id,
 									className: "appointment-calendar--category gap-space-xs",
-									children: [e.id !== "all" && /* @__PURE__ */ P("span", {
+									children: [e.id !== "all" && /* @__PURE__ */ L("span", {
 										"aria-hidden": "true",
-										className: r(d.inline, L[ve(c, e.id)])
+										className: r(d.inline, ge[_e(s, e.id)])
 									}), e.label]
 								}, e.id))
 							})
 						})]
 					})
-				}), /* @__PURE__ */ P(Oe, {
-					days: X,
-					appointments: Z,
-					categories: c,
-					conflicts: Be,
-					heading: qe,
-					loading: de,
-					error: fe,
-					onRetry: pe,
-					locale: H,
-					onAppointmentClick: ne,
-					appointmentActions: re,
-					renderAppointment: ie,
-					strings: V
+				}), /* @__PURE__ */ L(Oe, {
+					regionRef: tt,
+					days: Z,
+					appointments: Ue,
+					categories: s,
+					conflicts: qe,
+					heading: et,
+					loading: ue,
+					error: de,
+					onRetry: he,
+					locale: K,
+					className: $ ? "p-surface" : "pt-surface @2xl/appointment-calendar:ps-surface",
+					onAppointmentClick: M,
+					appointmentActions: N,
+					renderAppointment: te,
+					strings: G
 				})]
 			})
 		]
 	});
 }
-Ae.displayName = "AppointmentCalendar";
+je.displayName = "AppointmentCalendar";
 //#endregion
-export { Ae as AppointmentCalendar, U as appointmentsOn, _e as defaultAppointmentCalendarStrings, Se as filterAppointments, Ce as findConflicts };
+export { je as AppointmentCalendar, W as appointmentsOn, me as defaultAppointmentCalendarStrings, xe as filterAppointments, Se as findConflicts };
 
 //# sourceMappingURL=appointment-calendar.js.map