@props(['label', 'value', 'tone' => 'slate'])
@php
    $tones = ['emerald' => 'bg-emerald-50 text-emerald-700 ring-emerald-100', 'sky' => 'bg-sky-50 text-sky-700 ring-sky-100', 'amber' => 'bg-amber-50 text-amber-700 ring-amber-100', 'rose' => 'bg-rose-50 text-rose-700 ring-rose-100', 'slate' => 'bg-slate-50 text-slate-700 ring-slate-100'];
@endphp
<article class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200/80">
    <span class="inline-flex rounded-lg px-2.5 py-1 text-xs font-bold {{ $tones[$tone] ?? $tones['slate'] }} ring-1">{{ $label }}</span>
    <p class="mt-4 text-2xl font-semibold tracking-tight text-slate-950">{{ $value }}</p>
</article>