import React__default from 'react';

var styles = {"gridCell":"U0IgyTjmtnU-","spinning":"KceqkKMGwzE-"};

/**
 * Breakpoints that we support
 */
const breakpoints = ["xs", "sm", "md", "lg", "xl"];
const MAX_COLUMNS = 12;
const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
function GridCell({ size, children }) {
    /**
     * Build CSS variables for column sizes for all possible breakpoints to size
     * the column
     */
    const cssSizeVariables = breakpoints.reduce(getSizeCSSVariables(size), {});
    return (React__default.createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles.gridCell, style: cssSizeVariables }, children));
}
function getSizeCSSVariables(size) {
    return (breakpointsObj, currentSize) => {
        let columnSize = size[currentSize];
        // If a column size isn't provided in the size prop, use the previous
        // breakpoint's value
        if (!columnSize) {
            const existingValues = Object.values(breakpointsObj);
            const lastKnownValue = existingValues[existingValues.length - 1];
            columnSize = lastKnownValue || MAX_COLUMNS;
        }
        breakpointsObj[`--gridCell--size-${currentSize}`] = columnSize;
        return breakpointsObj;
    };
}

export { GRID_CELL_TEST_ID as G, GridCell as a };
