@studiolxd/brand 50.0.0 → 51.0.1

package/dist/modal.css

@@ -1 +1 @@
-@keyframes modal-content-in{0%{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modal-content-out{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}}.modal__overlay{--dialog-overlay-bg:var(--modal-backdrop-bg);--dialog-overlay-opacity:var(--modal-backdrop-opacity);--dialog-overlay-z-index:var(--modal-backdrop-z-index);--dialog-transition-duration:var(--modal-transition-duration);--dialog-transition-easing:var(--modal-transition-easing)}.modal__content{inset-block-start:50%;z-index:var(--modal-z-index);inline-size:var(--modal-inline-size);max-inline-size:var(--modal-width-max);max-block-size:var(--modal-max-height);background-color:var(--modal-bg);border:var(--modal-border-width) solid var(--modal-border-color);border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow);padding-block:var(--modal-padding-block);padding-inline:var(--modal-padding-inline);flex-direction:column;display:flex;position:fixed;left:50%;transform:translate(-50%,-50%);container:dialog/inline-size}.modal__content[data-open]{animation:modal-content-in var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__content[data-closed]{animation:modal-content-out var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__header{--dialog-header-gap:var(--modal-header-gap)}.modal__title{font-size:var(--modal-title-font-size);font-weight:var(--modal-title-font-weight);color:var(--modal-title-color);line-height:var(--modal-title-line-height);flex:1;margin:0}.modal__close.close-button{--close-button-size:var(--modal-close-size);--close-button-icon-size:var(--modal-close-icon-size);--close-button-color:var(--modal-close-color);--close-button-focus-ring-width:var(--modal-close-focus-ring-width);--close-button-focus-ring-offset:var(--modal-close-focus-ring-offset);--close-button-focus-ring-color:var(--modal-close-focus-ring-color)}.modal__header:not(.modal__header--no-title) .modal__close.close-button{margin-block-start:calc((var(--modal-title-font-size) * var(--modal-title-line-height) - var(--modal-close-size)) / 2)}.modal__description{font-size:var(--modal-description-font-size);color:var(--modal-description-color);margin-block-start:0;margin-block-end:var(--modal-description-margin-block-end)}.modal__body{flex:1;min-block-size:0;overflow-y:auto}.modal__footer{--dialog-footer-gap:var(--modal-footer-gap);margin-block-start:var(--modal-footer-margin-block-start)}
+@keyframes modal-content-in{0%{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modal-content-out{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}}.modal__overlay{--dialog-overlay-bg:var(--modal-backdrop-bg);--dialog-overlay-opacity:var(--modal-backdrop-opacity);--dialog-overlay-z-index:var(--modal-backdrop-z-index);--dialog-transition-duration:var(--modal-transition-duration);--dialog-transition-easing:var(--modal-transition-easing)}.modal__content{inset-block-start:50%;z-index:var(--modal-z-index);inline-size:var(--modal-width);max-inline-size:var(--modal-max-width);max-block-size:var(--modal-max-height);background-color:var(--modal-bg);border:var(--modal-border-width) solid var(--modal-border-color);border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow);padding-block:var(--modal-padding-block);padding-inline:var(--modal-padding-inline);flex-direction:column;display:flex;position:fixed;left:50%;transform:translate(-50%,-50%);container:dialog/inline-size}.modal__content[data-open]{animation:modal-content-in var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__content[data-closed]{animation:modal-content-out var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__header{--dialog-header-gap:var(--modal-header-gap)}.modal__title{font-size:var(--modal-title-font-size);font-weight:var(--modal-title-font-weight);color:var(--modal-title-color);line-height:var(--modal-title-line-height);flex:1;margin:0}.modal__close.close-button{--close-button-size:var(--modal-close-size);--close-button-icon-size:var(--modal-close-icon-size);--close-button-color:var(--modal-close-color);--close-button-focus-ring-width:var(--modal-close-focus-ring-width);--close-button-focus-ring-offset:var(--modal-close-focus-ring-offset);--close-button-focus-ring-color:var(--modal-close-focus-ring-color)}.modal__header:not(.modal__header--no-title) .modal__close.close-button{margin-block-start:calc((var(--modal-title-font-size) * var(--modal-title-line-height) - var(--modal-close-size)) / 2)}.modal__description{font-size:var(--modal-description-font-size);color:var(--modal-description-color);margin-block-start:0;margin-block-end:var(--modal-description-margin-block-end)}.modal__body{flex:1;min-block-size:0;overflow-y:auto}.modal__footer{--dialog-footer-gap:var(--modal-footer-gap);margin-block-start:var(--modal-footer-margin-block-start)}

package/dist/modal.js

@@ -1,63 +1,4 @@
 'use client';
 import './modal.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { VisuallyHidden as t } from "./visually-hidden.js";
-import { n } from "./_shared/portal-container.js";
-import { CloseButton as r } from "./close-button.js";
-import { n as i, r as a, t as o } from "./_shared/dialogsurface.js";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Dialog as u } from "@base-ui/react/dialog";
-//#region src/stories/molecules/Modal/Modal.tsx
-function d({ open: d, onClose: f, title: p, children: m, closeLabel: h, fallbackTitle: g, container: _, description: v, "aria-describedby": y, initialFocus: b, footer: x, footerClassName: S, className: C, ...w }) {
-	let T = e("modal"), E = n(_), D = y === void 0 ? {} : { "aria-describedby": y }, O = b === void 0 ? {} : { initialFocus: b };
-	return /* @__PURE__ */ c(u.Root, {
-		open: d,
-		onOpenChange: (e) => {
-			e || f();
-		},
-		children: /* @__PURE__ */ l(u.Portal, {
-			container: E,
-			children: [/* @__PURE__ */ c(a, { className: "modal__overlay" }), /* @__PURE__ */ l(u.Popup, {
-				className: ["modal__content", C].filter(Boolean).join(" "),
-				...D,
-				...O,
-				...w,
-				children: [
-					p ? /* @__PURE__ */ l(i, {
-						layout: "inline",
-						className: "modal__header",
-						children: [/* @__PURE__ */ c(u.Title, {
-							className: "modal__title",
-							children: p
-						}), /* @__PURE__ */ c(u.Close, {
-							className: "modal__close",
-							render: /* @__PURE__ */ c(r, { label: T("close", h) })
-						})]
-					}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u.Title, { render: /* @__PURE__ */ c(t, { children: T("fallbackTitle", g) }) }), /* @__PURE__ */ c(i, {
-						layout: "inline",
-						noTitle: !0,
-						className: "modal__header modal__header--no-title",
-						children: /* @__PURE__ */ c(u.Close, {
-							className: "modal__close",
-							render: /* @__PURE__ */ c(r, { label: T("close", h) })
-						})
-					})] }),
-					v != null && /* @__PURE__ */ c(u.Description, {
-						className: "modal__description",
-						children: v
-					}),
-					/* @__PURE__ */ c("div", {
-						className: "modal__body",
-						children: m
-					}),
-					x != null && /* @__PURE__ */ c(o, {
-						className: ["modal__footer", S].filter(Boolean).join(" "),
-						children: x
-					})
-				]
-			})]
-		})
-	});
-}
-//#endregion
-export { d as Modal };
+import { t as e } from "./_shared/modal.js";
+export { e as Modal };

package/dist/multi-select-field.js

@@ -1,54 +1,50 @@
 'use client';
 import './multi-select-field.css';
 import { n as e } from "./_shared/form-size.js";
-import { ErrorText as t } from "./error-text.js";
-import { Label as n } from "./label.js";
-import { MultiSelect as r } from "./multi-select.js";
-import { n as i } from "./_shared/field-labels.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { t } from "./_shared/multiselect.js";
+import { n } from "./_shared/field-optional.js";
+import { n as r } from "./_shared/field-labels.js";
+import { a as i, n as a } from "./_shared/fieldshell.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/MultiSelectField/MultiSelectField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, options: d, value: f, defaultValue: p, placeholder: m, name: h, disabled: g, readOnly: _, size: v, error: y = !1, errorMessage: b, helperText: x, className: S, removeLabel: C, onValueChange: w, onBlur: T }, E) {
-	let D = i(u), O = e(v), k = o(), A = a ?? k, j = b ? `${A}-error` : void 0, M = x ? `${A}-helper` : void 0, N = [j, M].filter(Boolean).join(" ") || void 0, P = y || !!b;
-	return /* @__PURE__ */ c("div", {
-		className: ["multi-select-field", S].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(n, {
-				id: `${A}-label`,
-				htmlFor: A,
-				hidden: D,
-				size: O,
-				children: l
-			}),
-			/* @__PURE__ */ s(r, {
-				ref: E,
-				id: A,
-				"aria-labelledby": `${A}-label`,
-				name: h,
-				options: d,
-				value: f,
-				defaultValue: p,
-				placeholder: m,
-				disabled: g,
-				readOnly: _,
-				size: O,
-				error: P,
-				removeLabel: C,
-				"aria-describedby": N,
-				onValueChange: w,
-				onBlur: T
-			}),
-			b && /* @__PURE__ */ s(t, {
-				id: j,
-				children: b
-			}),
-			x && /* @__PURE__ */ s("span", {
-				id: M,
-				className: "multi-select-field__helper",
-				children: x
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, options: f, value: p, defaultValue: m, placeholder: h, name: g, disabled: _, readOnly: v, required: y, size: b, error: x = !1, errorMessage: S, helperText: C, className: w, removeLabel: T, onValueChange: E, onBlur: D }, O) {
+	let k = r(d), A = e(b), j = n(l, y), M = i({
+		id: o,
+		error: x,
+		errorMessage: S,
+		helperText: C
+	}), { id: N } = M;
+	return /* @__PURE__ */ s(a, {
+		field: M,
+		block: "multi-select-field",
+		className: w,
+		label: c,
+		optional: j,
+		optionalLabel: u,
+		labelHidden: k,
+		size: A,
+		labelIdentified: !0,
+		children: /* @__PURE__ */ s(t, {
+			ref: O,
+			id: N,
+			"aria-labelledby": M.labelId,
+			name: g,
+			options: f,
+			value: p,
+			defaultValue: m,
+			placeholder: h,
+			disabled: _,
+			readOnly: v,
+			required: y,
+			size: A,
+			error: M.hasError,
+			removeLabel: T,
+			"aria-describedby": M.describedBy,
+			onValueChange: E,
+			onBlur: D
+		})
 	});
 });
 //#endregion
-export { l as MultiSelectField };
+export { c as MultiSelectField };

package/dist/multi-select.js

@@ -1,125 +1,3 @@
 'use client';
-import './multi-select.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { n } from "./_shared/portal-container.js";
-import { t as r } from "./_shared/assign-ref.js";
-import { forwardRef as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Select as l } from "@base-ui/react/select";
-//#region src/stories/atoms/MultiSelect/MultiSelect.tsx
-var u = i(function({ options: i, value: u, defaultValue: d = [], placeholder: f, disabled: p, readOnly: m, size: h = "md", onValueChange: g, id: _, name: v, error: y = !1, onBlur: b, className: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, removeLabel: T, container: E }, D) {
-	let O = e("multiSelect"), k = n(E), [A, j] = o(!1), [M, N] = o(d), P = a(null), F = a(null), I = a(null), L = u === void 0 ? M : u;
-	function R(e) {
-		u === void 0 && N(e), g?.(e);
-	}
-	function z(e) {
-		R(L.filter((t) => t !== e));
-	}
-	function B(e) {
-		p || m || e.target instanceof Element && (e.target.closest(".multi-select__pill-remove") || F.current?.contains(e.target) || (e.preventDefault(), F.current?.focus(), j(!A)));
-	}
-	function V(e) {
-		return e instanceof Node && (!!F.current?.contains(e) || !!I.current?.contains(e));
-	}
-	function H(e) {
-		V(e.relatedTarget) || b?.(e);
-	}
-	let U = [
-		"multi-select",
-		h === "md" ? "" : `multi-select--${h}`,
-		p ? "multi-select--disabled" : "",
-		y ? "multi-select--error" : "",
-		x ?? ""
-	].filter(Boolean).join(" "), W = ["multi-select__content", h === "md" ? "" : `multi-select__content--${h}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ c(l.Root, {
-		multiple: !0,
-		value: L,
-		onValueChange: R,
-		open: A,
-		onOpenChange: j,
-		name: v,
-		disabled: p,
-		readOnly: m,
-		modal: !1,
-		children: [/* @__PURE__ */ c("div", {
-			ref: P,
-			className: U,
-			"data-popup-open": A || void 0,
-			onPointerDown: B,
-			children: [/* @__PURE__ */ c("div", {
-				className: "multi-select__values",
-				children: [L.map((e) => {
-					let n = i.find((t) => t.value === e);
-					return n ? /* @__PURE__ */ c("span", {
-						className: "multi-select__pill",
-						children: [/* @__PURE__ */ s("span", {
-							className: "multi-select__pill-label",
-							children: n.label
-						}), !p && !m && /* @__PURE__ */ s("button", {
-							type: "button",
-							className: "multi-select__pill-remove",
-							"aria-label": O("remove", T)(n.label),
-							tabIndex: -1,
-							onClick: (t) => {
-								t.stopPropagation(), z(e), F.current?.focus();
-							},
-							children: /* @__PURE__ */ s(t, {
-								name: "close",
-								size: "xs"
-							})
-						})]
-					}, e) : null;
-				}), /* @__PURE__ */ s(l.Trigger, {
-					ref: (e) => {
-						F.current = e, r(D, e);
-					},
-					render: /* @__PURE__ */ s("div", {}),
-					nativeButton: !1,
-					className: "multi-select__combobox",
-					id: _,
-					"aria-label": C ? void 0 : S ?? O("placeholder", f),
-					"aria-labelledby": C,
-					"aria-describedby": w,
-					"aria-invalid": y || void 0,
-					"aria-readonly": m || void 0,
-					onBlur: H,
-					children: L.length === 0 && /* @__PURE__ */ s("span", {
-						className: "multi-select__placeholder",
-						children: O("placeholder", f)
-					})
-				})]
-			}), /* @__PURE__ */ s(t, {
-				name: "chevron",
-				className: "multi-select__icon"
-			})]
-		}), /* @__PURE__ */ s(l.Portal, {
-			container: k,
-			children: /* @__PURE__ */ s(l.Positioner, {
-				className: "multi-select__positioner",
-				anchor: P,
-				align: "start",
-				sideOffset: -1,
-				alignItemWithTrigger: !1,
-				children: /* @__PURE__ */ s(l.Popup, {
-					ref: I,
-					className: W,
-					"aria-label": S ?? f,
-					onBlur: H,
-					children: i.map((e) => /* @__PURE__ */ c(l.Item, {
-						value: e.value,
-						"aria-label": e["aria-label"] ?? e.label,
-						className: "multi-select__item",
-						children: [/* @__PURE__ */ s("span", {
-							className: "multi-select__item-check",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ s("span", { className: "multi-select__item-check-mark" })
-						}), /* @__PURE__ */ s(l.ItemText, { children: e.label })]
-					}, e.value))
-				})
-			})
-		})]
-	});
-});
-//#endregion
-export { u as MultiSelect };
+import { t as e } from "./_shared/multiselect.js";
+export { e as MultiSelect };

package/dist/not-found-page.js

@@ -1,7 +1,7 @@
 'use client';
 import { Stack as e } from "./stack.js";
 import { PageIntro as t } from "./page-intro.js";
-import { PublicPageShell as n } from "./public-page-shell.js";
+import { t as n } from "./_shared/publicpageshell.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/templates/NotFoundPage/NotFoundPage.tsx
 function a({ title: a, description: o, homeLink: s, header: c, footer: l, id: u = "main-content", shell: d = !0, className: f }) {

package/dist/notification-button.js

@@ -1,33 +1,3 @@
 'use client';
-import './notification-button.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { Button as n } from "./button.js";
-import { NumberBadge as r } from "./number-badge.js";
-import { forwardRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/stories/molecules/NotificationButton/NotificationButton.tsx
-var s = i(function({ count: i = 0, max: s = 99, label: c, countLabel: l, className: u, ...d }, f) {
-	let p = e("notificationButton"), m = i > 0 ? p("countLabel", l)(i) : p("label", c);
-	return /* @__PURE__ */ o(n, {
-		ref: f,
-		variant: "ghost",
-		iconOnly: !0,
-		size: "md",
-		"aria-label": m,
-		className: ["notification-button", u].filter(Boolean).join(" "),
-		...d,
-		children: [/* @__PURE__ */ a(t, {
-			name: "bell",
-			size: "md"
-		}), i > 0 && /* @__PURE__ */ a(r, {
-			count: i,
-			max: s,
-			variant: "danger",
-			"aria-hidden": "true",
-			className: "notification-button__badge"
-		})]
-	});
-});
-//#endregion
-export { s as NotificationButton };
+import { t as e } from "./_shared/notificationbutton.js";
+export { e as NotificationButton };

package/dist/notification-list.js

@@ -1,20 +1,27 @@
 'use client';
 import './notification-list.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r 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 { Text as i } from "./text.js";
 import { t as a } from "./_shared/default-render-link.js";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/stories/messages/es/notificationList.ts
+var l = {
+	label: "Notificaciones",
+	unread: "Sin leer",
+	markRead: "Marcar como leída"
+};
+//#endregion
 //#region src/stories/molecules/NotificationList/NotificationList.tsx
-function l({ items: l, renderLink: u = a, renderActions: d, onItemClick: f, onMarkRead: p, label: m, unreadLabel: h, markReadLabel: g, className: _ }) {
-	let v = e("notificationList");
-	return l.length === 0 ? null : /* @__PURE__ */ s("ul", {
-		className: ["notification-list", _].filter(Boolean).join(" "),
-		"aria-label": v("label", m),
-		children: l.map((e) => {
-			let a = e.unread, l = d?.(e);
+function u({ items: u, renderLink: d = a, renderActions: f, onItemClick: p, onMarkRead: m, label: h, unreadLabel: g, markReadLabel: _, className: v }) {
+	let y = e("notificationList", l);
+	return u.length === 0 ? null : /* @__PURE__ */ s("ul", {
+		className: ["notification-list", v].filter(Boolean).join(" "),
+		"aria-label": y("label", h),
+		children: u.map((e) => {
+			let a = e.unread, l = f?.(e);
 			return /* @__PURE__ */ c("li", {
 				className: "notification-list__item",
 				children: [
@@ -24,14 +31,14 @@ function l({ items: l, renderLink: u = a, renderActions: d, onItemClick: f, onMa
 							name: "dot",
 							size: "sm",
 							className: "notification-list__dot"
-						}), /* @__PURE__ */ s(n, { children: e.unreadLabel ?? v("unread", h) })] })
+						}), /* @__PURE__ */ s(n, { children: e.unreadLabel ?? y("unread", g) })] })
 					}),
 					/* @__PURE__ */ c("div", {
 						className: "notification-list__text",
-						children: [e.href ? u({
+						children: [e.href ? d({
 							href: e.href,
 							className: "notification-list__title",
-							onClick: f ? () => f(e) : void 0,
+							onClick: p ? () => p(e) : void 0,
 							children: e.title
 						}) : /* @__PURE__ */ s(i, {
 							className: "notification-list__title",
@@ -42,13 +49,13 @@ function l({ items: l, renderLink: u = a, renderActions: d, onItemClick: f, onMa
 							children: e.body
 						})]
 					}),
-					(p || l) && /* @__PURE__ */ c("div", {
+					(m || l) && /* @__PURE__ */ c("div", {
 						className: "notification-list__actions",
-						children: [p && a && /* @__PURE__ */ s(r, {
+						children: [m && a && /* @__PURE__ */ s(r, {
 							variant: "text",
 							size: "sm",
-							onClick: () => p(e.id),
-							children: v("markRead", g)
+							onClick: () => m(e.id),
+							children: y("markRead", _)
 						}), l]
 					}),
 					e.timeDateTime ? /* @__PURE__ */ s("time", {
@@ -65,4 +72,4 @@ function l({ items: l, renderLink: u = a, renderActions: d, onItemClick: f, onMa
 	});
 }
 //#endregion
-export { l as NotificationList };
+export { u as NotificationList };

package/dist/notification-panel.css

@@ -1 +1 @@
-.notification-panel{--popover-padding-block:0;--popover-padding-inline:0;inline-size:var(--notification-panel-inline-size)}.notification-panel__body{flex-direction:column;min-block-size:0;display:flex}.notification-panel__list{padding-block:var(--notification-panel-list-padding-block);gap:var(--notification-panel-list-gap);max-block-size:var(--notification-panel-list-max-block-size);flex-direction:column;margin:0;padding-inline:0;list-style:none;display:flex;overflow-y:auto}.notification-panel__item{flex-direction:column;align-items:start;display:flex}.notification-panel__item-action{align-items:start;gap:var(--notification-panel-item-gap);inline-size:100%;padding-block:var(--notification-panel-item-padding-block);padding-inline:var(--notification-panel-padding-inline);color:inherit;font-family:var(--notification-panel-item-font-family);text-align:start;cursor:pointer;border-radius:var(--notification-panel-item-border-radius);background:0 0;border:none;display:flex}.notification-panel__item-action[aria-disabled=true]{cursor:default}.notification-panel__item-action:focus-visible{outline:var(--notification-panel-focus-ring-width) solid var(--notification-panel-focus-ring-color);outline-offset:calc(-1 * var(--notification-panel-focus-ring-width))}.notification-panel__indicator{inline-size:var(--notification-panel-dot-size);flex-shrink:0;margin-block-start:var(--notification-panel-dot-margin-block-start)}.notification-panel__dot{color:var(--notification-panel-dot-color);display:block}.notification-panel__item-text{gap:var(--notification-panel-item-text-gap);flex-direction:column;flex:1;min-inline-size:0;display:flex}.notification-panel__item-text .notification-panel__item-title{font-size:var(--notification-panel-item-title-font-size);line-height:var(--notification-panel-item-title-line-height);font-weight:var(--notification-panel-item-title-font-weight);min-inline-size:0}.notification-panel__item-text .notification-panel__item-body{-webkit-line-clamp:var(--notification-panel-item-body-line-clamp);line-clamp:var(--notification-panel-item-body-line-clamp);font-size:var(--notification-panel-item-body-font-size);line-height:var(--notification-panel-item-body-line-height);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.notification-panel__item-text .notification-panel__item-time{font-size:var(--notification-panel-item-time-font-size);text-align:end;white-space:nowrap;align-self:flex-end}.notification-panel__mark-all{padding-block:var(--notification-panel-mark-all-padding-block);padding-inline:var(--notification-panel-padding-inline)}.notification-panel__empty{padding-block:var(--notification-panel-empty-padding-block);padding-inline:var(--notification-panel-padding-inline);text-align:center}.notification-panel__footer{align-items:center;gap:var(--notification-panel-footer-gap);padding-block:var(--notification-panel-footer-padding-block);padding-inline:var(--notification-panel-padding-inline);flex-direction:column;display:flex}.notification-panel__footer-links{align-items:center;gap:var(--notification-panel-footer-gap);flex-direction:column;display:flex}.notification-panel__footer-link{font-size:var(--notification-panel-footer-font-size);text-align:center}
+.notification-panel{--popover-padding-block:0;--popover-padding-inline:0;inline-size:var(--notification-panel-width)}.notification-panel__body{flex-direction:column;min-block-size:0;display:flex}.notification-panel__list{padding-block:var(--notification-panel-list-padding-block);gap:var(--notification-panel-list-gap);max-block-size:var(--notification-panel-list-max-height);flex-direction:column;margin:0;padding-inline:0;list-style:none;display:flex;overflow-y:auto}.notification-panel__item{flex-direction:column;align-items:start;display:flex}.notification-panel__item-action{align-items:start;gap:var(--notification-panel-item-gap);inline-size:100%;padding-block:var(--notification-panel-item-padding-block);padding-inline:var(--notification-panel-padding-inline);color:inherit;font-family:var(--notification-panel-item-font-family);text-align:start;cursor:pointer;border-radius:var(--notification-panel-item-border-radius);background:0 0;border:none;display:flex}.notification-panel__item-action[aria-disabled=true]{cursor:default}.notification-panel__item-action:focus-visible{outline:var(--notification-panel-focus-ring-width) solid var(--notification-panel-focus-ring-color);outline-offset:calc(-1 * var(--notification-panel-focus-ring-width))}.notification-panel__indicator{inline-size:var(--notification-panel-dot-size);flex-shrink:0;margin-block-start:var(--notification-panel-dot-margin-block-start)}.notification-panel__dot{color:var(--notification-panel-dot-color);display:block}.notification-panel__item-text{gap:var(--notification-panel-item-text-gap);flex-direction:column;flex:1;min-inline-size:0;display:flex}.notification-panel__item-text .notification-panel__item-title{font-size:var(--notification-panel-item-title-font-size);line-height:var(--notification-panel-item-title-line-height);font-weight:var(--notification-panel-item-title-font-weight);min-inline-size:0}.notification-panel__item-text .notification-panel__item-body{-webkit-line-clamp:var(--notification-panel-item-body-line-clamp);line-clamp:var(--notification-panel-item-body-line-clamp);font-size:var(--notification-panel-item-body-font-size);line-height:var(--notification-panel-item-body-line-height);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.notification-panel__item-text .notification-panel__item-time{font-size:var(--notification-panel-item-time-font-size);text-align:end;white-space:nowrap;align-self:flex-end}.notification-panel__mark-all{padding-block:var(--notification-panel-mark-all-padding-block);padding-inline:var(--notification-panel-padding-inline)}.notification-panel__empty{padding-block:var(--notification-panel-empty-padding-block);padding-inline:var(--notification-panel-padding-inline);text-align:center}.notification-panel__footer{align-items:center;gap:var(--notification-panel-footer-gap);padding-block:var(--notification-panel-footer-padding-block);padding-inline:var(--notification-panel-padding-inline);flex-direction:column;display:flex}.notification-panel__footer-links{align-items:center;gap:var(--notification-panel-footer-gap);flex-direction:column;display:flex}.notification-panel__footer-link{font-size:var(--notification-panel-footer-font-size);text-align:center}

package/dist/notification-panel.js

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

package/dist/notificationbutton.css

@@ -0,0 +1 @@
+.notification-button{--button-ghost-hover-bg:var(--button-ghost-bg);--button-ghost-hover-color:var(--button-ghost-color);--button-ghost-active-bg:var(--button-ghost-bg);--button-ghost-active-color:var(--button-ghost-color);position:relative}.notification-button__badge{--number-badge-error-bg:var(--notification-button-badge-fill);--number-badge-error-color:var(--notification-button-badge-color);position:absolute;inset-block-start:var(--notification-button-badge-offset);inset-inline-end:var(--notification-button-badge-offset);translate:50% -50%}

package/dist/number-badge.css

@@ -1 +1 @@
-.number-badge{min-inline-size:var(--number-badge-min-size);block-size:var(--number-badge-min-size);padding-inline:var(--number-badge-padding-inline);border-radius:var(--number-badge-border-radius);font-family:var(--number-badge-font-family);font-size:var(--number-badge-font-size);font-weight:var(--number-badge-font-weight);line-height:var(--number-badge-line-height);white-space:nowrap;justify-content:center;align-items:center;display:inline-flex}.number-badge--primary{background-color:var(--number-badge-primary-bg);color:var(--number-badge-primary-color)}.number-badge--accent-1{background-color:var(--number-badge-accent-1-bg);color:var(--number-badge-accent-1-color)}.number-badge--accent-2{background-color:var(--number-badge-accent-2-bg);color:var(--number-badge-accent-2-color)}.number-badge--support-1{background-color:var(--number-badge-support-1-bg);color:var(--number-badge-support-1-color)}.number-badge--support-2{background-color:var(--number-badge-support-2-bg);color:var(--number-badge-support-2-color)}.number-badge--danger{background-color:var(--number-badge-danger-bg);color:var(--number-badge-danger-color)}.number-badge--success{background-color:var(--number-badge-success-bg);color:var(--number-badge-success-color)}.number-badge--neutral{background-color:var(--number-badge-neutral-bg);color:var(--number-badge-neutral-color)}
+.number-badge{min-inline-size:var(--number-badge-min-size);block-size:var(--number-badge-min-size);padding-inline:var(--number-badge-padding-inline);border-radius:var(--number-badge-border-radius);font-family:var(--number-badge-font-family);font-size:var(--number-badge-font-size);font-weight:var(--number-badge-font-weight);line-height:var(--number-badge-line-height);white-space:nowrap;justify-content:center;align-items:center;display:inline-flex}.number-badge--primary{background-color:var(--number-badge-primary-bg);color:var(--number-badge-primary-color)}.number-badge--accent-1{background-color:var(--number-badge-accent-1-bg);color:var(--number-badge-accent-1-color)}.number-badge--accent-2{background-color:var(--number-badge-accent-2-bg);color:var(--number-badge-accent-2-color)}.number-badge--support-1{background-color:var(--number-badge-support-1-bg);color:var(--number-badge-support-1-color)}.number-badge--support-2{background-color:var(--number-badge-support-2-bg);color:var(--number-badge-support-2-color)}.number-badge--error{background-color:var(--number-badge-error-bg);color:var(--number-badge-error-color)}.number-badge--success{background-color:var(--number-badge-success-bg);color:var(--number-badge-success-color)}.number-badge--neutral{background-color:var(--number-badge-neutral-bg);color:var(--number-badge-neutral-color)}