@props(['disabled' => false, 'label' => null, 'id' => rand(9, 99999), 'group' => false])
<div>
    @if ($label)
        <label class="mb-1.5 text-start block text-sm font-medium text-gray-700 dark:text-gray-400">
            {{ $label }}
        </label>
    @endif
    <div class="relative z-20 bg-transparent">
        <select id="{{ $id }}" {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge([
            'class' =>
                ' shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30',
        ]) !!}>
            {{ $slot }}
        </select>
        <span
            class="pointer-events-none absolute top-1/2 {{ $group ? 'right-12' : 'right-4' }} z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
            <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </span>
        {{ $action ?? null }}
    </div>
    <p class="text-theme-xs text-error-500">{{ $errors->first($attributes->get('wire:model')) }}</p>
</div>