@props(['maxWidth' => 'md'])
@php($widths = ['sm' => 'max-w-sm', 'md' => 'max-w-md', 'lg' => 'max-w-lg', 'xl' => 'max-w-xl', '2xl' => 'max-w-2xl'])
<div x-data="{ open: false }" @keydown.escape.window="open = false">
    @isset($trigger)
        <div {{ $attributes }} @click="open = true">{{ $trigger }}</div>
    @endisset

    <div x-cloak x-show="open" class="fixed inset-0 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true">
        <div x-show="open" x-transition.opacity class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm" @click="open = false" aria-hidden="true"></div>

        <div x-show="open" x-transition class="relative w-full {{ $widths[$maxWidth] }} rounded-2xl bg-white p-6 shadow-xl dark:bg-slate-900 dark:ring-1 dark:ring-slate-800">
            {{ $slot }}
        </div>
    </div>
</div>