Announcement Bar Base

<div class="ws-announcement-bar relative bg-blue-600 px-4 py-2.5 text-center text-sm text-white" style="--announcement-primary: var(--ws-color-primary);" role="alert">
  <div class="mx-auto flex max-w-7xl items-center justify-center gap-2">
    <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
    <p>
      <span class="font-medium">New release!</span>
      Version 2.0 is now available with 50+ new patterns.
      <a href="#" class="ml-1 underline decoration-white/50 underline-offset-2 hover:decoration-white">Learn more →</a>
    </p>
  </div>
  <button class="absolute right-3 top-1/2 -translate-y-1/2 rounded p-1 text-white/70 hover:text-white transition-colors" aria-label="Dismiss">
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
  </button>
</div>