@tmorrow/cre8-wc 2.3.5 → 2.3.6

package/dist/assets/{date-picker.stories-CJp0GJ1q.js → date-picker.stories-BuoLDvt5.js}

@@ -1,5 +1,5 @@
-import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spread-Cc0YLoqh.js";import{w as E}from"./decorator-iVSD-Llo.js";import{o as u}from"./if-defined-Bh0SnORx.js";import{C as I,n as p}from"./cre8-element-D4jUl3yv.js";import{r as c}from"./state-ClQJCb1N.js";import{e as A}from"./query-BpjciUlk.js";import"./icon-BmyJ3psE.js";import"./button-BKkXnzpg.js";import{s as B,f as P}from"./cre8-form-element-B-sJI1kh.js";import{C as q}from"./field-XAdoSKiw.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./loading-spinner-BcPlxdFy.js";import"./index.browser-BY9c7rfI.js";import"./field-note-CSSkQ5DK.js";import"./field.styles-DE4j2yDn.js";class S{constructor(e,t,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=e,t.context!==void 0){const i=t;this.context=i.context,this.callback=i.callback,this.subscribe=i.subscribe??!1}else this.context=t,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 B(this.context,this.host,this.t,this.subscribe))}}function j({context:d,subscribe:e}){return(t,a)=>{typeof a=="object"?a.addInitializer((function(){new S(this,{context:d,callback:r=>{t.set.call(this,r)},subscribe:e})})):t.constructor.addInitializer((r=>{new S(r,{context:d,callback:i=>{r[a]=i},subscribe:e})}))}}const L=x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as x,b as s,A as f}from"./iframe-B4bTcHfE.js";import{s as X}from"./spread-Bid2THYj.js";import{w as E}from"./decorator-iVSD-Llo.js";import{o as u}from"./if-defined-DA22R8ho.js";import{C as R,n as p}from"./cre8-element-C-P96xHp.js";import{r as l}from"./state-DNEXh1sp.js";import{e as A}from"./query-BpjciUlk.js";import"./icon-JqBqZA-z.js";import"./button-BYSQD8Gp.js";import{s as B,f as P}from"./cre8-form-element-1YjfSY90.js";import{C as q}from"./field-DW7G8q1Z.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./loading-spinner-DKyQa4wk.js";import"./index.browser-BY9c7rfI.js";import"./field-note-Bo9Uvf0_.js";import"./field.styles-DY4WEjtf.js";class S{constructor(e,t,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=e,t.context!==void 0){const i=t;this.context=i.context,this.callback=i.callback,this.subscribe=i.subscribe??!1}else this.context=t,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 B(this.context,this.host,this.t,this.subscribe))}}function j({context:d,subscribe:e}){return(t,a)=>{typeof a=="object"?a.addInitializer((function(){new S(this,{context:d,callback:r=>{t.set.call(this,r)},subscribe:e})})):t.constructor.addInitializer((r=>{new S(r,{context:d,callback:i=>{r[a]=i},subscribe:e})}))}}const L=x`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -96,23 +96,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -120,23 +120,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -144,32 +144,32 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -177,23 +177,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -201,23 +201,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -225,23 +225,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -249,23 +249,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -273,23 +273,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -297,23 +297,23 @@ import{a as x,b as s,A as f}from"./iframe-DgoqrgRr.js";import{s as X}from"./spre
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -329,7 +329,6 @@ body {
   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;
@@ -337,7 +336,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -865,8 +864,8 @@ input[type=date]::-webkit-input-placeholder {
   background: var(--cre8-color-bg-default);
   border: none;
   border-radius: 0;
-  --cre8-icon-height: size(3);
-  --cre8-icon-width: size(3);
+  --cre8-icon-height: 1.5rem;
+  --cre8-icon-width: 1.5rem;
 }
 .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);
@@ -969,7 +968,7 @@ input[type=date]::-webkit-input-placeholder {
   border-color: var(--cre8-color-border-disabled);
   cursor: default;
 }`,U=x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -1042,23 +1041,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -1066,23 +1065,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -1090,23 +1089,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -1114,32 +1113,32 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -1147,23 +1146,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -1171,23 +1170,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -1195,23 +1194,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -1219,23 +1218,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -1243,23 +1242,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -1267,23 +1266,23 @@ input[type=date]::-webkit-input-placeholder {
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -1299,7 +1298,6 @@ body {
   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;
@@ -1307,7 +1305,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -1662,7 +1660,7 @@ td {
 .cre8-c-calendar__day-button[data-selected]:hover, .cre8-c-calendar__day-button[data-selected]:focus {
   background: var(--cre8-color-bg-brand-strong-hover);
 }`,G=x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -1735,23 +1733,23 @@ td {
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -1759,23 +1757,23 @@ td {
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -1783,23 +1781,23 @@ td {
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -1807,32 +1805,32 @@ td {
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -1840,23 +1838,23 @@ td {
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -1864,23 +1862,23 @@ td {
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -1888,23 +1886,23 @@ td {
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -1912,23 +1910,23 @@ td {
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -1936,23 +1934,23 @@ td {
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -1960,23 +1958,23 @@ td {
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -1992,7 +1990,6 @@ body {
   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;
@@ -2000,7 +1997,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -2275,15 +2272,15 @@ ol {
 li {
   display: inline-flex;
   justify-content: center;
-}`;var K=Object.defineProperty,Y=(d,e,t,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(e,t,r)||r);return r&&K(e,t,r),r};const F=class F extends I{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(e){const t=new CustomEvent("changeMonth",{detail:{month:e}});this.dispatchEvent(t)}getMonthListItems(){return this.monthNames.map((e,t)=>s` <li ?data-current-month="${t===this.currentMonth}" >
+}`;var K=Object.defineProperty,Y=(d,e,t,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(e,t,r)||r);return r&&K(e,t,r),r};const F=class F extends R{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(e){const t=new CustomEvent("changeMonth",{detail:{month:e}});this.dispatchEvent(t)}getMonthListItems(){return this.monthNames.map((e,t)=>s` <li ?data-current-month="${t===this.currentMonth}" >
           <cre8-button text="${e}" variant="tertiary" size="sm"
           @click="${()=>this.emitMonth(t)}"></cre8-button>
         </li>`)}render(){const e=this.componentClassNames("cre8-c-calendar-month-modal",{});return s` <div class="${e}">
       <ol aria-label="choose a month">
         ${this.getMonthListItems()}
       </ol>
-    </div> `}};F.styles=[G];let b=F;Y([c()],b.prototype,"monthNames");Y([p({reflect:!0,type:Number})],b.prototype,"currentMonth");customElements.get("cre8-calendar-month-modal")===void 0&&customElements.define("cre8-calendar-month-modal",b);const W=x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+    </div> `}};F.styles=[G];let b=F;Y([l()],b.prototype,"monthNames");Y([p({reflect:!0,type:Number})],b.prototype,"currentMonth");customElements.get("cre8-calendar-month-modal")===void 0&&customElements.define("cre8-calendar-month-modal",b);const W=x`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -2356,23 +2353,23 @@ li {
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -2380,23 +2377,23 @@ li {
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -2404,23 +2401,23 @@ li {
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -2428,32 +2425,32 @@ li {
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -2461,23 +2458,23 @@ li {
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -2485,23 +2482,23 @@ li {
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -2509,23 +2506,23 @@ li {
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -2533,23 +2530,23 @@ li {
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -2557,23 +2554,23 @@ li {
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -2581,23 +2578,23 @@ li {
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -2613,7 +2610,6 @@ body {
   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;
@@ -2621,7 +2617,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -2903,7 +2899,7 @@ li {
 
 cre8-button {
   height: fit-content;
-}`;var J=Object.defineProperty,H=Object.getOwnPropertyDescriptor,R=(d,e,t,a)=>{for(var r=a>1?void 0:a?H(e,t):e,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=(a?n(e,t,r):n(r))||r);return a&&r&&J(e,t,r),r};const C=class C extends I{get currentYear(){return this._currentYear}set currentYear(e){const t=this._currentYear;this._currentYear=e,this.modalAnchorYear=e,this.requestUpdate("currentDate",t),this.createYearArray(this.currentYear)}constructor(){super(),this.yearNumbers=[]}emitYear(e){const t=new CustomEvent("changeYear",{detail:{year:e}});this.dispatchEvent(t)}createYearArray(e){const t=Array.from(Array(12).keys());this.yearNumbers=t.map(a=>a+(e-7))}getYearListItems(){return this.yearNumbers.map((e=>s` <li
+}`;var J=Object.defineProperty,H=Object.getOwnPropertyDescriptor,z=(d,e,t,a)=>{for(var r=a>1?void 0:a?H(e,t):e,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=(a?n(e,t,r):n(r))||r);return a&&r&&J(e,t,r),r};const C=class C extends R{get currentYear(){return this._currentYear}set currentYear(e){const t=this._currentYear;this._currentYear=e,this.modalAnchorYear=e,this.requestUpdate("currentDate",t),this.createYearArray(this.currentYear)}constructor(){super(),this.yearNumbers=[]}emitYear(e){const t=new CustomEvent("changeYear",{detail:{year:e}});this.dispatchEvent(t)}createYearArray(e){const t=Array.from(Array(12).keys());this.yearNumbers=t.map(a=>a+(e-7))}getYearListItems(){return this.yearNumbers.map((e=>s` <li
         ?data-current-year="${e===this.currentYear}"
       >
         <cre8-button
@@ -2934,8 +2930,8 @@ cre8-button {
           iconName="keyboard-arrow-right"
         ></cre8-button>
       </div>
-    `}};C.styles=[W];let g=C;R([c()],g.prototype,"yearNumbers",2);R([c()],g.prototype,"_currentYear",2);R([c()],g.prototype,"modalAnchorYear",2);R([p({reflect:!0,type:Number})],g.prototype,"currentYear",1);customElements.get("cre8-calendar-year-modal")===void 0&&customElements.define("cre8-calendar-year-modal",g);const Q=x`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+    `}};C.styles=[W];let g=C;z([l()],g.prototype,"yearNumbers",2);z([l()],g.prototype,"_currentYear",2);z([l()],g.prototype,"modalAnchorYear",2);z([p({reflect:!0,type:Number})],g.prototype,"currentYear",1);customElements.get("cre8-calendar-year-modal")===void 0&&customElements.define("cre8-calendar-year-modal",g);const Q=x`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -3008,23 +3004,23 @@ cre8-button {
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -3032,23 +3028,23 @@ cre8-button {
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -3056,23 +3052,23 @@ cre8-button {
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -3080,32 +3076,32 @@ cre8-button {
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -3113,23 +3109,23 @@ cre8-button {
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -3137,23 +3133,23 @@ cre8-button {
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -3161,23 +3157,23 @@ cre8-button {
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -3185,23 +3181,23 @@ cre8-button {
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -3209,23 +3205,23 @@ cre8-button {
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -3233,23 +3229,23 @@ cre8-button {
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -3265,7 +3261,6 @@ body {
   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;
@@ -3273,7 +3268,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -3536,7 +3531,7 @@ span.ripple {
   display: flex;
   min-width: 188px;
   justify-content: space-around;
-}`;var Z=Object.defineProperty,N=(d,e,t,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(e,t,r)||r);return r&&Z(e,t,r),r};const M=class M extends I{activateModal(e){const t=new CustomEvent("activateModal",{detail:{modal:e}});this.dispatchEvent(t)}changeMonth(e){const t=new CustomEvent("changeMonth",{detail:{addend:e}});this.dispatchEvent(t)}changeYear(e){const t=new CustomEvent("changeYear",{detail:{addend:e}});this.dispatchEvent(t)}render(){const e=this.componentClassNames("cre8-c-calendar-navigation",{});return s`
+}`;var Z=Object.defineProperty,N=(d,e,t,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(e,t,r)||r);return r&&Z(e,t,r),r};const M=class M extends R{activateModal(e){const t=new CustomEvent("activateModal",{detail:{modal:e}});this.dispatchEvent(t)}changeMonth(e){const t=new CustomEvent("changeMonth",{detail:{addend:e}});this.dispatchEvent(t)}changeYear(e){const t=new CustomEvent("changeYear",{detail:{addend:e}});this.dispatchEvent(t)}render(){const e=this.componentClassNames("cre8-c-calendar-navigation",{});return s`
       <div class="${e}">
         <cre8-button
           variant="tertiary"
@@ -3590,7 +3585,7 @@ span.ripple {
           @click="${()=>this.changeYear(1)}"
         ></cre8-button>
       </div>
-    `}};M.styles=[Q];let y=M;N([p({type:String,reflect:!0})],y.prototype,"monthName");N([p({type:String,reflect:!0})],y.prototype,"year");customElements.get("cre8-calendar-navigation")===void 0&&customElements.define("cre8-calendar-navigation",y);var ee=Object.defineProperty,te=Object.getOwnPropertyDescriptor,m=(d,e,t,a)=>{for(var r=a>1?void 0:a?te(e,t):e,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=(a?n(e,t,r):n(r))||r);return a&&r&&ee(e,t,r),r},o;const l=(o=class extends I{constructor(){super(),this._activeModal="none",this._handleOnClickOutside=this._handleOnClickOutside.bind(this),this.currentDate=(this.fieldDate&&new Date(`${this.fieldDate}T00:00`))??new Date,this.locale=document.documentElement.getAttribute("lang")||"en-US",this.dateConfig={locale:this.locale,today: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(e){this._activeModal=e}get fieldDate(){return this._fieldDate}set fieldDate(e){const t=this._fieldDate;this.requestUpdate("fieldDate",t);const a=!!(e&&new Date(`${e}T00:00`).getTime());this.currentDate=a?new Date(`${e}T00:00`):new Date,this._fieldDate=a?e:""}get currentDate(){return this._currentDate}set currentDate(e){const t=this._currentDate;this._currentDate=e,this.requestUpdate("currentDate",t)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this._handleOnClickOutside,!1)}_handleOnClickOutside(e){if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");if(!e.composedPath().includes(this.shadowRoot.host)){const a=new CustomEvent("outsideClick",{detail:{composedPath:e.composedPath()}});this.dispatchEvent(a)}}emitSelectedDate(e){const t=new CustomEvent("dateSelect",{detail:{date:e}});this.currentDate=new Date(`${e}T00:00`),this.dispatchEvent(t)}changeYear(e){const t=this.currentDate,a=new Date(t.setFullYear(e));this.currentDate=a,this.activeModal="none"}changeMonth(e){const t=this.currentDate,a=new Date(t.setMonth(e));this.currentDate=a,this.activeModal="none"}activateModal(e){this.activeModal=e}static formatMonthOrDayIndex(e){return(e+1).toString().padStart(2,"0")}static formatDate(e){return e.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(e){return`${e.getFullYear()}-${o.formatMonthOrDayIndex(e.getMonth())}-${o.formatDate(e.getDate())}`}async updateFocusForKeydown(e){this.currentDate=e,await this.updateComplete;const t=this.shadowRoot?.querySelector(`button[datetime="${o.dateToString(e)}"]`);t.setAttribute("tabindex","0"),t.focus()}_handleCalendarKeyDown(e){const t=this.shadowRoot?.querySelector(`button[datetime="${o.dateToString(this.currentDate)}"]`);if(e.key==="ArrowUp"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()-7);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowDown"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()+7);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowLeft"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()-1);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowRight"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()+1);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="Tab"&&!e.shiftKey){const a=new CustomEvent("outsideClick",{detail:{composedPath:[]}});setTimeout(()=>{this.dispatchEvent(a)},20)}}async changeMonthFromNav(e){this.changeMonth(e),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(e){this.changeYear(e),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()}getDaysOfWeekAbbreviations(){return this.weekDays.map(e=>s` <td>
+    `}};M.styles=[Q];let y=M;N([p({type:String,reflect:!0})],y.prototype,"monthName");N([p({type:String,reflect:!0})],y.prototype,"year");customElements.get("cre8-calendar-navigation")===void 0&&customElements.define("cre8-calendar-navigation",y);var ee=Object.defineProperty,te=Object.getOwnPropertyDescriptor,c=(d,e,t,a)=>{for(var r=a>1?void 0:a?te(e,t):e,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=(a?n(e,t,r):n(r))||r);return a&&r&&ee(e,t,r),r},o;const m=(o=class extends R{constructor(){super(),this._activeModal="none",this._handleOnClickOutside=this._handleOnClickOutside.bind(this),this.currentDate=(this.fieldDate&&new Date(`${this.fieldDate}T00:00`))??new Date,this.locale=document.documentElement.getAttribute("lang")||"en-US",this.dateConfig={locale:this.locale,today: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(e){this._activeModal=e}get fieldDate(){return this._fieldDate}set fieldDate(e){const t=this._fieldDate;this.requestUpdate("fieldDate",t);const a=!!(e&&new Date(`${e}T00:00`).getTime());this.currentDate=a?new Date(`${e}T00:00`):new Date,this._fieldDate=a?e:""}get currentDate(){return this._currentDate}set currentDate(e){const t=this._currentDate;this._currentDate=e,this.requestUpdate("currentDate",t)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this._handleOnClickOutside,!1)}_handleOnClickOutside(e){if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");if(!e.composedPath().includes(this.shadowRoot.host)){const a=new CustomEvent("outsideClick",{detail:{composedPath:e.composedPath()}});this.dispatchEvent(a)}}emitSelectedDate(e){const t=new CustomEvent("dateSelect",{detail:{date:e}});this.currentDate=new Date(`${e}T00:00`),this.dispatchEvent(t)}changeYear(e){const t=this.currentDate,a=new Date(t.setFullYear(e));this.currentDate=a,this.activeModal="none"}changeMonth(e){const t=this.currentDate,a=new Date(t.setMonth(e));this.currentDate=a,this.activeModal="none"}activateModal(e){this.activeModal=e}static formatMonthOrDayIndex(e){return(e+1).toString().padStart(2,"0")}static formatDate(e){return e.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(e){return`${e.getFullYear()}-${o.formatMonthOrDayIndex(e.getMonth())}-${o.formatDate(e.getDate())}`}async updateFocusForKeydown(e){this.currentDate=e,await this.updateComplete;const t=this.shadowRoot?.querySelector(`button[datetime="${o.dateToString(e)}"]`);t.setAttribute("tabindex","0"),t.focus()}_handleCalendarKeyDown(e){const t=this.shadowRoot?.querySelector(`button[datetime="${o.dateToString(this.currentDate)}"]`);if(e.key==="ArrowUp"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()-7);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowDown"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()+7);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowLeft"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()-1);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="ArrowRight"){const a=new Date(this.getYear(),this.getMonth(),this.currentDate.getDate()+1);this.updateFocusForKeydown(a),t.setAttribute("tabindex","-1")}if(e.key==="Tab"&&!e.shiftKey){const a=new CustomEvent("outsideClick",{detail:{composedPath:[]}});setTimeout(()=>{this.dispatchEvent(a)},20)}}async changeMonthFromNav(e){this.changeMonth(e),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(e){this.changeYear(e),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()}getDaysOfWeekAbbreviations(){return this.weekDays.map(e=>s` <td>
         <span aria-label="${e}">${e[0]}</span>
       </td>`)}getPreviousMonthDayButtons(){return[...Array(new Date(this.getYear(),this.getMonth(),1).getDay()).keys()].map(e=>{const t=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-t+(e+1)),n=this.dateConfig.today.getDate()===i.getDate()&&this.dateConfig.today.getMonth()===i.getMonth()&&this.dateConfig.today.getFullYear()===i.getFullYear(),V=new Date(`${this.fieldDate}T00:00`).getTime()===i.getTime();return s` <td>
         <button
@@ -3679,7 +3674,7 @@ span.ripple {
                 </tr>
               </tbody>
             </table>`:f}
-    </div>`}},o.styles=[U],o);m([A(".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 re=l;customElements.get("cre8-calendar")===void 0&&customElements.define("cre8-calendar",re);var ae=Object.defineProperty,T=(d,e,t,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(e,t,r)||r);return r&&ae(e,t,r),r};const O=class O extends q{constructor(){super(...arguments),this.type="date",this.showCalendar=!1}handleDateOnInput(e){this.value=e.target.value,this._internals.setFormValue(this.value)}handleCalendarSelect(e){this.value=e.detail.date,this._internals.setFormValue(this.value),this.showCalendar=!1}handleOutsideClick(e){const t=this.renderRoot.querySelector(".cre8-c-date-picker");this.showCalendar&&!e.detail.composedPath.includes(t)&&(this.showCalendar=!1)}toggleCalendar(){!this.disabled&&!this.readonly&&(this.showCalendar=!this.showCalendar)}render(){const e=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.readonly});return this.type="date",s`
+    </div>`}},o.styles=[U],o);c([A(".cre8-c-calendar__navigation-wrapper")],m.prototype,"_navWrapper",2);c([p({type:Boolean,reflect:!0})],m.prototype,"hasShortcuts",2);c([l()],m.prototype,"_activeModal",2);c([p({reflect:!0,type:String})],m.prototype,"activeModal",1);c([l()],m.prototype,"_fieldDate",2);c([p({reflect:!0,type:Date})],m.prototype,"fieldDate",1);c([l()],m.prototype,"_currentDate",2);c([p({reflect:!0,type:Date})],m.prototype,"currentDate",1);c([l()],m.prototype,"locale",2);c([l()],m.prototype,"weekDays",2);c([l()],m.prototype,"dateConfig",2);c([l()],m.prototype,"dateFormatOptions",2);let re=m;customElements.get("cre8-calendar")===void 0&&customElements.define("cre8-calendar",re);var ae=Object.defineProperty,T=(d,e,t,a)=>{for(var r=void 0,i=d.length-1,n;i>=0;i--)(n=d[i])&&(r=n(e,t,r)||r);return r&&ae(e,t,r),r};const O=class O extends q{constructor(){super(...arguments),this.type="date",this.showCalendar=!1}handleDateOnInput(e){this.value=e.target.value,this._internals.setFormValue(this.value)}handleCalendarSelect(e){this.value=e.detail.date,this._internals.setFormValue(this.value),this.showCalendar=!1}handleOutsideClick(e){const t=this.renderRoot.querySelector(".cre8-c-date-picker");this.showCalendar&&!e.detail.composedPath.includes(t)&&(this.showCalendar=!1)}toggleCalendar(){!this.disabled&&!this.readonly&&(this.showCalendar=!this.showCalendar)}render(){const e=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.readonly});return this.type="date",s`
       <div class="${e}">
         <label class="cre8-c-date-picker__label" for="${this.fieldId}"
           >${this.label}</label
@@ -3725,38 +3720,38 @@ span.ripple {
             >`:f}
         ${this.renderSuccessErrorFieldNote()}
       </div>
-    `}};O.styles=[L];let h=O;T([j({context:P})],h.prototype,"_internals");T([c()],h.prototype,"showCalendar");T([p({type:Boolean,reflect:!0})],h.prototype,"hasShortcuts");T([p()],h.prototype,"label");customElements.get("cre8-date-picker")===void 0&&customElements.define("cre8-date-picker",h);const ke={title:"cre8 Components/Date Picker",component:"cre8-date-picker",render:d=>s`<cre8-date-picker ${X(d)}></cre8-date-picker>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]},docs:{story:{height:"600px"}}},decorators:[E],argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"}}},w={},v={args:{hasShortcuts:"true"}},z={args:{label:"Readonly example",readonly:"true",value:"2024-01-01"}},k={args:{label:"Disabled example",disabled:"true"}},_={args:{label:"Fieldnote example",fieldNote:"This is a field note."}},D={args:{label:"Error Fieldnote example",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},$={args:{label:"Success Fieldnote example",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:"{}",...w.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+    `}};O.styles=[L];let h=O;T([j({context:P})],h.prototype,"_internals");T([l()],h.prototype,"showCalendar");T([p({type:Boolean,reflect:!0})],h.prototype,"hasShortcuts");T([p()],h.prototype,"label");customElements.get("cre8-date-picker")===void 0&&customElements.define("cre8-date-picker",h);const _e={title:"cre8 Components/Date Picker",component:"cre8-date-picker",render:d=>s`<cre8-date-picker ${X(d)}></cre8-date-picker>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]},docs:{story:{height:"600px"}}},decorators:[E],argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"}}},w={},v={args:{hasShortcuts:"true"}},k={args:{label:"Readonly example",readonly:"true",value:"2024-01-01"}},_={args:{label:"Disabled example",disabled:"true"}},D={args:{label:"Fieldnote example",fieldNote:"This is a field note."}},$={args:{label:"Error Fieldnote example",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},I={args:{label:"Success Fieldnote example",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:"{}",...w.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   args: {
     hasShortcuts: "true"
   }
-}`,...v.parameters?.docs?.source}}};z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+}`,...v.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Readonly example',
     readonly: "true",
     value: "2024-01-01"
   }
-}`,...z.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+}`,...k.parameters?.docs?.source}}};_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Disabled example',
     disabled: 'true'
   }
-}`,...k.parameters?.docs?.source}}};_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+}`,..._.parameters?.docs?.source}}};D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Fieldnote example',
     fieldNote: "This is a field note."
   }
-}`,..._.parameters?.docs?.source}}};D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+}`,...D.parameters?.docs?.source}}};$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Error Fieldnote example',
     errorNote: "Short, clear error message",
     isError: "true",
     fieldNote: "This is a field note."
   }
-}`,...D.parameters?.docs?.source}}};$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
+}`,...$.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Success Fieldnote example',
     isSuccess: "true",
     fieldNote: "This is a field note.",
     successNote: "Short, clear success message"
   }
-}`,...$.parameters?.docs?.source}}};const _e=["Default","DefaultWithShortcuts","Readonly","Disabled","Fieldnote","Error","Success"];export{w as Default,v as DefaultWithShortcuts,k as Disabled,D as Error,_ as Fieldnote,z as Readonly,$ as Success,_e as __namedExportsOrder,ke as default};
+}`,...I.parameters?.docs?.source}}};const De=["Default","DefaultWithShortcuts","Readonly","Disabled","Fieldnote","Error","Success"];export{w as Default,v as DefaultWithShortcuts,_ as Disabled,$ as Error,D as Fieldnote,k as Readonly,I as Success,De as __namedExportsOrder,_e as default};