@motech-development/breeze-ui 4.2.0 → 4.3.0

package/lib/index.js

@@ -1,23 +1,27 @@
 import { ToggleButton as e } from "react-aria-components/ToggleButton";
 import { ToggleButtonGroup as t } from "react-aria-components/ToggleButtonGroup";
-import { createContext as n, createElement as r, useCallback as i, useContext as a, useEffect as o, useLayoutEffect as s, useMemo as c, useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Button as p } from "react-aria-components/Button";
-import { ProgressBarContext as m } from "react-aria-components/ProgressBar";
-import { useSlottedContext as h } from "react-aria-components/slots";
-import { ArrowDownLeft as g, ArrowUpRight as _, Bell as v, Building2 as y, CalendarDays as b, Camera as x, Check as S, ChevronDown as C, ChevronLeft as w, ChevronRight as T, Clock3 as ee, Download as te, Ellipsis as E, FileText as D, House as O, List as k, LockKeyhole as ne, LogOut as re, Plus as ie, Settings as ae, Trash2 as oe, TriangleAlert as se, Upload as ce, Users as le, X as ue } from "lucide-react";
-import { parseDate as de } from "@internationalized/date";
-import { I18nProvider as fe, useLocale as pe } from "react-aria-components/I18nProvider";
+import { createContext as n, createElement as r, useCallback as i, useContext as a, useEffect as o, useId as s, useLayoutEffect as c, useMemo as l, useRef as u, useState as d, useSyncExternalStore as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Button as g } from "react-aria-components/Button";
+import { ProgressBarContext as _ } from "react-aria-components/ProgressBar";
+import { useSlottedContext as v } from "react-aria-components/slots";
+import { Dialog as y } from "react-aria-components/Dialog";
+import { Modal as b, ModalOverlay as x } from "react-aria-components/Modal";
+import { Popover as S } from "react-aria-components/Popover";
+import { UNSAFE_PortalProvider as C } from "react-aria/PortalProvider";
+import { I18nProvider as ee, useLocale as w } from "react-aria-components/I18nProvider";
+import { ArrowDownLeft as T, ArrowUpRight as E, Bell as te, Building2 as ne, CalendarDays as re, Camera as ie, Check as D, ChevronDown as O, ChevronLeft as k, ChevronRight as A, Clock3 as ae, Download as j, Ellipsis as oe, FileText as se, House as M, List as N, LockKeyhole as P, LogOut as F, Plus as I, Settings as ce, Trash2 as le, TriangleAlert as L, Upload as R, Users as ue, X as z } from "lucide-react";
+import { parseDate as B } from "@internationalized/date";
 //#region src/provider/BreezeContext.ts
-var A = n(null);
-function j() {
-	let e = a(A);
+var V = n(null);
+function H() {
+	let e = a(V);
 	if (e === null) throw Error("Breeze components must be rendered within BreezeProvider.");
 	return e;
 }
 //#endregion
 //#region src/patterns/AppearanceControl/AppearanceControl.tsx
-var M = {
+var U = {
 	base: {
 		control: "breeze:flex breeze:items-center breeze:gap-breeze-2 breeze:font-breeze-sans",
 		group: "breeze:flex breeze:items-center breeze:gap-breeze-2",
@@ -28,7 +32,7 @@ var M = {
 	size: {},
 	state: { selected: "breeze:data-[selected]:border-breeze-brand breeze:data-[selected]:bg-breeze-brand-soft breeze:data-[selected]:text-breeze-brand-text breeze:forced-colors:data-[selected]:outline-2 breeze:forced-colors:data-[selected]:outline-offset-2" },
 	variant: {}
-}, N = [
+}, W = [
 	{
 		message: "appearanceLight",
 		value: "light"
@@ -42,30 +46,30 @@ var M = {
 		value: "dark"
 	}
 ];
-function me(e) {
-	return N.some((t) => t.value === e);
-}
-function P() {
-	let { appearance: n, getMessageLocale: r, messages: i, setAppearance: a } = j();
-	return /* @__PURE__ */ f("div", {
-		className: M.base.control,
-		children: [/* @__PURE__ */ d("span", {
-			className: M.base.label,
+function de(e) {
+	return W.some((t) => t.value === e);
+}
+function fe() {
+	let { appearance: n, getMessageLocale: r, messages: i, setAppearance: a } = H();
+	return /* @__PURE__ */ h("div", {
+		className: U.base.control,
+		children: [/* @__PURE__ */ m("span", {
+			className: U.base.label,
 			lang: r("appearance"),
 			children: i.appearance
-		}), /* @__PURE__ */ d(t, {
+		}), /* @__PURE__ */ m(t, {
 			"aria-label": i.appearance,
-			className: M.base.group,
+			className: U.base.group,
 			disallowEmptySelection: !0,
 			lang: r("appearance"),
 			onSelectionChange: (e) => {
 				let [t] = e;
-				me(t) && a(t);
+				de(t) && a(t);
 			},
 			selectedKeys: [n],
 			selectionMode: "single",
-			children: N.map((t) => /* @__PURE__ */ d(e, {
-				className: [M.base.option, M.state.selected].join(" "),
+			children: W.map((t) => /* @__PURE__ */ m(e, {
+				className: [U.base.option, U.state.selected].join(" "),
 				id: t.value,
 				lang: r(t.message),
 				children: i[t.message]
@@ -75,7 +79,7 @@ function P() {
 }
 //#endregion
 //#region src/primitives/Skeleton/Skeleton.tsx
-var F = {
+var pe = {
 	base: { skeleton: "breeze:block breeze:animate-pulse breeze:appearance-none breeze:bg-breeze-ink-3 breeze:pointer-events-none breeze:forced-colors:outline breeze:forced-colors:outline-1 breeze:forced-colors:outline-[CanvasText]" },
 	compound: {},
 	size: {},
@@ -86,37 +90,37 @@ var F = {
 		text: "breeze:block-size-breeze-3 breeze:inline-size-full breeze:rounded-breeze-xs"
 	}
 };
-function I({ blockSize: e, inlineSize: t, label: n, shape: r = "text" }) {
-	let { getMessageLocale: i, messages: a } = j(), o = n?.trim() || void 0, s = e ?? t ?? "0.75rem", c = {
+function G({ blockSize: e, inlineSize: t, label: n, shape: r = "text" }) {
+	let { getMessageLocale: i, messages: a } = H(), o = n?.trim() || void 0, s = e ?? t ?? "0.75rem", c = {
 		blockSize: r === "circle" ? s : e,
 		inlineSize: r === "circle" ? s : t
 	};
-	return /* @__PURE__ */ d("progress", {
+	return /* @__PURE__ */ m("progress", {
 		"aria-hidden": o === void 0 || void 0,
 		"aria-label": o,
-		className: [F.base.skeleton, F.variant[r]].join(" "),
+		className: [pe.base.skeleton, pe.variant[r]].join(" "),
 		lang: o === a.loading.trim() ? i("loading") : void 0,
 		style: c
 	});
 }
 //#endregion
 //#region src/primitives/VisuallyHidden/VisuallyHidden.tsx
-var L = {
+var me = {
 	base: { hidden: "breeze:sr-only" },
 	compound: {},
 	size: {},
 	state: {},
 	variant: {}
 };
-function R({ children: e }) {
-	return /* @__PURE__ */ d("span", {
-		className: L.base.hidden,
+function he({ children: e }) {
+	return /* @__PURE__ */ m("span", {
+		className: me.base.hidden,
 		children: e
 	});
 }
 //#endregion
 //#region src/primitives/Badge/Badge.tsx
-var z = {
+var K = {
 	base: {
 		badge: "breeze:inline-grid breeze:shrink-0 breeze:items-center breeze:whitespace-nowrap breeze:rounded-breeze-chip breeze:ps-breeze-2 breeze:pe-breeze-2 breeze:py-breeze-px breeze:text-breeze-2xs breeze:font-bold breeze:leading-breeze-snug breeze:tracking-breeze-wide",
 		content: "breeze:[grid-area:1/1]",
@@ -133,29 +137,29 @@ var z = {
 		warning: "breeze:bg-breeze-warn-soft breeze:text-breeze-warn"
 	}
 };
-function he({ "aria-label": e, children: t, loading: n = !1, variant: r = "neutral" }) {
-	let { messages: i } = j(), a = e?.trim() || void 0, o;
-	return n ? o = /* @__PURE__ */ d("span", {
-		className: z.base.skeleton,
-		children: /* @__PURE__ */ d(I, {
+function ge({ "aria-label": e, children: t, loading: n = !1, variant: r = "neutral" }) {
+	let { messages: i } = H(), a = e?.trim() || void 0, o;
+	return n ? o = /* @__PURE__ */ m("span", {
+		className: K.base.skeleton,
+		children: /* @__PURE__ */ m(G, {
 			blockSize: 8,
 			inlineSize: "100%",
 			label: i.loading,
 			shape: "rectangle"
 		})
-	}) : a !== void 0 && (o = /* @__PURE__ */ d(R, { children: a })), /* @__PURE__ */ f("span", {
+	}) : a !== void 0 && (o = /* @__PURE__ */ m(he, { children: a })), /* @__PURE__ */ h("span", {
 		"aria-busy": n || void 0,
-		className: [z.base.badge, z.variant[r]].join(" "),
-		children: [/* @__PURE__ */ d("span", {
+		className: [K.base.badge, K.variant[r]].join(" "),
+		children: [/* @__PURE__ */ m("span", {
 			"aria-hidden": n || a !== void 0 ? !0 : void 0,
-			className: [z.base.content, n && z.state.contentLoading].filter(Boolean).join(" "),
+			className: [K.base.content, n && K.state.contentLoading].filter(Boolean).join(" "),
 			children: t
 		}), o]
 	});
 }
 //#endregion
 //#region src/primitives/Button/Button.tsx
-var B = {
+var q = {
 	base: {
 		button: "breeze:relative breeze:inline-grid breeze:items-center breeze:justify-center breeze:gap-breeze-2 breeze:border breeze:border-solid breeze:rounded-breeze-ctl breeze:font-breeze-sans breeze:text-breeze-sm breeze:leading-breeze-snug breeze:cursor-pointer breeze:select-none breeze:[text-align:center] breeze:outline-offset-2 breeze:data-[focus-visible]:outline-2 breeze:data-[focus-visible]:outline-solid breeze:data-[focus-visible]:outline-breeze-brand breeze:any-pointer-coarse:min-block-breeze-tap breeze:any-pointer-coarse:min-inline-breeze-tap",
 		label: "breeze:[grid-area:1/1]",
@@ -185,25 +189,25 @@ var B = {
 		secondary: "breeze:border-breeze-line-strong breeze:bg-breeze-surface breeze:text-breeze-ink breeze:data-[hovered]:bg-breeze-sunken breeze:data-[pressed]:bg-breeze-sunken"
 	}
 };
-function ge() {
-	let e = h(m), { getMessageLocale: t, messages: n } = j();
-	return /* @__PURE__ */ d("progress", {
+function _e() {
+	let e = v(_), { getMessageLocale: t, messages: n } = H();
+	return /* @__PURE__ */ m("progress", {
 		"aria-label": n.loading,
-		className: B.state.loadingStatus,
+		className: q.state.loadingStatus,
 		id: e?.id,
 		lang: t("loading")
 	});
 }
-function _e({ "aria-controls": e, "aria-describedby": t, "aria-expanded": n, "aria-haspopup": i, "aria-label": a, "aria-labelledby": o, children: s, disabled: c = !1, form: l, id: m, loading: h = !1, name: g, onAction: _, ref: v, size: y = "md", type: b = "button", value: x, variant: S = "primary" }) {
-	j();
+function ve({ "aria-controls": e, "aria-describedby": t, "aria-expanded": n, "aria-haspopup": i, "aria-label": a, "aria-labelledby": o, children: s, disabled: c = !1, form: l, id: u, loading: d = !1, name: f, onAction: _, ref: v, size: y = "md", type: b = "button", value: x, variant: S = "primary" }) {
+	H();
 	let C = [
-		B.base.button,
-		B.variant[S],
-		B.size[y],
-		c && B.state.disabled,
-		h && B.state.loading
+		q.base.button,
+		q.variant[S],
+		q.size[y],
+		c && q.state.disabled,
+		d && q.state.loading
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ f(p, {
+	return /* @__PURE__ */ h(g, {
 		"aria-controls": e,
 		"aria-describedby": t,
 		"aria-expanded": n,
@@ -212,33 +216,33 @@ function _e({ "aria-controls": e, "aria-describedby": t, "aria-expanded": n, "ar
 		"aria-labelledby": o,
 		className: C,
 		form: l,
-		id: m,
+		id: u,
 		isDisabled: c,
-		isPending: h,
-		name: g,
+		isPending: d,
+		name: f,
 		onPress: () => _?.(),
 		ref: v,
 		render: (e) => r("button", {
 			...e,
-			"aria-busy": h || void 0,
-			onClick: h ? (e) => e.preventDefault() : e.onClick,
+			"aria-busy": d || void 0,
+			onClick: d ? (e) => e.preventDefault() : e.onClick,
 			type: b === "submit" ? "submit" : "button"
 		}),
 		type: b,
 		value: x,
-		children: [/* @__PURE__ */ d("span", {
-			className: [B.base.label, h && B.state.loadingLabel].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ m("span", {
+			className: [q.base.label, d && q.state.loadingLabel].filter(Boolean).join(" "),
 			children: s
-		}), h && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(ge, {}), /* @__PURE__ */ d("span", {
+		}), d && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(_e, {}), /* @__PURE__ */ m("span", {
 			"aria-hidden": "true",
-			className: [B.base.skeleton, B.compound.loading[S]].join(" "),
+			className: [q.base.skeleton, q.compound.loading[S]].join(" "),
 			"data-breeze-skeleton": ""
 		})] })]
 	});
 }
 //#endregion
 //#region src/primitives/layout.accessibility.ts
-function V(e, t) {
+function J(e, t) {
 	let n = e?.trim() || void 0;
 	return {
 		accessibleLabel: n,
@@ -247,7 +251,7 @@ function V(e, t) {
 }
 //#endregion
 //#region src/primitives/Card/Card.tsx
-var H = {
+var ye = {
 	base: { card: "breeze:min-inline-size-0 breeze:rounded-breeze-panel breeze:border breeze:border-solid breeze:border-breeze-line breeze:shadow-breeze-panel" },
 	compound: {},
 	size: {
@@ -267,22 +271,22 @@ var H = {
 		surface: "breeze:bg-breeze-surface"
 	}
 };
-function ve({ "aria-label": e, children: t, clipped: n = !0, element: i = "div", padding: a = 4, variant: o = "surface" }) {
-	let { accessibleLabel: s, role: c } = V(e, i);
+function be({ "aria-label": e, children: t, clipped: n = !0, element: i = "div", padding: a = 4, variant: o = "surface" }) {
+	let { accessibleLabel: s, role: c } = J(e, i);
 	return r(i, {
 		"aria-label": s,
 		className: [
-			H.base.card,
-			H.variant[o],
-			H.size[a],
-			n && H.state.clipped
+			ye.base.card,
+			ye.variant[o],
+			ye.size[a],
+			n && ye.state.clipped
 		].filter(Boolean).join(" "),
 		role: c
 	}, t);
 }
 //#endregion
 //#region src/primitives/Container/Container.tsx
-var U = {
+var xe = {
 	base: { container: "breeze:mx-auto breeze:inline-size-full breeze:min-inline-size-0" },
 	compound: {},
 	size: {
@@ -293,21 +297,357 @@ var U = {
 	state: { padded: "breeze:ps-breeze-4 breeze:pe-breeze-4 breeze:breeze-md:ps-breeze-7 breeze:breeze-md:pe-breeze-7" },
 	variant: {}
 };
-function W({ "aria-label": e, children: t, element: n = "div", padded: i = !0, width: a = "page" }) {
-	let { accessibleLabel: o, role: s } = V(e, n);
+function Se({ "aria-label": e, children: t, element: n = "div", padded: i = !0, width: a = "page" }) {
+	let { accessibleLabel: o, role: s } = J(e, n);
 	return r(n, {
 		"aria-label": o,
 		className: [
-			U.base.container,
-			U.size[a],
-			i && U.state.padded
+			xe.base.container,
+			xe.size[a],
+			i && xe.state.padded
 		].filter(Boolean).join(" "),
 		role: s
 	}, t);
 }
 //#endregion
+//#region src/overlays/OverlayStack.ts
+function Ce() {
+	let e = [], t = /* @__PURE__ */ new Set(), n = () => t.forEach((e) => e());
+	return {
+		getSnapshot: () => e,
+		remove: (t) => {
+			e = e.filter((e) => e.id !== t), n();
+		},
+		set: (t) => {
+			let r = e.find((e) => e.id === t.id);
+			r?.active === t.active && r.kind === t.kind && r.parent === t.parent && r.visual === t.visual || (e = r && (!t.active || r.active) ? e.map((e) => e.id === t.id ? t : e) : [...e.filter((e) => e.id !== t.id), t], n());
+		},
+		subscribe: (e) => (t.add(e), () => {
+			t.delete(e);
+		})
+	};
+}
+var we = n(null), Te = n(null);
+function Ee(e, t, n) {
+	let r = a(we), i = a(Te), o = s();
+	if (!r) throw Error("Breeze components must be rendered within BreezeProvider.");
+	let l = f(r.subscribe, r.getSnapshot, r.getSnapshot), u = i?.id;
+	c(() => () => r.remove(o), [o, r]), c(() => {
+		r.set({
+			active: t,
+			id: o,
+			kind: e,
+			parent: u,
+			visual: n
+		});
+	}, [
+		o,
+		e,
+		t,
+		u,
+		r,
+		n
+	]);
+	let d = [], p = (e) => {
+		if (d.includes(e)) return;
+		let t = l.find((t) => t.id === e.parent);
+		t && p(t), d.push(e);
+	};
+	l.forEach(p);
+	let m = (e) => {
+		let t = l.find((t) => t.id === e.parent);
+		return e.active && (!t || m(t));
+	}, h = d.filter(m), g = h.findIndex((e) => e.id === o), _ = t && g !== -1 && !h.slice(g + 1).some((e) => e.kind !== "popover"), v = t && h.at(-1)?.id === o, y = h.findLast((e) => e.kind === "drawer" || e.kind === "dialog"), b = d.findLast((e) => e.visual && (e.kind === "drawer" || e.kind === "dialog"));
+	return {
+		id: o,
+		interactive: _,
+		scrim: (y ?? b)?.id === o,
+		topmost: v,
+		zIndex: 100 + Math.max(0, d.findIndex((e) => e.id === o)) * 2
+	};
+}
+//#endregion
+//#region src/overlays/OverlayProvider.tsx
+var De = n(null), Oe = "BreezeProvider portalContainer must belong to the current document and light DOM.";
+function ke({ children: e, portalContainer: t, locale: n }) {
+	let { direction: r } = w(), [i] = d(Ce), [a, o] = d(null);
+	return c(() => {
+		let e = t ?? document.body;
+		if (e.ownerDocument !== document || e.getRootNode() !== document) throw Error(Oe);
+		let n = e.ownerDocument.createElement("div");
+		return n.dataset.breezeRoot = "", n.dataset.breezePortal = "", e.append(n), o(n), () => n.remove();
+	}, [t]), c(() => {
+		a && (a.lang = n, a.dir = r);
+	}, [
+		r,
+		a,
+		n
+	]), /* @__PURE__ */ m(C, {
+		getContainer: () => a,
+		children: /* @__PURE__ */ m(we, {
+			value: i,
+			children: /* @__PURE__ */ m(De, {
+				value: a,
+				children: e
+			})
+		})
+	});
+}
+function Ae() {
+	return a(De);
+}
+//#endregion
+//#region src/overlays/OverlaySurface.tsx
+var Y = {
+	base: {
+		content: "breeze-overlay-content",
+		header: "breeze-overlay-header",
+		title: "breeze-overlay-title"
+	},
+	compound: {},
+	size: {},
+	state: {},
+	variant: {
+		dialog: "breeze-dialog",
+		drawer: "breeze-drawer",
+		fullscreen: "breeze-fullscreen",
+		popover: "breeze-popover"
+	}
+}, je = "Breeze overlay triggers and portal containers must belong to the current document and light DOM.";
+function X(e) {
+	return typeof e == "object" && !!e && "nodeType" in e && typeof e.contains == "function";
+}
+function Me(e) {
+	return e.dataset?.breezeOverlay !== void 0;
+}
+function Ne({ children: e, defaultOpen: t = !1, dismissible: n = !0, kind: r, onOpenChange: s, open: f, placement: g = "bottom", title: _, trigger: v }) {
+	let { getMessageLocale: C, messages: ee } = H(), w = r === "popover" || r === "fullscreen", T = Ae(), E = a(Te), [te, ne] = d(E === null);
+	o(() => ne(!0), []);
+	let [re, ie] = d(t), D = f ?? re, O = E?.open ?? !0, k = D && O, A = u(null), ae = u(null), j = u(null), [oe, se] = d(!1), M = u(!1), N = u(null), P = u(null), F = u(null), I = u(null), ce = u(!1);
+	c(() => {
+		if (T && A.current && (A.current.ownerDocument !== document || A.current.getRootNode() !== document || T.ownerDocument !== document || T.getRootNode() !== document)) throw Error(je);
+	}, [T]);
+	let le = l(() => r === "fullscreen" ? { current: T } : A, [T, r]), L = Ee(r, k && te && T !== null, k || oe), R = i((e) => {
+		if (!e && !O) {
+			if (ce.current) return;
+			D && (ce.current = !0);
+		}
+		f === void 0 && ie(e), s?.(e);
+	}, [
+		f,
+		s,
+		O,
+		D
+	]);
+	o(() => {
+		O ? ce.current = !1 : D && R(!1);
+	}, [
+		R,
+		O,
+		D
+	]), o(() => {
+		if (r !== "popover" || !k || !n || !L.topmost || !T) return;
+		let e = () => {
+			P.current !== null && (clearTimeout(P.current), P.current = null);
+		}, t = (e, t) => !!e && !!t && (e === t || e.contains(t) || t.contains(e)), i = (e) => e.button === 0, a = (e) => X(e) && !ae.current?.contains(e) && !A.current?.contains(e), o = (t) => {
+			i(t) && (e(), I.current = null, F.current = X(t.target) ? t.target : null);
+		}, s = (n) => {
+			if (!i(n)) return;
+			let r = F.current, o = X(n.target) ? n.target : null;
+			!a(r) || !a(o) || (e(), P.current = setTimeout(() => {
+				P.current = null;
+				let e = I.current, n = F.current;
+				I.current = null, F.current = null, !(t(e, o) && t(e, n)) && R(!1);
+			}, 0));
+		}, c = () => {
+			e(), I.current = null, F.current = null;
+		}, l = (n) => {
+			let r = X(n.target) ? n.target : null;
+			if (e(), a(r)) {
+				let e = I.current, n = F.current;
+				if (I.current = null, F.current = null, t(e, r) && t(e, n)) return;
+				R(!1);
+			}
+		};
+		return T.ownerDocument.addEventListener("pointerdown", o, !0), T.ownerDocument.addEventListener("pointerup", s, !0), T.ownerDocument.addEventListener("pointercancel", c, !0), T.ownerDocument.addEventListener("click", l, !0), () => {
+			e(), T.ownerDocument.removeEventListener("pointerdown", o, !0), T.ownerDocument.removeEventListener("pointerup", s, !0), T.ownerDocument.removeEventListener("pointercancel", c, !0), T.ownerDocument.removeEventListener("click", l, !0), I.current = null, F.current = null;
+		};
+	}, [
+		R,
+		n,
+		T,
+		r,
+		L.topmost,
+		k
+	]);
+	let ue = E?.restoreFocus, z = E?.id, B = i(() => {
+		let e = A.current, t = T?.ownerDocument, n = t?.activeElement;
+		if (!t || !T) return;
+		let r = z ? t.getElementById(z) : null;
+		if (!(n === t.body || n === r || n?.closest("[data-exiting]"))) return;
+		if (!e?.isConnected) {
+			ue?.();
+			return;
+		}
+		let i = T.querySelector("[data-breeze-topmost=\"true\"]");
+		(!i || i.contains(e)) && !e.closest("[inert], [aria-hidden=\"true\"]") && e.focus({ preventScroll: !0 });
+	}, [
+		T,
+		z,
+		ue
+	]), V = i(() => {
+		N.current !== null && (clearTimeout(N.current), N.current = null);
+	}, []), U = i((e) => {
+		queueMicrotask(() => {
+			!e.isConnected || e.closest("[inert], [data-exiting]") || (V(), e.focus({ preventScroll: !0 }), N.current = setTimeout(() => {
+				let { ownerDocument: t } = e, { activeElement: n } = t;
+				e.isConnected && !e.closest("[inert], [data-exiting]") && (n === e || n === t.body) && (M.current = !0, e.blur(), e.focus({ preventScroll: !0 }), M.current = !1), N.current = null;
+			}, 500));
+		});
+	}, [V]), W = u(k);
+	o(() => {
+		let e = W.current;
+		W.current = k, !(!w || !k || e || !j.current) && U(j.current);
+	}, [
+		U,
+		w,
+		k
+	]);
+	let de = i((e) => {
+		j.current = e;
+		let t = () => {
+			V(), j.current = null, se(!1), requestAnimationFrame(B);
+		};
+		if (!e) {
+			t();
+			return;
+		}
+		return se(!0), w && U(e), t;
+	}, [
+		V,
+		U,
+		w,
+		B
+	]), fe = l(() => ({
+		id: L.id,
+		open: k,
+		restoreFocus: B
+	}), [
+		L.id,
+		k,
+		B
+	]), pe = /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
+		className: Y.base.header,
+		children: [/* @__PURE__ */ m("h2", {
+			className: Y.base.title,
+			children: _
+		}), /* @__PURE__ */ m("span", {
+			lang: C("close"),
+			children: /* @__PURE__ */ m(ve, {
+				onAction: () => R(!1),
+				variant: "quiet",
+				children: ee.close
+			})
+		})]
+	}), e] }), G = /* @__PURE__ */ m(Te, {
+		value: fe,
+		children: w ? /* @__PURE__ */ m("section", {
+			"aria-label": _,
+			className: Y.base.content,
+			id: L.id,
+			onBlur: (e) => {
+				if (M.current) {
+					e.stopPropagation();
+					return;
+				}
+				let { relatedTarget: t } = e;
+				r === "popover" && n && L.topmost && X(t) && !e.currentTarget.contains(t) && !A.current?.contains(t) && (I.current = t);
+			},
+			ref: de,
+			role: "dialog",
+			tabIndex: -1,
+			children: pe
+		}) : /* @__PURE__ */ m(y, {
+			"aria-label": _,
+			className: Y.base.content,
+			id: L.id,
+			ref: de,
+			children: pe
+		})
+	});
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(ve, {
+		"aria-controls": k ? L.id : void 0,
+		"aria-expanded": k,
+		"aria-haspopup": "dialog",
+		onAction: () => R(!w || !k),
+		ref: A,
+		children: v
+	}), T && te && (w ? /* @__PURE__ */ m(S, {
+		className: Y.variant[r],
+		"data-breeze-overlay": r,
+		"data-breeze-topmost": L.topmost,
+		"data-breeze-interactive": L.interactive,
+		inert: !L.interactive,
+		isNonModal: !0,
+		isOpen: k,
+		isKeyboardDismissDisabled: !n || !L.topmost,
+		onOpenChange: R,
+		placement: g,
+		ref: ae,
+		shouldCloseOnInteractOutside: (e) => r === "popover" && n && L.topmost && !A.current?.contains(e),
+		style: { zIndex: L.zIndex },
+		triggerRef: le,
+		children: G
+	}) : /* @__PURE__ */ m(x, {
+		className: "breeze-overlay-backdrop",
+		"data-breeze-overlay": r,
+		"data-breeze-scrim": L.scrim,
+		"data-breeze-topmost": L.topmost,
+		"data-breeze-interactive": L.interactive,
+		inert: !L.interactive,
+		isDismissable: n && L.topmost,
+		isKeyboardDismissDisabled: !n || !L.topmost,
+		isOpen: k,
+		onOpenChange: R,
+		shouldCloseOnInteractOutside: (e) => L.topmost && Me(e),
+		style: { zIndex: L.zIndex },
+		children: /* @__PURE__ */ m(b, {
+			className: Y.variant[r],
+			children: G
+		})
+	}))] });
+}
+//#endregion
+//#region src/primitives/Dialog/Dialog.tsx
+function Pe({ children: e, defaultOpen: t, dismissible: n, onOpenChange: r, open: i, title: a, trigger: o }) {
+	return /* @__PURE__ */ m(Ne, {
+		defaultOpen: t,
+		dismissible: n,
+		onOpenChange: r,
+		open: i,
+		title: a,
+		trigger: o,
+		kind: "dialog",
+		children: e
+	});
+}
+//#endregion
+//#region src/primitives/Drawer/Drawer.tsx
+function Fe({ children: e, defaultOpen: t, dismissible: n, onOpenChange: r, open: i, title: a, trigger: o }) {
+	return /* @__PURE__ */ m(Ne, {
+		defaultOpen: t,
+		dismissible: n,
+		onOpenChange: r,
+		open: i,
+		title: a,
+		trigger: o,
+		kind: "drawer",
+		children: e
+	});
+}
+//#endregion
 //#region src/primitives/Grid/Grid.tsx
-var G = {
+var Ie = {
 	base: { grid: "breeze:grid breeze:min-inline-size-0" },
 	compound: { columns: {
 		1: {
@@ -343,48 +683,48 @@ var G = {
 	state: {},
 	variant: {}
 };
-function ye({ "aria-label": e, children: t, collapseBelow: n = "md", columns: i = 2, element: a = "div", gap: o = 4 }) {
-	let { accessibleLabel: s, role: c } = V(e, a);
+function Le({ "aria-label": e, children: t, collapseBelow: n = "md", columns: i = 2, element: a = "div", gap: o = 4 }) {
+	let { accessibleLabel: s, role: c } = J(e, a);
 	return r(a, {
 		"aria-label": s,
 		className: [
-			G.base.grid,
-			G.compound.columns[i][n],
-			G.size[o]
+			Ie.base.grid,
+			Ie.compound.columns[i][n],
+			Ie.size[o]
 		].join(" "),
 		role: c
 	}, t);
 }
 //#endregion
 //#region src/primitives/Icon/Icon.tsx
-var be = {
-	add: ie,
-	back: w,
-	building: y,
-	calendar: b,
-	camera: x,
-	check: S,
-	clock: ee,
-	close: ue,
-	delete: oe,
-	document: D,
-	download: te,
-	expand: C,
-	forward: T,
-	lock: ne,
-	money: k,
-	moneyIn: g,
-	moneyOut: _,
-	more: E,
-	next: T,
-	notifications: v,
-	overview: O,
-	people: le,
-	settings: ae,
-	signOut: re,
-	upload: ce,
-	warning: se
-}, K = {
+var Re = {
+	add: I,
+	back: k,
+	building: ne,
+	calendar: re,
+	camera: ie,
+	check: D,
+	clock: ae,
+	close: z,
+	delete: le,
+	document: se,
+	download: j,
+	expand: O,
+	forward: A,
+	lock: P,
+	money: N,
+	moneyIn: T,
+	moneyOut: E,
+	more: oe,
+	next: A,
+	notifications: te,
+	overview: M,
+	people: ue,
+	settings: ce,
+	signOut: F,
+	upload: R,
+	warning: L
+}, ze = {
 	base: { icon: "breeze:block breeze:shrink-0" },
 	compound: {},
 	size: {
@@ -394,20 +734,20 @@ var be = {
 	},
 	state: { logicalDirection: "breeze:rtl:rotate-180" },
 	variant: {}
-}, xe = /* @__PURE__ */ new Set([
+}, Be = /* @__PURE__ */ new Set([
 	"back",
 	"forward",
 	"next"
 ]);
-function q({ label: e, name: t, size: n = "md" }) {
-	let r = be[t], i = e?.trim() || void 0;
-	return /* @__PURE__ */ d(r, {
+function Ve({ label: e, name: t, size: n = "md" }) {
+	let r = Re[t], i = e?.trim() || void 0;
+	return /* @__PURE__ */ m(r, {
 		"aria-hidden": i === void 0 || void 0,
 		"aria-label": i,
 		className: [
-			K.base.icon,
-			K.size[n],
-			xe.has(t) && K.state.logicalDirection
+			ze.base.icon,
+			ze.size[n],
+			Be.has(t) && ze.state.logicalDirection
 		].filter(Boolean).join(" "),
 		focusable: "false",
 		role: i === void 0 ? void 0 : "img",
@@ -416,7 +756,7 @@ function q({ label: e, name: t, size: n = "md" }) {
 }
 //#endregion
 //#region src/primitives/IconTile/IconTile.tsx
-var J = {
+var He = {
 	base: { tile: "breeze:inline-flex breeze:shrink-0 breeze:items-center breeze:justify-center" },
 	compound: {},
 	size: {
@@ -438,15 +778,15 @@ var J = {
 		}
 	}
 };
-function Se({ label: e, name: t, shape: n = "square", size: r = "lg", tone: i = "brand" }) {
-	return /* @__PURE__ */ d("span", {
+function Ue({ label: e, name: t, shape: n = "square", size: r = "lg", tone: i = "brand" }) {
+	return /* @__PURE__ */ m("span", {
 		className: [
-			J.base.tile,
-			J.variant.tone[i],
-			J.variant.shape[n],
-			J.size[r]
+			He.base.tile,
+			He.variant.tone[i],
+			He.variant.shape[n],
+			He.size[r]
 		].join(" "),
-		children: /* @__PURE__ */ d(q, {
+		children: /* @__PURE__ */ m(Ve, {
 			label: e,
 			name: t,
 			size: r === "lg" ? "md" : "sm"
@@ -455,7 +795,7 @@ function Se({ label: e, name: t, shape: n = "square", size: r = "lg", tone: i =
 }
 //#endregion
 //#region src/primitives/Inline/Inline.tsx
-var Y = {
+var Z = {
 	base: { inline: "breeze:flex breeze:min-inline-size-0" },
 	compound: {},
 	size: {
@@ -485,23 +825,38 @@ var Y = {
 		}
 	}
 };
-function Ce({ "aria-label": e, children: t, element: n = "div", gap: i = 3, justify: a = "start", verticalAlign: o = "center", wrap: s = !1 }) {
-	let { accessibleLabel: c, role: l } = V(e, n);
+function We({ "aria-label": e, children: t, element: n = "div", gap: i = 3, justify: a = "start", verticalAlign: o = "center", wrap: s = !1 }) {
+	let { accessibleLabel: c, role: l } = J(e, n);
 	return r(n, {
 		"aria-label": c,
 		className: [
-			Y.base.inline,
-			Y.variant.align[o],
-			Y.variant.justify[a],
-			Y.size[i],
-			s && Y.state.wrap
+			Z.base.inline,
+			Z.variant.align[o],
+			Z.variant.justify[a],
+			Z.size[i],
+			s && Z.state.wrap
 		].filter(Boolean).join(" "),
 		role: l
 	}, t);
 }
 //#endregion
+//#region src/primitives/Popover/Popover.tsx
+function Ge({ children: e, defaultOpen: t, dismissible: n, onOpenChange: r, open: i, title: a, trigger: o, placement: s }) {
+	return /* @__PURE__ */ m(Ne, {
+		defaultOpen: t,
+		dismissible: n,
+		onOpenChange: r,
+		open: i,
+		title: a,
+		trigger: o,
+		placement: s,
+		kind: "popover",
+		children: e
+	});
+}
+//#endregion
 //#region src/primitives/Separator/Separator.tsx
-var X = {
+var Ke = {
 	base: { separator: "breeze:m-0 breeze:shrink-0 breeze:border-0 breeze:bg-breeze-line breeze:forced-colors:bg-[CanvasText]" },
 	compound: {},
 	size: {},
@@ -511,15 +866,15 @@ var X = {
 		vertical: "breeze:block-size-full breeze:inline-size-breeze-px"
 	}
 };
-function we({ orientation: e = "horizontal" }) {
-	return /* @__PURE__ */ d("hr", {
+function qe({ orientation: e = "horizontal" }) {
+	return /* @__PURE__ */ m("hr", {
 		"aria-orientation": e,
-		className: [X.base.separator, X.variant[e]].join(" ")
+		className: [Ke.base.separator, Ke.variant[e]].join(" ")
 	});
 }
 //#endregion
 //#region src/primitives/Stack/Stack.tsx
-var Z = {
+var Je = {
 	base: { stack: "breeze:flex breeze:min-inline-size-0 breeze:flex-col" },
 	compound: {},
 	size: {
@@ -541,14 +896,14 @@ var Z = {
 		stretch: "breeze:items-stretch"
 	}
 };
-function Te({ "aria-label": e, children: t, element: n = "div", gap: i = 3, horizontalAlign: a = "stretch" }) {
-	let { accessibleLabel: o, role: s } = V(e, n);
+function Ye({ "aria-label": e, children: t, element: n = "div", gap: i = 3, horizontalAlign: a = "stretch" }) {
+	let { accessibleLabel: o, role: s } = J(e, n);
 	return r(n, {
 		"aria-label": o,
 		className: [
-			Z.base.stack,
-			Z.variant[a],
-			Z.size[i]
+			Je.base.stack,
+			Je.variant[a],
+			Je.size[i]
 		].join(" "),
 		role: s
 	}, t);
@@ -591,10 +946,10 @@ var Q = {
 		}
 	}
 };
-function Ee(e) {
+function Xe(e) {
 	return e === "heading" ? "h2" : e === "title" ? "h3" : e === "body" ? "p" : "span";
 }
-function De(e, t, n, r) {
+function Ze(e, t, n, r) {
 	let i;
 	try {
 		i = new Intl.NumberFormat(n, {
@@ -608,10 +963,10 @@ function De(e, t, n, r) {
 	}
 	return i.map((e) => e.type === "minusSign" ? "−" : e.value).join("");
 }
-function Oe(e, t, n) {
+function Qe(e, t, n) {
 	let r;
 	try {
-		r = de(e).toDate("UTC");
+		r = B(e).toDate("UTC");
 	} catch {
 		return e;
 	}
@@ -620,39 +975,39 @@ function Oe(e, t, n) {
 		timeZone: "UTC"
 	}).format(r);
 }
-function ke(e, t, n) {
-	return e.loading ? /* @__PURE__ */ d(I, {
+function $e(e, t, n) {
+	return e.loading ? /* @__PURE__ */ m(G, {
 		blockSize: "1lh",
 		inlineSize: "8em",
 		label: n
-	}) : e.format === "currency" ? De(e.value, e.currency, t, e.sign ?? "auto") : e.format === "date" ? Oe(e.value, t, e.dateStyle) : e.children;
+	}) : e.format === "currency" ? Ze(e.value, e.currency, t, e.sign ?? "auto") : e.format === "date" ? Qe(e.value, t, e.dateStyle) : e.children;
 }
-function Ae(e) {
-	let { locale: t, messages: n } = j(), { "aria-label": i, align: a, children: o, element: s, format: c, id: l, loading: p = !1, numeric: m = !1, tone: h = "default", truncate: g = !1, variant: _ = "body" } = e, v = s ?? Ee(_), y = i?.trim() || void 0, b = a ?? (_ === "money" || m ? "end" : "start"), x = a !== void 0 || _ === "money" || m, S = ke(e, t, n.loading), C = c !== void 0 || typeof o == "string" || typeof o == "number", w = !p && y !== void 0 && !C && [
+function et(e) {
+	let { locale: t, messages: n } = H(), { "aria-label": i, align: a, children: o, element: s, format: c, id: l, loading: u = !1, numeric: d = !1, tone: f = "default", truncate: g = !1, variant: _ = "body" } = e, v = s ?? Xe(_), y = i?.trim() || void 0, b = a ?? (_ === "money" || d ? "end" : "start"), x = a !== void 0 || _ === "money" || d, S = $e(e, t, n.loading), C = c !== void 0 || typeof o == "string" || typeof o == "number", ee = !u && y !== void 0 && !C && [
 		"h1",
 		"h2",
 		"h3",
 		"h4"
-	].includes(v), T = !p && y !== void 0 && !C && !w;
-	return !p && y !== void 0 && C && (S = /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", {
+	].includes(v), w = !u && y !== void 0 && !C && !ee;
+	return !u && y !== void 0 && C && (S = /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", {
 		"aria-hidden": "true",
 		children: S
-	}), /* @__PURE__ */ d(R, { children: y })] })), r(v, {
-		"aria-busy": p || void 0,
-		"aria-label": T || w ? y : void 0,
+	}), /* @__PURE__ */ m(he, { children: y })] })), r(v, {
+		"aria-busy": u || void 0,
+		"aria-label": w || ee ? y : void 0,
 		className: [
 			Q.base.text,
 			Q.variant.role[_],
-			Q.variant.tone[h],
+			Q.variant.tone[f],
 			Q.variant.align[b],
 			x && Q.state.aligned,
-			p && v === "span" && !x && Q.state.inlineLoading,
-			m && _ !== "money" && Q.state.numeric,
+			u && v === "span" && !x && Q.state.inlineLoading,
+			d && _ !== "money" && Q.state.numeric,
 			g && Q.state.truncate
 		].filter(Boolean).join(" "),
 		id: l,
 		lang: t,
-		role: T ? "group" : void 0
+		role: w ? "group" : void 0
 	}, S);
 }
 //#endregion
@@ -662,69 +1017,75 @@ var $ = {
 	appearanceAutomatic: "Auto",
 	appearanceDark: "Dark",
 	appearanceLight: "Light",
+	close: "Close",
 	loading: "Loading"
 };
 //#endregion
 //#region src/provider/BreezeProvider.tsx
-function je(e, t) {
+function tt(e, t) {
 	return e === "automatic" ? t ? "dark" : "light" : e;
 }
-function Me({ children: e }) {
-	let { direction: t, locale: n } = pe();
-	return /* @__PURE__ */ d("div", {
+function nt({ children: e }) {
+	let { direction: t, locale: n } = w();
+	return /* @__PURE__ */ m("div", {
 		"data-breeze-root": "",
 		dir: t,
 		lang: n,
 		children: e
 	});
 }
-function Ne({ appearance: e, children: t, defaultAppearance: n = "automatic", locale: r, messages: a, onAppearanceChange: u }) {
-	let [f] = l(() => typeof window > "u" || !window.matchMedia ? null : window.matchMedia("(prefers-color-scheme: dark)")), [p, m] = l(() => f?.matches ?? !1), [h, g] = l(n), _ = e ?? h, v = je(_, p);
+function rt({ appearance: e, children: t, defaultAppearance: n = "automatic", locale: r, messages: a, onAppearanceChange: s, portalContainer: u }) {
+	let [f] = d(() => typeof window > "u" || !window.matchMedia ? null : window.matchMedia("(prefers-color-scheme: dark)")), [p, h] = d(() => f?.matches ?? !1), [g, _] = d(n), v = e ?? g, y = tt(v, p);
 	o(() => {
 		if (!f) return;
-		m(f.matches);
+		h(f.matches);
 		let e = (e) => {
-			m(e.matches);
+			h(e.matches);
 		};
 		return f.addEventListener("change", e), () => f.removeEventListener("change", e);
-	}, [f]), s(() => {
+	}, [f]), c(() => {
 		let { documentElement: e } = document, t = e.dataset.theme, n = e.style.colorScheme;
-		return e.dataset.theme = v, e.style.colorScheme = v, () => {
+		return e.dataset.theme = y, e.style.colorScheme = y, () => {
 			t === void 0 ? delete e.dataset.theme : e.dataset.theme = t, e.style.colorScheme = n;
 		};
-	}, [v]);
-	let y = i((t) => {
-		e === void 0 && g(t), u?.(t);
-	}, [e, u]), b = i((e) => a?.[e] === void 0 ? "en-GB" : r, [r, a]);
-	return /* @__PURE__ */ d(fe, {
+	}, [y]);
+	let b = i((t) => {
+		e === void 0 && _(t), s?.(t);
+	}, [e, s]), x = i((e) => a?.[e] === void 0 ? "en-GB" : r, [r, a]);
+	return /* @__PURE__ */ m(ee, {
 		locale: r,
-		children: /* @__PURE__ */ d(A, {
-			value: c(() => ({
-				appearance: _,
-				getMessageLocale: b,
+		children: /* @__PURE__ */ m(V, {
+			value: l(() => ({
+				appearance: v,
+				getMessageLocale: x,
 				locale: r,
 				messages: {
 					appearance: a?.appearance ?? $.appearance,
 					appearanceAutomatic: a?.appearanceAutomatic ?? $.appearanceAutomatic,
 					appearanceDark: a?.appearanceDark ?? $.appearanceDark,
 					appearanceLight: a?.appearanceLight ?? $.appearanceLight,
+					close: a?.close ?? $.close,
 					loading: a?.loading ?? $.loading
 				},
-				resolvedAppearance: v,
-				setAppearance: y
+				resolvedAppearance: y,
+				setAppearance: b
 			}), [
-				_,
-				b,
+				v,
+				x,
 				r,
 				a,
-				v,
-				y
+				y,
+				b
 			]),
-			children: /* @__PURE__ */ d(Me, { children: t })
+			children: /* @__PURE__ */ m(ke, {
+				locale: r,
+				portalContainer: u,
+				children: /* @__PURE__ */ m(nt, { children: t })
+			})
 		})
 	});
 }
 //#endregion
-export { P as AppearanceControl, he as Badge, Ne as BreezeProvider, _e as Button, ve as Card, W as Container, ye as Grid, q as Icon, Se as IconTile, Ce as Inline, we as Separator, I as Skeleton, Te as Stack, Ae as Typography, R as VisuallyHidden };
+export { fe as AppearanceControl, ge as Badge, rt as BreezeProvider, ve as Button, be as Card, Se as Container, Pe as Dialog, Fe as Drawer, Le as Grid, Ve as Icon, Ue as IconTile, We as Inline, Ge as Popover, qe as Separator, G as Skeleton, Ye as Stack, et as Typography, he as VisuallyHidden };
 
 //# sourceMappingURL=index.js.map