@studiolxd/brand 38.12.4

package/dist/_types/constants/css-properties.d.ts

@@ -0,0 +1,23 @@
+type CssProperties = Record<string, string | undefined>;
+/**
+ * Escribe propiedades CSS sobre un elemento por el **CSSOM**, no por el
+ * atributo `style`.
+ *
+ * Una app servida con `style-src 'self'` (sin `style-src-attr
+ * 'unsafe-inline'`) descarta en silencio —sin violación en consola— todo
+ * atributo `style` que venga en el HTML, y también `setAttribute('style', …)`.
+ * Lo que NO bloquea es `el.style.setProperty(…)`, que es lo que hace este
+ * `ref`.
+ *
+ * Por eso solo vale para lo que se pinta **en cliente**: un popup en portal,
+ * una capa que aparece al interactuar, una medida que el propio navegador
+ * calcula. Lo que se ve en el primer render del servidor no puede depender de
+ * esto —llegaría con el valor por defecto de la hoja y saltaría al hidratar—:
+ * ahí la respuesta es un `data-*` con su regla, o un atributo de presentación
+ * de SVG.
+ *
+ * Los nombres van en la sintaxis CSS (`min-width`, `--toast-gap`), no en
+ * camelCase. Un valor `undefined` retira la propiedad.
+ */
+export declare function useCssProperties(properties: CssProperties): (element: HTMLElement | SVGElement | null) => void;
+export {};

package/dist/_types/constants/env.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `process.env.NODE_ENV` sin depender de los tipos de `@types/node`: la
+ * librería se distribuye para consumidores que no siempre los tienen en su
+ * propio `tsconfig`, así que se lee a través de `globalThis` en vez de
+ * asumir el global ambiental `process`.
+ */
+export declare function isDevelopment(): boolean;

package/dist/_types/constants/field-labels.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Si los campos de este trozo de árbol tienen que esconder su etiqueta a la
+ * vista (conservándola para el lector de pantalla). Lo reparte `FieldRow`
+ * cuando la fila no es la primera de la lista: las etiquetas se ven una vez,
+ * arriba, pero cada campo sigue teniendo su nombre accesible en todas.
+ *
+ * `undefined` es «nadie ha dicho nada»: manda el default del campo.
+ */
+export declare const LabelHiddenContext: import("react").Context<boolean | undefined>;
+/**
+ * La talla de etiqueta que le toca a un campo: lo que pide el consumidor por
+ * `labelHidden`, y si no lo dice, lo que reparta el contexto. Mismo patrón que
+ * `useFormSize`: la prop del campo gana siempre al contexto.
+ */
+export declare function useLabelHidden(labelHidden?: boolean, fallback?: boolean): boolean;

package/dist/_types/constants/form-size.d.ts

@@ -0,0 +1,8 @@
+export type FormSize = 'sm' | 'md' | 'lg';
+/**
+ * La talla que un `Form` reparte a sus campos y botones. Los componentes con
+ * `size` la toman de aquí cuando el consumidor no se la pasa; sin `Form` (o
+ * sin `size` en él) vale `md`.
+ */
+export declare const FormSizeContext: import("react").Context<FormSize | undefined>;
+export declare function useFormSize(size?: FormSize): FormSize;

package/dist/_types/data/home.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Datos de contenido de la página Home.
+ * Importado tanto por Home.tsx como por las stories de cada sección.
+ */
+export declare const reviews: {
+    id: string;
+    photo: string;
+    author: string;
+    role: string;
+    quote: string;
+}[];
+export declare const projects: ({
+    id: string;
+    category: string;
+    tagVariant: "accent-1";
+    photo: string;
+    title: string;
+    description: string;
+} | {
+    id: string;
+    category: string;
+    tagVariant: "accent-2";
+    photo: string;
+    title: string;
+    description: string;
+} | {
+    id: string;
+    category: string;
+    tagVariant: "support-1";
+    photo: string;
+    title: string;
+    description: string;
+} | {
+    id: string;
+    category: string;
+    tagVariant: "support-2";
+    photo: string;
+    title: string;
+    description: string;
+} | {
+    id: string;
+    category: string;
+    tagVariant: "primary";
+    photo: string;
+    title: string;
+    description: string;
+})[];
+export declare const clients: {
+    id: string;
+    name: string;
+    logo: string;
+}[];
+export declare const steps: {
+    text: string;
+}[];
+export declare const solutionItems: ({
+    href: string;
+    color: "accent-1";
+    title: string;
+    description: string;
+    ctaLabel: string;
+} | {
+    href: string;
+    color: "accent-2";
+    title: string;
+    description: string;
+    ctaLabel: string;
+})[];
+export declare const privacyLabel: import("react/jsx-runtime").JSX.Element;
+export declare const contactArgs: {
+    title: string;
+    form: {
+        privacyLabel: import("react/jsx-runtime").JSX.Element;
+        emailPlaceholder: string;
+        messagePlaceholder: string;
+        buttonLabel: string;
+        submittingLabel: string;
+        successMessage: string;
+    };
+    whatsappTitle: string;
+    whatsappLabel: string;
+    whatsappHref: string;
+};

package/dist/_types/email/Email.d.ts

@@ -0,0 +1,6 @@
+export { EmailLayout } from './EmailLayout';
+export type { EmailLayoutProps, EmailOptOut, EmailOptOutAccount, EmailOptOutGuest, } from './EmailLayout';
+export { EmailButton, EmailDivider, EmailHeading, EmailLink, EmailList, EmailListItem, EmailNote, EmailQuote, EmailTag, EmailText, } from './EmailPrimitives';
+export type { EmailButtonProps, EmailDividerProps, EmailHeadingProps, EmailLinkProps, EmailListItemProps, EmailListProps, EmailNoteProps, EmailQuoteProps, EmailTagProps, EmailTextProps, } from './EmailPrimitives';
+export { emailAssetsBaseUrl, emailFontFamily, emailFontFilename, emailLogo, emailMaxWidth, emailPalette, emailStyleSheet, emailStyles, emailTones, } from './emailTheme';
+export type { EmailTone } from './emailTheme';

package/dist/_types/email/EmailLayout.d.ts

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react';
+interface EmailOptOutBase {
+    /** Baja directa, de un clic, de la categoría de aviso de este correo. */
+    unsubscribeUrl: string;
+    /** Texto del enlace de baja. */
+    unsubscribeLabel?: string;
+}
+/**
+ * El pie de quien **tiene cuenta** en la suite: puede darse de baja y, si el
+ * producto tiene la pantalla, elegir categoría a categoría.
+ */
+export interface EmailOptOutAccount extends EmailOptOutBase {
+    /**
+     * Pantalla donde elegir categoría a categoría, para quien quiera conservar
+     * algunas.
+     *
+     * Opcional a propósito: las apps que mandaban correo antes de que existiera
+     * el paquete solo construyen un enlace de baja, sin pantalla de preferencias
+     * detrás. Omitirlo deja el pie de un solo enlace en vez de obligar a cada
+     * llamada a inventarse una URL que no tiene.
+     */
+    preferencesUrl?: string;
+    /** Frase que precede al enlace en el pie de un solo enlace. Por defecto, en castellano. */
+    manageLabel?: string;
+    /** Texto entre los dos enlaces del pie completo. Por defecto, en castellano. */
+    manageBeforeLabel?: string;
+    /** Texto del enlace a preferencias. Por defecto, en castellano. */
+    managePreferencesLabel?: string;
+    /** Texto tras el enlace a preferencias. Por defecto, en castellano. */
+    manageAfterLabel?: string;
+    reasonLabel?: never;
+}
+/**
+ * El pie de quien **no tiene cuenta**: el invitado a una revisión, el que
+ * recibe el correo por una dirección suelta. Solo la baja.
+ *
+ * No es el mismo pie con una URL de menos. Al destinatario sin cuenta hay que
+ * decirle **por qué** le llega el correo —no se registró en nada— y no se le
+ * puede ofrecer «gestionar preferencias»: esa pantalla vive tras la sesión del
+ * hub y no puede abrirla. Por eso el tipo prohíbe `preferencesUrl` en vez de
+ * confiar en que nadie la pase.
+ */
+export interface EmailOptOutGuest extends EmailOptOutBase {
+    /**
+     * La frase que explica por qué recibe este correo. **Obligatoria y sin
+     * default castellano**: el motivo lo sabe el producto que manda el correo,
+     * no el DS, y sin él la baja llega sin contexto a quien nunca se dio de alta.
+     */
+    reasonLabel: string;
+    /**
+     * Texto del enlace de baja. **Obligatorio aquí, y sin default**: en este pie
+     * el enlace es una frase entera que cierra la anterior, así que ningún
+     * default del DS podría encajar con el motivo que escribe el consumidor.
+     */
+    unsubscribeLabel: string;
+    preferencesUrl?: never;
+    manageLabel?: never;
+    manageBeforeLabel?: never;
+    managePreferencesLabel?: never;
+    manageAfterLabel?: never;
+}
+/**
+ * El pie de baja, en sus dos formas: la de quien tiene cuenta
+ * (`EmailOptOutAccount`) y la de quien no (`EmailOptOutGuest`). Se distinguen
+ * por `reasonLabel`, que solo lleva la segunda.
+ */
+export type EmailOptOut = EmailOptOutAccount | EmailOptOutGuest;
+export interface EmailLayoutProps {
+    /** La línea que el cliente enseña junto al asunto en la bandeja. */
+    preview: string;
+    /** Quién manda. Es el texto alternativo del logotipo si no se da otro. */
+    appName: string;
+    /** Idioma del documento. Por defecto, castellano. */
+    locale?: string;
+    /**
+     * De dónde cuelgan el logotipo y la fuente web.
+     *
+     * El valor por defecto es `https://slxd.app/brand/email`, no una constante
+     * escondida: un consumidor que sirva los assets en otro sitio lo cambia aquí
+     * sin tocar el DS. Las dos URL se construyen sobre esta base — ver la nota de
+     * `emailLogo.filename` y `emailFontFilename` para saber qué hay que subir.
+     */
+    assetsBaseUrl?: string;
+    /**
+     * Texto alternativo del logotipo. Por defecto, `appName`.
+     *
+     * Muchos clientes bloquean las imágenes de serie: sin esto, la cabecera del
+     * correo sale en blanco y no se sabe quién escribe.
+     */
+    logoAlt?: string;
+    /** Omitir en el correo transaccional que no pertenece a ninguna categoría. */
+    optOut?: EmailOptOut;
+    children: ReactNode;
+}
+export declare function EmailLayout({ preview, appName, locale, assetsBaseUrl, logoAlt, optOut, children, }: EmailLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/_types/email/EmailPreview.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from 'react';
+export interface EmailPreviewProps {
+    /** El correo: un `EmailLayout` con su contenido. */
+    children: ReactElement;
+}
+export declare function EmailPreview({ children }: EmailPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/email/EmailPrimitives.d.ts

@@ -0,0 +1,164 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type EmailTone } from './emailTheme';
+export interface EmailHeadingProps {
+    children: ReactNode;
+    /**
+     * `1` (por defecto) es el título del mensaje, uno por correo. `2` es el
+     * título de un bloque dentro del cuerpo — «Riesgos», «Requisitos», «También
+     * han encajado»— para un correo que tiene demasiado que decir de un tirón.
+     *
+     * Son dos escalones del mismo componente y no dos componentes, porque es lo
+     * que son: un título más pequeño. El de bloque es **dos peldaños** más bajo y
+     * lleva aire por encima, que es lo que hace de él un corte.
+     */
+    level?: 1 | 2;
+    style?: CSSProperties;
+}
+/**
+ * El título del mensaje y, en `level={2}`, el de cada bloque del cuerpo.
+ *
+ * Un correo es un documento suelto: su título va como `<h1>`, y los bloques que
+ * lo dividen como `<h2>`. Lo que **no** es un título de bloque es una versalita
+ * gris a 12px: eso es lo que se inventó `TenderBatchEmail` por su cuenta, y el
+ * sistema no tiene rol de versalita ni se le añade uno para el correo.
+ */
+export declare function EmailHeading({ children, level, style }: EmailHeadingProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailTextProps {
+    children: ReactNode;
+    /**
+     * La frase que resume el correo antes de entrar en el detalle: sube al peso
+     * de énfasis del sistema, sin cambiar tamaño ni tinta. Para entonar un
+     * párrafo, no para titular un bloque — eso es `EmailSectionTitle`.
+     */
+    emphasis?: boolean;
+    style?: CSSProperties;
+}
+/** Un párrafo del cuerpo del correo. */
+export declare function EmailText({ children, emphasis, style }: EmailTextProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailListProps {
+    /** Los `EmailListItem`. */
+    children: ReactNode;
+    /** `true` para una lista numerada (`<ol>`): pasos, un orden que significa. */
+    ordered?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Una lista del cuerpo: riesgos, requisitos, lo que cambió.
+ *
+ * Es un `<ul>`/`<ol>` de verdad y no párrafos con un bolo delante —que es como
+ * la escribían las apps—: el bolo escrito a mano deja al lector de pantalla sin
+ * saber cuántos elementos hay ni dónde acaban, y el sangrado de la segunda
+ * línea lo tiene que fingir cada plantilla.
+ */
+export declare function EmailList({ children, ordered, style }: EmailListProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailListItemProps {
+    children: ReactNode;
+    style?: CSSProperties;
+}
+/** Un elemento de `EmailList`. */
+export declare function EmailListItem({ children, style }: EmailListItemProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailQuoteProps {
+    children: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Palabras que no son nuestras, con una barra al lado: lo que escribió quien
+ * denunció un contenido, el motivo con el que se rechazó algo.
+ *
+ * No lleva tono. Citar no es avisar: el color diría algo sobre lo citado que el
+ * correo no está diciendo. Para avisar está `EmailCallout`.
+ */
+export declare function EmailQuote({ children, style }: EmailQuoteProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailTagProps {
+    children: ReactNode;
+    /**
+     * El veredicto: `success`, `warning` o `error`. **Obligatorio y sin valor por
+     * defecto**: una etiqueta de estado sin estado no significa nada, y no hay un
+     * tono neutro al que caer porque ningún correo de la suite lo pide todavía.
+     */
+    tone: EmailTone;
+    style?: CSSProperties;
+}
+/**
+ * El veredicto como pastilla: «Validado con avisos», «Validado», «Rechazado».
+ *
+ * Es lo que hoy pinta a mano el correo de validación de `lmsmarketplace`, con
+ * sus tres hexes copiados —que son exactamente los del sistema—.
+ *
+ * Acompaña a una frase, no la sustituye — el color va antes que la palabra para
+ * quien mira por encima, pero el correo tiene que leerse igual sin él, porque
+ * hay clientes que se comen los fondos.
+ *
+ * Va dentro de un `EmailText` o suelta sobre su propia línea; no tiene margen
+ * propio, lo pone el párrafo que la contiene.
+ */
+export declare function EmailTag({ children, tone, style }: EmailTagProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailDividerProps {
+    style?: CSSProperties;
+}
+/**
+ * La línea que parte el correo en dos: lo que se cuenta con detalle y lo que
+ * solo se lista, el mensaje y su pie.
+ *
+ * `border: 0` antes del `border-top` no es de más: el `<hr>` trae de serie un
+ * borde en relieve por los cuatro lados que los clientes heredan tal cual.
+ */
+export declare function EmailDivider({ style }: EmailDividerProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailNoteProps {
+    children: ReactNode;
+    /**
+     * `muted` (por defecto) para una nota dentro del recuadro, en tinta
+     * secundaria. `plain` para una que va FUERA, sobre el fondo de la página:
+     * ahí el gris se lee como deshabilitado y no como secundario.
+     */
+    tone?: 'muted' | 'plain';
+    style?: CSSProperties;
+}
+/** Letra menor: descargos, avisos de caducidad, pie del mensaje. */
+export declare function EmailNote({ children, tone, style }: EmailNoteProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailLinkProps {
+    href: string;
+    children: ReactNode;
+    style?: CSSProperties;
+}
+/** Un enlace dentro del texto. */
+export declare function EmailLink({ href, children, style }: EmailLinkProps): import("react/jsx-runtime").JSX.Element;
+export interface EmailButtonProps {
+    href: string;
+    children: ReactNode;
+    /**
+     * La frase que presenta el enlace de respaldo, p. ej. «O copia y pega esta
+     * dirección en el navegador:». La dirección se pinta debajo, en su propia
+     * línea, así que la frase se escribe con su puntuación.
+     *
+     * **Obligatoria, y sin valor por defecto** — la única prop de texto del DS
+     * que no lo tiene. Es deliberado por partida doble: el correo vive en seis
+     * idiomas que conoce `mailer` y no el DS, y hacerla obligatoria es lo que
+     * garantiza que ninguna plantilla se deje el respaldo. Un botón sin él es
+     * un correo sin plan B.
+     */
+    fallbackLabel: string;
+    style?: CSSProperties;
+}
+/**
+ * La acción del correo: el par lavanda/prusia de `Button primary`, a ancho
+ * completo, **con la misma dirección en texto justo debajo**.
+ *
+ * Las dos piezas son un solo componente a propósito. Hay clientes que
+ * destrozan los botones, y la gente reenvía correos y los abre en otro
+ * dispositivo: el enlace en texto es el plan B, y un plan B que cada plantilla
+ * tuviera que acordarse de añadir no lo sería.
+ *
+ * La dirección va como texto plano, no dentro de un `<a>`: lo que se pide de
+ * ella es leerla y copiarla, y así no hay enlace que un cliente pueda vaciar
+ * de estilo o quitar. Los que autoenlazan lo harán solos.
+ *
+ * Y va en su **propia línea**, bajo la frase que la presenta: arrancando a
+ * media línea, una dirección larga entraba partida desde el primer renglón y
+ * costaba encontrarle el principio. El salto es un `<br />` dentro del mismo
+ * párrafo —no un segundo `<Text>`— porque las dos piezas son una sola frase y
+ * porque el margen inferior del bloque lo cierra el respaldo: partirlo en dos
+ * párrafos metería el margen entre medias. `<br />` lo entiende cualquier
+ * cliente, incluido el motor de Word.
+ */
+export declare function EmailButton({ href, children, fallbackLabel, style }: EmailButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/email/emailTheme.d.ts

@@ -0,0 +1,225 @@
+import { type EmailTokenName } from './emailTokens';
+/** El valor de un token del correo, ya resuelto y en píxeles. */
+export declare function emailToken(name: EmailTokenName): string;
+/**
+ * El negativo de un token del correo, para un margen que saca un elemento
+ * fuera de su caja (el logotipo de la banda de marca, ver `EmailLayout`).
+ *
+ * No se escribe `calc(-1 * ...)`: `emailToken` ya devuelve píxeles resueltos
+ * — un correo no tiene `var()` que negar — y el soporte de `calc()` en
+ * estilos en línea es flojo en los clientes de correo (el motor de Word de
+ * Outlook, notablemente). Con un número fijo no hace falta arriesgarlo.
+ */
+export declare function negatedEmailToken(name: EmailTokenName): string;
+/**
+ * La paleta del correo. Un solo juego: el correo es solo claro.
+ *
+ * El modo oscuro se retiró a propósito, no por no haberlo probado. Eso NO
+ * impide que Outlook Windows o Gmail Android inviertan los colores por su
+ * cuenta: lo que se deja de hacer es gestionarlo. Con fondo blanco y tinta
+ * oscura el resultado invertido es legible, y el logotipo lleva su blanco
+ * horneado, así que aguanta.
+ */
+export declare const emailPalette: {
+    /** Fondo general, fuera de la caja. */
+    readonly canvas: string;
+    /** Fondo de la caja del mensaje. */
+    readonly background: string;
+    readonly text: string;
+    readonly muted: string;
+    readonly border: string;
+};
+/** La sans del sistema con su pila de reserva, tal cual la define el token. */
+export declare const emailFontFamily: string;
+/**
+ * El rango del eje de peso de la sans, para la `@font-face` del correo.
+ *
+ * Es una fuente variable y `fonts.css` la declara así, `1 1000`. Declararla con
+ * un peso suelto —o con dos caras, una por peso, apuntando al mismo fichero—
+ * deja al navegador sin eje que variar: acaba emparejando la prosa con la cara
+ * del título y el correo sale entero en negrita.
+ */
+export declare const emailFontWeightRange: string;
+/** Ancho del correo. Fuera de 600px, el panel de lectura obliga a scroll. */
+export declare const emailMaxWidth: string;
+export declare const emailLogo: {
+    readonly width: number;
+    readonly height: number;
+    /** El nombre lleva versión: Gmail cachea las imágenes y no admite refresco. */
+    readonly filename: "logo-v3.png";
+};
+/**
+ * De dónde cuelgan los assets del correo (logotipo y fuente web).
+ *
+ * Es el valor POR DEFECTO, no una constante escondida: `EmailLayout` acepta
+ * `assetsBaseUrl` para que un consumidor la cambie sin tocar el DS. `slxd.app`
+ * es el dominio de la marca y el más estable a largo plazo.
+ */
+export declare const emailAssetsBaseUrl = "https://slxd.app/brand/email";
+/** La cara latina de la sans, servida desde el mismo sitio que el logotipo. */
+export declare const emailFontFilename = "google-sans-flex-normal-latin-v1.woff2";
+export declare const emailStyles: {
+    readonly heading: {
+        readonly color: string;
+        readonly fontFamily: string;
+        readonly fontSize: string;
+        readonly fontWeight: number;
+        readonly lineHeight: string;
+        readonly margin: `0 0 ${string}`;
+    };
+    readonly text: {
+        readonly color: string;
+        readonly fontFamily: string;
+        readonly fontWeight: number;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly margin: `0 0 ${string}`;
+    };
+    readonly textEmphasis: {
+        readonly fontWeight: number;
+    };
+    readonly muted: {
+        readonly color: string;
+        readonly fontFamily: string;
+        readonly fontWeight: number;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly margin: 0;
+    };
+    readonly footnote: {
+        readonly color: string;
+        readonly fontFamily: string;
+        readonly fontWeight: number;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly margin: 0;
+    };
+    readonly button: {
+        readonly backgroundColor: string;
+        readonly color: string;
+        readonly display: "block";
+        readonly width: string;
+        readonly textAlign: "center";
+        readonly fontFamily: string;
+        readonly fontSize: string;
+        readonly fontWeight: number;
+        readonly padding: `${string} 0`;
+        readonly textDecoration: "none";
+        readonly marginBottom: string;
+    };
+    readonly buttonFallback: {
+        readonly margin: `${string} 0 ${string}`;
+        readonly color: string;
+        readonly fontFamily: string;
+        readonly fontWeight: number;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+    };
+    readonly buttonFallbackUrl: {
+        readonly color: string;
+        readonly wordBreak: "break-all";
+        readonly wordWrap: "break-word";
+    };
+    readonly link: {
+        readonly color: string;
+        readonly fontFamily: string;
+        readonly fontWeight: number;
+        readonly textDecoration: "underline";
+    };
+    readonly heading2: {
+        readonly color: string;
+        readonly fontFamily: string;
+        readonly fontSize: string;
+        readonly fontWeight: number;
+        readonly lineHeight: string;
+        readonly margin: `${string} 0 ${string}`;
+    };
+    readonly list: {
+        readonly color: string;
+        readonly fontFamily: string;
+        readonly fontSize: string;
+        readonly fontWeight: number;
+        readonly lineHeight: string;
+        readonly margin: `0 0 ${string}`;
+        readonly paddingLeft: string;
+    };
+    readonly listItem: {
+        readonly margin: `0 0 ${string}`;
+    };
+    readonly quote: {
+        readonly borderLeft: `${string} solid ${string}`;
+        readonly margin: `0 0 ${string}`;
+        readonly paddingLeft: string;
+    };
+    readonly tag: {
+        readonly borderRadius: string;
+        readonly display: "inline-block";
+        readonly fontFamily: string;
+        readonly fontSize: string;
+        readonly fontWeight: number;
+        readonly padding: `${string} ${string}`;
+    };
+    readonly divider: {
+        readonly border: 0;
+        readonly borderTop: `${string} solid ${string}`;
+        readonly margin: `${string} 0`;
+        readonly width: "100%";
+    };
+};
+/**
+ * Los tres tonos de `EmailTag`, cada uno un par relleno/tinta autocontenido.
+ *
+ * Son los tres veredictos que hoy pinta un correo de la suite —el de validación
+ * de `lmsmarketplace`, que los tenía escritos a mano como `#006616`, `#ffcd00` y
+ * `#b30000`: exactamente estos—. No hay un cuarto tono neutro ni uno
+ * informativo porque ningún correo los pide todavía.
+ *
+ * Son RELLENOS, los tres, y lo decide el aviso: el amarillo de marca da 1,50:1
+ * sobre blanco y no llega al 3:1 de WCAG como tinta, así que solo existe como
+ * relleno con tinta prusia. Darles a los otros dos otra forma habría dejado
+ * tres veredictos que no se parecen entre sí.
+ */
+export declare const emailTones: {
+    readonly success: {
+        readonly backgroundColor: string;
+        readonly color: string;
+    };
+    readonly warning: {
+        readonly backgroundColor: string;
+        readonly color: string;
+    };
+    readonly error: {
+        readonly backgroundColor: string;
+        readonly color: string;
+    };
+};
+/** El veredicto que pinta una `EmailTag`. */
+export type EmailTone = keyof typeof emailTones;
+/**
+ * La única clase del correo. Existe porque el hover del botón no cabe inline y
+ * su regla necesita un gancho que no atrape a los demás enlaces.
+ */
+export declare const emailButtonClassName = "email-button";
+/**
+ * Lo único que el correo no puede llevar inline: las pseudoclases.
+ *
+ * Es toda la hoja de estilos del correo. Antes había un bloque mucho mayor con
+ * las reglas de modo oscuro y las clases (`.email-body`, `.email-surface`,
+ * `.email-text`…) que existían solo para que esas reglas pudieran engancharse;
+ * al retirarse el modo oscuro se fueron con él.
+ *
+ * Dos reglas:
+ *
+ * 1. El enlace se desubraya bajo el puntero, como en la web.
+ * 2. El botón hace el salto de `Button primary`: del lavanda al amarillo, con
+ *    la tinta prusia quieta. Va con `!important` porque compite con el estilo
+ *    inline del propio botón, que le gana por especificidad. Y engancha por la
+ *    clase `email-button`, no por `a`: el enlace de respaldo y los de baja son
+ *    enlaces del correo y no deben ponerse amarillos.
+ *
+ * Esto solo se ve donde el cliente respeta el `<style>` del head —Gmail web,
+ * Apple Mail—; en Outlook de escritorio, que renderiza con el motor de Word, no,
+ * y en el móvil no hay puntero. Donde no llegue, el botón se queda en su reposo,
+ * que es la lectura correcta: es pulido, no una señal de la que dependa nada.
+ */
+export declare const emailStyleSheet: string;