@studiolxd/brand 38.12.4

package/dist/_types/templates/ConnectorAuth/UntrustedText.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import './UntrustedText.css';
+export interface UntrustedTextProps {
+    /**
+     * El valor. Si es una cadena recibe el tratamiento entero —marcado de
+     * invisibles, aislamiento de dirección, comillas y recorte—; cualquier otro
+     * `ReactNode` se pinta tal cual, porque ya no es texto de fuera sino algo que
+     * compuso quien monta la pantalla.
+     */
+    value: ReactNode;
+    /**
+     * Con `true`, un valor largo se recorta y se ofrece un desplegador nativo
+     * (`<details>`, sin una línea de JavaScript) para verlo entero. Default
+     * `false`: dentro de una frase el desplegador no cabe —un `<details>` no
+     * puede vivir dentro de un `<p>`—, así que ahí el valor se recorta y quien
+     * quiera verlo entero lo despliega en la ficha.
+     */
+    expandable?: boolean;
+    /** Etiqueta del desplegador cerrado. Default castellano: «Ver el valor completo». */
+    expandLabel?: string;
+    /** Etiqueta del desplegador abierto. Default castellano: «Ver menos». */
+    collapseLabel?: string;
+    /**
+     * Las comillas que enmarcan el valor. Default castellano: `['«', '»']`. Van
+     * en prop porque cambian con el idioma (`['„', '“']` en alemán).
+     */
+    quotes?: [string, string];
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * **Cómo se pinta un dato que escribió un tercero**: el nombre con el que se
+ * registró una herramienta, la cuenta, el host de retorno.
+ *
+ * Tres cosas, y las tres son de seguridad, no de estética:
+ *
+ * 1. **Los caracteres invisibles se hacen visibles** (`[U+202E]`). Un control
+ *    de dirección deja que `moodle.ejemplo.org` se lea al revés, y en una
+ *    pantalla donde se concede acceso eso es suplantación.
+ * 2. **El valor va aislado** en un `<bdi>`, que es la herramienta del propio
+ *    motor para esto: lo que haya dentro no puede reordenar el texto de
+ *    alrededor, y un nombre legítimamente en árabe o hebreo se sigue pintando
+ *    bien.
+ * 3. **El valor va entrecomillado**, para que se lea como lo que es —una
+ *    cadena que eligió quien registró la herramienta— y no como interfaz. Un
+ *    nombre registrado como `<strong>Claude</strong>` se ve con sus signos:
+ *    eso es la defensa funcionando, y las comillas dicen dónde empieza y dónde
+ *    acaba el texto ajeno.
+ *
+ * Y un cuarto, de maqueta: un valor largo se recorta a
+ * `--connector-auth-untrusted-max-lines` líneas. El texto **completo sigue en
+ * el documento** —un lector de pantalla lo lee entero, el recorte es solo
+ * visual— y con `expandable` hay además un desplegador para verlo.
+ */
+export declare function UntrustedText({ value, expandable, expandLabel, collapseLabel, quotes, className, }: UntrustedTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/ErrorPage/ErrorPage.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+export interface ErrorPageProps {
+    /** El título («Error»): `Heading` de nivel 1 vía `PageIntro`, columna izquierda. */
+    title: ReactNode;
+    /** La frase bajo el título («Algo ha salido mal»), columna izquierda. */
+    description?: ReactNode;
+    /** El enlace de vuelta, bajo la frase, misma columna izquierda: `<Link icon="arrow-left" href="/">Volver al inicio</Link>`. Sin router dentro. */
+    homeAction: ReactNode;
+    /** La frase de la columna derecha, sobre el botón («Puedes volver a intentarlo»). */
+    retryDescription?: ReactNode;
+    /** El `Button` «Reintentar», columna derecha, debajo de `retryDescription` — pásalo con `block` (mismo patrón que las acciones de `AuthPage`/`Form`). */
+    retryAction: ReactNode;
+    /** Cabecera del sitio, SIN auth. Va dentro de un `ErrorBoundary`. En `global-error.tsx` no se pasa. */
+    header?: ReactNode;
+    /** Pie del sitio. Ídem. */
+    footer?: ReactNode;
+    /** `id` del `main` (`main-content` por defecto, destino del `SkipLink`). */
+    id?: string;
+    /**
+     * Con `false` no monta `SiteShell` ni el `main`: solo el contenido (las dos
+     * columnas), para pintarlo dentro de un `AppShell` que ya tiene su `main`.
+     * Por defecto `true`. Sin marco, `header`, `footer` e `id` no aplican.
+     */
+    shell?: boolean;
+}
+/**
+ * Plantilla de «algo ha salido mal»: dos columnas, mismo molde que `AuthPage`
+ * (`Columns` de dos celdas). Izquierda: título, frase y el enlace de vuelta.
+ * Derecha: la frase de reintento y el botón en bloque, como las acciones de un
+ * formulario de acceso. El marco lo pone `PublicPageShell`, así que cabecera y
+ * pie van cada uno en su `ErrorBoundary`: la página de error no puede depender
+ * del layout que pudo fallar. Con `shell={false}` devuelve solo el contenido,
+ * para una app que ya tiene su `main`.
+ */
+export declare function ErrorPage({ title, description, homeAction, retryDescription, retryAction, header, footer, id, shell }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/NotFoundPage/NotFoundPage.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+export interface NotFoundPageProps {
+    /** El título («Página no encontrada»): `Heading` de nivel 1 vía `PageIntro`. */
+    title: ReactNode;
+    /** La frase bajo el título (el código, una explicación corta). */
+    description?: ReactNode;
+    /** El enlace de vuelta: el `Link` del producto con su icono (`<Link icon="arrow-left" href="/">Volver al inicio</Link>`). Sin router dentro. */
+    homeLink: ReactNode;
+    /** Cabecera del sitio. Va dentro de un `ErrorBoundary`: si falla, la página sigue. */
+    header?: ReactNode;
+    /** Pie del sitio. Ídem. */
+    footer?: ReactNode;
+    /** `id` del `main` (`main-content` por defecto, destino del `SkipLink`). */
+    id?: string;
+    /**
+     * Con `false` no monta `SiteShell` ni el `main`: solo el contenido (título,
+     * frase y enlace de vuelta), para pintarlo dentro de un `AppShell` que ya
+     * tiene su `main`. Por defecto `true`. Sin marco, `header`, `footer` e `id`
+     * no aplican.
+     */
+    shell?: boolean;
+}
+/**
+ * Plantilla de 404: el marco público (`PublicPageShell`) con cabecera y pie
+ * opcionales, y dentro un `main` con la cabecera de página y el enlace de
+ * vuelta. Cabecera y pie van cada uno en su `ErrorBoundary`, así que un chrome
+ * roto no se lleva por delante el mensaje. Con `shell={false}` devuelve solo
+ * el contenido, para una app que ya tiene su `main`.
+ */
+export declare function NotFoundPage({ title, description, homeLink, header, footer, id, shell }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/OnboardingShell/OnboardingShell.d.ts

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react';
+import './OnboardingShell.css';
+export interface OnboardingShellProps {
+    /** El cuerpo del paso: el formulario, la explicación, lo que toque. */
+    children: ReactNode;
+    /**
+     * La marca, arriba a la izquierda: un `Logo`, o el `Logo` dentro del enlace
+     * al inicio. Se pinta en la **ranura de cabecera del marco**, fuera del
+     * `main`: es chrome, y respira como la barra pública, no como el contenido.
+     * El **alto lo impone la plantilla** —el mismo de la cabecera pública, y con
+     * sus mismos peldaños en móvil—, así que la prop `size` del `Logo` no decide
+     * el tamaño final: manda el sitio donde se pinta.
+     */
+    brand?: ReactNode;
+    /**
+     * Las preferencias globales de la pantalla: idioma y tema. Se pintan en la
+     * **banda de preferencias del marco** (`PublicPageShell`), al final y
+     * separadas del pie de acciones del paso — una preferencia global no es una
+     * acción del flujo y no puede parecerlo. En el alta no hay cabecera pública
+     * —el usuario ya tiene sesión, no hay nada que navegar—, así que estos dos
+     * son todo el chrome que queda.
+     */
+    preferences?: ReactNode;
+    /**
+     * Alias histórico de `preferences`, de cuando el alta montaba la banda por
+     * su cuenta. Se conserva para no romper a quien ya lo pasa; en pantallas
+     * nuevas, `preferences`. Si se pasan los dos, manda `preferences`.
+     *
+     * @deprecated Usa `preferences`.
+     */
+    switchers?: ReactNode;
+    /** Nombre accesible de la banda de preferencias. Default: «Preferencias» (castellano). */
+    preferencesLabel?: string;
+    /**
+     * El progreso: un `Stepper`. La ranura se monta siempre; es el `Stepper`
+     * quien decide no pintarse cuando el flujo tiene un solo paso.
+     */
+    stepper?: ReactNode;
+    /** La acción principal del paso, la última del renglón: «Continuar», «Terminar». */
+    primaryAction?: ReactNode;
+    /** «Atrás», la primera del renglón. En el primer paso no se pasa. */
+    backAction?: ReactNode;
+    /**
+     * La salida del paso: «Omitir por ahora», «Cerrar sesión». Va en `text` — es
+     * la acción de menos peso de la pantalla y no debe competir con la
+     * principal. Se pinta **antes** de la principal: a su izquierda en
+     * escritorio, y debajo y centrada en móvil.
+     */
+    exitAction?: ReactNode;
+    /** Nombre accesible del grupo de acciones del pie. Default: «Acciones del paso» (castellano). */
+    actionsLabel?: string;
+    /** `id` del `main` (`main-content` por defecto, destino del `SkipLink`). */
+    id?: string;
+    /**
+     * Con `false` no monta el marco público ni el `main`: solo la columna del
+     * alta, para pintarla dentro de una app que ya tiene su `main`. Por defecto
+     * `true`.
+     */
+    shell?: boolean;
+    /**
+     * Ancho de la columna del paso. `md` (por defecto) es la medida estrecha de
+     * lectura, la de un formulario; `wide` es el ancho de página pública, para
+     * un paso que enseña una fila de tarjetas (la elección de plan).
+     */
+    width?: 'md' | 'wide';
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+}
+/**
+ * La plantilla del alta: una columna centrada con la marca arriba, el progreso,
+ * el paso y un pie de acciones. Cuelga de `PublicPageShell`, así que lee en la
+ * **superficie pública** —cuerpo a 20px, controles `lg`—: el alta no es una
+ * pantalla de aplicación, es la puerta.
+ *
+ * Lo que no lleva, a propósito:
+ *
+ * - **Cabecera pública.** En el alta el usuario ya tiene sesión; no hay sitio
+ *   al que navegar y una barra de marketing solo invitaría a irse. Arriba queda
+ *   solo la marca, en la ranura de cabecera del marco —donde iría `SiteHeader`—
+ *   y con su mismo aire; idioma y tema bajan a la ranura de pie, al borde
+ *   inferior de la ventana y separados del pie de acciones del paso. Las dos
+ *   piezas son chrome y viven fuera del `main`: el aire del `Container` con
+ *   `space="xl"` gobierna solo el contenido del paso.
+ * - **Una sola columna a lo ancho de la página.** El chrome ocupa el ancho
+ *   normal de una página pública —la marca cae donde el ojo ya la espera de la
+ *   pantalla de acceso—, y lo que se acota a la medida de lectura y se centra
+ *   es solo la columna del paso: un formulario de cinco campos pegado al borde
+ *   izquierdo de una pantalla de 27 pulgadas no se lee.
+ *
+ * El pie de acciones fija la jerarquía en un solo sitio, para que ninguna
+ * pantalla del alta la reinvente: la principal cierra el renglón por la
+ * derecha, con la salida (`text`) pegada a su izquierda y «Atrás» abriendo. Es
+ * el mismo criterio que el pie de un `Form`: la principal, la última. En móvil
+ * la principal sube a todo el ancho y la salida cae centrada debajo, como en
+ * `Form` con acciones en bloque.
+ *
+ * **Y también la talla**: la plantilla reparte `lg` al paso **entero**
+ * —progreso, cuerpo y acciones— por el contexto de talla del sistema
+ * (`FormSizeContext`, el mismo que usa `Form` con sus campos y `Hero` con sus
+ * acciones). El alta es superficie pública, así que todo lo que se ponga
+ * dentro —un `Form`, un campo suelto, un `AvatarUpload`— sale a la talla que
+ * le toca sin que la aplicación tenga que acordarse de pedirla.
+ */
+export declare function OnboardingShell({ children, brand, preferences, switchers, preferencesLabel, stepper, primaryAction, backAction, exitAction, actionsLabel, id, shell, width, className, }: OnboardingShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/PublicPageShell/PublicPageShell.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+import './PublicPageShell.css';
+export interface PublicPageShellProps {
+    /** El contenido de la página: lo que va dentro del `main`. */
+    children: ReactNode;
+    /** Cabecera del sitio. Va dentro de un `ErrorBoundary`: si lanza al renderizar, desaparece ella y la página sigue. */
+    header?: ReactNode;
+    /** Pie del sitio. Ídem. */
+    footer?: ReactNode;
+    /**
+     * Las preferencias de la pantalla —idioma y tema—, en una banda propia
+     * **entre el contenido y el `footer`**. Se pasan los conmutadores sueltos
+     * (`LanguageSwitcher`, `ThemeSwitcher`): la banda pone la `section` con
+     * nombre, el ancho de página, el aire y la fila alineada al final.
+     *
+     * Va aparte del pie porque una preferencia global no es una legal ni una
+     * acción del contenido, y el pie legal es un `footer` que no admite
+     * invitados. Con `shell={false}` no se pinta: sin marco no hay ranura de
+     * pie, igual que `header` y `footer`.
+     */
+    preferences?: ReactNode;
+    /** Nombre accesible de la banda de preferencias. Default: «Preferencias» (castellano). */
+    preferencesLabel?: string;
+    /** `id` del `main` (`main-content` por defecto, destino del `SkipLink`). */
+    id?: string;
+    /**
+     * Con `false` no monta `SiteShell` ni el `main`: devuelve solo los
+     * `children`, para pintarlos dentro de un `AppShell` que ya tiene su `main`.
+     * Por defecto `true`. Sin marco, `header`, `footer`, `preferences` e `id` no
+     * aplican —y tampoco el `ref`, porque no hay marco al que engancharlo.
+     */
+    shell?: boolean;
+}
+/**
+ * El marco de una página pública, en una sola pieza: `SiteShell` con cabecera
+ * y pie opcionales y, dentro, el `main` acotado (`Container`) al que apunta el
+ * `SkipLink`. Es el molde del que cuelgan las plantillas públicas
+ * —`ErrorPage`, `NotFoundPage`, `OnboardingShell`, la maqueta de acceso—, para
+ * que ninguna pueda divergir del marco real.
+ *
+ * Cabecera, preferencias y pie van cada uno en su `ErrorBoundary`: una página
+ * de error no puede depender del chrome que pudo fallar, y el resto de páginas
+ * heredan esa garantía gratis.
+ *
+ * Con `shell={false}` devuelve solo el contenido: es lo que necesita una
+ * plantilla pintada dentro de una app que ya tiene su marco y su `main`.
+ *
+ * **Reenvía el `ref` al nodo raíz del `SiteShell`** (`.site-shell`), el mismo
+ * que reenvía `SiteShell` por su cuenta. Ese nodo es el `container` de un panel
+ * flotante abierto desde la página —`ConsentPreferences`, un `Modal`, un
+ * `Sheet`—: su portal monta por defecto en `document.body`, que no es
+ * descendiente de `.site-shell` y por tanto no hereda el remapeo de superficie
+ * pública. Apuntarlo al `main` no serviría: el `main` es un `Container`
+ * acotado y con su aire, así que el panel quedaría metido dentro de la columna
+ * de contenido en vez de flotar sobre la página. Con `shell={false}` no hay
+ * marco y el `ref` se queda sin asignar: ahí el contenedor es el `AppShell` de
+ * la app.
+ */
+export declare const PublicPageShell: import("react").ForwardRefExoticComponent<PublicPageShellProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/tokens/tokens.d.ts

@@ -0,0 +1,24 @@
+/** Nombre de una custom property del sistema, con sus dos guiones. */
+export type TokenName = string;
+/**
+ * Todos los tokens del sistema, `{ '--nombre': 'valor' }`, con los valores ya
+ * resueltos (nunca un `var()`).
+ */
+export declare const tokens: Readonly<Record<TokenName, string>>;
+/**
+ * El valor de un token, o un error si no existe.
+ *
+ * Falla en vez de devolver `undefined` a propósito: un estilo inline con un
+ * valor vacío no se ve roto, se ve «casi bien», y ese fallo viaja hasta la
+ * bandeja de entrada de alguien.
+ */
+export declare function token(name: TokenName): string;
+/**
+ * El valor de un token en píxeles absolutos.
+ *
+ * La escala del sistema está en `rem`, que fuera del navegador no significa
+ * nada: Outlook resuelve `rem` contra su propio contexto y el correo sale con
+ * otro tamaño. Los tokens que ya vienen en `px` (radios, grosores de borde) y
+ * los sin unidad (interlineados, pesos) pasan tal cual.
+ */
+export declare function tokenPx(name: TokenName): string;

package/dist/_types/utils/chromaticModes.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Modos de Chromatic: cada story del catálogo se fotografía dos veces, en claro
+ * y en oscuro. El oscuro no se documenta con stories duplicadas —se borraron
+ * las 110 que solo repetían el mismo componente sobre fondo oscuro—; lo cubre
+ * este par de modos, que mueve el global `backgrounds` (el mismo del switcher
+ * de fondos, con las claves `light`/`dark` declaradas en `preview.tsx`) y con
+ * él el decorator `withSurface`.
+ */
+export declare const MODOS_CHROMATIC: {
+    readonly claro: {
+        readonly backgrounds: {
+            readonly value: "light";
+        };
+    };
+    readonly oscuro: {
+        readonly backgrounds: {
+            readonly value: "dark";
+        };
+    };
+};
+/**
+ * Para lo que no tiene superficie oscura y no la va a tener: el correo (medio
+ * sin CSS ni `prefers-color-scheme`, ver § «El correo» en `CLAUDE.md`) y la
+ * tarjeta social, que es una imagen de colores fijos. Va en el `meta`:
+ * `parameters: { chromatic: SOLO_CLARO }`.
+ */
+export declare const SOLO_CLARO: {
+    readonly modes: {
+        readonly oscuro: {
+            readonly disable: true;
+        };
+    };
+};
+/**
+ * Para la story que YA fuerza el oscuro por su cuenta (`parameters.surface` o
+ * una prop `surface`/`theme`): en el modo claro saldría exactamente la misma
+ * captura, así que se apaga y queda una sola. Va en la story:
+ * `parameters: { surface: 'dark', chromatic: SOLO_OSCURO }`.
+ */
+export declare const SOLO_OSCURO: {
+    readonly modes: {
+        readonly claro: {
+            readonly disable: true;
+        };
+    };
+};

package/dist/_types/utils/storyDate.d.ts

@@ -0,0 +1,11 @@
+/**
+ * «Hoy» congelado para el catálogo: un domingo de un mes de 31 días que empieza
+ * en domingo (marzo de 2026), para que la rejilla de un calendario salga
+ * completa y sin huecos raros en las stories que enseñan «el mes actual».
+ *
+ * `.storybook/preview.tsx` fija `Date` a este instante con `mockdate` para todo
+ * el navegador de Storybook (local, `test:stories` y Chromatic); las stories
+ * que antes calculaban sobre `new Date()` lo hacen ahora sobre esta constante,
+ * para que se lean sin sorpresas y no dependan implícitamente del mock global.
+ */
+export declare const STORY_TODAY: Date;

package/dist/accordion.css

@@ -0,0 +1 @@
+.accordion{width:100%}.accordion__item{border-block-start:var(--accordion-border-width) solid var(--accordion-border-color)}.accordion__header{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin-block:0}.accordion__trigger{all:unset;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--accordion-trigger-gap);width:100%;padding-block:var(--accordion-trigger-padding-block);padding-inline:var(--accordion-trigger-padding-inline);cursor:var(--accordion-trigger-cursor);text-align:start;display:flex}.accordion__trigger:focus-visible{outline:var(--accordion-focus-ring-width) solid var(--accordion-focus-ring-color);outline-offset:var(--accordion-focus-ring-offset)}.accordion__trigger[data-disabled]{cursor:default}.accordion__trigger-text{flex:1;min-width:0}.accordion__index{min-inline-size:var(--accordion-index-min-inline-size);font-family:var(--accordion-index-font-family);font-size:var(--accordion-index-font-size);color:var(--accordion-index-color);flex-shrink:0}.accordion--numbered .accordion__content-inner{padding-inline-start:calc(var(--accordion-index-min-inline-size) + var(--accordion-trigger-gap))}.accordion__chevron{transition:transform var(--accordion-transition-duration) var(--accordion-transition-easing);flex-shrink:0;transform:rotate(90deg)}.accordion__trigger[data-panel-open] .accordion__chevron{transform:rotate(-90deg)}.accordion__content{overflow:hidden}.accordion__content[data-open]{animation:accordion-open var(--accordion-transition-duration) var(--accordion-transition-easing)}.accordion__content[data-closed]{animation:accordion-close var(--accordion-transition-duration) var(--accordion-transition-easing)}@keyframes accordion-open{0%{height:0}to{height:var(--collapsible-panel-height)}}@keyframes accordion-close{0%{height:var(--collapsible-panel-height)}to{height:0}}.accordion__content-inner{padding-block-end:var(--accordion-content-padding-block);padding-inline:var(--accordion-content-padding-inline)}

package/dist/accordion.js

@@ -0,0 +1,89 @@
+'use client';
+import './accordion.css';
+import { Icon as e } from "./icon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Children as r, createContext as i, useContext as a } from "react";
+import { Accordion as o } from "@base-ui/react/accordion";
+//#region src/stories/atoms/Accordion/AccordionContext.ts
+var s = i(null);
+function c() {
+	return a(s);
+}
+//#endregion
+//#region src/stories/atoms/Accordion/Accordion.tsx
+var l = (e) => String(e).padStart(2, "0");
+function u(e) {
+	if (e !== void 0) return Array.isArray(e) ? e : e === "" ? [] : [e];
+}
+function d({ className: e, children: n, id: i, disabled: a, numbered: c = !1, formatIndex: d = l, ...f }) {
+	let p = f.type === "multiple", m = f.type === "single" ? f.collapsible ?? !0 : !0, h = f.value;
+	return /* @__PURE__ */ t(o.Root, {
+		id: i,
+		disabled: a,
+		multiple: p,
+		value: u(h),
+		defaultValue: u(f.defaultValue),
+		onValueChange: (e) => {
+			let t = e ?? [];
+			if (p) {
+				f.onValueChange?.(t);
+				return;
+			}
+			!m && t.length === 0 || f.onValueChange?.(t[0] ?? "");
+		},
+		className: [
+			"accordion",
+			c ? "accordion--numbered" : "",
+			e
+		].filter(Boolean).join(" "),
+		children: c ? r.map(n, (e, n) => /* @__PURE__ */ t(s.Provider, {
+			value: {
+				index: n + 1,
+				formatIndex: d
+			},
+			children: e
+		})) : n
+	});
+}
+function f({ className: e, children: n, ...r }) {
+	return /* @__PURE__ */ t(o.Item, {
+		className: ["accordion__item", e].filter(Boolean).join(" "),
+		...r,
+		children: n
+	});
+}
+function p({ className: r, chevronSize: i = "sm", children: a }) {
+	let s = c();
+	return /* @__PURE__ */ t(o.Header, {
+		className: "accordion__header",
+		children: /* @__PURE__ */ n(o.Trigger, {
+			className: ["accordion__trigger", r].filter(Boolean).join(" "),
+			children: [
+				s && /* @__PURE__ */ t("span", {
+					className: "accordion__index",
+					children: s.formatIndex(s.index)
+				}),
+				/* @__PURE__ */ t("span", {
+					className: "accordion__trigger-text",
+					children: a
+				}),
+				/* @__PURE__ */ t(e, {
+					name: "chevron",
+					className: "accordion__chevron",
+					size: i
+				})
+			]
+		})
+	});
+}
+function m({ className: e, children: n }) {
+	return /* @__PURE__ */ t(o.Panel, {
+		className: ["accordion__content", e].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ t("div", {
+			className: "accordion__content-inner",
+			children: n
+		})
+	});
+}
+//#endregion
+export { d as Accordion, m as AccordionContent, f as AccordionItem, p as AccordionTrigger };

package/dist/alert.css

@@ -0,0 +1 @@
+:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}

package/dist/alert.js

@@ -0,0 +1,78 @@
+'use client';
+import './alert.css';
+import { CloseButton as e } from "./close-button.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r, useState as i } from "react";
+//#region src/stories/molecules/Alert/Alert.tsx
+var a = {
+	default: "status",
+	success: "status",
+	error: "alert",
+	warning: "alert"
+}, o = r(function({ className: e, children: n, ...r }, i) {
+	return /* @__PURE__ */ t("p", {
+		ref: i,
+		className: ["alert__title", e ?? ""].filter(Boolean).join(" "),
+		...r,
+		children: n
+	});
+}), s = r(function({ className: e, children: n, ...r }, i) {
+	return /* @__PURE__ */ t("div", {
+		ref: i,
+		className: ["alert__description", e ?? ""].filter(Boolean).join(" "),
+		...r,
+		children: n
+	});
+}), c = r(function({ variant: r = "default", title: o, description: s, dismissible: c = !1, onDismiss: l, finalFocus: u, closeLabel: d = "Cerrar", className: f, children: p, role: m, ...h }, g) {
+	let [_, v] = i(!1);
+	if (_) return null;
+	let y = [
+		"alert",
+		r === "default" ? "" : `alert--${r}`,
+		r === "success" || r === "error" ? "surface-dark" : "",
+		c ? "alert--dismissible" : "",
+		f ?? ""
+	].filter(Boolean).join(" "), b = r === "default" ? " surface-invert" : "";
+	function x() {
+		if (typeof document > "u") return;
+		let e = u?.current;
+		if (e) {
+			e.focus();
+			return;
+		}
+		let t = document.body, n = t.hasAttribute("tabindex");
+		n || t.setAttribute("tabindex", "-1"), t.focus(), n || t.removeAttribute("tabindex");
+	}
+	function S() {
+		x(), l ? l() : v(!0);
+	}
+	return /* @__PURE__ */ n("div", {
+		ref: g,
+		role: m ?? a[r],
+		className: y,
+		...h,
+		children: [/* @__PURE__ */ n("div", {
+			className: `alert__content${b}`,
+			children: [
+				o && /* @__PURE__ */ t("p", {
+					className: "alert__title",
+					children: o
+				}),
+				s && /* @__PURE__ */ t("div", {
+					className: "alert__description",
+					children: s
+				}),
+				p
+			]
+		}), c && /* @__PURE__ */ t(e, {
+			className: `alert__close${b}`,
+			label: d,
+			onClick: S
+		})]
+	});
+}), l = Object.assign(c, {
+	Title: o,
+	Description: s
+});
+//#endregion
+export { l as Alert, s as AlertDescription, o as AlertTitle };

package/dist/annotation-thread.css

@@ -0,0 +1 @@
+.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread.annotation-thread--resolved{opacity:var(--annotation-thread-resolved-opacity)}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}

package/dist/annotation-thread.js

@@ -0,0 +1,98 @@
+import './annotation-thread.css';
+import { Tag as e } from "./tag.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+//#region src/stories/organisms/AnnotationThread/AnnotationThread.tsx
+var r = {
+	day: "numeric",
+	month: "short",
+	hour: "2-digit",
+	minute: "2-digit"
+};
+function i({ entry: e, locale: r, dateFormat: i, editedLabel: a }) {
+	let o = e.date instanceof Date ? e.date : new Date(e.date), s = new Intl.DateTimeFormat(r, i).format(o);
+	return /* @__PURE__ */ n("article", {
+		className: "annotation-thread__item",
+		children: [
+			/* @__PURE__ */ n("header", {
+				className: "annotation-thread__header",
+				children: [
+					e.avatar && /* @__PURE__ */ t("span", {
+						className: "annotation-thread__avatar",
+						children: e.avatar
+					}),
+					/* @__PURE__ */ t("span", {
+						className: "annotation-thread__author",
+						children: e.author
+					}),
+					/* @__PURE__ */ t("time", {
+						className: "annotation-thread__date",
+						dateTime: o.toISOString(),
+						children: s
+					}),
+					e.edited && /* @__PURE__ */ t("span", {
+						className: "annotation-thread__edited",
+						children: a
+					})
+				]
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "annotation-thread__body",
+				children: e.body
+			}),
+			e.actions && /* @__PURE__ */ t("div", {
+				className: "annotation-thread__item-actions",
+				children: e.actions
+			})
+		]
+	});
+}
+function a({ annotation: a, replies: o = [], status: s = "open", actions: c, reply: l, locale: u = "es-ES", dateFormat: d = r, openLabel: f = "Abierta", resolvedLabel: p = "Resuelta", editedLabel: m = "editada", repliesLabel: h = (e) => e === 1 ? "1 respuesta" : `${e} respuestas`, label: g = "Hilo de anotaciones", className: _, ...v }) {
+	let y = s === "resolved";
+	return /* @__PURE__ */ n("article", {
+		className: [
+			"annotation-thread",
+			y ? "annotation-thread--resolved" : "",
+			_ ?? ""
+		].filter(Boolean).join(" "),
+		"aria-label": g,
+		...v,
+		children: [
+			/* @__PURE__ */ t("div", {
+				className: "annotation-thread__status",
+				children: /* @__PURE__ */ t(e, {
+					variant: y ? "success" : "warning",
+					children: y ? p : f
+				})
+			}),
+			/* @__PURE__ */ t(i, {
+				entry: a,
+				locale: u,
+				dateFormat: d,
+				editedLabel: m
+			}),
+			o.length > 0 && /* @__PURE__ */ n("div", {
+				className: "annotation-thread__replies",
+				children: [/* @__PURE__ */ t("p", {
+					className: "annotation-thread__replies-label",
+					children: h(o.length)
+				}), o.map((e) => /* @__PURE__ */ t(i, {
+					entry: e,
+					locale: u,
+					dateFormat: d,
+					editedLabel: m
+				}, e.id))]
+			}),
+			l && /* @__PURE__ */ t("div", {
+				className: "annotation-thread__reply",
+				children: l
+			}),
+			c && /* @__PURE__ */ t("footer", {
+				className: "annotation-thread__actions",
+				children: c
+			})
+		]
+	});
+}
+//#endregion
+export { a as AnnotationThread };

package/dist/app-header.css

@@ -0,0 +1 @@
+.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}