declare module "react" {
    interface CSSProperties {
        "--rmd-dialog-min-width"?: string | number;
        "--rmd-dialog-horizontal-margin"?: string | number;
        "--rmd-dialog-vertical-margin"?: string | number;
        "--rmd-dialog-z-index"?: string | number;
        "--rmd-dialog-header-padding"?: string | number;
        "--rmd-dialog-header-padding-bottom"?: string | number;
        "--rmd-dialog-content-padding"?: string | number;
        "--rmd-dialog-footer-padding"?: string | number;
        "--rmd-dialog-width"?: string | number;
        "--rmd-dialog-small-width"?: string | number;
        "--rmd-dialog-medium-width"?: string | number;
        "--rmd-dialog-large-width"?: string | number;
        "--rmd-dialog-extra-large-width"?: string | number;
    }
}
export type DialogType = "full-page" | "centered" | "custom";
/**
 * This can be used to enforce a specific width for dialogs instead of relying
 * on the size of the content to determine the width. The width will also ensure
 * that it does not overflow based on the viewport width and margins applied.
 *
 * For example: if the `width="extra-large"` and the total viewport size is
 * `600px`, the dialog width would be `420px` since there is a default `80px`
 * margin to the left and right of the dialog. If the user expands the browser,
 * the dialog width will continue to grow until it reaches the `extra-large`
 * width and stop growing from that point.
 *
 * @since 6.0.0
 */
export type DialogWidth = "auto" | "small" | "medium" | "large" | "extra-large";
/**
 * @since 6.0.0
 */
export interface DialogContainerClassNameOptions {
    className?: string;
    centered?: boolean;
    displayNone?: boolean;
}
/**
 * @since 6.0.0
 */
export declare function dialogContainer(options?: DialogContainerClassNameOptions): string;
/** @since 6.0.0 */
export interface DialogClassNameOptions {
    className?: string;
    /**
     * @defaultValue `"centered"`
     */
    type?: DialogType;
    /**
     * @defaultValue `"auto"`
     */
    width?: DialogWidth;
    /**
     * @defaultValue `false`
     */
    fixed?: boolean;
    /**
     * @defaultValue `type === "full-page"`
     */
    outline?: boolean;
    /**
     * This is mostly used for handling nested dialogs and removes any box shadow
     * on a dialog that has a child visible.
     *
     * @defaultValue `false`
     */
    disableBoxShadow?: boolean;
}
/** @since 6.0.0 */
export declare function dialog(options?: DialogClassNameOptions): string;
/** @since 6.0.0 */
export interface DialogHeaderClassNameOptions {
    className?: string;
}
/**
 * NOTE: The default `DialogHeader` component uses the `Box` component so the
 * `box` class name utility function or `Box` component will probably be
 * required if using this util
 *
 * @since 6.0.0
 */
export declare function dialogHeader(options?: DialogHeaderClassNameOptions): string;
/** @since 6.0.0 */
export interface DialogContentClassNameOptions {
    className?: string;
    /** @defaultValue `false` */
    disablePadding?: boolean;
}
/** @since 6.0.0 */
export declare function dialogContent(options?: DialogContentClassNameOptions): string;
/**
 * An optional alignment for the content within the footer. Since the majority
 * of dialog footers are used to contain action buttons, the default alignment
 * is near the end.
 *
 * @since 3.1.0
 */
export type DialogFooterAlignment = "none" | "start" | "end" | "between" | "stacked-start" | "stacked-end";
/** @since 6.0.0 */
export interface DialogFooterClassNameOptions {
    className?: string;
    /** @defaultValue `"end"` */
    align?: DialogFooterAlignment;
}
/** @since 6.0.0 */
export declare function dialogFooter(options?: DialogFooterClassNameOptions): string;
/** @since 4.0.0 */
export declare const DEFAULT_DIALOG_TIMEOUT: {
    readonly enter: 200;
    readonly exit: 150;
};
/** @since 4.0.0 */
export declare const DEFAULT_DIALOG_CLASSNAMES: {
    readonly appear: "rmd-dialog--enter";
    readonly appearActive: "rmd-dialog--enter-active";
    readonly enter: "rmd-dialog--enter";
    readonly enterActive: "rmd-dialog--enter-active";
    readonly exit: "rmd-dialog--exit";
    readonly exitActive: "rmd-dialog--exit-active";
};
