@lanaco/lnc-react-ui/dist/Grid.js

React component library

import { jsx as j } from "react/jsx-runtime";
import { forwardRef as w } from "react";
import { s as G } from "./emotion-styled.browser.esm-DfbrHHed.js";
const C = G.div`
  display: ${(t) => t.inline ? "inline-grid" : "grid"};
  row-gap: ${(t) => t.rowGap ? t.rowGap : t.gap ? t.gap : 0};
  column-gap: ${(t) => t.columnGap ? t.columnGap : t.gap ? t.gap : 0};
  ${(t) => t.gridTemplate && `grid-template: ${t.gridTemplate};`}
  ${(t) => t.templateRows && `grid-template-rows: ${t.templateRows};`}
  ${(t) => t.templateColumns && `grid-template-columns: ${t.templateColumns};`}
  ${(t) => t.justifyItems && `justify-items: ${t.justifyItems};`} 
  ${(t) => t.alignItems && `align-items: ${t.alignItems};`} 
  ${(t) => t.justifyContent && `justify-content: ${t.justifyContent};`} 
  ${(t) => t.templateAreas && `grid-template-areas: ${t.templateAreas};`}
`, I = w((t, e) => {
  const {
    inline: a = !1,
    template: l,
    templateColumns: m,
    templateRows: i,
    gap: s,
    rowGap: n,
    columnGap: r,
    justifyItems: g,
    alignItems: o,
    justifyContent: d,
    templateAreas: u,
    children: f,
    className: $ = "",
    style: y = {},
    ...c
  } = t;
  var p = {
    inline: a,
    template: l,
    templateColumns: m,
    templateRows: i,
    gap: s,
    rowGap: n,
    columnGap: r,
    justifyItems: g,
    alignItems: o,
    justifyContent: d,
    templateAreas: u
  };
  return /* @__PURE__ */ j(
    C,
    {
      ref: e,
      ...p,
      className: $,
      style: y,
      ...c,
      children: f
    }
  );
});
I.defaultProps = {
  inline: !1,
  style: {},
  className: ""
};
export {
  I as default
};