@studiolxd/brand 45.1.0 → 47.0.0

package/dist/_types/sections/FloatingDock/FloatingDock.d.ts

@@ -1,5 +1,29 @@
 import { type ReactNode } from 'react';
 import './FloatingDock.css';
+/**
+ * El cromo del dock, y **solo el cromo**: el aspa y cómo se lee el contador.
+ *
+ * **Tiene espacio propio y no hereda `modal.close`, a propósito.** El panel del
+ * dock no es un `Modal` y no puede serlo: es un diálogo **no modal**
+ * (`modal={false}`) sin velo, que no atrapa el foco y deja la página viva
+ * detrás, montado por portal **dentro del propio ancla** para heredar por
+ * cascada la superficie donde el consumidor lo haya puesto, anclado a una
+ * esquina de la ventana y con el aspa fuera de la cabecera. El `Modal` del
+ * sistema es lo contrario en las cuatro cosas —velo, foco atrapado, portal en
+ * `document.body`, diálogo centrado—, así que hacerlo pasar por él no era
+ * quitar una clave: era cambiar el componente. La razón es real y de hoy, no
+ * histórica, y por eso el aspa se llama aquí.
+ *
+ * El `label` del lanzador **no está aquí**: nombra lo que abre el dock —«Abrir
+ * el asistente», «Abrir el chat de soporte»— y eso lo sabe el producto. Sigue
+ * siendo prop obligatoria.
+ */
+export interface FloatingDockMessages {
+    /** Nombre accesible del aspa que cierra el panel. */
+    close: string;
+    /** Cómo se lee el contador de novedades. Interpola el número. */
+    badge: (count: number) => string;
+}
 /** Esquina de la ventana a la que se ancla el dock. */
 export type FloatingDockPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
 export interface FloatingDockProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'children'> {
@@ -26,15 +50,21 @@ export interface FloatingDockProps extends Omit<React.ComponentPropsWithoutRef<'
     defaultOpen?: boolean;
     /** Se llama al abrirse y al cerrarse, en controlado y en no controlado. */
     onOpenChange?: (open: boolean) => void;
-    /** `aria-label` del aspa. Default: «Cerrar» (castellano). */
+    /**
+     * `aria-label` del aspa. **Sin default**: sin él, sale de
+     * `floatingDock.close` del `BrandMessagesProvider` — espacio propio, no
+     * `modal.close`: el panel del dock no es un `Modal` (ver
+     * `FloatingDockMessages`).
+     */
     closeLabel?: string;
     /** Novedades sin ver. Con 0 (o sin él) no hay contador. */
     badge?: number;
     /** Tope del contador («99+»). */
     badgeMax?: number;
     /**
-     * Cómo se lee el contador. Default: «N mensajes nuevos» (castellano).
-     * Interpola el número, así que es una función.
+     * Cómo se lee el contador. **Sin default**: sin ella, sale de
+     * `floatingDock.badge` del proveedor. Interpola el número, así que es una
+     * función. Solo se lee cuando hay contador y `badgeLive`.
      */
     badgeLabel?: (count: number) => string;
     /**

package/dist/_types/sections/Sidebar/Sidebar.d.ts

@@ -1,6 +1,20 @@
 import { type ReactNode } from 'react';
 import './Sidebar.css';
 export { useSidebar } from './SidebarContext';
+/**
+ * Lo que la barra dice por su cuenta, y todo es **cromo**: su nombre de región,
+ * el nombre del asa que la ensancha y cómo se lee su ancho. Ninguno depende de
+ * qué haya dentro —eso lo escribe el producto en `children`—, así que los tres
+ * van al catálogo.
+ */
+export interface SidebarMessages {
+    /** Nombre accesible del `aside`. */
+    label: string;
+    /** Nombre accesible del asa de redimensión. */
+    resizer: string;
+    /** Valor hablado del asa: el ancho con su unidad. */
+    resizerValue: (width: number) => string;
+}
 export interface SidebarProps {
     /** Arriba del todo (un `Logo`). */
     logo?: ReactNode;
@@ -9,11 +23,21 @@ export interface SidebarProps {
     /** Pie fijo, fuera del scroll del panel. */
     footer?: ReactNode;
     id?: string;
-    /** Nombre accesible del `aside`. Default: «Barra lateral» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /**
+     * Nombre accesible del `aside`. **Sin default**: sin él, sale de
+     * `sidebar.label` del `BrandMessagesProvider`.
+     */
     label?: string;
-    /** Texto accesible del asa de redimensión. Default: «Ancho de la barra lateral» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /**
+     * Nombre accesible del asa de redimensión. **Sin default**: sale de
+     * `sidebar.resizer`. Solo se lee cuando el asa existe (escritorio, dentro de
+     * un `AppShell`, con la barra no cerrada).
+     */
     resizerLabel?: string;
-    /** Valor hablado del asa: el ancho con su unidad. Default: «N píxeles» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /**
+     * Valor hablado del asa: el ancho con su unidad. **Sin default**: sale de
+     * `sidebar.resizerValue`. Interpola el ancho, así que es una función.
+     */
     resizerValueText?: (width: number) => string;
     /** Fuerza el modo sin `AppShell` (Storybook, pruebas). Con shell, lo decide el shell. */
     mode?: 'open' | 'rail';

package/dist/_types/sections/SiteHeader/SiteHeader.d.ts

@@ -11,11 +11,20 @@ export type SiteHeaderLogoLinkProps = {
 export interface SiteHeaderProps {
     /** Destino del logotipo. */
     logoHref?: string;
-    /** Texto accesible del enlace del logotipo. */
+    /**
+     * Texto accesible del enlace del logotipo. **Sin default**: sin él, sale de
+     * `siteHeader.logo` del `BrandMessagesProvider`.
+     */
     logoLabel?: string;
-    /** aria-label del botón de menú. */
+    /**
+     * aria-label del botón de menú. **Reenvío puro** al `MenuButton`: sin él, el
+     * botón lee `menuButton.open`.
+     */
     menuLabel?: string;
-    /** aria-label del botón de menú cuando está abierto («Cerrar menú»). */
+    /**
+     * aria-label del botón de menú abierto. **Reenvío puro** al `MenuButton`:
+     * sin él, lee `menuButton.close`.
+     */
     menuCloseLabel?: string;
     /** La marca. Por defecto el `Logo` de Studio LXD a `logoSize`; un producto de la suite pone la suya. */
     logo?: ReactNode;
@@ -55,4 +64,14 @@ export interface SiteHeaderProps {
  * El enlace de salto al contenido no va aquí: lo pone `AppRoot`, una vez por
  * documento.
  */
+/**
+ * El único texto propio de la cabecera, y es **cromo**: qué hace el logotipo
+ * («ir al inicio»), no qué marca es. Lo que dice el botón de menú no se repite
+ * aquí —es un reenvío puro al `MenuButton`—, y los enlaces de `actions` y del
+ * panel son **contenido** del producto.
+ */
+export interface SiteHeaderMessages {
+    /** Texto accesible del enlace del logotipo. */
+    logo: string;
+}
 export declare function SiteHeader({ logoHref, logoLabel, menuLabel, menuCloseLabel, logoSize, logo, menuButtonSize, renderLogoLink, width, open, onOpenChange, children, settings, panelId, actions, language, }: SiteHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/SiteShell/SiteShell.d.ts

@@ -17,10 +17,16 @@ export interface SiteShellProps {
  * Para las aplicaciones con barra y sidebar está `AppShell`.
  */
 /**
- * Reenvía el `ref` al nodo raíz (`.site-shell`): un `Modal`/`Sheet` abierto
- * desde dentro necesita apuntar su `container` aquí para heredar los tokens
- * de la superficie pública — el portal por defecto monta en `document.body`,
- * que no es descendiente de `.site-shell` (a diferencia del tema oscuro, que
- * se activa en `<html>` y sí llega a cualquier portal sin configuración).
+ * **Los portales que se abran dentro heredan la superficie.** El shell publica
+ * su nodo raíz por `PortalContainerContext`, y todo componente con portal
+ * —`Select`, `MultiSelect`, `DatePicker`, `Popover`, `Tooltip`, `Menu`,
+ * `Modal`, `Sheet`, `Toaster`…— lo toma como destino cuando no recibe
+ * `container`. Sin eso, la lista de un `Select` montaba en `document.body`,
+ * fuera de `.site-shell`, y se abría a la talla de aplicación mientras su
+ * campo iba a la pública. No hay nada que pasar en cada uso; la prop
+ * `container` sigue ahí para quien quiera otro destino y gana siempre.
+ *
+ * Reenvía además el `ref` al nodo raíz (`.site-shell`), para quien necesite
+ * apuntar ahí a mano.
  */
 export declare const SiteShell: import("react").ForwardRefExoticComponent<SiteShellProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -29,7 +29,10 @@ export interface OnboardingShellProps {
      * @deprecated Usa `preferences`.
      */
     switchers?: ReactNode;
-    /** Nombre accesible de la banda de preferencias. Default: «Preferencias» (castellano). */
+    /**
+     * Nombre accesible de la banda de preferencias. **Reenvío puro** al
+     * `PublicPageShell`: sin él, la banda lee `publicPageShell.preferences`.
+     */
     preferencesLabel?: string;
     /**
      * El progreso: un `Stepper`. La ranura se monta siempre; es el `Stepper`
@@ -47,7 +50,11 @@ export interface OnboardingShellProps {
      * escritorio, y debajo y centrada en móvil.
      */
     exitAction?: ReactNode;
-    /** Nombre accesible del grupo de acciones del pie. Default: «Acciones del paso» (castellano). */
+    /**
+     * Nombre accesible del grupo de acciones del pie. **Sin default**: sin él,
+     * sale de `onboardingShell.actions` del `BrandMessagesProvider`. Solo se lee
+     * cuando el paso trae alguna acción.
+     */
     actionsLabel?: string;
     /** `id` del `main` (`main-content` por defecto, destino del `SkipLink`). */
     id?: string;
@@ -101,4 +108,14 @@ export interface OnboardingShellProps {
  * 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.
  */
+/**
+ * El único texto propio de la plantilla, y es **cromo**: el nombre del grupo de
+ * acciones del pie. Lo que digan los botones —«Continuar», «Atrás», «Omitir por
+ * ahora»— es **contenido** y viene en las ranuras. El nombre de la banda de
+ * preferencias tampoco está aquí: es un reenvío puro al `PublicPageShell`.
+ */
+export interface OnboardingShellMessages {
+    /** Nombre accesible del grupo de acciones del pie. */
+    actions: string;
+}
 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

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type ContainerSpace, type ContainerWidth } from '../../atoms/Container/Container';
 import './PublicPageShell.css';
 export interface PublicPageShellProps {
     /** El contenido de la página: lo que va dentro del `main`. */
@@ -19,8 +20,31 @@ export interface PublicPageShellProps {
      * pie, igual que `header` y `footer`.
      */
     preferences?: ReactNode;
-    /** Nombre accesible de la banda de preferencias. Default: «Preferencias» (castellano). */
+    /**
+     * Nombre accesible de la banda de preferencias. **Sin default**: sin él,
+     * sale de `publicPageShell.preferences` del `BrandMessagesProvider`. Solo se
+     * lee cuando hay banda.
+     */
     preferencesLabel?: string;
+    /**
+     * Medida del contenido del `main`, tal cual la de `Container`. Por defecto
+     * `'xl'` (1280px), el ancho de las páginas públicas; `'full'` para que el
+     * contenido llegue tan lejos como la banda, que es lo que necesita una
+     * portada que abre con un `Hero` de lado a lado.
+     */
+    mainWidth?: ContainerWidth;
+    /**
+     * Aire vertical del `main`. Por defecto `'xl'`, el de una página pública
+     * corriente; `'none'` cuando lo que va dentro son secciones que ya traen su
+     * propio aire (ver `Container` § «Las secciones traen su aire»).
+     */
+    mainSpace?: ContainerSpace;
+    /**
+     * Quita el aire lateral del `main`, para contenido que debe tocar el borde
+     * de la pantalla. Por defecto `false`. Va con `mainWidth="full"`: sin él, el
+     * contenido seguiría acotado y solo se perdería el margen.
+     */
+    mainFlush?: boolean;
     /** `id` del `main` (`main-content` por defecto, destino del `SkipLink`). */
     id?: string;
     /**
@@ -50,10 +74,22 @@ export interface PublicPageShellProps {
  * 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.
+ * pública. Apuntarlo al `main` no serviría: el `main` es un `Container` —por
+ * defecto 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.
+ *
+ * **El `main` lleva los mismos mandos que un `Container`** (`mainWidth`,
+ * `mainSpace`, `mainFlush`), con los defaults de siempre. Es lo que permite que
+ * una portada abra con un `Hero` de lado a lado sin salirse del marco.
  */
+/**
+ * El único texto del marco, y es **cromo**: el nombre de la banda donde viven
+ * el idioma y el tema. Lo que se ponga dentro es **contenido**.
+ */
+export interface PublicPageShellMessages {
+    /** Nombre accesible de la banda de preferencias. */
+    preferences: string;
+}
 export declare const PublicPageShell: import("react").ForwardRefExoticComponent<PublicPageShellProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/app-header.js

@@ -5,7 +5,7 @@ import { t } from "./_shared/appshellcontext.js";
 import { useContext as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/sections/AppHeader/AppHeader.tsx
-function o({ start: o, notifications: s, end: c, menuLabel: l = "Menú de navegación", menuCloseLabel: u, sidebarId: d }) {
+function o({ start: o, notifications: s, end: c, menuLabel: l, menuCloseLabel: u, sidebarId: d }) {
 	let f = n(t), [p, m] = r(!1), h = f ? f.sidebar === "open" : p;
 	return /* @__PURE__ */ a("header", {
 		className: "app-header",

package/dist/app-launcher.js

@@ -1,119 +1,129 @@
 'use client';
 import './app-launcher.css';
-import { Icon as e } from "./icon.js";
-import { Tag as t } from "./tag.js";
-import { Modal as n } from "./modal.js";
-import { useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Popover as s } from "@base-ui/react/popover";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { n } from "./_shared/portal-container.js";
+import { Tag as r } from "./tag.js";
+import { Modal as i } from "./modal.js";
+import { useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Popover as l } from "@base-ui/react/popover";
 //#region src/stories/molecules/AppLauncher/AppLauncher.tsx
-function c({ app: e, isCurrent: n, newLabel: r }) {
-	return /* @__PURE__ */ o("a", {
-		href: e.url,
+function u({ app: t, isCurrent: n, newLabel: i }) {
+	let a = e("appLauncher");
+	return /* @__PURE__ */ c("a", {
+		href: t.url,
 		className: `app-launcher__tile${n ? " app-launcher__tile--active" : ""}`,
 		"aria-current": n ? "page" : void 0,
-		children: [/* @__PURE__ */ a("span", {
+		children: [/* @__PURE__ */ s("span", {
 			className: "app-launcher__tile-name",
-			children: e.name
-		}), e.isNew && /* @__PURE__ */ a(t, {
+			children: t.name
+		}), t.isNew && /* @__PURE__ */ s(r, {
 			variant: "info",
 			className: "app-launcher__tile-badge",
-			children: r
+			children: a("new", i)
 		})]
 	});
 }
-function l({ apps: e, currentAppId: t, newLabel: n }) {
-	return /* @__PURE__ */ a("ul", {
+function d({ apps: e, currentAppId: t, newLabel: n }) {
+	return /* @__PURE__ */ s("ul", {
 		className: "app-launcher__grid",
 		role: "list",
-		children: e.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(c, {
+		children: e.map((e) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(u, {
 			app: e,
 			isCurrent: e.id === t,
 			newLabel: n
 		}) }, e.id))
 	});
 }
-function u({ apps: t, labels: n, currentAppId: r, open: i, defaultOpen: c, onOpenChange: u }) {
-	return /* @__PURE__ */ o(s.Root, {
-		open: i,
-		defaultOpen: c,
-		onOpenChange: (e) => u?.(e),
-		children: [/* @__PURE__ */ a(s.Trigger, { render: n.trigger ? /* @__PURE__ */ o("button", {
+function f({ apps: r, labels: i, currentAppId: a, open: o, defaultOpen: u, onOpenChange: f }) {
+	let p = e("appLauncher"), m = n(void 0);
+	return /* @__PURE__ */ c(l.Root, {
+		open: o,
+		defaultOpen: u,
+		onOpenChange: (e) => f?.(e),
+		children: [/* @__PURE__ */ s(l.Trigger, { render: i.trigger ? /* @__PURE__ */ c("button", {
 			type: "button",
 			className: "app-launcher__trigger app-launcher__trigger--label",
-			children: [/* @__PURE__ */ a(e, {
+			children: [/* @__PURE__ */ s(t, {
 				name: "grid",
 				size: "md"
-			}), /* @__PURE__ */ a("span", {
+			}), /* @__PURE__ */ s("span", {
 				className: "app-launcher__trigger-label",
-				children: n.trigger
+				children: i.trigger
 			})]
-		}) : /* @__PURE__ */ a("button", {
+		}) : /* @__PURE__ */ s("button", {
 			type: "button",
 			className: "app-launcher__trigger",
-			"aria-label": n.open,
-			children: /* @__PURE__ */ a(e, {
+			"aria-label": p("open", i.open),
+			children: /* @__PURE__ */ s(t, {
 				name: "grid",
 				size: "md"
 			})
-		}) }), /* @__PURE__ */ a(s.Portal, { children: /* @__PURE__ */ a(s.Positioner, {
-			className: "app-launcher__positioner",
-			sideOffset: 4,
-			align: "end",
-			children: /* @__PURE__ */ a(s.Popup, {
-				className: "app-launcher__content",
-				children: /* @__PURE__ */ a(l, {
-					apps: t,
-					currentAppId: r,
-					newLabel: n.new
+		}) }), /* @__PURE__ */ s(l.Portal, {
+			container: m,
+			children: /* @__PURE__ */ s(l.Positioner, {
+				className: "app-launcher__positioner",
+				sideOffset: 4,
+				align: "end",
+				children: /* @__PURE__ */ s(l.Popup, {
+					className: "app-launcher__content",
+					children: /* @__PURE__ */ s(d, {
+						apps: r,
+						currentAppId: a,
+						newLabel: i.new
+					})
 				})
 			})
-		}) })]
+		})]
 	});
 }
-function d(e, t, n) {
-	let [i, a] = r(t ?? !1);
-	return [e ?? i, (t) => {
-		e === void 0 && a(t), n?.(t);
+function p(e, t, n) {
+	let [r, i] = a(t ?? !1);
+	return [e ?? r, (t) => {
+		e === void 0 && i(t), n?.(t);
 	}];
 }
-function f({ apps: t, labels: r, currentAppId: s, open: c, defaultOpen: u, onOpenChange: f }) {
-	let [p, m] = d(c, u, f);
-	return /* @__PURE__ */ o(i, { children: [r.trigger ? /* @__PURE__ */ o("button", {
+function m({ apps: n, labels: r, currentAppId: a, open: l, defaultOpen: u, onOpenChange: f }) {
+	let m = e("appLauncher"), [h, g] = p(l, u, f);
+	return /* @__PURE__ */ c(o, { children: [r.trigger ? /* @__PURE__ */ c("button", {
 		type: "button",
 		className: "app-launcher__trigger app-launcher__trigger--label",
 		"aria-haspopup": "dialog",
-		onClick: () => m(!0),
-		children: [/* @__PURE__ */ a(e, {
+		onClick: () => g(!0),
+		children: [/* @__PURE__ */ s(t, {
 			name: "grid",
 			size: "md"
-		}), /* @__PURE__ */ a("span", {
+		}), /* @__PURE__ */ s("span", {
 			className: "app-launcher__trigger-label",
 			children: r.trigger
 		})]
-	}) : /* @__PURE__ */ a("button", {
+	}) : /* @__PURE__ */ s("button", {
 		type: "button",
 		className: "app-launcher__trigger",
-		"aria-label": r.open,
+		"aria-label": m("open", r.open),
 		"aria-haspopup": "dialog",
-		onClick: () => m(!0),
-		children: /* @__PURE__ */ a(e, {
+		onClick: () => g(!0),
+		children: /* @__PURE__ */ s(t, {
 			name: "grid",
 			size: "md"
 		})
-	}), /* @__PURE__ */ a(n, {
-		open: p,
-		onClose: () => m(!1),
-		title: r.title ?? "Aplicaciones",
-		children: /* @__PURE__ */ a(l, {
-			apps: t,
-			currentAppId: s,
+	}), /* @__PURE__ */ s(i, {
+		open: h,
+		onClose: () => g(!1),
+		title: m("title", r.title),
+		children: /* @__PURE__ */ s(d, {
+			apps: n,
+			currentAppId: a,
 			newLabel: r.new
 		})
 	})] });
 }
-function p({ presentation: e = "modal", ...t }) {
-	return a(e === "popover" ? u : f, { ...t });
+function h({ presentation: e = "modal", labels: t = {}, ...n }) {
+	return s(e === "popover" ? f : m, {
+		labels: t,
+		...n
+	});
 }
 //#endregion
-export { p as AppLauncher };
+export { h as AppLauncher };

package/dist/app-root.js

@@ -1,11 +1,13 @@
-import { SkipLink as e } from "./skip-link.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+'use client';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { SkipLink as t } from "./skip-link.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/sections/AppRoot/AppRoot.tsx
-function i({ skipLabel: i = "Saltar al contenido principal", skipHref: a = "#main-content", children: o }) {
-	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n(e, {
-		href: a,
-		children: i
-	}), o] });
+function a({ skipLabel: a, skipHref: o = "#main-content", children: s }) {
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(t, {
+		href: o,
+		children: e("appRoot")("skipToContent", a)
+	}), s] });
 }
 //#endregion
-export { i as AppRoot };
+export { a as AppRoot };

package/dist/app-shell.js

@@ -1,78 +1,79 @@
 'use client';
 import './app-shell.css';
-import { SkipLink as e } from "./skip-link.js";
-import { TooltipProvider as t } from "./tooltip.js";
-import { t as n } from "./_shared/css-properties.js";
-import { n as r, t as i } from "./_shared/appshellcontext.js";
-import { useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { SkipLink as t } from "./skip-link.js";
+import { TooltipProvider as n } from "./tooltip.js";
+import { t as r } from "./_shared/css-properties.js";
+import { n as i, t as a } from "./_shared/appshellcontext.js";
+import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/stories/sections/AppShell/AppShell.tsx
-var d = "(min-width: 1024px)";
-function f() {
-	let [e, t] = c(() => typeof window > "u" ? !0 : window.matchMedia(d).matches);
-	return o(() => {
-		let e = window.matchMedia(d), n = () => t(e.matches);
+var f = "(min-width: 1024px)";
+function p() {
+	let [e, t] = l(() => typeof window > "u" ? !0 : window.matchMedia(f).matches);
+	return s(() => {
+		let e = window.matchMedia(f), n = () => t(e.matches);
 		return n(), e.addEventListener("change", n), () => e.removeEventListener("change", n);
 	}, []), e;
 }
-function p({ header: r, sidebar: d, children: p, defaultSidebar: m = "open", sidebarState: h, onSidebarChange: g, defaultSidebarWidth: _, onSidebarWidthChange: v, skipLabel: y = "Saltar al contenido principal" }) {
-	let b = f(), [x, S] = c(m), [C, w] = c(!1), [T, E] = c(_), D = b ? h ?? x : C ? "open" : "closed", O = a((e) => {
-		b ? (S(e), g?.(e)) : w(e === "open");
-	}, [b, g]), k = a(() => O(D === "open" ? "closed" : "open"), [O, D]), A = a(() => O("closed"), [O]), j = a((e) => {
-		E(e), v?.(e);
-	}, [v]);
-	o(() => {
-		if (b || !C) return;
+function m({ header: i, sidebar: f, children: m, defaultSidebar: h = "open", sidebarState: g, onSidebarChange: _, defaultSidebarWidth: v, onSidebarWidthChange: y, skipLabel: b }) {
+	let x = e("appShell"), S = p(), [C, w] = l(h), [T, E] = l(!1), [D, O] = l(v), k = S ? g ?? C : T ? "open" : "closed", A = o((e) => {
+		S ? (w(e), _?.(e)) : E(e === "open");
+	}, [S, _]), j = o(() => A(k === "open" ? "closed" : "open"), [A, k]), M = o(() => A("closed"), [A]), N = o((e) => {
+		O(e), y?.(e);
+	}, [y]);
+	s(() => {
+		if (S || !T) return;
 		let e = (e) => {
-			e.key === "Escape" && w(!1);
+			e.key === "Escape" && E(!1);
 		};
 		document.addEventListener("keydown", e);
 		let t = document.body.style.overflow;
 		return document.body.style.overflow = "hidden", () => {
 			document.removeEventListener("keydown", e), document.body.style.overflow = t;
 		};
-	}, [b, C]);
-	let M = s(() => ({
-		sidebar: D,
-		setSidebar: O,
-		sidebarWidth: T ?? 0,
-		setSidebarWidth: j,
-		toggleSidebar: k,
-		closeSidebar: A,
-		isDesktop: b
+	}, [S, T]);
+	let P = c(() => ({
+		sidebar: k,
+		setSidebar: A,
+		sidebarWidth: D ?? 0,
+		setSidebarWidth: N,
+		toggleSidebar: j,
+		closeSidebar: M,
+		isDesktop: S
 	}), [
-		D,
-		O,
-		T,
-		j,
 		k,
 		A,
-		b
-	]), N = n({ "--app-shell-sidebar-width": T ? `${T}px` : void 0 }), P = !b && C;
-	return /* @__PURE__ */ l(i.Provider, {
-		value: M,
-		children: /* @__PURE__ */ u(t, { children: [/* @__PURE__ */ l(e, {
+		D,
+		N,
+		j,
+		M,
+		S
+	]), F = r({ "--app-shell-sidebar-width": D ? `${D}px` : void 0 }), I = !S && T;
+	return /* @__PURE__ */ u(a.Provider, {
+		value: P,
+		children: /* @__PURE__ */ d(n, { children: [/* @__PURE__ */ u(t, {
 			href: "#main-content",
-			children: y
-		}), /* @__PURE__ */ u("div", {
-			ref: N,
+			children: x("skipToContent", b)
+		}), /* @__PURE__ */ d("div", {
+			ref: F,
 			className: "app-shell",
-			"data-sidebar": D,
-			children: [r, /* @__PURE__ */ u("div", {
+			"data-sidebar": k,
+			children: [i, /* @__PURE__ */ d("div", {
 				className: "app-shell__body",
 				children: [
-					d,
-					P && /* @__PURE__ */ l("div", {
+					f,
+					I && /* @__PURE__ */ u("div", {
 						className: "app-shell__backdrop",
-						onClick: A,
+						onClick: M,
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ l("main", {
+					/* @__PURE__ */ u("main", {
 						id: "main-content",
 						tabIndex: -1,
 						className: "app-shell__content",
-						inert: P || void 0,
-						children: p
+						inert: I || void 0,
+						children: m
 					})
 				]
 			})]
@@ -80,4 +81,4 @@ function p({ header: r, sidebar: d, children: p, defaultSidebar: m = "open", sid
 	});
 }
 //#endregion
-export { p as AppShell, r as useAppShell };
+export { m as AppShell, i as useAppShell };