@studiolxd/brand 44.1.0 → 45.1.0

package/CHANGELOG.md

@@ -7,6 +7,85 @@ 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.
 
+## [45.1.0] — 2026-09-15
+
+> **Minor.** La superficie pública pone los controles en talla lg, igual que hace con el
+> texto.
+
+### `.site-shell` parte de lg también en los controles
+
+El bloque subía el cuerpo a 20px y dejaba los campos en la talla de aplicación: en una
+página pública el texto era grande y los buscadores, filtros y botones de al lado no. Misma
+omisión que tenía el término de la ficha hasta la v39.0.0, y misma respuesta: en el bloque,
+no en cada app.
+
+No se enumeran controles a mano. Cada control ya declara su talla lg en tokens hermanos
+(`input.lg-height` junto a `input.height`), de donde bebe su modificador `--lg`; ahora
+`.site-shell` apunta cada token de partida a su hermano `lg-*`, y lo que hereda de un
+control sube con él. Un control nuevo entra solo por tener sus tokens `lg-*`. La familia
+base (`control.*`) estrena su par lg, y el motor de tokens arrastra ahora una referencia
+metida dentro de una fórmula —sin eso el renglón reservado para el rótulo de la barra de
+filtros se quedaba corto y descolocaba el interruptor—.
+
+**El botón entra**: 40→48px y 16→20px, porque un botón md junto a un campo de 48 se lee
+como un control de otra talla justo donde más se juntan. **El chevron del `Select`** era lo
+único de la caja que no subía —su tamaño salía de una prop de React y no de un token— y
+ahora es token (16→24px).
+
+Medido en Chromium: dentro del shell, campo, selector, selector múltiple, campo de fecha y
+botón a 48px/20px, exactamente lg; fuera, 40px/16px. El interruptor, su campo y el botón de
+acciones de la barra siguen con el centro en el mismo píxel.
+
+**Dos matices, documentados.** `size="sm"` sigue mandando dentro del shell; lo que ya no
+se distingue de lg es un `size="md"` escrito a mano. Y **lo que sale por un portal** —la
+lista de un `Select`, el calendario de un `DatePicker`— monta en `document.body` y no
+hereda la superficie: el disparador va a 48/20 y su lista se queda en la talla de
+aplicación. Es el mismo caso que `Modal` y `Sheet` documentan, y la misma respuesta
+(`container`), pero los campos `*Field` no lo exponen todavía.
+
+## [45.0.0] — 2026-09-15
+
+> **Major.** Sexta familia al proveedor de textos: diálogos y superficies. `Modal`, `Sheet`,
+> `ConfirmDialog`, `Alert`, `Banner` y `Toaster` dejan de traer castellano puesto — y el
+> botón de confirmar de un diálogo pasa a exigir su texto.
+
+### Los diálogos leen del proveedor
+
+Seis espacios nuevos en `BrandMessages`: `modal` (close, fallbackTitle), `sheet` (close),
+`confirmDialog` (cancel, pending), `alert` (close), `banner` (dismiss) y `toaster`
+(container, close). Mismo orden —**prop → proveedor → error**— y cada texto se lee **donde
+se pinta**: el título de respaldo solo sin `title`, el aspa del aviso solo si es
+descartable, el «Confirmando…» solo mientras la promesa corre. La mayoría de los usos no
+exige ninguna clave nueva.
+
+Con ello se cierran los dos reenvíos que la v44 dejó apuntados (`ImageCropDialog.closeLabel`
+y `AvatarUpload.cropCloseLabel` llegan ya a un `Modal` que lee del proveedor), y
+`Consent.closeLabel` pierde su default por lo mismo: tapaba el del `Modal`.
+
+### Breaking — `ConfirmDialog.confirmLabel` es obligatorio
+
+Pasa a **obligatorio y sin default**, y **no entra en el catálogo** aunque `common.confirm`
+exista. El botón de confirmar es el único punto del diálogo donde se toma la decisión, y
+por eso es el único donde el texto tiene que nombrar la consecuencia —«Borrar la
+organización», «Revocar la clave»—. Un default lo haría decir «Confirmar» en todas partes
+sin que nada fallara, que es justo el rótulo que la documentación del componente lleva
+pidiendo que no se use; y siendo opcional, nadie llegaría a escribir el bueno: el default
+es lo que quita la presión de pensarlo. Mismo trato que el de `ImageCropDialog`.
+
+`pendingLabel`, en cambio, sí es cromo aunque se pinte sobre el mismo botón: se lee
+**mientras ya se ejecuta**, sobre un control deshabilitado. Nadie decide nada leyéndolo.
+
+### Lo que se queda como prop
+
+`title`, `description`, los pies, el texto de cada aviso, `secondaryActionLabel`, y los
+`confirmPhraseLabel` / `confirmPhraseMismatch` de la v39, que siguen obligatorios.
+
+### Para quien actualice
+
+El `<Toaster />` tiene que quedar **dentro** del `BrandMessagesProvider`: montado como
+hermano suyo revienta en el primer render. Y cada `ConfirmDialog` sin `confirmLabel` deja de
+compilar — los que hoy caían en «Confirmar» son exactamente los que estaban mal.
+
 ## [44.1.0] — 2026-09-15
 
 > **Minor.** Las estrellas ganadas de `StarRating` se rellenan en accent-2 sobre superficie

package/dist/_shared/tokens.js

@@ -684,6 +684,9 @@ var e = {
 	"--control-focus-ring-inset-offset": "1px",
 	"--control-padding-inline": "1rem",
 	"--control-padding-block": "1rem",
+	"--control-lg-height": "3rem",
+	"--control-lg-font-size": "1.25rem",
+	"--control-lg-padding-inline": "1.5rem",
 	"--copyable-value-gap": "0.75rem",
 	"--description-list-border-width": "1px",
 	"--description-list-border-style": "solid",
@@ -1202,6 +1205,9 @@ var e = {
 	"--multi-select-item-selected-font-weight": "700",
 	"--multi-select-icon-transition-easing": "ease",
 	"--multi-select-selection-gap": "0.25rem",
+	"--multi-select-icon-size": "16px",
+	"--multi-select-sm-icon-size": "8px",
+	"--multi-select-lg-icon-size": "24px",
 	"--multi-select-sm-font-size": "0.875rem",
 	"--multi-select-sm-padding-inline": "0.5rem",
 	"--multi-select-sm-item-padding-block": "0.25rem",
@@ -1475,6 +1481,9 @@ var e = {
 	"--select-item-selected-font-weight": "500",
 	"--select-item-highlighted-bg": "#111e30",
 	"--select-item-highlighted-color": "#ffffff",
+	"--select-icon-size": "16px",
+	"--select-sm-icon-size": "8px",
+	"--select-lg-icon-size": "24px",
 	"--select-sm-font-size": "0.875rem",
 	"--select-sm-padding-inline": "0.5rem",
 	"--select-sm-item-padding-block": "0.25rem",

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

@@ -19,6 +19,12 @@ import type { TimeSelectMessages } from '../atoms/TimeSelect/TimeSelect';
 import type { FileUploadMessages } from '../atoms/FileUpload/FileUpload';
 import type { ImageCropDialogMessages } from '../molecules/ImageCropDialog/ImageCropDialog';
 import type { AvatarUploadMessages } from '../molecules/AvatarUpload/AvatarUpload';
+import type { ModalMessages } from '../molecules/Modal/Modal';
+import type { SheetMessages } from '../molecules/Sheet/Sheet';
+import type { ConfirmDialogMessages } from '../molecules/ConfirmDialog/ConfirmDialog';
+import type { AlertMessages } from '../molecules/Alert/Alert';
+import type { BannerMessages } from '../molecules/Banner/Banner';
+import type { ToasterMessages } from '../molecules/Toast/Toaster';
 /**
  * El contrato de textos de la librería: un espacio por componente, y dentro
  * de cada espacio **todas las claves obligatorias**.
@@ -62,5 +68,11 @@ export interface BrandMessages {
     fileUpload: FileUploadMessages;
     imageCropDialog: ImageCropDialogMessages;
     avatarUpload: AvatarUploadMessages;
+    modal: ModalMessages;
+    sheet: SheetMessages;
+    confirmDialog: ConfirmDialogMessages;
+    alert: AlertMessages;
+    banner: BannerMessages;
+    toaster: ToasterMessages;
 }
-export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, };
+export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, };

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, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, } from './BrandMessages';
+export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, } from './BrandMessages';

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

@@ -1,4 +1,14 @@
 import './Alert.css';
+/**
+ * El cromo del aviso. Solo hay uno: el aspa que lo descarta, que dice lo
+ * mismo en todos los avisos del sistema. El `title`, la `description` y lo
+ * que digan las acciones son contenido —el aviso habla de lo que ha pasado en
+ * ESA pantalla— y siguen llegando por props.
+ */
+export interface AlertMessages {
+    /** Nombre accesible del aspa que descarta el aviso. */
+    close: string;
+}
 export type AlertVariant = 'default' | 'success' | 'error' | 'warning';
 export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
     variant?: AlertVariant;
@@ -24,8 +34,9 @@ export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
      */
     finalFocus?: React.RefObject<HTMLElement | null>;
     /**
-     * Etiqueta accesible del botón de cierre. Default: «Cerrar» (castellano).
-     * Una app multiidioma debe pasarla traducida.
+     * Nombre accesible del botón de cierre. **Sin default**: sin él, sale de
+     * `alert.close` del `BrandMessagesProvider`. Solo se lee cuando el aspa se
+     * pinta: un aviso sin `dismissible` no lo exige.
      */
     closeLabel?: string;
 }

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

@@ -187,9 +187,9 @@ export interface AvatarUploadProps {
      */
     cropConfirmLabel?: ReactNode;
     /**
-     * Etiqueta del aspa de cerrar. Se reenvía **tal cual** al `ImageCropDialog`
-     * y de ahí al `Modal`, que todavía no lee del proveedor: mientras no se
-     * migre, sin esta prop el aspa dice lo que diga `Modal`.
+     * Nombre accesible del aspa de cerrar. **Reenvío puro** al
+     * `ImageCropDialog` y de ahí al `Modal`: sin esta prop, el aspa lee
+     * `modal.close` del `BrandMessagesProvider`.
      */
     cropCloseLabel?: string;
     /**

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

@@ -1,4 +1,13 @@
 import './Banner.css';
+/**
+ * El cromo de la barra. Solo hay uno: el aspa. Lo que la barra DICE
+ * (`children`) y lo que ofrezcan sus acciones son contenido —«estás viendo la
+ * aplicación como alguien», «dejar de suplantar»— y los pone la aplicación.
+ */
+export interface BannerMessages {
+    /** Nombre accesible del aspa que descarta la barra. */
+    dismiss: string;
+}
 export type BannerVariant = 'info' | 'warning';
 export interface BannerProps extends React.ComponentPropsWithoutRef<'div'> {
     /** Intención de la barra. Default `'info'` (relleno prusia); `'warning'` es el relleno de aviso. */
@@ -14,8 +23,9 @@ export interface BannerProps extends React.ComponentPropsWithoutRef<'div'> {
      */
     onDismiss?: () => void;
     /**
-     * Nombre accesible del aspa. Default: «Descartar aviso» (castellano). Una app
-     * multiidioma debe pasarlo traducido.
+     * Nombre accesible del aspa. **Sin default**: sin él, sale de
+     * `banner.dismiss` del `BrandMessagesProvider`. Solo se lee cuando el aspa
+     * se pinta, o sea cuando hay `onDismiss`.
      */
     dismissLabel?: string;
 }

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

@@ -1,6 +1,30 @@
 import { type ReactNode } from 'react';
 import { type ModalProps } from '../Modal/Modal';
 import './ConfirmDialog.css';
+/**
+ * El cromo de la confirmación, y **solo el cromo**. Aquí la línea entre
+ * cromo y contenido cae en medio del pie, así que conviene decirla entera:
+ *
+ * - **`cancel` es cromo.** La salida segura no cambia de una pantalla a otra:
+ *   se sale de todas igual, y «Cancelar» describe lo único que hace el botón
+ *   —no seguir—. No nombra ninguna consecuencia porque no la tiene.
+ * - **`pending` es cromo.** Es un estado, no una decisión: se pinta sobre el
+ *   botón ya deshabilitado, mientras la acción corre. Nadie elige nada
+ *   leyéndolo, así que no tiene que nombrar el verbo de la acción.
+ * - **`confirmLabel` NO está aquí y es una prop obligatoria.** Es la única
+ *   parte del diálogo donde se toma la decisión, y por eso tiene que nombrar
+ *   lo que va a pasar: «Eliminar la organización», «Revocar la clave»,
+ *   «Expulsar del equipo». Un default de catálogo lo haría decir «Confirmar»
+ *   en todas partes sin que nada fallara, que es exactamente el rótulo que el
+ *   sistema no quiere — y, siendo opcional, nadie llegaría a escribir el
+ *   bueno. Obligatoria, como el `confirmLabel` del `ImageCropDialog`.
+ */
+export interface ConfirmDialogMessages {
+    /** Rótulo del botón que cancela. */
+    cancel: string;
+    /** Rótulo del botón de confirmar mientras la acción está en curso. */
+    pending: string;
+}
 export interface ConfirmDialogBaseProps {
     open: boolean;
     /** Título del diálogo: la pregunta, no «Confirmar». */
@@ -43,23 +67,26 @@ export interface ConfirmDialogBaseProps {
      */
     destructive?: boolean;
     /**
-     * Rótulo del botón que confirma. Default castellano.
-     * @default 'Confirmar'
+     * Rótulo del botón que confirma. **Obligatorio y sin default**: es donde se
+     * toma la decisión, así que tiene que nombrar lo que va a pasar («Eliminar
+     * la organización»), y eso lo sabe la pantalla, no el diálogo. No sale del
+     * catálogo a propósito — ver `ConfirmDialogMessages`.
      */
-    confirmLabel?: string;
+    confirmLabel: string;
     /**
-     * Rótulo del botón que cancela. Default castellano.
-     * @default 'Cancelar'
+     * Rótulo del botón que cancela. **Sin default**: sin él, sale de
+     * `confirmDialog.cancel` del `BrandMessagesProvider`.
      */
     cancelLabel?: string;
     /**
-     * Rótulo del botón de confirmar mientras la acción está en curso. Default castellano.
-     * @default 'Confirmando…'
+     * Rótulo del botón de confirmar mientras la acción está en curso. **Sin
+     * default**: sin él, sale de `confirmDialog.pending`. Solo se lee mientras
+     * la acción corre.
      */
     pendingLabel?: string;
     /**
-     * Etiqueta del aspa de cierre. Default castellano.
-     * @default 'Cerrar'
+     * Nombre accesible del aspa de cierre. **Reenvío puro al `Modal`**: sin él,
+     * el aspa lee `modal.close` del proveedor, como cualquier otro diálogo.
      */
     closeLabel?: string;
     /** Nodo donde montar el portal, como en `Modal`. */

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

@@ -93,7 +93,13 @@ export interface ConsentPreferencesProps {
     side?: 'top' | 'right' | 'bottom' | 'left';
     /** Título del panel. Default castellano: `'Preferencias de cookies'`. */
     title?: ReactNode;
-    /** Etiqueta del botón de cerrar. Default castellano: `'Cerrar'`. */
+    /**
+     * Nombre accesible del botón de cerrar. **Reenvío puro** al `Modal` o al
+     * `Sheet` sobre el que se abre el panel: sin él, el aspa lee `modal.close`
+     * o `sheet.close` del `BrandMessagesProvider`. El resto de los textos de
+     * `Consent` sigue con su default castellano — este componente todavía no
+     * está migrado al proveedor.
+     */
     closeLabel?: string;
     /** Marca de una categoría necesaria. Default castellano: `'Siempre activa'`. */
     alwaysOnLabel?: string;

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

@@ -36,9 +36,9 @@ export interface ImageCropDialogProps {
     cancelLabel: ReactNode;
     confirmLabel: ReactNode;
     /**
-     * Etiqueta del botón de cierre del diálogo. Se reenvía **tal cual** al
-     * `Modal`, que todavía no lee del proveedor: mientras no se migre, sin esta
-     * prop el aspa sigue diciendo lo que diga `Modal`.
+     * Nombre accesible del botón de cierre del diálogo. **Reenvío puro** al
+     * `Modal`: sin esta prop, el aspa lee `modal.close` del
+     * `BrandMessagesProvider`, como la de cualquier otro diálogo del sistema.
      */
     closeLabel?: string;
     /**

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

@@ -1,18 +1,35 @@
 import { Dialog } from '@base-ui/react/dialog';
 import './Modal.css';
+/**
+ * El cromo del diálogo, y solo el cromo: las dos cosas que el `Modal` dice por
+ * su cuenta, sin que se las pase nadie.
+ *
+ * Aquí no hay nada que decidir por pantalla. El aspa cierra el diálogo —este y
+ * todos—, y el nombre de respaldo es lo que se anuncia cuando el diálogo no
+ * trae título: ninguno de los dos cambia de una pantalla a otra, así que los
+ * dos son catálogo. El `title`, la `description` y lo que digan los botones del
+ * pie son contenido y siguen viniendo de quien abre el diálogo.
+ */
+export interface ModalMessages {
+    /** Nombre accesible del aspa que cierra el diálogo. */
+    close: string;
+    /** Nombre accesible del diálogo cuando no hay `title`. */
+    fallbackTitle: string;
+}
 export interface ModalProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'className'> {
     open: boolean;
     onClose: () => void;
     title?: string;
     children: React.ReactNode;
     /**
-     * Nombre accesible del aspa de cierre. Default: «Cerrar» (castellano).
-     * Una app multiidioma debe pasarlo traducido.
+     * Nombre accesible del aspa de cierre. **Sin default**: sin él, sale de
+     * `modal.close` del `BrandMessagesProvider`.
      */
     closeLabel?: string;
     /**
-     * Nombre accesible del diálogo cuando no hay `title`. Default: «Diálogo»
-     * (castellano). Una app multiidioma debe pasarlo traducido.
+     * Nombre accesible del diálogo cuando no hay `title`. **Sin default**: sin
+     * él, sale de `modal.fallbackTitle` del `BrandMessagesProvider`. Solo se
+     * lee cuando de verdad no hay título: un diálogo con `title` no lo exige.
      */
     fallbackTitle?: string;
     /**

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

@@ -1,6 +1,16 @@
 import type { ReactNode } from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 import './Sheet.css';
+/**
+ * El cromo del panel. Solo hay uno: el aspa cierra el cajón, aquí y en
+ * cualquier otro, así que es catálogo. El `title` y la `description` son
+ * contenido y los sigue pasando quien abre el panel — este componente los
+ * exige como props, y el título además es obligatorio.
+ */
+export interface SheetMessages {
+    /** Nombre accesible del aspa que cierra el panel. */
+    close: string;
+}
 export interface SheetProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -14,6 +24,11 @@ export interface SheetProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     /** Fila de acciones al pie del panel. */
     footer?: ReactNode;
     children: ReactNode;
+    /**
+     * Nombre accesible del aspa de cierre. **Sin default**: sin él, sale de
+     * `sheet.close` del `BrandMessagesProvider`. Solo se lee cuando el aspa se
+     * pinta: un panel con `hideClose` no lo exige.
+     */
     closeLabel?: string;
     /**
      * Oculta el aspa de la esquina. Para un cajón cuyo propio disparador queda

package/dist/_types/molecules/Toast/Toaster.d.ts

@@ -1,17 +1,31 @@
 import { type ToastIntent } from './toast';
 import './Toast.css';
+/**
+ * El cromo de la cola de avisos. Los dos textos son del punto de montaje, no
+ * de ningún aviso concreto: el rótulo de la región donde aterrizan y el aspa
+ * que los cierra. Lo que DICE cada aviso —su título, su descripción, el
+ * rótulo de su acción— lo pasa quien llama a `toast(...)`, y ya no tiene
+ * default castellano.
+ */
+export interface ToasterMessages {
+    /** Nombre accesible de la región donde se apilan los avisos. */
+    container: string;
+    /** Nombre accesible del aspa que cierra un aviso. */
+    close: string;
+}
 export type ToastPosition = 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center';
 export interface ToasterProps {
     /** Esquina de la ventana donde se monta la pila. Default: `bottom-right`. */
     position?: ToastPosition;
     /**
-     * Nombre accesible de la región de notificaciones. Default: «Notificaciones»
-     * (castellano). Una app multiidioma debe pasarlo traducido.
+     * Nombre accesible de la región de notificaciones. **Sin default**: sin él,
+     * sale de `toaster.container` del `BrandMessagesProvider`.
      */
     containerAriaLabel?: string;
     /**
-     * Etiqueta accesible del aspa de cierre. Default: «Cerrar» (castellano).
-     * Una app multiidioma debe pasarla traducida.
+     * Nombre accesible del aspa de cierre. **Sin default**: sin él, sale de
+     * `toaster.close` del `BrandMessagesProvider`. Solo se lee cuando el aspa se
+     * pinta: un `Toaster` con `closeButton={false}` no lo exige.
      */
     closeLabel?: string;
     /** Muestra el aspa de cierre en cada aviso. Default: `true`. */

package/dist/alert.js

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

package/dist/banner.js

@@ -1,39 +1,40 @@
 'use client';
 import './banner.css';
-import { CloseButton as e } from "./close-button.js";
-import { forwardRef as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { CloseButton as t } from "./close-button.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/molecules/Banner/Banner.tsx
-var i = t(function({ variant: t = "info", children: i, actions: a, onDismiss: o, dismissLabel: s = "Descartar aviso", className: c, role: l, "aria-live": u, ...d }, f) {
-	let p = [
+var a = n(function({ variant: n = "info", children: a, actions: o, onDismiss: s, dismissLabel: c, className: l, role: u, "aria-live": d, ...f }, p) {
+	let m = e("banner"), h = [
 		"banner",
-		`banner--${t}`,
-		t === "info" ? "surface-dark" : "",
-		o ? "banner--dismissible" : "",
-		c ?? ""
+		`banner--${n}`,
+		n === "info" ? "surface-dark" : "",
+		s ? "banner--dismissible" : "",
+		l ?? ""
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ r("div", {
-		ref: f,
-		role: l ?? "status",
-		"aria-live": u ?? "polite",
-		className: p,
-		...d,
+	return /* @__PURE__ */ i("div", {
+		ref: p,
+		role: u ?? "status",
+		"aria-live": d ?? "polite",
+		className: h,
+		...f,
 		children: [
-			/* @__PURE__ */ n("div", {
+			/* @__PURE__ */ r("div", {
 				className: "banner__content",
-				children: i
+				children: a
 			}),
-			a && /* @__PURE__ */ n("div", {
+			o && /* @__PURE__ */ r("div", {
 				className: "banner__actions",
-				children: a
+				children: o
 			}),
-			o && /* @__PURE__ */ n(e, {
+			s && /* @__PURE__ */ r(t, {
 				className: "banner__close",
-				label: s,
-				onClick: o
+				label: m("dismiss", c),
+				onClick: s
 			})
 		]
 	});
 });
 //#endregion
-export { i as Banner };
+export { a as Banner };