import { cs } from "../utils/styles.js";
import "../utils/index.js";
import { useUp } from "../core/media.js";
import { vui } from "../core/vui.js";
import { Box } from "../box/box.js";
import "../box/index.js";
import "../core/index.js";
import { Heading } from "../heading/heading.js";
import "../heading/index.js";
import { jsx } from "react/jsx-runtime";

//#region src/header/headerApplicationName.tsx
/** Logo displayed in the left corner of the Header. */
const HeaderApplicationName = vui((props, ref) => {
	const { color, title, url, ...rest } = props;
	const isTablet = useUp("md");
	const additionalClassName = isTablet ? "vui-headerApplicationNameTablet" : "vui-headerApplicationNameMobile";
	const mobileProps = {
		fontSize: 18,
		lineHeight: "21px",
		mt: isTablet ? 0 : "inherit",
		maxW: isTablet ? "inherit" : "156px"
	};
	const linkProps = url ? {
		as: "a",
		href: url,
		outline: "none",
		focusRing: 2
	} : {};
	const localColor = color || "darkBlue.main";
	return /* @__PURE__ */ jsx(Box, {
		...linkProps,
		children: /* @__PURE__ */ jsx(Heading, {
			className: cs("vui-headerApplicationName", additionalClassName),
			size: "title",
			...rest,
			...mobileProps,
			color: localColor,
			children: title
		})
	});
});
HeaderApplicationName.displayName = "HeaderApplicationName";
var headerApplicationName_default = HeaderApplicationName;

//#endregion
export { HeaderApplicationName, headerApplicationName_default as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=headerApplicationName.js.map