import { type HTMLAttributes } from 'react';
import { type DataTestId, type MaskingProps, type StylingProps, type WithChildren } from '@dynatrace/strato-components/core';
import type { PanelSize } from './Panel/types/shared-panel-types.js';
import type { PagePanels } from './types/shared-page-types.js';
/**
 * @internal
 */
export declare const MIN_WIDTHS: Record<PagePanels, number>;
/**
 * @internal
 */
export declare const BREAKPOINTS: Record<Exclude<PagePanels, 'main'>, number>;
/**
 * @internal
 */
export declare const PREFERRED_WIDTHS: Partial<Record<PagePanels, PanelSize>>;
/**
 * @internal
 */
export declare const PANEL_ORDER: Record<PagePanels, number>;
/**
 * @public
 */
export interface PageProps extends WithChildren, Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>, StylingProps, DataTestId, MaskingProps {
    /**
     * Whether animations should be disabled.
     * If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied.
     * @defaultValue false
     */
    disableAnimations?: boolean;
}
/**
 * The `Page` component provides the basic layout for your app with slots for a header, sidebar, main content, and a detail view.
 * The `Main` slot is the only slot that is mandatory for rendering the `Page`; every other slot is optional.
 * @public
 */
export declare const Page: ((props: PageProps) => import("react/jsx-runtime.js").JSX.Element) & {
    /** The `Header` component is used inside the `Page` component for displaying content at the very top of the page. */
    Header: {
        (props: import("./Header.js").HeaderProps): import("react/jsx-runtime.js").JSX.Element;
        displayName: string;
    };
    /** The `Sidebar` component is used inside the `Page` component for displaying content in the corresponding panel. */
    Sidebar: (props: import("./Sidebar.js").SidebarProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
    /**
     * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.
     * It is the only compound that is mandatory for rendering the `Page`.
     */
    Main: (props: import("./Main.js").MainProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
    /** The `DetailView` component is used inside the `Page` component for displaying content in the corresponding panel. */
    DetailView: (props: import("./DetailView.js").DetailViewProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
    /**
     * Use the `PanelControlButton` to get the correct icon for toggling the sidebar / detail view.
     * Depending on where it is rendered and the current state of the panel, the corresponding icon is rendered.
     * You can customize the rendered content by passing any children.
     */
    PanelControlButton: (props: import("./PanelControlButton.js").PanelControlButtonProps) => import("react/jsx-runtime.js").JSX.Element;
};