<c-vars value></c-vars>

<div
  x-show="isOpen('{{ value }}')"
  x-transition:enter="transition-all ease-out duration-300"
  x-transition:enter-start="opacity-0 max-h-0"
  x-transition:enter-end="opacity-100 max-h-screen"
  x-transition:leave="transition-all ease-in duration-200"
  x-transition:leave-start="opacity-100 max-h-screen"
  x-transition:leave-end="opacity-0 max-h-0"
  class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
  x-bind:data-state="isOpen('{{ value }}') ? 'open' : 'closed'"
  {{ attrs }}
>
  <div class="pb-4 pt-0 {% if class %}{{ class }}{% endif %}">
    {{ slot }}
  </div>
</div>
