@studiolxd/brand 49.28.0 → 51.0.0

package/dist/messages.js

@@ -1,12 +1,15 @@
 'use client';
-import { n as e, t } from "./_shared/brandmessagescontext.js";
-import { jsx as n } from "react/jsx-runtime";
+import { n as e, r as t, t as n } from "./_shared/brandmessagescontext.js";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/stories/messages/BrandMessagesProvider.tsx
-function r({ messages: e, children: r }) {
-	return /* @__PURE__ */ n(t.Provider, {
-		value: e,
-		children: r
+function i({ messages: t, fallback: i, children: a }) {
+	return /* @__PURE__ */ r(n.Provider, {
+		value: t ?? null,
+		children: /* @__PURE__ */ r(e.Provider, {
+			value: i === "es",
+			children: a
+		})
 	});
 }
 //#endregion
-export { r as BrandMessagesProvider, e as useBrandMessages };
+export { i as BrandMessagesProvider, t as useBrandMessages };

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{z-index:var(--modal-z-index);width:90vw;max-width:var(--modal-width-max);max-height: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;top:50%;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-height: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, ...C }) {
-	let w = e("modal"), T = n(_), E = y === void 0 ? {} : { "aria-describedby": y }, D = b === void 0 ? {} : { initialFocus: b };
-	return /* @__PURE__ */ c(u.Root, {
-		open: d,
-		onOpenChange: (e) => {
-			e || f();
-		},
-		children: /* @__PURE__ */ l(u.Portal, {
-			container: T,
-			children: [/* @__PURE__ */ c(a, { className: "modal__overlay" }), /* @__PURE__ */ l(u.Popup, {
-				className: "modal__content",
-				...E,
-				...D,
-				...C,
-				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: w("close", h) })
-						})]
-					}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(u.Title, { render: /* @__PURE__ */ c(t, { children: w("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: w("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,193 +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 { 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 d(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = 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 J(e) {
-		g || _ || (P(!0), R(r.length === 0 ? -1 : e));
-	}
-	function Y() {
-		P(!1), R(-1), U.current = "";
-	}
-	function X(e, t) {
-		if (!e) {
-			if (t.reason === "outside-press") {
-				let e = t.event?.target;
-				if (e instanceof Node && z.current?.contains(e)) return;
-			}
-			Y();
-		}
-	}
-	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 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 (!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 $(e) {
-		g || _ || e.target instanceof Element && e.target.closest(".multi-select__pill-remove") || (e.preventDefault(), B.current?.focus(), N ? Y() : J(0));
-	}
-	i(() => {
-		!N || L < 0 || document.getElementById(K(L))?.scrollIntoView({ block: "nearest" });
-	}, [
-		N,
-		L,
-		H
-	]);
-	let ee = [
-		"multi-select",
-		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__ */ l("div", {
-					className: "multi-select__values",
-					children: [G.map((e) => {
-						let n = r.find((t) => t.value === e);
-						return n ? /* @__PURE__ */ l("span", {
-							className: "multi-select__pill",
-							children: [/* @__PURE__ */ c("span", {
-								className: "multi-select__pill-label",
-								children: n.label
-							}), !g && !_ && /* @__PURE__ */ c("button", {
-								type: "button",
-								className: "multi-select__pill-remove",
-								"aria-label": j("remove", O)(n.label),
-								tabIndex: -1,
-								onClick: (t) => {
-									t.stopPropagation(), q(e), B.current?.focus();
-								},
-								children: /* @__PURE__ */ c(t, {
-									name: "close",
-									size: "xs"
-								})
-							})]
-						}, e) : null;
-					}), /* @__PURE__ */ c("div", {
-						ref: (e) => {
-							B.current = e, d(A, e);
-						},
-						className: "multi-select__combobox",
-						tabIndex: g ? -1 : 0,
-						role: "combobox",
-						"aria-expanded": N,
-						"aria-haspopup": "listbox",
-						"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: j("placeholder", h)
-						})
-					})]
-				}),
-				/* @__PURE__ */ c(t, {
-					name: "chevron",
-					className: "multi-select__icon"
-				}),
-				x && G.map((e) => /* @__PURE__ */ c("input", {
-					type: "hidden",
-					name: x,
-					value: e
-				}, e))
-			]
-		}), /* @__PURE__ */ c(u.Portal, {
-			container: M,
-			children: /* @__PURE__ */ c(u.Positioner, {
-				className: "multi-select__positioner",
-				anchor: z,
-				align: "start",
-				sideOffset: -1,
-				children: /* @__PURE__ */ c(u.Popup, {
-					className: te,
-					initialFocus: !1,
-					finalFocus: !1,
-					children: /* @__PURE__ */ c("div", {
-						role: "listbox",
-						"aria-multiselectable": "true",
-						"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,
-								className: [
-									"multi-select__item",
-									n ? "multi-select__item--selected" : "",
-									r ? "multi-select__item--active" : ""
-								].filter(Boolean).join(" "),
-								onPointerDown: (e) => {
-									e.preventDefault(), e.stopPropagation();
-								},
-								onClick: () => {
-									q(e.value), R(t), B.current?.focus();
-								},
-								children: [/* @__PURE__ */ c("span", {
-									className: "multi-select__item-check",
-									"aria-hidden": "true",
-									children: /* @__PURE__ */ c("span", { className: "multi-select__item-check-mark" })
-								}), /* @__PURE__ */ c("span", { children: e.label })]
-							}, e.value);
-						})
-					})
-				})
-			})
-		})]
-	});
-});
-//#endregion
-export { p as MultiSelect };
+import { t as e } from "./_shared/multiselect.js";
+export { e as MultiSelect };

package/dist/multiselect.css

@@ -0,0 +1 @@
+.multi-select{justify-content:space-between;align-items:center;gap:var(--multi-select-content-gap);min-block-size:var(--multi-select-height);padding-block:0;padding-inline:var(--multi-select-padding-inline);font-family:var(--multi-select-font-family);font-size:var(--multi-select-font-size);line-height:var(--multi-select-line-height);font-weight:var(--multi-select-font-weight);color:var(--multi-select-color);background-color:var(--multi-select-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-border-color);border-radius:var(--multi-select-border-radius);box-sizing:border-box;cursor:pointer;inline-size:100%;display:inline-flex}.multi-select:focus,.multi-select[data-popup-open]{outline:none}.multi-select:has(.multi-select__combobox:focus-visible){outline:var(--multi-select-focus-ring-width) solid var(--multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--multi-select-focus-ring-width) + var(--multi-select-border-width)))}.multi-select__combobox{outline:none;flex:auto;align-items:center;min-inline-size:0;display:inline-flex}.multi-select.multi-select--disabled{opacity:var(--multi-select-disabled-opacity);cursor:var(--multi-select-disabled-cursor);pointer-events:none}.multi-select__values{align-items:center;gap:var(--multi-select-selection-gap);flex-wrap:wrap;flex:1;min-inline-size:0;display:flex}.multi-select__placeholder{color:var(--multi-select-placeholder-color)}.multi-select__pill{align-items:center;gap:var(--multi-select-pill-gap);padding-block:var(--multi-select-pill-padding-block);padding-inline:var(--multi-select-pill-padding-inline);background-color:var(--multi-select-pill-bg);color:var(--multi-select-pill-color);border-radius:var(--multi-select-pill-border-radius);font-size:var(--multi-select-pill-font-size);line-height:var(--multi-select-pill-line-height);white-space:nowrap;display:inline-flex}.multi-select__pill-label{line-height:var(--multi-select-pill-line-height)}.multi-select__pill-remove{all:unset;cursor:pointer;line-height:var(--multi-select-pill-line-height);font-size:var(--multi-select-pill-font-size);opacity:var(--multi-select-pill-remove-opacity);justify-content:center;align-items:center;display:inline-flex}.multi-select__pill-remove:hover{opacity:var(--multi-select-pill-remove-hover-opacity)}.multi-select .multi-select__icon{--icon-size:var(--multi-select-icon-size)}.multi-select__icon{transition:transform var(--multi-select-icon-transition) var(--multi-select-icon-transition-easing);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .multi-select__icon{transform:rotate(-90deg)}.multi-select__content{background-color:var(--multi-select-content-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.multi-select__content[data-side=bottom]{border-block-start:none}.multi-select__content[data-side=top]{border-block-end:none}.multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--multi-select-padding-inline);inline-size:100%;padding-block:var(--multi-select-item-padding-block);padding-inline:var(--multi-select-padding-inline);font-size:var(--multi-select-font-size);font-family:var(--multi-select-font-family);color:var(--multi-select-color);cursor:pointer;display:flex}.multi-select__item[data-highlighted],.multi-select__item:hover{background-color:var(--multi-select-item-highlighted-bg);color:var(--multi-select-item-highlighted-color)}.multi-select__item[data-selected]{font-weight:var(--multi-select-item-selected-font-weight)}.multi-select__content .multi-select__item+.multi-select__item,.multi-select__content[data-side=bottom] .multi-select__item:first-child{border-block-start:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__content[data-side=top] .multi-select__item:last-child{border-block-end:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__item-check{inline-size:var(--checkbox-size);block-size:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.multi-select__item[data-selected] .multi-select__item-check{background-color:currentColor}.multi-select__item-check-mark{inline-size:var(--checkbox-check-size);block-size:var(--checkbox-check-size);background-color:var(--multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.multi-select__item[data-selected] .multi-select__item-check-mark{transform:scale(1)}.multi-select__item[data-highlighted] .multi-select__item-check-mark,.multi-select__item:hover .multi-select__item-check-mark{background-color:var(--multi-select-item-highlighted-bg)}.multi-select.multi-select--sm{font-size:var(--multi-select-sm-font-size);--multi-select-height:var(--multi-select-sm-height);padding-inline:var(--multi-select-sm-padding-inline);--multi-select-icon-size:var(--multi-select-sm-icon-size)}.multi-select__content--sm .multi-select__item{font-size:var(--multi-select-sm-font-size);padding-block:var(--multi-select-sm-item-padding-block)}.multi-select.multi-select--lg{font-size:var(--multi-select-lg-font-size);--multi-select-height:var(--multi-select-lg-height);padding-inline:var(--multi-select-lg-padding-inline);--multi-select-icon-size:var(--multi-select-lg-icon-size)}.multi-select__content--lg .multi-select__item{font-size:var(--multi-select-lg-font-size);padding-block:var(--multi-select-lg-item-padding-block)}.multi-select__positioner{z-index:var(--multi-select-content-z-index)}.multi-select.multi-select--error{border-color:var(--multi-select-error-border-color)}

package/dist/not-found-page.js

@@ -1,19 +1,22 @@
 '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 }) {
+function a({ title: a, description: o, homeLink: s, header: c, footer: l, id: u = "main-content", shell: d = !0, className: f }) {
 	return /* @__PURE__ */ r(n, {
 		header: c,
 		footer: l,
 		id: u,
 		shell: d,
-		children: /* @__PURE__ */ i(e, { children: [/* @__PURE__ */ r(t, {
-			title: a,
-			description: o
-		}), s] })
+		children: /* @__PURE__ */ i(e, {
+			className: f,
+			children: [/* @__PURE__ */ r(t, {
+				title: a,
+				description: o
+			}), s]
+		})
 	});
 }
 //#endregion

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,66 +1,68 @@
 '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 { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+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 c({ children: e, ...t }) {
-	return /* @__PURE__ */ o("a", {
-		...t,
-		children: e
-	});
-}
-function l({ items: l, renderLink: u = c, renderActions: d, onItemClick: f, onMarkRead: p, label: m, unreadLabel: h, markReadLabel: g, className: _ }) {
-	let v = e("notificationList");
-	return l.length === 0 ? null : /* @__PURE__ */ o("ul", {
-		className: ["notification-list", _].filter(Boolean).join(" "),
-		"aria-label": v("label", m),
-		children: l.map((e) => {
-			let c = e.unread, l = d?.(e);
-			return /* @__PURE__ */ s("li", {
+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: [
-					/* @__PURE__ */ o("span", {
+					/* @__PURE__ */ s("span", {
 						className: "notification-list__indicator",
-						children: c && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
+						children: a && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(t, {
 							name: "dot",
 							size: "sm",
 							className: "notification-list__dot"
-						}), /* @__PURE__ */ o(n, { children: e.unreadLabel ?? v("unread", h) })] })
+						}), /* @__PURE__ */ s(n, { children: e.unreadLabel ?? y("unread", g) })] })
 					}),
-					/* @__PURE__ */ s("div", {
+					/* @__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__ */ o(i, {
+						}) : /* @__PURE__ */ s(i, {
 							className: "notification-list__title",
 							children: e.title
-						}), e.body && /* @__PURE__ */ o(i, {
+						}), e.body && /* @__PURE__ */ s(i, {
 							tone: "muted",
 							className: "notification-list__body",
 							children: e.body
 						})]
 					}),
-					(p || l) && /* @__PURE__ */ s("div", {
+					(m || l) && /* @__PURE__ */ c("div", {
 						className: "notification-list__actions",
-						children: [p && c && /* @__PURE__ */ o(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__ */ o("time", {
+					e.timeDateTime ? /* @__PURE__ */ s("time", {
 						className: "notification-list__time",
 						dateTime: e.timeDateTime,
 						children: e.time
-					}) : /* @__PURE__ */ o("span", {
+					}) : /* @__PURE__ */ s("span", {
 						className: "notification-list__time",
 						children: e.time
 					})
@@ -70,4 +72,4 @@ function l({ items: l, renderLink: u = c, 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}