{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-1",
  "name": "file-upload-1",
  "label": {
    "text": "Sube un archivo"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-1">Sube un archivo</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-1" name="file-upload-1" type="file">
</div>
<!-- /file-upload -->
            

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-2",
  "name": "file-upload-2",
  "label": {
    "text": "Sube una foto"
  },
  "hint": {
    "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-2">Sube una foto</label>
  <!-- /label -->
  <!-- hint -->
  <p id="file-upload-2-hint" class="block text-neutral-dark">Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.</p>
  <!-- /hint -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
</div>
<!-- /file-upload -->
            

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-3",
  "name": "file-upload-3",
  "label": {
    "text": "Sube un archivo"
  },
  "hint": {
    "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

<!-- file-upload -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="file-upload-3">Sube un archivo</label>
  <!-- /label -->
  <!-- hint -->
  <p id="file-upload-3-hint" class="block text-neutral-dark">Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="file-upload-3-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none c-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint" aria-errormessage="file-upload-3-error" aria-invalid="true">
</div>
<!-- /file-upload -->
            

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-4",
  "name": "file-upload-4",
  "label": {
    "text": "Sube una foto"
  },
  "attributes": {
    "accept": ".jpg, .jpeg, .png"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-4">Sube una foto</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-4" name="file-upload-4" type="file" accept=".jpg, .jpeg, .png">
</div>
<!-- /file-upload -->
            

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-6",
  "name": "file-upload-6",
  "label": {
    "text": "Sube un archivo"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none",
  "formGroup": {
    "classes": "p-base bg-warning-light"
  }
}) }}

<!-- file-upload -->
<div class="c-form-group p-base bg-warning-light">
  <!-- label -->
  <label class="block" for="file-upload-6">Sube un archivo</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-hidden file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded-sm file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-hidden file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-6" name="file-upload-6" type="file">
</div>
<!-- /file-upload -->