import { jsx as _jsx } from "react/jsx-runtime";
import Box from '../box';
import { useStyleConfig, vui } from '../core';
import { cs } from '../utils';
import { useFooterContext } from './context';
import FooterSection from './footerSection';
/** Organizes sections with links into a single column. Different width per breakpoint. */
const FooterColumn = vui((props, ref) => {
    const { children, className, sections, ...rest } = props;
    const styles = useStyleConfig('Footer', useFooterContext());
    return (_jsx(Box, { className: cs('vui-footerColumn', className), column: true, flex: { xs: '0 0 50%', sm: '0 0 50%', md: '0 0 25%' }, minW: 164, p: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, ref: ref, spaceY: 4, ...styles.column, ...rest, children: children ?? sections?.map((section, index) => _jsx(FooterSection, { ...section }, index)) }));
});
FooterColumn.displayName = 'FooterColumn';
export default FooterColumn;
//# sourceMappingURL=footerColumn.js.map