@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/heading/heading.js

@@ -1,155 +1,18 @@
-import { css as p, html as t } from "lit";
+import { css as y, html as t } from "lit";
 import { property as i } from "lit/decorators.js";
-import { Cre8Element as g } from "../cre8-element.js";
-const o = p`@import '../../design-tokens/core/scss/theming/component';
-
-
-:host {
-  display: inline;
-  text-align: left;
-}
-/**
- * DefaultHeading component styling/Heading title-large
- */
-.cre8-c-heading,
-.cre8-c-heading--title-large {
-  @include cre8-typography-title-large;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-}
-
-/**
- * Heading with theme headline-large preset applied
- */
-.cre8-c-heading--headline-large {
-  @include cre8-typography-headline-large;
-}
-
-/**
- * Heading with theme headline-default preset applied
- */
-.cre8-c-heading--headline-default {
-  @include cre8-typography-headline-default;
-}
-
-/**
- * Heading with theme headline-small preset applied
- */
-.cre8-c-heading--headline-small {
-  @include cre8-typography-headline-small;
-}
-
-/**
- * Heading with theme title-xlarge preset applied
- */
-.cre8-c-heading--title-xlarge {
-  @include cre8-typography-title-xlarge;
-}
-
-/**
- * Heading with theme title-large preset applied
- */
-.cre8-c-heading--title-large {
-  @include cre8-typography-title-large;
-}
-
-/**
- * Heading with theme title-default preset applied
- */
-.cre8-c-heading--title-default {
-  @include cre8-typography-title-default;
-}
-
-/**
- * Heading with theme title-small preset applied
- */
-.cre8-c-heading--title-small {
-  @include cre8-typography-title-small;
-}
-/**
- * Heading with theme display-small preset applied
- */
-.cre8-c-heading--display-small {
-  @include cre8-typography-display-small;
-}
-
-/**
- * Heading with theme display-default preset applied
- */
-.cre8-c-heading--display-default {
-  @include cre8-typography-display-default;
-}
-
-/**
- * Heading with theme label-large preset applied
- */
-.cre8-c-heading--label-large {
-  @include cre8-typography-label-large;
-}
-
-/**
- * Heading with theme label-default preset applied
- */
-.cre8-c-heading--label-default {
-  @include cre8-typography-label-default;
-}
-
-/**
- * Heading with theme label-small preset applied
- */
-.cre8-c-heading--label-small {
-  @include cre8-typography-label-small;
-}
-
-/**
- * Heading with theme meta-default preset applied
- */
-.cre8-c-heading--meta-large {
-  @include cre8-typography-meta-large;
-  text-transform: uppercase;
-}
-
-/**
- * Heading with theme meta-default preset applied
- */
-.cre8-c-heading--meta-default {
-  @include cre8-typography-meta-default;
-  text-transform: uppercase;
-}
-
-/**
- * Heading with theme meta-small preset applied
- */
-.cre8-c-heading--meta-small {
-  @include cre8-typography-meta-small;
-  text-transform: uppercase;
-}
-
-/**
- * Heading with brand color applied
- */
-.cre8-c-heading--brand-color {
-  color: var(--cre8-color-content-brand-strong);
-  &.cre8-c-heading--inverted {
-    color: var(--cre8-color-content-brand-knockout);
-  }
-}
-
-.cre8-c-heading--inverted {
-  color: var(--cre8-color-content-knockout);
-}
-`;
-var m = Object.defineProperty, c = (h, r, e, y) => {
-  for (var l = void 0, d = h.length - 1, s; d >= 0; d--)
-    (s = h[d]) && (l = s(r, e, l) || l);
-  return l && m(r, e, l), l;
+import { Cre8Element as c } from "../cre8-element.js";
+const d = y`*,::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;text-align:left}.cre8-c-heading,.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-mobile-font-family);font-size:var(--cre8-typography-title-large-mobile-font-size);font-weight:var(--cre8-typography-title-large-mobile-font-weight);line-height:var(--cre8-typography-title-large-mobile-line-height);text-decoration:var(--cre8-typography-title-large-mobile-text-decoration);text-transform:var(--cre8-typography-title-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading,.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-font-family);font-size:var(--cre8-typography-title-large-font-size);font-weight:var(--cre8-typography-title-large-font-weight);line-height:var(--cre8-typography-title-large-line-height);text-decoration:var(--cre8-typography-title-large-text-decoration);text-transform:var(--cre8-typography-title-large-text-transform)}}.cre8-c-heading,.cre8-c-heading--title-large{margin:0;color:var(--cre8-color-content-default)}.cre8-c-heading--headline-large{font-family:var(--cre8-typography-headline-large-mobile-font-family);font-size:var(--cre8-typography-headline-large-mobile-font-size);font-weight:var(--cre8-typography-headline-large-mobile-font-weight);line-height:var(--cre8-typography-headline-large-mobile-line-height);text-decoration:var(--cre8-typography-headline-large-mobile-text-decoration);text-transform:var(--cre8-typography-headline-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-large{font-family:var(--cre8-typography-headline-large-font-family);font-size:var(--cre8-typography-headline-large-font-size);font-weight:var(--cre8-typography-headline-large-font-weight);line-height:var(--cre8-typography-headline-large-line-height);text-decoration:var(--cre8-typography-headline-large-text-decoration);text-transform:var(--cre8-typography-headline-large-text-transform)}}.cre8-c-heading--headline-default{font-family:var(--cre8-typography-headline-default-mobile-font-family);font-size:var(--cre8-typography-headline-default-mobile-font-size);font-weight:var(--cre8-typography-headline-default-mobile-font-weight);line-height:var(--cre8-typography-headline-default-mobile-line-height);text-decoration:var(--cre8-typography-headline-default-mobile-text-decoration);text-transform:var(--cre8-typography-headline-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-default{font-family:var(--cre8-typography-headline-default-font-family);font-size:var(--cre8-typography-headline-default-font-size);font-weight:var(--cre8-typography-headline-default-font-weight);line-height:var(--cre8-typography-headline-default-line-height);text-decoration:var(--cre8-typography-headline-default-text-decoration);text-transform:var(--cre8-typography-headline-default-text-transform)}}.cre8-c-heading--headline-small{font-family:var(--cre8-typography-headline-small-mobile-font-family);font-size:var(--cre8-typography-headline-small-mobile-font-size);font-weight:var(--cre8-typography-headline-small-mobile-font-weight);line-height:var(--cre8-typography-headline-small-mobile-line-height);text-decoration:var(--cre8-typography-headline-small-mobile-text-decoration);text-transform:var(--cre8-typography-headline-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-small{font-family:var(--cre8-typography-headline-small-font-family);font-size:var(--cre8-typography-headline-small-font-size);font-weight:var(--cre8-typography-headline-small-font-weight);line-height:var(--cre8-typography-headline-small-line-height);text-decoration:var(--cre8-typography-headline-small-text-decoration);text-transform:var(--cre8-typography-headline-small-text-transform)}}.cre8-c-heading--title-xlarge{font-family:var(--cre8-typography-title-xlarge-mobile-font-family);font-size:var(--cre8-typography-title-xlarge-mobile-font-size);font-weight:var(--cre8-typography-title-xlarge-mobile-font-weight);line-height:var(--cre8-typography-title-xlarge-mobile-line-height);text-decoration:var(--cre8-typography-title-xlarge-mobile-text-decoration);text-transform:var(--cre8-typography-title-xlarge-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-xlarge{font-family:var(--cre8-typography-title-xlarge-font-family);font-size:var(--cre8-typography-title-xlarge-font-size);font-weight:var(--cre8-typography-title-xlarge-font-weight);line-height:var(--cre8-typography-title-xlarge-line-height);text-decoration:var(--cre8-typography-title-xlarge-text-decoration);text-transform:var(--cre8-typography-title-xlarge-text-transform)}}.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-mobile-font-family);font-size:var(--cre8-typography-title-large-mobile-font-size);font-weight:var(--cre8-typography-title-large-mobile-font-weight);line-height:var(--cre8-typography-title-large-mobile-line-height);text-decoration:var(--cre8-typography-title-large-mobile-text-decoration);text-transform:var(--cre8-typography-title-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-font-family);font-size:var(--cre8-typography-title-large-font-size);font-weight:var(--cre8-typography-title-large-font-weight);line-height:var(--cre8-typography-title-large-line-height);text-decoration:var(--cre8-typography-title-large-text-decoration);text-transform:var(--cre8-typography-title-large-text-transform)}}.cre8-c-heading--title-default{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-default{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-heading--title-small{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-heading--title-small{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-heading--display-small{font-family:var(--cre8-typography-display-small-mobile-font-family);font-size:var(--cre8-typography-display-small-mobile-font-size);font-weight:var(--cre8-typography-display-small-mobile-font-weight);line-height:var(--cre8-typography-display-small-mobile-line-height);text-decoration:var(--cre8-typography-display-small-mobile-text-decoration);text-transform:var(--cre8-typography-display-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--display-small{font-family:var(--cre8-typography-display-small-font-family);font-size:var(--cre8-typography-display-small-font-size);font-weight:var(--cre8-typography-display-small-font-weight);line-height:var(--cre8-typography-display-small-line-height);text-decoration:var(--cre8-typography-display-small-text-decoration);text-transform:var(--cre8-typography-display-small-text-transform)}}.cre8-c-heading--display-default{font-family:var(--cre8-typography-display-default-mobile-font-family);font-size:var(--cre8-typography-display-default-mobile-font-size);font-weight:var(--cre8-typography-display-default-mobile-font-weight);line-height:var(--cre8-typography-display-default-mobile-line-height);text-decoration:var(--cre8-typography-display-default-mobile-text-decoration);text-transform:var(--cre8-typography-display-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--display-default{font-family:var(--cre8-typography-display-default-font-family);font-size:var(--cre8-typography-display-default-font-size);font-weight:var(--cre8-typography-display-default-font-weight);line-height:var(--cre8-typography-display-default-line-height);text-decoration:var(--cre8-typography-display-default-text-decoration);text-transform:var(--cre8-typography-display-default-text-transform)}}.cre8-c-heading--label-large{font-family:var(--cre8-typography-label-large-font-family);font-size:var(--cre8-typography-label-large-font-size);font-weight:var(--cre8-typography-label-large-font-weight);line-height:var(--cre8-typography-label-large-line-height);text-decoration:var(--cre8-typography-label-large-text-decoration);text-transform:var(--cre8-typography-label-large-text-transform)}.cre8-c-heading--label-default{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform)}.cre8-c-heading--label-small{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)}.cre8-c-heading--meta-large{font-family:var(--cre8-typography-meta-large-font-family);font-size:var(--cre8-typography-meta-large-font-size);font-weight:var(--cre8-typography-meta-large-font-weight);line-height:var(--cre8-typography-meta-large-line-height);text-decoration:var(--cre8-typography-meta-large-text-decoration);text-transform:var(--cre8-typography-meta-large-text-transform);text-transform:uppercase}.cre8-c-heading--meta-default{font-family:var(--cre8-typography-meta-default-font-family);font-size:var(--cre8-typography-meta-default-font-size);font-weight:var(--cre8-typography-meta-default-font-weight);line-height:var(--cre8-typography-meta-default-line-height);text-decoration:var(--cre8-typography-meta-default-text-decoration);text-transform:var(--cre8-typography-meta-default-text-transform);text-transform:uppercase}.cre8-c-heading--meta-small{font-family:var(--cre8-typography-meta-small-font-family);font-size:var(--cre8-typography-meta-small-font-size);font-weight:var(--cre8-typography-meta-small-font-weight);line-height:var(--cre8-typography-meta-small-line-height);text-decoration:var(--cre8-typography-meta-small-text-decoration);text-transform:var(--cre8-typography-meta-small-text-transform);text-transform:uppercase}.cre8-c-heading--brand-color{color:var(--cre8-color-content-brand-strong)}.cre8-c-heading--brand-color.cre8-c-heading--inverted{color:var(--cre8-color-content-brand-knockout)}.cre8-c-heading--inverted{color:var(--cre8-color-content-knockout)}`;
+var f = Object.defineProperty, o = (g, l, e, s) => {
+  for (var r = void 0, n = g.length - 1, p; n >= 0; n--)
+    (p = g[n]) && (r = p(l, e, r) || r);
+  return r && f(l, e, r), r;
 };
-const n = class n extends g {
+const h = class h extends c {
   constructor() {
     super(...arguments), this.tagVariant = "h5";
   }
   render() {
-    const r = this.type ? {} : {
+    const l = this.type ? {} : {
       "cre8-c-heading--headline-large": this.tagVariant === "h1",
       "cre8-c-heading--headline-default": this.tagVariant === "h2",
       "cre8-c-heading--headline-small": this.tagVariant === "h3",
@@ -157,7 +20,7 @@ const n = class n extends g {
       "cre8-c-heading--title-default": this.tagVariant === "h5",
       "cre8-c-heading--title-small": this.tagVariant === "h6"
     }, e = this.componentClassNames("cre8-c-heading", {
-      ...r,
+      ...l,
       "cre8-c-heading--headline-large": this.type === "headline-large",
       "cre8-c-heading--headline-default": this.type === "headline-default",
       "cre8-c-heading--headline-small": this.type === "headline-small",
@@ -194,18 +57,18 @@ const n = class n extends g {
     }
   }
 };
-n.styles = [o];
-let a = n;
-c([
+h.styles = [d];
+let a = h;
+o([
   i()
 ], a.prototype, "type");
-c([
+o([
   i()
 ], a.prototype, "tagVariant");
-c([
+o([
   i({ type: Boolean, reflect: !0 })
 ], a.prototype, "inverted");
-c([
+o([
   i({ type: Boolean, reflect: !0 })
 ], a.prototype, "brandColor");
 customElements.get("cre8-heading") === void 0 && customElements.define("cre8-heading", a);

package/lib/components/heading/heading.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.styles.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAyIX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"heading.styles.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA2va,CAAC;AACxwa,eAAe,MAAM,CAAC"}

package/lib/components/hero/hero.js

@@ -1,147 +1,15 @@
-import { css as d, html as s } from "lit";
-import { property as r } from "lit/decorators.js";
-import { Cre8Element as h } from "../cre8-element.js";
-const g = d`@import '../../design-tokens/core/scss/theming/component';
-
-// #HERO
-
-/**
- * 1) Block with an image and overlay on medium and large screens
- */
-.cre8-c-hero {
-  position: relative;
-  margin-bottom: calc(8px * 4);
-
-  @media all and (min-width:$cre8-breakpoint-md) {
-    height: 40vh;
-  }
-}
-
-/**
- * Hero image
- */
-.cre8-c-hero__image {
-  width: 100%;
-  height: 100%;
-
-  @media all and (min-width:$cre8-breakpoint-md) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    object-fit: cover;
-  }
-}
-
-/**
- * Hero body
- * 1) Content is placed in the bottom left part of the image on medium/large screens by default
- */
-.cre8-c-hero__body {
-  display: flex;
-  flex-direction: column;
-  padding-top: calc(8px * 2);
-
-  @media all and (min-width:$cre8-breakpoint-md) {
-    position: absolute;
-    align-items: flex-start;
-    justify-content: flex-end;
-    width: 100%;
-    height: 100%;
-    padding-top: calc(8px * 4);
-    padding-bottom: calc(8px * 4);
-  }
-
-  /**
-   * Hero body within align top left variant
-   * 1) Place body content in the top left part of the image on medium/large screens
-   */
-  .cre8-c-hero--top-left & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      justify-content: flex-start;
-      align-items: flex-start;
-    }
-  }
-
-  /**
-   * Hero body within align left variant
-   * 1) Place body content along left part of the image and vertically centered on medium/large screens
-   */
-  .cre8-c-hero--left & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      justify-content: center;
-    }
-  }
-
-  /**
-   * Hero body within align top center variant
-   * 1) Place body content in the top center part of the image on medium/large screens
-   */
-  .cre8-c-hero--top-center & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      justify-content: flex-start;
-      align-items: center;
-    }
-  }
-
-  /**
-   * Hero body within align center variant
-   * 1) Place body content horizontally and vertically centered overlaying the image on medium/large screens
-   */
-  .cre8-c-hero--center & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  /**
-   * Hero body within align bottom center variant
-   * 1) Place body content in the bottom center part of the image on medium/large screens
-   */
-  .cre8-c-hero--bottom-center & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      justify-content: flex-end;
-      align-items: center;
-    }
-  }
-  .cre8-c-hero--top-right & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      justify-content: flex-start;
-      align-items: flex-end;
-    }
-  }
-
-  /**
-   * Hero body within align right variant
-   * 1) Place body content along right part of the image and vertically centered on medium/large screens
-   */
-  .cre8-c-hero--right & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      justify-content: center;
-      align-items: flex-end;
-    }
-  }
-
-  /**
-   * Hero body within align bottom right variant
-   * 1) Place body content in the bottom right part of the image on medium/large screens
-   */
-  .cre8-c-hero--bottom-right & {
-    @media all and (min-width:$cre8-breakpoint-md) {
-      justify-content: flex-end;
-      align-items: flex-end;
-    }
-  }
-}
-`;
-var p = Object.defineProperty, o = (c, i, l, f) => {
-  for (var e = void 0, n = c.length - 1, m; n >= 0; n--)
-    (m = c[n]) && (e = m(i, l, e) || e);
-  return e && p(i, l, e), e;
+import { css as l, html as h } from "lit";
+import { property as a } from "lit/decorators.js";
+import { Cre8Element as m } from "../cre8-element.js";
+const p = l`*,::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-hero{position:relative;margin-bottom:2rem}@media all and (min-width: 768px){.cre8-c-hero{height:40vh}}.cre8-c-hero__image{width:100%;height:100%}@media all and (min-width: 768px){.cre8-c-hero__image{position:absolute;top:0;left:0;object-fit:cover}}.cre8-c-hero__body{display:flex;flex-direction:column;padding-top:1rem}@media all and (min-width: 768px){.cre8-c-hero__body{position:absolute;align-items:flex-start;justify-content:flex-end;width:100%;height:100%;padding-top:2rem;padding-bottom:2rem}}@media all and (min-width: 768px){.cre8-c-hero--top-left .cre8-c-hero__body{justify-content:flex-start;align-items:flex-start}}@media all and (min-width: 768px){.cre8-c-hero--left .cre8-c-hero__body{justify-content:center}}@media all and (min-width: 768px){.cre8-c-hero--top-center .cre8-c-hero__body{justify-content:flex-start;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--center .cre8-c-hero__body{justify-content:center;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--bottom-center .cre8-c-hero__body{justify-content:flex-end;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--top-right .cre8-c-hero__body{justify-content:flex-start;align-items:flex-end}}@media all and (min-width: 768px){.cre8-c-hero--right .cre8-c-hero__body{justify-content:center;align-items:flex-end}}@media all and (min-width: 768px){.cre8-c-hero--bottom-right .cre8-c-hero__body{justify-content:flex-end;align-items:flex-end}}`;
+var f = Object.defineProperty, o = (s, r, c, g) => {
+  for (var e = void 0, i = s.length - 1, d; i >= 0; i--)
+    (d = s[i]) && (e = d(r, c, e) || e);
+  return e && f(r, c, e), e;
 };
-const a = class a extends h {
+const n = class n extends m {
   render() {
-    const i = this.componentClassNames("cre8-c-hero", {
+    const r = this.componentClassNames("cre8-c-hero", {
       "cre8-c-hero--top-left": this.align === "top-left",
       "cre8-c-hero--left": this.align === "left",
       "cre8-c-hero--top-center": this.align === "top-center",
@@ -151,8 +19,8 @@ const a = class a extends h {
       "cre8-c-hero--right": this.align === "right",
       "cre8-c-hero--bottom-right": this.align === "bottom-right"
     });
-    return s`
-      <div class="${i}">
+    return h`
+      <div class="${r}">
         <cre8-layout-container>
           <img class="cre8-c-hero__image" src="${this.imgSrc}" alt="${this.imgAlt}" />
           <div class="cre8-c-hero__body">
@@ -163,16 +31,16 @@ const a = class a extends h {
     `;
   }
 };
-a.styles = [g];
-let t = a;
+n.styles = [p];
+let t = n;
 o([
-  r()
+  a()
 ], t.prototype, "imgSrc");
 o([
-  r()
+  a()
 ], t.prototype, "imgAlt");
 o([
-  r()
+  a()
 ], t.prototype, "align");
 customElements.get("cre8-hero") === void 0 && customElements.define("cre8-hero", t);
 export {

package/lib/components/hero/hero.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAoIX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA6sG,CAAC;AAC1tG,eAAe,MAAM,CAAC"}

package/lib/components/icon/icon.js

@@ -1,7 +1,7 @@
 import "lit";
 import "lit/directives/unsafe-html.js";
 import "lit/decorators.js";
-import { C as e, C } from "../../icon-DImqxDiW.js";
+import { C as e, C } from "../../icon-D22g8aWB.js";
 import "../../Caret_Down-VI6aytYo.js";
 import "../cre8-element.js";
 export {

package/lib/components/icon/icon.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../components/icon/icon.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuGX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../components/icon/icon.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAi8F,CAAC;AAC98F,eAAe,MAAM,CAAC"}