"use client";
import { keys } from "../../utils/keys/keys.mjs";
import { px } from "../../utils/units-converters/px.mjs";
import { em } from "../../utils/units-converters/rem.mjs";
import { useMantineStyleNonce } from "../Mantine.context.mjs";
import { useMantineTheme } from "../MantineThemeProvider/MantineThemeProvider.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/core/MantineProvider/MantineClasses/MantineClasses.tsx
function MantineClasses() {
	const theme = useMantineTheme();
	const nonce = useMantineStyleNonce();
	const classes = keys(theme.breakpoints).reduce((acc, breakpoint) => {
		const isPxBreakpoint = theme.breakpoints[breakpoint].includes("px");
		const pxValue = px(theme.breakpoints[breakpoint]);
		return `${acc}@media (max-width: ${isPxBreakpoint ? `${pxValue - .1}px` : em(pxValue - .1)}) {.mantine-visible-from-${breakpoint} {display: none !important;}}@media (min-width: ${isPxBreakpoint ? `${pxValue}px` : em(pxValue)}) {.mantine-hidden-from-${breakpoint} {display: none !important;}}`;
	}, "");
	return /* @__PURE__ */ jsx("style", {
		"data-mantine-styles": "classes",
		nonce: nonce?.(),
		dangerouslySetInnerHTML: { __html: classes }
	});
}
//#endregion
export { MantineClasses };

//# sourceMappingURL=MantineClasses.mjs.map