@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
26 lines (25 loc) • 1.29 kB
JavaScript
"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