@frontify/fondue/dist/components/Grid/Grid.es.js

Design system of Frontify

import { jsx as N } from "react/jsx-runtime";
import { Children as P } from "react";
import { GetGapClassName as t, GAP_DIRECTIONS as e } from "../../utilities/dimensions.es.js";
import { merge as c } from "../../utilities/merge.es.js";
import { Box as h } from "../Box/Box.es.js";
const x = "fondue-grid", D = ({
  column: r = 2,
  spacing: i = 4,
  spacingX: m,
  spacingY: d,
  children: a,
  "data-test-id": s = x,
  width: p = "100%",
  rowHeight: l = "auto",
  bg: G,
  color: n,
  margin: f,
  marginX: g,
  marginY: u,
  padding: T,
  paddingX: _,
  paddingY: A,
  as: C = "div"
}) => {
  let o = 0;
  return P.map(a, (I) => (o++, I)), /* @__PURE__ */ N(
    h,
    {
      "data-test-id": s,
      className: c([
        "tw-grid",
        G,
        n,
        t(e.GAP, i),
        t(e.GAP_X, m),
        t(e.GAP_Y, d)
      ]),
      style: {
        width: p,
        gridTemplateColumns: `repeat(${r}, 1fr)`,
        gridTemplateRows: `repeat(${Math.ceil(o / r)}, ${l})`
      },
      margin: f,
      marginX: g,
      marginY: u,
      padding: T,
      paddingX: _,
      paddingY: A,
      as: C,
      children: a
    }
  );
};
D.displayName = "FondueGrid";
export {
  x as GRID_TEST_ID,
  D as Grid
};
//# sourceMappingURL=Grid.es.js.map