import React, { Children, useEffect, useState } from 'react';
import { makeStyles, lighten } from '@material-ui/core';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        background: (highlight) => highlight === true && lighten('#40c4ff', 0.9),
        [theme.breakpoints.down('xs')]: {
            flexDirection: 'column'
        }
    }
}));
export const GridRow = ({ children, highlight, className }) => {
    const classes = useStyles(highlight);
    const [childCount, setChildCount] = useState();
    useEffect(() => {
        const count = Children.count(children);
        setChildCount(count);
    }, [childCount, children]);
    return React.createElement("div", { className: clsx(classes.root, className) }, children);
};
//# sourceMappingURL=GridRow.js.map