@hitachivantara/uikit-react-core/dist/SimpleGrid/SimpleGrid.styles.js

UI Kit Core React components.

import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
//#region src/SimpleGrid/SimpleGrid.styles.tsx
var { staticClasses, useClasses } = createClasses("HvSimpleGrid", { root: {
	display: "grid",
	boxSizing: "border-box",
	gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`
} });
function getSize(size) {
	return size || Number(theme.breakpoints.values.md);
}
function getSortedBreakpoints(breakpoints) {
	if (breakpoints.length === 0) return breakpoints;
	const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
	const sorted = breakpoints.toSorted((a, b) => getSize(b[property]) - getSize(a[property]));
	return property === "minWidth" ? sorted.toReversed() : sorted;
}
var getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
	return {
		"--cols": cols,
		gap: theme.space[spacing],
		...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
			const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
			const breakpointSize = getSize(property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth);
			acc[`@media (${property}: ${breakpointSize}px)`] = {
				["--cols"]: breakpoint.cols,
				gap: theme.space[breakpoint.spacing || spacing]
			};
			return acc;
		}, {})
	};
};
//#endregion
export { getContainerStyle, staticClasses, useClasses };