@grafana/ui/dist/cjs/components/Layout/Grid/Grid.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var responsiveness = require('../utils/responsiveness.cjs');

"use strict";
const Grid = React.forwardRef((props, ref) => {
  const { alignItems, children, gap, rowGap, columnGap, columns, minColumnWidth, ...rest } = props;
  const styles = ThemeContext.useStyles2(getGridStyles, gap, rowGap, columnGap, columns, minColumnWidth, alignItems);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...rest, className: styles.grid, children });
});
Grid.displayName = "Grid";
const getGridStyles = (theme, gap, rowGap, columnGap, columns, minColumnWidth, alignItems) => {
  return {
    grid: css.css([
      { display: "grid" },
      responsiveness.getResponsiveStyle(theme, gap, (val) => ({
        gap: theme.spacing(val)
      })),
      responsiveness.getResponsiveStyle(theme, rowGap, (val) => ({
        rowGap: theme.spacing(val)
      })),
      responsiveness.getResponsiveStyle(theme, columnGap, (val) => ({
        columnGap: theme.spacing(val)
      })),
      minColumnWidth && responsiveness.getResponsiveStyle(theme, minColumnWidth, (val) => ({
        gridTemplateColumns: `repeat(auto-fill, minmax(${theme.spacing(val)}, 1fr))`
      })),
      columns && responsiveness.getResponsiveStyle(theme, columns, (val) => ({
        gridTemplateColumns: `repeat(${val}, 1fr)`
      })),
      responsiveness.getResponsiveStyle(theme, alignItems, (val) => ({
        alignItems: val
      }))
    ])
  };
};

exports.Grid = Grid;
//# sourceMappingURL=Grid.cjs.map