import { mergeRefs } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import "../utils/index.js";
import { useStyleConfig } from "../core/theme.js";
import { useUp } from "../core/media.js";
import { vui } from "../core/vui.js";
import box_default from "../box/box.js";
import "../box/index.js";
import "../core/index.js";
import { useHeaderContext } from "./context.js";
import { jsx } from "react/jsx-runtime";

//#region src/header/headerMobileContent.tsx
/** Displays part of the Header content when on a mobile screen. */
const HeaderMobileContent = vui((props, ref) => {
	const { className, ...rest } = props;
	const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {};
	const styles = useStyleConfig("Header", useHeaderContext());
	const islargerThanTablet = useUp("lg");
	return isMobileOpen ? /* @__PURE__ */ jsx(box_default, {
		bg: "white",
		className: cs("vui-headerMobileContent", className),
		column: true,
		overflowX: "hidden",
		overflowY: "auto",
		position: "absolute",
		ref: mergeRefs(ref, mobileContentRef),
		right: islargerThanTablet ? "-40px" : "-16px",
		shadow: 2,
		top: "calc(100% + 1px)",
		w: islargerThanTablet ? 320 : 280,
		zIndex: "100",
		...styles.mobileContent,
		...rest
	}) : null;
});
HeaderMobileContent.displayName = "HeaderMobileContent";
var headerMobileContent_default = HeaderMobileContent;

//#endregion
export { HeaderMobileContent, headerMobileContent_default as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=headerMobileContent.js.map