@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/alert/alert.js

@@ -1,108 +1,148 @@
-import { d as h, f as p, b as g, c as m } from "../../icon-D22g8aWB.js";
-import { s as u } from "../../Error-aYunUubM.js";
-import { css as f, nothing as v, 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 { Cre8Element as b } from "../cre8-element.js";
-const 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 = f`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}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-default)}.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-default);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)}.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)}.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)}.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)}.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)}.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)}.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 _ = Object.defineProperty, a = (l, c, n, w) => {
-  for (var o = void 0, i = l.length - 1, d; i >= 0; i--)
-    (d = l[i]) && (o = d(c, n, o) || o);
-  return o && _(c, n, 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 s = class s extends b {
-  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 = (c) => {
-      switch (c) {
-        case "error":
-          return r`<cre8-icon
-              svg="${u}"
+import svgWarningFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Warning.svg?raw';
+import svgCheckCircle from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Check.svg?raw';
+import svgInfoFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Info.svg?raw';
+import svgErrorFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Error.svg?raw';
+import svgLightbulbFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Lightbulb.svg?raw';
+import svgClose from '/Users/tylersmbp/Projects/cre8-web-components/packages/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="${g}"
+                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="${p}"
+                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="${h}"
+                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="${h}"
+                case 'neutral':
+                    return html `<cre8-icon
+              svg="${svgInfoFilled}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;
-        default:
-          return v;
-      }
-    };
-  }
-  /**
-   * On banner dismiss
-   * 1) Function that toggles dismissed to true and removes the banner from the UI
-   */
-  onDismiss() {
-    this.dismissed = !0;
-  }
-  render() {
-    const c = 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="${c}">
+            <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='${m}'
+                     svg='${svgClose}'
                      iconRotateDegree="90"
                      iconPosition="after"
                      variant="tertiary"
                      text="close"
-                     ?hideText=${!0}
+                     ?hideText=${true}
                      @click=${this.onDismiss}
                      ?inverted=${this.checkEmphasisAlert()}
               ></cre8-button>`}
@@ -118,39 +158,38 @@ const s = class s extends b {
             </div>
           </dialog>
         `;
-  }
-};
-s.styles = [x];
-let e = s;
-a([
-  t({ reflect: !0 })
-], e.prototype, "status");
-a([
-  t({ reflect: !0 })
-], e.prototype, "variant");
-a([
-  t({ reflect: !0 })
-], e.prototype, "emphasis");
-a([
-  t({ type: String })
-], e.prototype, "iconAlert");
-a([
-  t()
-], e.prototype, "iconTitle");
-a([
-  t({ type: String })
-], e.prototype, "headerText");
-a([
-  t({ type: String })
-], e.prototype, "ctaBody");
-a([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "dismissed");
-a([
-  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

package/lib/components/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":"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","sourcesContent":["import svgWarningFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Warning.svg?raw';\nimport svgCheckCircle from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Check.svg?raw';\nimport svgInfoFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Info.svg?raw';\nimport svgErrorFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Error.svg?raw';\nimport svgLightbulbFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Lightbulb.svg?raw';\nimport svgClose from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Close.svg?raw';\nimport { html, nothing,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../button/button';\nimport '../link/link';\nimport '../heading/heading';\nimport '../text-passage/text-passage';\nimport '../icon/icon';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './alert.styles.js';\n\n/**\n * The general purpose of an alert or notification is to draw the user’s attention\n * and provide the user with timely, relevant information.\n *\n * ## Alert Styles:\n * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.\n * Each alert will have different icon to be displayed in the alert.\n * - Users can select two types of alert variants: 'standalone', or 'banner'.\n * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.\n * - User can add button or link in the alert.\n * If users choose to emphasize the alert (**strong**), user needs to used **\"inverted\"** prop in button or link.\n * - User can choose whether the alert can be dismissed or not\n *\n */\n\nexport class Cre8Alert extends Cre8Element {\n    static styles = [styles];\n\n  /** The alert type. */\n  @property({ reflect: true })\n      status?:\n      | 'error'\n      | 'info'\n      | 'notification'\n      | 'neutral'\n      | 'warning'\n      | 'success' = 'info';\n\n  /** The alert variant. */\n  @property({ reflect: true })\n      variant: 'standalone' | 'banner' = 'standalone';\n\n  @property({ reflect: true })\n      emphasis: 'subtle' | 'strong' = 'subtle';\n\n\n  @property({ type: String })\n      iconAlert: string = undefined;\n\n  /**\n   * Icon title used for the icon alt text\n   */\n  @property()\n      iconTitle?: string;\n\n  @property({ type: String })\n      headerText: string = undefined;\n\n  @property({ type: String })\n      ctaBody: string = undefined;\n\n  /**\n   * Dismissed property\n   * 1) State that changes to true and is removed when the banner is dismissed\n   */\n  @property({ type: Boolean, reflect: true })\n      dismissed?: boolean;\n\n  /**\n   * Dismissable property\n   * 1) Adds the ability to close when toggled to true\n   */\n  @property({ type: Boolean, reflect: true })\n      notDismissible?: boolean;\n\n  /**\n   * On banner dismiss\n   * 1) Function that toggles dismissed to true and removes the banner from the UI\n   */\n  onDismiss() {\n      this.dismissed = true; /* 1 */\n  }\n\n  private checkEmphasisAlert = () => {\n      if (this.emphasis === 'subtle') {\n          return false;\n      } return true;\n  };\n\n  private mapStatusToIconAlert = (status: string) => {\n      switch (status) {\n          case 'error':\n              return html`<cre8-icon\n              svg=\"${svgErrorFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n          case 'success':\n              return html`<cre8-icon\n              svg=\"${svgCheckCircle}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n          case 'warning':\n              return html`<cre8-icon\n              svg=\"${svgWarningFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n          case 'notification':\n              return html`<cre8-icon\n              svg=\"${svgLightbulbFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n          case 'info':\n              return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n          case 'neutral':\n              return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n          default:\n              return nothing;\n      }\n  };\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-alert', {\n          'cre8-c-alert--error': this.status === 'error',\n          'cre8-c-alert--info': this.status === 'info',\n          'cre8-c-alert--notification': this.status === 'notification',\n          'cre8-c-alert--neutral': this.status === 'neutral',\n          'cre8-c-alert--success': this.status === 'success',\n          'cre8-c-alert--warning': this.status === 'warning',\n          'cre8-c-alert--standalone': this.variant === 'standalone',\n          'cre8-c-alert--banner': this.variant === 'banner',\n          'cre8-c-alert--emphasis-subtle': this.emphasis === 'subtle',\n          'cre8-c-alert--notdismissible': this.notDismissible,\n      });\n\n      return this.dismissed\n          ? null\n          : html`\n          <dialog open>\n            <div class=\"${componentClassNames}\">\n              <div class=\"cre8-c-alert__container\">\n                ${this.status\n        ? html` ${this.mapStatusToIconAlert(this.status)}`\n        : ''}\n                <div class=\"cre8-c-alert__message-container\">\n                  <div class=\"cre8-c-alert__heading-container\">\n                    ${this.headerText\n        ? html`${this.headerText}`\n        : ''}\n                    ${this.notDismissible\n        ? ''\n        : html`<cre8-button\n                     class=\"cre8-c-alert__close-btn\"\n                     svg='${svgClose}'\n                     iconRotateDegree=\"90\"\n                     iconPosition=\"after\"\n                     variant=\"tertiary\"\n                     text=\"close\"\n                     ?hideText=${true}\n                     @click=${this.onDismiss}\n                     ?inverted=${this.checkEmphasisAlert()}\n              ></cre8-button>`}\n                  </div>\n                  <div class=\"cre8-c-alert__body-container\">\n                    <slot></slot>\n                  </div>\n                  <div class=\"cre8-c-alert__footer-container\">\n                        <slot name=\"cta\">${this.ctaBody}</slot>\n                      </div>\n                </div>\n              </div>\n            </div>\n          </dialog>\n        `;\n  }\n}\n\nif (customElements.get('cre8-alert') === undefined) {\n    customElements.define('cre8-alert', Cre8Alert);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-alert': Cre8Alert;\n  }\n}\n\nexport default Cre8Alert;\n"]}

package/lib/components/alert/alert.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}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-default)}.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-default);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)}.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)}.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)}.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)}.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)}.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)}.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)}`;
+export default styles;
+//# sourceMappingURL=alert.styles.js.map

package/lib/components/alert/alert.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.styles.js","sourceRoot":"","sources":["../../../components/alert/alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,imMAAimM,CAAC;AACpnM,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}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-default)}.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-default);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)}.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)}.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)}.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)}.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)}.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)}.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)}`;\nexport default styles;\n"]}

package/lib/components/badge/badge.js

@@ -1,53 +1,76 @@
-import g from "classnames";
-import { css as h, html as d } from "lit";
-import { property as c } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-import "../../icon-D22g8aWB.js";
-const b = h`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-badge{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:inline-flex;border-radius:var(--cre8-border-radius-badge);padding:var(--cre8-badge-padding-vertical) var(--cre8-badge-padding-horizontal);color:var(--cre8-color-content-knockout);background-color:var(--cre8-color-bg-strong);align-items:center}.cre8-c-badge--success{background-color:var(--cre8-color-bg-success-strong)}.cre8-c-badge--warning{background-color:var(--cre8-color-bg-warning-strong);color:var(--cre8-color-content-default)}cre8-icon{height:var(--cre8-icon-height, 1rem);margin-right:0.25rem}.cre8-c-badge--error{background-color:var(--cre8-color-bg-error-strong)}.cre8-c-badge--info{background-color:var(--cre8-color-bg-info-strong)}.cre8-c-badge--attention{background-color:var(--cre8-color-bg-attention-strong)}.cre8-c-badge--light{background-color:var(--cre8-color-bg-subtle);color:var(--cre8-color-content-default)}.cre8-c-badge--light.cre8-c-badge--success{background-color:var(--cre8-color-bg-success);color:var(--cre8-color-content-success)}.cre8-c-badge--light.cre8-c-badge--warning{background-color:var(--cre8-color-bg-warning)}.cre8-c-badge--light.cre8-c-badge--error{background-color:var(--cre8-color-bg-error);color:var(--cre8-color-content-error)}.cre8-c-badge--light.cre8-c-badge--info{background-color:var(--cre8-color-bg-info)}.cre8-c-badge--light.cre8-c-badge--attention{background-color:var(--cre8-color-bg-attention)}.cre8-c-badge--white{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default)}.cre8-c-badge--white.cre8-c-badge--success{color:var(--cre8-color-content-success)}.cre8-c-badge--white.cre8-c-badge--error{background-color:none;color:var(--cre8-color-content-error)}`;
-var m = Object.defineProperty, a = (e, o, s, v) => {
-  for (var t = void 0, i = e.length - 1, l; i >= 0; i--)
-    (l = e[i]) && (t = l(o, s, t) || t);
-  return t && m(o, s, t), t;
-}, f = /* @__PURE__ */ ((e) => (e[e.error = 0] = "error", e[e.warning = 1] = "warning", e[e.success = 2] = "success", e[e.info = 3] = "info", e[e.attention = 4] = "attention", e[e.undefined = 5] = "undefined", e))(f || {}), u = /* @__PURE__ */ ((e) => (e[e.light = 0] = "light", e[e.white = 1] = "white", e[e.undefined = 2] = "undefined", e))(u || {});
-const n = class n extends p {
-  constructor() {
-    super(...arguments), this.text = void 0;
-  }
-  render() {
-    const o = g("cre8-c-badge", {
-      "cre8-c-badge--success": this.status === "success",
-      "cre8-c-badge--warning": this.status === "warning",
-      "cre8-c-badge--error": this.status === "error",
-      "cre8-c-badge--info": this.status === "info",
-      "cre8-c-badge--attention": this.status === "attention",
-      "cre8-c-badge--light": this.variant === "light",
-      "cre8-c-badge--white": this.variant === "white"
-    });
-    return d`<div class="${o}">
-        ${this.svg ? d` <cre8-icon 
+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;
+};
+import classnames from 'classnames';
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import '../icon/icon';
+import styles from './badge.styles.js';
+export var status;
+(function (status) {
+    status[status["error"] = 0] = "error";
+    status[status["warning"] = 1] = "warning";
+    status[status["success"] = 2] = "success";
+    status[status["info"] = 3] = "info";
+    status[status["attention"] = 4] = "attention";
+    status[status["undefined"] = 5] = "undefined";
+})(status || (status = {}));
+export var variant;
+(function (variant) {
+    variant[variant["light"] = 0] = "light";
+    variant[variant["white"] = 1] = "white";
+    variant[variant["undefined"] = 2] = "undefined";
+})(variant || (variant = {}));
+/**
+ * Status badges are used most often in tables or fat rows in a list.
+ * These Components serve a contextual purpose and don't provide any functionality.
+ * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.
+ *
+ */
+export class Cre8Badge extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * The badge text
+         */
+        this.text = undefined;
+    }
+    render() {
+        const componentClassName = classnames('cre8-c-badge', {
+            'cre8-c-badge--success': this.status === 'success',
+            'cre8-c-badge--warning': this.status === 'warning',
+            'cre8-c-badge--error': this.status === 'error',
+            'cre8-c-badge--info': this.status === 'info',
+            'cre8-c-badge--attention': this.status === 'attention',
+            'cre8-c-badge--light': this.variant === 'light',
+            'cre8-c-badge--white': this.variant === 'white',
+        });
+        return html `<div class="${componentClassName}">
+        ${this.svg ? html ` <cre8-icon 
             svg='${this.svg}' aria-hidden='true'></cre8-icon>
-        </cre8-icon>` : ""} 
+        </cre8-icon>` : ''} 
         ${this.text} 
         </div> `;
-  }
-};
-n.styles = [b];
-let r = n;
-a([
-  c({ type: String })
-], r.prototype, "text");
-a([
-  c({ type: String })
-], r.prototype, "status");
-a([
-  c({ type: String })
-], r.prototype, "variant");
-a([
-  c({ type: String })
-], r.prototype, "svg");
-customElements.get("cre8-badge") === void 0 && customElements.define("cre8-badge", r);
-export {
-  r as Cre8Badge,
-  f as status,
-  u as variant
-};
+    }
+}
+Cre8Badge.styles = [styles];
+__decorate([
+    property({ type: String })
+], Cre8Badge.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Badge.prototype, "status", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Badge.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], Cre8Badge.prototype, "svg", void 0);
+if (customElements.get('cre8-badge') === undefined) {
+    customElements.define('cre8-badge', Cre8Badge);
+}
+//# sourceMappingURL=badge.js.map

package/lib/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAEtB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAN,IAAY,MAEX;AAFD,WAAY,MAAM;IACjB,qCAAO,CAAA;IAAE,yCAAS,CAAA;IAAE,yCAAS,CAAA;IAAE,mCAAM,CAAA;IAAE,6CAAW,CAAA;IAAE,6CAAS,CAAA;AAC9D,CAAC,EAFW,MAAM,KAAN,MAAM,QAEjB;AACD,MAAM,CAAN,IAAY,OAEX;AAFD,WAAY,OAAO;IACjB,uCAAO,CAAA;IAAE,uCAAO,CAAA;IAAE,+CAAS,CAAA;AAC7B,CAAC,EAFW,OAAO,KAAP,OAAO,QAElB;AAED;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QAGE;;WAEG;QAEC,SAAI,GAAW,SAAS,CAAC;IAqD/B,CAAC;IAlBC,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,cAAc,EAAE;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;YACtD,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/C,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAClD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,kBAAkB;UACxC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;mBACN,IAAI,CAAC,GAAG;qBACN,CAAC,CAAC,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI;gBACH,CAAC;IACf,CAAC;;AA1DQ,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACE;AAYzB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACR;AAUf;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACP;AAWhB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACV;AAsBnB,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\n\nimport styles from './badge.styles.js';\n\nexport enum status {\n 'error', 'warning', 'success', 'info', 'attention', undefined\n}\nexport enum variant {\n  'light', 'white', undefined\n}\n\n/**\n * Status badges are used most often in tables or fat rows in a list.\n * These Components serve a contextual purpose and don't provide any functionality.\n * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.\n *\n */\nexport class Cre8Badge extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The badge text\n   */\n  @property({ type: String })\n      text: string = undefined;\n\n  /**\n   * Status (a color variant prop)\n   * - **neutral** (default) renders a badge with a neutral state treatment\n   * - **success** renders a badge with success state treatment\n   * - **warning** renders a badge with warning state treatment\n   * - **error** renders a badge with error state treatment\n   * - **info** renders a badge with information state treatment\n   * - **attention** renders a badge with attention state treatment\n   */\n  @property({ type: String })\n      status: string;\n\n  /**\n   * Background Style Variant\n   *\n   * - **dark|undefined** (default) renders a badge with a dark background\n   * - **light** renders a badge with a light background\n   * - **white** renders a badge with a white background\n   */\n  @property({ type: String })\n      variant: string;\n\n  /**\n   * SVG as a raw string\n   * - For badges with icons, the icon is defined by this prop\n   * - Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do\n   * - Import example:`import svgFeedback from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Feedback.svg?raw';`\n   * - [cre8-icons Github repo](https://git.express-scripts.com/ExpressScripts/cre8-icons) This is the Github\n   * repo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons\n   */\n  @property({ type: String })\n      svg?: string;\n\n  render() {\n      const componentClassName = classnames('cre8-c-badge', {\n          'cre8-c-badge--success': this.status === 'success',\n          'cre8-c-badge--warning': this.status === 'warning',\n          'cre8-c-badge--error': this.status === 'error',\n          'cre8-c-badge--info': this.status === 'info',\n          'cre8-c-badge--attention': this.status === 'attention',\n          'cre8-c-badge--light': this.variant === 'light',\n          'cre8-c-badge--white': this.variant === 'white',\n      });\n\n      return html`<div class=\"${componentClassName}\">\n        ${this.svg ? html` <cre8-icon \n            svg='${this.svg}' aria-hidden='true'></cre8-icon>\n        </cre8-icon>` : ''} \n        ${this.text} \n        </div> `;\n  }\n}\n\nif (customElements.get('cre8-badge') === undefined) {\n    customElements.define('cre8-badge', Cre8Badge);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-badge': Cre8Badge;\n  }\n}\n"]}

package/lib/components/badge/badge.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-badge{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:inline-flex;border-radius:var(--cre8-border-radius-badge);padding:var(--cre8-badge-padding-vertical) var(--cre8-badge-padding-horizontal);color:var(--cre8-color-content-knockout);background-color:var(--cre8-color-bg-strong);align-items:center}.cre8-c-badge--success{background-color:var(--cre8-color-bg-success-strong)}.cre8-c-badge--warning{background-color:var(--cre8-color-bg-warning-strong);color:var(--cre8-color-content-default)}cre8-icon{height:var(--cre8-icon-height, 1rem);margin-right:0.25rem}.cre8-c-badge--error{background-color:var(--cre8-color-bg-error-strong)}.cre8-c-badge--info{background-color:var(--cre8-color-bg-info-strong)}.cre8-c-badge--attention{background-color:var(--cre8-color-bg-attention-strong)}.cre8-c-badge--light{background-color:var(--cre8-color-bg-subtle);color:var(--cre8-color-content-default)}.cre8-c-badge--light.cre8-c-badge--success{background-color:var(--cre8-color-bg-success);color:var(--cre8-color-content-success)}.cre8-c-badge--light.cre8-c-badge--warning{background-color:var(--cre8-color-bg-warning)}.cre8-c-badge--light.cre8-c-badge--error{background-color:var(--cre8-color-bg-error);color:var(--cre8-color-content-error)}.cre8-c-badge--light.cre8-c-badge--info{background-color:var(--cre8-color-bg-info)}.cre8-c-badge--light.cre8-c-badge--attention{background-color:var(--cre8-color-bg-attention)}.cre8-c-badge--white{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default)}.cre8-c-badge--white.cre8-c-badge--success{color:var(--cre8-color-content-success)}.cre8-c-badge--white.cre8-c-badge--error{background-color:none;color:var(--cre8-color-content-error)}`;
+export default styles;
+//# sourceMappingURL=badge.styles.js.map

package/lib/components/badge/badge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,6wHAA6wH,CAAC;AAChyH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-badge{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:inline-flex;border-radius:var(--cre8-border-radius-badge);padding:var(--cre8-badge-padding-vertical) var(--cre8-badge-padding-horizontal);color:var(--cre8-color-content-knockout);background-color:var(--cre8-color-bg-strong);align-items:center}.cre8-c-badge--success{background-color:var(--cre8-color-bg-success-strong)}.cre8-c-badge--warning{background-color:var(--cre8-color-bg-warning-strong);color:var(--cre8-color-content-default)}cre8-icon{height:var(--cre8-icon-height, 1rem);margin-right:0.25rem}.cre8-c-badge--error{background-color:var(--cre8-color-bg-error-strong)}.cre8-c-badge--info{background-color:var(--cre8-color-bg-info-strong)}.cre8-c-badge--attention{background-color:var(--cre8-color-bg-attention-strong)}.cre8-c-badge--light{background-color:var(--cre8-color-bg-subtle);color:var(--cre8-color-content-default)}.cre8-c-badge--light.cre8-c-badge--success{background-color:var(--cre8-color-bg-success);color:var(--cre8-color-content-success)}.cre8-c-badge--light.cre8-c-badge--warning{background-color:var(--cre8-color-bg-warning)}.cre8-c-badge--light.cre8-c-badge--error{background-color:var(--cre8-color-bg-error);color:var(--cre8-color-content-error)}.cre8-c-badge--light.cre8-c-badge--info{background-color:var(--cre8-color-bg-info)}.cre8-c-badge--light.cre8-c-badge--attention{background-color:var(--cre8-color-bg-attention)}.cre8-c-badge--white{background-color:var(--cre8-color-bg-default);color:var(--cre8-color-content-default)}.cre8-c-badge--white.cre8-c-badge--success{color:var(--cre8-color-content-success)}.cre8-c-badge--white.cre8-c-badge--error{background-color:none;color:var(--cre8-color-content-error)}`;\nexport default styles;\n"]}