@wulperstudio/cms/node/organisms/MasonryGrid/index.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MasonryGrid = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "sx"];
var MasonryGrid = exports.MasonryGrid = function MasonryGrid(_ref) {
  var children = _ref.children,
    sx = _ref.sx,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
    sx: Object.assign({
      '--gap': 'clamp(1rem, 3vmin, 1rem)',
      columns: '270px',
      gap: 'var(--gap)',
      width: '96%',
      maxWidth: '960px',
      margin: '5rem auto',
      '& > *': {
        breakInside: 'avoid',
        marginBottom: 'var(--gap)'
      }
    }, sx)
  }, props, {
    children: children
  }));
};