@ptbdynamic/plinth 0.0.0-stage → 0.1.1

package/packages/react/dist/index.js

@@ -0,0 +1,1127 @@
+import { Fragment as e, isValidElement as t, useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/size.ts
+var u = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+], d = [
+	"sm",
+	"md",
+	"lg"
+];
+function f(e, t, n) {
+	return t.includes(e) ? e : n;
+}
+function p(e) {
+	return e === "xs" || e === "sm" ? "sm" : "md";
+}
+//#endregion
+//#region src/avatar.ts
+var m = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+function h(e) {
+	return f(e, m, "md");
+}
+function g(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return t.length === 0 ? "" : ([...t[0]][0] + (t.length > 1 ? [...t.at(-1)][0] : "")).toUpperCase();
+}
+var _ = "<svg class=\"plinth-avatar-glyph\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"9\" r=\"4\"></circle><path d=\"M4.5 20a7.5 7.5 0 0 1 15 0\"></path></svg>", v = (e, t) => t?.trim() ? `${e} ${t.trim()}` : e, y = (n) => n == null || typeof n == "boolean" ? !1 : typeof n == "string" ? n.trim() !== "" : Array.isArray(n) ? n.some(y) : t(n) && n.type === e ? y(n.props.children) : !0, b = [
+	"neutral",
+	"success",
+	"warning",
+	"danger"
+];
+function x(e) {
+	return b.includes(e) ? e : b[0];
+}
+//#endregion
+//#region src/PlinthAvatar.tsx
+function S({ name: e = "", src: t, initials: n, size: i, status: a, statusLabel: o, decorative: s = !1, className: u, ...d }) {
+	let f = a ? x(a) : void 0, p = s ? void 0 : f && o ? `${e}, ${o}` : e, m = n ?? g(e);
+	return r(() => {
+		s || process.env.NODE_ENV === "production" || (e.trim() || console.warn("PlinthAvatar needs a name, or decorative when the name is shown next to it."), a && !o && console.warn("PlinthAvatar needs a statusLabel with a status: colour alone does not say what it means."));
+	}, [
+		s,
+		e,
+		a,
+		o
+	]), /* @__PURE__ */ l("span", {
+		"data-size": h(i),
+		role: p === void 0 ? void 0 : "img",
+		"aria-label": p,
+		"aria-hidden": s ? "true" : void 0,
+		...d,
+		className: v("plinth-avatar", u),
+		children: [t ? /* @__PURE__ */ c("img", {
+			className: "plinth-avatar-image",
+			src: t,
+			alt: ""
+		}) : m ? /* @__PURE__ */ c("span", {
+			className: "plinth-avatar-initials",
+			"aria-hidden": "true",
+			children: m
+		}) : /* @__PURE__ */ l("svg", {
+			className: "plinth-avatar-glyph",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ c("circle", {
+				cx: "12",
+				cy: "9",
+				r: "4"
+			}), /* @__PURE__ */ c("path", { d: "M4.5 20a7.5 7.5 0 0 1 15 0" })]
+		}), f ? /* @__PURE__ */ c("span", {
+			className: "plinth-avatar-status",
+			"data-tone": f,
+			"aria-hidden": "true"
+		}) : null]
+	});
+}
+//#endregion
+//#region src/PlinthBadge.tsx
+function C({ tone: e, dot: t = !1, className: n, children: r, ...i }) {
+	return /* @__PURE__ */ l("span", {
+		"data-tone": x(e),
+		...i,
+		className: v("plinth-badge", n),
+		children: [t ? /* @__PURE__ */ c("span", {
+			className: "plinth-badge-dot",
+			"aria-hidden": "true"
+		}) : null, /* @__PURE__ */ c("span", {
+			className: "plinth-badge-label",
+			children: r
+		})]
+	});
+}
+//#endregion
+//#region src/button.ts
+var w = [
+	"primary",
+	"accent",
+	"secondary",
+	"ghost",
+	"danger",
+	"danger-ghost"
+];
+function T(e) {
+	return w.includes(e) ? e : "primary";
+}
+//#endregion
+//#region src/PlinthButton.tsx
+function E({ href: e, variant: t, size: n, disabled: r = !1, busy: i = !1, icon: a, trailing: o, mirrorIcon: u = !1, mirrorTrailing: m = !1, className: h, children: g, ..._ }) {
+	let b = f(n, d, "md"), x = p(b), S = i && !r, C = {
+		"data-variant": T(t),
+		"data-size": b,
+		"aria-busy": S ? "true" : void 0
+	}, w = /* @__PURE__ */ l(s, { children: [
+		S ? /* @__PURE__ */ c("span", {
+			className: "plinth-button-spinner",
+			"aria-hidden": "true"
+		}) : y(a) ? /* @__PURE__ */ c("span", {
+			className: "plinth-icon",
+			"data-size": x,
+			"data-mirror": u ? "" : void 0,
+			"aria-hidden": "true",
+			children: a
+		}) : null,
+		/* @__PURE__ */ c("span", {
+			className: "plinth-button-label",
+			children: g
+		}),
+		y(o) ? /* @__PURE__ */ c("span", {
+			className: "plinth-icon",
+			"data-size": x,
+			"data-mirror": m ? "" : void 0,
+			"aria-hidden": "true",
+			children: o
+		}) : null
+	] });
+	return e ? /* @__PURE__ */ c("a", {
+		...C,
+		href: r ? void 0 : e,
+		role: r ? "link" : void 0,
+		"aria-disabled": S || r ? "true" : void 0,
+		..._,
+		className: v("plinth-button", h),
+		children: w
+	}) : /* @__PURE__ */ c("button", {
+		type: "button",
+		...C,
+		disabled: r || void 0,
+		"aria-disabled": S ? "true" : void 0,
+		..._,
+		className: v("plinth-button", h),
+		children: w
+	});
+}
+//#endregion
+//#region src/callout.ts
+var D = [
+	"neutral",
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+function O(e) {
+	return D.includes(e) ? e : "neutral";
+}
+var k = [
+	"note",
+	"status",
+	"alert"
+];
+function A(e) {
+	return k.includes(e) ? e : "note";
+}
+var j = (e) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${e}</svg>`, M = {
+	neutral: j("<rect x=\"5\" y=\"4\" width=\"14\" height=\"16\" rx=\"2\"></rect><path d=\"M9 9h6M9 13h6M9 17h3\"></path>"),
+	info: j("<circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 11v5M12 7.5v.01\"></path>"),
+	success: j("<circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M8 12.5l2.5 2.5L16 9.5\"></path>"),
+	warning: j("<path d=\"M10.3 4.3L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z\"></path><path d=\"M12 9.5v4M12 17v.01\"></path>"),
+	danger: j("<path d=\"M8.5 3h7L21 8.5v7L15.5 21h-7L3 15.5v-7z\"></path><path d=\"M12 7.5v5M12 16v.01\"></path>")
+};
+//#endregion
+//#region src/PlinthCallout.tsx
+function N({ tone: e, role: t, title: n, actions: r, icon: i, className: a, children: o, ...s }) {
+	let u = O(e);
+	return /* @__PURE__ */ l("div", {
+		"data-tone": u,
+		role: A(t),
+		...s,
+		className: v("plinth-callout", a),
+		children: [y(i) ? /* @__PURE__ */ c("span", {
+			className: "plinth-icon plinth-callout-icon",
+			"data-size": "md",
+			"aria-hidden": "true",
+			children: i
+		}) : /* @__PURE__ */ c("span", {
+			className: "plinth-icon plinth-callout-icon",
+			"data-size": "md",
+			"aria-hidden": "true",
+			dangerouslySetInnerHTML: { __html: M[u] }
+		}), /* @__PURE__ */ l("div", {
+			className: "plinth-callout-body",
+			children: [
+				y(n) ? /* @__PURE__ */ c("p", {
+					className: "plinth-callout-title",
+					children: n
+				}) : null,
+				y(o) ? /* @__PURE__ */ c("div", {
+					className: "plinth-callout-text",
+					children: o
+				}) : null,
+				y(r) ? /* @__PURE__ */ c("div", {
+					className: "plinth-callout-actions",
+					children: r
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/code-block.ts
+var ee = (e) => e.slice(0, 6), te = (e, t) => Math.max(0, e.findIndex((e) => e.label === t));
+function ne(e) {
+	let t = e.closest(".plinth-code-block"), n = [...t?.querySelectorAll(".plinth-code-block-tab-input") ?? []], r = Math.max(0, n.findIndex((e) => e.checked));
+	return t?.querySelectorAll(".plinth-code-block-code")[r]?.textContent ?? "";
+}
+//#endregion
+//#region src/PlinthCodeBlock.tsx
+var P = ({ children: e, html: t }) => /* @__PURE__ */ c("pre", {
+	className: "plinth-code-block-code",
+	dir: "ltr",
+	tabIndex: 0,
+	children: t === void 0 ? /* @__PURE__ */ c("code", { children: e }) : /* @__PURE__ */ c("code", { dangerouslySetInnerHTML: { __html: t } })
+});
+function re({ id: e, label: t, html: n, tabs: u = [], selected: d, tabsLabel: f = "Language", copy: p = !0, copyLabel: m = "Copy", copiedLabel: h = "Copied", onCopied: g, className: _, children: b, ...x }) {
+	let S = i(), C = e?.trim() || void 0, w = `${C ?? `plinth-code-block-${S}`}-language`, T = ee(u), D = te(T, d), [O, k] = o(!1), [A, j] = o(!1), M = a(void 0);
+	r(() => (k(!!navigator.clipboard), () => clearTimeout(M.current)), []);
+	async function N(e) {
+		let t = ne(e.currentTarget);
+		try {
+			await navigator.clipboard.writeText(t);
+		} catch {
+			return;
+		}
+		j(!0), clearTimeout(M.current), M.current = setTimeout(() => j(!1), 2e3), g?.(t);
+	}
+	return /* @__PURE__ */ l("div", {
+		id: C,
+		...x,
+		className: v("plinth-code-block", _),
+		children: [/* @__PURE__ */ l("div", {
+			className: "plinth-code-block-header",
+			children: [
+				y(t) ? /* @__PURE__ */ c("span", {
+					className: "plinth-code-block-label",
+					children: t
+				}) : null,
+				T.length ? /* @__PURE__ */ c("div", {
+					className: "plinth-code-block-tabs",
+					role: "radiogroup",
+					"aria-label": f,
+					children: T.map((e, t) => /* @__PURE__ */ l("label", {
+						className: "plinth-code-block-tab",
+						children: [/* @__PURE__ */ c("input", {
+							type: "radio",
+							className: "plinth-code-block-tab-input",
+							name: w,
+							defaultChecked: t === D
+						}), /* @__PURE__ */ c("span", {
+							className: "plinth-code-block-tab-label",
+							children: e.label
+						})]
+					}, t))
+				}) : null,
+				p ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(E, {
+					className: "plinth-code-block-copy",
+					variant: "ghost",
+					size: "sm",
+					hidden: !O,
+					onClick: N,
+					children: A ? h : m
+				}), /* @__PURE__ */ c("span", {
+					className: "plinth-code-block-status",
+					role: "status",
+					children: A ? h : ""
+				})] }) : null
+			]
+		}), T.length ? T.map((e, t) => /* @__PURE__ */ c(P, {
+			html: e.html,
+			children: e.code
+		}, t)) : /* @__PURE__ */ c(P, {
+			html: n,
+			children: b
+		})]
+	});
+}
+//#endregion
+//#region src/confirm-dialog.ts
+var F = [
+	"simple",
+	"type",
+	"password"
+];
+function ie(e) {
+	return F.includes(e) ? e : "simple";
+}
+var ae = ["neutral", "danger"];
+function I(e) {
+	return ae.includes(e) ? e : "neutral";
+}
+var L = {
+	type: "Type :phrase to confirm",
+	password: "Password"
+}, R = (e) => e.replace(/[\\^$.*+?()[\]{}|/]/g, "\\$&"), z = [
+	"start",
+	"end",
+	"top",
+	"bottom"
+];
+function B(e) {
+	return V(e) ?? "end";
+}
+function V(e) {
+	return z.includes(e) ? e : void 0;
+}
+var H = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"></path></svg>", U = ["center", "bottom"];
+function W(e) {
+	return U.includes(e) ? e : "center";
+}
+var oe = H;
+//#endregion
+//#region src/PlinthConfirmDialog.tsx
+function se({ id: t, title: n, message: r, kind: a, phrase: o, fieldLabel: s, confirmLabel: u = "Confirm", cancelLabel: d = "Cancel", tone: f, error: p, busy: m = !1, sidePhone: h, className: g, ..._ }) {
+	let y = i();
+	if (!n?.trim()) throw Error("<PlinthConfirmDialog> needs a title: it is the dialog's accessible name.");
+	if (!r?.trim()) throw Error("<PlinthConfirmDialog> needs a message: it is the dialog's accessible description.");
+	let b = ie(a);
+	if (b === "type" && !o?.trim()) throw Error("<PlinthConfirmDialog kind=\"type\"> needs a phrase: it is what the person types.");
+	let x = t?.trim() || `plinth-confirm-dialog-${y}`, S = W(h), C = o?.trim() ?? "", w = b !== "simple" && !!p?.trim(), T = w ? {
+		"aria-invalid": !0,
+		"aria-describedby": `${x}-error`
+	} : {}, D = null;
+	if (b !== "simple") {
+		let t = s?.trim() || L[b], n = b === "type" ? t.split(":phrase") : [t];
+		D = /* @__PURE__ */ l("div", {
+			className: "plinth-confirm-dialog-field",
+			children: [/* @__PURE__ */ c("label", {
+				htmlFor: `${x}-field`,
+				className: "plinth-confirm-dialog-label",
+				children: n.map((t, n) => /* @__PURE__ */ l(e, { children: [n > 0 ? /* @__PURE__ */ c("strong", { children: C }) : null, t] }, n))
+			}), b === "type" ? /* @__PURE__ */ c("input", {
+				id: `${x}-field`,
+				className: "plinth-confirm-dialog-input",
+				type: "text",
+				name: "confirmation",
+				required: !0,
+				pattern: R(C),
+				autoComplete: "off",
+				autoCapitalize: "none",
+				spellCheck: "false",
+				...T
+			}) : /* @__PURE__ */ c("input", {
+				id: `${x}-field`,
+				className: "plinth-confirm-dialog-input",
+				type: "password",
+				name: "password",
+				required: !0,
+				autoComplete: "current-password",
+				...T
+			})]
+		});
+	}
+	return /* @__PURE__ */ c("dialog", {
+		id: x,
+		role: "alertdialog",
+		"data-side-phone": S === "center" ? void 0 : S,
+		closedby: "closerequest",
+		"aria-labelledby": `${x}-title`,
+		"aria-describedby": `${x}-message`,
+		..._,
+		className: v("plinth-dialog plinth-confirm-dialog", g),
+		children: /* @__PURE__ */ l("form", {
+			method: "dialog",
+			className: "plinth-confirm-dialog-form",
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: "plinth-dialog-header",
+					children: /* @__PURE__ */ c("h2", {
+						id: `${x}-title`,
+						className: "plinth-dialog-title",
+						children: n
+					})
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "plinth-dialog-body",
+					children: [
+						/* @__PURE__ */ c("p", {
+							id: `${x}-message`,
+							className: "plinth-confirm-dialog-message",
+							children: r
+						}),
+						D,
+						w ? /* @__PURE__ */ c("p", {
+							id: `${x}-error`,
+							className: "plinth-confirm-dialog-error",
+							role: "alert",
+							children: p
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "plinth-dialog-footer",
+					children: [/* @__PURE__ */ c(E, {
+						variant: "secondary",
+						commandfor: x,
+						command: "close",
+						value: "cancel",
+						children: d
+					}), /* @__PURE__ */ c(E, {
+						className: "plinth-confirm-dialog-confirm",
+						type: "submit",
+						value: "confirm",
+						variant: I(f) === "danger" ? "danger" : "primary",
+						busy: m,
+						children: u
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/PlinthDataTable.tsx
+function ce({ caption: e, head: t, className: n, children: r, ...i }) {
+	return /* @__PURE__ */ l("table", {
+		role: "table",
+		...i,
+		className: v("plinth-data-table", n),
+		children: [
+			e?.trim() ? /* @__PURE__ */ c("caption", {
+				className: "plinth-data-table-caption",
+				children: e
+			}) : null,
+			/* @__PURE__ */ c("thead", {
+				className: "plinth-data-table-head",
+				role: "rowgroup",
+				children: /* @__PURE__ */ c("tr", {
+					className: "plinth-data-table-head-row",
+					role: "row",
+					children: t
+				})
+			}),
+			/* @__PURE__ */ c("tbody", {
+				className: "plinth-data-table-body",
+				role: "rowgroup",
+				children: r
+			})
+		]
+	});
+}
+//#endregion
+//#region src/data-table.ts
+var G = [
+	"none",
+	"ascending",
+	"descending"
+];
+function K(e) {
+	return G.includes(e) ? e : "none";
+}
+var q = [
+	"field",
+	"title",
+	"actions"
+];
+function J(e) {
+	return q.includes(e) ? e : "field";
+}
+var le = "<span class=\"plinth-icon plinth-data-table-sort-icon\" data-size=\"sm\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path class=\"plinth-data-table-sort-up\" d=\"M8 9l4-4 4 4\"></path><path class=\"plinth-data-table-sort-down\" d=\"M8 15l4 4 4-4\"></path></svg></span>";
+//#endregion
+//#region src/PlinthDataTableCell.tsx
+function ue({ label: e, kind: t, numeric: n = !1, hideOnPhone: r = !1, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ l("td", {
+		role: "cell",
+		"data-kind": J(t),
+		"data-numeric": n ? "" : void 0,
+		"data-phone": r ? "hidden" : void 0,
+		...o,
+		className: v("plinth-data-table-cell", i),
+		children: [e?.trim() ? /* @__PURE__ */ c("span", {
+			className: "plinth-data-table-label",
+			"aria-hidden": "true",
+			children: e
+		}) : null, /* @__PURE__ */ c("span", {
+			className: "plinth-data-table-value",
+			children: a
+		})]
+	});
+}
+//#endregion
+//#region src/PlinthDataTableColumn.tsx
+function de({ sort: e, numeric: t = !1, hideOnPhone: n = !1, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ c("th", {
+		role: "columnheader",
+		scope: "col",
+		"aria-sort": e?.trim() ? K(e) : void 0,
+		"data-numeric": t ? "" : void 0,
+		"data-phone": n ? "hidden" : void 0,
+		...a,
+		className: v("plinth-data-table-column", r),
+		children: i
+	});
+}
+//#endregion
+//#region src/PlinthDataTableEmpty.tsx
+var fe = /^\s*[+-]?(\d+\.?\d*|\.\d+)([eE][+-]?\d+)?\s*$/, pe = (e) => {
+	let t = typeof e == "number" || fe.test(e) ? Number(e) : NaN;
+	return Number.isFinite(t) ? Math.max(1, Math.trunc(t)) : 1;
+};
+function me({ columns: e = 1, className: t, children: n, ...r }) {
+	return /* @__PURE__ */ c("tr", {
+		role: "row",
+		...r,
+		className: v("plinth-data-table-empty", t),
+		children: /* @__PURE__ */ c("td", {
+			className: "plinth-data-table-empty-cell",
+			role: "cell",
+			colSpan: pe(e),
+			children: n
+		})
+	});
+}
+//#endregion
+//#region src/PlinthDataTableRow.tsx
+function he({ selected: e, className: t, children: n, ...r }) {
+	return /* @__PURE__ */ c("tr", {
+		role: "row",
+		"aria-selected": e === void 0 ? void 0 : e ? "true" : "false",
+		...r,
+		className: v("plinth-data-table-row", t),
+		children: n
+	});
+}
+//#endregion
+//#region src/PlinthDataTableSort.tsx
+function ge({ className: e, children: t, ...n }) {
+	return /* @__PURE__ */ l("button", {
+		type: "button",
+		...n,
+		className: v("plinth-data-table-sort", e),
+		children: [/* @__PURE__ */ c("span", {
+			className: "plinth-data-table-sort-label",
+			children: t
+		}), /* @__PURE__ */ c("span", {
+			className: "plinth-icon plinth-data-table-sort-icon",
+			"data-size": "sm",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ l("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: [/* @__PURE__ */ c("path", {
+					className: "plinth-data-table-sort-up",
+					d: "M8 9l4-4 4 4"
+				}), /* @__PURE__ */ c("path", {
+					className: "plinth-data-table-sort-down",
+					d: "M8 15l4 4 4-4"
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/PlinthIconButton.tsx
+function Y({ label: e, href: t, variant: n = "ghost", size: r, disabled: i = !1, busy: a = !1, pressed: o = null, mirror: s = !1, className: l, children: u, "aria-label": m, ...h }) {
+	let g = f(r, d, "md"), _ = a && !i, y = {
+		className: v("plinth-button plinth-icon-button", l),
+		"data-variant": T(n),
+		"data-size": g,
+		"aria-label": e || m,
+		"aria-busy": _ ? "true" : void 0
+	}, b = _ ? /* @__PURE__ */ c("span", {
+		className: "plinth-button-spinner",
+		"aria-hidden": "true"
+	}) : /* @__PURE__ */ c("span", {
+		className: "plinth-icon",
+		"data-size": p(g),
+		"data-mirror": s ? "" : void 0,
+		"aria-hidden": "true",
+		children: u
+	});
+	return t ? /* @__PURE__ */ c("a", {
+		...y,
+		href: i ? void 0 : t,
+		role: i ? "link" : void 0,
+		"aria-disabled": _ || i ? "true" : void 0,
+		...h,
+		children: b
+	}) : /* @__PURE__ */ c("button", {
+		type: "button",
+		...y,
+		"aria-pressed": o === null ? void 0 : o ? "true" : "false",
+		disabled: i || void 0,
+		"aria-disabled": _ ? "true" : void 0,
+		...h,
+		children: b
+	});
+}
+//#endregion
+//#region src/swipe.ts
+function X(e) {
+	let t = e.firstElementChild, n = () => getComputedStyle(e).scrollSnapType.startsWith("y"), r = () => {
+		e.requestClose ? e.requestClose() : e.close(), e.open && (e.scrollTop = 0);
+	}, i = () => {
+		let i = t.getBoundingClientRect().top >= e.getBoundingClientRect().bottom - 1;
+		e.open && n() && i && r();
+	}, a = (t) => {
+		t.target === e && n() && e.getAttribute("closedby") === "any" && r();
+	}, o = (r) => {
+		let [i, a] = t.children, o = {
+			peek: i,
+			half: a
+		}[e.dataset.snap ?? ""];
+		if (r.newState !== "open" || !o || !n()) return;
+		let s = parseFloat(getComputedStyle(o).scrollMarginBlockStart);
+		e.scrollTop += o.getBoundingClientRect().top - e.getBoundingClientRect().top - s;
+	}, s = "onscrollend" in window ? "scrollend" : "scroll";
+	return e.addEventListener(s, i), e.addEventListener("click", a), e.addEventListener("toggle", o), () => {
+		e.removeEventListener(s, i), e.removeEventListener("click", a), e.removeEventListener("toggle", o);
+	};
+}
+function Z(e) {
+	return n((t) => {
+		let n = X(t), r = _e(e, t);
+		return () => {
+			n(), r();
+		};
+	}, [e]);
+}
+function _e(e, t) {
+	if (typeof e == "function") {
+		let n = e(t);
+		return typeof n == "function" ? n : () => e(null);
+	}
+	return e ? (e.current = t, () => {
+		e.current = null;
+	}) : () => {};
+}
+//#endregion
+//#region src/PlinthDialog.tsx
+function ve({ id: e, title: t, description: n, closeLabel: r = "Close", dismissible: a = !0, sidePhone: o, footer: s, className: u, children: d, ref: f, ...p }) {
+	let m = i(), h = Z(f);
+	if (!t?.trim()) throw Error("<PlinthDialog> needs a title: it is the dialog's accessible name.");
+	let g = e?.trim() || `plinth-dialog-${m}`, _ = !!n?.trim(), b = W(o);
+	return /* @__PURE__ */ c("dialog", {
+		id: g,
+		role: a ? void 0 : "alertdialog",
+		"data-side-phone": b === "center" ? void 0 : b,
+		closedby: a ? "any" : "closerequest",
+		"aria-labelledby": `${g}-title`,
+		"aria-describedby": _ ? `${g}-description` : void 0,
+		...p,
+		ref: h,
+		className: v("plinth-dialog", u),
+		children: /* @__PURE__ */ l("div", {
+			className: "plinth-dialog-panel",
+			children: [
+				a && b === "bottom" ? /* @__PURE__ */ c("div", {
+					className: "plinth-dialog-handle",
+					"aria-hidden": "true"
+				}) : null,
+				/* @__PURE__ */ l("div", {
+					className: "plinth-dialog-header",
+					children: [
+						/* @__PURE__ */ c("h2", {
+							id: `${g}-title`,
+							className: "plinth-dialog-title",
+							children: t
+						}),
+						_ ? /* @__PURE__ */ c("p", {
+							id: `${g}-description`,
+							className: "plinth-dialog-description",
+							children: n
+						}) : null,
+						a ? /* @__PURE__ */ c(Y, {
+							className: "plinth-dialog-close",
+							label: r,
+							variant: "ghost",
+							commandfor: g,
+							command: "close",
+							children: /* @__PURE__ */ c("svg", {
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: /* @__PURE__ */ c("path", { d: "M6 6l12 12M18 6L6 18" })
+							})
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "plinth-dialog-body",
+					children: d
+				}),
+				y(s) ? /* @__PURE__ */ c("div", {
+					className: "plinth-dialog-footer",
+					children: s
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+//#region src/drawer.ts
+var Q = ["dialog", "sheet"];
+function ye(e) {
+	return Q.includes(e) ? e : "dialog";
+}
+var be = [
+	"peek",
+	"half",
+	"full"
+];
+function xe(e) {
+	let t = typeof e == "string" ? e.split(/\s+/) : e ?? [];
+	return be.filter((e) => t.includes(e));
+}
+function Se(e, t) {
+	return t.includes(e) ? e : t.at(-1);
+}
+var Ce = H;
+//#endregion
+//#region src/PlinthDrawer.tsx
+function we({ id: e, title: t, description: n, closeLabel: r = "Close", desktop: a, snapPoints: o, snap: s, footer: u, className: d, children: f, ref: p, ...m }) {
+	let h = i(), g = Z(p);
+	if (!t?.trim()) throw Error("<PlinthDrawer> needs a title: it is the drawer's accessible name.");
+	let _ = e?.trim() || `plinth-drawer-${h}`, b = !!n?.trim(), x = xe(o);
+	return /* @__PURE__ */ c("dialog", {
+		id: _,
+		"data-desktop": ye(a),
+		"data-snap-points": x.length ? x.join(" ") : void 0,
+		"data-snap": Se(s, x),
+		closedby: "any",
+		"aria-labelledby": `${_}-title`,
+		"aria-describedby": b ? `${_}-description` : void 0,
+		...m,
+		ref: g,
+		className: v("plinth-drawer", d),
+		children: /* @__PURE__ */ l("div", {
+			className: "plinth-drawer-panel",
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: "plinth-drawer-handle",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "plinth-drawer-header",
+					children: [
+						/* @__PURE__ */ c("h2", {
+							id: `${_}-title`,
+							className: "plinth-drawer-title",
+							children: t
+						}),
+						b ? /* @__PURE__ */ c("p", {
+							id: `${_}-description`,
+							className: "plinth-drawer-description",
+							children: n
+						}) : null,
+						/* @__PURE__ */ c(Y, {
+							className: "plinth-drawer-close",
+							label: r,
+							variant: "ghost",
+							commandfor: _,
+							command: "close",
+							children: /* @__PURE__ */ c("svg", {
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: /* @__PURE__ */ c("path", { d: "M6 6l12 12M18 6L6 18" })
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "plinth-drawer-body",
+					children: f
+				}),
+				y(u) ? /* @__PURE__ */ c("div", {
+					className: "plinth-drawer-footer",
+					children: u
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+//#region src/PlinthHeader.tsx
+function Te({ title: e, leading: t, actions: n, className: r, ...i }) {
+	if (!e?.trim()) throw Error("<PlinthHeader> needs a title: it is the page's heading.");
+	return /* @__PURE__ */ l("header", {
+		...i,
+		className: v("plinth-header", r),
+		children: [
+			y(t) ? /* @__PURE__ */ c("div", {
+				className: "plinth-header-leading",
+				children: t
+			}) : null,
+			/* @__PURE__ */ c("h1", {
+				className: "plinth-header-title",
+				children: e
+			}),
+			y(n) ? /* @__PURE__ */ c("div", {
+				className: "plinth-header-actions",
+				children: n
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/icon.ts
+var Ee = [
+	"sm",
+	"md",
+	"lg"
+];
+function De(e) {
+	return f(e, Ee, "md");
+}
+//#endregion
+//#region src/PlinthIcon.tsx
+function Oe({ size: e, label: t, mirror: n = !1, className: r, children: i, "aria-label": a, ...o }) {
+	let s = t ?? a, l = s?.trim() ? s : void 0;
+	return /* @__PURE__ */ c("span", {
+		className: v("plinth-icon", r),
+		"data-size": De(e),
+		"data-mirror": n ? "" : void 0,
+		role: l ? "img" : void 0,
+		"aria-label": l,
+		"aria-hidden": l ? void 0 : "true",
+		...o,
+		children: i
+	});
+}
+//#endregion
+//#region src/heading.ts
+var ke = [
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+function Ae(e) {
+	return ke.includes(e) ? e : "h2";
+}
+//#endregion
+//#region src/PlinthListCard.tsx
+function je({ heading: e, headingLevel: t, footer: n, className: r, children: i, ...a }) {
+	let o = Ae(t);
+	return /* @__PURE__ */ l("div", {
+		...a,
+		className: v("plinth-list-card", r),
+		children: [
+			e?.trim() ? /* @__PURE__ */ c(o, {
+				className: "plinth-list-card-heading",
+				children: e
+			}) : null,
+			/* @__PURE__ */ c("ul", {
+				className: "plinth-list-card-list",
+				role: "list",
+				children: i
+			}),
+			n?.trim() ? /* @__PURE__ */ c("p", {
+				className: "plinth-list-card-footer",
+				children: n
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/PlinthListRow.tsx
+function Me({ description: e, chevron: t = !1, href: n, button: r = !1, current: i = !1, disabled: a = !1, leading: o, trailing: s, className: u, children: d, ...f }) {
+	let p = n ? "a" : r ? "button" : "div", m = p, h = y(s);
+	return /* @__PURE__ */ l(m, {
+		type: p === "button" ? "button" : void 0,
+		href: p === "a" && !a ? n : void 0,
+		"aria-current": i && p !== "button" ? "page" : void 0,
+		disabled: p === "button" && a ? !0 : void 0,
+		role: p === "a" && a ? "link" : void 0,
+		"aria-disabled": p === "a" && a ? "true" : void 0,
+		...f,
+		className: v("plinth-list-row", u),
+		children: [
+			y(o) ? /* @__PURE__ */ c("span", {
+				className: "plinth-list-row-leading",
+				children: o
+			}) : null,
+			/* @__PURE__ */ l("span", {
+				className: "plinth-list-row-content",
+				children: [/* @__PURE__ */ c("span", {
+					className: "plinth-list-row-title",
+					children: d
+				}), e ? /* @__PURE__ */ c("span", {
+					className: "plinth-list-row-description",
+					children: e
+				}) : null]
+			}),
+			h || t ? /* @__PURE__ */ l("span", {
+				className: "plinth-list-row-trailing",
+				children: [h ? s : null, t ? /* @__PURE__ */ c("span", {
+					className: "plinth-icon plinth-list-row-chevron",
+					"data-size": "sm",
+					"data-mirror": "",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ c("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ c("path", { d: "M9 6l6 6-6 6" })
+					})
+				}) : null]
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/PlinthSheet.tsx
+function Ne({ id: e, title: t, description: n, closeLabel: r = "Close", side: a, sidePhone: o, footer: s, className: u, children: d, ref: f, ...p }) {
+	let m = i(), h = Z(f);
+	if (!t?.trim()) throw Error("<PlinthSheet> needs a title: it is the sheet's accessible name.");
+	let g = e?.trim() || `plinth-sheet-${m}`, _ = !!n?.trim(), b = V(o), x = (b ?? B(a)) === "bottom";
+	return /* @__PURE__ */ c("dialog", {
+		id: g,
+		"data-side": B(a),
+		"data-side-phone": b,
+		closedby: "any",
+		"aria-labelledby": `${g}-title`,
+		"aria-describedby": _ ? `${g}-description` : void 0,
+		...p,
+		ref: h,
+		className: v("plinth-sheet", u),
+		children: /* @__PURE__ */ l("div", {
+			className: "plinth-sheet-panel",
+			children: [
+				x ? /* @__PURE__ */ c("div", {
+					className: "plinth-sheet-handle",
+					"aria-hidden": "true"
+				}) : null,
+				/* @__PURE__ */ l("div", {
+					className: "plinth-sheet-header",
+					children: [
+						/* @__PURE__ */ c("h2", {
+							id: `${g}-title`,
+							className: "plinth-sheet-title",
+							children: t
+						}),
+						_ ? /* @__PURE__ */ c("p", {
+							id: `${g}-description`,
+							className: "plinth-sheet-description",
+							children: n
+						}) : null,
+						/* @__PURE__ */ c(Y, {
+							className: "plinth-sheet-close",
+							label: r,
+							variant: "ghost",
+							commandfor: g,
+							command: "close",
+							children: /* @__PURE__ */ c("svg", {
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: /* @__PURE__ */ c("path", { d: "M6 6l12 12M18 6L6 18" })
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "plinth-sheet-body",
+					children: d
+				}),
+				y(s) ? /* @__PURE__ */ c("div", {
+					className: "plinth-sheet-footer",
+					children: s
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+//#region src/PlinthMenuSheet.tsx
+var $ = (e) => e?.trim() ? e : void 0;
+function Pe({ id: e, title: t = "Menu", closeLabel: n = "Close", userName: r, userDetail: a, userSrc: o, userHref: s, account: u, className: d, children: f, ...p }) {
+	let m = i(), h = e?.trim() || `plinth-menu-sheet-${m}`, g = $(s);
+	return /* @__PURE__ */ l(Ne, {
+		id: h,
+		title: t,
+		closeLabel: n,
+		side: "end",
+		sidePhone: "bottom",
+		...p,
+		className: v("plinth-menu-sheet", d),
+		children: [
+			r?.trim() ? /* @__PURE__ */ c(Me, {
+				className: "plinth-menu-sheet-user",
+				description: $(a),
+				href: g,
+				chevron: !!g,
+				leading: /* @__PURE__ */ c(S, {
+					name: r,
+					src: $(o),
+					size: "lg",
+					decorative: !0
+				}),
+				children: r
+			}) : null,
+			/* @__PURE__ */ c("nav", {
+				className: "plinth-menu-sheet-nav",
+				"aria-labelledby": `${h}-title`,
+				children: f
+			}),
+			y(u) ? /* @__PURE__ */ c("div", {
+				className: "plinth-menu-sheet-account",
+				children: u
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/PlinthPill.tsx
+function Fe({ count: e, href: t, selected: n = !1, disabled: r = !1, className: i, children: a, ...o }) {
+	let s = t ? "a" : "button", u = s, d = e != null && String(e).trim() !== "";
+	return /* @__PURE__ */ l(u, {
+		type: s === "button" ? "button" : void 0,
+		href: s === "a" && !r ? t : void 0,
+		"aria-pressed": s === "button" ? String(n) : void 0,
+		"aria-current": s === "a" && n ? "page" : void 0,
+		disabled: s === "button" && r ? !0 : void 0,
+		role: s === "a" && r ? "link" : void 0,
+		"aria-disabled": s === "a" && r ? "true" : void 0,
+		...o,
+		className: v("plinth-pill", i),
+		children: [/* @__PURE__ */ c("span", {
+			className: "plinth-pill-label",
+			children: a
+		}), d ? /* @__PURE__ */ c("span", {
+			className: "plinth-pill-count",
+			children: e
+		}) : null]
+	});
+}
+//#endregion
+//#region src/PlinthPillRow.tsx
+function Ie({ label: e, nav: t = !1, className: n, children: r, ...i }) {
+	return /* @__PURE__ */ c(t ? "nav" : "div", {
+		role: t ? void 0 : "group",
+		"aria-label": e || void 0,
+		...i,
+		className: v("plinth-pill-row", n),
+		children: r
+	});
+}
+//#endregion
+//#region src/PlinthSectionMenu.tsx
+function Le({ label: e, nav: t = !0, className: n, children: r, ...i }) {
+	return /* @__PURE__ */ c(t ? "nav" : "div", {
+		role: t ? void 0 : "group",
+		"aria-label": e?.trim() ? e : void 0,
+		...i,
+		className: v("plinth-section-menu", n),
+		children: r
+	});
+}
+//#endregion
+//#region src/PlinthSectionMenuItem.tsx
+function Re({ count: e, href: t, current: n = !1, disabled: r = !1, className: i, children: a, ...o }) {
+	let s = t?.trim() ? "a" : "button", u = s, d = e != null && String(e).trim() !== "";
+	return /* @__PURE__ */ l(u, {
+		type: s === "button" ? "button" : void 0,
+		href: s === "a" && !r ? t : void 0,
+		"aria-pressed": s === "button" ? String(n) : void 0,
+		"aria-current": s === "a" && n ? "page" : void 0,
+		disabled: s === "button" && r ? !0 : void 0,
+		role: s === "a" && r ? "link" : void 0,
+		"aria-disabled": s === "a" && r ? "true" : void 0,
+		...o,
+		className: v("plinth-section-menu-item", i),
+		children: [/* @__PURE__ */ c("span", {
+			className: "plinth-section-menu-label",
+			children: a
+		}), d ? /* @__PURE__ */ c("span", {
+			className: "plinth-section-menu-count",
+			children: e
+		}) : null]
+	});
+}
+//#endregion
+//#region src/list-row.ts
+var ze = "<span class=\"plinth-icon plinth-list-row-chevron\" data-size=\"sm\" data-mirror aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"></path></svg></span>";
+//#endregion
+export { S as PlinthAvatar, C as PlinthBadge, E as PlinthButton, N as PlinthCallout, re as PlinthCodeBlock, se as PlinthConfirmDialog, ce as PlinthDataTable, ue as PlinthDataTableCell, de as PlinthDataTableColumn, me as PlinthDataTableEmpty, he as PlinthDataTableRow, ge as PlinthDataTableSort, ve as PlinthDialog, we as PlinthDrawer, Te as PlinthHeader, Oe as PlinthIcon, Y as PlinthIconButton, je as PlinthListCard, Me as PlinthListRow, Pe as PlinthMenuSheet, Fe as PlinthPill, Ie as PlinthPillRow, Le as PlinthSectionMenu, Re as PlinthSectionMenuItem, Ne as PlinthSheet, _ as avatarGlyph, m as avatarSizes, w as buttonVariants, M as calloutIcons, A as calloutRole, k as calloutRoles, O as calloutTone, D as calloutTones, L as confirmDialogFieldLabels, ie as confirmDialogKind, F as confirmDialogKinds, R as confirmDialogPattern, I as confirmDialogTone, ae as confirmDialogTones, d as controlSizes, J as dataTableCellKind, q as dataTableCellKinds, K as dataTableSort, le as dataTableSortIcon, G as dataTableSorts, oe as dialogCloseIcon, W as dialogSidePhone, U as dialogSidePhones, Ce as drawerCloseIcon, ye as drawerDesktop, Q as drawerDesktops, Se as drawerSnap, xe as drawerSnapPoints, be as drawerSnaps, Ae as headingLevel, ke as headingLevels, p as iconSizeFor, Ee as iconSizes, g as initialsFrom, ze as listRowChevron, f as resolveSize, H as sheetCloseIcon, B as sheetSide, V as sheetSidePhone, z as sheetSides, u as sizes, X as swipeToClose, b as tones, Z as useSwipeToClose };