import { jsx } from 'react/jsx-runtime';
import React__default, { useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { pageHeadingTheme } from './PageHeading.theme.js';
import { PageHeadingBackButton } from './PageHeadingBackButton.js';
import { PageHeadingIcon } from './PageHeadingIcon.js';
import { PageHeadingTitle } from './PageHeadingTitle.js';
import { PageHeadingSubtitle } from './PageHeadingSubtitle.js';
import { PageHeadingActions } from './PageHeadingActions.js';

const PageHeadingRoot = React__default.forwardRef(({ children, className, separator = true, theme: customTheme = {}, ...props }, ref) => {
    const theme = useMemo(() => ({
        ...pageHeadingTheme,
        ...customTheme,
    }), [customTheme]);
    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, separator && theme.separatorStyle, className), ...props, children: children }));
});
PageHeadingRoot.displayName = "PageHeading";
// Create compound component with proper typing
const PageHeading = Object.assign(PageHeadingRoot, {
    BackButton: PageHeadingBackButton,
    Icon: PageHeadingIcon,
    Title: PageHeadingTitle,
    Subtitle: PageHeadingSubtitle,
    Actions: PageHeadingActions,
});

export { PageHeading, PageHeadingActions, PageHeadingBackButton, PageHeadingIcon, PageHeadingSubtitle, PageHeadingTitle };
