<script lang="ts">
    let { 
        children,
        gap = '1rem',
        justify = 'flex-start',
        align = 'stretch',
        flex = '1'
    } = $props();
</script>

<div 
    class="col" 
    style:gap
    style:justify-content={justify}
    style:align-items={align}
    style:flex
>
    {@render children()}
</div>

<style>
    .col {
        display: flex;
        flex-direction: column;
    }
</style>