import * as css from '../theme/default/header.m.css';
import theme from '../middleware/theme';
import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create({ theme })
    .properties()
    .children();
export const Header = factory(function Header({ children, properties, middleware: { theme } }) {
    const classes = theme.classes(css);
    const { sticky } = properties();
    const { actions, leading, title, trailing } = children()[0];
    return (tsx("header", { key: "header", classes: [theme.variant(), sticky ? classes.spacer : undefined] },
        tsx("div", { classes: [classes.root, sticky && classes.sticky], key: "root" },
            tsx("div", { classes: classes.row },
                tsx("div", { classes: classes.primary, key: "primary" },
                    leading && tsx("div", { classes: classes.leading }, leading),
                    tsx("div", { classes: classes.title, key: "title" }, title && title)),
                tsx("div", { classes: classes.secondary, key: "secondary" },
                    tsx("nav", { classes: classes.actions, key: "actions" }, actions &&
                        (Array.isArray(actions) ? actions : [actions]).map((action) => (tsx("div", { classes: classes.action }, action)))),
                    trailing && tsx("div", { classes: classes.trailing }, trailing))))));
});
export default Header;

/*# sourceMappingURL=index.mjs.map*/