<div>
  <.button phx-click={show_drawer("#bottomsheet-single-default")} data-testid="bottomsheet-default-open-button">
    Open Bottomsheet
  </.button>
  <.drawer id="bottomsheet-single-default" mode="bottomsheet">
    <div class="flex flex-col items-center" data-testid="bottomsheet-default-content">
      <h3 class="text-heading-500 transition-colors" data-testid="bottomsheet-default-title">
        Hello there
      </h3>
      <p class="text-body-500 transition-colors" data-testid="bottomsheet-default-description">
        This is a bottomsheet
      </p>
      <.button
        class="mt-space-40"
        phx-click={hide_drawer("#bottomsheet-single-default")}
        data-testid="bottomsheet-default-close-button"
      >
        Close
      </.button>
    </div>
  </.drawer>
</div>