import { type VariantProps } from 'class-variance-authority';
import * as React from 'react';
/** Figma's unnamed `Property 1` axis. Its two options are authors, so the axis is `author`. */
export declare const EMAIL_MESSAGE_AUTHORS: readonly ["agent", "me"];
export type EmailMessageAuthor = (typeof EMAIL_MESSAGE_AUTHORS)[number];
/**
 * An email thread header row: a round author chip, a sender line and a recipient line.
 *
 * Ported from Figma `.email-message` (22:5781). The 52px row is 8px of vertical padding around a 36px
 * content stack of two 18px lines, so unlike `.badge` the height is produced by padding plus the type
 * ramp rather than fixed on the frame. Horizontal padding is `spacing/none`: the row bleeds to its
 * container's edges and only the rule separates it from its neighbours.
 *
 * **Not `ChannelMessage`, and not `ChatLog`.** The author AXIS is covered by both — `ChatLog` generalised
 * exactly this distinction into `authorColor` plus `side` — but a `ChatLogMessageEntry` is `author` +
 * `text` on one line with no avatar slot and no second addressee line. This is a message HEADER (from X,
 * to Y) rather than a line of conversation, and grafting an avatar slot and a recipient line onto a
 * conversation primitive would widen it into a mail primitive.
 *
 * **The rule is decoration, not a control boundary.** Figma draws `gray-800` at 1.39:1 against its page.
 * A message row is not a control: it is not focusable and has no hover, pressed or disabled axis in the
 * file, so WCAG 1.4.11's 3:1 does not apply and `--color-border-control` is not the remedy. The 7.43:1
 * text inside it is what makes the row perceivable.
 */
declare const emailMessageStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The author chip: 32px, fully round.
 *
 * FIGMA'S `color/gray/gray-850` #191f36, AND THE SUBSTITUTION CITED TWO COMPONENTS THAT HAVE BOTH SINCE
 * MOVED. It read: a near-black chip "which in light mode is a dark hole … and which measures 1.19:1
 * against its own page even in the theme it was drawn for", replaced with
 * `--color-surface-neutral-semi-medium` because that is "the same fill `ChannelAvatar` gives its logo tile
 * and `ChannelMessage` its business bubble, so an email header and the messages under it agree".
 *
 * Three things retired it. Rule 3 removed the light mode; `ChannelMessage` moved to
 * `--color-surface-field` when its bubbles were reverted; and `ChannelAvatar`'s tile moved to
 * `--color-surface-identity-chip` — Figma's gray-850 — one wave ago. So every party to the agreement had
 * left except this one. The 1.19:1 is real and is not a conflict: a chip is not a control boundary, and
 * 1.4.11 asks about the glyph on it, which is **16.27:1**.
 *
 * Found the same way `ChannelAvatar`'s was: composing the atom into `Phone-email` and finding a stray
 * #232e47 in the decoded pixels of a render whose every stated colour had been checked.
 */
declare const emailMessageChipStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The author glyph.
 *
 * Figma fills it `accesible-red-dark-theme` #ef223a, which is 3.84:1 on its chip and clears 1.4.11's
 * 3:1 — and that pairing matters more than it looks, because **the glyph is the only thing Figma uses to
 * distinguish Agent from Me.** Both variants paint both text lines and the chip identically; the axis is
 * expressed entirely by swapping the glyph. `--color-icon-accent` carries it with a measured value in
 * both themes rather than a dark-only literal.
 */
declare const emailMessageGlyphStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The sender line, one weight step heavier than the recipient.
 *
 * Figma inks BOTH lines `color/gray/gray-300` #9aa0b4 — 7.43:1 on its dark page and **2.61:1 on a white
 * one**, so the literal does not survive inversion. The hierarchy in the atom is carried by one weight
 * step at one size, which is what is reproduced here: `--color-text-primary` for the sender and
 * `--color-text-secondary` for the recipient, so the distinction survives a monochrome display too.
 *
 * Note what is NOT ported: a per-author ink. cr-web-demo tinted the agent's name #F83D53 and Figma tints
 * nothing at all, which is direct evidence for `ChatLog`'s existing default of one ink for every author.
 */
declare const emailMessageSenderStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/** The recipient line. Quieter by role, per the weight step above. */
declare const emailMessageRecipientStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
export { emailMessageStyles, emailMessageChipStyles, emailMessageGlyphStyles, emailMessageSenderStyles, emailMessageRecipientStyles, };
type EmailMessageVariants = VariantProps<typeof emailMessageStyles>;
export interface EmailMessageProps extends Omit<React.ComponentPropsWithoutRef<'div'>, keyof EmailMessageVariants> {
    /**
     * Who the row is about. A genuine prop rather than a CSS state: this atom declares no hover, pressed,
     * disabled or focus axis at all. It drives `data-author` and the default glyph, not the colours —
     * Figma's two variants are colour-identical.
     */
    author: EmailMessageAuthor;
    /** The sender line. Figma's `Owl support` / `Me`. */
    sender: React.ReactNode;
    /** The recipient line. Figma's `To me` / `To Owl support`. */
    recipient: React.ReactNode;
    /**
     * The glyph in the chip.
     *
     * A slot rather than a fixed pair of icons, for the reason `ChannelAvatar`'s `logo` is one: Figma's
     * agent glyph is the Twilio product mark, and a design system cannot supply anyone else's brand. Pass
     * it `aria-hidden` — the sender line beside it is the accessible text.
     */
    icon?: React.ReactNode;
}
/**
 * @example <EmailMessage author="agent" sender="Owl support" recipient="To me" icon={<MailIcon size="sm" />} />
 * @example <EmailMessage author="me" sender="Me" recipient="To Owl support" icon={<UserIcon size="sm" />} />
 */
export declare const EmailMessage: React.ForwardRefExoticComponent<EmailMessageProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=email-message.d.ts.map