@studiolxd/brand 46.0.0 → 47.1.0

package/dist/multi-select.js

@@ -2,165 +2,166 @@
 import './multi-select.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
-import { forwardRef as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Popover as l } from "@base-ui/react/popover";
+import { n } from "./_shared/portal-container.js";
+import { forwardRef as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Popover as u } from "@base-ui/react/popover";
 //#region src/stories/atoms/MultiSelect/MultiSelect.tsx
-function u(e, t) {
+function d(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-var d = 500, f = n(function({ options: n, value: f, defaultValue: p = [], placeholder: m, disabled: h, readOnly: g, size: _ = "md", onValueChange: v, id: y, name: b, error: x = !1, onBlur: S, className: C, "aria-label": w, "aria-labelledby": T, "aria-describedby": E, removeLabel: D, container: O }, k) {
-	let A = e("multiSelect"), [j, M] = o(!1), [N, P] = o(p), [F, I] = o(-1), L = a(null), R = a(null), z = i(), B = i(), V = a(""), H = a(0), U = f === void 0 ? N : f, W = (e) => `${B}-opt-${e}`;
-	function G(e) {
-		let t = U.includes(e) ? U.filter((t) => t !== e) : [...U, e];
-		f === void 0 && P(t), v?.(t);
+var f = 500, p = r(function({ options: r, value: p, defaultValue: m = [], placeholder: h, disabled: g, readOnly: _, size: v = "md", onValueChange: y, id: b, name: x, error: S = !1, onBlur: C, className: w, "aria-label": T, "aria-labelledby": E, "aria-describedby": D, removeLabel: O, container: k }, A) {
+	let j = e("multiSelect"), M = n(k), [N, P] = s(!1), [F, I] = s(m), [L, R] = s(-1), z = o(null), B = o(null), V = a(), H = a(), U = o(""), W = o(0), G = p === void 0 ? F : p, K = (e) => `${H}-opt-${e}`;
+	function q(e) {
+		let t = G.includes(e) ? G.filter((t) => t !== e) : [...G, e];
+		p === void 0 && I(t), y?.(t);
 	}
-	function K(e) {
-		h || g || (M(!0), I(n.length === 0 ? -1 : e));
+	function J(e) {
+		g || _ || (P(!0), R(r.length === 0 ? -1 : e));
 	}
-	function q() {
-		M(!1), I(-1), V.current = "";
+	function Y() {
+		P(!1), R(-1), U.current = "";
 	}
-	function J(e, t) {
+	function X(e, t) {
 		if (!e) {
 			if (t.reason === "outside-press") {
 				let e = t.event?.target;
-				if (e instanceof Node && L.current?.contains(e)) return;
+				if (e instanceof Node && z.current?.contains(e)) return;
 			}
-			q();
+			Y();
 		}
 	}
-	function Y(e) {
-		if (n.length === 0) return;
-		let t = Date.now(), r = t - H.current > d ? e : V.current + e;
-		V.current = r, H.current = t;
-		let i = r.length === 1 ? F + 1 : Math.max(F, 0), a = r.toLowerCase();
-		for (let e = 0; e < n.length; e++) {
-			let t = (i + e) % n.length;
-			if (n[t].label.toLowerCase().startsWith(a)) {
-				I(t), j || M(!0);
+	function Z(e) {
+		if (r.length === 0) return;
+		let t = Date.now(), n = t - W.current > f ? e : U.current + e;
+		U.current = n, W.current = t;
+		let i = n.length === 1 ? L + 1 : Math.max(L, 0), a = n.toLowerCase();
+		for (let e = 0; e < r.length; e++) {
+			let t = (i + e) % r.length;
+			if (r[t].label.toLowerCase().startsWith(a)) {
+				R(t), N || P(!0);
 				return;
 			}
 		}
 	}
-	function X(e) {
-		if (h || g) return;
-		let t = n.length - 1;
-		if (e.key === "ArrowDown") e.preventDefault(), j ? I((e) => Math.min(e + 1, t)) : K(0);
-		else if (e.key === "ArrowUp") e.preventDefault(), j ? I((e) => Math.max(e - 1, 0)) : K(t);
-		else if (e.key === "Home") e.preventDefault(), j ? I(n.length === 0 ? -1 : 0) : K(0);
-		else if (e.key === "End") e.preventDefault(), j ? I(t) : K(t);
-		else if (e.key === "Enter" || e.key === " ") e.preventDefault(), j ? F >= 0 && F < n.length && G(n[F].value) : K(0);
+	function Q(e) {
+		if (g || _) return;
+		let t = r.length - 1;
+		if (e.key === "ArrowDown") e.preventDefault(), N ? R((e) => Math.min(e + 1, t)) : J(0);
+		else if (e.key === "ArrowUp") e.preventDefault(), N ? R((e) => Math.max(e - 1, 0)) : J(t);
+		else if (e.key === "Home") e.preventDefault(), N ? R(r.length === 0 ? -1 : 0) : J(0);
+		else if (e.key === "End") e.preventDefault(), N ? R(t) : J(t);
+		else if (e.key === "Enter" || e.key === " ") e.preventDefault(), N ? L >= 0 && L < r.length && q(r[L].value) : J(0);
 		else if (e.key === "Escape") {
-			if (!j) return;
-			e.preventDefault(), q();
-		} else e.key === "Tab" ? j && q() : e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), Y(e.key));
+			if (!N) return;
+			e.preventDefault(), Y();
+		} else e.key === "Tab" ? N && Y() : e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), Z(e.key));
 	}
-	function Z(e) {
-		h || g || e.target instanceof Element && e.target.closest(".multi-select__pill-remove") || (e.preventDefault(), R.current?.focus(), j ? q() : K(0));
+	function $(e) {
+		g || _ || e.target instanceof Element && e.target.closest(".multi-select__pill-remove") || (e.preventDefault(), B.current?.focus(), N ? Y() : J(0));
 	}
-	r(() => {
-		!j || F < 0 || document.getElementById(W(F))?.scrollIntoView({ block: "nearest" });
+	i(() => {
+		!N || L < 0 || document.getElementById(K(L))?.scrollIntoView({ block: "nearest" });
 	}, [
-		j,
-		F,
-		B
+		N,
+		L,
+		H
 	]);
-	let Q = [
+	let ee = [
 		"multi-select",
-		_ === "md" ? "" : `multi-select--${_}`,
-		h ? "multi-select--disabled" : "",
-		x ? "multi-select--error" : "",
-		C ?? ""
-	].filter(Boolean).join(" "), $ = ["multi-select__content", _ === "md" ? "" : `multi-select__content--${_}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ c(l.Root, {
-		open: j,
-		onOpenChange: J,
-		children: [/* @__PURE__ */ c("div", {
-			ref: L,
-			className: Q,
-			"data-popup-open": j || void 0,
-			onPointerDown: Z,
+		v === "md" ? "" : `multi-select--${v}`,
+		g ? "multi-select--disabled" : "",
+		S ? "multi-select--error" : "",
+		w ?? ""
+	].filter(Boolean).join(" "), te = ["multi-select__content", v === "md" ? "" : `multi-select__content--${v}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l(u.Root, {
+		open: N,
+		onOpenChange: X,
+		children: [/* @__PURE__ */ l("div", {
+			ref: z,
+			className: ee,
+			"data-popup-open": N || void 0,
+			onPointerDown: $,
 			children: [
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ l("div", {
 					className: "multi-select__values",
-					children: [U.map((e) => {
-						let r = n.find((t) => t.value === e);
-						return r ? /* @__PURE__ */ c("span", {
+					children: [G.map((e) => {
+						let n = r.find((t) => t.value === e);
+						return n ? /* @__PURE__ */ l("span", {
 							className: "multi-select__pill",
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ c("span", {
 								className: "multi-select__pill-label",
-								children: r.label
-							}), !h && !g && /* @__PURE__ */ s("button", {
+								children: n.label
+							}), !g && !_ && /* @__PURE__ */ c("button", {
 								type: "button",
 								className: "multi-select__pill-remove",
-								"aria-label": A("remove", D)(r.label),
+								"aria-label": j("remove", O)(n.label),
 								tabIndex: -1,
 								onClick: (t) => {
-									t.stopPropagation(), G(e), R.current?.focus();
+									t.stopPropagation(), q(e), B.current?.focus();
 								},
-								children: /* @__PURE__ */ s(t, {
+								children: /* @__PURE__ */ c(t, {
 									name: "close",
 									size: "xs"
 								})
 							})]
 						}, e) : null;
-					}), /* @__PURE__ */ s("div", {
+					}), /* @__PURE__ */ c("div", {
 						ref: (e) => {
-							R.current = e, u(k, e);
+							B.current = e, d(A, e);
 						},
 						className: "multi-select__combobox",
-						tabIndex: h ? -1 : 0,
+						tabIndex: g ? -1 : 0,
 						role: "combobox",
-						"aria-expanded": j,
+						"aria-expanded": N,
 						"aria-haspopup": "listbox",
-						"aria-controls": j ? z : void 0,
-						"aria-activedescendant": j && F >= 0 ? W(F) : void 0,
-						"aria-label": T ? void 0 : w ?? A("placeholder", m),
-						"aria-labelledby": T,
-						"aria-describedby": E,
-						"aria-invalid": x || void 0,
-						"aria-disabled": h || void 0,
-						"aria-readonly": g || void 0,
-						id: y,
-						onKeyDown: X,
-						onBlur: S,
-						children: U.length === 0 && /* @__PURE__ */ s("span", {
+						"aria-controls": N ? V : void 0,
+						"aria-activedescendant": N && L >= 0 ? K(L) : void 0,
+						"aria-label": E ? void 0 : T ?? j("placeholder", h),
+						"aria-labelledby": E,
+						"aria-describedby": D,
+						"aria-invalid": S || void 0,
+						"aria-disabled": g || void 0,
+						"aria-readonly": _ || void 0,
+						id: b,
+						onKeyDown: Q,
+						onBlur: C,
+						children: G.length === 0 && /* @__PURE__ */ c("span", {
 							className: "multi-select__placeholder",
-							children: A("placeholder", m)
+							children: j("placeholder", h)
 						})
 					})]
 				}),
-				/* @__PURE__ */ s(t, {
+				/* @__PURE__ */ c(t, {
 					name: "chevron",
 					className: "multi-select__icon"
 				}),
-				b && U.map((e) => /* @__PURE__ */ s("input", {
+				x && G.map((e) => /* @__PURE__ */ c("input", {
 					type: "hidden",
-					name: b,
+					name: x,
 					value: e
 				}, e))
 			]
-		}), /* @__PURE__ */ s(l.Portal, {
-			container: O,
-			children: /* @__PURE__ */ s(l.Positioner, {
+		}), /* @__PURE__ */ c(u.Portal, {
+			container: M,
+			children: /* @__PURE__ */ c(u.Positioner, {
 				className: "multi-select__positioner",
-				anchor: L,
+				anchor: z,
 				align: "start",
 				sideOffset: -1,
-				children: /* @__PURE__ */ s(l.Popup, {
-					className: $,
+				children: /* @__PURE__ */ c(u.Popup, {
+					className: te,
 					initialFocus: !1,
 					finalFocus: !1,
-					children: /* @__PURE__ */ s("div", {
+					children: /* @__PURE__ */ c("div", {
 						role: "listbox",
 						"aria-multiselectable": "true",
-						"aria-label": w ?? m,
-						id: z,
-						children: n.map((e, t) => {
-							let n = U.includes(e.value), r = F === t;
-							return /* @__PURE__ */ c("div", {
-								id: W(t),
+						"aria-label": T ?? h,
+						id: V,
+						children: r.map((e, t) => {
+							let n = G.includes(e.value), r = L === t;
+							return /* @__PURE__ */ l("div", {
+								id: K(t),
 								role: "option",
 								"aria-selected": n,
 								"aria-label": e["aria-label"] ?? e.label,
@@ -173,13 +174,13 @@ var d = 500, f = n(function({ options: n, value: f, defaultValue: p = [], placeh
 									e.preventDefault(), e.stopPropagation();
 								},
 								onClick: () => {
-									G(e.value), I(t), R.current?.focus();
+									q(e.value), R(t), B.current?.focus();
 								},
-								children: [/* @__PURE__ */ s("span", {
+								children: [/* @__PURE__ */ c("span", {
 									className: "multi-select__item-check",
 									"aria-hidden": "true",
-									children: /* @__PURE__ */ s("span", { className: "multi-select__item-check-mark" })
-								}), /* @__PURE__ */ s("span", { children: e.label })]
+									children: /* @__PURE__ */ c("span", { className: "multi-select__item-check-mark" })
+								}), /* @__PURE__ */ c("span", { children: e.label })]
 							}, e.value);
 						})
 					})
@@ -189,4 +190,4 @@ var d = 500, f = n(function({ options: n, value: f, defaultValue: p = [], placeh
 	});
 });
 //#endregion
-export { f as MultiSelect };
+export { p as MultiSelect };

package/dist/onboarding-shell.js

@@ -1,69 +1,70 @@
 'use client';
 import './onboarding-shell.css';
-import { t as e } from "./_shared/form-size.js";
-import { Container as t } from "./container.js";
-import { PublicPageShell as n } from "./public-page-shell.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { t } from "./_shared/form-size.js";
+import { Container as n } from "./container.js";
+import { PublicPageShell as r } from "./public-page-shell.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/templates/OnboardingShell/OnboardingShell.tsx
-function a({ children: a, brand: o, preferences: s, switchers: c, preferencesLabel: l, stepper: u, primaryAction: d, backAction: f, exitAction: p, actionsLabel: m = "Acciones del paso", id: h = "main-content", shell: g = !0, width: _ = "md", className: v }) {
-	let y = !!(d || f || p), b = s ?? c, x = o && /* @__PURE__ */ r("div", {
+function o({ children: o, brand: s, preferences: c, switchers: l, preferencesLabel: u, stepper: d, primaryAction: f, backAction: p, exitAction: m, actionsLabel: h, id: g = "main-content", shell: _ = !0, width: v = "md", className: y }) {
+	let b = e("onboardingShell"), x = e("publicPageShell"), S = !!(f || p || m), C = c ?? l, w = s && /* @__PURE__ */ i("div", {
 		className: "onboarding-shell__brand",
-		children: o
+		children: s
 	});
-	return /* @__PURE__ */ r(n, {
-		id: h,
-		shell: g,
-		header: x && /* @__PURE__ */ r(t, {
+	return /* @__PURE__ */ i(r, {
+		id: g,
+		shell: _,
+		header: w && /* @__PURE__ */ i(n, {
 			as: "header",
 			className: "onboarding-shell__top onboarding-shell__top--band",
 			innerClassName: "onboarding-shell__bar",
-			children: x
+			children: w
 		}),
-		preferences: b,
-		preferencesLabel: l,
-		children: /* @__PURE__ */ i("div", {
-			className: ["onboarding-shell", v].filter(Boolean).join(" "),
+		preferences: C,
+		preferencesLabel: u,
+		children: /* @__PURE__ */ a("div", {
+			className: ["onboarding-shell", y].filter(Boolean).join(" "),
 			children: [
-				!g && x && /* @__PURE__ */ r("header", {
+				!_ && w && /* @__PURE__ */ i("header", {
 					className: "onboarding-shell__top onboarding-shell__bar",
-					children: x
+					children: w
 				}),
-				/* @__PURE__ */ r(e.Provider, {
+				/* @__PURE__ */ i(t.Provider, {
 					value: "lg",
-					children: /* @__PURE__ */ i("div", {
-						className: ["onboarding-shell__step", _ === "wide" ? "onboarding-shell__step--wide" : ""].filter(Boolean).join(" "),
+					children: /* @__PURE__ */ a("div", {
+						className: ["onboarding-shell__step", v === "wide" ? "onboarding-shell__step--wide" : ""].filter(Boolean).join(" "),
 						children: [
-							u && /* @__PURE__ */ r("div", {
+							d && /* @__PURE__ */ i("div", {
 								className: "onboarding-shell__progress",
-								children: u
+								children: d
 							}),
-							/* @__PURE__ */ r("div", {
+							/* @__PURE__ */ i("div", {
 								className: "onboarding-shell__body",
-								children: a
+								children: o
 							}),
-							y && /* @__PURE__ */ i("div", {
+							S && /* @__PURE__ */ a("div", {
 								className: "onboarding-shell__actions",
 								role: "group",
-								"aria-label": m,
-								children: [f, (p || d) && /* @__PURE__ */ i("div", {
+								"aria-label": b("actions", h),
+								children: [p, (m || f) && /* @__PURE__ */ a("div", {
 									className: "onboarding-shell__decisions",
-									children: [p && /* @__PURE__ */ r("div", {
+									children: [m && /* @__PURE__ */ i("div", {
 										className: "onboarding-shell__exit",
-										children: p
-									}), d]
+										children: m
+									}), f]
 								})]
 							})
 						]
 					})
 				}),
-				!g && b && /* @__PURE__ */ r("section", {
+				!_ && C && /* @__PURE__ */ i("section", {
 					className: "onboarding-shell__settings",
-					"aria-label": l ?? "Preferencias",
-					children: b
+					"aria-label": x("preferences", u),
+					children: C
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { a as OnboardingShell };
+export { o as OnboardingShell };

package/dist/org-switcher.js

@@ -1,81 +1,86 @@
 'use client';
 import './org-switcher.css';
-import { Icon as e } from "./icon.js";
-import { Avatar as t } from "./avatar.js";
-import { n, t as r } from "./_shared/dropdownitems.js";
-import { n as i } from "./_shared/sidebarcontext.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Menu as c } from "@base-ui/react/menu";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { n } from "./_shared/portal-container.js";
+import { Avatar as r } from "./avatar.js";
+import { n as i, t as a } from "./_shared/dropdownitems.js";
+import { n as o } from "./_shared/sidebarcontext.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Menu as u } from "@base-ui/react/menu";
 //#region src/stories/molecules/OrgSwitcher/OrgSwitcher.tsx
-function l({ label: l, block: u = !1, compact: d, current: f, organizations: p, onOrgChange: m, defaultOpen: h, items: g, renderLink: _ = r }) {
-	let v = p.filter((e) => e.id !== f.id), y = i(), b = d ?? y.rail;
-	return /* @__PURE__ */ s(c.Root, {
-		defaultOpen: h,
-		children: [/* @__PURE__ */ s(c.Trigger, {
+function d({ label: d, block: f = !1, compact: p, current: m, organizations: h, onOrgChange: g, defaultOpen: _, items: v, renderLink: y = a }) {
+	let b = e("orgSwitcher"), x = n(void 0), S = h.filter((e) => e.id !== m.id), C = o(), w = p ?? C.rail;
+	return /* @__PURE__ */ l(u.Root, {
+		defaultOpen: _,
+		children: [/* @__PURE__ */ l(u.Trigger, {
 			className: [
 				"org-switcher__trigger",
-				u && !b ? "org-switcher__trigger--block" : "",
-				b ? "org-switcher__trigger--compact" : ""
+				f && !w ? "org-switcher__trigger--block" : "",
+				w ? "org-switcher__trigger--compact" : ""
 			].filter(Boolean).join(" "),
-			"aria-label": l ?? `Organización: ${f.name}`,
+			"aria-label": d ?? b("trigger")(m.name),
 			children: [
-				/* @__PURE__ */ o(t, {
-					src: f.logoUrl,
-					name: f.name,
+				/* @__PURE__ */ c(r, {
+					src: m.logoUrl,
+					name: m.name,
 					alt: "",
 					size: "sm",
 					shape: "square"
 				}),
-				!b && /* @__PURE__ */ o("span", {
+				!w && /* @__PURE__ */ c("span", {
 					className: "org-switcher__name",
-					children: f.name
+					children: m.name
 				}),
-				!b && /* @__PURE__ */ o(e, {
+				!w && /* @__PURE__ */ c(t, {
 					name: "chevron",
 					size: "sm",
 					className: "org-switcher__chevron"
 				})
 			]
-		}), /* @__PURE__ */ o(c.Portal, { children: /* @__PURE__ */ o(c.Positioner, {
-			className: "org-switcher__positioner",
-			sideOffset: 4,
-			align: "start",
-			children: /* @__PURE__ */ s(c.Popup, {
-				className: "org-switcher__content",
-				children: [
-					/* @__PURE__ */ s(c.CheckboxItem, {
-						className: "org-switcher__item org-switcher__item--active",
-						checked: !0,
-						onCheckedChange: () => void 0,
-						children: [/* @__PURE__ */ o(t, {
-							src: f.logoUrl,
-							name: f.name,
-							alt: "",
-							size: "sm",
-							shape: "square"
-						}), /* @__PURE__ */ o("span", { children: f.name })]
-					}),
-					v.map((e) => /* @__PURE__ */ s(c.Item, {
-						className: "org-switcher__item",
-						onClick: () => m(e.id),
-						children: [/* @__PURE__ */ o(t, {
-							src: e.logoUrl,
-							name: e.name,
-							alt: "",
-							size: "sm",
-							shape: "square"
-						}), /* @__PURE__ */ o("span", { children: e.name })]
-					}, e.id)),
-					g && g.length > 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(c.Separator, { className: "org-switcher__separator" }), n({
-						items: g,
-						itemClass: (e) => ["org-switcher__item", e ? "org-switcher__item--destructive" : ""].filter(Boolean).join(" "),
-						separatorClass: "org-switcher__separator",
-						renderLink: _
-					})] })
-				]
+		}), /* @__PURE__ */ c(u.Portal, {
+			container: x,
+			children: /* @__PURE__ */ c(u.Positioner, {
+				className: "org-switcher__positioner",
+				sideOffset: 4,
+				align: "start",
+				children: /* @__PURE__ */ l(u.Popup, {
+					className: "org-switcher__content",
+					children: [
+						/* @__PURE__ */ l(u.CheckboxItem, {
+							className: "org-switcher__item org-switcher__item--active",
+							checked: !0,
+							onCheckedChange: () => void 0,
+							children: [/* @__PURE__ */ c(r, {
+								src: m.logoUrl,
+								name: m.name,
+								alt: "",
+								size: "sm",
+								shape: "square"
+							}), /* @__PURE__ */ c("span", { children: m.name })]
+						}),
+						S.map((e) => /* @__PURE__ */ l(u.Item, {
+							className: "org-switcher__item",
+							onClick: () => g(e.id),
+							children: [/* @__PURE__ */ c(r, {
+								src: e.logoUrl,
+								name: e.name,
+								alt: "",
+								size: "sm",
+								shape: "square"
+							}), /* @__PURE__ */ c("span", { children: e.name })]
+						}, e.id)),
+						v && v.length > 0 && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u.Separator, { className: "org-switcher__separator" }), i({
+							items: v,
+							itemClass: (e) => ["org-switcher__item", e ? "org-switcher__item--destructive" : ""].filter(Boolean).join(" "),
+							separatorClass: "org-switcher__separator",
+							renderLink: y
+						})] })
+					]
+				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion
-export { l as OrgSwitcher };
+export { d as OrgSwitcher };

package/dist/page-intro.css

@@ -1 +1 @@
-.page-intro{flex-direction:column;inline-size:100%;display:flex}.page-intro .paragraph{margin:0}.page-intro>:not(.heading)+*{margin-block-start:var(--spacing-3)}.page-intro__row{align-items:flex-start;row-gap:var(--page-intro-row-gap);flex-direction:column;display:flex}.page-intro__row>.heading{margin-block-end:0}.page-intro__actions{align-self:stretch;align-items:stretch;gap:var(--page-intro-actions-gap);flex-direction:column;display:flex}@media (width>=768px){.page-intro__row{align-items:baseline;column-gap:var(--page-intro-row-column-gap);flex-direction:row;row-gap:0}.page-intro__row>.heading{min-inline-size:0;flex:1;margin-block-end:var(--page-intro-title-space-after)}.page-intro__row:last-child>.heading{margin-block-end:0}.page-intro__actions{flex-flow:wrap;flex:none;align-self:auto;align-items:center}.page-intro>.page-intro__row+*{margin-block-start:0}}
+.page-intro{flex-direction:column;inline-size:100%;display:flex}.page-intro .paragraph{margin:0}.page-intro>:not(.heading)+*{margin-block-start:var(--spacing-3)}.page-intro__eyebrow{margin-block-end:var(--page-intro-row-gap)}.page-intro__row{align-items:flex-start;row-gap:var(--page-intro-row-gap);flex-direction:column;display:flex}.page-intro__row>.page-intro__title-group>.heading{margin-block-end:0}.page-intro__actions{align-self:stretch;align-items:stretch;gap:var(--page-intro-actions-gap);flex-direction:column;display:flex}@media (width>=768px){.page-intro__row{align-items:baseline;column-gap:var(--page-intro-row-column-gap);flex-direction:row;row-gap:0}.page-intro__row>.page-intro__title-group{flex:1;min-inline-size:0}.page-intro__row>.page-intro__title-group>.heading{margin-block-end:var(--page-intro-title-space-after)}.page-intro__row:last-child>.page-intro__title-group>.heading{margin-block-end:0}.page-intro__actions{flex-flow:wrap;flex:none;align-self:auto;align-items:center}.page-intro>.page-intro__row+*{margin-block-start:0}}

package/dist/page-intro.js

@@ -1,31 +1,37 @@
 import './page-intro.css';
 import { Heading as e } from "./heading.js";
 import { Paragraph as t } from "./paragraph.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/molecules/PageIntro/PageIntro.tsx
-function i({ title: i, description: a, actions: o, level: s = 1, size: c, as: l = "header", className: u, children: d }) {
-	let f = /* @__PURE__ */ n(e, {
-		level: s,
-		size: c,
-		children: i
-	});
-	return /* @__PURE__ */ r(l, {
-		className: ["page-intro", u].filter(Boolean).join(" "),
+function a({ eyebrow: a, title: o, description: s, actions: c, level: l = 1, size: u, as: d = "header", className: f, children: p }) {
+	let m = /* @__PURE__ */ i(n, { children: [a && /* @__PURE__ */ r("div", {
+		className: "page-intro__eyebrow",
+		children: a
+	}), /* @__PURE__ */ r(e, {
+		level: l,
+		size: u,
+		children: o
+	})] });
+	return /* @__PURE__ */ i(d, {
+		className: ["page-intro", f].filter(Boolean).join(" "),
 		children: [
-			o ? /* @__PURE__ */ r("div", {
+			c ? /* @__PURE__ */ i("div", {
 				className: "page-intro__row",
-				children: [f, /* @__PURE__ */ n("div", {
+				children: [/* @__PURE__ */ r("div", {
+					className: "page-intro__title-group",
+					children: m
+				}), /* @__PURE__ */ r("div", {
 					className: "page-intro__actions",
-					children: o
+					children: c
 				})]
-			}) : f,
-			a && /* @__PURE__ */ n(t, {
+			}) : m,
+			s && /* @__PURE__ */ r(t, {
 				size: "large",
-				children: a
+				children: s
 			}),
-			d
+			p
 		]
 	});
 }
 //#endregion
-export { i as PageIntro };
+export { a as PageIntro };