<div
  x-data="{ open: true }"
  x-show="open"
  role="alert"
  class="cfa-alert flex items-start gap-cfa-sm rounded p-cfa-med max-w-xl bg-background-secondary"
>
  <span class="flex shrink-0 items-center">
    <svg viewBox="0 0 24 24" fill="none" width="24" height="24" class="cfa-icon text-icon-default" aria-hidden="true" focusable="false"><path fill="none" transform="translate(1.105 2.115)" d="M20.623 15.8889L12.623 1.8889C12.4486 1.5811 12.1956 1.32508 11.8899 1.14697C11.5842 0.968846 11.2368 0.875 10.883 0.875C10.5292 0.875 10.1818 0.968846 9.87607 1.14697C9.57039 1.32508 9.31743 1.5811 9.143 1.8889L1.143 15.8889C0.966678 16.1943 0.874224 16.5408 0.875005 16.8934C0.875786 17.246 0.969774 17.5921 1.14744 17.8967C1.32511 18.2013 1.58014 18.4535 1.88669 18.6277C2.19324 18.802 2.5404 18.8921 2.893 18.8889H18.893C19.2439 18.8885 19.5885 18.7959 19.8923 18.6202C20.196 18.4445 20.4482 18.192 20.6235 17.888C20.7988 17.584 20.891 17.2393 20.8909 16.8884C20.8909 16.5375 20.7984 16.1928 20.623 15.8889Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
      <path fill="none" transform="translate(11.12 8.125)" d="M0.875 0.875V4.875" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
      <path fill="none" transform="translate(11.125 16.12)" d="M0.875 0.875H0.885" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </span>
  <div class="flex-1 cfa-stack-xsm">
    <p class="type-body-bold">This is not legal advice</p>
    <p>If you're worried about how this could affect you, talk to a trusted attorney or advocate.</p>
  </div>
</div>