<div
    x-data=""
    x-init="
         Inputmask('currency', {
            numericInput: true,
            rightAlign: false,
            autoUnmask: true,
            onBeforeMask: function (value, opts) {
                if(null === value){ // fix charAt on null errors
                    value= '0.00'
                }
                return value;
            }
        }).mask($refs.input);
    "
>

    <input
        x-ref="input"
        x-on:change="$dispatch('input', $refs.input.value)"
        {{ $attributes->merge(['class' => 'text-center flex-1 block w-full py-2 px-4 border border-gr-brown-500 outline-none transition duration-150 ease-in-out sm:leading-5 text-center']) }}
        onfocus="this.select();"
    />
</div>