"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tiles = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const View_1 = require("../View");
const units_1 = require("../../utilities/units");
const Tiles_css_1 = __importDefault(require("./Tiles.css"));
function Tiles({ children, maxPerLine, breakAt, alignment, spacing, }) {
    const className = css_utilities_1.classNames(Tiles_css_1.default.Tiles, spacing && Tiles_css_1.default[css_utilities_1.variationName('spacing', spacing)], alignment && Tiles_css_1.default[css_utilities_1.variationName('alignment', alignment)], maxPerLine ? undefined : Tiles_css_1.default.doesNotWrap, breakAt ? undefined : Tiles_css_1.default.doesNotBreak);
    const tileWidth = maxPerLine ? `${100 / maxPerLine}%` : undefined;
    const tileBreakPoint = breakAt ? units_1.rem(breakAt) : undefined;
    const style = {
        '--tile-width': tileWidth /* stylelint-disable-line value-keyword-case */,
        '--tiles-breakpoint': tileBreakPoint /* stylelint-disable-line value-keyword-case */,
    };
    return (
    /* View is to avoid problems with negative margins when nested inside other layouts */
    <View_1.View>
      <div className={className} style={style}>
        {children}
      </div>
    </View_1.View>);
}
exports.Tiles = Tiles;