@props([
    'label'             => null,
    'labelDescription'  => null,
    'labelClass'        => null,
    'hint'              => null,
    'for'               => null,
    'description'       => null,
    'error'             => null,
    'required'          => false,
])

<div {{ $attributes->merge(['class' => 'flex flex-col gap-2']) }}>

    @if ($label)
        {{-- With a hint, label + hint are grouped so the hint sits tight
             under the label, with the usual gap before the input. The input
             should reference {for}-hint in its aria-describedby. --}}
        @if ($hint) <div class="flex flex-col gap-1"> @endif

        <label
            @if ($for) for="{{ $for }}" @endif
            @if ($labelClass) class="{{ $labelClass }}" @endif
        >{{ $label }}@if ($required)<span class="ml-1" aria-hidden="true">*</span>@endif @if ($labelDescription) <span class="text-sm text-neutral-500">({{ $labelDescription }})</span> @endif</label>

        @if ($hint)
            <p
                @if ($for) id="{{ $for }}-hint" @endif
                class="text-sm text-neutral-500"
            >{{ $hint }}</p>
        </div>
        @endif
    @endif

    {{ $slot }}

    @if ($description && ! $error)
        <p
            @if ($for) id="{{ $for }}-description" @endif
            class="text-sm text-neutral-500"
        >{{ $description }}</p>
    @endif

    @if ($error)
        <p
            @if ($for) id="{{ $for }}-error" @endif
            role="alert"
            class="text-sm text-red-600"
        >{{ $error }}</p>
    @endif

</div>