<label
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
  >
    <input
      tabindex="-1"
      type="file"
      class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
    />
    <div class="flex items-center space-x-2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
        />
      </svg>
      <span>Choose File</span>
    </div>
  </label>
  <label
    class="btn relative bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
  >
    <input
      tabindex="-1"
      type="file"
      class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
    />
    <div class="flex items-center space-x-2">
      <i class="fa-solid fa-cloud-arrow-up text-base"></i>
      <span>Choose File</span>
    </div>
  </label>
  <label
    class="btn border border-slate-300 font-medium text-slate-600 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-100 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
  >
    <input
      tabindex="-1"
      type="file"
      class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
    />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
      />
    </svg>
  </label>
  <label
    class="btn size-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus hover:shadow-lg hover:shadow-info/50 focus:bg-info-focus active:bg-info-focus/90"
  >
    <input
      tabindex="-1"
      type="file"
      class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
    />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
      />
    </svg>
  </label>
                
              

                
  <div class="filepond fp-bordered">
    <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
  </div>

              

                
  <div class="filepond fp-bg-filled">
    <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
  </div>

              

                
  <div class="filepond fp-bordered fp-bg-filled">
    <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
  </div>

              

                
  <div class="filepond fp-grid fp-bordered [--fp-grid:2]">
    <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
  </div>

                
              

                
  <div class="filepond fp-grid fp-bordered [--fp-grid:3]">
    <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
  </div>

                
              

                
  <div class="filepond fp-grid fp-bordered [--fp-grid:4]">
    <input type="file"  x-init="$el._x_filepond = FilePond.create($el)" multiple />
  </div>

                
              

                
  <div class="filepond fp-bordered label-icon w-28">
    <input
      type="file"
      x-init="$el._x_filepond = FilePond.create($el,{
            stylePanelAspectRatio: '1:1',
            stylePanelLayout: 'compact circle',
            labelIdle: `<svg xmlns='http://www.w3.org/2000/svg' class='size-8' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12'/>
            </svg>`
          })"
      accept="image/png, image/jpeg, image/gif"
    />
  </div>
  <div class="filepond fp-bordered label-icon w-24">
    <input
      type="file"
      x-init="$el._x_filepond = FilePond.create($el,{
            stylePanelAspectRatio: '1:1',
            stylePanelLayout: 'compact circle',
            labelIdle: `<svg xmlns='http://www.w3.org/2000/svg' class='size-8' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12'/>
            </svg>`
          })"
      accept="image/png, image/jpeg, image/gif"
    />
  </div>
  <div class="filepond fp-bg-filled label-icon w-20">
    <input
      type="file"
      x-init="$el._x_filepond = FilePond.create($el,{
            stylePanelAspectRatio: '1:1',
            stylePanelLayout: 'compact circle',
            labelIdle: `<svg xmlns='http://www.w3.org/2000/svg' class='size-8' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
              <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12'/>
            </svg>`
          })"
      accept="image/png, image/jpeg, image/gif"
    />
  </div>