import React from 'react';
export type Theme = 'light' | 'dark';
export type ThemeZoneElement = 'div' | 'section' | 'aside' | 'header' | 'footer' | 'nav';
export interface ThemeZoneProps extends React.HTMLAttributes<HTMLElement> {
    /** The theme everything inside takes, whatever the page's is. */
    theme: Theme;
    /**
     * Draw no box: the zone's children lay out as if it were not there — a
     * grid cell stays a grid cell, a sticky header stays sticky — and take its
     * theme all the same. For wrapping a component that paints its own
     * surface. Without it the zone is a block with the theme's page surface
     * and text colour.
     */
    contents?: boolean;
    /** The element, when the zone is a box. Ignored with `contents`. */
    as?: ThemeZoneElement;
    children?: React.ReactNode;
}
/**
 * ThemeZone — a part of the page in the other theme: a dark header on a
 * light page, a light document preview in a dark app.
 *
 * `data-theme` on any element re-declares every themed token beneath it,
 * light as well as dark, so the zone's components need nothing of their
 * own. The zone adds what the attribute alone does not: text in the theme's
 * colour, native controls and scrollbars in its `color-scheme`, and menus,
 * popovers, tooltips and dialogs opened from inside it in its theme rather
 * than the page's.
 */
export declare const ThemeZone: React.ForwardRefExoticComponent<ThemeZoneProps & React.RefAttributes<HTMLElement>>;
//# sourceMappingURL=ThemeZone.d.ts.map