@props(['name', 'label' => null, 'type' => 'text', 'required' => false, 'hint' => null, 'value' => null])
<div class="space-y-1.5">
    @if ($label)
        <x-label :for="$name" :value="$label" :required="$required" />
    @endif
    <input type="{{ $type }}" name="{{ $name }}" id="{{ $name }}" @if ($value !== null) value="{{ $value }}" @endif
        @required($required)
        {{ $attributes->merge(['class' => 'block w-full rounded-xl border bg-white px-3.5 py-2.5 text-sm text-ink shadow-sm transition placeholder:text-slate-400 focus:outline-none focus:ring-2 dark:bg-slate-900 dark:text-slate-100 '
            .($errors->has($name)
                ? 'border-red-400 focus:border-red-500 focus:ring-red-500/20 dark:border-red-500'
                : 'border-slate-300 focus:border-maroon focus:ring-maroon/20 dark:border-slate-700 dark:focus:border-gold-light dark:focus:ring-gold/20')]) }}>
    @if ($errors->has($name))
        <p class="text-xs font-medium text-red-600 dark:text-red-400">{{ $errors->first($name) }}</p>
    @elseif ($hint)
        <p class="text-xs text-muted dark:text-slate-400">{{ $hint }}</p>
    @endif
</div>