@studiolxd/brand 46.0.0 → 47.1.0

package/dist/site-nav.js

@@ -1,54 +1,56 @@
+'use client';
 import './site-nav.css';
-import { Heading as e } from "./heading.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Heading as t } from "./heading.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/stories/molecules/SiteNav/SiteNav.tsx
-function r({ href: e, children: n, className: r, "aria-current": i, target: a, rel: o }) {
-	return /* @__PURE__ */ t("a", {
+function i({ href: e, children: t, className: r, "aria-current": i, target: a, rel: o }) {
+	return /* @__PURE__ */ n("a", {
 		href: e,
 		className: r,
 		"aria-current": i,
 		target: a,
 		rel: o,
-		children: n
+		children: t
 	});
 }
-function i(e, t) {
+function a(e, t) {
 	return t || (e === "_blank" ? "noopener noreferrer" : void 0);
 }
-var a = 5;
-function o({ groups: o, label: s = "Navegación del sitio", renderLink: c = r, className: l }) {
-	let u = ["site-nav", l].filter(Boolean).join(" "), d = Math.min(o.length, a) || 1;
-	return /* @__PURE__ */ t("nav", {
-		className: u,
-		"aria-label": s,
-		"data-columns": d,
-		children: o.map((r) => /* @__PURE__ */ n("div", {
+var o = 5;
+function s({ groups: s, label: c, renderLink: l = i, className: u }) {
+	let d = e("siteNav"), f = ["site-nav", u].filter(Boolean).join(" "), p = Math.min(s.length, o) || 1;
+	return /* @__PURE__ */ n("nav", {
+		className: f,
+		"aria-label": d("label", c),
+		"data-columns": p,
+		children: s.map((e) => /* @__PURE__ */ r("div", {
 			className: "site-nav__group",
-			children: [/* @__PURE__ */ t(e, {
+			children: [/* @__PURE__ */ n(t, {
 				level: 2,
 				size: 6,
 				className: "site-nav__label",
-				children: r.href ? c({
-					href: r.href,
+				children: e.href ? l({
+					href: e.href,
 					className: "site-nav__label-link",
-					children: r.label
-				}) : r.label
-			}), /* @__PURE__ */ t("ul", {
+					children: e.label
+				}) : e.label
+			}), /* @__PURE__ */ n("ul", {
 				className: "site-nav__list",
-				children: r.items.map((e) => /* @__PURE__ */ t("li", {
+				children: e.items.map((e) => /* @__PURE__ */ n("li", {
 					className: "site-nav__item",
-					children: c({
+					children: l({
 						href: e.href,
 						className: ["site-nav__link", e.current ? "site-nav__link--current" : ""].filter(Boolean).join(" "),
 						"aria-current": e.current ? "page" : void 0,
 						target: e.target,
-						rel: i(e.target, e.rel),
+						rel: a(e.target, e.rel),
 						children: e.label
 					})
 				}, e.id))
 			})]
-		}, r.id))
+		}, e.id))
 	});
 }
 //#endregion
-export { o as SiteNav };
+export { s as SiteNav };

package/dist/site-shell.js

@@ -1,20 +1,28 @@
+'use client';
 import './site-shell.css';
-import { forwardRef as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+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";
 //#region src/stories/sections/SiteShell/SiteShell.tsx
-var r = e(function({ header: e, footer: r, children: i, className: a }, o) {
-	return /* @__PURE__ */ n("div", {
-		ref: o,
-		className: ["site-shell", a].filter(Boolean).join(" "),
-		children: [
-			e,
-			/* @__PURE__ */ t("div", {
-				className: "site-shell__main",
-				children: i
-			}),
-			r
-		]
+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,
+			children: [
+				t,
+				/* @__PURE__ */ i("div", {
+					className: "site-shell__main",
+					children: s
+				}),
+				o
+			]
+		})
 	});
 });
 //#endregion
-export { r as SiteShell };
+export { o as SiteShell };

package/dist/table-of-contents.js

@@ -1,45 +1,48 @@
+'use client';
 import './table-of-contents.css';
-import { Link as e } from "./link.js";
-import { List as t } from "./list.js";
-import { forwardRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Link as t } from "./link.js";
+import { List as n } from "./list.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/molecules/TableOfContents/TableOfContents.tsx
-function a(e, t) {
+function o(e, t) {
 	return Math.min(Math.max(e - t, 0), 5);
 }
-var o = n(function({ items: n, activeId: o, ariaLabel: s = "En esta página", title: c, sticky: l = !1, onItemClick: u, className: d, ...f }, p) {
-	if (n.length === 0) return null;
-	let m = Math.min(...n.map((e) => e.level));
-	return /* @__PURE__ */ i("nav", {
-		ref: p,
+var s = r(function({ items: r, activeId: s, ariaLabel: c, title: l, sticky: u = !1, onItemClick: d, className: f, ...p }, m) {
+	let h = e("tableOfContents");
+	if (r.length === 0) return null;
+	let g = Math.min(...r.map((e) => e.level));
+	return /* @__PURE__ */ a("nav", {
+		ref: m,
 		className: [
 			"table-of-contents",
-			l ? "table-of-contents--sticky" : "",
-			d ?? ""
+			u ? "table-of-contents--sticky" : "",
+			f ?? ""
 		].filter(Boolean).join(" "),
-		"aria-label": s,
-		...f,
-		children: [c && /* @__PURE__ */ r("p", {
+		"aria-label": h("label", c),
+		...p,
+		children: [l && /* @__PURE__ */ i("p", {
 			className: "table-of-contents__title",
-			children: c
-		}), /* @__PURE__ */ r(t, {
+			children: l
+		}), /* @__PURE__ */ i(n, {
 			type: "plain",
 			className: "table-of-contents__list",
-			children: n.map((t) => {
-				let n = t.id === o;
-				return /* @__PURE__ */ r("li", {
-					className: `table-of-contents__item table-of-contents__item--level-${a(t.level, m)}`,
-					children: /* @__PURE__ */ r(e, {
-						href: `#${t.id}`,
+			children: r.map((e) => {
+				let n = e.id === s;
+				return /* @__PURE__ */ i("li", {
+					className: `table-of-contents__item table-of-contents__item--level-${o(e.level, g)}`,
+					children: /* @__PURE__ */ i(t, {
+						href: `#${e.id}`,
 						className: ["table-of-contents__link", n ? "table-of-contents__link--active" : ""].filter(Boolean).join(" "),
 						"aria-current": n ? "location" : void 0,
-						onClick: u ? (e) => u(t, e) : void 0,
-						children: t.label
+						onClick: d ? (t) => d(e, t) : void 0,
+						children: e.label
 					})
-				}, t.id);
+				}, e.id);
 			})
 		})]
 	});
 });
 //#endregion
-export { o as TableOfContents };
+export { s as TableOfContents };

package/dist/toaster.js

@@ -1,81 +1,85 @@
 'use client';
 import './toaster.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
-import { Button as t } from "./button.js";
-import { CloseButton as n } from "./close-button.js";
-import { t as r } from "./_shared/css-properties.js";
-import { TOAST_DURATION as i, setToastDefaultDuration as a, syncLiveToasts as o, toastManager as s } from "./toast.js";
-import { useEffect as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Toast as d } from "@base-ui/react/toast";
+import { n as t } from "./_shared/portal-container.js";
+import { Button as n } from "./button.js";
+import { CloseButton as r } from "./close-button.js";
+import { t as i } from "./_shared/css-properties.js";
+import { TOAST_DURATION as a, setToastDefaultDuration as o, syncLiveToasts as s, toastManager as c } from "./toast.js";
+import { useEffect as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Toast as f } from "@base-ui/react/toast";
 //#region src/stories/molecules/Toast/Toaster.tsx
-var f = 8, p = {
+var p = 8, m = {
 	success: "alert--success",
 	error: "alert--error",
 	warning: "alert--warning"
 };
-function m(e, t) {
+function h(e, t) {
 	return [
 		"alert",
-		p[e ?? ""] ?? "",
+		m[e ?? ""] ?? "",
 		e === "warning" ? "" : "surface-dark",
 		t ? "alert--dismissible" : "",
 		"toast"
 	].filter(Boolean).join(" ");
 }
-function h({ position: i, containerAriaLabel: a, closeLabel: s, closeButton: f, gap: p, expand: h }) {
-	let g = e("toaster"), { toasts: _ } = d.useToastManager(), [v, y] = i.split("-"), b = _.map((e) => e.id).join(",");
-	c(() => {
-		o(b ? b.split(",") : []);
-	}, [b]);
-	let x = r({ "--toast-gap": `${p}px` }), S = [
+function g({ position: a, containerAriaLabel: o, closeLabel: c, closeButton: p, gap: m, expand: g }) {
+	let _ = e("toaster"), { toasts: v } = f.useToastManager(), [y, b] = a.split("-"), x = v.map((e) => e.id).join(",");
+	l(() => {
+		s(x ? x.split(",") : []);
+	}, [x]);
+	let S = i({ "--toast-gap": `${m}px` }), C = t(void 0), w = [
 		"toaster",
-		v === "top" ? "toaster--top" : "",
-		y === "right" ? "" : `toaster--${y}`,
-		h ? "toaster--expanded" : ""
+		y === "top" ? "toaster--top" : "",
+		b === "right" ? "" : `toaster--${b}`,
+		g ? "toaster--expanded" : ""
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ l(d.Portal, { children: /* @__PURE__ */ l(d.Viewport, {
-		ref: x,
-		className: S,
-		"aria-label": g("container", a),
-		children: _.map((e) => /* @__PURE__ */ u(d.Root, {
-			toast: e,
-			className: m(e.type, f),
-			children: [/* @__PURE__ */ u("div", {
-				className: "alert__content",
-				children: [
-					/* @__PURE__ */ l(d.Title, { className: "alert__title" }),
-					/* @__PURE__ */ l(d.Description, { className: "alert__description" }),
-					/* @__PURE__ */ l(d.Action, {
-						className: "toast__action",
-						render: /* @__PURE__ */ l(t, {
-							variant: "ghost",
-							size: "sm"
+	return /* @__PURE__ */ u(f.Portal, {
+		container: C,
+		children: /* @__PURE__ */ u(f.Viewport, {
+			ref: S,
+			className: w,
+			"aria-label": _("container", o),
+			children: v.map((e) => /* @__PURE__ */ d(f.Root, {
+				toast: e,
+				className: h(e.type, p),
+				children: [/* @__PURE__ */ d("div", {
+					className: "alert__content",
+					children: [
+						/* @__PURE__ */ u(f.Title, { className: "alert__title" }),
+						/* @__PURE__ */ u(f.Description, { className: "alert__description" }),
+						/* @__PURE__ */ u(f.Action, {
+							className: "toast__action",
+							render: /* @__PURE__ */ u(n, {
+								variant: "ghost",
+								size: "sm"
+							})
 						})
-					})
-				]
-			}), f && /* @__PURE__ */ l(d.Close, {
-				className: "alert__close",
-				render: /* @__PURE__ */ l(n, { label: g("close", s) })
-			})]
-		}, e.id))
-	}) });
+					]
+				}), p && /* @__PURE__ */ u(f.Close, {
+					className: "alert__close",
+					render: /* @__PURE__ */ u(r, { label: _("close", c) })
+				})]
+			}, e.id))
+		})
+	});
 }
-function g({ position: e = "bottom-right", containerAriaLabel: t, closeLabel: n, closeButton: r = !0, duration: o = i, gap: u = f, visibleToasts: p = 3, expand: m = !1 }) {
-	let g = Number.isFinite(o) ? o : 0;
-	return c(() => a(g), [g]), /* @__PURE__ */ l(d.Provider, {
-		toastManager: s,
-		timeout: g,
-		limit: p,
-		children: /* @__PURE__ */ l(h, {
+function _({ position: e = "bottom-right", containerAriaLabel: t, closeLabel: n, closeButton: r = !0, duration: i = a, gap: s = p, visibleToasts: d = 3, expand: m = !1 }) {
+	let h = Number.isFinite(i) ? i : 0;
+	return l(() => o(h), [h]), /* @__PURE__ */ u(f.Provider, {
+		toastManager: c,
+		timeout: h,
+		limit: d,
+		children: /* @__PURE__ */ u(g, {
 			position: e,
 			containerAriaLabel: t,
 			closeLabel: n,
 			closeButton: r,
-			gap: u,
+			gap: s,
 			expand: m
 		})
 	});
 }
 //#endregion
-export { g as Toaster };
+export { _ as Toaster };