import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../utils/cn.js';
import { pageLayoutTheme } from './PageLayout.theme.js';
import { PageLayoutSidebar } from './PageLayoutSidebar.js';
import { PageLayoutHeader } from './PageLayoutHeader.js';
import { PageLayoutContent } from './PageLayoutContent.js';

const PageLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
    const theme = { ...pageLayoutTheme, ...customTheme };
    // Separate Sidebar children from the rest (Header, Content)
    // so we can wrap non-sidebar children in a vertical main column.
    const childArray = React__default.Children.toArray(children);
    const sidebar = [];
    const main = [];
    childArray.forEach((child) => {
        if (React__default.isValidElement(child) && child.type === PageLayoutSidebar) {
            sidebar.push(child);
        }
        else {
            main.push(child);
        }
    });
    return (jsxs("div", { ref: ref, className: cn(theme.root, className), ...props, children: [sidebar, jsx("div", { className: cn(theme.main), children: main })] }));
});
PageLayoutRoot.displayName = "PageLayout";
const PageLayout = Object.assign(PageLayoutRoot, {
    Sidebar: PageLayoutSidebar,
    Header: PageLayoutHeader,
    Content: PageLayoutContent,
});

export { PageLayout };
