import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { tasty } from '@cube-dev/ui-kit';
const ContainerElement = tasty({
    styles: {
        position: 'relative',
        display: 'grid',
        gridTemplateRows: 'min-content 1fr',
        placeContent: 'stretch',
        Toolbar: {
            display: 'flex',
            flow: 'row',
            placeContent: 'space-between',
            placeItems: 'center',
            gap: '1x',
            top: '0',
            padding: '1x',
            fill: '#white',
            border: 'bottom',
        },
        Actions: {
            display: 'flex',
            flow: 'row',
            gap: '1x',
        },
        ExtraActions: {
            display: 'flex',
            flow: 'row',
            gap: '1x',
        },
        TabPane: {
            display: 'grid',
            position: 'relative',
        },
    },
});
export function TabPaneWithToolbar(props) {
    const { children, actions, extraActions } = props;
    return (_jsxs(ContainerElement, { children: [actions || extraActions ? (_jsxs("div", { "data-element": "Toolbar", children: [_jsx("div", { "data-element": "Actions", children: actions }), _jsx("div", { "data-element": "ExtraActions", children: extraActions })] })) : (_jsx("div", {})), _jsx("div", { "data-element": "TabPane", children: children })] }));
}
//# sourceMappingURL=TabPaneWithToolbar.js.map