import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../utils/cn.js';
import { formLayoutTheme } from './FormLayout.theme.js';
import { FormLayoutSection } from './FormLayoutSection.js';
import { FormLayoutFooter } from './FormLayoutFooter.js';
import { Separator } from '../../core/Separator/Separator.js';

const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
    const theme = { ...formLayoutTheme, ...customTheme };
    // Inject <Separator /> between any adjacent children, unless one of them is Footer
    // (Footer already has border-t, so no separator needed before it)
    const childArray = React__default.Children.toArray(children).filter(Boolean);
    const rendered = childArray.map((child, index) => {
        const prev = childArray[index - 1];
        const needsSeparator = index > 0 && !isFooter(child) && !isFooter(prev);
        return (jsxs(React__default.Fragment, { children: [needsSeparator && jsx(Separator, {}), child] }, index));
    });
    return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: rendered }));
});
FormLayoutRoot.displayName = "FormLayout";
const FormLayout = Object.assign(FormLayoutRoot, {
    Section: FormLayoutSection,
    Footer: FormLayoutFooter,
});

export { FormLayout };
