@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/date-picker/date-picker.js

@@ -1,3312 +1,82 @@
-import { css as x, html as s, nothing as f } from "lit";
-import { ifDefined as g } from "lit-html/directives/if-defined.js";
-import { state as c, property as p, query as R } from "lit/decorators.js";
-import { Cre8Element as w } from "../cre8-element.js";
-import "../icon/icon.js";
-import "../button/button.js";
-import { s as O, f as Y } from "../../cre8-form-element-BymRdQUC.js";
-import { Cre8Field as F } from "../field/field.js";
-class M {
-  constructor(t, e, a, r) {
-    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (i, n) => {
-      this.unsubscribe && (this.unsubscribe !== n && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = i, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(i, n)), this.unsubscribe = n;
-    }, this.host = t, e.context !== void 0) {
-      const i = e;
-      this.context = i.context, this.callback = i.callback, this.subscribe = i.subscribe ?? !1;
-    } else this.context = e, this.callback = a, this.subscribe = r ?? !1;
-    this.host.addController(this);
-  }
-  hostConnected() {
-    this.dispatchRequest();
-  }
-  hostDisconnected() {
-    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
-  }
-  dispatchRequest() {
-    this.host.dispatchEvent(new O(this.context, this.host, this.t, this.subscribe));
-  }
-}
-function S({ context: d, subscribe: t }) {
-  return (e, a) => {
-    typeof a == "object" ? a.addInitializer((function() {
-      new M(this, { context: d, callback: (r) => {
-        e.set.call(this, r);
-      }, subscribe: t });
-    })) : e.constructor.addInitializer(((r) => {
-      new M(r, { context: d, callback: (i) => {
-        r[a] = i;
-      }, subscribe: t });
-    }));
-  };
-}
-const N = x`*,::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:block}.cre8-c-date-picker__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-date-picker__body{position:relative;display:flex;align-items:center}input::-webkit-calendar-picker-indicator{display:none}input[type=date]::-webkit-input-placeholder{visibility:hidden !important}.cre8-c-date-picker__calendar-icon-button{position:absolute;right:0.5rem;background:var(--cre8-color-bg-default);border:none;border-radius:0;--cre8-icon-height: size(3);--cre8-icon-width: size(3)}.cre8-c-date-picker--disabled .cre8-c-date-picker__calendar-icon-button,.cre8-c-date-picker--read-only .cre8-c-date-picker__calendar-icon-button{background:var(--cre8-color-bg-disabled)}.cre8-c-date-picker__input{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);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-date-picker__input:hover:not(:disabled),.cre8-c-date-picker__input:focus:not(:disabled),.cre8-c-date-picker__input:active:not(:disabled),.cre8-c-date-picker__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-date-picker__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-date-picker__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-date-picker__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input{border-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`, X = x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-.cre8-c-calendar {
-  min-width: 340px;
-  border: var(--cre8-color-border-strong);
-  border-radius: var(--cre8-border-radius-container);
-  border-width: var(--cre8-border-width-default);
-  border-style: var(--cre8-border-style-default);
-  margin-top: 0.25rem;
-  background-color: var(--cre8-color-bg-default);
-  position: absolute;
-}
-
-/* shortcuts */
-.cre8-c-calendar__header-shortcuts {
-  display: inline-flex;
-  justify-content: center;
-  width: 100%;
-  padding-top: 1rem;
-  padding-bottom: 0.5rem;
-}
-.cre8-c-calendar__header-shortcuts cre8-button + cre8-button {
-  padding-left: 0.5rem;
-}
-.cre8-c-calendar__header-shortcuts cre8-button {
-  max-height: 32px;
-}
-
-table {
-  width: 100%;
-}
-
-/* table row */
-tr {
-  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);
-  display: grid;
-  grid-row-gap: 0.33em;
-  grid-template-columns: repeat(7, 1fr);
-  list-style: none;
-  margin: unset;
-  padding: unset;
-  position: relative;
-}
-
-/* day wrappers */
-td {
-  align-items: center;
-  display: flex;
-  height: 48px;
-  justify-content: center;
-  width: 48px;
-}
-
-/* days */
-.cre8-c-calendar :is(thead, tbody) :is(span, button) {
-  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);
-  align-items: center;
-  block-size: 2em;
-  border-radius: var(--cre8-border-radius-brand);
-  display: flex;
-  inline-size: 2em;
-  justify-content: center;
-  margin-block: var(0, 0 0.33em);
-  user-select: none;
-}
-
-/* day buttons */
-.cre8-c-calendar__day-button {
-  border: none;
-  background: none;
-  margin: 0;
-  padding: 0;
-}
-.cre8-c-calendar__day-button:hover, .cre8-c-calendar__day-button:focus {
-  background: var(--cre8-color-bg-default-hover);
-}
-.cre8-c-calendar__day-button.cre8-c-calendar__different-month {
-  color: var(--cre8-color-content-subtle);
-}
-.cre8-c-calendar__day-button.cre8-c-calendar__different-month:hover, .cre8-c-calendar__day-button.cre8-c-calendar__different-month:focus {
-  background: var(--cre8-color-bg-subtle);
-}
-.cre8-c-calendar__day-button[data-today] {
-  color: var(--cre8-color-content-brand);
-  border-color: var(--cre8-color-border-brand);
-  border-width: var(--cre8-border-width-default);
-  border-style: var(--cre8-border-style-default);
-}
-.cre8-c-calendar__day-button[data-selected] {
-  background: var(--cre8-color-bg-brand-strong);
-  color: var(--cre8-color-content-knockout);
-}
-.cre8-c-calendar__day-button[data-selected]:hover, .cre8-c-calendar__day-button[data-selected]:focus {
-  background: var(--cre8-color-bg-brand-strong-hover);
-}`, A = x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-.cre8-c-calendar-month-modal {
-  padding: 0.5rem;
-}
-
-/* grid */
-ol {
-  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);
-  display: grid;
-  grid-row-gap: 0.33em;
-  grid-template-columns: repeat(3, 1fr);
-  list-style: none;
-  margin: unset;
-  padding: unset;
-}
-
-li {
-  display: inline-flex;
-  justify-content: center;
-}`;
-var E = Object.defineProperty, I = (d, t, e, a) => {
-  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = n(t, e, r) || r);
-  return r && E(t, e, r), r;
-};
-const k = class k extends w {
-  constructor() {
-    super(), this.monthNames = [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December"
-    ];
-  }
-  firstUpdated() {
-    this.focusOnCurrentMonth();
-  }
-  async focusOnCurrentMonth() {
-    await this.updateComplete, (this.shadowRoot?.querySelector(
-      "li[data-current-month]"
-    ).children[0].shadowRoot?.querySelector("button")).focus();
-  }
-  emitMonth(t) {
-    const e = new CustomEvent("changeMonth", {
-      detail: {
-        month: t
-      }
-    });
-    this.dispatchEvent(e);
-  }
-  getMonthListItems() {
-    return this.monthNames.map(
-      (t, e) => s` <li ?data-current-month="${e === this.currentMonth}" >
-          <cre8-button text="${t}" variant="tertiary" size="sm"
-          @click="${() => this.emitMonth(e)}"></cre8-button>
-        </li>`
-    );
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-calendar-month-modal", {});
-    return s` <div class="${t}">
-      <ol aria-label="choose a month">
-        ${this.getMonthListItems()}
-      </ol>
-    </div> `;
-  }
-};
-k.styles = [A];
-let b = k;
-I([
-  c()
-], b.prototype, "monthNames");
-I([
-  p({ reflect: !0, type: Number })
-], b.prototype, "currentMonth");
-customElements.get("cre8-calendar-month-modal") === void 0 && customElements.define("cre8-calendar-month-modal", b);
-const V = x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-.cre8-c-calendar-year-modal {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 0.5rem;
-}
-
-/* grid */
-ol {
-  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);
-  display: grid;
-  grid-row-gap: 0.33em;
-  grid-template-columns: repeat(3, 1fr);
-  list-style: none;
-  margin: unset;
-  padding: unset;
-}
-
-li {
-  display: inline-flex;
-  justify-content: center;
-}
-
-cre8-button {
-  height: fit-content;
-}`;
-var P = Object.defineProperty, q = Object.getOwnPropertyDescriptor, v = (d, t, e, a) => {
-  for (var r = a > 1 ? void 0 : a ? q(t, e) : t, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = (a ? n(t, e, r) : n(r)) || r);
-  return a && r && P(t, e, r), r;
-};
-const _ = class _ extends w {
-  get currentYear() {
-    return this._currentYear;
-  }
-  set currentYear(t) {
-    const e = this._currentYear;
-    this._currentYear = t, this.modalAnchorYear = t, this.requestUpdate("currentDate", e), this.createYearArray(this.currentYear);
-  }
-  constructor() {
-    super(), this.yearNumbers = [];
-  }
-  emitYear(t) {
-    const e = new CustomEvent("changeYear", {
-      detail: {
-        year: t
-      }
-    });
-    this.dispatchEvent(e);
-  }
-  createYearArray(t) {
-    const e = Array.from(Array(12).keys());
-    this.yearNumbers = e.map((a) => a + (t - 7));
-  }
-  getYearListItems() {
-    return this.yearNumbers.map(
-      ((t) => s` <li
-        ?data-current-year="${t === this.currentYear}"
-      >
-        <cre8-button
-          text="${t}"
-          variant="tertiary"
-          size="sm"
-          @click="${() => this.emitYear(t)}"
-        ></cre8-button>
-      </li>`)
-    );
-  }
-  firstUpdated() {
-    this.focusOnCurrentYear();
-  }
-  async focusOnCurrentYear() {
-    await this.updateComplete, (this.shadowRoot?.querySelector(
-      "li[data-current-year]"
-    ).children[0].shadowRoot?.querySelector("button")).focus();
-  }
-  previousYearArray() {
-    this.modalAnchorYear -= 12, this.createYearArray(this.modalAnchorYear);
-  }
-  nextYearArray() {
-    this.modalAnchorYear += 12, this.createYearArray(this.modalAnchorYear);
-  }
-  render() {
-    const t = this.componentClassNames(
-      "cre8-c-calendar-year-modal",
-      {}
-    );
-    return s`
-      <div class="${t}">
-        <cre8-button
-          class="cre8-c-calendar-year-modal__nav-button"
-          @click="${this.previousYearArray}"
-          variant="tertiary"
-          text="Previous 12 years"
-          ?hideText=${!0}
-          iconName="keyboard-arrow-left"
-        ></cre8-button>
-        <ol aria-label="choose a year">
-          ${this.getYearListItems()}
-        </ol>
-        <cre8-button
-          class="cre8-c-calendar-year-modal__nav-button"
-          @click="${this.nextYearArray}"
-          variant="tertiary"
-          text="Next 12 years"
-          ?hideText=${!0}
-          iconName="keyboard-arrow-right"
-        ></cre8-button>
-      </div>
-    `;
-  }
-};
-_.styles = [V];
-let h = _;
-v([
-  c()
-], h.prototype, "yearNumbers", 2);
-v([
-  c()
-], h.prototype, "_currentYear", 2);
-v([
-  c()
-], h.prototype, "modalAnchorYear", 2);
-v([
-  p({ reflect: !0, type: Number })
-], h.prototype, "currentYear", 1);
-customElements.get("cre8-calendar-year-modal") === void 0 && customElements.define("cre8-calendar-year-modal", h);
-const B = x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-.cre8-c-calendar-navigation {
-  align-items: center;
-  display: flex;
-  height: 60px;
-  justify-content: center;
-}
-
-.cre8-c-calendar-navigation__inner-buttons {
-  display: flex;
-  min-width: 188px;
-  justify-content: space-around;
-}`;
-var j = Object.defineProperty, C = (d, t, e, a) => {
-  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = n(t, e, r) || r);
-  return r && j(t, e, r), r;
-};
-const D = class D extends w {
-  activateModal(t) {
-    const e = new CustomEvent("activateModal", {
-      detail: {
-        modal: t
-      }
-    });
-    this.dispatchEvent(e);
-  }
-  changeMonth(t) {
-    const e = new CustomEvent("changeMonth", {
-      detail: {
-        addend: t
-      }
-    });
-    this.dispatchEvent(e);
-  }
-  changeYear(t) {
-    const e = new CustomEvent("changeYear", {
-      detail: {
-        addend: t
-      }
-    });
-    this.dispatchEvent(e);
-  }
-  render() {
-    const t = this.componentClassNames(
-      "cre8-c-calendar-navigation",
-      {}
-    );
-    return s`
-      <div class="${t}">
-        <cre8-button
-          variant="tertiary"
-          text="Previous year"
-          ?hideText=${!0}
-          iconName="caret-double-left"
-          @click="${() => this.changeYear(-1)}"
-        ></cre8-button>
-
-        <cre8-button
-          variant="tertiary"
-          text="Previous month"
-          ?hideText=${!0}
-          iconName="keyboard-arrow-left"
-          @click="${() => this.changeMonth(-1)}"
-        ></cre8-button>
-
-        <div class="cre8-c-calendar-navigation__inner-buttons">
-          <cre8-button
-            class="cre8-c-calendar-navigation__month-modal-button"
-            variant="tertiary"
-            text="${this.monthName}"
-            aria-label="${this.monthName}, month picker modal"
-            size="sm"
-            @click="${() => this.activateModal("month")}"
-          ></cre8-button>
-
-          <cre8-button
-            class="cre8-c-calendar-navigation__year-modal-button"
-            variant="tertiary"
-            text="${this.year}"
-            aria-label="${this.year}, year picker modal"
-            size="sm"
-            @click="${() => this.activateModal("year")}"
-          ></cre8-button>
-        </div>
-
-        <cre8-button
-          variant="tertiary"
-          text="Next month"
-          ?hideText=${!0}
-          iconName="keyboard-arrow-right"
-          @click="${() => this.changeMonth(1)}"
-        ></cre8-button>
-
-        <cre8-button
-          variant="tertiary"
-          text="Next year"
-          ?hideText=${!0}
-          iconName="caret-double-right"
-          @click="${() => this.changeYear(1)}"
-        ></cre8-button>
-      </div>
-    `;
-  }
+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;
 };
-D.styles = [B];
-let y = D;
-C([
-  p({ type: String, reflect: !0 })
-], y.prototype, "monthName");
-C([
-  p({ type: String, reflect: !0 })
-], y.prototype, "year");
-customElements.get("cre8-calendar-navigation") === void 0 && customElements.define("cre8-calendar-navigation", y);
-var L = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (d, t, e, a) => {
-  for (var r = a > 1 ? void 0 : a ? U(t, e) : t, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = (a ? n(t, e, r) : n(r)) || r);
-  return a && r && L(t, e, r), r;
-}, o;
-const l = (o = class extends w {
-  constructor() {
-    super(), this._activeModal = "none", this._handleOnClickOutside = this._handleOnClickOutside.bind(this), this.currentDate = (this.fieldDate && /* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)) ?? /* @__PURE__ */ new Date(), this.locale = document.documentElement.getAttribute("lang") || "en-US", this.dateConfig = {
-      locale: this.locale,
-      today: /* @__PURE__ */ new Date(),
-      weekInfo: {
-        firstDay: 7,
-        weekend: [6, 7]
-      }
-    }, this.weekDays = [
-      "Sunday",
-      "Monday",
-      "Tuesday",
-      "Wednesday",
-      "Thursday",
-      "Friday",
-      "Saturday"
-    ], this.dateFormatOptions = {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric"
-    };
-  }
-  get activeModal() {
-    return this._activeModal;
-  }
-  set activeModal(t) {
-    this._activeModal = t;
-  }
-  get fieldDate() {
-    return this._fieldDate;
-  }
-  set fieldDate(t) {
-    const e = this._fieldDate;
-    this.requestUpdate("fieldDate", e);
-    const a = !!(t && (/* @__PURE__ */ new Date(`${t}T00:00`)).getTime());
-    this.currentDate = a ? /* @__PURE__ */ new Date(`${t}T00:00`) : /* @__PURE__ */ new Date(), this._fieldDate = a ? t : "";
-  }
-  get currentDate() {
-    return this._currentDate;
-  }
-  set currentDate(t) {
-    const e = this._currentDate;
-    this._currentDate = t, this.requestUpdate("currentDate", e);
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("click", this._handleOnClickOutside, !1);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("click", this._handleOnClickOutside, !1);
-  }
-  /* Click Event Functions */
-  _handleOnClickOutside(t) {
-    if (!this.shadowRoot?.host)
-      throw Error(
-        "Could not determine navigation context during click handler"
-      );
-    if (!t.composedPath().includes(this.shadowRoot.host)) {
-      const a = new CustomEvent("outsideClick", {
-        detail: {
-          composedPath: t.composedPath()
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, state } from 'lit/decorators.js';
+import styles from './date-picker.styles';
+import './calendar/calendar';
+import { consume } from '@lit/context';
+import { formInternalsContext } from '../contexts/form-internals-context';
+import { Cre8Field } from '../field/field';
+/**
+ * The Date Picker component renders a form group with label, control, help text and validation styling much
+ * like the Field component but exclusively for type=date.
+ * Cre8DatePicker inherits the Cre8Field component.
+ */
+export class Cre8DatePicker extends Cre8Field {
+    constructor() {
+        super(...arguments);
+        this.type = 'date';
+        this.showCalendar = false;
+    }
+    /**
+     * Handle Date On Input
+     * 1) Set the input's value equal to the event.target.value when the input is changed.
+     * 2) Set the internal form value of the input to the updated value
+     */
+    handleDateOnInput(e) {
+        /* 1 */
+        this.value = e.target.value;
+        /* 2 */
+        this._internals.setFormValue(this.value);
+    }
+    handleCalendarSelect(e) {
+        this.value = e.detail.date;
+        this._internals.setFormValue(this.value);
+        this.showCalendar = false;
+    }
+    handleOutsideClick(e) {
+        const calendarIcon = this.renderRoot.querySelector('.cre8-c-date-picker');
+        if (this.showCalendar && !e.detail.composedPath.includes(calendarIcon)) {
+            this.showCalendar = false;
         }
-      });
-      this.dispatchEvent(a);
-    }
-  }
-  emitSelectedDate(t) {
-    const e = new CustomEvent("dateSelect", {
-      detail: {
-        date: t
-      }
-    });
-    this.currentDate = /* @__PURE__ */ new Date(`${t}T00:00`), this.dispatchEvent(e);
-  }
-  changeYear(t) {
-    const e = this.currentDate, a = new Date(e.setFullYear(t));
-    this.currentDate = a, this.activeModal = "none";
-  }
-  changeMonth(t) {
-    const e = this.currentDate, a = new Date(e.setMonth(t));
-    this.currentDate = a, this.activeModal = "none";
-  }
-  activateModal(t) {
-    this.activeModal = t;
-  }
-  /* Helper/Get Functions */
-  static formatMonthOrDayIndex(t) {
-    return (t + 1).toString().padStart(2, "0");
-  }
-  static formatDate(t) {
-    return t.toString().padStart(2, "0");
-  }
-  numberOfDaysinMonth() {
-    return new Date(this.getYear(), this.getMonth() + 1, 0).getDate();
-  }
-  getMonth() {
-    return this.currentDate.getMonth();
-  }
-  getMonthName() {
-    return new Intl.DateTimeFormat(this.locale, {
-      month: "long"
-    }).format(this.currentDate);
-  }
-  getYear() {
-    return this.currentDate.getFullYear();
-  }
-  static dateToString(t) {
-    return `${t.getFullYear()}-${o.formatMonthOrDayIndex(
-      t.getMonth()
-    )}-${o.formatDate(t.getDate())}`;
-  }
-  async updateFocusForKeydown(t) {
-    this.currentDate = t, await this.updateComplete;
-    const e = this.shadowRoot?.querySelector(
-      `button[datetime="${o.dateToString(t)}"]`
-    );
-    e.setAttribute("tabindex", "0"), e.focus();
-  }
-  _handleCalendarKeyDown(t) {
-    const e = this.shadowRoot?.querySelector(
-      `button[datetime="${o.dateToString(this.currentDate)}"]`
-    );
-    if (t.key === "ArrowUp") {
-      const a = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.currentDate.getDate() - 7
-      );
-      this.updateFocusForKeydown(a), e.setAttribute("tabindex", "-1");
     }
-    if (t.key === "ArrowDown") {
-      const a = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.currentDate.getDate() + 7
-      );
-      this.updateFocusForKeydown(a), e.setAttribute("tabindex", "-1");
-    }
-    if (t.key === "ArrowLeft") {
-      const a = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.currentDate.getDate() - 1
-      );
-      this.updateFocusForKeydown(a), e.setAttribute("tabindex", "-1");
-    }
-    if (t.key === "ArrowRight") {
-      const a = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.currentDate.getDate() + 1
-      );
-      this.updateFocusForKeydown(a), e.setAttribute("tabindex", "-1");
-    }
-    if (t.key === "Tab" && !t.shiftKey) {
-      const a = new CustomEvent("outsideClick", {
-        detail: {
-          composedPath: []
+    toggleCalendar() {
+        if (!this.disabled && !this._internals.readonly) {
+            this.showCalendar = !this.showCalendar;
         }
-      });
-      setTimeout(() => {
-        this.dispatchEvent(a);
-      }, 20);
     }
-  }
-  async changeMonthFromNav(t) {
-    this.changeMonth(t), await this.updateComplete;
-    const a = (this.shadowRoot?.querySelector(
-      "cre8-calendar-navigation"
-    )).shadowRoot?.querySelector(
-      ".cre8-c-calendar-navigation__month-modal-button"
-    );
-    await this.updateComplete, a.shadowRoot.querySelector("button").focus();
-  }
-  async changeYearFromNav(t) {
-    this.changeYear(t), await this.updateComplete;
-    const a = (this.shadowRoot?.querySelector(
-      "cre8-calendar-navigation"
-    )).shadowRoot?.querySelector(
-      ".cre8-c-calendar-navigation__year-modal-button"
-    );
-    await this.updateComplete, a.shadowRoot.querySelector("button").focus();
-  }
-  /* Template Map Functions */
-  getDaysOfWeekAbbreviations() {
-    return this.weekDays.map(
-      (t) => s` <td>
-        <span aria-label="${t}">${t[0]}</span>
-      </td>`
-    );
-  }
-  /**
-   * Create array of Day Buttons to fill in excess calendar space at the beginning of the month.
-   *
-   * 1. Map from empty array of length equal to the amount of access calendar "slots" in the beginning of the month.
-   * (i.e. if the month starts on Wednesday (getDay = 3), there are 3 days prior that week from last month.)
-   *
-   * 2. Based on the indice of array, get the given day button's date, where the date is
-   * the last day of last month minus the max of the array plus the indice plus one -> x = lastday - (max - (i + 1))
-   * (Note: (max - (i + 1) equals the keys of the array in reverse order:
-   * [max - i + 1] -> [3-1, 3-2, 3-3] -> [2,1,0] for an array of [3])
-   * (i.e. if the calendar is starting on Wednesday June 1st, the access days on the calendar will be
-   * Sunday May 29th (31 - (2)), Monday May 30th (31 - (1)), Tuesday May 31st (31 - (0)))
-   *
-   * 3. Build out day button with necessary props
-   * */
-  getPreviousMonthDayButtons() {
-    return [
-      ...Array(new Date(this.getYear(), this.getMonth(), 1).getDay()).keys()
-    ].map((t) => {
-      const e = new Date(
-        this.getYear(),
-        this.getMonth(),
-        1
-      ).getDay(), a = new Date(this.getYear(), this.getMonth(), 0), r = a.getDate(), i = new Date(
-        a.getFullYear(),
-        a.getMonth(),
-        r - e + (t + 1)
-      ), n = this.dateConfig.today.getDate() === i.getDate() && this.dateConfig.today.getMonth() === i.getMonth() && this.dateConfig.today.getFullYear() === i.getFullYear(), T = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === i.getTime();
-      return s` <td>
-        <button
-          class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
-          datetime="${o.dateToString(i)}"
-          ?data-today="${n}"
-          ?data-selected="${T}"
-          tabindex="-1"
-          aria-label="${new Intl.DateTimeFormat(this.locale, {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric"
-      }).format(
-        /* @__PURE__ */ new Date(`${o.dateToString(i)}T00:00`)
-      )}"
-          @click="${() => this.emitSelectedDate(o.dateToString(i))}"
-        >
-          ${new Intl.NumberFormat(this.locale).format(i.getDate())}
-        </button>
-      </td>`;
-    });
-  }
-  /**
-   * Create array of Day Buttons to fill out current month
-   *
-   * 1. Map from empty array of length equal to the amount days in this month
-   *
-   * 2. Get the date of the current month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
-   *
-   * 3. Build out day button with necessary props
-   * */
-  getCurrentMonthDayButtons() {
-    return [...Array(this.numberOfDaysinMonth()).keys()].map((t) => {
-      const e = t + 1, a = new Date(this.getYear(), this.getMonth(), e), r = this.dateConfig.today.getDate() === e && this.dateConfig.today.getMonth() === this.getMonth() && this.dateConfig.today.getFullYear() === this.getYear(), i = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === a.getTime();
-      return s` <td>
-        <button
-          class="cre8-c-calendar__day-button"
-          datetime="${o.dateToString(a)}"
-          ?data-today="${r}"
-          ?data-selected="${i}"
-          tabindex="${e === this.currentDate.getDate() ? "0" : "-1"}"
-          aria-label="${new Intl.DateTimeFormat(this.locale, {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric"
-      }).format(/* @__PURE__ */ new Date(`${o.dateToString(a)}T00:00`))}"
-          @click="${() => this.emitSelectedDate(o.dateToString(a))}"
-        >
-          ${new Intl.NumberFormat(this.locale).format(t + 1)}
-        </button>
-      </td>`;
-    });
-  }
-  /**
-   * Create array of Day Buttons to fill in excess calendar space at the end of the month.
-   *
-   * 1. Map from empty array of length equal to the amount of access calendar "slots" at the end of the month.
-   * The array have an amount of slots equal to the number of days in a week minus how many days have already past
-   * and since getDay returns the index of the day of the week (Sunday = 0, Monday = 1 ...) our equations is
-   * x = 7 - (getDay() + 1)
-   * Note: (we need to add 1 because indexing starts at 0)
-   * so if the month ends on Monday (getDay() = 1), 5 = 7 - (1 + 1), there are 5 days that week from the new month
-   *
-   * 2. Get the date from the next month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
-   *
-   * 3. Build out day button with necessary props
-   * */
-  getNextMonthDayButtons() {
-    return [
-      ...Array(
-        6 - new Date(
-          this.getYear(),
-          this.getMonth(),
-          this.numberOfDaysinMonth()
-        ).getDay()
-      ).keys()
-    ].map((t) => {
-      const e = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.numberOfDaysinMonth()
-      ), a = new Date(
-        e.setDate(e.getDate() + 1)
-      ), r = new Date(
-        a.getFullYear(),
-        a.getMonth(),
-        t + 1
-      ), i = this.dateConfig.today.getDate() === r.getDate() && this.dateConfig.today.getMonth() === r.getMonth() && this.dateConfig.today.getFullYear() === r.getFullYear(), n = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === r.getTime();
-      return s` <td>
-        <button
-          class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
-          datetime="${o.dateToString(r)}"
-          ?data-today="${i}"
-          ?data-selected="${n}"
-          tabindex="-1"
-          aria-label="${new Intl.DateTimeFormat(this.locale, {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric"
-      }).format(
-        /* @__PURE__ */ new Date(`${o.dateToString(r)}T00:00`)
-      )}"
-          @click="${() => this.emitSelectedDate(o.dateToString(r))}"
-        >
-          ${new Intl.NumberFormat(this.locale).format(r.getDate())}
-        </button>
-      </td>`;
-    });
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-calendar", {});
-    return s` <div class="${t}">
-      ${this._activeModal === "month" ? s`<cre8-calendar-month-modal
-            currentMonth="${this.getMonth()}"
-            @changeMonth="${(e) => this.changeMonthFromNav(e.detail.month)}"
-          ></cre8-calendar-month-modal>` : f}
-      ${this._activeModal === "year" ? s`<cre8-calendar-year-modal
-            currentYear="${this.getYear()}"
-            @changeYear="${(e) => this.changeYearFromNav(e.detail.year)}"
-          ></cre8-calendar-year-modal>` : f}
-      ${this._activeModal === "none" ? s` ${this.hasShortcuts ? s`<div class="cre8-c-calendar__header-shortcuts">
-                    <cre8-button
-                      text="Today"
-                      variant="secondary"
-                      size="sm"
-                      @click="${() => this.emitSelectedDate(
-      o.dateToString(this.dateConfig.today)
-    )}"
-                    ></cre8-button>
-                    <cre8-button
-                      text="Tomorrow"
-                      variant="secondary"
-                      size="sm"
-                      @click="${() => this.emitSelectedDate(
-      o.dateToString(
-        new Date(
-          this.dateConfig.today.setDate(
-            this.dateConfig.today.getDate() + 1
-          )
-        )
-      )
-    )}"
-                    ></cre8-button>
-                    <cre8-button
-                      text="In 2 days"
-                      variant="secondary"
-                      size="sm"
-                      @click="${() => this.emitSelectedDate(
-      o.dateToString(
-        new Date(
-          this.dateConfig.today.setDate(
-            this.dateConfig.today.getDate() + 2
-          )
-        )
-      )
-    )}"
-                    ></cre8-button>
-                </div>` : f}
-            <cre8-calendar-navigation
-              monthName="${this.getMonthName()}"
-              year="${this.getYear()}"
-              @activateModal="${(e) => this.activateModal(e.detail.modal)}"
-              @changeMonth="${(e) => this.changeMonth(this.getMonth() + e.detail.addend)}"
-              @changeYear="${(e) => this.changeYear(this.getYear() + e.detail.addend)}"
-            >
-            </cre8-calendar-navigation>
-            <table>
-              <thead>
-                <tr>
-                  ${this.getDaysOfWeekAbbreviations()}
-                </tr>
-              </thead>
-              <tbody>
-                <tr @keydown=${this._handleCalendarKeyDown}>
-                  ${this.getPreviousMonthDayButtons()}
-                  ${this.getCurrentMonthDayButtons()}
-                  ${this.getNextMonthDayButtons()}
-                </tr>
-              </tbody>
-            </table>` : f}
-    </div>`;
-  }
-}, o.styles = [X], o);
-m([
-  R(".cre8-c-calendar__navigation-wrapper")
-], l.prototype, "_navWrapper", 2);
-m([
-  p({ type: Boolean, reflect: !0 })
-], l.prototype, "hasShortcuts", 2);
-m([
-  c()
-], l.prototype, "_activeModal", 2);
-m([
-  p({ reflect: !0, type: String })
-], l.prototype, "activeModal", 1);
-m([
-  c()
-], l.prototype, "_fieldDate", 2);
-m([
-  p({ reflect: !0, type: Date })
-], l.prototype, "fieldDate", 1);
-m([
-  c()
-], l.prototype, "_currentDate", 2);
-m([
-  p({ reflect: !0, type: Date })
-], l.prototype, "currentDate", 1);
-m([
-  c()
-], l.prototype, "locale", 2);
-m([
-  c()
-], l.prototype, "weekDays", 2);
-m([
-  c()
-], l.prototype, "dateConfig", 2);
-m([
-  c()
-], l.prototype, "dateFormatOptions", 2);
-let G = l;
-customElements.get("cre8-calendar") === void 0 && customElements.define("cre8-calendar", G);
-var K = Object.defineProperty, z = (d, t, e, a) => {
-  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = n(t, e, r) || r);
-  return r && K(t, e, r), r;
-};
-const $ = class $ extends F {
-  constructor() {
-    super(...arguments), this.type = "date", this.showCalendar = !1;
-  }
-  /**
-   * Handle Date On Input
-   * 1) Set the input's value equal to the event.target.value when the input is changed.
-   * 2) Set the internal form value of the input to the updated value
-   */
-  handleDateOnInput(t) {
-    this.value = t.target.value, this._internals.setFormValue(this.value);
-  }
-  handleCalendarSelect(t) {
-    this.value = t.detail.date, this._internals.setFormValue(this.value), this.showCalendar = !1;
-  }
-  handleOutsideClick(t) {
-    const e = this.renderRoot.querySelector(".cre8-c-date-picker");
-    this.showCalendar && !t.detail.composedPath.includes(e) && (this.showCalendar = !1);
-  }
-  toggleCalendar() {
-    !this.disabled && !this._internals.readonly && (this.showCalendar = !this.showCalendar);
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-date-picker", {
-      "cre8-is-error": this.isError,
-      "cre8-is-success": this.isSuccess,
-      "cre8-c-date-picker--disabled": this.disabled,
-      "cre8-c-date-picker--read-only": this._internals.readonly
-    });
-    return this.type = "date", s`
-      <div class="${t}">
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-date-picker', {
+            'cre8-is-error': this.isError,
+            'cre8-is-success': this.isSuccess,
+            'cre8-c-date-picker--disabled': this.disabled,
+            'cre8-c-date-picker--read-only': this._internals.readonly,
+        });
+        this.type = 'date';
+        return html `
+      <div class="${componentClassNames}">
         <label class="cre8-c-date-picker__label" for="${this.fieldId}"
           >${this.label}</label
         >
         <div class="cre8-c-date-picker__body">
           <input
             class="cre8-c-date-picker__input"
-            autocomplete=${g(this._internals.autocomplete)}
+            autocomplete=${ifDefined(this._internals.autocomplete)}
             type="${this.type}"
             id="${this.id}"
-            name="${g(this.name)}"
-            max=${g(this._internals.max)}
-            min=${g(this._internals.min)}
-            value="${g(this.value)}"
+            name="${ifDefined(this.name)}"
+            max=${ifDefined(this._internals.max)}
+            min=${ifDefined(this._internals.min)}
+            value="${ifDefined(this.value)}"
             ?readonly=${this._internals.readonly}
             ?required=${this.required}
             ?disabled="${this.disabled}"
-            placeholder="${g(this._internals.placeholder)}"
+            placeholder="${ifDefined(this._internals.placeholder)}"
             @input=${this.handleDateOnInput}
             @click=${this.toggleCalendar}
           />
@@ -3315,44 +85,51 @@ const $ = class $ extends F {
             aria-expanded="${this.showCalendar}"
             aria-label="Show Calendar"
             ?disabled="${this.disabled || this.readonly}"
-            ?hideText=${!0}
+            ?hideText=${true}
             iconName="calendar-datepicker"
             variant="tertiary"
             @click="${this.toggleCalendar}"
           ></cre8-button>
         </div>
-        ${this.showCalendar ? s`<cre8-calendar
-              fieldDate="${g(this.value)}"
+        ${this.showCalendar
+            ? html `<cre8-calendar
+              fieldDate="${ifDefined(this.value)}"
               ?hasShortcuts=${this.hasShortcuts}
               @dateSelect="${this.handleCalendarSelect}"
               @outsideClick="${this.handleOutsideClick}"
-            ></cre8-calendar>` : f}
-        ${this.fieldNote || this.slotNotEmpty("fieldNote") ? s`<cre8-field-note
+            ></cre8-calendar>`
+            : nothing}
+        ${this.fieldNote || this.slotNotEmpty('fieldNote')
+            ? html `<cre8-field-note
               id=${this.ariaDescribedBy}
               class="cre8-c-date-picker__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : f}
+            >`
+            : nothing}
         ${this.renderSuccessErrorFieldNote()}
       </div>
     `;
-  }
-};
-$.styles = [N];
-let u = $;
-z([
-  S({ context: Y })
-], u.prototype, "_internals");
-z([
-  c()
-], u.prototype, "showCalendar");
-z([
-  p({ type: Boolean, reflect: !0 })
-], u.prototype, "hasShortcuts");
-z([
-  p()
-], u.prototype, "label");
-customElements.get("cre8-date-picker") === void 0 && customElements.define("cre8-date-picker", u);
-export {
-  u as Cre8DatePicker,
-  u as default
-};
+    }
+}
+/**
+ * The type of the form field.
+ * For Date Picker, this is always 'date'.
+ */
+Cre8DatePicker.styles = [styles];
+__decorate([
+    consume({ context: formInternalsContext })
+], Cre8DatePicker.prototype, "_internals", void 0);
+__decorate([
+    state()
+], Cre8DatePicker.prototype, "showCalendar", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8DatePicker.prototype, "hasShortcuts", void 0);
+__decorate([
+    property()
+], Cre8DatePicker.prototype, "label", void 0);
+if (customElements.get('cre8-date-picker') === undefined) {
+    customElements.define('cre8-date-picker', Cre8DatePicker);
+}
+export default Cre8DatePicker;
+//# sourceMappingURL=date-picker.js.map