import { r as screen, t as breakpoints } from "./grid.js";
import { useSyncExternalStore } from "react";
let Breakpoint = /* @__PURE__ */ function(Breakpoint$1) {
	Breakpoint$1[Breakpoint$1["xxs"] = breakpoints.xxs] = "xxs";
	Breakpoint$1[Breakpoint$1["xs"] = breakpoints.xs] = "xs";
	Breakpoint$1[Breakpoint$1["sm"] = breakpoints.sm] = "sm";
	Breakpoint$1[Breakpoint$1["md"] = breakpoints.md] = "md";
	Breakpoint$1[Breakpoint$1["lg"] = breakpoints.lg] = "lg";
	Breakpoint$1[Breakpoint$1["xl"] = breakpoints.xl] = "xl";
	return Breakpoint$1;
}({});
function getCurrentBreakpoint() {
	return Object.entries(screen).reverse().map(([size, mediaQuery]) => {
		return {
			breakpoint: Breakpoint[size],
			mq: window.matchMedia(mediaQuery)
		};
	}).find((entry) => entry.mq.matches)?.breakpoint ?? Breakpoint.xxs;
}
function subscribeToBreakpointChanges(callback) {
	const mediaQueryList = Object.values(screen).map((mediaQuery) => {
		const mq = window.matchMedia(mediaQuery);
		mq.addEventListener("change", callback);
		return mq;
	});
	return () => {
		mediaQueryList.forEach((mq) => {
			mq.removeEventListener("change", callback);
		});
	};
}
var getServerSnapshot = () => Breakpoint.xxs;
const useBreakpoint = () => {
	return useSyncExternalStore(subscribeToBreakpointChanges, getCurrentBreakpoint, getServerSnapshot);
};
export { useBreakpoint as n, Breakpoint as t };

//# sourceMappingURL=useBreakpoint.js.map