import { remToPx, stripUnit } from 'polished';
import { useMemo } from 'react';
import { useTheme } from '../../../hooks';
/**
 * Config common to GridLayoutEditor and GridLayoutViewer.
 * These properties need to stay consistent between the design-time and run-time layouts.
 * @returns Default RGL props for the GridLayout editor/viewer
 */
export default function useGridLayoutConfig() {
    const theme = useTheme();
    return useMemo(() => {
        // Determine Gap around different grid cells (px)
        let gap;
        try {
            // Just for safety in case the value is not in rem etc.
            // `polished` throws errors in those scenarios
            // Shouldn't normally needed since Cosmos values are always in `rem`s
            gap = 2 * Number(stripUnit(remToPx(theme.base.spacing)));
        }
        catch (e) {
            // eslint-disable-next-line no-console
            console.warn(e);
            gap = 16;
        }
        return {
            margin: [gap, gap],
            containerPadding: [gap, 0],
            compactType: 'vertical'
        };
    }, [theme]);
}
//# sourceMappingURL=config.js.map