@tmorrow/cre8-wc 2.3.4 → 2.3.6

package/lib/components/checkbox-field-item/checkbox-field-item.styles.js

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 const styles = css `@charset "UTF-8";
 .cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -74,23 +74,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -98,23 +98,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -122,23 +122,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -146,32 +146,32 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -179,23 +179,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -203,23 +203,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -227,23 +227,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -251,23 +251,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -275,23 +275,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -299,23 +299,23 @@ const styles = css `@charset "UTF-8";
 }
 
 .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 {
@@ -331,7 +331,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;
@@ -339,7 +338,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) {

package/lib/components/checkbox-field-item/checkbox-field-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-item.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAu2BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n  color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n  margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n  margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n  margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: size(8) !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n  padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n  padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n  padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/**\n* #VISIBILITY UTILITIES\n*/\n/* Completely remove from the flow and screen readers. */\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n/* Completely remove from the flow but leave available to screen readers. */\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n/**\n * Hide element at sm breakpoint\n */\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at sm-2 breakpoint\n */\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at md breakpoint\n */\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at lg breakpoint\n */\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at xl breakpoint\n */\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at sm breakpoint\n */\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at sm-2 breakpoint\n */\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at md breakpoint\n */\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at lg breakpoint\n */\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at xl breakpoint\n */\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n\n/*------------------------------------*\\\\\n #CHECKBOX-FIELD-ITEM\n\\\\*------------------------------------*/\n:host {\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n/** \n * 1) Form field that is composed of a checkbox input, label, and an optional field note.\n */\n.cre8-c-checkbox-field-item {\n  display: flex;\n  position: relative;\n  align-items: center;\n  margin-bottom: 0.5rem;\n  min-height: 1.5rem;\n  /** \n  * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset\n  * 1) Remove margin bottom on last item\n  */\n}\n:host(:last-child) .cre8-c-checkbox-field-item {\n  margin-bottom: 0;\n  /* 1 */\n}\n\n/** \n * Checkbox field item input \n */\n.cre8-c-checkbox-field-item__input {\n  opacity: 0;\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 1.5rem;\n  min-width: 1.5rem;\n  margin: 0;\n  z-index: 1;\n  /** \n  * Checkbox field item input error\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input {\n  cursor: not-allowed;\n}\n\n/** \n * Checkbox field item custom checkbox container\n */\n.cre8-c-checkbox-field-item__custom-checkbox {\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--cre8-border-radius-checkbox, var(--cre8-border-radius-small));\n  border-width: var(--cre8-border-width-default);\n  border-style: var(--cre8-border-style-default);\n  background-color: var(--cre8-color-bg-default);\n  border-color: var(--cre8-color-border-strong);\n  /** \n  * Checkbox field item custom checkbox focus visible  custom outline\n  */\n}\n.cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n  outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox within checkbox field with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-default);\n  border-color: var(--cre8-color-border-error);\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox within checkbox field with disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox {\n  cursor: not-allowed;\n  background-color: var(--cre8-color-bg-disabled);\n  border-color: var(--cre8-color-border-disabled);\n}\n\n/**\n  * Checkbox field item custom checkbox when item is checked\n  */\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-brand-strong);\n  /** \n  * Checkbox field item custom checkbox when item is checked with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-default);\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox when item is checked with disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-disabled);\n}\n\n/** \n * Checkbox field item checkmark icon\n */\n.cre8-c-checkbox-field-item__icon {\n  display: none;\n  color: var(--cre8-color-content-knockout);\n  /** \n  * Checkbox field item icon within checkbox field with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon {\n  color: var(--cre8-color-content-error);\n}\n.cre8-c-checkbox-field-item__icon {\n  /** \n  * Checkbox field item icon within checkbox field disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon {\n  color: var(--cre8-color-content-disabled);\n}\n.cre8-c-checkbox-field-item__icon {\n  /**\n  * Checkbox field item icon will display in the box if the input is checked\n  */\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon {\n  display: flex;\n}\n\n/** \n * Checkbox field item input \n */\n.cre8-c-checkbox-field-item__label {\n  margin-left: 2rem;\n  font-family: var(--cre8-typography-label-small-font-family);\n  font-size: var(--cre8-typography-label-small-font-size);\n  font-weight: var(--cre8-typography-label-small-font-weight);\n  line-height: var(--cre8-typography-label-small-line-height);\n  text-decoration: var(--cre8-typography-label-small-text-decoration);\n  text-transform: var(--cre8-typography-label-small-text-transform);\n}\n\n/** \n * Checkbox field item field notes\n */\n.cre8-c-checkbox-field-item__field-note,\n.cre8-c-checkbox-field-item__field-note-success,\n.cre8-c-checkbox-field-item__field-note-error {\n  flex-basis: 100%;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"checkbox-field-item.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAs2BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n  color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n  margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n  margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n  margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: 4rem !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n  padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n  padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n  padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/**\n* #VISIBILITY UTILITIES\n*/\n/* Completely remove from the flow and screen readers. */\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n/* Completely remove from the flow but leave available to screen readers. */\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n/**\n * Hide element at sm breakpoint\n */\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at sm-2 breakpoint\n */\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at md breakpoint\n */\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at lg breakpoint\n */\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at xl breakpoint\n */\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at sm breakpoint\n */\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at sm-2 breakpoint\n */\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at md breakpoint\n */\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at lg breakpoint\n */\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at xl breakpoint\n */\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n\n/*------------------------------------*\\\\\n #CHECKBOX-FIELD-ITEM\n\\\\*------------------------------------*/\n:host {\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n/** \n * 1) Form field that is composed of a checkbox input, label, and an optional field note.\n */\n.cre8-c-checkbox-field-item {\n  display: flex;\n  position: relative;\n  align-items: center;\n  margin-bottom: 0.5rem;\n  min-height: 1.5rem;\n  /** \n  * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset\n  * 1) Remove margin bottom on last item\n  */\n}\n:host(:last-child) .cre8-c-checkbox-field-item {\n  margin-bottom: 0;\n  /* 1 */\n}\n\n/** \n * Checkbox field item input \n */\n.cre8-c-checkbox-field-item__input {\n  opacity: 0;\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 1.5rem;\n  min-width: 1.5rem;\n  margin: 0;\n  z-index: 1;\n  /** \n  * Checkbox field item input error\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input {\n  cursor: not-allowed;\n}\n\n/** \n * Checkbox field item custom checkbox container\n */\n.cre8-c-checkbox-field-item__custom-checkbox {\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--cre8-border-radius-checkbox, var(--cre8-border-radius-small));\n  border-width: var(--cre8-border-width-default);\n  border-style: var(--cre8-border-style-default);\n  background-color: var(--cre8-color-bg-default);\n  border-color: var(--cre8-color-border-strong);\n  /** \n  * Checkbox field item custom checkbox focus visible  custom outline\n  */\n}\n.cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n  outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox within checkbox field with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-default);\n  border-color: var(--cre8-color-border-error);\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox within checkbox field with disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox {\n  cursor: not-allowed;\n  background-color: var(--cre8-color-bg-disabled);\n  border-color: var(--cre8-color-border-disabled);\n}\n\n/**\n  * Checkbox field item custom checkbox when item is checked\n  */\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-brand-strong);\n  /** \n  * Checkbox field item custom checkbox when item is checked with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-default);\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox when item is checked with disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-disabled);\n}\n\n/** \n * Checkbox field item checkmark icon\n */\n.cre8-c-checkbox-field-item__icon {\n  display: none;\n  color: var(--cre8-color-content-knockout);\n  /** \n  * Checkbox field item icon within checkbox field with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon {\n  color: var(--cre8-color-content-error);\n}\n.cre8-c-checkbox-field-item__icon {\n  /** \n  * Checkbox field item icon within checkbox field disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon {\n  color: var(--cre8-color-content-disabled);\n}\n.cre8-c-checkbox-field-item__icon {\n  /**\n  * Checkbox field item icon will display in the box if the input is checked\n  */\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon {\n  display: flex;\n}\n\n/** \n * Checkbox field item input \n */\n.cre8-c-checkbox-field-item__label {\n  margin-left: 2rem;\n  font-family: var(--cre8-typography-label-small-font-family);\n  font-size: var(--cre8-typography-label-small-font-size);\n  font-weight: var(--cre8-typography-label-small-font-weight);\n  line-height: var(--cre8-typography-label-small-line-height);\n  text-decoration: var(--cre8-typography-label-small-text-decoration);\n  text-transform: var(--cre8-typography-label-small-text-transform);\n}\n\n/** \n * Checkbox field item field notes\n */\n.cre8-c-checkbox-field-item__field-note,\n.cre8-c-checkbox-field-item__field-note-success,\n.cre8-c-checkbox-field-item__field-note-error {\n  flex-basis: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/container/container.d.ts

@@ -0,0 +1,48 @@
+import { Cre8Element } from '../cre8-element';
+/** `cre8-container` establishes a CSS containment context so anything slotted
+* inside it - a `cre8-container-grid`, a `cre8-card`, plain markup - can be
+* styled with `@container` queries against *this element's own rendered
+* size*, not the viewport. It renders no visible chrome of its own; the only
+* effect is making container queries possible for its content.
+*
+* # How to Use
+* 1. Wrap `cre8-container` around whatever should respond to the space it is
+*   actually given rather than the screen size - a sidebar widget, a card
+*   that might land in a narrow or a wide column depending on a layout the
+*   component itself can't see.
+* 2. Write `@container` rules in your own stylesheet keyed to `name`, if
+*   set, to target this container specifically when containers are nested
+*   and the nearest one isn't the one you mean to query.
+*
+* @slot - The content to establish a containment context for
+*/
+export declare class Cre8Container extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Containment type
+     * - **inline-size** (default) contains layout, style, and inline size -
+     *   the right choice for width-based `@container` queries on a
+     *   block-level container
+     * - **size** contains both the inline and block size, so `@container`
+     *   rules can also query height - only use this when the container's own
+     *   height does not depend on its content
+     * - **normal** names the container without adding size containment, for
+     *   `@container style(...)` queries
+     */
+    type?: 'inline-size' | 'size' | 'normal';
+    /**
+     * Container name
+     * 1) Lets `@container <name> (...)` target this container specifically
+     *   when containers are nested and the nearest one isn't the one being
+     *   queried.
+     */
+    name?: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-container': Cre8Container;
+    }
+}
+export default Cre8Container;
+//# sourceMappingURL=container.d.ts.map

package/lib/components/container/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../components/container/container.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;EAgBE;AACF,qBAAa,aAAc,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;;;;;OAUG;IAEH,IAAI,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEzC;;;;;OAKG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,MAAM;CAgBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF;AAED,eAAe,aAAa,CAAC"}

package/lib/components/container/container.js

@@ -0,0 +1,56 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './container.styles.js';
+/** `cre8-container` establishes a CSS containment context so anything slotted
+* inside it - a `cre8-container-grid`, a `cre8-card`, plain markup - can be
+* styled with `@container` queries against *this element's own rendered
+* size*, not the viewport. It renders no visible chrome of its own; the only
+* effect is making container queries possible for its content.
+*
+* # How to Use
+* 1. Wrap `cre8-container` around whatever should respond to the space it is
+*   actually given rather than the screen size - a sidebar widget, a card
+*   that might land in a narrow or a wide column depending on a layout the
+*   component itself can't see.
+* 2. Write `@container` rules in your own stylesheet keyed to `name`, if
+*   set, to target this container specifically when containers are nested
+*   and the nearest one isn't the one you mean to query.
+*
+* @slot - The content to establish a containment context for
+*/
+export class Cre8Container extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-container', {
+            'cre8-c-container--size': this.type === 'size',
+            'cre8-c-container--normal': this.type === 'normal',
+        });
+        return html `
+      <div
+        class="${componentClassNames}"
+        part="container"
+        style=${this.name ? `container-name: ${this.name};` : ''}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+Cre8Container.styles = [styles];
+__decorate([
+    property()
+], Cre8Container.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8Container.prototype, "name", void 0);
+if (customElements.get('cre8-container') === undefined) {
+    customElements.define('cre8-container', Cre8Container);
+}
+export default Cre8Container;
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../components/container/container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;;;;;;;;;;;;;;;EAgBE;AACF,MAAM,OAAO,aAAc,SAAQ,WAAW;IA0B5C,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACvE,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;YAC9C,0BAA0B,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;SACnD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;iBAEE,mBAAmB;;gBAEpB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;;;;KAI3D,CAAC;IACJ,CAAC;;AAxCM,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAczB;IADC,QAAQ,EAAE;2CAC8B;AASzC;IADC,QAAQ,EAAE;2CACG;AAoBhB,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AACzD,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './container.styles.js';\n\n/** `cre8-container` establishes a CSS containment context so anything slotted\n* inside it - a `cre8-container-grid`, a `cre8-card`, plain markup - can be\n* styled with `@container` queries against *this element's own rendered\n* size*, not the viewport. It renders no visible chrome of its own; the only\n* effect is making container queries possible for its content.\n*\n* # How to Use\n* 1. Wrap `cre8-container` around whatever should respond to the space it is\n*   actually given rather than the screen size - a sidebar widget, a card\n*   that might land in a narrow or a wide column depending on a layout the\n*   component itself can't see.\n* 2. Write `@container` rules in your own stylesheet keyed to `name`, if\n*   set, to target this container specifically when containers are nested\n*   and the nearest one isn't the one you mean to query.\n*\n* @slot - The content to establish a containment context for\n*/\nexport class Cre8Container extends Cre8Element {\n  static styles = [styles];\n\n  /**\n   * Containment type\n   * - **inline-size** (default) contains layout, style, and inline size -\n   *   the right choice for width-based `@container` queries on a\n   *   block-level container\n   * - **size** contains both the inline and block size, so `@container`\n   *   rules can also query height - only use this when the container's own\n   *   height does not depend on its content\n   * - **normal** names the container without adding size containment, for\n   *   `@container style(...)` queries\n   */\n  @property()\n  type?: 'inline-size' | 'size' | 'normal';\n\n  /**\n   * Container name\n   * 1) Lets `@container <name> (...)` target this container specifically\n   *   when containers are nested and the nearest one isn't the one being\n   *   queried.\n   */\n  @property()\n  name?: string;\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-container', {\n      'cre8-c-container--size': this.type === 'size',\n      'cre8-c-container--normal': this.type === 'normal',\n    });\n\n    return html`\n      <div\n        class=\"${componentClassNames}\"\n        part=\"container\"\n        style=${this.name ? `container-name: ${this.name};` : ''}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-container') === undefined) {\n  customElements.define('cre8-container', Cre8Container);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-container': Cre8Container;\n  }\n}\n\nexport default Cre8Container;\n"]}

package/lib/components/container/container.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=container.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.styles.d.ts","sourceRoot":"","sources":["../../../components/container/container.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA4mBV,CAAC;AACH,eAAe,MAAM,CAAC"}