@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/inline-alert/inline-alert.js

@@ -1,115 +1,142 @@
-import { d as h, f as u, b as g } from "../../icon-D22g8aWB.js";
-import { s as f } from "../../Error-aYunUubM.js";
-import { css as m, nothing as v, html as e } from "lit";
-import { property as n } from "lit/decorators.js";
-import { Cre8Element as b } from "../cre8-element.js";
-const p = `<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 0ZM8 12.9231C7.81743 12.9231 7.63897 12.8689 7.48717 12.7675C7.33537 12.6661 7.21706 12.5219 7.14719 12.3532C7.07732 12.1846 7.05904 11.999 7.09466 11.8199C7.13028 11.6409 7.21819 11.4764 7.34729 11.3473C7.47638 11.2182 7.64086 11.1303 7.81992 11.0947C7.99898 11.059 8.18458 11.0773 8.35325 11.1472C8.52192 11.2171 8.66608 11.3354 8.76751 11.4872C8.86894 11.639 8.92308 11.8174 8.92308 12C8.92308 12.2448 8.82583 12.4796 8.65271 12.6527C8.4796 12.8258 8.24482 12.9231 8 12.9231ZM8.61539 9.17538V9.23077C8.61539 9.39398 8.55055 9.5505 8.43514 9.66591C8.31974 9.78132 8.16321 9.84615 8 9.84615C7.83679 9.84615 7.68027 9.78132 7.56486 9.66591C7.44945 9.5505 7.38462 9.39398 7.38462 9.23077V8.61538C7.38462 8.45217 7.44945 8.29565 7.56486 8.18024C7.68027 8.06483 7.83679 8 8 8C9.01769 8 9.84616 7.30769 9.84616 6.46154C9.84616 5.61538 9.01769 4.92308 8 4.92308C6.98231 4.92308 6.15385 5.61538 6.15385 6.46154V6.76923C6.15385 6.93244 6.08901 7.08896 5.97361 7.20437C5.8582 7.31978 5.70167 7.38461 5.53846 7.38461C5.37525 7.38461 5.21873 7.31978 5.10332 7.20437C4.98791 7.08896 4.92308 6.93244 4.92308 6.76923V6.46154C4.92308 4.93461 6.30308 3.69231 8 3.69231C9.69692 3.69231 11.0769 4.93461 11.0769 6.46154C11.0769 7.79846 10.0185 8.91769 8.61539 9.17538Z"/>
-</svg>
-`, y = m`*,::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}:host([fullWidth]){display:flex}.cre8-c-inline-alert{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);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);font-weight:normal;display:inline-flex;align-items:flex-start;gap:0.5rem;padding:1rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-info);border-color:var(--cre8-color-border-info);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-radius:var(--cre8-border-radius-default)}.cre8-c-inline-alert--full-width{width:100%}.cre8-c-inline-alert--error{background-color:var(--cre8-color-bg-error);border-color:var(--cre8-color-border-error)}.cre8-c-inline-alert--warning{background-color:var(--cre8-color-bg-warning);border-color:var(--cre8-color-border-warning)}.cre8-c-inline-alert--success{background-color:var(--cre8-color-bg-success);border-color:var(--cre8-color-border-success)}.cre8-c-inline-alert--attention{background-color:var(--cre8-color-bg-attention);border-color:var(--cre8-color-border-attention)}.cre8-c-inline-alert--neutral{background-color:var(--cre8-color-bg-subtle);border-color:var(--cre8-color-border-strong)}.cre8-c-inline-alert--transparent{padding:0;border:none;background-color:rgba(0,0,0,0);gap:0.5rem;border-radius:none}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error{color:var(--cre8-color-content-error)}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success{color:var(--cre8-color-content-success)}.cre8-c-inline-alert__icon{position:relative;color:var(--cre8-color-content-info-icon);height:1.5rem;width:1.5rem}.cre8-c-inline-alert--error .cre8-c-inline-alert__icon{color:var(--cre8-color-content-error-icon)}.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon{color:var(--cre8-color-content-warning-icon)}.cre8-c-inline-alert--success .cre8-c-inline-alert__icon{color:var(--cre8-color-content-success-icon)}.cre8-c-inline-alert__icon .cre8-c-inline-alert--help,.cre8-c-inline-alert--info .cre8-c-inline-alert__icon{color:var(--cre8-color-content-info-icon)}.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon{color:var(--cre8-color-content-attention-icon)}.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon{color:var(--cre8-color-content-default)}.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon{top:0;padding:0.125rem}`;
-var w = Object.defineProperty, a = (l, t, s, x) => {
-  for (var i = void 0, c = l.length - 1, d; c >= 0; c--)
-    (d = l[c]) && (i = d(t, s, i) || i);
-  return i && w(t, s, i), i;
+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 o = class o extends b {
-  constructor() {
-    super(...arguments), this.variant = "subtle", this.status = "info";
-  }
-  /*
-  * Maps modal icons and modal status variants to what the alt text of the related icon should be see:
-  *#
-  * this provides the recommendated alt text of different statuses
-  */
-  mapStatusToIconInlineAlert(t) {
-    switch (t) {
-      case "error":
-        return e`<cre8-icon 
-                svg='${f}' 
+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 svgHelpFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Help.svg?raw';
+import { html, nothing, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './inline-alert.styles.js';
+import '../icon/icon';
+/**
+ * In cases when it is necessary to alert the user but a less strong message that cannot be dismissed is desired,
+ * use an in-line contextual alert message as the least "severe" message type.
+ * These can be displayed anywhere on the page, but should never cover content.
+ * Inline alerts do not include a title or close capability and are considered minimally intrusive user messaging.
+ *
+ * @slot - The component content
+ */
+export class Cre8InlineAlert extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Variant
+         * - **subtle** (default) renders an alert message in a padded container with a with a border and background color
+         * - **transparent** renders an alert message with no padded container, border, or background color
+         */
+        this.variant = 'subtle';
+        /**
+         * Status
+         * - **default** renders an inline alert with the brand colors
+         * - **error** renders an inline alert with an error state
+         * - **warning** renders an inline alert with a warning state
+         * - **success** renders an inline alert with a success state
+         * - **attention** renders an inline alert with an attention state
+         * - **neutral** renders an inline alert with a nuetral state
+         */
+        this.status = 'info';
+    }
+    /*
+    * Maps modal icons and modal status variants to what the alt text of the related icon should be see:
+    *#
+    * this provides the recommendated alt text of different statuses
+    */
+    mapStatusToIconInlineAlert(status) {
+        switch (status) {
+            case 'error':
+                return html `<cre8-icon 
+                svg='${svgErrorFilled}' 
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
-      case "success":
-        return e`<cre8-icon 
-                svg='${g}' 
+            case 'success':
+                return html `<cre8-icon 
+                svg='${svgCheckCircle}' 
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
-      case "warning":
-        return e`<cre8-icon 
-                svg='${u}'
+            case 'warning':
+                return html `<cre8-icon 
+                svg='${svgWarningFilled}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
-      case "help":
-        return e`<cre8-icon 
-                svg='${p}'
+            case 'help':
+                return html `<cre8-icon 
+                svg='${svgHelpFilled}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
-      case "info":
-        return e`<cre8-icon 
-                svg='${h}'
+            case 'info':
+                return html `<cre8-icon 
+                svg='${svgInfoFilled}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
-      case "attention":
-        return e`<cre8-icon 
-                svg='${h}'
+            case 'attention':
+                return html `<cre8-icon 
+                svg='${svgInfoFilled}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
-      case "neutral":
-        return e`<cre8-icon 
-                svg='${p}'
+            case 'neutral':
+                return html `<cre8-icon 
+                svg='${svgHelpFilled}'
                 aria-label="${this.iconTitle}"
                 aria-hidden="true"
                 class="cre8-c-inline-alert__icon"></cre8-icon>`;
-      default:
-        return v;
+            default:
+                return nothing;
+        }
     }
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-inline-alert", {
-      "cre8-c-inline-alert--transparent": this.variant === "transparent",
-      "cre8-c-inline-alert--error": this.status === "error",
-      "cre8-c-inline-alert--warning": this.status === "warning",
-      "cre8-c-inline-alert--success": this.status === "success",
-      "cre8-c-inline-alert--attention": this.status === "attention",
-      "cre8-c-inline-alert--neutral": this.status === "neutral",
-      "cre8-c-inline-alert--help": this.status === "help",
-      "cre8-c-inline-alert--info": this.status === "info",
-      "cre8-c-inline-alert--full-width": this.fullWidth
-    });
-    return e`
-        <div class="${t}">
-            ${this.iconName || this.status ? e` ${this.mapStatusToIconInlineAlert(this.status)}` : ""}
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-inline-alert', {
+            'cre8-c-inline-alert--transparent': this.variant === 'transparent',
+            'cre8-c-inline-alert--error': this.status === 'error',
+            'cre8-c-inline-alert--warning': this.status === 'warning',
+            'cre8-c-inline-alert--success': this.status === 'success',
+            'cre8-c-inline-alert--attention': this.status === 'attention',
+            'cre8-c-inline-alert--neutral': this.status === 'neutral',
+            'cre8-c-inline-alert--help': this.status === 'help',
+            'cre8-c-inline-alert--info': this.status === 'info',
+            'cre8-c-inline-alert--full-width': this.fullWidth,
+        });
+        return html `
+        <div class="${componentClassNames}">
+            ${this.iconName || this.status
+            ? html ` ${this.mapStatusToIconInlineAlert(this.status)}`
+            : ''}
             <div class="cre8-c-inline-alert__body">
                 <slot></slot>
             </div>
         </div>
         `;
-  }
-};
-o.styles = [y];
-let r = o;
-a([
-  n()
-], r.prototype, "iconName");
-a([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "fullWidth");
-a([
-  n()
-], r.prototype, "iconTitle");
-a([
-  n()
-], r.prototype, "variant");
-a([
-  n({ type: String })
-], r.prototype, "status");
-customElements.get("cre8-inline-alert") === void 0 && customElements.define("cre8-inline-alert", r);
-export {
-  r as Cre8InlineAlert,
-  r as default
-};
+    }
+}
+Cre8InlineAlert.styles = [styles];
+__decorate([
+    property()
+], Cre8InlineAlert.prototype, "iconName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8InlineAlert.prototype, "fullWidth", void 0);
+__decorate([
+    property()
+], Cre8InlineAlert.prototype, "iconTitle", void 0);
+__decorate([
+    property()
+], Cre8InlineAlert.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], Cre8InlineAlert.prototype, "status", void 0);
+if (customElements.get('cre8-inline-alert') === undefined) {
+    customElements.define('cre8-inline-alert', Cre8InlineAlert);
+}
+export default Cre8InlineAlert;
+//# sourceMappingURL=inline-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inline-alert.js","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,gBAAgB,MAAM,oGAAoG,CAAC;AAClI,OAAO,cAAc,MAAM,kGAAkG,CAAC;AAC9H,OAAO,aAAa,MAAM,iGAAiG,CAAC;AAC5H,OAAO,cAAc,MAAM,kGAAkG,CAAC;AAC9H,OAAO,aAAa,MAAM,iGAAiG,CAAC;AAC5H,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,cAAc,CAAC;AAEtB;;;;;;;GAOG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAuBI;;;;WAIG;QAEC,YAAO,GAA6B,QAAQ,CAAC;QAEjD;;;;;;;;WAQG;QAEC,WAAM,GAAiF,MAAM,CAAC;IAiFtG,CAAC;IA/EG;;;;MAIE;IACM,0BAA0B,CAAC,MAAc;QAC7C,QAAQ,MAAM,EAAE,CAAC;YACb,KAAK,OAAO;gBACR,OAAO,IAAI,CAAA;uBACJ,cAAc;8BACP,IAAI,CAAC,SAAS;;+DAEmB,CAAC;YACpD,KAAK,SAAS;gBACV,OAAO,IAAI,CAAA;uBACJ,cAAc;8BACP,IAAI,CAAC,SAAS;;+DAEmB,CAAC;YACpD,KAAK,SAAS;gBACV,OAAO,IAAI,CAAA;uBACJ,gBAAgB;8BACT,IAAI,CAAC,SAAS;;+DAEmB,CAAC;YACpD,KAAK,MAAM;gBACP,OAAO,IAAI,CAAA;uBACJ,aAAa;8BACN,IAAI,CAAC,SAAS;;+DAEmB,CAAC;YACpD,KAAK,MAAM;gBACP,OAAO,IAAI,CAAA;uBACJ,aAAa;8BACN,IAAI,CAAC,SAAS;;+DAEmB,CAAC;YACpD,KAAK,WAAW;gBACZ,OAAO,IAAI,CAAA;uBACJ,aAAa;8BACN,IAAI,CAAC,SAAS;;+DAEmB,CAAC;YACpD,KAAK,SAAS;gBACV,OAAO,IAAI,CAAA;uBACJ,aAAa;8BACN,IAAI,CAAC,SAAS;;+DAEmB,CAAC;YACpD;gBACI,OAAO,OAAO,CAAC;QACvB,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;YACxE,kCAAkC,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;YAClE,4BAA4B,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YACrD,8BAA8B,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YACzD,8BAA8B,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YACzD,gCAAgC,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;YAC7D,8BAA8B,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YACzD,2BAA2B,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;YACnD,2BAA2B,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;YACnD,iCAAiC,EAAE,IAAI,CAAC,SAAS;SACpD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;sBACG,mBAAmB;cAC3B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM;YAClC,CAAC,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YACxD,CAAC,CAAC,EACV;;;;;SAKS,CAAC;IACN,CAAC;;AAxHM,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAOrB;IADH,QAAQ,EAAE;iDACW;AAOlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACnB;AAMpB;IADH,QAAQ,EAAE;kDACY;AAQnB;IADH,QAAQ,EAAE;gDACsC;AAY7C;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACuE;AAmFtG,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","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 svgHelpFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Help.svg?raw';\nimport { html, nothing,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './inline-alert.styles.js';\nimport '../icon/icon';\n\n/**\n * In cases when it is necessary to alert the user but a less strong message that cannot be dismissed is desired,\n * use an in-line contextual alert message as the least \"severe\" message type.\n * These can be displayed anywhere on the page, but should never cover content.\n * Inline alerts do not include a title or close capability and are considered minimally intrusive user messaging.\n *\n * @slot - The component content\n */\nexport class Cre8InlineAlert extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     *  DEPRECATED: Icon name used for the icon before to the field note\n     * @deprecated\n    */\n    @property()\n        iconName?: string;\n\n    /**\n     * Full width Inline Alert\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        fullWidth?: boolean;\n\n    /**\n     * Icon title used for the icon alt text\n     */\n    @property()\n        iconTitle?: string;\n\n    /**\n     * Variant\n     * - **subtle** (default) renders an alert message in a padded container with a with a border and background color\n     * - **transparent** renders an alert message with no padded container, border, or background color\n     */\n    @property()\n        variant: 'transparent' | 'subtle' = 'subtle';\n\n    /**\n     * Status\n     * - **default** renders an inline alert with the brand colors\n     * - **error** renders an inline alert with an error state\n     * - **warning** renders an inline alert with a warning state\n     * - **success** renders an inline alert with a success state\n     * - **attention** renders an inline alert with an attention state\n     * - **neutral** renders an inline alert with a nuetral state\n     */\n    @property({ type: String })\n        status?: 'error' | 'warning' | 'success' | 'attention' | 'neutral' | 'help' | 'info' = 'info';\n\n    /*\n    * Maps modal icons and modal status variants to what the alt text of the related icon should be see:\n    *#\n    * this provides the recommendated alt text of different statuses\n    */\n    private mapStatusToIconInlineAlert(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-inline-alert__icon\"></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-inline-alert__icon\"></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-inline-alert__icon\"></cre8-icon>`;\n            case 'help':\n                return html`<cre8-icon \n                svg='${svgHelpFilled}'\n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></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-inline-alert__icon\"></cre8-icon>`;\n            case 'attention':\n                return html`<cre8-icon \n                svg='${svgInfoFilled}'\n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            case 'neutral':\n                return html`<cre8-icon \n                svg='${svgHelpFilled}'\n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            default:\n                return nothing;\n        }\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-inline-alert', {\n            'cre8-c-inline-alert--transparent': this.variant === 'transparent',\n            'cre8-c-inline-alert--error': this.status === 'error',\n            'cre8-c-inline-alert--warning': this.status === 'warning',\n            'cre8-c-inline-alert--success': this.status === 'success',\n            'cre8-c-inline-alert--attention': this.status === 'attention',\n            'cre8-c-inline-alert--neutral': this.status === 'neutral',\n            'cre8-c-inline-alert--help': this.status === 'help',\n            'cre8-c-inline-alert--info': this.status === 'info',\n            'cre8-c-inline-alert--full-width': this.fullWidth,\n        });\n\n        return html`\n        <div class=\"${componentClassNames}\">\n            ${this.iconName || this.status\n        ? html` ${this.mapStatusToIconInlineAlert(this.status)}`\n        : ''\n}\n            <div class=\"cre8-c-inline-alert__body\">\n                <slot></slot>\n            </div>\n        </div>\n        `;\n    }\n}\n\nif (customElements.get('cre8-inline-alert') === undefined) {\n    customElements.define('cre8-inline-alert', Cre8InlineAlert);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-inline-alert': Cre8InlineAlert;\n    }\n}\n\nexport default Cre8InlineAlert;\n"]}

package/lib/components/inline-alert/inline-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}:host{display:inline-flex}:host([fullWidth]){display:flex}.cre8-c-inline-alert{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);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);font-weight:normal;display:inline-flex;align-items:flex-start;gap:0.5rem;padding:1rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-info);border-color:var(--cre8-color-border-info);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-radius:var(--cre8-border-radius-default)}.cre8-c-inline-alert--full-width{width:100%}.cre8-c-inline-alert--error{background-color:var(--cre8-color-bg-error);border-color:var(--cre8-color-border-error)}.cre8-c-inline-alert--warning{background-color:var(--cre8-color-bg-warning);border-color:var(--cre8-color-border-warning)}.cre8-c-inline-alert--success{background-color:var(--cre8-color-bg-success);border-color:var(--cre8-color-border-success)}.cre8-c-inline-alert--attention{background-color:var(--cre8-color-bg-attention);border-color:var(--cre8-color-border-attention)}.cre8-c-inline-alert--neutral{background-color:var(--cre8-color-bg-subtle);border-color:var(--cre8-color-border-strong)}.cre8-c-inline-alert--transparent{padding:0;border:none;background-color:rgba(0,0,0,0);gap:0.5rem;border-radius:none}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error{color:var(--cre8-color-content-error)}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success{color:var(--cre8-color-content-success)}.cre8-c-inline-alert__icon{position:relative;color:var(--cre8-color-content-info-icon);height:1.5rem;width:1.5rem}.cre8-c-inline-alert--error .cre8-c-inline-alert__icon{color:var(--cre8-color-content-error-icon)}.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon{color:var(--cre8-color-content-warning-icon)}.cre8-c-inline-alert--success .cre8-c-inline-alert__icon{color:var(--cre8-color-content-success-icon)}.cre8-c-inline-alert__icon .cre8-c-inline-alert--help,.cre8-c-inline-alert--info .cre8-c-inline-alert__icon{color:var(--cre8-color-content-info-icon)}.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon{color:var(--cre8-color-content-attention-icon)}.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon{color:var(--cre8-color-content-default)}.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon{top:0;padding:0.125rem}`;
+export default styles;
+//# sourceMappingURL=inline-alert.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inline-alert.styles.js","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,20IAA20I,CAAC;AAC91I,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}:host([fullWidth]){display:flex}.cre8-c-inline-alert{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);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);font-weight:normal;display:inline-flex;align-items:flex-start;gap:0.5rem;padding:1rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-info);border-color:var(--cre8-color-border-info);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-radius:var(--cre8-border-radius-default)}.cre8-c-inline-alert--full-width{width:100%}.cre8-c-inline-alert--error{background-color:var(--cre8-color-bg-error);border-color:var(--cre8-color-border-error)}.cre8-c-inline-alert--warning{background-color:var(--cre8-color-bg-warning);border-color:var(--cre8-color-border-warning)}.cre8-c-inline-alert--success{background-color:var(--cre8-color-bg-success);border-color:var(--cre8-color-border-success)}.cre8-c-inline-alert--attention{background-color:var(--cre8-color-bg-attention);border-color:var(--cre8-color-border-attention)}.cre8-c-inline-alert--neutral{background-color:var(--cre8-color-bg-subtle);border-color:var(--cre8-color-border-strong)}.cre8-c-inline-alert--transparent{padding:0;border:none;background-color:rgba(0,0,0,0);gap:0.5rem;border-radius:none}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error{color:var(--cre8-color-content-error)}.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success{color:var(--cre8-color-content-success)}.cre8-c-inline-alert__icon{position:relative;color:var(--cre8-color-content-info-icon);height:1.5rem;width:1.5rem}.cre8-c-inline-alert--error .cre8-c-inline-alert__icon{color:var(--cre8-color-content-error-icon)}.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon{color:var(--cre8-color-content-warning-icon)}.cre8-c-inline-alert--success .cre8-c-inline-alert__icon{color:var(--cre8-color-content-success-icon)}.cre8-c-inline-alert__icon .cre8-c-inline-alert--help,.cre8-c-inline-alert--info .cre8-c-inline-alert__icon{color:var(--cre8-color-content-info-icon)}.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon{color:var(--cre8-color-content-attention-icon)}.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon{color:var(--cre8-color-content-default)}.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon{top:0;padding:0.125rem}`;\nexport default styles;\n"]}

package/lib/components/layout/layout.js

@@ -1,31 +1,34 @@
-import { css as m, html as n } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const h = m`*,::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}.cre8-c-layout{display:grid;flex:1;gap:1rem;grid-template-columns:minmax(0, 1fr)}@media all and (min-width: 960px){.cre8-c-layout{gap:2rem;grid-template-columns:minmax(0, 1fr) calc(var(--cre8-sidebar-width, 40%) - (0.5rem))}}@media all and (min-width: 960px){.cre8-c-layout--left-sidebar{grid-template-columns:calc(var(--cre8-sidebar-width, 40%) - (0.5rem)) minmax(0, 1fr)}}`;
-var c = Object.defineProperty, f = (s, t, d, x) => {
-  for (var e = void 0, i = s.length - 1, l; i >= 0; i--)
-    (l = s[i]) && (e = l(t, d, e) || e);
-  return e && c(t, d, e), e;
+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 a = class a extends p {
-  render() {
-    const t = this.componentClassNames("cre8-c-layout", {
-      "cre8-c-layout--left-sidebar": this.variant === "left-sidebar"
-    });
-    return n`
-      <div class="${t}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './layout.styles.js';
+/**
+ * @slot - The layout content
+ */
+export class Cre8Layout extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-layout', {
+            'cre8-c-layout--left-sidebar': this.variant === 'left-sidebar',
+        });
+        return html `
+      <div class="${componentClassName}">
         <slot></slot>
       </div>
     `;
-  }
-};
-a.styles = [h];
-let r = a;
-f([
-  o()
-], r.prototype, "variant");
-customElements.get("cre8-layout") === void 0 && customElements.define("cre8-layout", r);
-export {
-  r as Cre8Layout,
-  r as default
-};
+    }
+}
+Cre8Layout.styles = [styles];
+__decorate([
+    property()
+], Cre8Layout.prototype, "variant", void 0);
+if (customElements.get('cre8-layout') === undefined) {
+    customElements.define('cre8-layout', Cre8Layout);
+}
+export default Cre8Layout;
+//# sourceMappingURL=layout.js.map

package/lib/components/layout/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../components/layout/layout.ts"],"names":[],"mappings":";;;;;;AAAA,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,MAAM,MAAM,oBAAoB,CAAC;AAExC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAezC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE;YACjE,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,cAAc;SACjE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,kBAAkB;;;KAGjC,CAAC;IACJ,CAAC;;AAxBQ,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAYvB;IADH,QAAQ,EAAE;2CACkB;AAe/B,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACrD,CAAC;AAQD,eAAe,UAAU,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './layout.styles.js';\n\n/**\n * @slot - The layout content\n */\nexport class Cre8Layout extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   *  Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>Default is a right sidebar</li>\n   * <li>**left-sidebar** formats the first `layout-section` component as a left sidebar</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'left-sidebar';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-layout', {\n          'cre8-c-layout--left-sidebar': this.variant === 'left-sidebar',\n      });\n\n      return html`\n      <div class=\"${componentClassName}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-layout') === undefined) {\n    customElements.define('cre8-layout', Cre8Layout);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-layout': Cre8Layout;\n  }\n}\n\nexport default Cre8Layout;\n"]}

package/lib/components/layout/layout.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}.cre8-c-layout{display:grid;flex:1;gap:1rem;grid-template-columns:minmax(0, 1fr)}@media all and (min-width: 960px){.cre8-c-layout{gap:2rem;grid-template-columns:minmax(0, 1fr) calc(var(--cre8-sidebar-width, 40%) - (0.5rem))}}@media all and (min-width: 960px){.cre8-c-layout--left-sidebar{grid-template-columns:calc(var(--cre8-sidebar-width, 40%) - (0.5rem)) minmax(0, 1fr)}}`;
+export default styles;
+//# sourceMappingURL=layout.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.styles.js","sourceRoot":"","sources":["../../../components/layout/layout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,goEAAgoE,CAAC;AACnpE,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}.cre8-c-layout{display:grid;flex:1;gap:1rem;grid-template-columns:minmax(0, 1fr)}@media all and (min-width: 960px){.cre8-c-layout{gap:2rem;grid-template-columns:minmax(0, 1fr) calc(var(--cre8-sidebar-width, 40%) - (0.5rem))}}@media all and (min-width: 960px){.cre8-c-layout--left-sidebar{grid-template-columns:calc(var(--cre8-sidebar-width, 40%) - (0.5rem)) minmax(0, 1fr)}}`;\nexport default styles;\n"]}

package/lib/components/layout-container/layout-container.js

@@ -1,31 +1,34 @@
-import { css as n, html as o } from "lit";
-import { property as h } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const p = n`*,::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}.cre8-l-layout-container{width:100%;max-width:var(--cre8-l-max-width);padding-right:1rem;padding-left:1rem;margin:0 auto}.cre8-l-layout-container--full-height{display:flex;flex-direction:column;flex:1;height:100%}`;
-var c = Object.defineProperty, f = (s, t, l, x) => {
-  for (var e = void 0, i = s.length - 1, d; i >= 0; i--)
-    (d = s[i]) && (e = d(t, l, e) || e);
-  return e && c(t, l, e), e;
+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 a = class a extends m {
-  render() {
-    const t = this.componentClassNames("cre8-l-layout-container", {
-      "cre8-l-layout-container--full-height": this.fullHeight === !0
-    });
-    return o`
-      <div class="${t}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './layout-container.styles.js';
+/**
+ * @slot - The contents of the layout container
+ */
+export class Cre8LayoutContainer extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-l-layout-container', {
+            'cre8-l-layout-container--full-height': this.fullHeight === true,
+        });
+        return html `
+      <div class="${componentClassName}">
         <slot></slot>
       </div>
     `;
-  }
-};
-a.styles = [p];
-let r = a;
-f([
-  h({ type: Boolean, reflect: !0 })
-], r.prototype, "fullHeight");
-customElements.get("cre8-layout-container") === void 0 && customElements.define("cre8-layout-container", r);
-export {
-  r as Cre8LayoutContainer,
-  r as default
-};
+    }
+}
+Cre8LayoutContainer.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LayoutContainer.prototype, "fullHeight", void 0);
+if (customElements.get('cre8-layout-container') === undefined) {
+    customElements.define('cre8-layout-container', Cre8LayoutContainer);
+}
+export default Cre8LayoutContainer;
+//# sourceMappingURL=layout-container.js.map

package/lib/components/layout-container/layout-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-container.js","sourceRoot":"","sources":["../../../components/layout-container/layout-container.ts"],"names":[],"mappings":";;;;;;AAAA,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,MAAM,MAAM,8BAA8B,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,WAAW;IAUlD,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,yBAAyB,EAAE;YAC3E,sCAAsC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;SACnE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,kBAAkB;;;KAGjC,CAAC;IACJ,CAAC;;AAnBQ,0BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAClB;AAe3B,IAAI,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;AACxE,CAAC;AAQD,eAAe,mBAAmB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './layout-container.styles.js';\n\n/**\n * @slot - The contents of the layout container\n */\nexport class Cre8LayoutContainer extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Full height variant\n   * 1) Sets the height to 100%\n   */\n  @property({ type: Boolean, reflect: true })\n      fullHeight?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-l-layout-container', {\n          'cre8-l-layout-container--full-height': this.fullHeight === true,\n      });\n\n      return html`\n      <div class=\"${componentClassName}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-layout-container') === undefined) {\n    customElements.define('cre8-layout-container', Cre8LayoutContainer);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-layout-container': Cre8LayoutContainer;\n  }\n}\n\nexport default Cre8LayoutContainer;\n"]}

package/lib/components/layout-container/layout-container.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}.cre8-l-layout-container{width:100%;max-width:var(--cre8-l-max-width);padding-right:1rem;padding-left:1rem;margin:0 auto}.cre8-l-layout-container--full-height{display:flex;flex-direction:column;flex:1;height:100%}`;
+export default styles;
+//# sourceMappingURL=layout-container.styles.js.map

package/lib/components/layout-container/layout-container.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-container.styles.js","sourceRoot":"","sources":["../../../components/layout-container/layout-container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,+9DAA+9D,CAAC;AACl/D,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}.cre8-l-layout-container{width:100%;max-width:var(--cre8-l-max-width);padding-right:1rem;padding-left:1rem;margin:0 auto}.cre8-l-layout-container--full-height{display:flex;flex-direction:column;flex:1;height:100%}`;\nexport default styles;\n"]}

package/lib/components/layout-section/layout-section.js

@@ -1,37 +1,45 @@
-import { css as h, html as p } from "lit";
-import { property as l } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const c = 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}.cre8-c-layout-section{width:100%;height:100%}`;
-var f = Object.defineProperty, n = (a, r, d, x) => {
-  for (var e = void 0, i = a.length - 1, o; i >= 0; i--)
-    (o = a[i]) && (e = o(r, d, e) || e);
-  return e && f(r, d, e), e;
+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 m {
-  constructor() {
-    super(...arguments), this.top = "1rem";
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-layout-section", {
-      "cre8-c-layout-section--sticky": this.behavior === "sticky"
-    });
-    return p`
-      <div class="${r}" style=${`top: ${this.top}`}>
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './layout-section.styles.js';
+/**
+ * @slot - The content of the layout section
+ */
+export class Cre8LayoutSection extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Top style
+         * 1) Used to create dynamic sticky containers that can be adjusted based on the content
+         */
+        this.top = '1rem';
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-layout-section', {
+            'cre8-c-layout-section--sticky': this.behavior === 'sticky',
+        });
+        return html `
+      <div class="${componentClassName}" style=${`top: ${this.top}`}>
         <slot></slot>
       </div>
     `;
-  }
-};
-s.styles = [c];
-let t = s;
-n([
-  l()
-], t.prototype, "behavior");
-n([
-  l()
-], t.prototype, "top");
-customElements.get("cre8-layout-section") === void 0 && customElements.define("cre8-layout-section", t);
-export {
-  t as Cre8LayoutSection,
-  t as default
-};
+    }
+}
+Cre8LayoutSection.styles = [styles];
+__decorate([
+    property()
+], Cre8LayoutSection.prototype, "behavior", void 0);
+__decorate([
+    property()
+], Cre8LayoutSection.prototype, "top", void 0);
+if (customElements.get('cre8-layout-section') === undefined) {
+    customElements.define('cre8-layout-section', Cre8LayoutSection);
+}
+export default Cre8LayoutSection;
+//# sourceMappingURL=layout-section.js.map

package/lib/components/layout-section/layout-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-section.js","sourceRoot":"","sources":["../../../components/layout-section/layout-section.ts"],"names":[],"mappings":";;;;;;AAAA,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,MAAM,MAAM,4BAA4B,CAAC;AAEhD;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAAlD;;QAWE;;;WAGG;QAEC,QAAG,GAAY,MAAM,CAAC;IAa5B,CAAC;IAXC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE;YACzE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;SAC9D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,kBAAkB,WAAW,QAAQ,IAAI,CAAC,GAAG,EAAE;;;KAG9D,CAAC;IACJ,CAAC;;AA3BQ,wBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAQvB;IADH,QAAQ,EAAE;mDACa;AAOpB;IADH,QAAQ,EAAE;8CACe;AAe5B,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC1D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AACpE,CAAC;AAQD,eAAe,iBAAiB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './layout-section.styles.js';\n\n/**\n * @slot - The content of the layout section\n */\nexport class Cre8LayoutSection extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Behavioral variants\n   * - **sticky** allows the layout section to stick to the screen until the\n   *   section reaches the bottom of the layout or the next layout section.\n   */\n  @property()\n      behavior?: 'sticky';\n\n  /**\n   * Top style\n   * 1) Used to create dynamic sticky containers that can be adjusted based on the content\n   */\n  @property()\n      top?: string = '1rem';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-layout-section', {\n          'cre8-c-layout-section--sticky': this.behavior === 'sticky',\n      });\n\n      return html`\n      <div class=\"${componentClassName}\" style=${`top: ${this.top}`}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-layout-section') === undefined) {\n    customElements.define('cre8-layout-section', Cre8LayoutSection);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-layout-section': Cre8LayoutSection;\n  }\n}\n\nexport default Cre8LayoutSection;\n"]}

package/lib/components/layout-section/layout-section.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}.cre8-c-layout-section{width:100%;height:100%}`;
+export default styles;
+//# sourceMappingURL=layout-section.styles.js.map

package/lib/components/layout-section/layout-section.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-section.styles.js","sourceRoot":"","sources":["../../../components/layout-section/layout-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,wzDAAwzD,CAAC;AAC30D,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}.cre8-c-layout-section{width:100%;height:100%}`;\nexport default styles;\n"]}