import { useClickOutside } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import "../utils/index.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 "../core/index.js";
import { HeaderProvider } from "./context.js";
import headerAccountUserInfo_default from "./headerAccountUserInfo.js";
import headerAccount_default from "./headerAccount.js";
import headerApplicationName_default from "./headerApplicationName.js";
import headerContent_default from "./headerContent.js";
import headerCreateAccount_default from "./headerCreateAccount.js";
import headerDivider_default from "./headerDivider.js";
import headerLinkItem_default from "./headerLinkItem.js";
import headerLogo_default from "./headerLogo.js";
import headerMainLinks_default from "./headerMainLinks.js";
import headerMobileContent_default from "./headerMobileContent.js";
import headerMobileToggle_default from "./headerMobileToggle.js";
import headerNotifications_default from "./headerNotifications.js";
import headerServicesMessage_default from "./headerServicesMessage.js";
import headerServices_default from "./headerServices.js";
import headerSignIn_default from "./headerSignIn.js";
import headerSupport_default 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_default;
Header.AccountUserInfo = headerAccountUserInfo_default;
Header.Support = headerSupport_default;
Header.ApplicationName = headerApplicationName_default;
Header.Content = headerContent_default;
Header.CreateAccount = headerCreateAccount_default;
Header.Divider = headerDivider_default;
Header.LinkItem = headerLinkItem_default;
Header.Logo = headerLogo_default;
Header.MainLinks = headerMainLinks_default;
Header.MobileContent = headerMobileContent_default;
Header.MobileToggle = headerMobileToggle_default;
Header.Notifications = headerNotifications_default;
Header.Services = headerServices_default;
Header.ServicesMessage = headerServicesMessage_default;
Header.SignIn = headerSignIn_default;
Header.displayName = "Header";
var header_default = Header;

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