<div class="flex gap-2 flex-wrap">
    <c-lb.button variant="outline" onclick="xs_modal.showModal()">XS Modal</c-lb.button>
    <c-lb.button variant="outline" onclick="sm_modal.showModal()">SM Modal</c-lb.button>
    <c-lb.button variant="outline" onclick="md_modal.showModal()">MD Modal</c-lb.button>
    <c-lb.button variant="outline" onclick="lg_modal.showModal()">LG Modal</c-lb.button>
    <c-lb.button variant="outline" onclick="xl_modal.showModal()">XL Modal</c-lb.button>
    <c-lb.button variant="outline" onclick="screen_modal.showModal()">Screen Modal</c-lb.button>
</div>

<c-lb.modal id="xs_modal" size="xs" boxClass="shadow">
    <h3 class="font-bold text-lg">XS Modal</h3>
    <p class="py-4">This is an extra small modal</p>
    <c-lb.modal.action>
        <form method="dialog">
            <c-lb.button>Close</c-lb.button>
        </form>
    </c-lb.modal.action>
</c-lb.modal>

<c-lb.modal id="sm_modal" size="sm" boxClass="shadow">
    <h3 class="font-bold text-lg">SM Modal</h3>
    <p class="py-4">This is a small modal</p>
    <c-lb.modal.action>
        <form method="dialog">
            <c-lb.button>Close</c-lb.button>
        </form>
    </c-lb.modal.action>
</c-lb.modal>

<c-lb.modal id="md_modal" size="md" boxClass="shadow">
    <h3 class="font-bold text-lg">MD Modal</h3>
    <p class="py-4">This is a medium modal</p>
    <c-lb.modal.action>
        <form method="dialog">
            <c-lb.button>Close</c-lb.button>
        </form>
    </c-lb.modal.action>
</c-lb.modal>

<c-lb.modal id="lg_modal" size="lg" boxClass="shadow">
    <h3 class="font-bold text-lg">LG Modal</h3>
    <p class="py-4">This is a large modal</p>
    <c-lb.modal.action>
        <form method="dialog">
            <c-lb.button>Close</c-lb.button>
        </form>
    </c-lb.modal.action>
</c-lb.modal>

<c-lb.modal id="xl_modal" size="xl" boxClass="shadow">
    <h3 class="font-bold text-lg">XL Modal</h3>
    <p class="py-4">This is an extra large modal</p>
    <c-lb.modal.action>
        <form method="dialog">
            <c-lb.button>Close</c-lb.button>
        </form>
    </c-lb.modal.action>
</c-lb.modal>

<c-lb.modal id="screen_modal" size="screen" boxClass="shadow">
    <h3 class="font-bold text-lg">Screen Modal</h3>
    <p class="py-4">This modal takes up most of the screen width</p>
    <c-lb.modal.action>
        <form method="dialog">
            <c-lb.button>Close</c-lb.button>
        </form>
    </c-lb.modal.action>
</c-lb.modal>
