@props(['tone' => 'info', 'icon' => null, 'title' => null])
@php
    $icon ??= ['info' => 'information-circle', 'success' => 'check-circle', 'warning' => 'exclamation-triangle', 'danger' => 'x-circle'][$tone] ?? 'information-circle';
    $styles = [
        'info' => 'bg-sky-50 text-sky-800 ring-sky-200',
        'success' => 'bg-emerald-50 text-emerald-800 ring-emerald-200',
        'warning' => 'bg-amber-50 text-amber-900 ring-amber-200',
        'danger' => 'bg-rose-50 text-rose-800 ring-rose-200',
    ][$tone] ?? 'bg-slate-50 text-slate-800 ring-slate-200';
@endphp
<div {{ $attributes->merge(['class' => "flex gap-3 rounded-lg p-3.5 text-sm ring-1 ring-inset {$styles}"]) }} role="{{ $tone === 'danger' ? 'alert' : 'status' }}">
    <x-icon :name="$icon" class="mt-px size-5 shrink-0" />
    <div class="min-w-0">
        @if ($title)<p class="font-semibold">{{ $title }}</p>@endif
        <div @class(['mt-0.5' => $title])>{{ $slot }}</div>
    </div>
</div>