@studiolxd/brand 40.0.0 → 41.0.0

package/CHANGELOG.md

@@ -7,6 +7,92 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [41.0.0] — 2026-09-15
+
+> **Major.** Segunda familia al proveedor de textos: `Table` y `DataTable` pierden sus
+> textos castellano por defecto.
+
+### Las tablas leen del proveedor
+
+Mismo mecanismo que estrenó `Pagination` en la v40.0.0 y mismo orden —**prop → proveedor →
+error**—, ahora en la familia que más superficie ocupa en una aplicación. `BrandMessages`
+gana dos espacios:
+
+- **`table`** — `actions`, `sortable`, `sortedAscending`, `sortedDescending`.
+- **`dataTable`** — `empty`, `search`.
+
+Los cinco calcan clave a clave el catálogo de la suite, así que montarlos es mapear y no
+traducir de nuevo. Es incompatible **en tiempo de compilación**, que es justo lo que se
+busca: el contrato exige los dos espacios, así que ninguna aplicación compila hasta
+añadirlos — nadie se entera en producción de que le falta un texto.
+
+### Lo que NO se fue al proveedor, y por qué
+
+La distinción que gobierna toda la campaña: al catálogo común va lo que el componente emite
+**por su cuenta** e igual en toda la suite; se queda como prop lo que es **contenido de esa
+pantalla**.
+
+- `Table.caption` y `TableRow.label` nombran ESA tabla y ESA fila.
+- `DataTable.ariaLabel` nombra ESA lista.
+- `DataTable.emptyMessage` **sobrevive como anulación**: el catálogo pone el aviso genérico,
+  y la prop queda para el que explica algo del dominio —«todavía no has invitado a nadie»—.
+  No es una concesión: en la suite ya hay pantallas que dan un vacío distinto según haya
+  filtros o no, y eso ningún catálogo común puede saberlo.
+
+`DataTable.searchClearLabel` se queda como **reenvío puro**: ese texto no lo emite la tabla,
+lo emite el `InputField` que lleva dentro, y ese átomo todavía no está migrado.
+
+### Lo que esta ola enseña sobre las que vienen
+
+Una familia no queda limpia del todo mientras reenvíe texto a un componente sin migrar, y
+eso **no se ve desde dentro de la familia**. De ahí que las olas siguientes se ordenen para
+que los átomos de formulario caigan pronto: medio catálogo termina reenviando a ellos.
+
+## [40.1.0] — 2026-09-15
+
+> **Minor.** `AnnotationThread` gana un tercer estado y una ranura para la coordenada de
+> cada anotación.
+
+### El tercer estado: `acknowledged`
+
+El organismo tenía dos estados, `open` y `resolved`, y le faltaba el peldaño de en medio.
+No es un matiz visual: donde se usa, el pie ofrece **las transiciones disponibles desde
+donde estás**, así que colapsar «planteada» y «atendida» en un mismo `open` hace que el
+rótulo diga lo mismo en dos estados entre los que se puede mover, y la interfaz deja de
+decir si alguien se ha hecho cargo.
+
+Se llama `acknowledged` —«Atendida» por defecto, con su `acknowledgedLabel`— y no
+`verified`, que es el vocabulario de UN producto: donde nació, «verificada» significa que
+alguien comprobó el arreglo, pero en una nota de traducción el mismo peldaño es «alguien ya
+se ha hecho cargo». El nombre del sistema dice **dónde está el hilo** —planteado, atendido,
+cerrado—, no qué significa en tu dominio; el rótulo es prop, así que cada producto sigue
+diciendo su palabra. Se descartó `reviewed` por colisión: el componente vive en paneles de
+revisión, donde «revisada» ya se lee como otra cosa.
+
+El tratamiento es una **escala de presencia** —plena, segundo plano, retirada— con un solo
+token nuevo, `annotation-thread.acknowledged-opacity`, hermano del `resolved-opacity` que ya
+existía. Ningún color nuevo: el `Tag` usa su variante `info`. Y por ser opacidad se lee
+igual en superficie clara y oscura, así que no hizo falta ningún par `surface-dark-*`.
+
+### `AnnotationEntry.meta`: la coordenada de una anotación
+
+Ranura nueva **por anotación**, no del hilo: cada una tiene su fecha y su sitio, y una
+respuesta puede apuntar a otro lugar que la anotación que abre el hilo. Se pinta dentro de
+la cabecera de esa anotación, después del avatar, el autor, la fecha y la marca de editada
+— añade, no sustituye.
+
+No es `actions`, y la diferencia no es de colocación: `actions` son las cosas que se le
+hacen a la anotación —editar, borrar, citar—; la coordenada es parte de **lo que la
+anotación es**. Puesta entre los botones del pie se convertía en un botón más.
+
+Cuando no cabe, la que baja de línea es la coordenada y nunca la fecha: lo garantiza el
+orden del marcado, no una media query. Una coordenada larga —el título de una lección— se
+parte dentro en vez de desbordar el hilo. Las dos cosas las mide un test en un navegador de
+verdad, dentro de una caja estrecha.
+
+La ranura lee los tokens `meta-*` que el organismo ya tenía para la fecha, así que no
+estrena ninguno.
+
 ## [40.0.0] — 2026-09-15
 
 > **Major.** El sistema estrena **proveedor de textos**: un catálogo que se monta una vez

package/dist/_shared/tokens.js

@@ -3104,6 +3104,7 @@ var e = {
 	"--annotation-thread-body-color": "#111e30",
 	"--annotation-thread-replies-label-font-size": "0.875rem",
 	"--annotation-thread-replies-label-color": "#4a4a4a",
+	"--annotation-thread-acknowledged-opacity": "0.7",
 	"--annotation-thread-resolved-opacity": "0.4",
 	"--chart-series-1": "#1e7ff6",
 	"--chart-series-2": "#f16123",

package/dist/_types/messages/BrandMessages.d.ts

@@ -1,4 +1,6 @@
 import type { PaginationMessages } from '../molecules/Pagination/Pagination';
+import type { TableMessages } from '../molecules/Table/Table';
+import type { DataTableMessages } from '../organisms/DataTable/DataTable';
 /**
  * El contrato de textos de la librería: un espacio por componente, y dentro
  * de cada espacio **todas las claves obligatorias**.
@@ -22,5 +24,7 @@ import type { PaginationMessages } from '../molecules/Pagination/Pagination';
  */
 export interface BrandMessages {
     pagination: PaginationMessages;
+    table: TableMessages;
+    dataTable: DataTableMessages;
 }
-export type { PaginationMessages };
+export type { PaginationMessages, TableMessages, DataTableMessages };

package/dist/_types/messages/index.d.ts

@@ -2,4 +2,4 @@ export { BrandMessagesProvider } from './BrandMessagesProvider';
 export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
 export { useBrandMessages } from './BrandMessagesContext';
 export type { BrandMessagesReader } from './BrandMessagesContext';
-export type { BrandMessages, PaginationMessages } from './BrandMessages';
+export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, } from './BrandMessages';

package/dist/_types/molecules/Table/Table.d.ts

@@ -1,5 +1,25 @@
 import type { ReactNode } from 'react';
 import './Table.css';
+/**
+ * Los textos que la tabla emite por su cuenta: el cromo de la cabecera —el
+ * estado de ordenación y el rótulo de la columna de acciones—, igual en toda
+ * la suite. Los nombres calcan el espacio `table` del catálogo, así que
+ * montarlo es mapear clave a clave y no traducir de nuevo.
+ *
+ * Lo que NO está aquí es deliberado: el `caption` de una tabla y el `label`
+ * de una fila son contenido de ESA pantalla, no cromo del componente, y
+ * siguen siendo props sin valor por defecto.
+ */
+export interface TableMessages {
+    /** Rótulo oculto de la cabecera de la columna de acciones. */
+    actions: string;
+    /** Texto oculto de una columna ordenable que todavía no ordena. */
+    sortable: string;
+    /** Texto oculto de la columna ordenada de forma ascendente. */
+    sortedAscending: string;
+    /** Texto oculto de la columna ordenada de forma descendente. */
+    sortedDescending: string;
+}
 export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Texto de `<caption>` (se oculta visualmente). **Opcional**: sin `caption` no se
@@ -19,7 +39,10 @@ export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellEl
     onSort?: () => void;
     /** Marca esta columna como columna de acciones: ancho mínimo y cabecera oculta visualmente */
     actions?: boolean;
-    /** Texto accesible de la cabecera de acciones. Default: «Acciones» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /**
+     * Texto accesible de la cabecera de acciones. Sin default: cuando no se
+     * pasa, sale de `table.actions` del `BrandMessagesProvider`.
+     */
     actionsLabel?: string;
     /**
      * Pega la columna al borde final (`inset-inline-end: 0`) cuando la tabla
@@ -29,13 +52,13 @@ export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellEl
      */
     sticky?: 'end';
     /**
-     * Texto accesible del estado de ordenación ascendente. Default: "Ordenado ascendente"
-     * (castellano). Una app multiidioma debe pasarlo traducido.
+     * Texto accesible del estado de ordenación ascendente. Sin default:
+     * `table.sortedAscending`.
      */
     sortedAscLabel?: string;
-    /** Texto accesible del estado descendente. Default: «Ordenado descendente» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /** Texto accesible del estado descendente. Sin default: `table.sortedDescending`. */
     sortedDescLabel?: string;
-    /** Texto accesible de la columna ordenable sin ordenar. Default: «Activar ordenación» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /** Texto accesible de la columna ordenable sin ordenar. Sin default: `table.sortable`. */
     sortableLabel?: string;
     /**
      * Impide que el rótulo de esta columna se parta en dos líneas. Mismo valor
@@ -55,8 +78,8 @@ export interface TableRowProps extends Omit<React.HTMLAttributes<HTMLTableRowEle
     /**
      * Nombre accesible de la fila. Por defecto el rol `row` toma su nombre del
      * contenido de sus celdas; pásalo solo cuando ese texto no identifique la
-     * fila (celdas de solo iconos, datos crípticos). Default: castellano — no
-     * hay texto por defecto, es el consumidor quien lo escribe.
+     * fila (celdas de solo iconos, datos crípticos). No sale del catálogo
+     * común: identifica a ESTA fila, así que lo escribe el consumidor.
      */
     label?: string;
     children: ReactNode;

package/dist/_types/organisms/AnnotationThread/AnnotationThread.d.ts

@@ -13,16 +13,36 @@ export interface AnnotationEntry {
     avatar?: ReactNode;
     /** Se marca como editada junto a la fecha. */
     edited?: boolean;
+    /**
+     * Lo que el producto añade **a la fila de metadatos**, al lado de la fecha:
+     * la coordenada de la anotación —el enlace a la lección, al segmento, a la
+     * versión—, no una acción sobre ella (para eso está `actions`).
+     *
+     * Se añade DESPUÉS de la fecha y de la marca de editada: no las sustituye, y
+     * al estrecharse cae a su propia línea sin empujarlas fuera de la vista.
+     */
+    meta?: ReactNode;
     /** Acciones de **esta** anotación: editar, borrar, citar. */
     actions?: ReactNode;
 }
+/**
+ * Los tres estados del hilo, en orden de flujo. El nombre dice **dónde está el
+ * hilo**, no cómo lo llama cada producto: el rótulo es una prop, así que una
+ * revisión puede escribir «Verificada» sobre `acknowledged` sin que el sistema
+ * herede el vocabulario de un producto.
+ */
+export type AnnotationThreadStatus = 'open' | 'acknowledged' | 'resolved';
 export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'article'> {
     /** La anotación que abre el hilo. */
     annotation: AnnotationEntry;
     /** Las respuestas, en orden. */
     replies?: AnnotationEntry[];
-    /** Estado del hilo. Un hilo resuelto se retira visualmente sin desaparecer. */
-    status?: 'open' | 'resolved';
+    /**
+     * Estado del hilo, en orden de flujo. `open` pide atención; `acknowledged`
+     * es el hilo que alguien ya ha mirado y da un paso atrás sin cerrarse;
+     * `resolved` se retira visualmente sin desaparecer.
+     */
+    status?: AnnotationThreadStatus;
     /** Acciones del hilo entero: resolver, reabrir, seguir. Van al pie. */
     actions?: ReactNode;
     /** Con qué se responde: un `MessageComposer`, un `TextareaField`, un `Button`. */
@@ -33,6 +53,8 @@ export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'a
     dateFormat?: Intl.DateTimeFormatOptions;
     /** Rótulo del estado abierto. Por defecto, en castellano: «Abierta». */
     openLabel?: string;
+    /** Rótulo del estado atendido. Por defecto, en castellano: «Atendida». */
+    acknowledgedLabel?: string;
     /** Rótulo del estado resuelto. Por defecto, en castellano: «Resuelta». */
     resolvedLabel?: string;
     /** Marca de anotación editada. Por defecto, en castellano: «editada». */
@@ -50,12 +72,12 @@ export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'a
 /**
  * Un hilo de anotaciones sobre algo: el comentario de revisión de una lección,
  * la nota sobre un segmento de traducción. Cada anotación lleva **autor, fecha
- * y sus propias acciones**, el hilo tiene **estado** (abierta o resuelta) y se
- * responde al pie.
+ * y sus propias acciones**, el hilo tiene **estado** (abierta, atendida o
+ * resuelta) y se responde al pie.
  *
  * No es `ConversationThread`: aquello es una conversación de usuario y
  * asistente, con burbujas, orden de emisor y desplazamiento automático. Aquí
  * todas las anotaciones son iguales, lo que importa es quién dijo qué y cuándo,
  * y si el asunto sigue abierto.
  */
-export declare function AnnotationThread({ annotation, replies, status, actions, reply, locale, dateFormat, openLabel, resolvedLabel, editedLabel, repliesLabel, label, className, ...rest }: AnnotationThreadProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnnotationThread({ annotation, replies, status, actions, reply, locale, dateFormat, openLabel, acknowledgedLabel, resolvedLabel, editedLabel, repliesLabel, label, className, ...rest }: AnnotationThreadProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/organisms/DataTable/DataTable.d.ts

@@ -3,6 +3,18 @@ import { type ColumnDef, type RowData } from '@tanstack/react-table';
 import { type PaginationProps } from '../../molecules/Pagination/Pagination';
 import { type TableHeaderProps } from '../../molecules/Table/Table';
 import './DataTable.css';
+/**
+ * Los textos que la tabla de datos emite por su cuenta. Son dos, y los dos son
+ * cromo: el rótulo del buscador y el aviso de que no hay filas. El resto de su
+ * texto o llega por props de contenido (`ariaLabel`) o lo ponen sus piezas
+ * (`Table`, `Pagination`), cada una desde su propio espacio.
+ */
+export interface DataTableMessages {
+    /** Aviso del estado vacío cuando no hay filas que pintar. */
+    empty: string;
+    /** Rótulo —oculto a la vista— y placeholder del buscador. */
+    search: string;
+}
 /** Alineación del contenido de una columna. `start` es el default. */
 export type DataTableAlign = 'start' | 'center' | 'end';
 declare module '@tanstack/react-table' {
@@ -66,9 +78,15 @@ export interface DataTableProps<TData, TValue> {
         value: string;
         onChange: (value: string) => void;
     };
-    /** Placeholder y nombre accesible del buscador. */
+    /**
+     * Placeholder y nombre accesible del buscador. Sin default: cuando no se
+     * pasa, sale de `dataTable.search` del `BrandMessagesProvider`.
+     */
     searchPlaceholder?: string;
-    /** Nombre accesible del botón que vacía el buscador. Default castellano. */
+    /**
+     * Nombre accesible del botón que vacía el buscador. `DataTable` no le pone
+     * ninguno: sin esta prop manda el de `InputField`.
+     */
     searchClearLabel?: string;
     /** Se renderiza a la derecha del buscador. */
     toolbar?: ReactNode;
@@ -81,7 +99,11 @@ export interface DataTableProps<TData, TValue> {
     footerActions?: ReactNode;
     /** Filas por página cuando la tabla pagina en cliente. */
     pageSize?: number;
-    /** Texto del estado vacío. */
+    /**
+     * Texto del estado vacío. Sin default: sale de `dataTable.empty`. Pásalo
+     * cuando esta pantalla tenga algo propio que decir («Aún no has invitado a
+     * nadie»), que un catálogo común no puede saber.
+     */
     emptyMessage?: string;
     isLoading?: boolean;
     pagination?: DataTableServerPagination;
@@ -94,8 +116,8 @@ export interface DataTableProps<TData, TValue> {
  * paginación (en cliente o en servidor) sobre el `Table` y el `Pagination` del
  * DS. El comportamiento lo aporta TanStack Table.
  *
- * Los textos accesibles llegan por props (el DS no habla de i18n): los de
- * `Table` caen a sus castellanos por defecto, y los de `Pagination` —que ya no
- * tiene ninguno— al `BrandMessagesProvider` que la aplicación monta en su raíz.
+ * Ningún texto viene puesto: los propios salen del espacio `dataTable` del
+ * `BrandMessagesProvider`, y los de sus piezas de los suyos (`table`,
+ * `pagination`). Las props de texto siguen ahí como anulación puntual.
  */
 export declare function DataTable<TData, TValue>({ columns, data, ariaLabel, ariaLabelledBy, searchColumnId, search, searchPlaceholder, searchClearLabel, toolbar, footerActions, pageSize, emptyMessage, isLoading, pagination, headerLabels, paginationLabels, className, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/annotation-thread.css

@@ -1 +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}
+.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--acknowledged{opacity:var(--annotation-thread-acknowledged-opacity)}.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__meta{align-items:center;gap:var(--annotation-thread-header-gap);overflow-wrap:anywhere;min-inline-size:0;font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color);flex-wrap:wrap;display:inline-flex}.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

@@ -4,12 +4,16 @@ import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/stories/organisms/AnnotationThread/AnnotationThread.tsx
 var r = {
+	open: "warning",
+	acknowledged: "info",
+	resolved: "success"
+}, i = {
 	day: "numeric",
 	month: "short",
 	hour: "2-digit",
 	minute: "2-digit"
 };
-function i({ entry: e, locale: r, dateFormat: i, editedLabel: a }) {
+function a({ 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",
@@ -33,6 +37,10 @@ function i({ entry: e, locale: r, dateFormat: i, editedLabel: a }) {
 					e.edited && /* @__PURE__ */ t("span", {
 						className: "annotation-thread__edited",
 						children: a
+					}),
+					e.meta && /* @__PURE__ */ t("span", {
+						className: "annotation-thread__meta",
+						children: e.meta
 					})
 				]
 			}),
@@ -47,52 +55,55 @@ function i({ entry: e, locale: r, dateFormat: i, editedLabel: a }) {
 		]
 	});
 }
-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";
+function o({ annotation: o, replies: s = [], status: c = "open", actions: l, reply: u, locale: d = "es-ES", dateFormat: f = i, openLabel: p = "Abierta", acknowledgedLabel: m = "Atendida", resolvedLabel: h = "Resuelta", editedLabel: g = "editada", repliesLabel: _ = (e) => e === 1 ? "1 respuesta" : `${e} respuestas`, label: v = "Hilo de anotaciones", className: y, ...b }) {
 	return /* @__PURE__ */ n("article", {
 		className: [
 			"annotation-thread",
-			y ? "annotation-thread--resolved" : "",
-			_ ?? ""
+			c === "open" ? "" : `annotation-thread--${c}`,
+			y ?? ""
 		].filter(Boolean).join(" "),
-		"aria-label": g,
-		...v,
+		"aria-label": v,
+		...b,
 		children: [
 			/* @__PURE__ */ t("div", {
 				className: "annotation-thread__status",
 				children: /* @__PURE__ */ t(e, {
-					variant: y ? "success" : "warning",
-					children: y ? p : f
+					variant: r[c],
+					children: {
+						open: p,
+						acknowledged: m,
+						resolved: h
+					}[c]
 				})
 			}),
-			/* @__PURE__ */ t(i, {
-				entry: a,
-				locale: u,
-				dateFormat: d,
-				editedLabel: m
+			/* @__PURE__ */ t(a, {
+				entry: o,
+				locale: d,
+				dateFormat: f,
+				editedLabel: g
 			}),
-			o.length > 0 && /* @__PURE__ */ n("div", {
+			s.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, {
+					children: _(s.length)
+				}), s.map((e) => /* @__PURE__ */ t(a, {
 					entry: e,
-					locale: u,
-					dateFormat: d,
-					editedLabel: m
+					locale: d,
+					dateFormat: f,
+					editedLabel: g
 				}, e.id))]
 			}),
-			l && /* @__PURE__ */ t("div", {
+			u && /* @__PURE__ */ t("div", {
 				className: "annotation-thread__reply",
-				children: l
+				children: u
 			}),
-			c && /* @__PURE__ */ t("footer", {
+			l && /* @__PURE__ */ t("footer", {
 				className: "annotation-thread__actions",
-				children: c
+				children: l
 			})
 		]
 	});
 }
 //#endregion
-export { a as AnnotationThread };
+export { o as AnnotationThread };