@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
41 lines (40 loc) • 2.7 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_keys = require("../../core/utils/keys/keys.cjs");
const require_filter_props = require("../../core/utils/filter-props/filter-props.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_get_sorted_breakpoints = require("../../core/utils/get-sorted-breakpoints/get-sorted-breakpoints.cjs");
const require_get_base_value = require("../../core/utils/get-base-value/get-base-value.cjs");
const require_MantineThemeProvider = require("../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_InlineStyles = require("../../core/InlineStyles/InlineStyles.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Grid/GridVariables.tsx
function GridVariables({ gap, rowGap, columnGap, selector, breakpoints, type }) {
const theme = require_MantineThemeProvider.useMantineTheme();
const _breakpoints = breakpoints || theme.breakpoints;
const baseStyles = require_filter_props.filterProps({
"--grid-gap": require_get_size.getSpacing(require_get_base_value.getBaseValue(gap)),
"--grid-row-gap": require_get_size.getSpacing(require_get_base_value.getBaseValue(rowGap)),
"--grid-column-gap": require_get_size.getSpacing(require_get_base_value.getBaseValue(columnGap))
});
const queries = require_keys.keys(_breakpoints).reduce((acc, breakpoint) => {
if (!acc[breakpoint]) acc[breakpoint] = {};
if (typeof gap === "object" && gap[breakpoint] !== void 0) acc[breakpoint]["--grid-gap"] = require_get_size.getSpacing(gap[breakpoint]);
if (typeof rowGap === "object" && rowGap[breakpoint] !== void 0) acc[breakpoint]["--grid-row-gap"] = require_get_size.getSpacing(rowGap[breakpoint]);
if (typeof columnGap === "object" && columnGap[breakpoint] !== void 0) acc[breakpoint]["--grid-column-gap"] = require_get_size.getSpacing(columnGap[breakpoint]);
return acc;
}, {});
const values = require_get_sorted_breakpoints.getSortedBreakpoints(require_keys.keys(queries), _breakpoints).filter((breakpoint) => require_keys.keys(queries[breakpoint.value]).length > 0).map((breakpoint) => ({
query: type === "container" ? `mantine-grid (min-width: ${_breakpoints[breakpoint.value]})` : `(min-width: ${_breakpoints[breakpoint.value]})`,
styles: queries[breakpoint.value]
}));
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineStyles.InlineStyles, {
styles: baseStyles,
media: type === "container" ? void 0 : values,
container: type === "container" ? values : void 0,
selector
});
}
//#endregion
exports.GridVariables = GridVariables;
//# sourceMappingURL=GridVariables.cjs.map