@ux-builder/ui 0.0.0-stage → 0.6.0

package/dist/patterns.js

@@ -0,0 +1,4235 @@
+import { _ as e, a as t, b as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, p as d, r as f, s as p, t as m, u as h } from "./shared-DspdvNFe.js";
+import { Fragment as g, cloneElement as _, useCallback as v, useEffect as y, useId as b, useLayoutEffect as x, useMemo as S, useRef as C, useState as w } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/patterns/Layout.jsx
+var O = [
+	"compact",
+	"medium",
+	"expanded",
+	"large",
+	"extraLarge"
+], k = {
+	compact: "compact",
+	medium: "medium",
+	expanded: "expanded",
+	large: "large",
+	extraLarge: "extra-large"
+}, A = (e, t) => Number.isInteger(e) && e >= 0 && e <= 8 ? e : t, j = (...e) => e.filter(Boolean).join(" ");
+function M({ gap: e = 4, align: t = "stretch", as: n = "div", className: r, children: i, ...a }) {
+	return /* @__PURE__ */ E(n, {
+		className: j("piq-stack", r),
+		"data-gap": A(e, 4),
+		"data-align": t,
+		...a,
+		children: i
+	});
+}
+function N({ gap: e = 3, justify: t = "start", align: n = "center", wrap: r = !0, as: i = "div", className: a, children: o, ...s }) {
+	return /* @__PURE__ */ E(i, {
+		className: j("piq-cluster", a),
+		"data-gap": A(e, 3),
+		"data-justify": t,
+		"data-align": n,
+		"data-wrap": r ? "true" : "false",
+		...s,
+		children: o
+	});
+}
+function P({ columns: e = {
+	compact: 1,
+	medium: 2,
+	expanded: 3,
+	large: 4
+}, gap: t = 4, as: n = "div", className: r, children: i, ...a }) {
+	let o = {}, s = 1;
+	for (let t of O) {
+		let n = typeof e == "number" ? e : e?.[t];
+		s = Number.isInteger(n) ? Math.min(6, Math.max(1, n)) : s, o[`data-cols-${k[t]}`] = s;
+	}
+	return /* @__PURE__ */ E("div", {
+		className: j("piq-grid", r),
+		"data-gap": A(t, 4),
+		...o,
+		children: /* @__PURE__ */ E(n, {
+			className: "piq-grid__items",
+			...a,
+			children: i
+		})
+	});
+}
+function F({ width: e = "page", as: t = "div", className: n, children: r, ...i }) {
+	return /* @__PURE__ */ E("div", {
+		className: j("piq-page", n),
+		"data-width": e,
+		children: /* @__PURE__ */ E(t, {
+			className: "piq-page__body",
+			...i,
+			children: r
+		})
+	});
+}
+function I({ primary: e, secondary: t, show: n = "primary", ratio: r = "1:2", primaryLabel: i, secondaryLabel: a, className: o, ...s }) {
+	return /* @__PURE__ */ E("div", {
+		className: j("piq-split", o),
+		"data-show": n === "secondary" ? "secondary" : "primary",
+		"data-ratio": r,
+		...s,
+		children: /* @__PURE__ */ D("div", {
+			className: "piq-split__panes",
+			children: [/* @__PURE__ */ E("div", {
+				className: "piq-split__pane",
+				"data-pane": "primary",
+				role: i ? "region" : void 0,
+				"aria-label": i,
+				children: e
+			}), /* @__PURE__ */ E("div", {
+				className: "piq-split__pane",
+				"data-pane": "secondary",
+				role: a ? "region" : void 0,
+				"aria-label": a,
+				children: t
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/patterns/Navigation.jsx
+var L = (e, t) => e.current === !0 || t !== void 0 && e.id === t, R = (e, t) => L(e, t) || (e.items ?? []).some((e) => R(e, t));
+function z({ item: e, current: t, onNavigate: r }) {
+	let [i, a] = w(() => R(e, t)), o = b();
+	return /* @__PURE__ */ D("li", {
+		className: "piq-primary-nav__item",
+		children: [/* @__PURE__ */ D("button", {
+			type: "button",
+			className: "piq-primary-nav__link piq-primary-nav__group",
+			"aria-expanded": i,
+			"aria-controls": o,
+			onClick: () => a((e) => !e),
+			children: [
+				e.icon && /* @__PURE__ */ E(n, { name: e.icon }),
+				/* @__PURE__ */ E("span", {
+					className: "piq-primary-nav__label",
+					children: e.label
+				}),
+				/* @__PURE__ */ E(n, {
+					name: i ? "chevron-up" : "chevron-down",
+					className: "piq-primary-nav__chevron"
+				})
+			]
+		}), /* @__PURE__ */ E("ul", {
+			id: o,
+			className: "piq-primary-nav__list piq-primary-nav__sublist",
+			hidden: !i,
+			children: e.items.map((e) => /* @__PURE__ */ E(B, {
+				item: e,
+				current: t,
+				onNavigate: r
+			}, e.id ?? e.label))
+		})]
+	});
+}
+function B({ item: e, current: t, onNavigate: r }) {
+	if (e.items?.length) return /* @__PURE__ */ E(z, {
+		item: e,
+		current: t,
+		onNavigate: r
+	});
+	let i = L(e, t);
+	return /* @__PURE__ */ E("li", {
+		className: "piq-primary-nav__item",
+		children: /* @__PURE__ */ D("a", {
+			href: e.href,
+			className: "piq-primary-nav__link",
+			"aria-current": i ? "page" : void 0,
+			onClick: (t) => {
+				r && (t.preventDefault(), r(e, t));
+			},
+			children: [e.icon && /* @__PURE__ */ E(n, { name: e.icon }), /* @__PURE__ */ E("span", {
+				className: "piq-primary-nav__label",
+				children: e.label
+			})]
+		})
+	});
+}
+function V({ items: e = [], current: t, label: n = "Main", onNavigate: r, className: i, ...a }) {
+	return /* @__PURE__ */ E("nav", {
+		"aria-label": n,
+		className: `piq-primary-nav${i ? ` ${i}` : ""}`,
+		...a,
+		children: /* @__PURE__ */ E("ul", {
+			className: "piq-primary-nav__list",
+			children: e.map((e) => /* @__PURE__ */ E(B, {
+				item: e,
+				current: t,
+				onNavigate: r
+			}, e.id ?? e.label))
+		})
+	});
+}
+function ee({ workspaces: e = [], current: t, onSwitch: r, label: i = "Workspace", searchLabel: a = "Search workspaces", searchAt: c = 8, emptyLabel: l = "No workspace matches", className: u }) {
+	let d = e.find((e) => e.id === t) ?? e[0], [f, p] = w(!1), [m, h] = w(""), [g, _] = w(0), v = C(null), x = C(null), S = C(null), T = b();
+	if (y(() => {
+		f && S.current?.focus();
+	}, [f]), y(() => {
+		if (!f) return;
+		let e = (e) => {
+			!v.current?.contains(e.target) && !x.current?.contains(e.target) && p(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [f]), e.length < c) return /* @__PURE__ */ E(s, {
+		className: u,
+		variant: "text",
+		label: d?.label,
+		buttonLabel: `${i}: ${d?.label ?? ""}`,
+		items: e.map((e) => ({
+			label: e.label,
+			checked: e.id === d?.id,
+			onSelect: () => r?.(e.id)
+		}))
+	});
+	let O = e.filter((e) => e.label.toLowerCase().includes(m.trim().toLowerCase())), k = () => {
+		p(!1), h(""), _(0), v.current?.focus();
+	}, A = (e) => {
+		k(), e.id !== d?.id && r?.(e.id);
+	};
+	function j(e) {
+		e.key === "ArrowDown" ? (e.preventDefault(), _((e) => Math.min(e + 1, O.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), _((e) => Math.max(e - 1, 0))) : e.key === "Enter" ? (e.preventDefault(), O[g] && A(O[g])) : e.key === "Escape" && (e.preventDefault(), k());
+	}
+	return /* @__PURE__ */ D("div", {
+		className: `piq-menubutton piq-workspace${u ? ` ${u}` : ""}`,
+		children: [/* @__PURE__ */ D(o, {
+			ref: v,
+			variant: "text",
+			"aria-haspopup": "dialog",
+			"aria-expanded": f,
+			"aria-label": `${i}: ${d?.label ?? ""}`,
+			onClick: () => f ? k() : p(!0),
+			children: [d?.label, /* @__PURE__ */ E(n, {
+				name: "chevron-down",
+				className: "piq-menubutton__chevron"
+			})]
+		}), f && /* @__PURE__ */ D("div", {
+			ref: x,
+			role: "dialog",
+			"aria-label": i,
+			className: "piq-menu piq-menubutton__menu piq-workspace__popup",
+			children: [
+				/* @__PURE__ */ E("input", {
+					ref: S,
+					type: "search",
+					role: "combobox",
+					className: "piq-field__input piq-workspace__search",
+					"aria-label": a,
+					"aria-expanded": "true",
+					"aria-controls": `${T}-list`,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": O[g] ? `${T}-${O[g].id}` : void 0,
+					value: m,
+					onChange: (e) => {
+						h(e.target.value), _(0);
+					},
+					onKeyDown: j
+				}),
+				/* @__PURE__ */ E("ul", {
+					id: `${T}-list`,
+					role: "listbox",
+					"aria-label": i,
+					className: "piq-workspace__list",
+					children: O.map((e, t) => /* @__PURE__ */ E("li", {
+						id: `${T}-${e.id}`,
+						role: "option",
+						"aria-selected": e.id === d?.id,
+						className: `piq-menu__item${t === g ? " is-hover" : ""}`,
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => A(e),
+						children: e.label
+					}, e.id))
+				}),
+				!O.length && /* @__PURE__ */ E("p", {
+					className: "piq-workspace__empty",
+					role: "status",
+					children: l
+				})
+			]
+		})]
+	});
+}
+function te({ nav: e = [], current: t, navLabel: r = "Main", brand: i, actions: a, breadcrumbs: o, onNavigate: s, moreLabel: c = "More", skipLabel: l = "Skip to content", adapt: d = "window", children: f, className: p }) {
+	let [m, h] = w(!1), g = b(), _ = C(null), v = e.length <= 5 ? e : [...e.slice(0, 4), {
+		id: "piq-more",
+		label: c,
+		icon: "more",
+		more: !0
+	}];
+	y(() => {
+		if (!m || d === "container" || typeof window.matchMedia != "function") return;
+		let e = window.matchMedia("(min-width: 600px)"), t = () => {
+			e.matches && (h(!1), requestAnimationFrame(() => _.current?.querySelector("[aria-current=\"page\"]")?.focus()));
+		};
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, [m]);
+	let x = (e) => (t) => {
+		if (e.more || e.items?.length) {
+			t.preventDefault(), h(!0);
+			return;
+		}
+		s && (t.preventDefault(), s(e, t));
+	}, S = s ? (e, t) => {
+		h(!1), s(e, t);
+	} : void 0, O = /* @__PURE__ */ D("div", {
+		className: `piq-shell${p ? ` ${p}` : ""}`,
+		"data-adapt": d === "container" ? "container" : void 0,
+		children: [
+			/* @__PURE__ */ E("a", {
+				className: "piq-shell__skip",
+				href: `#${g}`,
+				children: l
+			}),
+			/* @__PURE__ */ D("header", {
+				className: "piq-shell__top",
+				children: [i && /* @__PURE__ */ E("div", {
+					className: "piq-shell__brand",
+					children: i
+				}), a && /* @__PURE__ */ E("div", {
+					className: "piq-shell__actions",
+					children: a
+				})]
+			}),
+			/* @__PURE__ */ E("div", {
+				ref: _,
+				className: "piq-shell__side",
+				children: /* @__PURE__ */ E(V, {
+					items: e,
+					current: t,
+					label: r,
+					onNavigate: s
+				})
+			}),
+			/* @__PURE__ */ D("main", {
+				id: g,
+				className: "piq-shell__main",
+				tabIndex: -1,
+				children: [o && /* @__PURE__ */ E("div", {
+					className: "piq-shell__breadcrumbs",
+					children: o
+				}), f]
+			}),
+			/* @__PURE__ */ E("nav", {
+				className: "piq-shell__bar",
+				"aria-label": r,
+				children: /* @__PURE__ */ E("ul", {
+					className: "piq-shell__bar-list",
+					children: v.map((e) => {
+						let r = !e.more && R(e, t), i = /* @__PURE__ */ D(T, { children: [e.icon && /* @__PURE__ */ E(n, { name: e.icon }), /* @__PURE__ */ E("span", {
+							className: "piq-shell__bar-label",
+							children: e.label
+						})] });
+						return /* @__PURE__ */ E("li", { children: e.more || e.items?.length ? /* @__PURE__ */ E("button", {
+							type: "button",
+							className: "piq-shell__bar-item",
+							"aria-haspopup": "dialog",
+							"aria-expanded": m,
+							"data-current": r || void 0,
+							onClick: x(e),
+							children: i
+						}) : /* @__PURE__ */ E("a", {
+							href: e.href,
+							className: "piq-shell__bar-item",
+							"aria-current": r ? "page" : void 0,
+							onClick: x(e),
+							children: i
+						}) }, e.id ?? e.label);
+					})
+				})
+			}),
+			/* @__PURE__ */ E(u, {
+				open: m,
+				onClose: () => h(!1),
+				label: r,
+				side: "start",
+				children: /* @__PURE__ */ E(V, {
+					items: e,
+					current: t,
+					label: r,
+					onNavigate: S
+				})
+			})
+		]
+	});
+	return d === "container" ? /* @__PURE__ */ E("div", {
+		className: "piq-shell-frame",
+		children: O
+	}) : O;
+}
+//#endregion
+//#region src/patterns/ErrorScreen.jsx
+var H = {
+	"not-found": {
+		icon: "search",
+		title: "We can't find that page",
+		text: "The link may be out of date, or the page may have moved."
+	},
+	forbidden: {
+		icon: "lock",
+		title: "You don't have access to this page",
+		text: "Ask the person who manages this workspace to give you access."
+	},
+	offline: {
+		icon: "warning",
+		title: "You're offline",
+		text: "Check your connection. What you were doing is kept on this page."
+	},
+	maintenance: {
+		icon: "settings",
+		title: "This service is being updated",
+		text: "It will be back shortly. Try again in a few minutes."
+	},
+	"session-expired": {
+		icon: "user",
+		title: "Your session has ended",
+		text: "For your security you were signed out. Sign in again to carry on."
+	}
+}, ne = {
+	"not-found": {
+		label: "Go to the start",
+		href: "/"
+	},
+	forbidden: {
+		label: "Go back",
+		back: !0
+	},
+	offline: {
+		label: "Try again",
+		reload: !0
+	},
+	maintenance: {
+		label: "Try again",
+		reload: !0
+	},
+	"session-expired": {
+		label: "Sign in again",
+		reload: !0
+	}
+};
+function re({ kind: e = "not-found", title: t, children: r, actions: i, className: a, ...s }) {
+	let c = H[e] ?? H["not-found"], l = ne[e] ?? ne["not-found"], u = l.href ? /* @__PURE__ */ E("a", {
+		className: "piq-btn",
+		href: l.href,
+		children: l.label
+	}) : /* @__PURE__ */ E(o, {
+		onClick: () => l.back ? window.history.back() : window.location.reload(),
+		children: l.label
+	});
+	return /* @__PURE__ */ D("section", {
+		className: `piq-error-screen${a ? ` ${a}` : ""}`,
+		"data-kind": e,
+		...s,
+		children: [
+			/* @__PURE__ */ E(n, {
+				name: c.icon,
+				className: "piq-error-screen__mark"
+			}),
+			/* @__PURE__ */ E("h1", {
+				className: "piq-error-screen__title",
+				children: t ?? c.title
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-error-screen__text",
+				children: r ?? /* @__PURE__ */ E("p", { children: c.text })
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-error-screen__actions",
+				children: i ?? u
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/Regions.jsx
+var U = {
+	compact: 0,
+	medium: 600,
+	expanded: 840,
+	large: 1200,
+	"extra-large": 1600
+};
+function ie(e) {
+	return Object.entries(U).filter(([, t]) => e >= t).at(-1)[0];
+}
+function W(e) {
+	let [t, n] = w("compact");
+	return x(() => {
+		let t = e.current;
+		if (!t || typeof ResizeObserver != "function") return;
+		n(ie(t.getBoundingClientRect().width));
+		let r = new ResizeObserver(([e]) => n(ie(e.contentRect.width)));
+		return r.observe(t), () => r.disconnect();
+	}, [e]), t;
+}
+function G(e, t) {
+	return U[e] >= U[t];
+}
+function K(e, t = !0) {
+	x(() => {
+		let n = e.current;
+		if (!t || !n) return;
+		let r = n.parentElement;
+		for (; r && !/(auto|scroll)/.test(getComputedStyle(r).overflowY);) r = r.parentElement;
+		r ??= document.scrollingElement ?? document.documentElement;
+		let i = r.style.scrollPaddingBlockEnd, a = () => {
+			r.style.scrollPaddingBlockEnd = `${n.getBoundingClientRect().height + 8}px`;
+		};
+		a();
+		let o = typeof ResizeObserver == "function" ? new ResizeObserver(a) : null;
+		return o?.observe(n), () => {
+			o?.disconnect(), r.style.scrollPaddingBlockEnd = i;
+		};
+	}, [e, t]);
+}
+function q({ title: e, breadcrumbs: t, status: n, description: r, actions: i, secondaryActions: a, overflow: o, overflowLabel: c = "More actions", className: l }) {
+	return /* @__PURE__ */ D("header", {
+		className: `piq-page-header${l ? ` ${l}` : ""}`,
+		children: [
+			t,
+			/* @__PURE__ */ D("div", {
+				className: "piq-page-header__row",
+				children: [/* @__PURE__ */ D("div", {
+					className: "piq-page-header__heading",
+					children: [/* @__PURE__ */ E("h1", {
+						className: "piq-page-header__title",
+						children: e
+					}), n]
+				}), (i || a || o?.length) && /* @__PURE__ */ D("div", {
+					className: "piq-page-header__actions",
+					children: [
+						a,
+						i,
+						o?.length ? /* @__PURE__ */ E(s, {
+							icon: "more",
+							buttonLabel: c,
+							variant: "text",
+							align: "end",
+							items: o
+						}) : null
+					]
+				})]
+			}),
+			r && /* @__PURE__ */ E("p", {
+				className: "piq-page-header__description",
+				children: r
+			})
+		]
+	});
+}
+function ae({ search: e, onSearchChange: t, searchLabel: r = "Search", filters: i = [], onRemoveFilter: a, onClearAll: s, clearLabel: c = "Clear all", onOpenFilters: l, filtersOpen: u, filtersLabel: d = "Filters", appliedLabel: f = "Applied filters", removeLabel: p = (e) => `Remove filter: ${e.label}`, children: m, className: h }) {
+	let g = b();
+	return /* @__PURE__ */ D("div", {
+		className: `piq-filter-bar${h ? ` ${h}` : ""}`,
+		children: [/* @__PURE__ */ D("div", {
+			className: "piq-filter-bar__row",
+			children: [
+				t && /* @__PURE__ */ D("div", {
+					role: "search",
+					className: "piq-filter-bar__search",
+					children: [
+						/* @__PURE__ */ E("label", {
+							className: "piq-visually-hidden",
+							htmlFor: g,
+							children: r
+						}),
+						/* @__PURE__ */ E(n, {
+							name: "search",
+							className: "piq-filter-bar__search-icon"
+						}),
+						/* @__PURE__ */ E("input", {
+							id: g,
+							type: "search",
+							className: "piq-field__input",
+							placeholder: r,
+							value: e ?? "",
+							onChange: (e) => t(e.target.value)
+						})
+					]
+				}),
+				m,
+				l && /* @__PURE__ */ D(o, {
+					variant: "secondary",
+					className: "piq-filter-bar__open",
+					"aria-expanded": u,
+					onClick: l,
+					children: [/* @__PURE__ */ E(n, { name: "filter" }), i.length ? `${d} (${i.length})` : d]
+				})
+			]
+		}), i.length > 0 && /* @__PURE__ */ D("ul", {
+			className: "piq-filter-bar__chips",
+			"aria-label": f,
+			children: [i.map((e) => /* @__PURE__ */ D("li", {
+				className: "piq-chip",
+				children: [/* @__PURE__ */ E("span", { children: e.label }), a && /* @__PURE__ */ E("button", {
+					type: "button",
+					className: "piq-chip__remove",
+					"aria-label": p(e),
+					onClick: () => a(e),
+					children: /* @__PURE__ */ E(n, { name: "close" })
+				})]
+			}, e.id)), s && /* @__PURE__ */ E("li", { children: /* @__PURE__ */ E(o, {
+				variant: "text",
+				size: "sm",
+				onClick: s,
+				children: c
+			}) })]
+		})]
+	});
+}
+function oe({ open: e = !1, onClose: t, mode: r = "inline", title: i = "Filters", closeLabel: a = "Close filters", footer: s, children: c, className: l }) {
+	return r === "sheet" ? /* @__PURE__ */ D(u, {
+		open: e,
+		onClose: t,
+		title: i,
+		side: "full",
+		closeLabel: a,
+		className: l,
+		children: [c, s]
+	}) : e ? /* @__PURE__ */ D("aside", {
+		className: `piq-filter-panel${l ? ` ${l}` : ""}`,
+		"aria-label": i,
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "piq-filter-panel__head",
+				children: [/* @__PURE__ */ E("h2", {
+					className: "piq-filter-panel__title",
+					children: i
+				}), /* @__PURE__ */ E(o, {
+					variant: "text",
+					"aria-label": a,
+					onClick: () => t?.(),
+					children: /* @__PURE__ */ E(n, { name: "close" })
+				})]
+			}),
+			c,
+			s
+		]
+	}) : null;
+}
+function se({ title: e, count: t, defaultOpen: n = !0, children: r, className: i }) {
+	return /* @__PURE__ */ D("details", {
+		className: `piq-filter-section${i ? ` ${i}` : ""}`,
+		open: n,
+		children: [/* @__PURE__ */ D("summary", {
+			className: "piq-filter-section__title",
+			children: [e, t != null && /* @__PURE__ */ E("span", {
+				className: "piq-filter-section__count",
+				children: t
+			})]
+		}), /* @__PURE__ */ E("div", {
+			className: "piq-filter-section__body",
+			children: r
+		})]
+	});
+}
+var ce = {
+	empty: {
+		icon: "add",
+		title: "Nothing here yet",
+		text: "When there is something to show, it will be listed here."
+	},
+	"no-results": {
+		icon: "search",
+		title: "No results match",
+		text: "Try different words, or remove a filter."
+	},
+	forbidden: {
+		icon: "lock",
+		title: "You don't have access to this",
+		text: "Ask the person who manages this workspace to give you access."
+	},
+	error: {
+		icon: "error",
+		title: "This didn't load",
+		text: "Something went wrong on our side. Try again."
+	},
+	partial: {
+		icon: "warning",
+		title: "Some of this didn't load",
+		text: "What loaded is shown below. Try again for the rest."
+	}
+};
+function J({ kind: e = "empty", title: t, children: r, action: i, filters: a = [], onClearFilters: s, clearLabel: c = "Clear filters", onRetry: l, retryLabel: u = "Try again", activeLabel: d = "Active filters:", className: f }) {
+	let p = ce[e] ?? ce.empty;
+	return /* @__PURE__ */ D("div", {
+		className: `piq-state-panel${f ? ` ${f}` : ""}`,
+		"data-kind": e,
+		role: e === "error" ? "alert" : "status",
+		children: [
+			/* @__PURE__ */ E(n, {
+				name: p.icon,
+				className: "piq-state-panel__mark"
+			}),
+			/* @__PURE__ */ E("p", {
+				className: "piq-state-panel__title",
+				children: t ?? p.title
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-state-panel__text",
+				children: r ?? /* @__PURE__ */ E("p", { children: p.text })
+			}),
+			e === "no-results" && a.length > 0 && /* @__PURE__ */ D("p", {
+				className: "piq-state-panel__filters",
+				children: [
+					d,
+					" ",
+					a.map((e) => e.label).join(", ")
+				]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "piq-state-panel__actions",
+				children: [
+					e === "no-results" && s && /* @__PURE__ */ E(o, {
+						variant: "secondary",
+						onClick: s,
+						children: c
+					}),
+					(e === "error" || e === "partial") && l && /* @__PURE__ */ E(o, {
+						onClick: l,
+						children: u
+					}),
+					i
+				]
+			})
+		]
+	});
+}
+function le({ count: e = 0, children: t, onClearSelection: n, clearLabel: r = "Clear selection", label: i = "Bulk actions", selectedText: a = (e) => `${e} selected`, className: s }) {
+	let c = C(null);
+	K(c, e > 0);
+	function l(e) {
+		if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+		let t = [...e.currentTarget.querySelectorAll("button:not([disabled]), a[href], input:not([disabled])")], n = t.indexOf(document.activeElement);
+		if (n < 0) return;
+		let r = getComputedStyle(e.currentTarget).direction === "rtl", i = e.key === "ArrowRight" === r ? -1 : 1;
+		e.preventDefault(), t[(n + i + t.length) % t.length].focus();
+	}
+	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("span", {
+		className: "piq-visually-hidden",
+		role: "status",
+		"aria-live": "polite",
+		children: e ? a(e) : ""
+	}), e > 0 && /* @__PURE__ */ D("div", {
+		ref: c,
+		role: "toolbar",
+		"aria-label": i,
+		className: `piq-bulk-bar${s ? ` ${s}` : ""}`,
+		onKeyDown: l,
+		children: [
+			/* @__PURE__ */ E("span", {
+				className: "piq-bulk-bar__count",
+				children: a(e)
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-bulk-bar__actions",
+				children: t
+			}),
+			n && /* @__PURE__ */ E(o, {
+				variant: "text",
+				onClick: n,
+				children: r
+			})
+		]
+	})] });
+}
+//#endregion
+//#region src/patterns/Forms.jsx
+function ue(e) {
+	y(() => {
+		if (!e) return;
+		let t = (e) => {
+			e.preventDefault(), e.returnValue = "";
+		};
+		return window.addEventListener("beforeunload", t), () => window.removeEventListener("beforeunload", t);
+	}, [e]);
+}
+function de({ initial: e = {}, validate: t = () => ({}), onSubmit: n } = {}) {
+	let r = b(), [i, a] = w(e), [o, s] = w({}), [c, l] = w(!1), [u, d] = w(0), [f, p] = w(!1), m = C(e), h = S(() => Object.fromEntries(Object.entries(t(i) ?? {}).filter(([, e]) => e)), [i, t]), g = Object.keys({
+		...m.current,
+		...i
+	}).some((e) => i[e] !== m.current[e]), _ = v((e) => `${r}-${e}`, [r]), y = (e) => ({
+		id: _(e),
+		name: e,
+		value: i[e] ?? "",
+		onChange: (t) => a((n) => ({
+			...n,
+			[e]: t?.target ? t.target.type === "checkbox" ? t.target.checked : t.target.value : t
+		})),
+		onBlur: () => s((t) => ({
+			...t,
+			[e]: !0
+		})),
+		error: o[e] || c ? h[e] : void 0
+	});
+	async function x(e) {
+		if (e?.preventDefault?.(), l(!0), d((e) => e + 1), Object.keys(h).length) return !1;
+		p(!0);
+		try {
+			await n?.(i), m.current = i;
+		} finally {
+			p(!1);
+		}
+		return !0;
+	}
+	return {
+		values: i,
+		setValues: a,
+		errors: h,
+		shownErrors: c ? h : {},
+		field: y,
+		submit: x,
+		reset: (e = m.current) => {
+			m.current = e, a(e), s({}), l(!1);
+		},
+		dirty: g,
+		busy: f,
+		submitted: c,
+		attempt: u,
+		idOf: _
+	};
+}
+function fe({ errors: e = {}, idOf: t = (e) => e, title: n = "There is a problem", attempt: r = 0, className: i }) {
+	let a = C(null), o = Object.entries(e);
+	return y(() => {
+		o.length && a.current?.focus();
+	}, [r]), o.length ? /* @__PURE__ */ D("div", {
+		ref: a,
+		tabIndex: -1,
+		className: `piq-error-summary${i ? ` ${i}` : ""}`,
+		"aria-labelledby": `${t("summary")}-title`,
+		children: [/* @__PURE__ */ E("h2", {
+			id: `${t("summary")}-title`,
+			className: "piq-error-summary__title",
+			children: n
+		}), /* @__PURE__ */ E("ul", {
+			className: "piq-error-summary__list",
+			children: o.map(([e, n]) => /* @__PURE__ */ E("li", { children: /* @__PURE__ */ E("a", {
+				href: `#${t(e)}`,
+				onClick: (n) => {
+					n.preventDefault();
+					let r = document.getElementById(t(e));
+					r?.focus(), r?.scrollIntoView?.({ block: "center" });
+				},
+				children: n
+			}) }, e))
+		})]
+	}) : null;
+}
+function Y({ title: e, description: t, children: n, className: r }) {
+	return /* @__PURE__ */ D("fieldset", {
+		className: `piq-form-section${r ? ` ${r}` : ""}`,
+		children: [
+			/* @__PURE__ */ E("legend", {
+				className: "piq-form-section__title",
+				children: e
+			}),
+			t && /* @__PURE__ */ E("p", {
+				className: "piq-form-section__description",
+				children: t
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-form-section__fields",
+				children: n
+			})
+		]
+	});
+}
+function pe({ title: e, breadcrumbs: n, description: r, form: i, onCancel: a, submitLabel: s = "Save", cancelLabel: c = "Cancel", discardTitle: l = "Discard your changes?", discardText: u = "What you have typed will be lost.", keepLabel: d = "Keep editing", discardLabel: f = "Discard", children: p, className: m }) {
+	let h = C(null), g = C(null), [_, v] = w(!1);
+	return K(h, !0), ue(i?.dirty), /* @__PURE__ */ D("form", {
+		className: `piq-form-page${m ? ` ${m}` : ""}`,
+		noValidate: !0,
+		onSubmit: i?.submit,
+		children: [
+			/* @__PURE__ */ E(q, {
+				title: e,
+				breadcrumbs: n,
+				description: r
+			}),
+			/* @__PURE__ */ E(fe, {
+				errors: i?.shownErrors,
+				idOf: i?.idOf,
+				attempt: i?.attempt
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-form-page__fields",
+				children: p
+			}),
+			/* @__PURE__ */ D("div", {
+				ref: h,
+				className: "piq-form-page__actions",
+				children: [/* @__PURE__ */ E(o, {
+					type: "submit",
+					busy: i?.busy,
+					children: s
+				}), a && /* @__PURE__ */ E(o, {
+					variant: "secondary",
+					onClick: () => i?.dirty ? v(!0) : a?.(),
+					children: c
+				})]
+			}),
+			/* @__PURE__ */ E(t, {
+				open: _,
+				onClose: () => v(!1),
+				role: "alertdialog",
+				title: l,
+				description: u,
+				initialFocus: g,
+				actions: /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(o, {
+					ref: g,
+					variant: "secondary",
+					onClick: () => v(!1),
+					children: d
+				}), /* @__PURE__ */ E(o, {
+					onClick: () => {
+						v(!1), a?.();
+					},
+					children: f
+				})] })
+			})
+		]
+	});
+}
+function X() {
+	let e = "(min-width: 600px)", [t, n] = w(() => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(e).matches);
+	return y(() => {
+		if (typeof window.matchMedia != "function") return;
+		let t = window.matchMedia(e), r = () => n(t.matches);
+		return r(), t.addEventListener("change", r), () => t.removeEventListener("change", r);
+	}, []), t;
+}
+function me({ open: e = !1, onClose: n, title: r, form: i, submitLabel: a = "Save", cancelLabel: s = "Cancel", children: c, className: l }) {
+	let d = X(), f = /* @__PURE__ */ D("form", {
+		className: "piq-quick-edit",
+		noValidate: !0,
+		onSubmit: async (e) => {
+			await i?.submit(e) && n?.();
+		},
+		children: [
+			/* @__PURE__ */ E(fe, {
+				errors: i?.shownErrors,
+				idOf: i?.idOf,
+				attempt: i?.attempt
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-quick-edit__fields",
+				children: c
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "piq-quick-edit__actions",
+				children: [/* @__PURE__ */ E(o, {
+					type: "submit",
+					busy: i?.busy,
+					children: a
+				}), /* @__PURE__ */ E(o, {
+					variant: "secondary",
+					onClick: () => n?.(),
+					children: s
+				})]
+			})
+		]
+	});
+	return d ? /* @__PURE__ */ E(t, {
+		open: e,
+		onClose: n,
+		title: r,
+		className: l,
+		children: f
+	}) : /* @__PURE__ */ E(u, {
+		open: e,
+		onClose: n,
+		title: r,
+		side: "full",
+		className: l,
+		children: f
+	});
+}
+function Z({ open: e = !1, onConfirm: n, onCancel: r, title: i, objectName: a, consequence: s, confirmLabel: c = "Delete", cancelLabel: l = "Cancel", requireTyping: u = !1, typeLabel: d = (e) => `Type ${e} to confirm`, className: f }) {
+	let p = C(null), [m, h] = w(""), g = b();
+	y(() => {
+		e || h("");
+	}, [e]);
+	let _ = !u || m.trim() === String(a);
+	return /* @__PURE__ */ E(t, {
+		open: e,
+		onClose: r,
+		role: "alertdialog",
+		title: i ?? `Delete ${a}?`,
+		description: s,
+		initialFocus: p,
+		className: `piq-confirm${f ? ` ${f}` : ""}`,
+		actions: /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(o, {
+			ref: p,
+			variant: "secondary",
+			onClick: () => r?.(),
+			children: l
+		}), /* @__PURE__ */ E(o, {
+			className: "piq-confirm__action",
+			disabled: !_,
+			onClick: () => _ && n?.(),
+			children: c
+		})] }),
+		children: u && /* @__PURE__ */ D("div", {
+			className: "piq-field",
+			children: [/* @__PURE__ */ E("label", {
+				className: "piq-field__label",
+				htmlFor: g,
+				children: d(a)
+			}), /* @__PURE__ */ E("input", {
+				id: g,
+				className: "piq-field__input",
+				autoComplete: "off",
+				spellCheck: !1,
+				value: m,
+				onChange: (e) => h(e.target.value)
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/patterns/CollectionList.jsx
+var he = /* @__PURE__ */ new Set(["ready", "partial"]);
+function ge({ key: e = "list", defaults: t = {} } = {}) {
+	let n = C(null);
+	n.current = {
+		page: 1,
+		pageSize: 20,
+		q: "",
+		filters: [],
+		sort: null,
+		...t
+	};
+	let r = v(() => {
+		let t = n.current;
+		if (typeof window > "u") return t;
+		let r = new URLSearchParams(window.location.search), i = (t) => r.get(`${e}.${t}`), [a, o] = (i("sort") ?? "").split(":");
+		return {
+			page: Number(i("page")) || t.page,
+			pageSize: Number(i("size")) || t.pageSize,
+			q: i("q") ?? t.q,
+			filters: i("f") ? i("f").split(",").filter(Boolean) : t.filters,
+			sort: a ? {
+				key: a,
+				dir: o === "descending" ? "descending" : "ascending"
+			} : t.sort
+		};
+	}, [e]), [i, a] = w(r);
+	return y(() => {
+		let e = () => a(r());
+		return window.addEventListener("popstate", e), () => window.removeEventListener("popstate", e);
+	}, [r]), [i, v((t) => {
+		a((r) => {
+			let i = n.current, a = {
+				...r,
+				...t
+			};
+			("q" in t || "filters" in t) && !("page" in t) && (a.page = 1);
+			let o = new URLSearchParams(window.location.search), s = (t, n, r) => n === r || n === "" || n == null ? o.delete(`${e}.${t}`) : o.set(`${e}.${t}`, n);
+			s("page", a.page, i.page), s("size", a.pageSize, i.pageSize), s("q", a.q, ""), s("f", a.filters.join(","), ""), s("sort", a.sort ? `${a.sort.key}:${a.sort.dir}` : null, null);
+			let c = o.toString();
+			return window.history.replaceState(window.history.state, "", `${window.location.pathname}${c ? `?${c}` : ""}${window.location.hash}`), a;
+		});
+	}, [e])];
+}
+function _e(e) {
+	let t = e.filter((e) => e.priority).map((e) => e.key);
+	return new Set(t.length ? t : e.slice(0, 2).map((e) => e.key));
+}
+var ve = (e, t) => e.render ? e.render(t) : t[e.key];
+function ye({ rows: e, keyOf: t, selected: n, onChange: r, label: i }) {
+	let a = C(null), o = e.filter((e) => n.includes(t(e))).length;
+	return y(() => {
+		a.current && (a.current.indeterminate = o > 0 && o < e.length);
+	}, [o, e.length]), /* @__PURE__ */ E("label", {
+		className: "piq-collection__hit",
+		children: /* @__PURE__ */ E("input", {
+			ref: a,
+			type: "checkbox",
+			className: "piq-check__box",
+			"aria-label": i,
+			checked: e.length > 0 && o === e.length,
+			onChange: (i) => r(i.target.checked ? [.../* @__PURE__ */ new Set([...n, ...e.map(t)])] : n.filter((n) => !e.some((e) => t(e) === n)))
+		})
+	});
+}
+function be({ title: t, breadcrumbs: r, statusPill: i, actions: a, secondaryActions: c, overflow: l, columns: u = [], rows: d = [], rowKey: p = "id", rowLabel: m, caption: h, status: g = "ready", onRetry: _, search: v, onSearchChange: y, searchLabel: x = "Search", filters: S = [], onRemoveFilter: T, onClearFilters: O, filterPanel: k, filtersLabel: A = "Filters", selectable: j = !1, selected: M = [], onSelectedChange: N, bulkActions: P, rowActions: F, rowActionsLabel: I = (e) => `Actions for ${e}`, selectRowLabel: L = (e) => `Select ${e}`, selectAllLabel: R = "Select all on this page", sort: z, onSortChange: B, page: V = 1, pageSize: ee = 20, total: te, onPageChange: H, pageSizes: ne, onPageSizeChange: re, empty: U, showResultsLabel: ie = "Show results", className: K }) {
+	let se = C(null), ce = W(se), [ue, de] = w(!1), fe = b(), Y = (e) => e[p], pe = (e) => String(m ? m(e) : e[u[0]?.key] ?? Y(e)), X = _e(u), me = S.length > 0 || !!v, Z = g === "empty" && me ? "no-results" : g, ge = (e, t) => N?.(t ? [...M, Y(e)] : M.filter((t) => t !== Y(e))), be = G(ce, "expanded") ? "inline" : "sheet", xe = (e) => B?.(z?.key === e.key && z.dir === "ascending" ? {
+		key: e.key,
+		dir: "descending"
+	} : {
+		key: e.key,
+		dir: "ascending"
+	}), Se = (e) => {
+		let t = F?.(e);
+		return t?.length ? /* @__PURE__ */ E(s, {
+			icon: "more",
+			variant: "text",
+			size: "sm",
+			align: "end",
+			buttonLabel: I(pe(e)),
+			items: t
+		}) : null;
+	}, Ce = (e, t) => /* @__PURE__ */ E("label", {
+		className: "piq-collection__hit",
+		children: /* @__PURE__ */ E("input", {
+			type: "checkbox",
+			className: "piq-check__box",
+			id: `${fe}-${t}-${Y(e)}`,
+			"aria-label": L(pe(e)),
+			checked: M.includes(Y(e)),
+			onChange: (t) => ge(e, t.target.checked)
+		})
+	}), we = Math.min(ee, 50), Te;
+	return Te = Z === "loading" ? /* @__PURE__ */ D("div", {
+		className: "piq-collection__results",
+		"aria-busy": "true",
+		children: [/* @__PURE__ */ E("ul", {
+			className: "piq-collection__items",
+			"aria-hidden": "true",
+			children: Array.from({ length: we }, (t, n) => /* @__PURE__ */ E("li", {
+				className: "piq-collection__item",
+				children: /* @__PURE__ */ E(e, { lines: 2 })
+			}, n))
+		}), /* @__PURE__ */ E("div", {
+			className: "piq-collection__table-wrap",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ D("table", {
+				className: "piq-table piq-collection__table",
+				children: [/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [
+					j && /* @__PURE__ */ E("th", {
+						className: "piq-collection__select",
+						children: /* @__PURE__ */ E("span", {
+							className: "piq-collection__hit",
+							children: /* @__PURE__ */ E("input", {
+								type: "checkbox",
+								className: "piq-check__box",
+								disabled: !0,
+								tabIndex: -1
+							})
+						})
+					}),
+					u.map((e) => /* @__PURE__ */ E("th", {
+						"data-priority": X.has(e.key),
+						className: e.numeric ? "piq-num" : void 0,
+						children: e.label
+					}, e.key)),
+					F && /* @__PURE__ */ E("th", { className: "piq-collection__actions" })
+				] }) }), /* @__PURE__ */ E("tbody", { children: Array.from({ length: we }, (t, r) => /* @__PURE__ */ D("tr", { children: [
+					j && /* @__PURE__ */ E("td", {
+						className: "piq-collection__select",
+						children: /* @__PURE__ */ E("span", {
+							className: "piq-collection__hit",
+							children: /* @__PURE__ */ E("input", {
+								type: "checkbox",
+								className: "piq-check__box",
+								disabled: !0,
+								tabIndex: -1
+							})
+						})
+					}),
+					u.map((t) => /* @__PURE__ */ E("td", {
+						"data-priority": X.has(t.key),
+						children: /* @__PURE__ */ E(e, {})
+					}, t.key)),
+					F && /* @__PURE__ */ E("td", {
+						className: "piq-collection__actions",
+						children: /* @__PURE__ */ E(o, {
+							variant: "text",
+							size: "sm",
+							disabled: !0,
+							tabIndex: -1,
+							children: /* @__PURE__ */ E(n, { name: "more" })
+						})
+					})
+				] }, r)) })]
+			})
+		})]
+	}) : he.has(Z) ? /* @__PURE__ */ D("div", {
+		className: "piq-collection__results",
+		children: [
+			Z === "partial" && /* @__PURE__ */ E(J, {
+				kind: "partial",
+				onRetry: _
+			}),
+			/* @__PURE__ */ E("ul", {
+				className: "piq-collection__items",
+				"aria-label": h ?? t,
+				children: d.map((e) => {
+					let t = u.filter((e) => X.has(e.key));
+					return /* @__PURE__ */ D("li", {
+						className: "piq-collection__item",
+						"data-selected": j && M.includes(Y(e)) ? "" : void 0,
+						children: [
+							j && Ce(e, "item"),
+							/* @__PURE__ */ E("div", {
+								className: "piq-collection__fields",
+								children: t.map((t, n) => n === 0 ? /* @__PURE__ */ E("p", {
+									className: "piq-collection__primary",
+									children: ve(t, e)
+								}, t.key) : /* @__PURE__ */ D("p", {
+									className: "piq-collection__field",
+									children: [/* @__PURE__ */ D("span", {
+										className: "piq-visually-hidden",
+										children: [t.label, ": "]
+									}), ve(t, e)]
+								}, t.key))
+							}),
+							Se(e)
+						]
+					}, Y(e));
+				})
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-collection__table-wrap",
+				children: /* @__PURE__ */ D("table", {
+					className: "piq-table piq-collection__table",
+					children: [
+						(h ?? t) && /* @__PURE__ */ E("caption", {
+							className: "piq-visually-hidden",
+							children: h ?? t
+						}),
+						/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [
+							j && /* @__PURE__ */ E("th", {
+								scope: "col",
+								className: "piq-collection__select",
+								children: /* @__PURE__ */ E(ye, {
+									rows: d,
+									keyOf: Y,
+									selected: M,
+									onChange: (e) => N?.(e),
+									label: R
+								})
+							}),
+							u.map((e) => {
+								let t = z?.key === e.key ? z.dir : void 0;
+								return /* @__PURE__ */ E("th", {
+									scope: "col",
+									"data-priority": X.has(e.key),
+									className: e.numeric ? "piq-num" : void 0,
+									"aria-sort": e.sortable ? t ?? "none" : void 0,
+									children: e.sortable && B ? /* @__PURE__ */ D("button", {
+										type: "button",
+										className: "piq-table__sort",
+										onClick: () => xe(e),
+										children: [e.label, /* @__PURE__ */ E("span", {
+											className: "piq-table__arrow",
+											"aria-hidden": "true",
+											children: t === "descending" ? "↓" : t === "ascending" ? "↑" : "↕"
+										})]
+									}) : e.label
+								}, e.key);
+							}),
+							F && /* @__PURE__ */ E("th", {
+								scope: "col",
+								className: "piq-collection__actions",
+								children: /* @__PURE__ */ E("span", {
+									className: "piq-visually-hidden",
+									children: "Actions"
+								})
+							})
+						] }) }),
+						/* @__PURE__ */ E("tbody", { children: d.map((e) => /* @__PURE__ */ D("tr", {
+							"data-selected": j && M.includes(Y(e)) ? "" : void 0,
+							children: [
+								j && /* @__PURE__ */ E("td", {
+									className: "piq-collection__select",
+									children: Ce(e, "row")
+								}),
+								u.map((t) => /* @__PURE__ */ E("td", {
+									"data-priority": X.has(t.key),
+									className: t.numeric ? "piq-num" : void 0,
+									children: ve(t, e)
+								}, t.key)),
+								F && /* @__PURE__ */ E("td", {
+									className: "piq-collection__actions",
+									children: Se(e)
+								})
+							]
+						}, Y(e))) })
+					]
+				})
+			}),
+			te > 0 && H && /* @__PURE__ */ E(f, {
+				page: V,
+				pageSize: ee,
+				total: te,
+				onPageChange: H,
+				pageSizes: ne,
+				onPageSizeChange: re
+			})
+		]
+	}) : /* @__PURE__ */ E("div", {
+		className: "piq-collection__results",
+		children: Z === "empty" && U ? U : /* @__PURE__ */ E(J, {
+			kind: Z,
+			filters: S,
+			onClearFilters: O,
+			onRetry: _
+		})
+	}), /* @__PURE__ */ D("div", {
+		ref: se,
+		className: `piq-collection${K ? ` ${K}` : ""}`,
+		"data-size": ce,
+		children: [
+			/* @__PURE__ */ E(q, {
+				title: t,
+				breadcrumbs: r,
+				status: i,
+				actions: a,
+				secondaryActions: c,
+				overflow: l
+			}),
+			/* @__PURE__ */ E(ae, {
+				search: v,
+				onSearchChange: y,
+				searchLabel: x,
+				filters: S,
+				onRemoveFilter: T,
+				onClearAll: O,
+				onOpenFilters: k ? () => de((e) => !e) : void 0,
+				filtersOpen: k ? ue : void 0,
+				filtersLabel: A
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "piq-collection__body",
+				"data-panel": ue && be === "inline" ? "open" : void 0,
+				children: [k && /* @__PURE__ */ E(oe, {
+					open: ue,
+					mode: be,
+					title: A,
+					onClose: () => de(!1),
+					footer: be === "sheet" ? /* @__PURE__ */ E(o, {
+						onClick: () => de(!1),
+						children: ie
+					}) : null,
+					children: k
+				}), Te]
+			}),
+			j && /* @__PURE__ */ E(le, {
+				count: M.length,
+				onClearSelection: () => N?.([]),
+				children: P
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/Record.jsx
+function xe({ items: e = [], className: t, ...n }) {
+	return /* @__PURE__ */ E("div", {
+		className: `piq-description-list${t ? ` ${t}` : ""}`,
+		...n,
+		children: /* @__PURE__ */ E("dl", {
+			className: "piq-description-list__grid",
+			children: e.map((e, t) => /* @__PURE__ */ D("div", {
+				className: "piq-description-list__item",
+				"data-wide": e.wide || void 0,
+				children: [/* @__PURE__ */ E("dt", {
+					className: "piq-description-list__label",
+					children: e.label
+				}), /* @__PURE__ */ E("dd", {
+					className: "piq-description-list__value",
+					children: e.value ?? "—"
+				})]
+			}, e.key ?? t))
+		})
+	});
+}
+var Se = {
+	comment: {
+		icon: "edit",
+		label: "Comment"
+	},
+	change: {
+		icon: "refresh",
+		label: "Change"
+	},
+	system: {
+		icon: "info",
+		label: "System"
+	}
+}, Ce = (e) => e instanceof Date ? e : new Date(e);
+function we({ events: e = [], label: t = "Activity", order: r = "newest", kindLabels: i = {}, locale: a, className: o }) {
+	let s = [...e].sort((e, t) => (r === "oldest" ? 1 : -1) * (Ce(e.time) - Ce(t.time))), c = new Intl.DateTimeFormat(a, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	});
+	return /* @__PURE__ */ E("section", {
+		className: `piq-timeline${o ? ` ${o}` : ""}`,
+		"aria-label": t,
+		children: /* @__PURE__ */ E("ol", {
+			className: "piq-timeline__list",
+			children: s.map((e, t) => {
+				let r = Se[e.kind] ?? Se.system, a = Ce(e.time);
+				return /* @__PURE__ */ D("li", {
+					className: "piq-timeline__event",
+					"data-kind": e.kind,
+					children: [/* @__PURE__ */ E(n, {
+						name: r.icon,
+						className: "piq-timeline__mark"
+					}), /* @__PURE__ */ D("div", {
+						className: "piq-timeline__content",
+						children: [
+							/* @__PURE__ */ D("p", {
+								className: "piq-timeline__line",
+								children: [
+									/* @__PURE__ */ E("span", {
+										className: "piq-timeline__kind",
+										children: i[e.kind] ?? r.label
+									}),
+									/* @__PURE__ */ E("span", {
+										className: "piq-timeline__actor",
+										children: e.actor
+									}),
+									/* @__PURE__ */ E("span", {
+										className: "piq-timeline__action",
+										children: e.action
+									})
+								]
+							}),
+							/* @__PURE__ */ E("time", {
+								className: "piq-timeline__time",
+								dateTime: a.toISOString(),
+								children: c.format(a)
+							}),
+							e.body && /* @__PURE__ */ E("div", {
+								className: "piq-timeline__body",
+								children: e.body
+							})
+						]
+					})]
+				}, e.id ?? t);
+			})
+		})
+	});
+}
+function Te({ tabs: e = [], param: t = "tab", label: n, defaultValue: r, onChange: i, className: a }) {
+	let o = () => {
+		if (typeof window > "u") return;
+		let n = new URLSearchParams(window.location.search).get(t);
+		return e.some((e) => String(e.id) === n) ? e.find((e) => String(e.id) === n).id : void 0;
+	}, [s, c] = w(() => o() ?? r ?? e[0]?.id);
+	return y(() => {
+		let t = () => c(o() ?? r ?? e[0]?.id);
+		return window.addEventListener("popstate", t), () => window.removeEventListener("popstate", t);
+	}), /* @__PURE__ */ E(m, {
+		className: `piq-tabs-section${a ? ` ${a}` : ""}`,
+		tabs: e,
+		value: s,
+		onChange: (e) => {
+			c(e);
+			let n = new URLSearchParams(window.location.search);
+			n.set(t, e), window.history.replaceState(window.history.state, "", `${window.location.pathname}?${n}${window.location.hash}`), i?.(e);
+		},
+		label: n
+	});
+}
+function Ee({ title: t, statusPill: n, actions: r, secondaryActions: i, overflow: a, breadcrumbs: o, back: s, fields: c, tabs: l, tabsParam: u = "tab", tabsLabel: d, activity: f, activityLabel: p = "Activity", status: m = "ready", onRetry: h, emptyTitle: g = "Choose a record", emptyText: _ = "Select a record in the list to see it here.", notFoundTitle: v = "This record no longer exists", children: y, className: b }) {
+	if (m !== "ready" && m !== "loading") {
+		let e = {
+			empty: /* @__PURE__ */ E(J, {
+				kind: "empty",
+				title: g,
+				children: /* @__PURE__ */ E("p", { children: _ })
+			}),
+			error: /* @__PURE__ */ E(J, {
+				kind: "error",
+				onRetry: h
+			}),
+			forbidden: /* @__PURE__ */ E(J, { kind: "forbidden" }),
+			"not-found": /* @__PURE__ */ E(J, {
+				kind: "empty",
+				title: v,
+				children: /* @__PURE__ */ E("p", { children: "It may have been deleted or moved." })
+			})
+		}[m] ?? /* @__PURE__ */ E(J, {
+			kind: "error",
+			onRetry: h
+		});
+		return /* @__PURE__ */ D("div", {
+			className: `piq-record${b ? ` ${b}` : ""}`,
+			"data-status": m,
+			children: [s, e]
+		});
+	}
+	return m === "loading" ? /* @__PURE__ */ D("div", {
+		className: `piq-record${b ? ` ${b}` : ""}`,
+		"data-status": "loading",
+		"aria-busy": "true",
+		children: [
+			s,
+			/* @__PURE__ */ E(e, {
+				variant: "rect",
+				height: 40
+			}),
+			/* @__PURE__ */ E(e, { lines: 6 })
+		]
+	}) : /* @__PURE__ */ D("article", {
+		className: `piq-record${b ? ` ${b}` : ""}`,
+		"data-status": "ready",
+		children: [
+			s,
+			/* @__PURE__ */ E(q, {
+				title: t,
+				breadcrumbs: o,
+				status: n,
+				actions: r,
+				secondaryActions: i,
+				overflow: a
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "piq-record__body",
+				"data-activity": f ? "" : void 0,
+				children: [/* @__PURE__ */ D("div", {
+					className: "piq-record__main",
+					children: [
+						c?.length ? /* @__PURE__ */ E(xe, { items: c }) : null,
+						l?.length ? /* @__PURE__ */ E(Te, {
+							tabs: l,
+							param: u,
+							label: d ?? t
+						}) : null,
+						y
+					]
+				}), f && /* @__PURE__ */ E("aside", {
+					className: "piq-record__aside",
+					"aria-label": p,
+					children: /* @__PURE__ */ E(we, {
+						events: f,
+						label: p
+					})
+				})]
+			})
+		]
+	});
+}
+function De({ items: e = [], selected: t, onSelect: r, renderItem: i = (e) => e.label ?? e.id, listLabel: a = "Records", detail: s, backLabel: c = "Back", ratio: l = "1:2", className: u }) {
+	let d = C(null), f = C(null), p = C(null), m = W(d), h = G(m, "expanded"), [g, _] = w(t == null ? "list" : "detail"), [x, S] = w(t ?? e[0]?.id), T = b(), O = e.findIndex((e) => e.id === x), k = v((e) => {
+		[...f.current?.querySelectorAll("[role=\"option\"]") ?? []].find((t) => t.dataset.id === String(e))?.focus();
+	}, []), A = (e) => {
+		r?.(e), S(e), h || (_("detail"), requestAnimationFrame(() => p.current?.focus()));
+	};
+	function j(t) {
+		let n = null;
+		if (t.key === "ArrowDown") n = Math.min(O + 1, e.length - 1);
+		else if (t.key === "ArrowUp") n = Math.max(O - 1, 0);
+		else if (t.key === "Home") n = 0;
+		else if (t.key === "End") n = e.length - 1;
+		else if ((t.key === "Enter" || t.key === " ") && x != null) {
+			t.preventDefault(), A(x);
+			return;
+		}
+		if (n === null || n < 0) return;
+		t.preventDefault();
+		let i = e[n].id;
+		S(i), k(i), h && r?.(i);
+	}
+	let M = () => {
+		_("list"), requestAnimationFrame(() => k(t ?? x));
+	}, N = (e) => () => {
+		h && _(e);
+	};
+	return y(() => {
+		t != null && S(t);
+	}, [t]), /* @__PURE__ */ E("div", {
+		ref: d,
+		className: `piq-list-detail${u ? ` ${u}` : ""}`,
+		"data-size": m,
+		children: /* @__PURE__ */ E(I, {
+			show: g === "detail" ? "secondary" : "primary",
+			ratio: l,
+			primary: /* @__PURE__ */ E("div", {
+				onFocus: N("list"),
+				children: /* @__PURE__ */ E("ul", {
+					ref: f,
+					role: "listbox",
+					"aria-label": a,
+					className: "piq-list-detail__list",
+					onKeyDown: j,
+					children: e.map((n) => /* @__PURE__ */ E("li", {
+						id: `${T}-${n.id}`,
+						role: "option",
+						"data-id": n.id,
+						"aria-selected": n.id === t,
+						tabIndex: n.id === (x ?? e[0]?.id) ? 0 : -1,
+						className: "piq-list-detail__option",
+						onClick: () => A(n.id),
+						onFocus: () => S(n.id),
+						children: i(n)
+					}, n.id))
+				})
+			}),
+			secondary: /* @__PURE__ */ D("div", {
+				ref: p,
+				tabIndex: -1,
+				className: "piq-list-detail__detail",
+				onFocus: N("detail"),
+				children: [/* @__PURE__ */ D(o, {
+					variant: "text",
+					className: "piq-list-detail__back",
+					onClick: M,
+					children: [/* @__PURE__ */ E(n, { name: "arrow-left" }), c]
+				}), s]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/patterns/Reporting.jsx
+var Oe = {
+	up: {
+		icon: "arrow-right",
+		word: "up"
+	},
+	down: {
+		icon: "arrow-right",
+		word: "down"
+	},
+	flat: {
+		icon: "arrow-right",
+		word: "no change"
+	}
+};
+function ke({ label: e, value: t, change: r, words: i = Oe, className: a }) {
+	let o = r ? i[r.direction] ?? i.flat : null;
+	return /* @__PURE__ */ D("section", {
+		className: `piq-stat-tile${a ? ` ${a}` : ""}`,
+		"aria-label": e,
+		children: [
+			/* @__PURE__ */ E("p", {
+				className: "piq-stat-tile__label",
+				children: e
+			}),
+			/* @__PURE__ */ E("p", {
+				className: "piq-stat-tile__value",
+				children: t
+			}),
+			r && /* @__PURE__ */ D("p", {
+				className: "piq-stat-tile__change",
+				"data-direction": r.direction,
+				children: [/* @__PURE__ */ E(n, {
+					name: o.icon,
+					className: "piq-stat-tile__arrow"
+				}), /* @__PURE__ */ E("span", { children: [
+					o.word,
+					r.direction === "flat" ? null : r.amount,
+					r.comparison
+				].filter(Boolean).join(" ") })]
+			})
+		]
+	});
+}
+function Ae({ title: t, description: n, legend: r = [], table: i, status: a = "ready", onRetry: s, showTableLabel: c = "Show data table", hideTableLabel: l = "Hide data table", emptyTitle: u = "No data for this period", actions: d, children: f, className: p }) {
+	let [m, h] = w(!1), g = b(), _ = f;
+	return a === "loading" ? _ = /* @__PURE__ */ E("div", {
+		className: "piq-chart-frame__state",
+		"aria-busy": "true",
+		children: /* @__PURE__ */ E(e, {
+			variant: "rect",
+			height: "100%"
+		})
+	}) : a === "empty" ? _ = /* @__PURE__ */ E("div", {
+		className: "piq-chart-frame__state",
+		children: /* @__PURE__ */ E(J, {
+			kind: "empty",
+			title: u,
+			children: /* @__PURE__ */ E("p", { children: "Try a different date range or filters." })
+		})
+	}) : a === "error" && (_ = /* @__PURE__ */ E("div", {
+		className: "piq-chart-frame__state",
+		children: /* @__PURE__ */ E(J, {
+			kind: "error",
+			onRetry: s
+		})
+	})), /* @__PURE__ */ D("figure", {
+		className: `piq-chart-frame${p ? ` ${p}` : ""}`,
+		"aria-labelledby": `${g}-title`,
+		"data-status": a,
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "piq-chart-frame__head",
+				children: [/* @__PURE__ */ E("figcaption", {
+					id: `${g}-title`,
+					className: "piq-chart-frame__title",
+					children: t
+				}), d && /* @__PURE__ */ E("div", {
+					className: "piq-chart-frame__actions",
+					children: d
+				})]
+			}),
+			n && /* @__PURE__ */ E("p", {
+				className: "piq-chart-frame__description",
+				children: n
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-chart-frame__chart",
+				children: _
+			}),
+			a === "ready" && r.length > 0 && /* @__PURE__ */ E("ul", {
+				className: "piq-chart-frame__legend",
+				"aria-label": "Legend",
+				children: r.map((e, t) => /* @__PURE__ */ D("li", {
+					className: "piq-chart-frame__legend-item",
+					children: [e.marker, /* @__PURE__ */ E("span", { children: e.label })]
+				}, t))
+			}),
+			a === "ready" && i && /* @__PURE__ */ D("div", {
+				className: "piq-chart-frame__data",
+				children: [/* @__PURE__ */ E(o, {
+					variant: "text",
+					size: "sm",
+					"aria-expanded": m,
+					"aria-controls": `${g}-table`,
+					onClick: () => h((e) => !e),
+					children: m ? l : c
+				}), /* @__PURE__ */ E("div", {
+					id: `${g}-table`,
+					hidden: !m,
+					className: "piq-table-wrap",
+					children: /* @__PURE__ */ D("table", {
+						className: "piq-table",
+						children: [
+							/* @__PURE__ */ E("caption", {
+								className: "piq-visually-hidden",
+								children: t
+							}),
+							/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ E("tr", { children: i.columns.map((e) => /* @__PURE__ */ E("th", {
+								scope: "col",
+								className: e.numeric ? "piq-num" : void 0,
+								children: e.label
+							}, e.key)) }) }),
+							/* @__PURE__ */ E("tbody", { children: i.rows.map((e, t) => /* @__PURE__ */ E("tr", { children: i.columns.map((t) => /* @__PURE__ */ E("td", {
+								className: t.numeric ? "piq-num" : void 0,
+								children: e[t.key]
+							}, t.key)) }, t)) })
+						]
+					})
+				})]
+			})
+		]
+	});
+}
+var je = (e, t) => e ? new Intl.DateTimeFormat(t, { timeStyle: "short" }).format(e instanceof Date ? e : new Date(e)) : null;
+function Me({ title: e, breadcrumbs: t, actions: n, filters: r, dateRange: i, refreshedAt: a, refreshedLabel: o = "Last refreshed", locale: s, tiles: c = [], charts: l = [], children: u, className: d }) {
+	let f = je(a, s);
+	return /* @__PURE__ */ D("div", {
+		className: `piq-dashboard${d ? ` ${d}` : ""}`,
+		children: [
+			/* @__PURE__ */ E(q, {
+				title: e,
+				breadcrumbs: t,
+				actions: n
+			}),
+			(r || i || f) && /* @__PURE__ */ D("div", {
+				className: "piq-dashboard__toolbar",
+				children: [
+					r,
+					i,
+					f && /* @__PURE__ */ D("p", {
+						className: "piq-dashboard__refreshed",
+						children: [
+							o,
+							" ",
+							/* @__PURE__ */ E("time", {
+								dateTime: new Date(a).toISOString(),
+								children: f
+							})
+						]
+					})
+				]
+			}),
+			c.length > 0 && /* @__PURE__ */ E("div", {
+				className: "piq-dashboard__tiles",
+				children: c
+			}),
+			l.length > 0 && /* @__PURE__ */ E("div", {
+				className: "piq-dashboard__charts",
+				children: l
+			}),
+			u
+		]
+	});
+}
+function Ne({ title: t, breadcrumbs: r, parameters: i, onRun: a, runLabel: s = "Run report", parametersLabel: c = "Parameters", applied: l = [], appliedLabel: d = "Run with", results: f, status: p = "ready", onRetry: m, onExport: h, exportLabel: g = "Export", onPrint: _, printLabel: v = "Print", className: y }) {
+	let x = C(null), S = W(x), [T, O] = w(!1), k = b(), A = G(S, "expanded") ? "side" : G(S, "medium") ? "collapsible" : "sheet", j = /* @__PURE__ */ D("form", {
+		className: "piq-report__form",
+		onSubmit: (e) => {
+			e.preventDefault(), O(!1), a?.();
+		},
+		children: [i, /* @__PURE__ */ E(o, {
+			type: "submit",
+			children: s
+		})]
+	});
+	return /* @__PURE__ */ D("div", {
+		ref: x,
+		className: `piq-report${y ? ` ${y}` : ""}`,
+		"data-mode": A,
+		children: [/* @__PURE__ */ E(q, {
+			title: t,
+			breadcrumbs: r,
+			actions: /* @__PURE__ */ D("div", {
+				className: "piq-report__actions",
+				children: [
+					A !== "side" && /* @__PURE__ */ D(o, {
+						variant: "secondary",
+						"aria-expanded": T,
+						"aria-controls": A === "collapsible" ? `${k}-params` : void 0,
+						onClick: () => O((e) => !e),
+						children: [/* @__PURE__ */ E(n, { name: "filter" }), c]
+					}),
+					h && /* @__PURE__ */ D(o, {
+						variant: "secondary",
+						onClick: h,
+						children: [/* @__PURE__ */ E(n, { name: "download" }), g]
+					}),
+					/* @__PURE__ */ E(o, {
+						variant: "secondary",
+						onClick: () => _ ? _() : window.print(),
+						children: v
+					})
+				]
+			})
+		}), /* @__PURE__ */ D("div", {
+			className: "piq-report__body",
+			children: [
+				A === "side" && /* @__PURE__ */ E("aside", {
+					className: "piq-report__params",
+					"aria-label": c,
+					children: j
+				}),
+				A === "collapsible" && /* @__PURE__ */ E("section", {
+					id: `${k}-params`,
+					className: "piq-report__params",
+					"aria-label": c,
+					hidden: !T,
+					children: j
+				}),
+				A === "sheet" && /* @__PURE__ */ E(u, {
+					open: T,
+					onClose: () => O(!1),
+					title: c,
+					side: "full",
+					children: j
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "piq-report__results",
+					children: [l.length > 0 && /* @__PURE__ */ E("dl", {
+						className: "piq-report__applied",
+						"aria-label": d,
+						children: l.map((e, t) => /* @__PURE__ */ D("div", {
+							className: "piq-chip",
+							children: [/* @__PURE__ */ D("dt", { children: [e.label, ":"] }), /* @__PURE__ */ E("dd", { children: e.value })]
+						}, t))
+					}), p === "ready" ? f : p === "loading" ? /* @__PURE__ */ E("div", {
+						"aria-busy": "true",
+						children: /* @__PURE__ */ E(e, { lines: 8 })
+					}) : /* @__PURE__ */ E(J, {
+						kind: p,
+						onRetry: m
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/patterns/Settings.jsx
+function Pe({ title: e = "Settings", breadcrumbs: t, sections: r = [], current: i, onChange: a, navLabel: s = "Settings sections", backLabel: c = "All settings", className: l }) {
+	let u = C(null), d = W(u), f = G(d, "expanded"), p = r.filter((e) => !e.hidden), m = p.filter((e) => !e.disabled), [h, g] = w(i ?? m[0]?.id), _ = i ?? h, [v, x] = w("list"), S = b(), T = C({});
+	y(() => {
+		f && _ != null && x("section");
+	}, [f, _]);
+	let O = (e) => {
+		i === void 0 && g(e), a?.(e), x("section"), requestAnimationFrame(() => T.current[e]?.focus());
+	};
+	return m.length ? /* @__PURE__ */ D("div", {
+		ref: u,
+		className: `piq-settings${l ? ` ${l}` : ""}`,
+		"data-size": d,
+		children: [/* @__PURE__ */ E(q, {
+			title: e,
+			breadcrumbs: t
+		}), /* @__PURE__ */ E(I, {
+			show: v === "section" ? "secondary" : "primary",
+			primary: /* @__PURE__ */ E("nav", {
+				"aria-label": s,
+				className: "piq-settings__nav",
+				children: /* @__PURE__ */ E("ul", {
+					className: "piq-primary-nav__list",
+					children: p.map((e) => /* @__PURE__ */ D("li", {
+						className: "piq-primary-nav__item",
+						children: [/* @__PURE__ */ D("button", {
+							type: "button",
+							"data-section": e.id,
+							className: "piq-primary-nav__link",
+							"aria-current": e.id === _ ? "true" : void 0,
+							"aria-disabled": e.disabled ? "true" : void 0,
+							"aria-describedby": e.disabled ? `${S}-${e.id}-why` : void 0,
+							onClick: () => !e.disabled && O(e.id),
+							children: [/* @__PURE__ */ E("span", {
+								className: "piq-primary-nav__label",
+								children: e.label
+							}), !e.disabled && /* @__PURE__ */ E(n, {
+								name: "chevron-right",
+								className: "piq-settings__chevron"
+							})]
+						}), e.disabled && /* @__PURE__ */ E("p", {
+							id: `${S}-${e.id}-why`,
+							className: "piq-settings__why",
+							children: typeof e.disabled == "string" ? e.disabled : "Not available to you"
+						})]
+					}, e.id))
+				})
+			}),
+			secondary: /* @__PURE__ */ D("div", {
+				className: "piq-settings__sections",
+				children: [/* @__PURE__ */ D(o, {
+					variant: "text",
+					className: "piq-settings__back",
+					onClick: () => {
+						x("list"), requestAnimationFrame(() => u.current?.querySelector(`[data-section="${_}"]`)?.focus());
+					},
+					children: [/* @__PURE__ */ E(n, { name: "arrow-left" }), c]
+				}), m.map((e) => /* @__PURE__ */ D("section", {
+					className: "piq-settings__section",
+					"aria-labelledby": `${S}-${e.id}-h`,
+					hidden: e.id !== _,
+					children: [/* @__PURE__ */ E("h2", {
+						id: `${S}-${e.id}-h`,
+						tabIndex: -1,
+						ref: (t) => {
+							T.current[e.id] = t;
+						},
+						className: "piq-settings__heading",
+						children: e.label
+					}), e.content]
+				}, e.id))]
+			})
+		})]
+	}) : /* @__PURE__ */ D("div", {
+		ref: u,
+		className: `piq-settings${l ? ` ${l}` : ""}`,
+		children: [/* @__PURE__ */ E(q, {
+			title: e,
+			breadcrumbs: t
+		}), /* @__PURE__ */ E(J, { kind: "forbidden" })]
+	});
+}
+//#endregion
+//#region src/patterns/Workflow.jsx
+var Fe = (e) => {
+	if (!e) return {};
+	let t = {}, n = e.ownerDocument?.defaultView?.FormData ?? FormData;
+	for (let [r, i] of new n(e)) t[r] = r in t ? [].concat(t[r], i) : i;
+	return t;
+};
+function Ie({ title: e, steps: t = [], review: n, onSaveDraft: r, onFinish: i, saveDraftLabel: s = "Save draft", backLabel: c = "Back", nextLabel: l = "Continue", finishLabel: u = "Submit", reviewTitle: d = "Check your answers", className: f }) {
+	let p = n ? [...t, {
+		id: "review",
+		title: d,
+		content: ({ data: e }) => n(e)
+	}] : t, [m, h] = w(0), [g, _] = w({}), [v, y] = w(0), [x, S] = w({}), T = C(null), O = C(null), k = b(), A = p[m], j = m === p.length - 1, M = () => Fe(T.current), N = (e) => {
+		S(M()), _({}), h(e), requestAnimationFrame(() => O.current?.focus());
+	};
+	function P(e) {
+		e.preventDefault();
+		let t = M(), n = Object.fromEntries(Object.entries(A.validate?.(t) ?? {}).filter(([, e]) => e));
+		if (Object.keys(n).length) {
+			S(t), _(n), y((e) => e + 1);
+			return;
+		}
+		if (j) {
+			i?.(t);
+			return;
+		}
+		N(m + 1);
+	}
+	return /* @__PURE__ */ D("form", {
+		ref: T,
+		className: `piq-wizard${f ? ` ${f}` : ""}`,
+		noValidate: !0,
+		onSubmit: P,
+		children: [
+			e && /* @__PURE__ */ E("p", {
+				className: "piq-wizard__task",
+				children: e
+			}),
+			/* @__PURE__ */ E("ol", {
+				className: "piq-wizard__steps",
+				"aria-label": "Steps",
+				children: p.map((e, t) => /* @__PURE__ */ E("li", {
+					className: "piq-wizard__step",
+					"aria-current": t === m ? "step" : void 0,
+					"data-done": t < m || void 0,
+					children: e.title
+				}, e.id))
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-wizard__progress",
+				children: /* @__PURE__ */ E(a, {
+					label: `Step ${m + 1} of ${p.length}`,
+					value: m + 1,
+					max: p.length,
+					valueText: `Step ${m + 1} of ${p.length}`
+				})
+			}),
+			/* @__PURE__ */ E("h2", {
+				ref: O,
+				tabIndex: -1,
+				className: "piq-wizard__heading",
+				id: `${k}-h`,
+				children: `Step ${m + 1} of ${p.length}: ${A?.title ?? ""}`
+			}),
+			/* @__PURE__ */ E(fe, {
+				errors: g,
+				idOf: (e) => T.current?.elements.namedItem(e)?.id ?? e,
+				attempt: v
+			}),
+			p.map((e, t) => /* @__PURE__ */ E("section", {
+				className: "piq-wizard__panel",
+				hidden: t !== m,
+				"aria-labelledby": t === m ? `${k}-h` : void 0,
+				children: typeof e.content == "function" ? e.content({
+					data: x,
+					errors: t === m ? g : {}
+				}) : e.content
+			}, e.id)),
+			/* @__PURE__ */ D("div", {
+				className: "piq-wizard__actions",
+				children: [
+					/* @__PURE__ */ E(o, {
+						type: "submit",
+						onClick: (e) => {
+							e.preventDefault(), P(e);
+						},
+						children: j ? u : l
+					}),
+					m > 0 && /* @__PURE__ */ E(o, {
+						variant: "secondary",
+						onClick: () => N(m - 1),
+						children: c
+					}),
+					r && /* @__PURE__ */ E(o, {
+						variant: "text",
+						onClick: () => r(M()),
+						children: s
+					})
+				]
+			})
+		]
+	});
+}
+var Le = {
+	"not-started": "Not started",
+	"in-progress": "In progress",
+	completed: "Completed"
+};
+function Re({ title: e, sections: t = [], statusLabels: n = Le, completedText: r = (e, t) => `${e} of ${t} sections completed`, onSelect: i, className: a }) {
+	let o = t.filter((e) => e.status === "completed").length;
+	return /* @__PURE__ */ D("section", {
+		className: `piq-task-list${a ? ` ${a}` : ""}`,
+		"aria-label": e,
+		children: [
+			e && /* @__PURE__ */ E("h2", {
+				className: "piq-task-list__title",
+				children: e
+			}),
+			/* @__PURE__ */ E("p", {
+				className: "piq-task-list__count",
+				children: r(o, t.length)
+			}),
+			/* @__PURE__ */ E("ol", {
+				className: "piq-task-list__items",
+				children: t.map((e) => /* @__PURE__ */ D("li", {
+					className: "piq-task-list__item",
+					children: [/* @__PURE__ */ E("a", {
+						href: e.href,
+						onClick: (t) => {
+							i && (t.preventDefault(), i(e.id, t));
+						},
+						"aria-describedby": `${e.id}-status`,
+						children: e.label
+					}), /* @__PURE__ */ E("strong", {
+						id: `${e.id}-status`,
+						className: "piq-task-list__status",
+						"data-status": e.status,
+						children: n[e.status] ?? e.status
+					})]
+				}, e.id))
+			})
+		]
+	});
+}
+function ze({ title: e = "Check your answers", sections: t = [], consequence: n, submitLabel: r = "Submit", onSubmit: i, changeLabel: a = "Change", result: s, className: c }) {
+	let l = C(null);
+	return y(() => {
+		s && l.current?.focus();
+	}, [s]), s ? /* @__PURE__ */ D("div", {
+		ref: l,
+		tabIndex: -1,
+		className: `piq-confirmation${c ? ` ${c}` : ""}`,
+		role: "status",
+		children: [
+			/* @__PURE__ */ E("h2", {
+				className: "piq-confirmation__title",
+				children: s.title
+			}),
+			s.reference && /* @__PURE__ */ D("p", {
+				className: "piq-confirmation__reference",
+				children: ["Reference ", /* @__PURE__ */ E("strong", { children: s.reference })]
+			}),
+			s.text && /* @__PURE__ */ E("p", {
+				className: "piq-confirmation__text",
+				children: s.text
+			})
+		]
+	}) : /* @__PURE__ */ D("div", {
+		className: `piq-review${c ? ` ${c}` : ""}`,
+		children: [
+			/* @__PURE__ */ E("h2", {
+				className: "piq-review__title",
+				children: e
+			}),
+			t.map((e) => /* @__PURE__ */ D("section", {
+				className: "piq-review__section",
+				"aria-labelledby": `${e.id}-review`,
+				children: [/* @__PURE__ */ D("div", {
+					className: "piq-review__head",
+					children: [/* @__PURE__ */ E("h3", {
+						id: `${e.id}-review`,
+						className: "piq-review__section-title",
+						children: e.title
+					}), /* @__PURE__ */ D("a", {
+						href: e.href,
+						className: "piq-review__change",
+						children: [a, /* @__PURE__ */ D("span", {
+							className: "piq-visually-hidden",
+							children: [" ", e.title]
+						})]
+					})]
+				}), /* @__PURE__ */ E(xe, { items: e.answers })]
+			}, e.id)),
+			n && /* @__PURE__ */ E("p", {
+				className: "piq-review__consequence",
+				children: n
+			}),
+			/* @__PURE__ */ E(o, {
+				onClick: () => i?.(),
+				children: r
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/EditableGrid.jsx
+function Be({ label: e, columns: t = [], rows: i = [], rowKey: a = "id", onChange: s, errors: c = {}, newRow: l = () => ({}), addLabel: d = "Add row", removeLabel: f = (e) => `Remove row ${e}`, editLabel: p = (e) => `Edit row ${e}`, totalLabel: m = "Total", saveLabel: h = "Save", className: g }) {
+	let _ = C(null), v = C(null), x = W(_), S = !G(x, "medium"), [T, O] = w({
+		r: 0,
+		c: 0
+	}), [k, A] = w(null), [j, M] = w(null), N = b(), P = (e, t) => e[a] ?? t, F = t.length + 1, I = t.filter((e) => e.numeric), L = (e) => i.reduce((t, n) => t + (Number(n[e]) || 0), 0), R = (e, t) => {
+		let n = v.current?.querySelector(`[data-r="${e}"][data-c="${t}"]`);
+		return n?.querySelector("button") ?? n;
+	}, z = (e, t) => requestAnimationFrame(() => R(e, t)?.focus());
+	y(() => {
+		T.r >= i.length && i.length && O({
+			r: i.length - 1,
+			c: T.c
+		});
+	}, [i.length, T]);
+	let B = () => {
+		let { r: e, c: n, value: r } = k, a = t[n];
+		s?.(i.map((t, n) => n === e ? {
+			...t,
+			[a.key]: a.numeric && r !== "" ? Number(r) : r
+		} : t)), A(null), z(e, n);
+	};
+	function V(e) {
+		if (k) {
+			if (e.key === "Enter") e.preventDefault(), B();
+			else if (e.key === "Escape") {
+				e.preventDefault();
+				let { r: t, c: n } = k;
+				A(null), z(t, n);
+			}
+			return;
+		}
+		let { r: n, c: r } = T, a = {
+			ArrowRight: [0, 1],
+			ArrowLeft: [0, -1],
+			ArrowDown: [1, 0],
+			ArrowUp: [-1, 0]
+		}[e.key];
+		if (a) {
+			e.preventDefault();
+			let t = {
+				r: Math.min(Math.max(n + a[0], 0), i.length - 1),
+				c: Math.min(Math.max(r + a[1], 0), F - 1)
+			};
+			O(t), z(t.r, t.c);
+			return;
+		}
+		if (e.key === "Home" || e.key === "End") {
+			e.preventDefault();
+			let t = {
+				r: n,
+				c: e.key === "Home" ? 0 : F - 1
+			};
+			O(t), z(t.r, t.c);
+			return;
+		}
+		if ((e.key === "Enter" || e.key === "F2") && r < t.length) {
+			if (e.preventDefault(), S) {
+				M({
+					r: n,
+					values: { ...i[n] }
+				});
+				return;
+			}
+			if (t[r].editable === !1) return;
+			A({
+				r: n,
+				c: r,
+				value: i[n]?.[t[r].key] ?? ""
+			});
+		}
+	}
+	let ee = () => {
+		let e = [...i, l()];
+		s?.(e), O({
+			r: e.length - 1,
+			c: 0
+		}), z(e.length - 1, 0);
+	}, te = (e) => {
+		s?.(i.filter((t, n) => n !== e));
+		let t = {
+			r: Math.max(0, e - 1),
+			c: 0
+		};
+		O(t), i.length > 1 && z(t.r, 0);
+	}, H = () => {
+		let { r: e, values: t } = j;
+		s?.(i.map((n, r) => r === e ? t : n)), M(null), z(e, 0);
+	};
+	return /* @__PURE__ */ D("div", {
+		ref: _,
+		className: `piq-grid-edit${g ? ` ${g}` : ""}`,
+		"data-size": x,
+		children: [
+			/* @__PURE__ */ E("div", {
+				className: "piq-table-wrap",
+				children: /* @__PURE__ */ D("table", {
+					ref: v,
+					role: "grid",
+					"aria-label": e,
+					className: "piq-table piq-grid-edit__table",
+					onKeyDown: V,
+					children: [
+						/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [t.map((e) => /* @__PURE__ */ E("th", {
+							scope: "col",
+							className: e.numeric ? "piq-num" : void 0,
+							children: e.label
+						}, e.key)), /* @__PURE__ */ E("th", {
+							scope: "col",
+							children: /* @__PURE__ */ E("span", {
+								className: "piq-visually-hidden",
+								children: "Actions"
+							})
+						})] }) }),
+						/* @__PURE__ */ E("tbody", { children: i.map((e, r) => /* @__PURE__ */ D("tr", { children: [t.map((t, n) => {
+							let i = c[P(e, r)]?.[t.key], a = `${N}-${r}-${n}-err`, o = k?.r === r && k?.c === n;
+							return /* @__PURE__ */ D("td", {
+								role: "gridcell",
+								"data-r": r,
+								"data-c": n,
+								tabIndex: T.r === r && T.c === n && !o ? 0 : -1,
+								"aria-invalid": i ? "true" : void 0,
+								"aria-describedby": i ? a : void 0,
+								"aria-readonly": t.editable === !1 ? "true" : void 0,
+								className: `${t.numeric ? "piq-num " : ""}piq-grid-edit__cell`,
+								onFocus: () => O({
+									r,
+									c: n
+								}),
+								onDoubleClick: () => S ? M({
+									r,
+									values: { ...e }
+								}) : t.editable !== !1 && A({
+									r,
+									c: n,
+									value: e[t.key] ?? ""
+								}),
+								children: [o ? /* @__PURE__ */ E("input", {
+									autoFocus: !0,
+									"aria-label": `${t.label}, row ${r + 1}`,
+									className: "piq-field__input piq-grid-edit__input",
+									inputMode: t.numeric ? "decimal" : void 0,
+									value: k.value,
+									onChange: (e) => A({
+										...k,
+										value: e.target.value
+									}),
+									onBlur: () => k && B()
+								}) : /* @__PURE__ */ E("span", {
+									className: "piq-grid-edit__value",
+									children: e[t.key]
+								}), i && /* @__PURE__ */ E("span", {
+									id: a,
+									className: "piq-field__error",
+									children: i
+								})]
+							}, t.key);
+						}), /* @__PURE__ */ D("td", {
+							role: "gridcell",
+							"data-r": r,
+							"data-c": t.length,
+							className: "piq-grid-edit__row-actions",
+							children: [S && /* @__PURE__ */ E(o, {
+								variant: "text",
+								size: "sm",
+								tabIndex: -1,
+								"aria-label": p(r + 1),
+								onClick: () => M({
+									r,
+									values: { ...e }
+								}),
+								children: /* @__PURE__ */ E(n, { name: "edit" })
+							}), /* @__PURE__ */ E(o, {
+								variant: "text",
+								size: "sm",
+								tabIndex: T.r === r && T.c === t.length ? 0 : -1,
+								"aria-label": f(r + 1),
+								onClick: () => te(r),
+								onFocus: () => O({
+									r,
+									c: t.length
+								}),
+								children: /* @__PURE__ */ E(n, { name: "delete" })
+							})]
+						})] }, P(e, r))) }),
+						I.length > 0 && /* @__PURE__ */ E("tfoot", { children: /* @__PURE__ */ D("tr", {
+							className: "piq-grid-edit__totals",
+							children: [t.map((e, t) => /* @__PURE__ */ E("td", {
+								className: e.numeric ? "piq-num" : void 0,
+								children: e.numeric ? L(e.key) : t === 0 ? /* @__PURE__ */ E("strong", { children: m }) : null
+							}, e.key)), /* @__PURE__ */ E("td", {})]
+						}) })
+					]
+				})
+			}),
+			/* @__PURE__ */ D(o, {
+				variant: "secondary",
+				onClick: ee,
+				children: [/* @__PURE__ */ E(n, { name: "add" }), d]
+			}),
+			/* @__PURE__ */ E(u, {
+				open: !!j,
+				onClose: () => {
+					let e = j?.r;
+					M(null), e != null && z(e, 0);
+				},
+				title: j ? p(j.r + 1) : "",
+				side: "bottom",
+				children: j && /* @__PURE__ */ D("form", {
+					className: "piq-quick-edit",
+					onSubmit: (e) => {
+						e.preventDefault(), H();
+					},
+					children: [t.filter((e) => e.editable !== !1).map((e) => /* @__PURE__ */ E(r, {
+						label: e.label,
+						inputMode: e.numeric ? "decimal" : void 0,
+						value: j.values[e.key] ?? "",
+						onChange: (t) => M({
+							...j,
+							values: {
+								...j.values,
+								[e.key]: e.numeric && t.target.value !== "" ? Number(t.target.value) : t.target.value
+							}
+						})
+					}, e.key)), /* @__PURE__ */ E("div", {
+						className: "piq-quick-edit__actions",
+						children: /* @__PURE__ */ E(o, {
+							type: "submit",
+							children: h
+						})
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/WorkQueue.jsx
+var Ve = [
+	[
+		"J",
+		"Next item",
+		"next"
+	],
+	[
+		"K",
+		"Previous item",
+		"previous"
+	],
+	[
+		"A",
+		"Approve",
+		"approve"
+	],
+	[
+		"R",
+		"Reject",
+		"reject"
+	]
+];
+function He({ items: e = [], index: n = 0, onIndexChange: r, onApprove: i, onReject: a, onAssign: c, people: u = [], title: d = "Review queue", emptyTitle: f = "Nothing to review", emptyText: p = "New items will appear here.", className: m }) {
+	let [g, _] = w(!0), [v, x] = w(!1), [S, T] = w(""), [O, k] = w(!1), [A, j] = w(!1), M = C(null), N = b(), P = Math.min(Math.max(n, 0), Math.max(e.length - 1, 0)), F = e[P], I = (t) => {
+		t >= 0 && t < e.length && r?.(t);
+	}, L = {
+		next: () => I(P + 1),
+		previous: () => I(P - 1),
+		approve: () => F && i?.(F),
+		reject: () => F && x(!0)
+	};
+	return y(() => {
+		if (!g || !F) return;
+		let e = (e) => {
+			if (e.ctrlKey || e.metaKey || e.altKey || e.defaultPrevented || e.target.closest?.("input, textarea, select, [contenteditable], dialog[open]")) return;
+			let t = Ve.find(([t]) => t.toLowerCase() === e.key.toLowerCase());
+			t && (e.preventDefault(), L[t[2]]());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}), e.length ? /* @__PURE__ */ D("section", {
+		className: `piq-queue${m ? ` ${m}` : ""}`,
+		"aria-label": d,
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "piq-queue__bar",
+				children: [
+					/* @__PURE__ */ E("p", {
+						className: "piq-queue__position",
+						"aria-live": "polite",
+						children: `${P + 1} of ${e.length}`
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "piq-queue__nav",
+						children: [/* @__PURE__ */ E(o, {
+							variant: "secondary",
+							size: "sm",
+							disabled: P === 0,
+							onClick: L.previous,
+							children: "Previous"
+						}), /* @__PURE__ */ E(o, {
+							variant: "secondary",
+							size: "sm",
+							disabled: P === e.length - 1,
+							onClick: L.next,
+							children: "Next"
+						})]
+					}),
+					/* @__PURE__ */ E(o, {
+						variant: "text",
+						size: "sm",
+						"aria-haspopup": "dialog",
+						onClick: () => j(!0),
+						children: "Keyboard shortcuts"
+					})
+				]
+			}),
+			/* @__PURE__ */ D("article", {
+				className: "piq-queue__item",
+				"aria-labelledby": `${N}-t`,
+				children: [/* @__PURE__ */ E("h2", {
+					id: `${N}-t`,
+					className: "piq-queue__title",
+					children: F.title
+				}), F.content]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "piq-queue__actions",
+				children: [
+					/* @__PURE__ */ E(o, {
+						onClick: L.approve,
+						children: "Approve"
+					}),
+					/* @__PURE__ */ E(o, {
+						variant: "secondary",
+						onClick: L.reject,
+						children: "Reject"
+					}),
+					u.length > 0 && /* @__PURE__ */ E(s, {
+						label: "Assign",
+						items: u.map((e) => ({
+							label: e.label,
+							onSelect: () => c?.(F, e)
+						}))
+					})
+				]
+			}),
+			/* @__PURE__ */ E(t, {
+				open: v,
+				onClose: () => {
+					x(!1), k(!1);
+				},
+				title: `Reject ${F.title}`,
+				children: /* @__PURE__ */ D("form", {
+					className: "piq-quick-edit",
+					noValidate: !0,
+					onSubmit: (e) => {
+						if (e.preventDefault(), k(!0), !S.trim()) {
+							M.current?.querySelector("textarea")?.focus();
+							return;
+						}
+						a?.(F, S.trim()), x(!1), T(""), k(!1);
+					},
+					children: [/* @__PURE__ */ E("div", {
+						ref: M,
+						children: /* @__PURE__ */ E(h, {
+							label: "Comment",
+							required: !0,
+							"aria-required": "true",
+							value: S,
+							onChange: (e) => T(e.target.value),
+							hint: "Say why, so the author can fix it.",
+							error: O && !S.trim() ? "A comment is required to reject" : void 0
+						})
+					}), /* @__PURE__ */ D("div", {
+						className: "piq-quick-edit__actions",
+						children: [/* @__PURE__ */ E(o, {
+							type: "submit",
+							children: "Reject"
+						}), /* @__PURE__ */ E(o, {
+							variant: "secondary",
+							onClick: () => x(!1),
+							children: "Cancel"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ D(t, {
+				open: A,
+				onClose: () => j(!1),
+				title: "Keyboard shortcuts",
+				actions: /* @__PURE__ */ E(o, {
+					variant: "secondary",
+					onClick: () => j(!1),
+					children: "Close"
+				}),
+				children: [/* @__PURE__ */ D("table", {
+					className: "piq-table piq-queue__keys",
+					children: [/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [/* @__PURE__ */ E("th", {
+						scope: "col",
+						children: "Key"
+					}), /* @__PURE__ */ E("th", {
+						scope: "col",
+						children: "Action"
+					})] }) }), /* @__PURE__ */ E("tbody", { children: Ve.map(([e, t]) => /* @__PURE__ */ D("tr", { children: [/* @__PURE__ */ E("td", { children: /* @__PURE__ */ E("kbd", { children: e }) }), /* @__PURE__ */ E("td", { children: t })] }, e)) })]
+				}), /* @__PURE__ */ E(l, {
+					label: "Use single-key shortcuts",
+					checked: g,
+					onChange: (e) => _(e.target.checked)
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ E("section", {
+		className: `piq-queue${m ? ` ${m}` : ""}`,
+		"aria-label": d,
+		children: /* @__PURE__ */ E(J, {
+			kind: "empty",
+			title: f,
+			children: /* @__PURE__ */ E("p", { children: p })
+		})
+	});
+}
+//#endregion
+//#region src/patterns/ImportExport.jsx
+var Ue = [
+	"Upload",
+	"Map columns",
+	"Validate",
+	"Preview",
+	"Import"
+];
+function We({ title: e = "Import records", onFile: t, columns: r = [], fields: i = [], onMap: a, errors: s = [], failedRowsHref: l, preview: u, onCommit: d, result: f, accept: p = ".csv,.xlsx", className: m }) {
+	let [h, g] = w(0), [_, v] = w(null), [y, x] = w({}), [S, T] = w(!1), O = C(null), k = b(), A = (e) => {
+		e && (v(e), t?.(e));
+	}, j = f ? Ue.length : h, M;
+	return f ? M = /* @__PURE__ */ E("div", {
+		className: "piq-import__result",
+		role: "status",
+		children: f
+	}) : h === 0 ? M = /* @__PURE__ */ D("div", {
+		className: `piq-import__drop${S ? " is-over" : ""}`,
+		onDragOver: (e) => {
+			e.preventDefault(), T(!0);
+		},
+		onDragLeave: () => T(!1),
+		onDrop: (e) => {
+			e.preventDefault(), T(!1), A(e.dataTransfer?.files?.[0]);
+		},
+		children: [
+			/* @__PURE__ */ E(n, { name: "upload" }),
+			/* @__PURE__ */ E("input", {
+				ref: O,
+				id: `${k}-file`,
+				type: "file",
+				accept: p,
+				className: "piq-visually-hidden",
+				onChange: (e) => A(e.target.files?.[0])
+			}),
+			/* @__PURE__ */ E(o, {
+				variant: "secondary",
+				onClick: () => O.current?.click(),
+				children: "Choose a file"
+			}),
+			/* @__PURE__ */ E("p", {
+				className: "piq-import__hint",
+				children: "or drop it here"
+			}),
+			_ && /* @__PURE__ */ E("p", {
+				className: "piq-import__file",
+				children: _.name
+			})
+		]
+	}) : h === 1 ? M = /* @__PURE__ */ E("div", {
+		className: "piq-import__mapping",
+		children: r.map((e) => /* @__PURE__ */ E(c, {
+			label: `File column “${e}”`,
+			placeholder: "Choose a field",
+			value: y[e] ?? "",
+			options: [...i, {
+				value: "__skip",
+				label: "Don't import"
+			}],
+			onChange: (t) => x({
+				...y,
+				[e]: t.target.value
+			})
+		}, e))
+	}) : h === 2 ? M = s.length ? /* @__PURE__ */ D("div", {
+		className: "piq-import__errors",
+		children: [
+			/* @__PURE__ */ E("p", { children: `${s.length} ${s.length === 1 ? "row needs" : "rows need"} fixing. They will be skipped unless you fix the file and upload it again.` }),
+			/* @__PURE__ */ E("ul", { children: s.map((e, t) => /* @__PURE__ */ D("li", { children: [/* @__PURE__ */ E("strong", { children: `Row ${e.row}` }), `: ${e.message}`] }, t)) }),
+			l && /* @__PURE__ */ D("a", {
+				className: "piq-btn piq-btn--secondary",
+				href: l,
+				download: !0,
+				children: [/* @__PURE__ */ E(n, { name: "download" }), "Download the failed rows"]
+			})
+		]
+	}) : /* @__PURE__ */ E("p", { children: "Every row is ready to import." }) : (h === 3 || h === 4) && (M = u ? /* @__PURE__ */ E("div", {
+		className: "piq-table-wrap",
+		children: /* @__PURE__ */ D("table", {
+			className: "piq-table",
+			children: [
+				/* @__PURE__ */ E("caption", {
+					className: "piq-visually-hidden",
+					children: "Rows to import"
+				}),
+				/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ E("tr", { children: u.columns.map((e) => /* @__PURE__ */ E("th", {
+					scope: "col",
+					children: e.label
+				}, e.key)) }) }),
+				/* @__PURE__ */ E("tbody", { children: u.rows.map((e, t) => /* @__PURE__ */ E("tr", { children: u.columns.map((t) => /* @__PURE__ */ E("td", { children: e[t.key] }, t.key)) }, t)) })
+			]
+		})
+	}) : null), /* @__PURE__ */ D("section", {
+		className: `piq-import${m ? ` ${m}` : ""}`,
+		"aria-labelledby": `${k}-h`,
+		children: [
+			/* @__PURE__ */ E("h2", {
+				id: `${k}-h`,
+				className: "piq-import__title",
+				children: e
+			}),
+			/* @__PURE__ */ E("ol", {
+				className: "piq-wizard__steps piq-import__steps",
+				"aria-label": "Steps",
+				children: Ue.map((e, t) => /* @__PURE__ */ E("li", {
+					className: "piq-wizard__step",
+					"aria-current": t === j ? "step" : void 0,
+					"data-done": t < j || void 0,
+					children: e
+				}, e))
+			}),
+			M,
+			!f && /* @__PURE__ */ D("div", {
+				className: "piq-wizard__actions",
+				children: [
+					h < 3 && /* @__PURE__ */ E(o, {
+						disabled: h === 0 && !_,
+						onClick: () => {
+							h === 1 && a?.(y), g(h + 1);
+						},
+						children: "Continue"
+					}),
+					h === 3 && /* @__PURE__ */ E(o, {
+						onClick: () => {
+							g(4), d?.();
+						},
+						children: `Import ${u?.rows.length ?? ""} rows`.replace("  ", " ")
+					}),
+					h > 0 && h < 4 && /* @__PURE__ */ E(o, {
+						variant: "secondary",
+						onClick: () => g(h - 1),
+						children: "Back"
+					})
+				]
+			})
+		]
+	});
+}
+function Ge({ open: e = !1, onClose: n, title: r = "Export", formats: s = [], fields: c = [], onExport: l, progress: u = null, ready: f, exportLabel: p = "Export", className: m }) {
+	let [h, g] = w(s[0]?.value), [_, v] = w(c.map((e) => e.value)), y = (e, t) => v((n) => t ? [...n, e] : n.filter((t) => t !== e));
+	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D(t, {
+		open: e,
+		onClose: n,
+		title: r,
+		className: m,
+		actions: /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(o, {
+			disabled: !_.length,
+			onClick: () => l?.({
+				format: h,
+				fields: _
+			}),
+			children: p
+		}), /* @__PURE__ */ E(o, {
+			variant: "secondary",
+			onClick: () => n?.(),
+			children: "Close"
+		})] }),
+		children: [
+			/* @__PURE__ */ E(d, {
+				label: "Format",
+				name: "export-format",
+				options: s,
+				value: h,
+				onChange: (e) => g(e?.target ? e.target.value : e)
+			}),
+			/* @__PURE__ */ D("fieldset", {
+				className: "piq-export__fields",
+				children: [/* @__PURE__ */ E("legend", {
+					className: "piq-field__label",
+					children: "Fields"
+				}), c.map((e) => /* @__PURE__ */ E(i, {
+					label: e.label,
+					checked: _.includes(e.value),
+					onChange: (t) => y(e.value, t.target.checked)
+				}, e.value))]
+			}),
+			u != null && /* @__PURE__ */ E(a, {
+				label: "Exporting",
+				value: u,
+				showValue: !0
+			})
+		]
+	}), /* @__PURE__ */ D("div", {
+		className: "piq-export__status",
+		role: "status",
+		children: [u != null && !e && /* @__PURE__ */ E(a, {
+			label: "Exporting",
+			value: u,
+			showValue: !0
+		}), f && /* @__PURE__ */ D("p", {
+			className: "piq-export__ready",
+			children: ["Your export is ready. ", /* @__PURE__ */ E("a", {
+				href: f.href,
+				download: !0,
+				children: f.label ?? "Download it"
+			})]
+		})]
+	})] });
+}
+//#endregion
+//#region src/patterns/Planning.jsx
+function Ke({ label: e, columns: t = [], cards: n = [], onMove: r, moveLabel: i = "Move to", className: a }) {
+	let o = C(null), c = W(o), [l, u] = w(null), d = (e) => n.filter((t) => t.status === e), f = (e) => `${e.title} (${d(e.id).length})`, p = (e) => /* @__PURE__ */ D("li", {
+		className: "piq-board__card",
+		draggable: !0,
+		onDragStart: (t) => {
+			u(e.id), t.dataTransfer?.setData("text/plain", e.id);
+		},
+		onDragEnd: () => u(null),
+		children: [
+			/* @__PURE__ */ E("p", {
+				className: "piq-board__card-title",
+				children: e.title
+			}),
+			e.content,
+			/* @__PURE__ */ E(s, {
+				label: i,
+				size: "sm",
+				variant: "text",
+				buttonLabel: `${i}: ${e.title}`,
+				items: t.filter((t) => t.id !== e.status).map((t) => ({
+					label: t.title,
+					onSelect: () => r?.(e, t.id)
+				}))
+			})
+		]
+	}, e.id), h = (e, t = !0) => /* @__PURE__ */ D("section", {
+		className: "piq-board__column",
+		"aria-label": f(e),
+		onDragOver: (e) => e.preventDefault(),
+		onDrop: (t) => {
+			t.preventDefault();
+			let i = t.dataTransfer?.getData("text/plain") || l, a = n.find((e) => e.id === i);
+			a && a.status !== e.id && r?.(a, e.id), u(null);
+		},
+		children: [t && /* @__PURE__ */ E("h3", {
+			className: "piq-board__heading",
+			children: f(e)
+		}), /* @__PURE__ */ E("ul", {
+			className: "piq-board__cards",
+			children: d(e.id).map(p)
+		})]
+	}, e.id);
+	return /* @__PURE__ */ E("div", {
+		ref: o,
+		className: `piq-board${a ? ` ${a}` : ""}`,
+		role: "region",
+		"aria-label": e,
+		"data-size": c,
+		children: G(c, "medium") ? /* @__PURE__ */ E("div", {
+			className: "piq-board__columns",
+			children: t.map((e) => h(e))
+		}) : /* @__PURE__ */ E(m, {
+			label: e,
+			tabs: t.map((e) => ({
+				id: e.id,
+				label: e.title,
+				count: d(e.id).length,
+				panel: h(e, !1)
+			}))
+		})
+	});
+}
+var qe = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), Je = (e, t) => e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), Q = (e, t) => new Date(e.getFullYear(), e.getMonth(), e.getDate() + t), $ = (e) => `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+function Ye({ label: e = "Calendar", events: t = [], date: n = /* @__PURE__ */ new Date(), view: r, onViewChange: i, locale: a, className: o }) {
+	let s = C(null), c = C(null), l = W(s), [u, d] = w("month"), f = r ?? u, p = qe(new Date(n)), [m, h] = w(p), g = b(), _ = new Intl.DateTimeFormat(a, {
+		hour: "2-digit",
+		minute: "2-digit"
+	}), v = new Intl.DateTimeFormat(a, {
+		weekday: "long",
+		day: "numeric",
+		month: "long"
+	}), y = new Intl.DateTimeFormat(a, { weekday: "short" }), x = t.map((e) => ({
+		...e,
+		at: new Date(e.start)
+	})).sort((e, t) => e.at - t.at), S = (e) => x.filter((t) => Je(t.at, e)), T = (e) => /* @__PURE__ */ D("li", {
+		className: "piq-calendar__event",
+		children: [
+			/* @__PURE__ */ E("time", {
+				dateTime: e.at.toISOString(),
+				children: _.format(e.at)
+			}),
+			" ",
+			e.title
+		]
+	}, e.id), O = (e) => {
+		r === void 0 && d(e), i?.(e);
+	};
+	if (!G(l, "medium")) {
+		let t = [...new Set(x.map((e) => $(e.at)))];
+		return /* @__PURE__ */ E("section", {
+			ref: s,
+			className: `piq-calendar piq-calendar--agenda${o ? ` ${o}` : ""}`,
+			"aria-label": e,
+			"data-size": l,
+			children: t.map((e) => {
+				let t = /* @__PURE__ */ new Date(`${e}T00:00`);
+				return /* @__PURE__ */ D("div", {
+					className: "piq-calendar__agenda-day",
+					children: [/* @__PURE__ */ E("h3", {
+						className: "piq-calendar__date",
+						children: v.format(t)
+					}), /* @__PURE__ */ E("ul", {
+						className: "piq-calendar__events",
+						children: S(t).map(T)
+					})]
+				}, e);
+			})
+		});
+	}
+	let k = new Date(p.getFullYear(), p.getMonth(), 1), A = Q(k, -((k.getDay() + 6) % 7)), j = Array.from({ length: 6 }, (e, t) => Array.from({ length: 7 }, (e, n) => Q(A, t * 7 + n))), M = (e) => {
+		h(e), requestAnimationFrame(() => c.current?.querySelector(`[data-date="${$(e)}"]`)?.focus());
+	};
+	function N(e) {
+		let t = {
+			ArrowRight: 1,
+			ArrowLeft: -1,
+			ArrowDown: 7,
+			ArrowUp: -7
+		}[e.key];
+		t ? (e.preventDefault(), M(Q(m, t))) : e.key === "Home" ? (e.preventDefault(), M(Q(m, -((m.getDay() + 6) % 7)))) : e.key === "End" && (e.preventDefault(), M(Q(m, 6 - (m.getDay() + 6) % 7)));
+	}
+	let P = Q(p, -((p.getDay() + 6) % 7));
+	return /* @__PURE__ */ D("section", {
+		ref: s,
+		className: `piq-calendar${o ? ` ${o}` : ""}`,
+		"aria-label": e,
+		"data-size": l,
+		children: [
+			/* @__PURE__ */ E("div", {
+				className: "piq-calendar__views",
+				role: "radiogroup",
+				"aria-label": "View",
+				children: [
+					"month",
+					"week",
+					"day"
+				].map((e) => /* @__PURE__ */ E("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": f === e,
+					className: "piq-calendar__view",
+					onClick: () => O(e),
+					children: e[0].toUpperCase() + e.slice(1)
+				}, e))
+			}),
+			f === "month" && /* @__PURE__ */ D("table", {
+				ref: c,
+				role: "grid",
+				"aria-label": new Intl.DateTimeFormat(a, {
+					month: "long",
+					year: "numeric"
+				}).format(p),
+				className: "piq-calendar__month",
+				onKeyDown: N,
+				children: [/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ E("tr", { children: j[0].map((e) => /* @__PURE__ */ E("th", {
+					scope: "col",
+					children: y.format(e)
+				}, $(e))) }) }), /* @__PURE__ */ E("tbody", { children: j.map((e, t) => /* @__PURE__ */ E("tr", { children: e.map((e) => /* @__PURE__ */ D("td", {
+					role: "gridcell",
+					"data-date": $(e),
+					tabIndex: Je(e, m) ? 0 : -1,
+					"aria-label": v.format(e),
+					"data-outside": e.getMonth() !== p.getMonth() || void 0,
+					className: "piq-calendar__day",
+					onFocus: () => h(e),
+					children: [/* @__PURE__ */ E("span", {
+						className: "piq-calendar__number",
+						"aria-hidden": "true",
+						children: e.getDate()
+					}), /* @__PURE__ */ E("ul", {
+						className: "piq-calendar__events",
+						children: S(e).map(T)
+					})]
+				}, $(e))) }, t)) })]
+			}),
+			f === "week" && /* @__PURE__ */ E("ol", {
+				className: "piq-calendar__week",
+				"aria-label": `Week of ${v.format(P)}`,
+				children: Array.from({ length: 7 }, (e, t) => Q(P, t)).map((e) => /* @__PURE__ */ D("li", {
+					className: "piq-calendar__week-day",
+					children: [/* @__PURE__ */ E("h3", {
+						className: "piq-calendar__date",
+						children: v.format(e)
+					}), /* @__PURE__ */ E("ul", {
+						className: "piq-calendar__events",
+						children: S(e).map(T)
+					})]
+				}, $(e)))
+			}),
+			f === "day" && /* @__PURE__ */ D("div", {
+				className: "piq-calendar__single",
+				id: `${g}-day`,
+				children: [/* @__PURE__ */ E("h3", {
+					className: "piq-calendar__date",
+					children: v.format(p)
+				}), /* @__PURE__ */ E("ul", {
+					className: "piq-calendar__events",
+					children: S(p).map(T)
+				})]
+			})
+		]
+	});
+}
+var Xe = (e) => e >= 1048576 ? `${(e / 1048576).toFixed(1)} MB` : e >= 1024 ? `${Math.round(e / 1024)} KB` : `${e} B`;
+function Ze({ label: e = "Attachments", files: t = [], onUpload: r, onRemove: i, accept: a, uploadLabel: s = "Upload a file", className: c }) {
+	let l = C(null), [u, d] = w(!1), [f, p] = w(null);
+	return /* @__PURE__ */ D("section", {
+		className: `piq-attachments${c ? ` ${c}` : ""}`,
+		"aria-label": e,
+		onDragOver: (e) => {
+			e.preventDefault(), d(!0);
+		},
+		onDragLeave: () => d(!1),
+		onDrop: (e) => {
+			e.preventDefault(), d(!1);
+			let t = e.dataTransfer?.files?.[0];
+			t && r?.(t);
+		},
+		"data-over": u || void 0,
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "piq-attachments__bar",
+				children: [
+					/* @__PURE__ */ E("input", {
+						ref: l,
+						type: "file",
+						accept: a,
+						className: "piq-visually-hidden",
+						tabIndex: -1,
+						"aria-hidden": "true",
+						onChange: (e) => {
+							let t = e.target.files?.[0];
+							t && r?.(t), e.target.value = "";
+						}
+					}),
+					/* @__PURE__ */ D(o, {
+						variant: "secondary",
+						onClick: () => l.current?.click(),
+						children: [/* @__PURE__ */ E(n, { name: "upload" }), s]
+					}),
+					/* @__PURE__ */ E("span", {
+						className: "piq-attachments__hint",
+						children: "or drop a file here"
+					})
+				]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-table-wrap",
+				children: /* @__PURE__ */ D("table", {
+					className: "piq-table piq-attachments__list",
+					children: [
+						/* @__PURE__ */ E("caption", {
+							className: "piq-visually-hidden",
+							children: e
+						}),
+						/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Name"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Type"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								className: "piq-num",
+								children: "Size"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Version"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: /* @__PURE__ */ E("span", {
+									className: "piq-visually-hidden",
+									children: "Actions"
+								})
+							})
+						] }) }),
+						/* @__PURE__ */ E("tbody", { children: t.map((e) => /* @__PURE__ */ D("tr", { children: [
+							/* @__PURE__ */ E("td", { children: /* @__PURE__ */ E("a", {
+								href: e.href,
+								children: e.name
+							}) }),
+							/* @__PURE__ */ E("td", { children: e.type }),
+							/* @__PURE__ */ E("td", {
+								className: "piq-num",
+								children: Xe(e.size ?? 0)
+							}),
+							/* @__PURE__ */ E("td", { children: e.version }),
+							/* @__PURE__ */ E("td", { children: /* @__PURE__ */ E(o, {
+								variant: "text",
+								size: "sm",
+								"aria-label": `Remove ${e.name}`,
+								onClick: () => p(e),
+								children: /* @__PURE__ */ E(n, { name: "delete" })
+							}) })
+						] }, e.id)) })
+					]
+				})
+			}),
+			/* @__PURE__ */ E(Z, {
+				open: !!f,
+				objectName: f?.name,
+				title: f ? `Remove ${f.name}?` : "",
+				confirmLabel: "Remove",
+				consequence: "The file is removed from this record for everyone.",
+				onCancel: () => p(null),
+				onConfirm: () => {
+					i?.(f), p(null);
+				}
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/Analysis.jsx
+function Qe({ param: e = "drill" } = {}) {
+	let t = () => {
+		let t = new URLSearchParams(window.location.search).get(e);
+		return t ? t.split("/") : [];
+	}, [n, r] = w(t);
+	y(() => {
+		let e = () => r(t());
+		return window.addEventListener("popstate", e), () => window.removeEventListener("popstate", e);
+	}, [e]);
+	let i = (t) => {
+		let n = new URLSearchParams(window.location.search);
+		t.length ? n.set(e, t.join("/")) : n.delete(e), window.history.pushState({ [e]: t }, "", `${window.location.pathname}${n.toString() ? `?${n}` : ""}${window.location.hash}`), r(t);
+	};
+	return {
+		path: n,
+		drill: (e) => i([...n, e]),
+		goTo: (e) => i(n.slice(0, e))
+	};
+}
+function $e({ trail: e = [], onSelect: t, label: n = "Drill-down", children: r, className: i }) {
+	return /* @__PURE__ */ D("section", {
+		className: `piq-drill${i ? ` ${i}` : ""}`,
+		"aria-label": n,
+		children: [/* @__PURE__ */ E("nav", {
+			"aria-label": "Levels",
+			className: "piq-breadcrumbs",
+			children: /* @__PURE__ */ E("ol", {
+				className: "piq-breadcrumbs__list piq-drill__trail",
+				children: e.map((n, r) => /* @__PURE__ */ E("li", {
+					className: "piq-breadcrumbs__item",
+					children: r === e.length - 1 ? /* @__PURE__ */ E("span", {
+						"aria-current": "location",
+						children: n.label
+					}) : /* @__PURE__ */ E("a", {
+						href: "#",
+						onClick: (e) => {
+							e.preventDefault(), t?.(r);
+						},
+						children: n.label
+					})
+				}, r))
+			})
+		}), r]
+	});
+}
+function et({ label: e, current: t, previous: r, comparison: i = "on the previous period", format: a = (e) => String(e), currentLabel: o = "This period", previousLabel: s = "Previous", className: c }) {
+	let l = t - r, u = r ? Math.round(Math.abs(l) / Math.abs(r) * 100) : null, d = l === 0 ? `no change ${i}` : `${l > 0 ? "up" : "down"}${u == null ? "" : ` ${u}%`} ${i}`;
+	return /* @__PURE__ */ D("section", {
+		className: `piq-comparison${c ? ` ${c}` : ""}`,
+		"aria-label": e,
+		children: [
+			/* @__PURE__ */ E("p", {
+				className: "piq-comparison__label",
+				children: e
+			}),
+			/* @__PURE__ */ D("dl", {
+				className: "piq-comparison__values",
+				children: [
+					/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("dt", { children: o }), /* @__PURE__ */ E("dd", {
+						className: "piq-comparison__current",
+						children: a(t)
+					})] }),
+					/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("dt", { children: s }), /* @__PURE__ */ E("dd", { children: a(r) })] }),
+					/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("dt", { children: "Difference" }), /* @__PURE__ */ E("dd", {
+						className: "piq-comparison__diff",
+						children: `${l > 0 ? "+" : l < 0 ? "−" : "±"}${a(Math.abs(l))}`
+					})] })
+				]
+			}),
+			/* @__PURE__ */ D("p", {
+				className: "piq-comparison__words",
+				"data-direction": l > 0 ? "up" : l < 0 ? "down" : "flat",
+				children: [/* @__PURE__ */ E(n, {
+					name: "arrow-right",
+					className: "piq-comparison__arrow"
+				}), d]
+			})
+		]
+	});
+}
+function tt({ title: e, logo: t, runDate: n, locale: r, sections: i = [], children: a, className: o }) {
+	let s = C(null);
+	y(() => {
+		let e = null, t = null, n = () => {
+			e = s.current?.closest("[data-theme]") ?? document.documentElement, t = e.getAttribute("data-appearance"), e.setAttribute("data-appearance", "light");
+		}, r = () => {
+			e &&= (t == null ? e.removeAttribute("data-appearance") : e.setAttribute("data-appearance", t), null);
+		};
+		return window.addEventListener("beforeprint", n), window.addEventListener("afterprint", r), () => {
+			window.removeEventListener("beforeprint", n), window.removeEventListener("afterprint", r);
+		};
+	}, []);
+	let c = n ? new Intl.DateTimeFormat(r, {
+		dateStyle: "long",
+		timeStyle: "short"
+	}).format(new Date(n)) : null;
+	return /* @__PURE__ */ D("article", {
+		ref: s,
+		className: `piq-print${o ? ` ${o}` : ""}`,
+		children: [
+			/* @__PURE__ */ D("header", {
+				className: "piq-print__header",
+				children: [
+					t && /* @__PURE__ */ E("div", {
+						className: "piq-print__logo",
+						children: t
+					}),
+					/* @__PURE__ */ E("h1", {
+						className: "piq-print__title",
+						children: e
+					}),
+					c && /* @__PURE__ */ D("p", {
+						className: "piq-print__date",
+						children: ["Run ", /* @__PURE__ */ E("time", {
+							dateTime: new Date(n).toISOString(),
+							children: c
+						})]
+					})
+				]
+			}),
+			i.map((e) => /* @__PURE__ */ D("section", {
+				className: "piq-print__section",
+				"aria-label": e.title,
+				children: [/* @__PURE__ */ E("h2", {
+					className: "piq-print__section-title",
+					children: e.title
+				}), e.content]
+			}, e.id)),
+			a
+		]
+	});
+}
+function nt({ label: e, groups: t = [], columns: r = [], value: i = () => 0, format: a = (e) => String(e), totalLabel: o = "Total", className: s }) {
+	let [c, l] = w({}), [u, d] = w(t[0]?.id), f = C(null), p = (e, t) => e.reduce((e, n) => e + (Number(i(n, t)) || 0), 0), m = t.flatMap((e) => [{
+		id: e.id,
+		group: e
+	}, ...c[e.id] ? e.rows.map((t) => ({
+		id: t.id,
+		row: t,
+		parent: e.id
+	})) : []]), h = (e) => {
+		d(e), requestAnimationFrame(() => f.current?.querySelector(`[data-row="${e}"]`)?.focus());
+	};
+	function _(e) {
+		let t = m.findIndex((e) => e.id === u), n = m[t];
+		n && (e.key === "ArrowDown" && t < m.length - 1 ? (e.preventDefault(), h(m[t + 1].id)) : e.key === "ArrowUp" && t > 0 ? (e.preventDefault(), h(m[t - 1].id)) : e.key === "ArrowRight" && n.group ? (e.preventDefault(), c[n.id] ? n.group.rows[0] && h(n.group.rows[0].id) : l({
+			...c,
+			[n.id]: !0
+		})) : e.key === "ArrowLeft" && (e.preventDefault(), n.group && c[n.id] ? l({
+			...c,
+			[n.id]: !1
+		}) : n.parent && h(n.parent)));
+	}
+	let v = t.flatMap((e) => e.rows.map((e) => e.id));
+	return /* @__PURE__ */ E("div", {
+		className: "piq-table-wrap",
+		children: /* @__PURE__ */ D("table", {
+			role: "treegrid",
+			"aria-label": e,
+			className: `piq-table piq-pivot${s ? ` ${s}` : ""}`,
+			children: [
+				/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [
+					/* @__PURE__ */ E("th", {
+						scope: "col",
+						children: /* @__PURE__ */ E("span", {
+							className: "piq-visually-hidden",
+							children: "Row"
+						})
+					}),
+					r.map((e) => /* @__PURE__ */ E("th", {
+						scope: "col",
+						className: "piq-num",
+						children: e.label
+					}, e.key)),
+					/* @__PURE__ */ E("th", {
+						scope: "col",
+						className: "piq-num",
+						children: o
+					})
+				] }) }),
+				/* @__PURE__ */ E("tbody", {
+					ref: f,
+					onKeyDown: _,
+					children: t.map((e) => {
+						let t = e.rows.map((e) => e.id);
+						return /* @__PURE__ */ D(g, { children: [/* @__PURE__ */ D("tr", {
+							"data-row": e.id,
+							"aria-level": 1,
+							"aria-expanded": !!c[e.id],
+							tabIndex: u === e.id ? 0 : -1,
+							className: "piq-pivot__group",
+							onFocus: () => d(e.id),
+							onClick: () => l({
+								...c,
+								[e.id]: !c[e.id]
+							}),
+							children: [
+								/* @__PURE__ */ D("th", {
+									scope: "row",
+									role: "rowheader",
+									children: [
+										/* @__PURE__ */ E(n, {
+											name: c[e.id] ? "chevron-down" : "chevron-right",
+											className: "piq-pivot__toggle"
+										}),
+										e.label,
+										" ",
+										/* @__PURE__ */ E("span", {
+											className: "piq-pivot__subtotal",
+											children: "subtotal"
+										})
+									]
+								}),
+								r.map((e) => /* @__PURE__ */ E("td", {
+									role: "gridcell",
+									className: "piq-num",
+									children: a(p(t, e.key))
+								}, e.key)),
+								/* @__PURE__ */ E("td", {
+									role: "gridcell",
+									className: "piq-num",
+									children: a(r.reduce((e, n) => e + p(t, n.key), 0))
+								})
+							]
+						}), c[e.id] && e.rows.map((e) => /* @__PURE__ */ D("tr", {
+							"data-row": e.id,
+							"aria-level": 2,
+							tabIndex: u === e.id ? 0 : -1,
+							className: "piq-pivot__row",
+							onFocus: () => d(e.id),
+							children: [
+								/* @__PURE__ */ E("th", {
+									scope: "row",
+									role: "rowheader",
+									className: "piq-pivot__child",
+									children: e.label
+								}),
+								r.map((t) => /* @__PURE__ */ E("td", {
+									role: "gridcell",
+									className: "piq-num",
+									children: a(Number(i(e.id, t.key)) || 0)
+								}, t.key)),
+								/* @__PURE__ */ E("td", {
+									role: "gridcell",
+									className: "piq-num",
+									children: a(r.reduce((t, n) => t + (Number(i(e.id, n.key)) || 0), 0))
+								})
+							]
+						}, e.id))] }, e.id);
+					})
+				}),
+				/* @__PURE__ */ E("tfoot", { children: /* @__PURE__ */ D("tr", {
+					className: "piq-pivot__total",
+					children: [
+						/* @__PURE__ */ E("th", {
+							scope: "row",
+							children: o
+						}),
+						r.map((e) => /* @__PURE__ */ E("td", {
+							className: "piq-num",
+							children: a(p(v, e.key))
+						}, e.key)),
+						/* @__PURE__ */ E("td", {
+							className: "piq-num",
+							children: a(r.reduce((e, t) => e + p(v, t.key), 0))
+						})
+					]
+				}) })
+			]
+		})
+	});
+}
+function rt({ measures: e = [], groupings: t = [], preview: n = () => [], onSave: a, saveLabel: s = "Save report", className: c }) {
+	let [l, u] = w([]), [d, f] = w([]), [p, m] = w(""), [h, g] = w(!1), _ = (e, t, n) => e((e) => n ? [...e, t] : e.filter((e) => e !== t)), v = [...t.filter((e) => d.includes(e.value)), ...e.filter((e) => l.includes(e.value))], y = v.length ? n({
+		measures: l,
+		groupings: d
+	}) : [];
+	return /* @__PURE__ */ D("form", {
+		className: `piq-report-builder${c ? ` ${c}` : ""}`,
+		noValidate: !0,
+		onSubmit: (e) => {
+			e.preventDefault(), g(!0), p.trim() && a?.({
+				name: p.trim(),
+				measures: l,
+				groupings: d
+			});
+		},
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "piq-report-builder__choices",
+				children: [/* @__PURE__ */ D("fieldset", {
+					className: "piq-export__fields",
+					children: [/* @__PURE__ */ E("legend", {
+						className: "piq-field__label",
+						children: "Measures"
+					}), e.map((e) => /* @__PURE__ */ E(i, {
+						label: e.label,
+						checked: l.includes(e.value),
+						onChange: (t) => _(u, e.value, t.target.checked)
+					}, e.value))]
+				}), /* @__PURE__ */ D("fieldset", {
+					className: "piq-export__fields",
+					children: [/* @__PURE__ */ E("legend", {
+						className: "piq-field__label",
+						children: "Group by"
+					}), t.map((e) => /* @__PURE__ */ E(i, {
+						label: e.label,
+						checked: d.includes(e.value),
+						onChange: (t) => _(f, e.value, t.target.checked)
+					}, e.value))]
+				})]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-table-wrap",
+				"aria-live": "polite",
+				children: /* @__PURE__ */ D("table", {
+					className: "piq-table piq-report-builder__preview",
+					children: [
+						/* @__PURE__ */ E("caption", {
+							className: "piq-visually-hidden",
+							children: "Preview"
+						}),
+						/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ E("tr", { children: v.map((e) => /* @__PURE__ */ E("th", {
+							scope: "col",
+							children: e.label
+						}, e.value)) }) }),
+						/* @__PURE__ */ E("tbody", { children: y.map((e, t) => /* @__PURE__ */ E("tr", { children: v.map((t) => /* @__PURE__ */ E("td", { children: e[t.value] }, t.value)) }, t)) })
+					]
+				})
+			}),
+			/* @__PURE__ */ E(r, {
+				label: "Report name",
+				required: !0,
+				"aria-required": "true",
+				value: p,
+				onChange: (e) => m(e.target.value),
+				error: h && !p.trim() ? "Enter a name for the report" : void 0
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-wizard__actions",
+				children: /* @__PURE__ */ E(o, {
+					type: "submit",
+					children: s
+				})
+			})
+		]
+	});
+}
+function it({ items: e = [], onAdd: i, onPause: a, onDelete: s, title: c = "Subscriptions", className: l }) {
+	let [u, f] = w(!1), [p, m] = w(null), [h, g] = w({
+		kind: "delivery",
+		name: "",
+		frequency: "Weekly",
+		threshold: "",
+		recipients: ""
+	}), _ = b();
+	return /* @__PURE__ */ D("section", {
+		className: `piq-subscriptions${l ? ` ${l}` : ""}`,
+		"aria-labelledby": `${_}-h`,
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "piq-subscriptions__head",
+				children: [/* @__PURE__ */ E("h2", {
+					id: `${_}-h`,
+					className: "piq-import__title",
+					children: c
+				}), /* @__PURE__ */ D(o, {
+					variant: "secondary",
+					onClick: () => f(!0),
+					children: [/* @__PURE__ */ E(n, { name: "add" }), "Add"]
+				})]
+			}),
+			/* @__PURE__ */ E("ul", {
+				className: "piq-subscriptions__list",
+				children: e.map((e) => /* @__PURE__ */ D("li", {
+					className: "piq-subscriptions__item",
+					children: [/* @__PURE__ */ D("div", {
+						className: "piq-subscriptions__text",
+						children: [/* @__PURE__ */ D("p", {
+							className: "piq-subscriptions__name",
+							children: [e.name, e.paused && /* @__PURE__ */ E("strong", {
+								className: "piq-subscriptions__paused",
+								children: " Paused"
+							})]
+						}), /* @__PURE__ */ D("p", {
+							className: "piq-subscriptions__detail",
+							children: [
+								e.kind === "alert" ? `Alert when ${e.threshold}` : e.frequency,
+								" · ",
+								`To ${e.recipients.join(", ")}`
+							]
+						})]
+					}), /* @__PURE__ */ D("div", {
+						className: "piq-subscriptions__actions",
+						children: [!e.paused && /* @__PURE__ */ E(o, {
+							variant: "text",
+							size: "sm",
+							onClick: () => a?.(e),
+							"aria-label": `Pause ${e.name}`,
+							children: "Pause"
+						}), /* @__PURE__ */ E(o, {
+							variant: "text",
+							size: "sm",
+							onClick: () => m(e),
+							"aria-label": `Delete ${e.name}`,
+							children: /* @__PURE__ */ E(n, { name: "delete" })
+						})]
+					})]
+				}, e.id))
+			}),
+			/* @__PURE__ */ E(t, {
+				open: u,
+				onClose: () => f(!1),
+				title: "Add a subscription",
+				children: /* @__PURE__ */ D("form", {
+					className: "piq-quick-edit",
+					onSubmit: (e) => {
+						e.preventDefault();
+						let { kind: t, name: n, frequency: r, threshold: a, recipients: o } = h;
+						i?.({
+							kind: t,
+							name: n,
+							...t === "delivery" ? { frequency: r } : { threshold: a },
+							recipients: o.split(",").map((e) => e.trim()).filter(Boolean)
+						}), f(!1);
+					},
+					children: [
+						/* @__PURE__ */ E(d, {
+							label: "Kind",
+							name: `${_}-kind`,
+							value: h.kind,
+							onChange: (e) => g({
+								...h,
+								kind: e
+							}),
+							options: [{
+								value: "delivery",
+								label: "Scheduled delivery"
+							}, {
+								value: "alert",
+								label: "Alert"
+							}]
+						}),
+						/* @__PURE__ */ E(r, {
+							label: "Name",
+							value: h.name,
+							onChange: (e) => g({
+								...h,
+								name: e.target.value
+							})
+						}),
+						h.kind === "delivery" ? /* @__PURE__ */ E(r, {
+							label: "Frequency",
+							value: h.frequency,
+							onChange: (e) => g({
+								...h,
+								frequency: e.target.value
+							})
+						}) : /* @__PURE__ */ E(r, {
+							label: "Threshold",
+							value: h.threshold,
+							onChange: (e) => g({
+								...h,
+								threshold: e.target.value
+							})
+						}),
+						/* @__PURE__ */ E(r, {
+							label: "Recipients",
+							hint: "Email addresses, separated by commas",
+							value: h.recipients,
+							onChange: (e) => g({
+								...h,
+								recipients: e.target.value
+							})
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "piq-quick-edit__actions",
+							children: [/* @__PURE__ */ E(o, {
+								type: "submit",
+								children: "Add"
+							}), /* @__PURE__ */ E(o, {
+								variant: "secondary",
+								onClick: () => f(!1),
+								children: "Cancel"
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ E(Z, {
+				open: !!p,
+				objectName: p?.name,
+				consequence: "Its recipients stop receiving it.",
+				onCancel: () => m(null),
+				onConfirm: () => {
+					s?.(p), m(null);
+				}
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/Admin.jsx
+var at = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function ot({ title: e = "Members", members: i = [], roles: a = [], onInvite: s, onRoleChange: l, className: u }) {
+	let [d, f] = w(!1), [p, m] = w(""), [h, g] = w(a[0]?.value ?? ""), [_, v] = w(!1), y = b(), x = !at.test(p.trim()), S = (e) => a.find((t) => t.value === e)?.label ?? e;
+	return /* @__PURE__ */ D("section", {
+		className: `piq-members${u ? ` ${u}` : ""}`,
+		"aria-labelledby": `${y}-h`,
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "piq-subscriptions__head",
+				children: [/* @__PURE__ */ E("h2", {
+					id: `${y}-h`,
+					className: "piq-import__title",
+					children: e
+				}), /* @__PURE__ */ D(o, {
+					onClick: () => f(!0),
+					children: [/* @__PURE__ */ E(n, { name: "add" }), "Invite"]
+				})]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-table-wrap",
+				children: /* @__PURE__ */ D("table", {
+					className: "piq-table",
+					children: [
+						/* @__PURE__ */ E("caption", {
+							className: "piq-visually-hidden",
+							children: e
+						}),
+						/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Name"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Email"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Role"
+							})
+						] }) }),
+						/* @__PURE__ */ E("tbody", { children: i.map((e) => /* @__PURE__ */ D("tr", { children: [
+							/* @__PURE__ */ E("th", {
+								scope: "row",
+								children: e.name
+							}),
+							/* @__PURE__ */ E("td", { children: e.email }),
+							/* @__PURE__ */ D("td", {
+								className: "piq-members__role",
+								children: [/* @__PURE__ */ E("span", {
+									className: "piq-members__current",
+									children: S(e.role)
+								}), /* @__PURE__ */ E(c, {
+									label: /* @__PURE__ */ E("span", {
+										className: "piq-visually-hidden",
+										children: `Change role for ${e.name}`
+									}),
+									className: "piq-members__select",
+									value: e.role,
+									options: a,
+									onChange: (t) => l?.(e, t.target.value)
+								})]
+							})
+						] }, e.id)) })
+					]
+				})
+			}),
+			/* @__PURE__ */ E(t, {
+				open: d,
+				onClose: () => f(!1),
+				title: "Invite a member",
+				children: /* @__PURE__ */ D("form", {
+					className: "piq-quick-edit",
+					noValidate: !0,
+					onSubmit: (e) => {
+						e.preventDefault(), v(!0), !x && (s?.({
+							email: p.trim(),
+							role: h
+						}), f(!1), m(""), v(!1));
+					},
+					children: [
+						/* @__PURE__ */ E(r, {
+							label: "Email address",
+							type: "email",
+							autoComplete: "email",
+							value: p,
+							onChange: (e) => m(e.target.value),
+							error: _ && x ? "Enter an email address, like name@example.com" : void 0
+						}),
+						/* @__PURE__ */ E(c, {
+							label: "Role",
+							value: h,
+							options: a,
+							onChange: (e) => g(e.target.value)
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "piq-quick-edit__actions",
+							children: [/* @__PURE__ */ E(o, {
+								type: "submit",
+								children: "Send invite"
+							}), /* @__PURE__ */ E(o, {
+								variant: "secondary",
+								onClick: () => f(!1),
+								children: "Cancel"
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+function st({ title: e = "Permissions", roles: t = [], permissions: r = [], has: i = () => !1, yes: a = "Yes", no: o = "No", className: s }) {
+	return /* @__PURE__ */ E("div", {
+		className: "piq-table-wrap",
+		children: /* @__PURE__ */ D("table", {
+			className: `piq-table piq-matrix${s ? ` ${s}` : ""}`,
+			children: [
+				/* @__PURE__ */ E("caption", {
+					className: "piq-matrix__caption",
+					children: e
+				}),
+				/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [/* @__PURE__ */ E("th", {
+					scope: "col",
+					children: "Permission"
+				}), t.map((e) => /* @__PURE__ */ E("th", {
+					scope: "col",
+					children: e.label
+				}, e.value))] }) }),
+				/* @__PURE__ */ E("tbody", { children: r.map((e) => /* @__PURE__ */ D("tr", { children: [/* @__PURE__ */ E("th", {
+					scope: "row",
+					children: e.label
+				}), t.map((t) => {
+					let r = i(t.value, e.value);
+					return /* @__PURE__ */ D("td", {
+						"data-on": r || void 0,
+						children: [/* @__PURE__ */ E(n, { name: r ? "check" : "close" }), r ? a : o]
+					}, t.value);
+				})] }, e.value)) })
+			]
+		})
+	});
+}
+function ct({ title: e = "Audit log", entries: t = [], people: n = [], actions: r = [], filters: i = [], onFilter: a, onRemoveFilter: s, onClearFilters: l, locale: u, className: d }) {
+	let [f, m] = w(""), [h, g] = w(""), [_, v] = w({
+		from: "",
+		to: ""
+	}), y = b(), x = new Intl.DateTimeFormat(u, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	});
+	return /* @__PURE__ */ D("section", {
+		className: `piq-audit-log${d ? ` ${d}` : ""}`,
+		"aria-labelledby": `${y}-h`,
+		children: [
+			/* @__PURE__ */ E("h2", {
+				id: `${y}-h`,
+				className: "piq-import__title",
+				children: e
+			}),
+			/* @__PURE__ */ D("form", {
+				className: "piq-audit-log__filters",
+				onSubmit: (e) => {
+					e.preventDefault(), a?.({
+						person: f || null,
+						action: h || null,
+						from: _.from || null,
+						to: _.to || null
+					});
+				},
+				children: [
+					/* @__PURE__ */ E(c, {
+						label: "Person",
+						placeholder: "Anyone",
+						value: f,
+						options: n,
+						onChange: (e) => m(e.target.value)
+					}),
+					/* @__PURE__ */ E(c, {
+						label: "Action",
+						placeholder: "Any action",
+						value: h,
+						options: r,
+						onChange: (e) => g(e.target.value)
+					}),
+					/* @__PURE__ */ E(p, {
+						label: "Date",
+						from: _.from,
+						to: _.to,
+						onChange: v
+					}),
+					/* @__PURE__ */ E(o, {
+						type: "submit",
+						variant: "secondary",
+						children: "Filter"
+					})
+				]
+			}),
+			/* @__PURE__ */ E(ae, {
+				filters: i,
+				onRemoveFilter: s,
+				onClearAll: l
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "piq-table-wrap",
+				children: /* @__PURE__ */ D("table", {
+					className: "piq-table piq-audit-log__table",
+					children: [
+						/* @__PURE__ */ E("caption", {
+							className: "piq-visually-hidden",
+							children: e
+						}),
+						/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "When"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Who"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "What"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Before"
+							}),
+							/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "After"
+							})
+						] }) }),
+						/* @__PURE__ */ E("tbody", { children: t.map((e) => /* @__PURE__ */ D("tr", { children: [
+							/* @__PURE__ */ E("td", { children: /* @__PURE__ */ E("time", {
+								dateTime: new Date(e.time).toISOString(),
+								children: x.format(new Date(e.time))
+							}) }),
+							/* @__PURE__ */ E("td", { children: e.actor }),
+							/* @__PURE__ */ E("td", { children: e.action }),
+							/* @__PURE__ */ E("td", { children: e.before ?? "—" }),
+							/* @__PURE__ */ E("td", { children: e.after ?? "—" })
+						] }, e.id)) })
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/Notifications.jsx
+function lt({ notifications: e = [], onMarkRead: t, onMarkAllRead: r, preferences: i, onPreferenceChange: a, label: s = "Notifications", className: c }) {
+	let [d, f] = w(!1), p = e.filter((e) => !e.read).length;
+	return /* @__PURE__ */ D("div", {
+		className: `piq-notifications${c ? ` ${c}` : ""}`,
+		children: [/* @__PURE__ */ E(o, {
+			variant: "text",
+			"aria-label": p ? `${s}, ${p} unread` : s,
+			"aria-haspopup": "dialog",
+			"aria-expanded": d,
+			badge: p || void 0,
+			onClick: () => f(!0),
+			children: /* @__PURE__ */ E(n, { name: "info" })
+		}), /* @__PURE__ */ D(u, {
+			open: d,
+			onClose: () => f(!1),
+			title: s,
+			side: "end",
+			children: [
+				p > 0 && /* @__PURE__ */ E(o, {
+					variant: "secondary",
+					size: "sm",
+					onClick: () => r?.(),
+					children: "Mark all as read"
+				}),
+				/* @__PURE__ */ E("ul", {
+					className: "piq-notifications__list",
+					children: e.map((e) => /* @__PURE__ */ D("li", {
+						className: "piq-notifications__item",
+						"data-read": e.read || void 0,
+						children: [
+							/* @__PURE__ */ E("span", {
+								className: "piq-notifications__state",
+								children: e.read ? "Read" : "Unread"
+							}),
+							/* @__PURE__ */ E("a", {
+								href: e.href,
+								className: "piq-notifications__link",
+								children: e.title
+							}),
+							!e.read && /* @__PURE__ */ D(o, {
+								variant: "text",
+								size: "sm",
+								onClick: () => t?.(e),
+								children: ["Mark as read", /* @__PURE__ */ E("span", {
+									className: "piq-visually-hidden",
+									children: `: ${e.title}`
+								})]
+							})
+						]
+					}, e.id))
+				}),
+				i && /* @__PURE__ */ E("div", {
+					className: "piq-table-wrap",
+					children: /* @__PURE__ */ D("table", {
+						className: "piq-table piq-notifications__prefs",
+						children: [
+							/* @__PURE__ */ E("caption", {
+								className: "piq-matrix__caption",
+								children: "Notify me by"
+							}),
+							/* @__PURE__ */ E("thead", { children: /* @__PURE__ */ D("tr", { children: [/* @__PURE__ */ E("th", {
+								scope: "col",
+								children: "Notification"
+							}), i.channels.map((e) => /* @__PURE__ */ E("th", {
+								scope: "col",
+								children: e.label
+							}, e.value))] }) }),
+							/* @__PURE__ */ E("tbody", { children: i.kinds.map((e) => /* @__PURE__ */ D("tr", { children: [/* @__PURE__ */ E("th", {
+								scope: "row",
+								children: e.label
+							}), i.channels.map((t) => /* @__PURE__ */ E("td", { children: /* @__PURE__ */ E(l, {
+								label: /* @__PURE__ */ E("span", {
+									className: "piq-visually-hidden",
+									children: `${t.label} for ${e.label}`
+								}),
+								checked: !!i.value?.[e.value]?.[t.value],
+								onChange: (n) => a?.(e.value, t.value, n.target.checked)
+							}) }, t.value))] }, e.value)) })
+						]
+					})
+				})
+			]
+		})]
+	});
+}
+function ut({ title: e = "Integrations", items: t = [], onConnect: n, onDisconnect: r, className: i }) {
+	return /* @__PURE__ */ E("section", {
+		className: `piq-integrations${i ? ` ${i}` : ""}`,
+		"aria-label": e,
+		children: /* @__PURE__ */ E("ul", {
+			className: "piq-integrations__list",
+			children: t.map((e) => /* @__PURE__ */ D("li", {
+				className: "piq-integrations__item",
+				children: [
+					/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+						className: "piq-subscriptions__name",
+						children: e.name
+					}), e.description && /* @__PURE__ */ E("p", {
+						className: "piq-subscriptions__detail",
+						children: e.description
+					})] }),
+					/* @__PURE__ */ E("strong", {
+						className: "piq-integrations__status",
+						"data-connected": e.connected || void 0,
+						children: e.connected ? "Connected" : "Not connected"
+					}),
+					e.connected ? /* @__PURE__ */ E(o, {
+						variant: "secondary",
+						size: "sm",
+						"aria-label": `Disconnect ${e.name}`,
+						onClick: () => r?.(e),
+						children: "Disconnect"
+					}) : /* @__PURE__ */ E(o, {
+						size: "sm",
+						"aria-label": `Connect ${e.name}`,
+						onClick: () => n?.(e),
+						children: "Connect"
+					})
+				]
+			}, e.id))
+		})
+	});
+}
+function dt({ title: e = "API keys", keys: t = [], created: r, onCreate: i, onCreatedClose: a, onRevoke: s, className: c }) {
+	let [l, u] = w(!1), [d, f] = w(null);
+	return /* @__PURE__ */ D("section", {
+		className: `piq-api-keys${c ? ` ${c}` : ""}`,
+		"aria-label": e,
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "piq-subscriptions__head",
+				children: [/* @__PURE__ */ E("h2", {
+					className: "piq-import__title",
+					children: e
+				}), /* @__PURE__ */ D(o, {
+					onClick: () => i?.(),
+					children: [/* @__PURE__ */ E(n, { name: "add" }), "Create a key"]
+				})]
+			}),
+			r && /* @__PURE__ */ D("div", {
+				className: "piq-api-keys__created",
+				role: "status",
+				children: [
+					/* @__PURE__ */ D("p", { children: [/* @__PURE__ */ E("strong", { children: r.name }), ": copy this key now. You will not be able to see it again."] }),
+					/* @__PURE__ */ E("code", {
+						className: "piq-api-keys__secret",
+						children: r.secret
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "piq-quick-edit__actions",
+						children: [/* @__PURE__ */ D(o, {
+							variant: "secondary",
+							onClick: async () => {
+								await navigator.clipboard?.writeText(r.secret), u(!0);
+							},
+							children: [/* @__PURE__ */ E(n, { name: "copy" }), l ? "Copied" : "Copy key"]
+						}), /* @__PURE__ */ E(o, {
+							variant: "text",
+							onClick: () => {
+								u(!1), a?.();
+							},
+							children: "Done"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ E("ul", {
+				className: "piq-integrations__list",
+				children: t.map((e) => /* @__PURE__ */ D("li", {
+					className: "piq-integrations__item",
+					children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+						className: "piq-subscriptions__name",
+						children: e.name
+					}), /* @__PURE__ */ E("code", {
+						className: "piq-api-keys__masked",
+						"aria-label": `Key ending ${e.last4}`,
+						children: `•••• •••• •••• ${e.last4}`
+					})] }), /* @__PURE__ */ E(o, {
+						variant: "text",
+						size: "sm",
+						"aria-label": `Revoke ${e.name}`,
+						onClick: () => f(e),
+						children: "Revoke"
+					})]
+				}, e.id))
+			}),
+			/* @__PURE__ */ E(Z, {
+				open: !!d,
+				objectName: d?.name,
+				title: d ? `Revoke ${d.name}?` : "",
+				confirmLabel: "Revoke",
+				consequence: "Anything using this key stops working at once.",
+				onCancel: () => f(null),
+				onConfirm: () => {
+					s?.(d), f(null);
+				}
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/Home.jsx
+function ft({ list: e }) {
+	let t = b();
+	return /* @__PURE__ */ D("section", {
+		className: "piq-home__list",
+		"aria-labelledby": t,
+		children: [/* @__PURE__ */ E("h2", {
+			id: t,
+			className: "piq-home__heading",
+			children: e.title
+		}), e.items?.length ? /* @__PURE__ */ E("ul", {
+			className: "piq-home__items",
+			children: e.items.map((e) => /* @__PURE__ */ D("li", { children: [/* @__PURE__ */ E("a", {
+				href: e.href,
+				children: e.label
+			}), e.meta && /* @__PURE__ */ E("span", {
+				className: "piq-home__meta",
+				children: e.meta
+			})] }, e.id))
+		}) : /* @__PURE__ */ E("p", {
+			className: "piq-home__empty",
+			children: e.emptyText ?? "Nothing here yet."
+		})]
+	});
+}
+function pt({ title: e = "Home", tiles: t = [], assigned: n, recent: r, children: i, className: a }) {
+	return /* @__PURE__ */ D("div", {
+		className: `piq-home${a ? ` ${a}` : ""}`,
+		children: [
+			/* @__PURE__ */ E(q, { title: e }),
+			t.length > 0 && /* @__PURE__ */ E("div", {
+				className: "piq-dashboard__tiles piq-home__tiles",
+				children: t
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "piq-home__lists",
+				children: [n && /* @__PURE__ */ E(ft, { list: n }), r && /* @__PURE__ */ E(ft, { list: r })]
+			}),
+			i
+		]
+	});
+}
+function mt({ recent: e = [], results: r = [], onSearch: i, onSelect: a, buttonLabel: s = "Search", placeholder: c = "Search records and actions", recentLabel: l = "Recent", emptyLabel: u = "No results", className: d }) {
+	let [f, p] = w(!1), [m, h] = w(""), [g, _] = w(0), v = C(null), x = b(), S = m.trim() ? r : e.length ? [{
+		label: l,
+		items: e
+	}] : [], T = S.flatMap((e) => e.items);
+	y(() => {
+		let e = (e) => {
+			(e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), p(!0));
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, []), y(() => {
+		f || (h(""), _(0));
+	}, [f]);
+	function O(e) {
+		if (e.key === "ArrowDown") e.preventDefault(), _((e) => Math.min(e + 1, T.length - 1));
+		else if (e.key === "ArrowUp") e.preventDefault(), _((e) => Math.max(e - 1, 0));
+		else if (e.key === "Enter") {
+			e.preventDefault();
+			let t = T[g];
+			t && (p(!1), a?.(t));
+		}
+	}
+	let k = -1;
+	return /* @__PURE__ */ D("div", {
+		className: `piq-palette${d ? ` ${d}` : ""}`,
+		children: [/* @__PURE__ */ D(o, {
+			variant: "secondary",
+			"aria-haspopup": "dialog",
+			"aria-keyshortcuts": "Control+K Meta+K",
+			onClick: () => p(!0),
+			children: [
+				/* @__PURE__ */ E(n, { name: "search" }),
+				s,
+				/* @__PURE__ */ E("kbd", {
+					className: "piq-palette__kbd",
+					"aria-hidden": "true",
+					children: "⌘K"
+				})
+			]
+		}), /* @__PURE__ */ D(t, {
+			open: f,
+			onClose: () => p(!1),
+			title: s,
+			initialFocus: v,
+			className: "piq-palette__dialog",
+			children: [
+				/* @__PURE__ */ E("input", {
+					ref: v,
+					type: "text",
+					role: "combobox",
+					"aria-label": c,
+					placeholder: c,
+					className: "piq-field__input",
+					autoComplete: "off",
+					"aria-expanded": T.length > 0,
+					"aria-controls": `${x}-list`,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": T[g] ? `${x}-${T[g].id}` : void 0,
+					value: m,
+					onChange: (e) => {
+						h(e.target.value), _(0), i?.(e.target.value);
+					},
+					onKeyDown: O
+				}),
+				/* @__PURE__ */ E("div", {
+					id: `${x}-list`,
+					role: "listbox",
+					"aria-label": "Results",
+					className: "piq-palette__results",
+					children: S.map((e) => /* @__PURE__ */ D("div", {
+						role: "group",
+						"aria-labelledby": `${x}-${e.label}-g`,
+						className: "piq-palette__group",
+						children: [/* @__PURE__ */ E("p", {
+							id: `${x}-${e.label}-g`,
+							className: "piq-palette__group-label",
+							role: "presentation",
+							children: e.label
+						}), e.items.map((e) => {
+							k++;
+							let t = k;
+							return /* @__PURE__ */ E("div", {
+								id: `${x}-${e.id}`,
+								role: "option",
+								"aria-selected": t === g,
+								className: `piq-menu__item${t === g ? " is-hover" : ""}`,
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => {
+									p(!1), a?.(e);
+								},
+								children: e.label
+							}, e.id);
+						})]
+					}, e.label))
+				}),
+				m.trim() && !T.length && /* @__PURE__ */ E("p", {
+					role: "status",
+					className: "piq-workspace__empty",
+					children: u
+				})
+			]
+		})]
+	});
+}
+function ht({ items: e = [], label: t = "Actions", children: n }) {
+	let [r, i] = w(null), [a, o] = w(0), s = C(null), c = C(null);
+	y(() => {
+		r && s.current?.querySelectorAll("[role=\"menuitem\"]")[a]?.focus();
+	}, [r, a]), y(() => {
+		if (!r) return;
+		let e = (e) => {
+			s.current?.contains(e.target) || i(null);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [r]);
+	let l = (e, t) => {
+		o(0), i({
+			x: e,
+			y: t
+		});
+	}, u = () => {
+		i(null), c.current?.focus();
+	}, d = _(n, {
+		ref: c,
+		"aria-haspopup": "menu",
+		onContextMenu: (e) => {
+			e.preventDefault(), c.current = e.currentTarget, l(e.clientX, e.clientY);
+		},
+		onKeyDown: (e) => {
+			if (n.props.onKeyDown?.(e), e.shiftKey && e.key === "F10" || e.key === "ContextMenu") {
+				e.preventDefault(), c.current = e.currentTarget;
+				let t = e.currentTarget.getBoundingClientRect();
+				l(t.left, t.bottom);
+			}
+		}
+	});
+	function f(t) {
+		t.key === "ArrowDown" ? (t.preventDefault(), o((t) => (t + 1) % e.length)) : t.key === "ArrowUp" ? (t.preventDefault(), o((t) => (t - 1 + e.length) % e.length)) : t.key === "Home" ? (t.preventDefault(), o(0)) : t.key === "End" ? (t.preventDefault(), o(e.length - 1)) : (t.key === "Escape" || t.key === "Tab") && (t.preventDefault(), u());
+	}
+	return /* @__PURE__ */ D(T, { children: [d, r && /* @__PURE__ */ E("ul", {
+		ref: s,
+		role: "menu",
+		"aria-label": t,
+		className: "piq-menu piq-context-menu",
+		style: {
+			insetInlineStart: `${r.x}px`,
+			insetBlockStart: `${r.y}px`
+		},
+		onKeyDown: f,
+		children: e.map((e, t) => /* @__PURE__ */ E("li", {
+			role: "none",
+			children: /* @__PURE__ */ E("button", {
+				type: "button",
+				role: "menuitem",
+				tabIndex: -1,
+				className: `piq-menu__item${t === a ? " is-hover" : ""}`,
+				onClick: () => {
+					u(), e.onSelect?.();
+				},
+				children: e.label
+			})
+		}, t))
+	})] });
+}
+//#endregion
+export { dt as ApiKeys, te as AppShell, Ze as Attachments, ct as AuditLog, Ke as Board, le as BulkActionBar, Ye as Calendar, Ae as ChartFrame, N as Cluster, be as CollectionList, mt as CommandPalette, Z as ConfirmDialog, ht as ContextMenu, Me as Dashboard, xe as DescriptionList, $e as DrillDown, Be as EditableGrid, re as ErrorScreen, fe as ErrorSummary, Ge as ExportDialog, ae as FilterBar, oe as FilterPanel, se as FilterSection, pe as FormPage, Y as FormSection, P as Grid, pt as HomeScreen, We as ImportFlow, ut as Integrations, De as ListDetail, lt as NotificationCentre, F as Page, q as PageHeader, et as PeriodComparison, st as PermissionsMatrix, nt as PivotTable, V as PrimaryNav, tt as PrintLayout, me as QuickEdit, Ee as RecordDetail, rt as ReportBuilder, Ne as ReportViewer, ze as ReviewConfirm, Pe as SettingsPage, I as SplitView, M as Stack, ke as StatTile, J as StatePanel, it as Subscriptions, Te as TabsSection, Re as TaskList, we as Timeline, ot as UsersAndRoles, Ie as Wizard, He as WorkQueue, ee as WorkspaceSwitcher, G as sizeAtLeast, ie as sizeClassOf, Qe as useDrillPath, de as useFormState, ge as useListQuery, W as useSizeClass, K as useStickyClearance, ue as useUnsavedChangesWarning };
+
+//# sourceMappingURL=patterns.js.map