{% macro input(type, id, text, xmodel, required) %}
	<div class="mb-4">
		<label for={{ id }} class="block mb-2.5 text-sm font-medium text-heading">{{ text }}</label>
		<input type={{ type }} id={{ id }} {% if xmodel %} x-model='{{xmodel}}' {% endif %} class="bg-neutral-secondary-medium border border-default-medium rounded-xl text-slate-400  text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder={{ text }} {% if required %} required {% endif %}/>
	</div>
{% endmacro %}