import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { OverflowTypography } from '../../../OverflowTypography';
import { Skeleton } from '../../../Skeleton';
import { TitleWrapper } from './styles';
export const Title = ({ title, isLoading, children }) => {
    if (!title && !children && isLoading) {
        return _jsx(Skeleton, { height: 20, width: 200 });
    }
    if (typeof title === 'string') {
        return (_jsxs(TitleWrapper, { component: "h3", variant: "h5", children: [_jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }), children] }));
    }
    return (_jsxs(TitleWrapper, { component: "div", role: "heading", "aria-level": 3, variant: "h5", children: [title, children] }));
};
