@studiolxd/brand 38.12.4

package/dist/menu-button.js

@@ -0,0 +1,27 @@
+'use client';
+import './menu-button.css';
+import { Icon as e } from "./icon.js";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+//#region src/stories/atoms/MenuButton/MenuButton.tsx
+var r = n(function({ isOpen: n = !1, label: r = "Menú", closeLabel: i, size: a = "md", className: o, ...s }, c) {
+	return /* @__PURE__ */ t("button", {
+		ref: c,
+		type: "button",
+		className: [
+			"menu-button",
+			`menu-button--${a}`,
+			o
+		].filter(Boolean).join(" "),
+		"aria-label": n && i ? i : r,
+		"aria-expanded": n,
+		...s,
+		children: /* @__PURE__ */ t(e, {
+			name: "menu",
+			size: a === "lg" ? "lg" : "md",
+			className: "menu-button__icon"
+		})
+	});
+});
+//#endregion
+export { r as MenuButton };

package/dist/menu.css

@@ -0,0 +1 @@
+@keyframes menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.menu__content{box-sizing:border-box;background-color:var(--menu-bg);border-width:var(--menu-border-width);border-style:solid;border-color:var(--menu-border-color);border-radius:var(--menu-border-radius);box-shadow:var(--menu-shadow);padding-block:var(--menu-padding-block);transform-origin:var(--transform-origin);max-height:var(--menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;padding-inline:0;overflow-y:auto}.menu__content[data-open]{animation:menu-open var(--menu-transition-duration) var(--menu-transition-easing)}.menu__content[data-closed]{animation:menu-close var(--menu-transition-duration) var(--menu-transition-easing)}.menu__item{align-items:center;gap:var(--menu-item-icon-gap);padding-block:var(--menu-item-padding-block);padding-inline:var(--menu-item-padding-inline);margin-inline:var(--menu-padding-inline);border-radius:var(--menu-item-border-radius);font-family:var(--menu-item-font-family);font-size:var(--menu-item-font-size);font-weight:var(--menu-item-font-weight);line-height:var(--menu-item-line-height);color:var(--menu-item-color);cursor:var(--menu-item-cursor);box-shadow:none;transition:background-color var(--menu-transition-duration) var(--menu-transition-easing), color var(--menu-transition-duration) var(--menu-transition-easing);outline:none;text-decoration:none;display:flex}.menu__item:focus-visible{outline:none}.menu__item[data-highlighted]{background-color:var(--menu-item-highlighted-bg);color:var(--menu-item-highlighted-color)}.menu__item:is(a):hover:not([data-highlighted]),.menu__item:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-color);box-shadow:none}.menu__item.menu__item--destructive:is(a):hover:not([data-highlighted]),.menu__item.menu__item--destructive:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-destructive-color)}.menu__item[data-disabled]{opacity:var(--menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.menu__item.menu__item--destructive{color:var(--menu-item-destructive-color)}.menu__item.menu__item--destructive[data-highlighted]{background-color:var(--menu-item-destructive-highlighted-bg);color:var(--menu-item-destructive-highlighted-color)}.menu__item svg{width:var(--menu-item-icon-size);height:var(--menu-item-icon-size);flex-shrink:0}.menu__label{padding-block:var(--menu-label-padding-block);padding-inline:var(--menu-label-padding-inline);font-family:var(--menu-item-font-family);font-size:var(--menu-label-font-size);font-weight:var(--menu-label-font-weight);color:var(--menu-label-color)}.menu__item[data-checked]{font-weight:var(--menu-item-selected-font-weight)}.menu__separator{height:var(--menu-separator-height);background-color:var(--menu-separator-color);margin-block:var(--menu-separator-margin-block);border:none;margin-inline:0}.menu__positioner{z-index:var(--menu-z-index)}.menu__content--sm .menu__item{font-size:var(--menu-sm-item-font-size);padding-block:var(--menu-sm-item-padding-block)}.menu__content--sm .menu__item svg{width:var(--menu-sm-item-icon-size);height:var(--menu-sm-item-icon-size)}.menu__content--lg .menu__item{font-size:var(--menu-lg-item-font-size);padding-block:var(--menu-lg-item-padding-block)}.menu__content--lg .menu__item svg{width:var(--menu-lg-item-icon-size);height:var(--menu-lg-item-icon-size)}

package/dist/menu.js

@@ -0,0 +1,51 @@
+'use client';
+import './menu.css';
+import { t as e } from "./_shared/css-properties.js";
+import { n as t, t as n } from "./_shared/dropdownitems.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Menu as a } from "@base-ui/react/menu";
+//#region src/stories/molecules/Menu/Menu.tsx
+function o(e) {
+	return ["menu__item", e ? "menu__item--destructive" : ""].filter(Boolean).join(" ");
+}
+function s({ trigger: s, items: c, value: l, onValueChange: u, renderLink: d = n, open: f, defaultOpen: p, onOpenChange: m, openOnHover: h = !1, hoverDelay: g = 150, side: _ = "bottom", align: v = "start", sideOffset: y = 4, minWidth: b = "10rem", maxWidth: x, size: S = "md", className: C }) {
+	let w = s, T = typeof w.props?.id == "string" ? w.props.id : void 0, E = e({
+		"min-width": b,
+		"max-width": x
+	});
+	return /* @__PURE__ */ i(a.Root, {
+		open: f,
+		defaultOpen: p,
+		onOpenChange: (e) => m?.(e),
+		children: [/* @__PURE__ */ r(a.Trigger, {
+			id: T,
+			render: w,
+			openOnHover: h,
+			delay: g
+		}), /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(a.Positioner, {
+			className: "menu__positioner",
+			side: _,
+			align: v,
+			sideOffset: y,
+			children: /* @__PURE__ */ r(a.Popup, {
+				ref: E,
+				className: [
+					"menu__content",
+					S === "md" ? "" : `menu__content--${S}`,
+					C
+				].filter(Boolean).join(" "),
+				children: t({
+					items: c,
+					itemClass: o,
+					separatorClass: "menu__separator",
+					labelClass: "menu__label",
+					radioValue: l,
+					onRadioValueChange: u,
+					renderLink: d
+				})
+			})
+		}) })]
+	});
+}
+//#endregion
+export { s as Menu };

package/dist/message-bubble.css

@@ -0,0 +1 @@
+.message-bubble{--_tail:var(--message-bubble-tail-size);--_border:var(--message-bubble-border-width);--_diagonal:calc(var(--_border) * 1.41421);padding-block:var(--message-bubble-padding-block);padding-inline:var(--message-bubble-padding-inline);border-radius:var(--message-bubble-border-radius);border-width:var(--message-bubble-border-width);border-style:var(--message-bubble-border-style);border-color:var(--message-bubble-border-color);color:var(--message-bubble-color);max-width:var(--message-bubble-max-width);font-family:var(--message-bubble-font-family);font-size:var(--message-bubble-font-size);font-weight:var(--message-bubble-font-weight);line-height:var(--message-bubble-line-height);position:relative}.message-bubble:before,.message-bubble:after{content:"";block-size:0;inline-size:0;position:absolute}.message-bubble--assistant{margin-inline-end:auto}.message-bubble--assistant:before{border-block-start:var(--_tail) solid transparent;border-inline-end:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-start:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--assistant:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-end:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-start:calc(var(--_diagonal) - var(--_tail))}.message-bubble--user{margin-inline-start:auto}.message-bubble--user:before{border-block-start:var(--_tail) solid transparent;border-inline-start:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-end:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--user:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-start:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-end:calc(var(--_diagonal) - var(--_tail))}

package/dist/message-bubble.js

@@ -0,0 +1,18 @@
+import './message-bubble.css';
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+//#region src/stories/atoms/MessageBubble/MessageBubble.tsx
+var n = t(function({ role: t, children: n, className: r, ...i }, a) {
+	return /* @__PURE__ */ e("div", {
+		ref: a,
+		className: [
+			"message-bubble",
+			`message-bubble--${t}`,
+			r ?? ""
+		].filter(Boolean).join(" "),
+		...i,
+		children: n
+	});
+});
+//#endregion
+export { n as MessageBubble };

package/dist/message-composer.css

@@ -0,0 +1 @@
+.message-composer{gap:var(--message-composer-helper-gap);flex-direction:column;display:flex}.message-composer__box{align-items:flex-end;gap:var(--message-composer-gap);padding-block:var(--message-composer-padding-block);padding-inline:var(--message-composer-padding-inline);border-radius:var(--message-composer-border-radius);border-width:var(--message-composer-border-width);border-style:var(--message-composer-border-style);border-color:var(--message-composer-border-color);background-color:var(--message-composer-bg);display:flex}.message-composer__box:focus-within{border-color:var(--message-composer-focus-border-color);box-shadow:inset 0 0 0 calc(var(--message-composer-focus-ring-width) + var(--message-composer-focus-ring-inset-offset)) var(--message-composer-focus-ring-color), inset 0 0 0 var(--message-composer-focus-ring-inset-offset) var(--message-composer-bg)}.message-composer.message-composer--disabled .message-composer__box{background-color:var(--message-composer-disabled-bg);border-color:var(--message-composer-disabled-border-color)}.message-composer__input{flex:1;min-width:0}.message-composer__actions{align-items:center;gap:var(--message-composer-gap);flex-shrink:0;display:flex}.message-composer__helper{font-size:var(--message-composer-helper-font-size);color:var(--message-composer-helper-color);line-height:var(--message-composer-helper-line-height);margin:0}

package/dist/message-composer.js

@@ -0,0 +1,57 @@
+'use client';
+import './message-composer.css';
+import { Button as e } from "./button.js";
+import { Textarea as t } from "./textarea.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as i, useId as a } from "react";
+//#region src/stories/molecules/MessageComposer/MessageComposer.tsx
+var o = i(function({ value: i, onChange: o, onSend: s, placeholder: c = "Escribe un mensaje…", disabled: l, sendLabel: u = "Enviar", helperText: d, actions: f, inputId: p, inputLabel: m, inputLabelledBy: h, rows: g = 2, className: _, ...v }, y) {
+	let b = `${a()}-helper`;
+	function x() {
+		i.trim() && s();
+	}
+	function S(e) {
+		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), x());
+	}
+	return /* @__PURE__ */ r("div", {
+		ref: y,
+		className: [
+			"message-composer",
+			l ? "message-composer--disabled" : "",
+			_ ?? ""
+		].filter(Boolean).join(" "),
+		...v,
+		children: [/* @__PURE__ */ r("div", {
+			className: "message-composer__box",
+			children: [/* @__PURE__ */ n(t, {
+				bare: !0,
+				className: "message-composer__input",
+				id: p,
+				"aria-label": m,
+				"aria-labelledby": h,
+				"aria-describedby": d ? b : void 0,
+				placeholder: c,
+				value: i,
+				disabled: l,
+				rows: g,
+				onChange: (e) => o(e.target.value),
+				onKeyDown: S
+			}), /* @__PURE__ */ r("div", {
+				className: "message-composer__actions",
+				children: [/* @__PURE__ */ n(e, {
+					variant: "primary",
+					size: "md",
+					disabled: l || !i.trim(),
+					onClick: x,
+					children: u
+				}), f]
+			})]
+		}), d && /* @__PURE__ */ n("p", {
+			className: "message-composer__helper",
+			id: b,
+			children: d
+		})]
+	});
+});
+//#endregion
+export { o as MessageComposer };

package/dist/modal.css

@@ -0,0 +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%)}.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)}

package/dist/modal.js

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

package/dist/multi-select-field.css

@@ -0,0 +1 @@
+.multi-select-field{gap:var(--multi-select-field-gap);flex-direction:column;display:flex}.multi-select-field__helper{font-family:var(--multi-select-field-helper-font-family);font-size:var(--multi-select-field-helper-font-size);font-weight:var(--multi-select-field-helper-font-weight);line-height:var(--multi-select-field-helper-line-height);color:var(--multi-select-field-helper-color)}

package/dist/multi-select-field.js

@@ -0,0 +1,54 @@
+'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 { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as s, useId as c } from "react";
+//#region src/stories/molecules/MultiSelectField/MultiSelectField.tsx
+var l = s(function({ id: s, 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 = c(), A = s ?? 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__ */ o("div", {
+		className: ["multi-select-field", S].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a(n, {
+				id: `${A}-label`,
+				htmlFor: A,
+				hidden: D,
+				size: O,
+				children: l
+			}),
+			/* @__PURE__ */ a(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__ */ a(t, {
+				id: j,
+				children: b
+			}),
+			x && /* @__PURE__ */ a("span", {
+				id: M,
+				className: "multi-select-field__helper",
+				children: x
+			})
+		]
+	});
+});
+//#endregion
+export { l as MultiSelectField };

package/dist/multi-select.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;width: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-width: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-width: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__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-width:var(--anchor-width);max-height:var(--multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.multi-select__content[data-side=bottom]{border-top:none}.multi-select__content[data-side=top]{border-bottom:none}.multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--multi-select-padding-inline);width: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.multi-select__item--active,.multi-select__item:hover{background-color:var(--multi-select-item-highlighted-bg);color:var(--multi-select-item-highlighted-color)}.multi-select__item.multi-select__item--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-top: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-bottom:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__item-check{width:var(--checkbox-size);height: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--selected .multi-select__item-check{background-color:currentColor}.multi-select__item-check-mark{width:var(--checkbox-check-size);height: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--selected .multi-select__item-check-mark{transform:scale(1)}.multi-select__item--active .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__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__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/multi-select.js

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

package/dist/not-found-page.js

@@ -0,0 +1,20 @@
+'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 { 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 }) {
+	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] })
+	});
+}
+//#endregion
+export { a as NotFoundPage };

package/dist/notification-button.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-danger-bg:var(--notification-button-badge-fill);--number-badge-danger-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/notification-button.js

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

package/dist/notification-list.css

@@ -0,0 +1 @@
+.notification-list{font-family:var(--notification-list-item-font-family);margin:0;padding:0;list-style:none}.notification-list__item{column-gap:var(--notification-list-item-gap);row-gap:var(--notification-list-item-row-gap);padding-block:var(--notification-list-item-padding-block);grid-template-columns:auto 1fr;display:grid}.notification-list__indicator{inline-size:var(--notification-list-dot-size);grid-area:1/1;margin-block-start:var(--notification-list-dot-margin-block-start)}.notification-list__dot{color:var(--notification-list-dot-color);display:block}.notification-list__text{gap:var(--notification-list-item-text-gap);flex-direction:column;grid-area:1/2;min-inline-size:0;display:flex}.notification-list__title{font-size:var(--notification-list-title-font-size);line-height:var(--notification-list-title-line-height);font-weight:var(--notification-list-title-font-weight);align-self:start}.notification-list__text .notification-list__body{font-size:var(--notification-list-body-font-size);line-height:var(--notification-list-body-line-height)}.notification-list__actions{justify-content:flex-end;align-items:center;gap:var(--notification-list-actions-gap);flex-wrap:wrap;grid-column:2;display:flex}.notification-list__time{font-size:var(--notification-list-time-font-size);color:var(--notification-list-time-color);text-align:end;white-space:nowrap;grid-column:2}@media (width>=768px){.notification-list__item{grid-template-columns:auto 1fr auto}.notification-list__actions{grid-area:1/3;align-self:start;margin-inline-start:calc(var(--notification-list-item-column-gap) - var(--notification-list-item-gap))}.notification-list__time{grid-area:2/2/auto/-1}}

package/dist/notification-list.js

@@ -0,0 +1,71 @@
+'use client';
+import './notification-list.css';
+import { Icon as e } from "./icon.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { Button as n } from "./button.js";
+import { Text as r } from "./text.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/stories/molecules/NotificationList/NotificationList.tsx
+function s({ children: e, ...t }) {
+	return /* @__PURE__ */ a("a", {
+		...t,
+		children: e
+	});
+}
+function c({ items: c, renderLink: l = s, renderActions: u, onItemClick: d, onMarkRead: f, label: p = "Notificaciones", unreadLabel: m = "Sin leer", markReadLabel: h = "Marcar como leída", className: g }) {
+	return c.length === 0 ? null : /* @__PURE__ */ a("ul", {
+		className: ["notification-list", g].filter(Boolean).join(" "),
+		"aria-label": p,
+		children: c.map((s) => {
+			let c = s.unread, p = u?.(s);
+			return /* @__PURE__ */ o("li", {
+				className: "notification-list__item",
+				children: [
+					/* @__PURE__ */ a("span", {
+						className: "notification-list__indicator",
+						children: c && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(e, {
+							name: "dot",
+							size: "sm",
+							className: "notification-list__dot"
+						}), /* @__PURE__ */ a(t, { children: s.unreadLabel ?? m })] })
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "notification-list__text",
+						children: [s.href ? l({
+							href: s.href,
+							className: "notification-list__title",
+							onClick: d ? () => d(s) : void 0,
+							children: s.title
+						}) : /* @__PURE__ */ a(r, {
+							className: "notification-list__title",
+							children: s.title
+						}), s.body && /* @__PURE__ */ a(r, {
+							tone: "muted",
+							className: "notification-list__body",
+							children: s.body
+						})]
+					}),
+					(f || p) && /* @__PURE__ */ o("div", {
+						className: "notification-list__actions",
+						children: [f && c && /* @__PURE__ */ a(n, {
+							variant: "text",
+							size: "sm",
+							onClick: () => f(s.id),
+							children: h
+						}), p]
+					}),
+					s.timeDateTime ? /* @__PURE__ */ a("time", {
+						className: "notification-list__time",
+						dateTime: s.timeDateTime,
+						children: s.time
+					}) : /* @__PURE__ */ a("span", {
+						className: "notification-list__time",
+						children: s.time
+					})
+				]
+			}, s.id);
+		})
+	});
+}
+//#endregion
+export { c as NotificationList };

package/dist/notification-panel.css

@@ -0,0 +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}