A dismissible inline or temporary notification.
<div x-data="alert" x-show="visible" x-transition.opacity data-drupal-messages>
<div role="contentinfo" class="azalea-alert max-w-screen-2xl my-2 mx-2 md:mx-auto p-4 rounded-sm text-tertiary-50 bg-primary-700">
<div class="flex">
<div class="ml-3 my-auto flex-1">
<div :role="'error' === 'error' ? 'alert' : 'complementary'">
This is a dismissable error alert
</div>
</div>
<div class="ml-auto mr-4 pl-3" @clicked.stop="close()">
<button x-data @click.prevent="$dispatch('clicked')" @keydown.prevent="$dispatch('clicked')" class="azalea-push-button azalea-touch-action inline-flex grow-0 items-center py-2 px-4 border border-transparent rounded-sm no-underline hover:no-underline font-body font-normal text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500 whitespace-nowrap shadow-none hover:shadow-none text-lg" type="error">
<div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg></div>
</button>
</div>
</div>
</div>
</div>
{# Prop: dismissible #}
{% if dissmissible is not defined %}
{% set dissmissible = 'true' %}
{% endif %}
{# Prop: message. The text body of the alert. #}
<div x-data="alert" x-show="visible" x-transition.opacity data-drupal-messages>
{% set classes = ['azalea-alert', 'max-w-screen-2xl', 'my-2', 'mx-2', 'md:mx-auto', 'p-4', 'rounded-sm'] %}
{# Prop: type. #}
{% if type == 'error' %}
{% set classes = classes|merge(['text-tertiary-50', 'bg-primary-700']) %}
{% else %}
{% set classes = classes|merge(['text-secondary-800', 'bg-secondary-200']) %}
{% endif %}
<div role="contentinfo" class="{{ classes|join(' ') }}">
<div class="flex">
<div class="ml-3 my-auto flex-1">
<div :role="'{{ type }}' === 'error' ? 'alert' : 'complementary'">
{% block content %}{% endblock %}
{{ message|raw }}
</div>
</div>
{% if dismissible != 'false' %}
<div class="ml-auto mr-4 pl-3" @clicked.stop="close()">
{% embed "@components/push-button/push-button.twig" with { as: 'button', color: 'none' } %}
{% block content %}
{% include "@components/icon/icon.twig" with { icon: 'x' } %}
{% endblock %}
{% endembed %}
</div>
{% endif %}
</div>
</div>
</div>