cherry-styled-components/dist/grid.js

Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.

"use client";
"use client";
import { mq } from "./utils/theme.js";
import { generateColsStyles, generateGapStyles } from "./utils/mixins.js";
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled from "styled-components";
//#region src/lib/grid.tsx
var StyledGrid = styled.div.withConfig({
	displayName: "grid__StyledGrid",
	componentId: "sc-593ceaf6-0"
})([
	`width:100%;display:grid;grid-template-columns:`,
	`;gap:`,
	`;`,
	`{gap:`,
	`;}`,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	``
], ({ $cols }) => `repeat(${$cols || 3}, minmax(0, 1fr))`, ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs, mq("lg"), ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg, ({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap), ({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap), ({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap), ({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap), ({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap), ({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap), ({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap), ({ $xsCols }) => $xsCols && generateColsStyles("xs", $xsCols), ({ $smCols }) => $smCols && generateColsStyles("sm", $smCols), ({ $mdCols }) => $mdCols && generateColsStyles("md", $mdCols), ({ $lgCols }) => $lgCols && generateColsStyles("lg", $lgCols), ({ $xlCols }) => $xlCols && generateColsStyles("xl", $xlCols), ({ $xxlCols }) => $xxlCols && generateColsStyles("xxl", $xxlCols), ({ $xxxlCols }) => $xxxlCols && generateColsStyles("xxxl", $xxxlCols));
function LocalGrid({ ...props }, ref) {
	return /* @__PURE__ */ jsx(StyledGrid, {
		...props,
		ref,
		children: props.children
	});
}
var Grid = /* @__PURE__ */ forwardRef(LocalGrid);
//#endregion
export { Grid };