@studiolxd/brand 49.28.0 → 50.0.0

package/dist/sidebar.js

@@ -12,10 +12,10 @@ function d(e, t) {
 	let r = parseFloat(getComputedStyle(n).inlineSize);
 	return n.remove(), r;
 }
-function f({ logo: t, children: f, footer: p, id: m, label: h, resizerLabel: g, resizerValueText: _, mode: v }) {
-	let y = e("sidebar"), b = a(r), x = b ? b.sidebar : v ?? "open", S = b ? b.isDesktop : !0, C = S && x === "rail", w = !S, T = s(null), E = s(null), [D, O] = c(null);
+function f({ logo: t, children: f, footer: p, id: m, label: h, resizerLabel: g, resizerValueText: _, mode: v, className: y }) {
+	let b = e("sidebar"), x = a(r), S = x ? x.sidebar : v ?? "open", C = x ? x.isDesktop : !0, w = C && S === "rail", T = !C, E = s(null), D = s(null), [O, k] = c(null);
 	o(() => {
-		let e = T.current;
+		let e = E.current;
 		if (!e) return;
 		let t = {
 			min: d(e, "--sidebar-min-width"),
@@ -23,52 +23,56 @@ function f({ logo: t, children: f, footer: p, id: m, label: h, resizerLabel: g,
 			rail: d(e, "--sidebar-rail-width"),
 			base: d(e, "--sidebar-width")
 		};
-		Object.values(t).every(Number.isFinite) && O(t);
+		Object.values(t).every(Number.isFinite) && k(t);
 	}, []);
-	let k = (e) => {
-		!w || !b || e.target.closest("a[href], [aria-haspopup=\"dialog\"]") && b.closeSidebar();
-	}, A = i((e) => {
-		let t = T.current;
-		if (!t || !b) return;
+	let A = (e) => {
+		!T || !x || e.target.closest("a[href], [aria-haspopup=\"dialog\"]") && x.closeSidebar();
+	}, j = i((e) => {
+		let t = E.current;
+		if (!t || !x) return;
 		let n = d(t, "--sidebar-min-width"), r = d(t, "--sidebar-max-width");
-		e < d(t, "--sidebar-rail-width") ? b.setSidebar("closed") : e < n ? b.setSidebar("rail") : (b.setSidebar("open"), b.setSidebarWidth(Math.min(r, Math.round(e))));
-	}, [b]), j = (e) => {
-		if (!T.current) return;
+		e < d(t, "--sidebar-rail-width") ? x.setSidebar("closed") : e < n ? x.setSidebar("rail") : (x.setSidebar("open"), x.setSidebarWidth(Math.min(r, Math.round(e))));
+	}, [x]), M = (e) => {
+		if (!E.current) return;
 		e.preventDefault();
 		let t = e.currentTarget;
 		t.setPointerCapture(e.pointerId), t.dataset.dragging = "true";
-		let n = T.current.getBoundingClientRect().left, r = (e) => A(e.clientX - n), i = () => {
+		let n = E.current.getBoundingClientRect().left, r = (e) => j(e.clientX - n), i = () => {
 			delete t.dataset.dragging, t.removeEventListener("pointermove", r), t.removeEventListener("pointerup", i), t.removeEventListener("pointercancel", i);
 		};
 		t.addEventListener("pointermove", r), t.addEventListener("pointerup", i), t.addEventListener("pointercancel", i);
-	}, M = (e) => {
-		if (!T.current || !b) return;
-		let t = d(T.current, "--sidebar-resize-step-px"), n = T.current.getBoundingClientRect().width;
-		e.key === "ArrowLeft" && (e.preventDefault(), A(n - t)), e.key === "ArrowRight" && (e.preventDefault(), x === "open" ? A(n + t) : b.setSidebar("open")), e.key === "Home" && (e.preventDefault(), b.setSidebar("rail")), e.key === "End" && (e.preventDefault(), A(d(T.current, "--sidebar-max-width")));
+	}, N = (e) => {
+		if (!E.current || !x) return;
+		let t = d(E.current, "--sidebar-resize-step-px"), n = E.current.getBoundingClientRect().width;
+		e.key === "ArrowLeft" && (e.preventDefault(), j(n - t)), e.key === "ArrowRight" && (e.preventDefault(), S === "open" ? j(n + t) : x.setSidebar("open")), e.key === "Home" && (e.preventDefault(), x.setSidebar("rail")), e.key === "End" && (e.preventDefault(), j(d(E.current, "--sidebar-max-width")));
 	};
 	o(() => {
-		if (!w) return;
-		if (x === "open") {
-			E.current = document.activeElement, T.current?.focus();
+		if (!T) return;
+		if (S === "open") {
+			D.current = document.activeElement, E.current?.focus();
 			return;
 		}
-		let e = T.current, t = document.activeElement;
-		(e && t instanceof Node && e.contains(t) || t === document.body || t === null) && E.current?.focus?.(), E.current = null;
-	}, [w, x]);
-	let N = Math.round(x === "rail" ? D?.rail ?? 0 : (b?.sidebarWidth || D?.base) ?? 0), P = ["sidebar", w ? "sidebar--drawer" : `sidebar--${x}`].join(" ");
+		let e = E.current, t = document.activeElement;
+		(e && t instanceof Node && e.contains(t) || t === document.body || t === null) && D.current?.focus?.(), D.current = null;
+	}, [T, S]);
+	let P = Math.round(S === "rail" ? O?.rail ?? 0 : (x?.sidebarWidth || O?.base) ?? 0), F = [
+		"sidebar",
+		T ? "sidebar--drawer" : `sidebar--${S}`,
+		y
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ l(n.Provider, {
-		value: { rail: C },
+		value: { rail: w },
 		children: /* @__PURE__ */ u("aside", {
-			ref: T,
+			ref: E,
 			id: m,
-			className: P,
-			"aria-label": y("label", h),
-			role: w && x === "open" ? "dialog" : void 0,
-			"aria-modal": w && x === "open" ? !0 : void 0,
-			"data-state": x,
-			tabIndex: w ? -1 : void 0,
-			inert: w && x === "closed" ? !0 : void 0,
-			onClick: k,
+			className: F,
+			"aria-label": b("label", h),
+			role: T && S === "open" ? "dialog" : void 0,
+			"aria-modal": T && S === "open" ? !0 : void 0,
+			"data-state": S,
+			tabIndex: T ? -1 : void 0,
+			inert: T && S === "closed" ? !0 : void 0,
+			onClick: A,
 			children: [/* @__PURE__ */ u("div", {
 				className: "sidebar__inner",
 				children: [
@@ -85,18 +89,18 @@ function f({ logo: t, children: f, footer: p, id: m, label: h, resizerLabel: g,
 						children: p
 					})
 				]
-			}), S && b && x !== "closed" && /* @__PURE__ */ l("div", {
+			}), C && x && S !== "closed" && /* @__PURE__ */ l("div", {
 				className: "sidebar__resizer",
 				role: "separator",
 				"aria-orientation": "vertical",
-				"aria-label": y("resizer", g),
-				"aria-valuenow": N,
-				"aria-valuemin": D ? Math.round(D.rail) : void 0,
-				"aria-valuemax": D ? Math.round(D.max) : void 0,
-				"aria-valuetext": y("resizerValue", _)(N),
+				"aria-label": b("resizer", g),
+				"aria-valuenow": P,
+				"aria-valuemin": O ? Math.round(O.rail) : void 0,
+				"aria-valuemax": O ? Math.round(O.max) : void 0,
+				"aria-valuetext": b("resizerValue", _)(P),
 				tabIndex: 0,
-				onPointerDown: j,
-				onKeyDown: M
+				onPointerDown: M,
+				onKeyDown: N
 			})]
 		})
 	});

package/dist/site-footer.js

@@ -4,48 +4,45 @@ import { Heading as t } from "./heading.js";
 import { List as n } from "./list.js";
 import { t as r } from "./_shared/logo.js";
 import { Paragraph as i } from "./paragraph.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { t as a } from "./_shared/default-render-link.js";
+import { LegalFooter as o } from "./legal-footer.js";
+import { cloneElement as s, isValidElement as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/stories/sections/SiteFooter/SiteFooter.tsx
-function s({ children: e, ...t }) {
-	return /* @__PURE__ */ a("a", {
-		...t,
-		children: e
-	});
-}
-function c({ logo: c = /* @__PURE__ */ a(r, { size: "lg" }), tagline: l, columns: u, renderLink: d = s, aside: f, legal: p, columnTitleLevel: m = 2, surface: h = "dark", width: g = "xl", className: _, id: v }) {
-	return /* @__PURE__ */ a("footer", {
-		id: v,
+function d({ logo: o = /* @__PURE__ */ l(r, { size: "lg" }), tagline: s, columns: c, renderLink: d = a, aside: p, legal: m, columnTitleLevel: h = 2, surface: g = "dark", width: _ = "xl", className: v, id: y }) {
+	return /* @__PURE__ */ l("footer", {
+		id: y,
 		className: [
 			"site-footer",
-			h === "dark" && "surface-dark",
-			_
+			g === "dark" && "surface-dark",
+			v
 		].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ o(e, {
-			width: g,
+		children: /* @__PURE__ */ u(e, {
+			width: _,
 			innerClassName: "site-footer__inner",
 			children: [
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ u("div", {
 					className: "site-footer__brand",
-					children: [c, l && /* @__PURE__ */ a(i, {
+					children: [o, s && /* @__PURE__ */ l(i, {
 						size: "large",
 						className: "site-footer__tagline",
-						children: l
+						children: s
 					})]
 				}),
-				(u?.length || f) && /* @__PURE__ */ o("div", {
+				(c?.length || p) && /* @__PURE__ */ u("div", {
 					className: "site-footer__body",
-					children: [u?.map((e) => /* @__PURE__ */ o("nav", {
+					children: [c?.map((e) => /* @__PURE__ */ u("nav", {
 						className: "site-footer__column",
 						"aria-label": e.title,
-						children: [/* @__PURE__ */ a(t, {
-							level: m,
+						children: [/* @__PURE__ */ l(t, {
+							level: h,
 							size: 3,
 							className: "site-footer__column-title",
 							children: e.title
-						}), /* @__PURE__ */ a(n, {
+						}), /* @__PURE__ */ l(n, {
 							type: "plain",
 							className: "site-footer__links",
-							children: e.links.map((e) => /* @__PURE__ */ a("li", { children: d({
+							children: e.links.map((e) => /* @__PURE__ */ l("li", { children: d({
 								href: e.href,
 								className: "site-footer__link link--ink",
 								children: e.label,
@@ -55,18 +52,21 @@ function c({ logo: c = /* @__PURE__ */ a(r, { size: "lg" }), tagline: l, columns
 								} : {}
 							}) }, e.id ?? e.href))
 						})]
-					}, e.id ?? e.title)), f && /* @__PURE__ */ a("div", {
+					}, e.id ?? e.title)), p && /* @__PURE__ */ l("div", {
 						className: "site-footer__aside",
-						children: f
+						children: p
 					})]
 				}),
-				p && /* @__PURE__ */ a("div", {
+				m && /* @__PURE__ */ l("div", {
 					className: "site-footer__legal",
-					children: p
+					children: f(m)
 				})
 			]
 		})
 	});
 }
+function f(e) {
+	return c(e) && e.type === o ? s(e, { as: "div" }) : e;
+}
 //#endregion
-export { c as SiteFooter };
+export { d as SiteFooter };

package/dist/site-header.js

@@ -4,72 +4,67 @@ import { n as e } from "./_shared/brandmessagescontext.js";
 import { Container as t } from "./container.js";
 import { MenuButton as n } from "./menu-button.js";
 import { t as r } from "./_shared/logo.js";
-import { useEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { t as i } from "./_shared/default-render-link.js";
+import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/stories/sections/SiteHeader/SiteHeader.tsx
-function l({ children: e, ...t }) {
-	return /* @__PURE__ */ s("a", {
-		...t,
-		children: e
-	});
-}
-function u({ logoHref: u = "/", logoLabel: d, menuLabel: f, menuCloseLabel: p, logoSize: m = "xxl", logo: h = /* @__PURE__ */ s(r, { size: m }), menuButtonSize: g = "lg", renderLogoLink: _ = l, width: v = "xl", open: y, onOpenChange: b, children: x, settings: S, panelId: C = "site-header-panel", actions: w, language: T }) {
-	let E = e("siteHeader"), [D, O] = o(!1), k = y !== void 0, A = k ? y : D, j = !!(x || S || T), M = a(null), N = a(null), P = (e) => {
-		k || O(e), b?.(e);
+function d({ logoHref: d = "/", logoLabel: f, menuLabel: p, menuCloseLabel: m, logoSize: h = "xxl", logo: g = /* @__PURE__ */ l(r, { size: h }), menuButtonSize: _ = "lg", renderLogoLink: v = i, width: y = "xl", open: b, onOpenChange: x, children: S, settings: C, panelId: w, actions: T, language: E }) {
+	let D = e("siteHeader"), O = o(), k = w ?? O, [A, j] = c(!1), M = b !== void 0, N = M ? b : A, P = !!(S || C || E), F = s(null), I = s(null), L = (e) => {
+		M || j(e), x?.(e);
 	};
-	return i(() => {
-		if (!A) return;
+	return a(() => {
+		if (!N) return;
 		let e = (e) => {
-			e.key === "Escape" && (P(!1), N.current?.focus());
+			e.key === "Escape" && (L(!1), I.current?.focus());
 		}, t = (e) => {
 			let t = e.target;
-			M.current?.contains(t) || t?.closest("[role=\"menu\"], [role=\"listbox\"], [role=\"dialog\"]") || P(!1);
+			F.current?.contains(t) || t?.closest("[role=\"menu\"], [role=\"listbox\"], [role=\"dialog\"]") || L(!1);
 		};
 		document.addEventListener("keydown", e), document.addEventListener("pointerdown", t);
 		let n = document.body.style.overflow;
 		return document.body.style.overflow = "hidden", () => {
 			document.removeEventListener("keydown", e), document.removeEventListener("pointerdown", t), document.body.style.overflow = n;
 		};
-	}, [A]), /* @__PURE__ */ s("header", {
-		ref: M,
+	}, [N]), /* @__PURE__ */ l("header", {
+		ref: F,
 		className: "site-header",
-		children: /* @__PURE__ */ c(t, {
-			width: v,
+		children: /* @__PURE__ */ u(t, {
+			width: y,
 			innerClassName: "site-header__bar",
 			children: [
-				_({
-					href: u,
+				v({
+					href: d,
 					className: "site-header__logo",
-					"aria-label": E("logo", d),
-					children: h
+					"aria-label": D("logo", f),
+					children: g
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ u("div", {
 					className: "site-header__controls",
-					children: [w && /* @__PURE__ */ s("div", {
+					children: [T && /* @__PURE__ */ l("div", {
 						className: "site-header__actions",
-						children: w
-					}), j && /* @__PURE__ */ s(n, {
-						ref: N,
-						isOpen: A,
-						onClick: () => P(!A),
-						label: f,
-						closeLabel: p,
-						size: g,
-						"aria-controls": C
+						children: T
+					}), P && /* @__PURE__ */ l(n, {
+						ref: I,
+						isOpen: N,
+						onClick: () => L(!N),
+						label: p,
+						closeLabel: m,
+						size: _,
+						"aria-controls": k
 					})]
 				}),
-				j && /* @__PURE__ */ s("div", {
-					className: ["site-header__panel", A ? "site-header__panel--open" : ""].filter(Boolean).join(" "),
-					id: C,
-					inert: !A,
-					"aria-hidden": !A,
-					children: /* @__PURE__ */ c(t, {
-						width: v,
+				P && /* @__PURE__ */ l("div", {
+					className: ["site-header__panel", N ? "site-header__panel--open" : ""].filter(Boolean).join(" "),
+					id: k,
+					inert: !N,
+					"aria-hidden": !N,
+					children: /* @__PURE__ */ u(t, {
+						width: y,
 						space: "none",
 						innerClassName: "site-header__panel-inner",
-						children: [x, (T || S) && /* @__PURE__ */ c("div", {
+						children: [S, (E || C) && /* @__PURE__ */ u("div", {
 							className: "site-header__settings",
-							children: [T, S]
+							children: [E, C]
 						})]
 					})
 				})
@@ -78,4 +73,4 @@ function u({ logoHref: u = "/", logoLabel: d, menuLabel: f, menuCloseLabel: p, l
 	});
 }
 //#endregion
-export { u as SiteHeader };
+export { d as SiteHeader };

package/dist/site-nav.js

@@ -3,32 +3,23 @@ import './site-nav.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Heading as t } from "./heading.js";
 import { Tag as n } from "./tag.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { t as r } from "./_shared/default-render-link.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/molecules/SiteNav/SiteNav.tsx
-function a({ href: e, children: t, className: n, "aria-current": i, target: a, rel: o }) {
-	return /* @__PURE__ */ r("a", {
-		href: e,
-		className: n,
-		"aria-current": i,
-		target: a,
-		rel: o,
-		children: t
-	});
-}
 function o(e, t) {
 	return t || (e === "_blank" ? "noopener noreferrer" : void 0);
 }
 var s = 5;
-function c({ groups: c, label: l, renderLink: u = a, className: d }) {
+function c({ groups: c, label: l, renderLink: u = r, className: d }) {
 	let f = e("siteNav"), p = ["site-nav", d].filter(Boolean).join(" "), m = c.reduce((e, t) => e + (t.columns ?? 1), 0), h = Math.min(m, s) || 1;
-	return /* @__PURE__ */ r("nav", {
+	return /* @__PURE__ */ i("nav", {
 		className: p,
 		"aria-label": f("label", l),
 		"data-columns": h,
-		children: c.map((e) => /* @__PURE__ */ i("div", {
+		children: c.map((e) => /* @__PURE__ */ a("div", {
 			className: "site-nav__group",
 			"data-group-columns": e.columns === 2 ? 2 : void 0,
-			children: [/* @__PURE__ */ r(t, {
+			children: [/* @__PURE__ */ i(t, {
 				level: 2,
 				size: 6,
 				className: "site-nav__label",
@@ -37,11 +28,11 @@ function c({ groups: c, label: l, renderLink: u = a, className: d }) {
 					className: "site-nav__label-link",
 					children: e.label
 				}) : e.label
-			}), /* @__PURE__ */ r("ul", {
+			}), /* @__PURE__ */ i("ul", {
 				className: "site-nav__list",
-				children: e.items.map((e) => /* @__PURE__ */ i("li", {
+				children: e.items.map((e) => /* @__PURE__ */ a("li", {
 					className: "site-nav__item",
-					children: [e.disabled ? /* @__PURE__ */ r("span", {
+					children: [e.disabled ? /* @__PURE__ */ i("span", {
 						className: "site-nav__link site-nav__link--disabled",
 						role: "link",
 						"aria-disabled": "true",
@@ -53,7 +44,7 @@ function c({ groups: c, label: l, renderLink: u = a, className: d }) {
 						target: e.target,
 						rel: o(e.target, e.rel),
 						children: e.label
-					}), e.badge && /* @__PURE__ */ r(n, {
+					}), e.badge && /* @__PURE__ */ i(n, {
 						variant: e.disabled ? "neutral" : "info",
 						className: "site-nav__badge",
 						children: e.badge

package/dist/site-search.js

@@ -5,21 +5,19 @@ import { Spinner as t } from "./spinner.js";
 import { Button as n } from "./button.js";
 import { Skeleton as r } from "./skeleton.js";
 import { Alert as i } from "./alert.js";
-import { EmptyState as a } from "./empty-state.js";
-import { SearchForm as o } from "./search-form.js";
-import { forwardRef as s, useId as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { t as a } from "./_shared/default-render-link.js";
+import { EmptyState as o } from "./empty-state.js";
+import { SearchForm as s } from "./search-form.js";
+import { forwardRef as c, useId as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/stories/organisms/SiteSearch/SiteSearch.tsx
-function d(e) {
-	return /* @__PURE__ */ l("a", { ...e });
-}
-var f = s(function({ query: s, onQueryChange: f, onSubmit: p, action: m, name: h = "q", status: g = "idle", results: _ = [], total: v, minLength: y = 2, suggestions: b, onSuggestionSelect: x, onRetry: S, toolbar: C, footer: w, headingLevel: T = 2, size: E, loadingRows: D = 3, onSelect: O, renderLink: k = d, label: A, labelHidden: j = !0, placeholder: M, submitLabel: N, resultsLabel: P, className: F, id: I, ...L }, R) {
-	let z = e("siteSearch"), B = c(), V = I ?? B, H = `${V}-input`, U = `${V}-status`, W = `${V}-results`, G = `h${T}`, K = s.trim(), q = v ?? _.length, J = g === "ready" && _.length > 0, Y = g === "idle" ? z("idle") : g === "typing" ? K.length < y ? z("minLength")(y) : z("pending") : g === "loading" ? z("loading") : g === "error" ? null : z("results")(q, K);
-	return /* @__PURE__ */ u("div", {
+var f = c(function({ query: c, onQueryChange: f, onSubmit: p, action: m, name: h = "q", status: g = "idle", results: _ = [], total: v, minLength: y = 2, suggestions: b, onSuggestionSelect: x, onRetry: S, toolbar: C, footer: w, headingLevel: T = 2, size: E, loadingRows: D = 3, onSelect: O, renderLink: k = a, label: A, labelHidden: j = !0, placeholder: M, submitLabel: N, resultsLabel: P, className: F, id: I, ...L }, R) {
+	let z = e("siteSearch"), B = l(), V = I ?? B, H = `${V}-input`, U = `${V}-status`, W = `${V}-results`, G = `h${T}`, K = c.trim(), q = v ?? _.length, J = g === "ready" && _.length > 0, Y = g === "idle" ? z("idle") : g === "typing" ? K.length < y ? z("minLength")(y) : z("pending") : g === "loading" ? z("loading") : g === "error" ? null : z("results")(q, K);
+	return /* @__PURE__ */ d("div", {
 		className: ["site-search", F].filter(Boolean).join(" "),
 		...L,
 		children: [
-			/* @__PURE__ */ l(o, {
+			/* @__PURE__ */ u(s, {
 				ref: R,
 				className: "site-search__form",
 				id: H,
@@ -28,7 +26,7 @@ var f = s(function({ query: s, onQueryChange: f, onSubmit: p, action: m, name: h
 				labelHidden: j,
 				placeholder: z("placeholder", M),
 				submitLabel: z("submit", N),
-				value: s,
+				value: c,
 				onChange: (e) => f(e.target.value),
 				...p ? { onSubmit: p } : {},
 				action: m,
@@ -36,33 +34,33 @@ var f = s(function({ query: s, onQueryChange: f, onSubmit: p, action: m, name: h
 				...J ? { controls: W } : {},
 				...E ? { size: E } : {}
 			}),
-			C ? /* @__PURE__ */ l("div", {
+			C ? /* @__PURE__ */ u("div", {
 				className: "site-search__toolbar",
 				children: C
 			}) : null,
-			/* @__PURE__ */ u("p", {
+			/* @__PURE__ */ d("p", {
 				className: "site-search__status",
 				id: U,
 				role: "status",
 				"aria-live": "polite",
-				children: [g === "loading" ? /* @__PURE__ */ l(t, {
+				children: [g === "loading" ? /* @__PURE__ */ u(t, {
 					size: "sm",
 					"aria-hidden": !0
-				}) : null, /* @__PURE__ */ l("span", {
+				}) : null, /* @__PURE__ */ u("span", {
 					className: "site-search__status-text",
 					children: Y
 				})]
 			}),
-			g === "idle" && b && b.length > 0 && x ? /* @__PURE__ */ u("div", {
+			g === "idle" && b && b.length > 0 && x ? /* @__PURE__ */ d("div", {
 				className: "site-search__suggestions",
-				children: [/* @__PURE__ */ l("span", {
+				children: [/* @__PURE__ */ u("span", {
 					className: "site-search__suggestions-label",
 					id: `${V}-suggestions`,
 					children: z("suggestionsLabel")
-				}), /* @__PURE__ */ l("ul", {
+				}), /* @__PURE__ */ u("ul", {
 					className: "site-search__suggestions-list",
 					"aria-labelledby": `${V}-suggestions`,
-					children: b.map((e) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(n, {
+					children: b.map((e) => /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u(n, {
 						variant: "outline",
 						size: "sm",
 						onClick: () => x(e),
@@ -70,31 +68,31 @@ var f = s(function({ query: s, onQueryChange: f, onSubmit: p, action: m, name: h
 					}) }, e))
 				})]
 			}) : null,
-			g === "loading" ? /* @__PURE__ */ l("div", {
+			g === "loading" ? /* @__PURE__ */ u("div", {
 				className: "site-search__loading",
 				"aria-hidden": !0,
-				children: Array.from({ length: D }, (e, t) => /* @__PURE__ */ u("div", {
+				children: Array.from({ length: D }, (e, t) => /* @__PURE__ */ d("div", {
 					className: "site-search__ghost",
 					children: [
-						/* @__PURE__ */ l(r, { className: "site-search__ghost-section" }),
-						/* @__PURE__ */ l(r, { className: "site-search__ghost-title" }),
-						/* @__PURE__ */ l(r, {}),
-						/* @__PURE__ */ l(r, { className: "site-search__ghost-url" })
+						/* @__PURE__ */ u(r, { className: "site-search__ghost-section" }),
+						/* @__PURE__ */ u(r, { className: "site-search__ghost-title" }),
+						/* @__PURE__ */ u(r, {}),
+						/* @__PURE__ */ u(r, { className: "site-search__ghost-url" })
 					]
 				}, t))
 			}) : null,
-			J ? /* @__PURE__ */ l("ol", {
+			J ? /* @__PURE__ */ u("ol", {
 				className: "site-search__results",
 				id: W,
 				"aria-label": z("resultsLabel", P),
-				children: _.map((e) => /* @__PURE__ */ u("li", {
+				children: _.map((e) => /* @__PURE__ */ d("li", {
 					className: "site-search__result",
 					children: [
-						e.section ? /* @__PURE__ */ l("p", {
+						e.section ? /* @__PURE__ */ u("p", {
 							className: "site-search__result-section",
 							children: e.section
 						}) : null,
-						/* @__PURE__ */ l(G, {
+						/* @__PURE__ */ u(G, {
 							className: "site-search__result-title",
 							children: k({
 								href: e.href,
@@ -103,34 +101,34 @@ var f = s(function({ query: s, onQueryChange: f, onSubmit: p, action: m, name: h
 								onClick: () => O?.(e)
 							})
 						}),
-						e.excerpt ? /* @__PURE__ */ l("p", {
+						e.excerpt ? /* @__PURE__ */ u("p", {
 							className: "site-search__result-excerpt",
 							children: e.excerpt
 						}) : null,
-						e.displayUrl ? /* @__PURE__ */ l("p", {
+						e.displayUrl ? /* @__PURE__ */ u("p", {
 							className: "site-search__result-url",
 							children: e.displayUrl
 						}) : null
 					]
 				}, e.href))
 			}) : null,
-			g === "ready" && _.length === 0 ? /* @__PURE__ */ l(a, {
+			g === "ready" && _.length === 0 ? /* @__PURE__ */ u(o, {
 				className: "site-search__empty",
 				title: z("emptyTitle"),
 				description: z("emptyDescription")
 			}) : null,
-			g === "error" ? /* @__PURE__ */ l(i, {
+			g === "error" ? /* @__PURE__ */ u(i, {
 				className: "site-search__error",
 				variant: "error",
 				title: z("errorTitle"),
 				description: z("errorDescription"),
-				actions: S ? /* @__PURE__ */ l(n, {
+				actions: S ? /* @__PURE__ */ u(n, {
 					variant: "outline",
 					onClick: S,
 					children: z("retry")
 				}) : void 0
 			}) : null,
-			w && J ? /* @__PURE__ */ l("div", {
+			w && J ? /* @__PURE__ */ u("div", {
 				className: "site-search__footer",
 				children: w
 			}) : null

package/dist/site-shell.js

@@ -1,28 +1,29 @@
 'use client';
 import './site-shell.css';
 import { t as e } from "./_shared/portal-container.js";
-import { forwardRef as t, useCallback as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { t } from "./_shared/assign-ref.js";
+import { forwardRef as n, useCallback as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/sections/SiteShell/SiteShell.tsx
-var o = t(function({ header: t, footer: o, children: s, className: c }, l) {
-	let [u, d] = r(null);
-	return /* @__PURE__ */ i("div", {
-		ref: n((e) => {
-			d(e), typeof l == "function" ? l(e) : l && (l.current = e);
-		}, [l]),
-		className: ["site-shell", c].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ a(e.Provider, {
-			value: u,
+var s = n(function({ header: n, footer: s, children: c, className: l }, u) {
+	let [d, f] = i(null);
+	return /* @__PURE__ */ a("div", {
+		ref: r((e) => {
+			f(e), t(u, e);
+		}, [u]),
+		className: ["site-shell", l].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ o(e.Provider, {
+			value: d,
 			children: [
-				t,
-				/* @__PURE__ */ i("div", {
+				n,
+				/* @__PURE__ */ a("div", {
 					className: "site-shell__main",
-					children: s
+					children: c
 				}),
-				o
+				s
 			]
 		})
 	});
 });
 //#endregion
-export { o as SiteShell };
+export { s as SiteShell };