import { jsx as _jsx } from "react/jsx-runtime";
import { Box } from '../box';
import { useUp, vui } from '../core';
import { Heading } from '../heading';
import { cs } from '../utils';
/** Logo displayed in the left corner of the Header. */
export const HeaderApplicationName = vui((props, ref) => {
    const { color, title, url, ...rest } = props;
    const isTablet = useUp('md');
    const additionalClassName = isTablet ? 'vui-headerApplicationNameTablet' : 'vui-headerApplicationNameMobile';
    const mobileProps = isTablet
        ? {
            fontSize: 18,
            mt: 0,
        }
        : {
            fontSize: 18,
            maxW: '156px',
            lineHeight: '21px',
        };
    const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {};
    const localColor = color || 'darkBlue.main';
    return (_jsx(Box, { ...linkProps, children: _jsx(Heading, { className: cs('vui-headerApplicationName', additionalClassName), size: "title", ...rest, ...mobileProps, color: localColor, children: title }) }));
});
HeaderApplicationName.displayName = 'HeaderApplicationName';
export default HeaderApplicationName;
//# sourceMappingURL=headerApplicationName.js.map