fui-fancyui/dist/src/components/templates/FancyGrid/FancyGrid.style.js

FancyUI Libary

import { css as s, styled as l } from "styled-components";
import c from "../../../design/designFunctions/arrayToCssValues/arrayToCssValues.js";
import m from "../../../design/designFunctions/getThemeOrValueAsCss/getThemeOrValueAsCss.js";
const y = l.div`
  display: grid;

  grid-template-columns: ${({ $simpleGrid: d }) => d && `repeat(${d})`};
  grid-template-rows: ${({ $gridTemplateRows: d }) => d == null ? void 0 : d.join(" ")};
  grid-template-columns: ${({ $gridTemplateColumns: d }) => d == null ? void 0 : d.join(" ")};
  grid-row-gap: ${({ $rowGap: d }) => m(d)};
  grid-column-gap: ${({ $columnGap: d }) => m(d)};

  margin: ${({ $margin: d }) => c(d, "spacing")};
  padding: ${({ $padding: d }) => c(d, "spacing")};

  // Breakpoint handling
  /* Responsive Breakpoints */
  ${({ $breakpoints: d }) => d == null ? void 0 : d.map(
  (g) => {
    var r, i;
    return s`
        @media (min-width: ${g.breakpoint}) {
          grid-template-columns: ${g.gridSize && `repeat(${g.gridSize})`};
          grid-template-columns: ${(r = g == null ? void 0 : g.rows) == null ? void 0 : r.join(" ")};
          grid-template-rows: ${(i = g == null ? void 0 : g.rows) == null ? void 0 : i.join(" ")};
          grid-row-gap: ${g.rowGap};
          grid-column-gap: ${g.columnGap};
        }
      `;
  }
)}

  ${({ $externalStyle: d }) => d}; // Apply external styles if providedƒ
`;
export {
  y as GridContainer
};