@props([
    'name',
    'label' => null,
    'value' => '',
    'initialCountry' => 'np',
    'help' => null,
    'error' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :name="$name" :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="phoneInput({ value: @js($value), initialCountry: @js($initialCountry) })">
        <input type="tel" id="{{ $name }}" name="{{ $name }}" x-ref="input" x-model="value"
               class="w-full rounded-xl border border-slate-300 bg-white py-2.5 pr-4 text-sm text-slate-900 shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15">
    </div>
</x-forms.field>