@motech-development/breeze-ui 4.1.1 → 4.3.0

package/lib/index.js

@@ -1,21 +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 { I18nProvider as g, useLocale as _ } 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 v = n(null);
-function y() {
-	let e = a(v);
+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 b = {
+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",
@@ -26,7 +32,7 @@ var b = {
 	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: {}
-}, x = [
+}, W = [
 	{
 		message: "appearanceLight",
 		value: "light"
@@ -40,30 +46,30 @@ var b = {
 		value: "dark"
 	}
 ];
-function S(e) {
-	return x.some((t) => t.value === e);
-}
-function C() {
-	let { appearance: n, getMessageLocale: r, messages: i, setAppearance: a } = y();
-	return /* @__PURE__ */ f("div", {
-		className: b.base.control,
-		children: [/* @__PURE__ */ d("span", {
-			className: b.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: b.base.group,
+			className: U.base.group,
 			disallowEmptySelection: !0,
 			lang: r("appearance"),
 			onSelectionChange: (e) => {
 				let [t] = e;
-				S(t) && a(t);
+				de(t) && a(t);
 			},
 			selectedKeys: [n],
 			selectionMode: "single",
-			children: x.map((t) => /* @__PURE__ */ d(e, {
-				className: [b.base.option, b.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]
@@ -72,8 +78,88 @@ function C() {
 	});
 }
 //#endregion
+//#region src/primitives/Skeleton/Skeleton.tsx
+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: {},
+	state: {},
+	variant: {
+		circle: "breeze:aspect-square breeze:rounded-breeze-full",
+		rectangle: "breeze:rounded-breeze-sm",
+		text: "breeze:block-size-breeze-3 breeze:inline-size-full breeze:rounded-breeze-xs"
+	}
+};
+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__ */ m("progress", {
+		"aria-hidden": o === void 0 || void 0,
+		"aria-label": o,
+		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 me = {
+	base: { hidden: "breeze:sr-only" },
+	compound: {},
+	size: {},
+	state: {},
+	variant: {}
+};
+function he({ children: e }) {
+	return /* @__PURE__ */ m("span", {
+		className: me.base.hidden,
+		children: e
+	});
+}
+//#endregion
+//#region src/primitives/Badge/Badge.tsx
+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]",
+		skeleton: "breeze:[grid-area:1/1] breeze:grid breeze:inline-size-full breeze:items-center"
+	},
+	compound: {},
+	size: {},
+	state: { contentLoading: "breeze:opacity-0" },
+	variant: {
+		brand: "breeze:bg-breeze-brand-soft breeze:text-breeze-brand-text",
+		danger: "breeze:bg-breeze-danger/10 breeze:text-breeze-danger",
+		neutral: "breeze:bg-breeze-sunken breeze:text-breeze-ink-2",
+		positive: "breeze:bg-breeze-pos-soft breeze:text-breeze-pos",
+		warning: "breeze:bg-breeze-warn-soft breeze:text-breeze-warn"
+	}
+};
+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__ */ m(he, { children: a })), /* @__PURE__ */ h("span", {
+		"aria-busy": n || void 0,
+		className: [K.base.badge, K.variant[r]].join(" "),
+		children: [/* @__PURE__ */ m("span", {
+			"aria-hidden": n || a !== void 0 ? !0 : void 0,
+			className: [K.base.content, n && K.state.contentLoading].filter(Boolean).join(" "),
+			children: t
+		}), o]
+	});
+}
+//#endregion
 //#region src/primitives/Button/Button.tsx
-var w = {
+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]",
@@ -103,127 +189,903 @@ var w = {
 		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 T() {
-	let e = h(m), { getMessageLocale: t, messages: n } = y();
-	return /* @__PURE__ */ d("progress", {
+function _e() {
+	let e = v(_), { getMessageLocale: t, messages: n } = H();
+	return /* @__PURE__ */ m("progress", {
 		"aria-label": n.loading,
-		className: w.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: b = "md", type: x = "button", value: S, variant: C = "primary" }) {
-	y();
-	let E = [
-		w.base.button,
-		w.variant[C],
-		w.size[b],
-		c && w.state.disabled,
-		h && w.state.loading
+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 = [
+		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,
 		"aria-haspopup": i,
 		"aria-label": a ?? s,
 		"aria-labelledby": o,
-		className: E,
+		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,
-			type: x === "submit" ? "submit" : "button"
+			"aria-busy": d || void 0,
+			onClick: d ? (e) => e.preventDefault() : e.onClick,
+			type: b === "submit" ? "submit" : "button"
 		}),
-		type: x,
-		value: S,
-		children: [/* @__PURE__ */ d("span", {
-			className: [w.base.label, h && w.state.loadingLabel].filter(Boolean).join(" "),
+		type: b,
+		value: x,
+		children: [/* @__PURE__ */ m("span", {
+			className: [q.base.label, d && q.state.loadingLabel].filter(Boolean).join(" "),
 			children: s
-		}), h && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(T, {}), /* @__PURE__ */ d("span", {
+		}), d && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(_e, {}), /* @__PURE__ */ m("span", {
 			"aria-hidden": "true",
-			className: [w.base.skeleton, w.compound.loading[C]].join(" "),
+			className: [q.base.skeleton, q.compound.loading[S]].join(" "),
 			"data-breeze-skeleton": ""
 		})] })]
 	});
 }
 //#endregion
+//#region src/primitives/layout.accessibility.ts
+function J(e, t) {
+	let n = e?.trim() || void 0;
+	return {
+		accessibleLabel: n,
+		role: n !== void 0 && t === "div" ? "group" : void 0
+	};
+}
+//#endregion
+//#region src/primitives/Card/Card.tsx
+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: {
+		0: "breeze:p-0",
+		1: "breeze:p-breeze-1",
+		2: "breeze:p-breeze-2",
+		3: "breeze:p-breeze-3",
+		4: "breeze:p-breeze-4",
+		5: "breeze:p-breeze-5",
+		6: "breeze:p-breeze-6",
+		7: "breeze:p-breeze-7",
+		8: "breeze:p-breeze-8"
+	},
+	state: { clipped: "breeze:overflow-hidden" },
+	variant: {
+		raised: "breeze:bg-breeze-raised",
+		surface: "breeze:bg-breeze-surface"
+	}
+};
+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: [
+			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 xe = {
+	base: { container: "breeze:mx-auto breeze:inline-size-full breeze:min-inline-size-0" },
+	compound: {},
+	size: {
+		page: "breeze:max-inline-breeze-page",
+		prose: "breeze:max-inline-breeze-prose",
+		read: "breeze:max-inline-breeze-read"
+	},
+	state: { padded: "breeze:ps-breeze-4 breeze:pe-breeze-4 breeze:breeze-md:ps-breeze-7 breeze:breeze-md:pe-breeze-7" },
+	variant: {}
+};
+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: [
+			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 Ie = {
+	base: { grid: "breeze:grid breeze:min-inline-size-0" },
+	compound: { columns: {
+		1: {
+			lg: "breeze:grid-cols-1",
+			md: "breeze:grid-cols-1",
+			none: "breeze:grid-cols-1",
+			sm: "breeze:grid-cols-1"
+		},
+		2: {
+			lg: "breeze:grid-cols-2 breeze:max-breeze-lg:grid-cols-1",
+			md: "breeze:grid-cols-2 breeze:max-breeze-md:grid-cols-1",
+			none: "breeze:grid-cols-2",
+			sm: "breeze:grid-cols-2 breeze:max-breeze-sm:grid-cols-1"
+		},
+		3: {
+			lg: "breeze:grid-cols-3 breeze:max-breeze-lg:grid-cols-1",
+			md: "breeze:grid-cols-3 breeze:max-breeze-md:grid-cols-1",
+			none: "breeze:grid-cols-3",
+			sm: "breeze:grid-cols-3 breeze:max-breeze-sm:grid-cols-1"
+		}
+	} },
+	size: {
+		0: "breeze:gap-0",
+		1: "breeze:gap-breeze-1",
+		2: "breeze:gap-breeze-2",
+		3: "breeze:gap-breeze-3",
+		4: "breeze:gap-breeze-4",
+		5: "breeze:gap-breeze-5",
+		6: "breeze:gap-breeze-6",
+		7: "breeze:gap-breeze-7",
+		8: "breeze:gap-breeze-8"
+	},
+	state: {},
+	variant: {}
+};
+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: [
+			Ie.base.grid,
+			Ie.compound.columns[i][n],
+			Ie.size[o]
+		].join(" "),
+		role: c
+	}, t);
+}
+//#endregion
+//#region src/primitives/Icon/Icon.tsx
+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: {
+		lg: "breeze:block-size-breeze-6 breeze:inline-size-breeze-6",
+		md: "breeze:block-size-breeze-5 breeze:inline-size-breeze-5",
+		sm: "breeze:block-size-breeze-4 breeze:inline-size-breeze-4"
+	},
+	state: { logicalDirection: "breeze:rtl:rotate-180" },
+	variant: {}
+}, Be = /* @__PURE__ */ new Set([
+	"back",
+	"forward",
+	"next"
+]);
+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: [
+			ze.base.icon,
+			ze.size[n],
+			Be.has(t) && ze.state.logicalDirection
+		].filter(Boolean).join(" "),
+		focusable: "false",
+		role: i === void 0 ? void 0 : "img",
+		strokeWidth: 1.75
+	});
+}
+//#endregion
+//#region src/primitives/IconTile/IconTile.tsx
+var He = {
+	base: { tile: "breeze:inline-flex breeze:shrink-0 breeze:items-center breeze:justify-center" },
+	compound: {},
+	size: {
+		lg: "breeze:block-size-breeze-tap breeze:inline-size-breeze-tap",
+		sm: "breeze:block-size-breeze-7 breeze:inline-size-breeze-7"
+	},
+	state: {},
+	variant: {
+		shape: {
+			circle: "breeze:rounded-breeze-full",
+			square: "breeze:rounded-breeze-sm"
+		},
+		tone: {
+			brand: "breeze:bg-breeze-brand-soft breeze:text-breeze-brand-text",
+			danger: "breeze:bg-breeze-danger/10 breeze:text-breeze-danger",
+			neutral: "breeze:bg-breeze-sunken breeze:text-breeze-ink-2",
+			positive: "breeze:bg-breeze-pos-soft breeze:text-breeze-pos",
+			warning: "breeze:bg-breeze-warn-soft breeze:text-breeze-warn"
+		}
+	}
+};
+function Ue({ label: e, name: t, shape: n = "square", size: r = "lg", tone: i = "brand" }) {
+	return /* @__PURE__ */ m("span", {
+		className: [
+			He.base.tile,
+			He.variant.tone[i],
+			He.variant.shape[n],
+			He.size[r]
+		].join(" "),
+		children: /* @__PURE__ */ m(Ve, {
+			label: e,
+			name: t,
+			size: r === "lg" ? "md" : "sm"
+		})
+	});
+}
+//#endregion
+//#region src/primitives/Inline/Inline.tsx
+var Z = {
+	base: { inline: "breeze:flex breeze:min-inline-size-0" },
+	compound: {},
+	size: {
+		0: "breeze:gap-0",
+		1: "breeze:gap-breeze-1",
+		2: "breeze:gap-breeze-2",
+		3: "breeze:gap-breeze-3",
+		4: "breeze:gap-breeze-4",
+		5: "breeze:gap-breeze-5",
+		6: "breeze:gap-breeze-6",
+		7: "breeze:gap-breeze-7",
+		8: "breeze:gap-breeze-8"
+	},
+	state: { wrap: "breeze:flex-wrap" },
+	variant: {
+		align: {
+			center: "breeze:items-center",
+			end: "breeze:items-end",
+			start: "breeze:items-start",
+			stretch: "breeze:items-stretch"
+		},
+		justify: {
+			between: "breeze:justify-between",
+			center: "breeze:justify-center",
+			end: "breeze:justify-end",
+			start: "breeze:justify-start"
+		}
+	}
+};
+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: [
+			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 Ke = {
+	base: { separator: "breeze:m-0 breeze:shrink-0 breeze:border-0 breeze:bg-breeze-line breeze:forced-colors:bg-[CanvasText]" },
+	compound: {},
+	size: {},
+	state: {},
+	variant: {
+		horizontal: "breeze:block-size-breeze-px breeze:inline-size-full",
+		vertical: "breeze:block-size-full breeze:inline-size-breeze-px"
+	}
+};
+function qe({ orientation: e = "horizontal" }) {
+	return /* @__PURE__ */ m("hr", {
+		"aria-orientation": e,
+		className: [Ke.base.separator, Ke.variant[e]].join(" ")
+	});
+}
+//#endregion
+//#region src/primitives/Stack/Stack.tsx
+var Je = {
+	base: { stack: "breeze:flex breeze:min-inline-size-0 breeze:flex-col" },
+	compound: {},
+	size: {
+		0: "breeze:gap-0",
+		1: "breeze:gap-breeze-1",
+		2: "breeze:gap-breeze-2",
+		3: "breeze:gap-breeze-3",
+		4: "breeze:gap-breeze-4",
+		5: "breeze:gap-breeze-5",
+		6: "breeze:gap-breeze-6",
+		7: "breeze:gap-breeze-7",
+		8: "breeze:gap-breeze-8"
+	},
+	state: {},
+	variant: {
+		center: "breeze:items-center",
+		end: "breeze:items-end",
+		start: "breeze:items-start",
+		stretch: "breeze:items-stretch"
+	}
+};
+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: [
+			Je.base.stack,
+			Je.variant[a],
+			Je.size[i]
+		].join(" "),
+		role: s
+	}, t);
+}
+//#endregion
+//#region src/primitives/Typography/Typography.tsx
+var Q = {
+	base: { text: "breeze:m-0 breeze:font-breeze-sans" },
+	compound: {},
+	size: {},
+	state: {
+		aligned: "breeze:block breeze:inline-size-full",
+		inlineLoading: "breeze:inline-block",
+		numeric: "breeze:tabular-nums breeze:tracking-breeze-tighter",
+		truncate: "breeze:block breeze:min-inline-size-0 breeze:inline-size-full breeze:overflow-hidden breeze:text-ellipsis breeze:whitespace-nowrap"
+	},
+	variant: {
+		align: {
+			center: "breeze:text-center",
+			end: "breeze:text-end",
+			start: "breeze:text-start"
+		},
+		role: {
+			body: "breeze:text-breeze-sm breeze:font-normal breeze:leading-breeze-snug",
+			caption: "breeze:text-breeze-xs breeze:font-medium breeze:leading-breeze-snug",
+			heading: "breeze:text-breeze-2xl breeze:font-semibold breeze:leading-breeze-tight",
+			label: "breeze:text-breeze-xs breeze:font-medium breeze:leading-breeze-snug",
+			micro: "breeze:text-breeze-2xs breeze:font-bold breeze:uppercase breeze:leading-breeze-snug breeze:tracking-breeze-caps",
+			money: "breeze:text-breeze-4xl breeze:font-semibold breeze:leading-breeze-tight breeze:tracking-breeze-tightest breeze:tabular-nums",
+			title: "breeze:text-breeze-md breeze:font-semibold breeze:leading-breeze-snug"
+		},
+		tone: {
+			brand: "breeze:text-breeze-brand-text",
+			danger: "breeze:text-breeze-danger",
+			default: "breeze:text-breeze-ink",
+			muted: "breeze:text-breeze-ink-3",
+			positive: "breeze:text-breeze-pos",
+			secondary: "breeze:text-breeze-ink-2",
+			warning: "breeze:text-breeze-warn"
+		}
+	}
+};
+function Xe(e) {
+	return e === "heading" ? "h2" : e === "title" ? "h3" : e === "body" ? "p" : "span";
+}
+function Ze(e, t, n, r) {
+	let i;
+	try {
+		i = new Intl.NumberFormat(n, {
+			currency: t,
+			signDisplay: r ?? "auto",
+			style: "currency"
+		}).formatToParts(e);
+	} catch (t) {
+		if (!(t instanceof RangeError)) throw t;
+		i = new Intl.NumberFormat(n, { signDisplay: r ?? "auto" }).formatToParts(e);
+	}
+	return i.map((e) => e.type === "minusSign" ? "−" : e.value).join("");
+}
+function Qe(e, t, n) {
+	let r;
+	try {
+		r = B(e).toDate("UTC");
+	} catch {
+		return e;
+	}
+	return new Intl.DateTimeFormat(t, {
+		dateStyle: n ?? "long",
+		timeZone: "UTC"
+	}).format(r);
+}
+function $e(e, t, n) {
+	return e.loading ? /* @__PURE__ */ m(G, {
+		blockSize: "1lh",
+		inlineSize: "8em",
+		label: n
+	}) : e.format === "currency" ? Ze(e.value, e.currency, t, e.sign ?? "auto") : e.format === "date" ? Qe(e.value, t, e.dateStyle) : e.children;
+}
+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), 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__ */ 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[f],
+			Q.variant.align[b],
+			x && Q.state.aligned,
+			u && v === "span" && !x && Q.state.inlineLoading,
+			d && _ !== "money" && Q.state.numeric,
+			g && Q.state.truncate
+		].filter(Boolean).join(" "),
+		id: l,
+		lang: t,
+		role: w ? "group" : void 0
+	}, S);
+}
+//#endregion
 //#region src/provider/en-GB.ts
-var D = {
+var $ = {
 	appearance: "Appearance",
 	appearanceAutomatic: "Auto",
 	appearanceDark: "Dark",
 	appearanceLight: "Light",
+	close: "Close",
 	loading: "Loading"
 };
 //#endregion
 //#region src/provider/BreezeProvider.tsx
-function O(e, t) {
+function tt(e, t) {
 	return e === "automatic" ? t ? "dark" : "light" : e;
 }
-function k({ children: e }) {
-	let { direction: t, locale: n } = _();
-	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 A({ 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, _] = l(n), y = e ?? h, b = O(y, 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 = b, e.style.colorScheme = b, () => {
+		return e.dataset.theme = y, e.style.colorScheme = y, () => {
 			t === void 0 ? delete e.dataset.theme : e.dataset.theme = t, e.style.colorScheme = n;
 		};
-	}, [b]);
-	let x = i((t) => {
-		e === void 0 && _(t), u?.(t);
-	}, [e, u]), S = i((e) => a?.[e] === void 0 ? "en-GB" : r, [r, a]);
-	return /* @__PURE__ */ d(g, {
+	}, [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(v, {
-			value: c(() => ({
-				appearance: y,
-				getMessageLocale: S,
+		children: /* @__PURE__ */ m(V, {
+			value: l(() => ({
+				appearance: v,
+				getMessageLocale: x,
 				locale: r,
 				messages: {
-					appearance: a?.appearance ?? D.appearance,
-					appearanceAutomatic: a?.appearanceAutomatic ?? D.appearanceAutomatic,
-					appearanceDark: a?.appearanceDark ?? D.appearanceDark,
-					appearanceLight: a?.appearanceLight ?? D.appearanceLight,
-					loading: a?.loading ?? D.loading
+					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: b,
-				setAppearance: x
+				resolvedAppearance: y,
+				setAppearance: b
 			}), [
-				y,
-				S,
+				v,
+				x,
 				r,
 				a,
-				b,
-				x
+				y,
+				b
 			]),
-			children: /* @__PURE__ */ d(k, { children: t })
+			children: /* @__PURE__ */ m(ke, {
+				locale: r,
+				portalContainer: u,
+				children: /* @__PURE__ */ m(nt, { children: t })
+			})
 		})
 	});
 }
 //#endregion
-export { C as AppearanceControl, A as BreezeProvider, E as Button };
+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