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

const FormLayoutSection = React__default.forwardRef(({ title, subtitle, action, className, contentClassName, theme: customTheme, children, ...props }, ref) => {
    const theme = { ...formLayoutTheme, ...customTheme };
    const hasSidebar = !!(title || subtitle || action);
    return (jsxs("section", { ref: ref, className: cn(theme.section, className), ...props, children: [hasSidebar && (jsxs("div", { className: theme.sectionSidebar, children: [title && jsx("div", { className: theme.sectionTitle, children: title }), subtitle && (jsx("div", { className: theme.sectionSubtitle, children: subtitle })), action && jsx("div", { className: theme.sectionAction, children: action })] })), jsx("div", { className: cn(hasSidebar ? theme.sectionContent : theme.sectionContentFull, contentClassName), children: children })] }));
});
FormLayoutSection.displayName = "FormLayout.Section";

export { FormLayoutSection };
