import { type VariantProps } from 'class-variance-authority';
import * as React from 'react';
/**
 * A titled information section: an icon, a title, and a body of rows.
 *
 * Ported from Figma `Section Header` (967:20788) in the Multi product demo file, which is the design
 * authority for GTM-990.
 *
 * **This one component carries five of GTM-990's items.** `Profile` (836:6991), `Live intelligence`
 * (836:7042 — the ticket calls it "Operators"), `Under the hood` (836:7151), `Observations`
 * (836:7614) and `Summary` (836:7604) are all a `Section Header` over a body, at 401–414px wide. The
 * header is invariant across all five: 24px tall, an 8px internal gap, a brand-red icon and a title.
 * The *only* axis on which they differ is the gap between the header and the body — 8, 12 or 16 — so
 * that is a `density` prop and the five sections are compositions rather than components. Building
 * them separately would have duplicated the header five times over.
 *
 * The title is `body-m-semibold` — Dev Mode names the style `Paragraph/medium-semibold` (16/24 at
 * 600). It was `subhead-m`, which is 22/32 at 500; REST returns the leaf size and weight variables
 * without the composite style that binds them, so the extraction never contradicted the wrong ramp.
 */
/**
 * The header-to-body gap, which is what `density` drives: 8px for `Observations` and `Summary`, 12px
 * for `Profile` and `Live intelligence`, 16px for `Under the hood`, each off that section's own root
 * `itemSpacing`.
 *
 * `density` used to be applied to the body's internal gap while the root sat pinned at 8px, which
 * inverted the axis and left all five sections wrong in the header-to-body gap.
 */
declare const infoSectionStyles: (props?: ({
    density?: "default" | "loose" | "tight" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * The header's own 8px gap, from Figma, and fixed rather than a variant: all five sections share it.
 * Only the header-to-body gap varies.
 */
declare const infoSectionHeaderStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The gap between the body's own children, fixed at 12px — Figma's inner list in four of the five
 * sections. `Summary`'s 10px has no token and holds one paragraph, so it never renders.
 */
declare const infoSectionBodyStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The title ink.
 *
 * Figma paints it `color/gray/gray-100` (#dde0e6), which measures **1.32:1** against the light
 * surface — unusable, and a consequence of the file being authored dark-only.
 * Figma's title is `color/gray/gray-100` #dde0e6 at **14.64:1** on the page — one ramp step off
 * white. It was `--color-text-primary`, which is `color/brand/white` at 19.37:1: brighter than Figma
 * draws, and a different literal.
 *
 * `Disabled=True` moves both title and icon to `color/gray/gray-300` in Figma; here that is
 * `--color-text-disabled`, which sits below 4.5:1 on purpose. WCAG 1.4.3 exempts inactive controls,
 * and the contrast test puts it in the `disabledOnly` bucket rather than dropping it silently.
 */
declare const infoSectionTitleStyles: (props?: ({
    disabled?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * The icon fill: Figma's `color/brand/twilio-red` #db132a at **3.82:1 on the page** — over WCAG
 * 1.4.11's 3:1 for a non-text graphic, and under 4.5, so it must never carry text.
 *
 * IT WAS `--color-icon-accent`, WHICH IS A BLUE. This docblock said "Figma binds
 * `color/brand/twilio-red` (#db132a)" and then named a role resolving to `--palette-primary-300`
 * #9ec1fd. The *reasoning* was right and worth keeping — the red is Twilio brand, and
 * `--color-icon-destructive` would announce danger on every section header and be actively wrong the
 * moment something genuinely destructive appeared beside it — but the token it reached for did not
 * carry the red it argued for. `--color-icon-section` does. Verified from the exported SVG
 * (`fill="#DB132A"`), not from the variable table.
 */
declare const infoSectionIconStyles: (props?: ({
    disabled?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export { infoSectionStyles, infoSectionHeaderStyles, infoSectionBodyStyles, infoSectionTitleStyles, infoSectionIconStyles, };
/** 8px, 12px and 16px — the three header-to-body gaps the Figma sections use. */
export type InfoSectionDensity = NonNullable<VariantProps<typeof infoSectionStyles>['density']>;
export interface InfoSectionProps extends Omit<React.ComponentPropsWithoutRef<'section'>, 'title'> {
    /**
     * Header text, or arbitrary header content.
     *
     * `title` is omitted from the inherited props because the native HTML attribute of that name is a
     * `string` tooltip, and widening it to `ReactNode` is a TS2430 conflict rather than an extension.
     * `CollapsiblePanel` resolves the same collision the same way.
     */
    title: React.ReactNode;
    /**
     * Heading level wrapped around the title. Set it whenever the section is part of a document
     * outline — a section with no heading is invisible to a screen reader's heading navigation, which
     * is the most common way this pattern is got wrong. No level is assumed by default, because
     * guessing produces a wrong outline that nothing downstream will catch.
     */
    titleAs?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    /** Decorative leading glyph. Rendered `aria-hidden`; the title already names the section. */
    icon?: React.ReactNode;
    /**
     * Optional status chip beside the title — Figma's `Show Badge`, which defaults to **off**.
     *
     * A slot rather than a `badge: string` prop, because the chip is `Badge` and the caller decides its
     * variant. `Profile-section` (22:28155) draws it as `size="small" variant="error"` reading
     * "Analyzing", which is exactly `Badge`'s error treatment: the same `rgba(239,34,58,0.2)` tint at a
     * 50px radius, 24px tall, white 12/18 copy. Nothing needed building.
     *
     * Inside the header rather than after it, so it wraps with the title on a narrow screen — the
     * header is `flex-wrap` in Figma too.
     */
    badge?: React.ReactNode;
    /**
     * Gap between the header and the body: 8px, 12px or 16px. Not the gap between the body's own
     * children, which is fixed at 12px.
     * @default 'default'
     */
    density?: InfoSectionDensity;
    /** Dim the header. The section is not a control, so this only conveys state. */
    disabled?: boolean;
    /** The body. Omitted entirely when there is nothing to put in it. */
    children?: React.ReactNode;
}
/**
 * @example
 * <InfoSection title="Profile" titleAs="h3" icon={<UserIcon size="sm" />}>
 *   <InfoRow label="Voice" value="Amy" />
 * </InfoSection>
 *
 * @example <InfoSection title="Under the hood" density="loose">{calls}</InfoSection>
 */
export declare const InfoSection: React.ForwardRefExoticComponent<InfoSectionProps & React.RefAttributes<HTMLElement>>;
//# sourceMappingURL=info-section.d.ts.map