import React, { HTMLAttributes } from 'react';
import { CommonProps } from '@contentful/f36-core';

type LayoutSidebarVariant = 'narrow' | 'wide';
type LayoutProps = {
    /**
     * The body of the layout.
     */
    children: React.ReactNode;
    header?: React.ReactNode;
    leftSidebar?: React.ReactNode;
    /**
     * Defines the width of the layout left sidebar.
     * @default 'narrow' (280px)
     */
    leftSidebarVariant?: LayoutSidebarVariant;
    rightSidebar?: React.ReactNode;
    /**
     * Defines the width of the layout right sidebar.
     * @default 'wide' (340px)
     */
    rightSidebarVariant?: LayoutSidebarVariant;
    /**
     * Defines the width of the layout and its content.
     * @default 'wide'
     */
    variant?: 'narrow' | 'wide' | 'fullscreen';
    withBoxShadow?: boolean;
    /**
     * Classname that will be passed to the main content div,
     * which holds the sidebars and children div
     */
    contentClassName?: string;
    contentTestId?: string;
    /**
     * Offset for layout heights calculation.
     * Set to `0` for layout usage without navbar.
     * @default 60 (= navbar height)
     */
    offsetTop?: number;
} & CommonProps & HTMLAttributes<HTMLDivElement>;
declare const Layout$1: React.ForwardRefExoticComponent<{
    /**
     * The body of the layout.
     */
    children: React.ReactNode;
    header?: React.ReactNode;
    leftSidebar?: React.ReactNode;
    /**
     * Defines the width of the layout left sidebar.
     * @default 'narrow' (280px)
     */
    leftSidebarVariant?: LayoutSidebarVariant;
    rightSidebar?: React.ReactNode;
    /**
     * Defines the width of the layout right sidebar.
     * @default 'wide' (340px)
     */
    rightSidebarVariant?: LayoutSidebarVariant;
    /**
     * Defines the width of the layout and its content.
     * @default 'wide'
     */
    variant?: "narrow" | "wide" | "fullscreen";
    withBoxShadow?: boolean;
    /**
     * Classname that will be passed to the main content div,
     * which holds the sidebars and children div
     */
    contentClassName?: string;
    contentTestId?: string;
    /**
     * Offset for layout heights calculation.
     * Set to `0` for layout usage without navbar.
     * @default 60 (= navbar height)
     */
    offsetTop?: number;
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

declare const LayoutHeader: React.ForwardRefExoticComponent<{
    children: React.ReactNode;
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

declare const LayoutBody: React.ForwardRefExoticComponent<{
    children: React.ReactNode;
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

declare const LayoutSidebar: React.ForwardRefExoticComponent<{
    children: React.ReactNode;
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

type CompoundLayout = typeof Layout$1 & {
    Header: typeof LayoutHeader;
    Body: typeof LayoutBody;
    Sidebar: typeof LayoutSidebar;
};
declare const Layout: CompoundLayout;

export { Layout, type LayoutProps };