import { useClickOutside } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import { useLinks } from "../core/links.js";
import { useStyleConfig } from "../core/theme.js";
import { useUp } from "../core/media.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { HeaderProvider } from "./context.js";
import HeaderAccountUserInfo from "./headerAccountUserInfo.js";
import HeaderAccount from "./headerAccount.js";
import HeaderApplicationName from "./headerApplicationName.js";
import HeaderContent from "./headerContent.js";
import HeaderCreateAccount from "./headerCreateAccount.js";
import HeaderDivider from "./headerDivider.js";
import HeaderLinkItem from "./headerLinkItem.js";
import HeaderLogo from "./headerLogo.js";
import HeaderMainLinks from "./headerMainLinks.js";
import HeaderMobileContent from "./headerMobileContent.js";
import HeaderMobileToggle from "./headerMobileToggle.js";
import HeaderNotifications from "./headerNotifications.js";
import HeaderServicesMessage from "./headerServicesMessage.js";
import HeaderServices from "./headerServices.js";
import HeaderSignIn from "./headerSignIn.js";
import HeaderSupport from "./headerSupport.js";
import { useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/header/header.tsx
const HeaderBase = styled.headerBox`
  align-items: center;
  background-color: white;
  border-bottom: 1px solid darkBlue.main;
  display: flex;
  position: relative;
`;
/** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */
const Header = vui((props, ref) => {
	const { className, isSticky, size, variant, ...rest } = props;
	const [isMobileOpen, setIsMobileOpen] = useState(false);
	const mobileContentRef = useRef(null);
	const mobileToggleRef = useRef(null);
	const styles = useStyleConfig("Header", props);
	const headerHeight = 72;
	const [links] = useLinks();
	useClickOutside([mobileContentRef, mobileToggleRef], () => {
		setIsMobileOpen(false);
	});
	const isDesktop = useUp("lg");
	return /* @__PURE__ */ jsx(HeaderProvider, {
		value: {
			headerHeight,
			isDesktop,
			isMobile: !isDesktop,
			isMobileOpen,
			links,
			mobileContentRef,
			mobileToggleRef,
			setIsMobileOpen,
			size,
			variant
		},
		children: /* @__PURE__ */ jsx(HeaderBase, {
			className: cs("vui-header", className),
			h: headerHeight,
			position: isSticky ? "sticky" : "static",
			px: {
				xs: 2,
				lg: 5
			},
			ref,
			role: "banner",
			top: isSticky ? 0 : "auto",
			...styles.container,
			...rest
		})
	});
});
Header.Account = HeaderAccount;
Header.AccountUserInfo = HeaderAccountUserInfo;
Header.Support = HeaderSupport;
Header.ApplicationName = HeaderApplicationName;
Header.Content = HeaderContent;
Header.CreateAccount = HeaderCreateAccount;
Header.Divider = HeaderDivider;
Header.LinkItem = HeaderLinkItem;
Header.Logo = HeaderLogo;
Header.MainLinks = HeaderMainLinks;
Header.MobileContent = HeaderMobileContent;
Header.MobileToggle = HeaderMobileToggle;
Header.Notifications = HeaderNotifications;
Header.Services = HeaderServices;
Header.ServicesMessage = HeaderServicesMessage;
Header.SignIn = HeaderSignIn;
Header.displayName = "Header";

//#endregion
export { HeaderBase, Header as default };
globalThis.__vuiVersion__ = "4.0.0"
//# sourceMappingURL=header.js.map