@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/alert/alert.js

@@ -1,867 +1,148 @@
-import { css as g, nothing as p, html as r } from "lit";
-import { property as t } from "lit/decorators.js";
-import "../button/button.js";
-import "../link/link.js";
-import "../heading/heading.js";
-import "../text-passage/text-passage.js";
-import "../icon/icon.js";
-import { Cre8Element as h } from "../cre8-element.js";
-const u = g`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-dialog {
-  border: none;
-  width: 100%;
-}
-
-.cre8-c-alert {
-  padding: var(--cre8-spacing-16);
-  border-width: var(--cre8-border-width-default);
-  border-style: var(--cre8-border-style-default);
-  border-radius: var(--cre8-border-radius-container) !important;
-}
-.cre8-c-alert .cre8-c-alert__container {
-  display: flex;
-  gap: var(--cre8-spacing-8);
-  position: relative;
-}
-.cre8-c-alert .cre8-c-alert__container .cre8-c-alert__message-container {
-  color: var(--cre8-color-content-knockout);
-  display: flex;
-  flex-direction: column;
-}
-.cre8-c-alert .cre8-c-alert__container .cre8-c-alert__message-container .cre8-c-alert__heading-container {
-  font-family: var(--cre8-typography-title-small-mobile-font-family);
-  font-size: var(--cre8-typography-title-small-mobile-font-size);
-  font-weight: var(--cre8-typography-title-small-mobile-font-weight);
-  line-height: var(--cre8-typography-title-small-mobile-line-height);
-  text-decoration: var(--cre8-typography-title-small-mobile-text-decoration);
-  text-transform: var(--cre8-typography-title-small-mobile-text-transform);
-}
-@media all and (min-width: 768px) {
-  .cre8-c-alert .cre8-c-alert__container .cre8-c-alert__message-container .cre8-c-alert__heading-container {
-    font-family: var(--cre8-typography-title-small-font-family);
-    font-size: var(--cre8-typography-title-small-font-size);
-    font-weight: var(--cre8-typography-title-small-font-weight);
-    line-height: var(--cre8-typography-title-small-line-height);
-    text-decoration: var(--cre8-typography-title-small-text-decoration);
-    text-transform: var(--cre8-typography-title-small-text-transform);
-  }
-}
-.cre8-c-alert .cre8-c-alert__container .cre8-c-alert__message-container .cre8-c-alert__body-container {
-  font-family: var(--cre8-typography-body-small-font-family);
-  font-size: var(--cre8-typography-body-small-font-size);
-  font-weight: var(--cre8-typography-body-small-font-weight);
-  line-height: var(--cre8-typography-body-small-line-height);
-  text-decoration: var(--cre8-typography-body-small-text-decoration);
-  text-transform: var(--cre8-typography-body-small-text-transform);
-  padding-bottom: var(--cre8-spacing-8);
-}
-.cre8-c-alert .cre8-c-alert__container .cre8-c-alert__message-container .cre8-c-alert__footer-container {
-  padding: 0;
-}
-.cre8-c-alert .cre8-c-alert__close-btn {
-  position: absolute;
-  top: -10px;
-  right: 0px;
-}
-.cre8-c-alert.cre8-c-alert--emphasis-subtle .cre8-c-alert__message-container {
-  color: var(--cre8-color-content-default);
-}
-.cre8-c-alert.cre8-c-alert--banner {
-  border-radius: 0;
-  border: none;
-}
-.cre8-c-alert.cre8-c-alert--warning .cre8-c-alert__message-container {
-  color: var(--cre8-color-content-default);
-}
-
-.cre8-c-alert--standalone {
-  border-radius: var(--cre8-border-radius-container);
-  width: 22.5rem;
-}
-.cre8-c-alert--standalone .cre8-c-alert__container {
-  display: flex;
-  gap: var(--cre8-spacing-8);
-  position: relative;
-}
-
-.cre8-c-alert__icon {
-  height: var(--cre8-spacing-16);
-  min-height: var(--cre8-spacing-16);
-  width: var(--cre8-spacing-16);
-  min-width: var(--cre8-spacing-16);
-}
-
-.cre8-c-alert--info,
-.cre8-c-alert--success,
-.cre8-c-alert--error,
-.cre8-c-alert--neutral,
-.cre8-c-alert--notification {
-  color: var(--cre8-color-content-knockout);
-}
-
-/**
- * Alert info
- */
-.cre8-c-alert--info {
-  background: var(--cre8-color-bg-info-strong);
-  border-color: var(--cre8-color-border-info);
-}
-.cre8-c-alert--info.cre8-c-alert--emphasis-subtle {
-  background: var(--cre8-color-bg-info);
-  color: var(--cre8-color-content-info-icon);
-}
-
-/**
- * Alert warning
- */
-.cre8-c-alert--warning {
-  background: var(--cre8-color-bg-warning-strong);
-  border-color: var(--cre8-color-border-warning);
-  color: var(--cre8-color-content-default);
-}
-.cre8-c-alert--warning.cre8-c-alert--emphasis-subtle {
-  background: var(--cre8-color-bg-warning);
-}
-
-/**
- * Alert success
- */
-.cre8-c-alert--success {
-  background: var(--cre8-color-bg-success-strong);
-  border-color: var(--cre8-color-border-success);
-}
-.cre8-c-alert--success.cre8-c-alert--emphasis-subtle {
-  background: var(--cre8-color-bg-success);
-  color: var(--cre8-color-content-success-icon);
-}
-
-/**
- * Alert error
- */
-.cre8-c-alert--error {
-  background: var(--cre8-color-bg-error-strong);
-  border-color: var(--cre8-color-border-error);
-}
-.cre8-c-alert--error.cre8-c-alert--emphasis-subtle {
-  background: var(--cre8-color-bg-error);
-  color: var(--cre8-color-content-error-icon);
-}
-
-/**
- * Alert neutral
- */
-.cre8-c-alert--neutral {
-  background: var(--cre8-color-bg-strong);
-  border-color: var(--cre8-color-border-neutral);
-}
-.cre8-c-alert--neutral.cre8-c-alert--emphasis-subtle {
-  background: var(--cre8-color-bg-subtle);
-  color: var(--cre8-color-content-default);
-}
-
-/**
- * Alert notification
- */
-.cre8-c-alert--notification {
-  background: var(--cre8-color-bg-attention-strong);
-  border-color: var(--cre8-color-border-attention);
-}
-.cre8-c-alert--notification.cre8-c-alert--emphasis-subtle {
-  background: var(--cre8-color-bg-subtle);
-  color: var(--cre8-color-content-attention-icon);
-}`;
-var f = Object.defineProperty, i = (s, a, l, w) => {
-  for (var o = void 0, n = s.length - 1, d; n >= 0; n--)
-    (d = s[n]) && (o = d(a, l, o) || o);
-  return o && f(a, l, o), o;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const C = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7714 12.5776L9.52528 1.73028C9.36919 1.46453 9.14637 1.24418 8.87889 1.09107C8.61141 0.937966 8.30856 0.857422 8.00036 0.857422C7.69216 0.857422 7.38931 0.937966 7.12182 1.09107C6.85434 1.24418 6.63152 1.46453 6.47543 1.73028L0.229326 12.5776C0.079145 12.8346 0 13.127 0 13.4247C0 13.7224 0.079145 14.0147 0.229326 14.2718C0.383411 14.5391 0.605857 14.7607 0.873837 14.9137C1.14182 15.0667 1.44568 15.1457 1.75425 15.1425H14.2465C14.5548 15.1454 14.8584 15.0663 15.1261 14.9133C15.3938 14.7603 15.616 14.5389 15.77 14.2718C15.9204 14.0149 15.9997 13.7226 16 13.4249C16.0002 13.1272 15.9214 12.8348 15.7714 12.5776ZM7.42896 6.57146C7.42896 6.41992 7.48916 6.27458 7.59632 6.16742C7.70347 6.06026 7.84881 6.00006 8.00036 6.00006C8.1519 6.00006 8.29724 6.06026 8.4044 6.16742C8.51155 6.27458 8.57176 6.41992 8.57176 6.57146V9.42846C8.57176 9.58 8.51155 9.72534 8.4044 9.8325C8.29724 9.93966 8.1519 9.99986 8.00036 9.99986C7.84881 9.99986 7.70347 9.93966 7.59632 9.8325C7.48916 9.72534 7.42896 9.58 7.42896 9.42846V6.57146ZM8.00036 12.8569C7.83084 12.8569 7.66513 12.8066 7.52418 12.7124C7.38323 12.6182 7.27337 12.4844 7.2085 12.3278C7.14363 12.1711 7.12665 11.9988 7.15973 11.8325C7.1928 11.6663 7.27443 11.5136 7.3943 11.3937C7.51416 11.2738 7.66688 11.1922 7.83314 11.1591C7.9994 11.1261 8.17174 11.143 8.32835 11.2079C8.48497 11.2728 8.61883 11.3826 8.71301 11.5236C8.80719 11.6645 8.85746 11.8302 8.85746 11.9998C8.85746 12.2271 8.76715 12.4451 8.60642 12.6058C8.44568 12.7666 8.22767 12.8569 8.00036 12.8569Z"/>
-</svg>
-`, b = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM11.5123 6.58923L7.20462 10.8969C7.14746 10.9541 7.07959 10.9995 7.00489 11.0305C6.93018 11.0615 6.8501 11.0774 6.76923 11.0774C6.68836 11.0774 6.60828 11.0615 6.53358 11.0305C6.45887 10.9995 6.391 10.9541 6.33385 10.8969L4.48769 9.05077C4.37222 8.9353 4.30735 8.77868 4.30735 8.61538C4.30735 8.45208 4.37222 8.29547 4.48769 8.18C4.60317 8.06453 4.75978 7.99966 4.92308 7.99966C5.08638 7.99966 5.24299 8.06453 5.35846 8.18L6.76923 9.59154L10.6415 5.71846C10.6987 5.66128 10.7666 5.61593 10.8413 5.58499C10.916 5.55404 10.9961 5.53812 11.0769 5.53812C11.1578 5.53812 11.2378 5.55404 11.3126 5.58499C11.3873 5.61593 11.4551 5.66128 11.5123 5.71846C11.5695 5.77564 11.6148 5.84351 11.6458 5.91822C11.6767 5.99292 11.6927 6.07299 11.6927 6.15384C11.6927 6.2347 11.6767 6.31477 11.6458 6.38947C11.6148 6.46418 11.5695 6.53205 11.5123 6.58923Z"/>
-</svg>
-`, m = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM7.69231 3.69231C7.87488 3.69231 8.05334 3.74644 8.20514 3.84787C8.35694 3.9493 8.47526 4.09347 8.54512 4.26214C8.61499 4.43081 8.63327 4.61641 8.59765 4.79547C8.56203 4.97453 8.47412 5.139 8.34502 5.2681C8.21593 5.39719 8.05145 5.48511 7.87239 5.52072C7.69333 5.55634 7.50773 5.53806 7.33906 5.46819C7.17039 5.39833 7.02623 5.28002 6.9248 5.12822C6.82337 4.97642 6.76923 4.79795 6.76923 4.61538C6.76923 4.37057 6.86649 4.13578 7.0396 3.96267C7.21271 3.78956 7.44749 3.69231 7.69231 3.69231ZM8.61539 12.3077C8.28897 12.3077 7.97591 12.178 7.7451 11.9472C7.51429 11.7164 7.38462 11.4033 7.38462 11.0769V8C7.22141 8 7.06488 7.93516 6.94947 7.81976C6.83407 7.70435 6.76923 7.54782 6.76923 7.38461C6.76923 7.2214 6.83407 7.06488 6.94947 6.94947C7.06488 6.83406 7.22141 6.76923 7.38462 6.76923C7.71104 6.76923 8.02409 6.8989 8.2549 7.12971C8.48572 7.36053 8.61539 7.67358 8.61539 8V11.0769C8.7786 11.0769 8.93512 11.1418 9.05053 11.2572C9.16594 11.3726 9.23077 11.5291 9.23077 11.6923C9.23077 11.8555 9.16594 12.012 9.05053 12.1274C8.93512 12.2429 8.7786 12.3077 8.61539 12.3077Z"/>
-</svg>
-`, v = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM7.38462 4.30769C7.38462 4.14448 7.44945 3.98796 7.56486 3.87255C7.68027 3.75714 7.83679 3.69231 8 3.69231C8.16321 3.69231 8.31974 3.75714 8.43514 3.87255C8.55055 3.98796 8.61539 4.14448 8.61539 4.30769V8.61538C8.61539 8.77859 8.55055 8.93512 8.43514 9.05053C8.31974 9.16593 8.16321 9.23077 8 9.23077C7.83679 9.23077 7.68027 9.16593 7.56486 9.05053C7.44945 8.93512 7.38462 8.77859 7.38462 8.61538V4.30769ZM8 12.3077C7.81743 12.3077 7.63897 12.2536 7.48717 12.1521C7.33537 12.0507 7.21706 11.9065 7.14719 11.7379C7.07732 11.5692 7.05904 11.3836 7.09466 11.2045C7.13028 11.0255 7.21819 10.861 7.34729 10.7319C7.47638 10.6028 7.64086 10.5149 7.81992 10.4793C7.99898 10.4437 8.18458 10.4619 8.35325 10.5318C8.52192 10.6017 8.66608 10.72 8.76751 10.8718C8.86894 11.0236 8.92308 11.202 8.92308 11.3846C8.92308 11.6294 8.82583 11.8642 8.65271 12.0373C8.4796 12.2104 8.24482 12.3077 8 12.3077Z"/>
-</svg>
-`, y = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.7133 15.4286C11.7133 15.5802 11.6531 15.7255 11.5459 15.8327C11.4388 15.9398 11.2934 16 11.1419 16H5.42827C5.27674 16 5.13141 15.9398 5.02426 15.8327C4.91711 15.7255 4.85691 15.5802 4.85691 15.4286C4.85691 15.2771 4.91711 15.1318 5.02426 15.0246C5.13141 14.9175 5.27674 14.8573 5.42827 14.8573H11.1419C11.2934 14.8573 11.4388 14.9175 11.5459 15.0246C11.6531 15.1318 11.7133 15.2771 11.7133 15.4286ZM14.5701 6.28682C14.5726 7.23931 14.3574 8.17978 13.941 9.03644C13.5246 9.89311 12.918 10.6433 12.1675 11.2298C12.0272 11.3374 11.9133 11.4756 11.8346 11.6339C11.7558 11.7923 11.7144 11.9665 11.7133 12.1433V12.5718C11.7133 12.8749 11.5929 13.1655 11.3786 13.3798C11.1643 13.5942 10.8736 13.7145 10.5705 13.7145H5.99964C5.69657 13.7145 5.40591 13.5942 5.19161 13.3798C4.9773 13.1655 4.85691 12.8749 4.85691 12.5718V12.1433C4.85679 11.9686 4.81662 11.7963 4.73949 11.6395C4.66235 11.4828 4.55031 11.3458 4.41196 11.2391C3.66333 10.6561 3.05715 9.91037 2.63929 9.05844C2.22143 8.20652 2.00285 7.2707 2.00009 6.32182C1.98152 2.91792 4.73264 0.0832435 8.13368 0.00182421C8.97169 -0.0183701 9.80527 0.129276 10.5854 0.436073C11.3655 0.74287 12.0763 1.20262 12.6761 1.78826C13.2758 2.3739 13.7523 3.07359 14.0776 3.84616C14.4029 4.61873 14.5703 5.44857 14.5701 6.28682ZM12.2768 5.61976C12.1286 4.7922 11.7305 4.02991 11.1359 3.4355C10.5414 2.8411 9.77903 2.44311 8.95144 2.29513C8.87744 2.28266 8.80171 2.28488 8.72857 2.30168C8.65543 2.31847 8.58631 2.34951 8.52516 2.39301C8.46401 2.43652 8.41204 2.49164 8.37219 2.55524C8.33235 2.61883 8.30542 2.68965 8.29295 2.76365C8.28047 2.83765 8.2827 2.91339 8.29949 2.98653C8.31628 3.05967 8.34732 3.12879 8.39083 3.18993C8.43433 3.25108 8.48946 3.30306 8.55305 3.3429C8.61664 3.38275 8.68746 3.40967 8.76147 3.42215C9.9449 3.62141 10.9491 4.62558 11.1498 5.81116C11.1724 5.94423 11.2414 6.065 11.3445 6.15207C11.4477 6.23914 11.5783 6.28687 11.7133 6.28682C11.7456 6.28663 11.7778 6.284 11.8097 6.27897C11.959 6.25347 12.0921 6.1697 12.1797 6.04608C12.2673 5.92246 12.3022 5.76911 12.2768 5.61976Z"/>
-</svg>
-`, x = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7656 14.6336C15.8399 14.708 15.8988 14.7962 15.9391 14.8933C15.9793 14.9904 16 15.0945 16 15.1996C16 15.3047 15.9793 15.4088 15.9391 15.5059C15.8988 15.603 15.8399 15.6912 15.7656 15.7656C15.6912 15.8399 15.603 15.8988 15.5059 15.9391C15.4088 15.9793 15.3047 16 15.1996 16C15.0945 16 14.9904 15.9793 14.8933 15.9391C14.7962 15.8988 14.708 15.8399 14.6336 15.7656L8 9.13094L1.36637 15.7656C1.21626 15.9157 1.01268 16 0.8004 16C0.588121 16 0.384536 15.9157 0.234432 15.7656C0.0843276 15.6155 4.18453e-09 15.4119 0 15.1996C-4.18453e-09 14.9873 0.0843276 14.7837 0.234432 14.6336L6.86906 8L0.234432 1.36637C0.0843276 1.21626 0 1.01268 0 0.8004C0 0.588121 0.0843276 0.384536 0.234432 0.234432C0.384536 0.0843276 0.588121 0 0.8004 0C1.01268 0 1.21626 0.0843276 1.36637 0.234432L8 6.86906L14.6336 0.234432C14.7837 0.0843276 14.9873 -4.18453e-09 15.1996 0C15.4119 4.18453e-09 15.6155 0.0843276 15.7656 0.234432C15.9157 0.384536 16 0.588121 16 0.8004C16 1.01268 15.9157 1.21626 15.7656 1.36637L9.13094 8L15.7656 14.6336Z"/>
-</svg>
-`, c = class c extends h {
-  constructor() {
-    super(...arguments), this.status = "info", this.variant = "standalone", this.emphasis = "subtle", this.iconAlert = void 0, this.headerText = void 0, this.ctaBody = void 0, this.checkEmphasisAlert = () => this.emphasis !== "subtle", this.mapStatusToIconAlert = (a) => {
-      switch (a) {
-        case "error":
-          return r`<cre8-icon
-              svg="${v}"
+import svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';
+import svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';
+import svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';
+import svgErrorFilled from '@tmorrow/cre8-wc/icons/System/Filled/Error.svg?raw';
+import svgLightbulbFilled from '@tmorrow/cre8-wc/icons/System/Filled/Lightbulb.svg?raw';
+import svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';
+import { html, nothing, } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../button/button';
+import '../link/link';
+import '../heading/heading';
+import '../text-passage/text-passage';
+import '../icon/icon';
+import { Cre8Element } from '../cre8-element';
+import styles from './alert.styles.js';
+/**
+ * The general purpose of an alert or notification is to draw the user’s attention
+ * and provide the user with timely, relevant information.
+ *
+ * ## Alert Styles:
+ * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.
+ * Each alert will have different icon to be displayed in the alert.
+ * - Users can select two types of alert variants: 'standalone', or 'banner'.
+ * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.
+ * - User can add button or link in the alert.
+ * If users choose to emphasize the alert (**strong**), user needs to used **"inverted"** prop in button or link.
+ * - User can choose whether the alert can be dismissed or not
+ *
+ */
+export class Cre8Alert extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /** The alert type. */
+        this.status = 'info';
+        /** The alert variant. */
+        this.variant = 'standalone';
+        this.emphasis = 'subtle';
+        this.iconAlert = undefined;
+        this.headerText = undefined;
+        this.ctaBody = undefined;
+        this.checkEmphasisAlert = () => {
+            if (this.emphasis === 'subtle') {
+                return false;
+            }
+            return true;
+        };
+        this.mapStatusToIconAlert = (status) => {
+            switch (status) {
+                case 'error':
+                    return html `<cre8-icon
+              svg="${svgErrorFilled}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
-        case "success":
-          return r`<cre8-icon
-              svg="${b}"
+                case 'success':
+                    return html `<cre8-icon
+              svg="${svgCheckCircle}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
-        case "warning":
-          return r`<cre8-icon
-              svg="${C}"
+                case 'warning':
+                    return html `<cre8-icon
+              svg="${svgWarningFilled}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
-        case "notification":
-          return r`<cre8-icon
-              svg="${y}"
+                case 'notification':
+                    return html `<cre8-icon
+              svg="${svgLightbulbFilled}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
-        case "info":
-          return r`<cre8-icon
-              svg="${m}"
+                case 'info':
+                    return html `<cre8-icon
+              svg="${svgInfoFilled}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
-        case "neutral":
-          return r`<cre8-icon
-              svg="${m}"
+                case 'neutral':
+                    return html `<cre8-icon
+              svg="${svgInfoFilled}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
-        default:
-          return p;
-      }
-    };
-  }
-  /**
-   * On banner dismiss
-   * 1) Function that toggles dismissed to true and removes the banner from the UI
-   */
-  onDismiss() {
-    this.dismissed = !0;
-  }
-  render() {
-    const a = this.componentClassNames("cre8-c-alert", {
-      "cre8-c-alert--error": this.status === "error",
-      "cre8-c-alert--info": this.status === "info",
-      "cre8-c-alert--notification": this.status === "notification",
-      "cre8-c-alert--neutral": this.status === "neutral",
-      "cre8-c-alert--success": this.status === "success",
-      "cre8-c-alert--warning": this.status === "warning",
-      "cre8-c-alert--standalone": this.variant === "standalone",
-      "cre8-c-alert--banner": this.variant === "banner",
-      "cre8-c-alert--emphasis-subtle": this.emphasis === "subtle",
-      "cre8-c-alert--notdismissible": this.notDismissible
-    });
-    return this.dismissed ? null : r`
+                default:
+                    return nothing;
+            }
+        };
+    }
+    /**
+     * On banner dismiss
+     * 1) Function that toggles dismissed to true and removes the banner from the UI
+     */
+    onDismiss() {
+        this.dismissed = true; /* 1 */
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-alert', {
+            'cre8-c-alert--error': this.status === 'error',
+            'cre8-c-alert--info': this.status === 'info',
+            'cre8-c-alert--notification': this.status === 'notification',
+            'cre8-c-alert--neutral': this.status === 'neutral',
+            'cre8-c-alert--success': this.status === 'success',
+            'cre8-c-alert--warning': this.status === 'warning',
+            'cre8-c-alert--standalone': this.variant === 'standalone',
+            'cre8-c-alert--banner': this.variant === 'banner',
+            'cre8-c-alert--emphasis-subtle': this.emphasis === 'subtle',
+            'cre8-c-alert--notdismissible': this.notDismissible,
+        });
+        return this.dismissed
+            ? null
+            : html `
           <dialog open>
-            <div class="${a}">
+            <div class="${componentClassNames}">
               <div class="cre8-c-alert__container">
-                ${this.status ? r` ${this.mapStatusToIconAlert(this.status)}` : ""}
+                ${this.status
+                ? html ` ${this.mapStatusToIconAlert(this.status)}`
+                : ''}
                 <div class="cre8-c-alert__message-container">
                   <div class="cre8-c-alert__heading-container">
-                    ${this.headerText ? r`${this.headerText}` : ""}
-                    ${this.notDismissible ? "" : r`<cre8-button
+                    ${this.headerText
+                ? html `${this.headerText}`
+                : ''}
+                    ${this.notDismissible
+                ? ''
+                : html `<cre8-button
                      class="cre8-c-alert__close-btn"
-                     svg=${x}
+                     svg=${svgClose}
                      iconRotateDegree="90"
                      iconPosition="after"
                      variant="tertiary"
                      aria-label="close"
-                     ?hideText=${!0}
+                     ?hideText=${true}
                      @click=${this.onDismiss}
                      ?inverted=${this.checkEmphasisAlert()}
               ></cre8-button>`}
@@ -877,39 +158,38 @@ const C = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
             </div>
           </dialog>
         `;
-  }
-};
-c.styles = [u];
-let e = c;
-i([
-  t({ reflect: !0 })
-], e.prototype, "status");
-i([
-  t({ reflect: !0 })
-], e.prototype, "variant");
-i([
-  t({ reflect: !0 })
-], e.prototype, "emphasis");
-i([
-  t({ type: String })
-], e.prototype, "iconAlert");
-i([
-  t()
-], e.prototype, "iconTitle");
-i([
-  t({ type: String })
-], e.prototype, "headerText");
-i([
-  t({ type: String })
-], e.prototype, "ctaBody");
-i([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "dismissed");
-i([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "notDismissible");
-customElements.get("cre8-alert") === void 0 && customElements.define("cre8-alert", e);
-export {
-  e as Cre8Alert,
-  e as default
-};
+    }
+}
+Cre8Alert.styles = [styles];
+__decorate([
+    property({ reflect: true })
+], Cre8Alert.prototype, "status", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8Alert.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8Alert.prototype, "emphasis", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Alert.prototype, "iconAlert", void 0);
+__decorate([
+    property()
+], Cre8Alert.prototype, "iconTitle", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Alert.prototype, "headerText", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Alert.prototype, "ctaBody", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Alert.prototype, "dismissed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Alert.prototype, "notDismissible", void 0);
+if (customElements.get('cre8-alert') === undefined) {
+    customElements.define('cre8-alert', Cre8Alert);
+}
+export default Cre8Alert;
+//# sourceMappingURL=alert.js.map