@studiolxd/brand 45.1.0 → 47.0.0

package/dist/notification-panel.js

@@ -1,139 +1,140 @@
 'use client';
 import './notification-panel.css';
-import { Icon as e } from "./icon.js";
-import { VisuallyHidden as t } from "./visually-hidden.js";
-import { Button as n } from "./button.js";
-import { Heading as r } from "./heading.js";
-import { Paragraph as i } from "./paragraph.js";
-import { Popover as a } from "./popover.js";
-import { Text as o } from "./text.js";
-import { NotificationButton as s } from "./notification-button.js";
-import { useCallback as c, useId as l, useRef as u, useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { VisuallyHidden as n } from "./visually-hidden.js";
+import { Button as r } from "./button.js";
+import { Heading as i } from "./heading.js";
+import { Paragraph as a } from "./paragraph.js";
+import { Popover as o } from "./popover.js";
+import { Text as s } from "./text.js";
+import { NotificationButton as c } from "./notification-button.js";
+import { useCallback as l, useId as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/stories/molecules/NotificationPanel/NotificationPanel.tsx
-function h(e) {
+function g(e) {
 	let t = parseFloat(e);
 	return Number.isNaN(t) ? 0 : e.endsWith("rem") ? t * parseFloat(getComputedStyle(document.documentElement).fontSize) : t;
 }
-function g() {
+function _() {
 	let e = document.documentElement;
-	return h(getComputedStyle(e).getPropertyValue("--notification-panel-offset").trim());
+	return g(getComputedStyle(e).getPropertyValue("--notification-panel-offset").trim());
 }
-function _({ children: e, ...t }) {
-	return /* @__PURE__ */ p("a", {
+function v({ children: e, ...t }) {
+	return /* @__PURE__ */ m("a", {
 		...t,
 		children: e
 	});
 }
-var v = "button, a[href]", y = "notification-panel__footer-link";
-function b({ items: h = [], count: b = 0, max: x, onRead: S, onMarkAllRead: C, allHref: w, preferencesHref: T, renderLink: E = _, label: D, countLabel: O, panelLabel: k = "Notificaciones", unreadLabel: A = "Sin leer", emptyLabel: j = "Estás al día", allLabel: M = "Ver todas las notificaciones", preferencesLabel: N = "Preferencias de notificaciones", markAllReadLabel: P = "Marcar todas como leídas", open: F, defaultOpen: I, onOpenChange: L, className: R }) {
-	let z = l(), B = u(null), [V, H] = d([]), U = (e) => e.unread && !V.includes(e.id), W = h.some(U), G = (e) => {
-		U(e) && (H((t) => [...t, e.id]), S(e.id));
-	}, K = () => {
-		H(h.map((e) => e.id)), C?.();
-	}, q = c(() => {
-		let e = B.current;
-		return e ? e.querySelector(".notification-panel__item-action") ?? e.querySelector(v) : null;
-	}, []), J = (e, t) => {
-		e || H([]), L?.(e, t);
-	}, Y = `${z}-title`;
-	return /* @__PURE__ */ p(a, {
-		trigger: /* @__PURE__ */ p(s, {
-			count: b,
-			max: x,
-			label: D,
-			countLabel: O
+var y = "button, a[href]", b = "notification-panel__footer-link";
+function x({ items: g = [], count: x = 0, max: S, onRead: C, onMarkAllRead: w, allHref: T, preferencesHref: E, renderLink: D = v, label: O, countLabel: k, panelLabel: A, unreadLabel: j, emptyLabel: M, allLabel: N, preferencesLabel: P, markAllReadLabel: F, open: I, defaultOpen: L, onOpenChange: R, className: z }) {
+	let B = e("notificationPanel"), V = u(), H = d(null), [U, W] = f([]), G = (e) => e.unread && !U.includes(e.id), K = g.some(G), q = (e) => {
+		G(e) && (W((t) => [...t, e.id]), C(e.id));
+	}, J = () => {
+		W(g.map((e) => e.id)), w?.();
+	}, Y = l(() => {
+		let e = H.current;
+		return e ? e.querySelector(".notification-panel__item-action") ?? e.querySelector(y) : null;
+	}, []), X = (e, t) => {
+		e || W([]), R?.(e, t);
+	}, Z = `${V}-title`, Q = B("panel", A);
+	return /* @__PURE__ */ m(o, {
+		trigger: /* @__PURE__ */ m(c, {
+			count: x,
+			max: S,
+			label: O,
+			countLabel: k
 		}),
-		label: k,
+		label: Q,
 		align: "end",
-		sideOffset: g,
-		open: F,
-		defaultOpen: I,
-		onOpenChange: J,
-		initialFocus: q,
-		className: ["notification-panel", R].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ m("div", {
+		sideOffset: _,
+		open: I,
+		defaultOpen: L,
+		onOpenChange: X,
+		initialFocus: Y,
+		className: ["notification-panel", z].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ h("div", {
 			className: "notification-panel__body",
-			ref: B,
+			ref: H,
 			children: [
-				/* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(r, {
+				/* @__PURE__ */ m(n, { children: /* @__PURE__ */ m(i, {
 					level: 2,
 					size: 3,
-					id: Y,
-					children: k
+					id: Z,
+					children: Q
 				}) }),
-				h.length === 0 ? /* @__PURE__ */ p("div", {
+				g.length === 0 ? /* @__PURE__ */ m("div", {
 					className: "notification-panel__empty",
-					children: /* @__PURE__ */ p(i, {
+					children: /* @__PURE__ */ m(a, {
 						size: "small",
-						children: j
+						children: B("empty", M)
 					})
-				}) : /* @__PURE__ */ p("ul", {
+				}) : /* @__PURE__ */ m("ul", {
 					className: "notification-panel__list",
-					"aria-labelledby": Y,
-					children: h.map((n, r) => {
-						let i = U(n), a = `${z}-t-${r}`;
-						return /* @__PURE__ */ p("li", {
+					"aria-labelledby": Z,
+					children: g.map((e, r) => {
+						let i = G(e), a = `${V}-t-${r}`;
+						return /* @__PURE__ */ m("li", {
 							className: "notification-panel__item",
-							children: /* @__PURE__ */ m("button", {
+							children: /* @__PURE__ */ h("button", {
 								type: "button",
 								className: "notification-panel__item-action",
 								"aria-disabled": i ? void 0 : !0,
-								onClick: () => G(n),
-								children: [/* @__PURE__ */ p("span", {
+								onClick: () => q(e),
+								children: [/* @__PURE__ */ m("span", {
 									className: "notification-panel__indicator",
-									children: i && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(e, {
+									children: i && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(t, {
 										name: "dot",
 										size: "sm",
 										className: "notification-panel__dot"
-									}), /* @__PURE__ */ p(t, { children: A })] })
-								}), /* @__PURE__ */ m("span", {
+									}), /* @__PURE__ */ m(n, { children: B("unread", j) })] })
+								}), /* @__PURE__ */ h("span", {
 									className: "notification-panel__item-text",
 									children: [
-										/* @__PURE__ */ p(o, {
+										/* @__PURE__ */ m(s, {
 											id: a,
 											tone: i ? "default" : "muted",
 											className: "notification-panel__item-title",
-											children: n.title
+											children: e.title
 										}),
-										n.body && /* @__PURE__ */ p(o, {
+										e.body && /* @__PURE__ */ m(s, {
 											tone: "muted",
 											className: "notification-panel__item-body",
-											children: n.body
+											children: e.body
 										}),
-										/* @__PURE__ */ p(o, {
+										/* @__PURE__ */ m(s, {
 											tone: "muted",
 											className: "notification-panel__item-time",
-											children: n.time
+											children: e.time
 										})
 									]
 								})]
 							})
-						}, n.id);
+						}, e.id);
 					})
 				}),
-				C && W && /* @__PURE__ */ p("div", {
+				w && K && /* @__PURE__ */ m("div", {
 					className: "notification-panel__mark-all",
-					children: /* @__PURE__ */ p(n, {
+					children: /* @__PURE__ */ m(r, {
 						variant: "outline",
 						size: "sm",
 						block: !0,
-						onClick: K,
-						children: P
+						onClick: J,
+						children: B("markAllRead", F)
 					})
 				}),
-				/* @__PURE__ */ p("div", {
+				/* @__PURE__ */ m("div", {
 					className: "notification-panel__footer",
-					children: /* @__PURE__ */ m("div", {
+					children: /* @__PURE__ */ h("div", {
 						className: "notification-panel__footer-links",
-						children: [E({
-							href: w,
-							className: y,
-							children: M
-						}), E({
+						children: [D({
 							href: T,
-							className: y,
-							children: N
+							className: b,
+							children: B("all", N)
+						}), D({
+							href: E,
+							className: b,
+							children: B("preferences", P)
 						})]
 					})
 				})
@@ -142,4 +143,4 @@ function b({ items: h = [], count: b = 0, max: x, onRead: S, onMarkAllRead: C, a
 	});
 }
 //#endregion
-export { b as NotificationPanel };
+export { x as NotificationPanel };

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/popover.js

@@ -1,36 +1,41 @@
 'use client';
 import './popover.css';
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Popover as n } from "@base-ui/react/popover";
+import { n as e } from "./_shared/portal-container.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Popover as r } from "@base-ui/react/popover";
 //#region src/stories/atoms/Popover/Popover.tsx
-function r(e) {
+function i(e) {
 	let t = parseFloat(e);
 	return Number.isNaN(t) ? 0 : e.endsWith("rem") ? t * parseFloat(getComputedStyle(document.documentElement).fontSize) : t;
 }
-function i() {
+function a() {
 	let e = document.documentElement;
-	return r(getComputedStyle(e).getPropertyValue("--popover-offset").trim());
+	return i(getComputedStyle(e).getPropertyValue("--popover-offset").trim());
 }
-function a({ trigger: r, children: a, label: o, open: s, defaultOpen: c, onOpenChange: l, onPointerDownOutside: u, onFocusOutside: d, onEscapeKeyDown: f, side: p = "bottom", align: m = "start", sideOffset: h, initialFocus: g, className: _ }) {
-	return /* @__PURE__ */ t(n.Root, {
-		open: s,
-		defaultOpen: c,
+function o({ trigger: i, children: o, label: s, open: c, defaultOpen: l, onOpenChange: u, onPointerDownOutside: d, onFocusOutside: f, onEscapeKeyDown: p, side: m = "bottom", align: h = "start", sideOffset: g, initialFocus: _, container: v, className: y }) {
+	let b = e(v);
+	return /* @__PURE__ */ n(r.Root, {
+		open: c,
+		defaultOpen: l,
 		onOpenChange: (e, t) => {
-			e || (t.reason === "outside-press" ? u?.(t) : t.reason === "focus-out" ? d?.(t) : t.reason === "escape-key" && f?.(t)), l?.(e, t);
+			e || (t.reason === "outside-press" ? d?.(t) : t.reason === "focus-out" ? f?.(t) : t.reason === "escape-key" && p?.(t)), u?.(e, t);
 		},
-		children: [/* @__PURE__ */ e(n.Trigger, { render: r }), /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(n.Positioner, {
-			className: "popover__positioner",
-			side: p,
-			align: m,
-			sideOffset: h ?? i,
-			children: /* @__PURE__ */ e(n.Popup, {
-				"aria-label": o,
-				initialFocus: g,
-				className: ["popover", _].filter(Boolean).join(" "),
-				children: a
+		children: [/* @__PURE__ */ t(r.Trigger, { render: i }), /* @__PURE__ */ t(r.Portal, {
+			container: b,
+			children: /* @__PURE__ */ t(r.Positioner, {
+				className: "popover__positioner",
+				side: m,
+				align: h,
+				sideOffset: g ?? a,
+				children: /* @__PURE__ */ t(r.Popup, {
+					"aria-label": s,
+					initialFocus: _,
+					className: ["popover", y].filter(Boolean).join(" "),
+					children: o
+				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion
-export { a as Popover };
+export { o as Popover };