@props(['show', 'title', 'maxWidth' => 'max-w-2xl'])
<div x-cloak x-show="{{ $show }}" @keydown.escape.window="$el.querySelector('[aria-label=Fechar]').click()" class="fixed inset-0 z-[70] overflow-y-auto" role="dialog" aria-modal="true" aria-label="{{ $title }}">
    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-6">
        <div x-show="{{ $show }}" x-transition.opacity class="fixed inset-0 bg-zinc-950/70" aria-hidden="true"></div>
        <div x-show="{{ $show }}" x-transition class="relative w-full {{ $maxWidth }} rounded-t-3xl bg-white shadow-2xl sm:rounded-2xl">
            <div class="flex items-center justify-between border-b border-zinc-200 px-5 py-4 sm:px-6"><h2 class="text-lg font-extrabold text-zinc-950">{{ $title }}</h2><button type="button" {{ $attributes }} class="rounded-lg p-2 text-zinc-500 hover:bg-zinc-100" aria-label="Fechar"><x-ui.icon name="x" /></button></div>
            <div class="max-h-[75vh] overflow-y-auto p-5 sm:p-6">{{ $slot }}</div>
        </div>
    </div>
</div>