@tmorrow/cre8-wc 2.0.5 → 2.0.6

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

@@ -1 +1 @@
-{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../components/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsnBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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}\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}\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 * 1) Generic stacked list that allows for styling of borders in between items\n */\n.cre8-c-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  margin-bottom: 1rem;\n}\n\n/**\n * Slotted list item compponent\n * TODO: Add tier 2 variable that is used for light borders for cards, table rows, etc.\n */\n::slotted(cre8-list-item) {\n  display: block;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle);\n  /**\n  * List item with bare list\n  * 1) Remove the border between items\n  */\n}\n.cre8-c-list--bare ::slotted(cre8-list-item) {\n  border-bottom: 0;\n  /* 1 */\n}\n::slotted(cre8-list-item) {\n  /**\n  * List item with condensed list\n  * 1) Reduce padding between items compared to the default\n  */\n}\n.cre8-c-list--condensed ::slotted(cre8-list-item) {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n::slotted(cre8-list-item) {\n  /**\n  * List item with padded list\n  * 1) Increase padding between items compared to the default\n  */\n}\n.cre8-c-list--padded ::slotted(cre8-list-item) {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../components/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8nBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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 * 1) Generic stacked list that allows for styling of borders in between items\n */\n.cre8-c-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  margin-bottom: 1rem;\n}\n\n/**\n * Slotted list item compponent\n * TODO: Add tier 2 variable that is used for light borders for cards, table rows, etc.\n */\n::slotted(cre8-list-item) {\n  display: block;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle);\n  /**\n  * List item with bare list\n  * 1) Remove the border between items\n  */\n}\n.cre8-c-list--bare ::slotted(cre8-list-item) {\n  border-bottom: 0;\n  /* 1 */\n}\n::slotted(cre8-list-item) {\n  /**\n  * List item with condensed list\n  * 1) Reduce padding between items compared to the default\n  */\n}\n.cre8-c-list--condensed ::slotted(cre8-list-item) {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n::slotted(cre8-list-item) {\n  /**\n  * List item with padded list\n  * 1) Increase padding between items compared to the default\n  */\n}\n.cre8-c-list--padded ::slotted(cre8-list-item) {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}`;\nexport default styles;\n"]}

package/lib/components/list-item/list-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../../components/list-item/list-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAykBR,CAAC;AACL,eAAe,MAAM,CAAC"}
+{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../../components/list-item/list-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAilBR,CAAC;AACL,eAAe,MAAM,CAAC"}

package/lib/components/list-item/list-item.styles.js

@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

package/lib/components/list-item/list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../../components/list-item/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAykBd,CAAC;AACL,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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}\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}\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 * 1) List item within the list component\n */`;\nexport default styles;\n"]}
+{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../../components/list-item/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAilBd,CAAC;AACL,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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 * 1) List item within the list component\n */`;\nexport default styles;\n"]}

package/lib/components/loading-spinner/loading-spinner.styles.d.ts.map

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

package/lib/components/loading-spinner/loading-spinner.styles.js

@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

package/lib/components/loading-spinner/loading-spinner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-spinner.styles.js","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8sBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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}\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}\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#SPINNER\n\\\\* ------------------------------------ */\n@keyframes loading {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes spinner-circle-animation {\n  0%, 25% {\n    stroke-dashoffset: 280;\n    transform: rotate(0);\n  }\n  50%, 75% {\n    stroke-dashoffset: 75;\n    transform: rotate(45deg);\n  }\n  100% {\n    stroke-dashoffset: 280;\n    transform: rotate(360deg);\n  }\n}\n:host {\n  display: inline-block;\n  --spinner-stroke-dasharray: 282.743px;\n  --spinner-large-stroke-width: 10;\n  --spinner-small-stroke-width: 14;\n  --spinner-large-width: 4.5rem;\n  --spinner-small-width: 1.5rem;\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.cre8-c-spinner,\n.cre8-c-spinner--large {\n  --spinner-height: var(--spinner-large-width);\n  --spinner-width: var(--spinner-large-width);\n  --icon-color: var(--cre8-color-content-brand);\n}\n.cre8-c-spinner .cre8-c-spinner__icon,\n.cre8-c-spinner--large .cre8-c-spinner__icon {\n  display: block;\n}\n.cre8-c-spinner .cre8-c-spinner__label,\n.cre8-c-spinner--large .cre8-c-spinner__label {\n  display: block;\n  margin-top: var(--cre8-spacing-8);\n}\n\n.cre8-c-spinner--small {\n  --spinner-height: var(--spinner-small-width);\n  --spinner-width: var(--spinner-small-width);\n  --icon-color: var(--cre8-color-content-brand);\n  display: flex;\n  align-items: center;\n}\n.cre8-c-spinner--small .cre8-c-spinner__label {\n  display: inline-block;\n  margin-left: var(--cre8-spacing-8);\n  margin-top: 0;\n  vertical-align: 0.35rem;\n}\n\n.cre8-c-spinner--inverse {\n  --icon-color: var(--cre8-color-content-brand-knockout);\n  --label-color: var(--cre8-color-content-brand-knockout);\n}\n\n.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral {\n  --icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n  --label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n}\n\n.cre8-c-spinner--neutral {\n  --icon-color: var(--cre8-color-button-secondary-neutral-content-active);\n}\n\n.cre8-c-spinner--primary.cre8-c-spinner--inverse {\n  --icon-color: var(--cre8-color-button-primary-inverse-content-active);\n}\n\n.cre8-c-spinner--secondary.cre8-c-spinner--inverse {\n  --icon-color: var(--cre8-color-button-secondary-inverse-content-active);\n}\n\n.cre8-c-spinner--tertiary.cre8-c-spinner--inverse {\n  --icon-color: var(--cre8-color-button-tertiary-inverse-content-active);\n}\n\n.cre8-c-spinner__label {\n  color: var(--label-color, var(--cre8-color-content-default));\n}\n\n.cre8-c-spinner__hidden-label {\n  display: none;\n}\n\n.cre8-c-spinner__icon {\n  height: var(--spinner-height, 1em);\n  width: var(--spinner-width, 1em);\n}\n.cre8-c-spinner__icon circle {\n  fill: transparent;\n  stroke: var(--icon-color, inherit);\n  stroke-dasharray: var(--spinner-stroke-dasharray);\n  stroke-linecap: round;\n  stroke-width: var(--spinner-large-stroke-width);\n  transform-origin: 50% 50%;\n}\n\n.cre8-c-spinner__icon-small circle {\n  stroke-width: var(--spinner-small-stroke-width);\n}\n\n.cre8-c-spinner--indeterminate .cre8-c-spinner__icon {\n  animation: loading 2s linear 0s infinite;\n}\n.cre8-c-spinner--indeterminate .cre8-c-spinner__icon circle {\n  animation-duration: 1.4s;\n  animation-iteration-count: infinite;\n  animation-name: spinner-circle-animation;\n  animation-timing-function: ease-in-out;\n}\n\n.cre8-c-spinner--determinate .cre8-c-spinner__icon {\n  overflow: hidden;\n  transform: rotate(-90deg);\n  transform-origin: center center;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"loading-spinner.styles.js","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAstBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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#SPINNER\n\\\\* ------------------------------------ */\n@keyframes loading {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes spinner-circle-animation {\n  0%, 25% {\n    stroke-dashoffset: 280;\n    transform: rotate(0);\n  }\n  50%, 75% {\n    stroke-dashoffset: 75;\n    transform: rotate(45deg);\n  }\n  100% {\n    stroke-dashoffset: 280;\n    transform: rotate(360deg);\n  }\n}\n:host {\n  display: inline-block;\n  --spinner-stroke-dasharray: 282.743px;\n  --spinner-large-stroke-width: 10;\n  --spinner-small-stroke-width: 14;\n  --spinner-large-width: 4.5rem;\n  --spinner-small-width: 1.5rem;\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.cre8-c-spinner,\n.cre8-c-spinner--large {\n  --spinner-height: var(--spinner-large-width);\n  --spinner-width: var(--spinner-large-width);\n  --icon-color: var(--cre8-color-content-brand);\n}\n.cre8-c-spinner .cre8-c-spinner__icon,\n.cre8-c-spinner--large .cre8-c-spinner__icon {\n  display: block;\n}\n.cre8-c-spinner .cre8-c-spinner__label,\n.cre8-c-spinner--large .cre8-c-spinner__label {\n  display: block;\n  margin-top: var(--cre8-spacing-8);\n}\n\n.cre8-c-spinner--small {\n  --spinner-height: var(--spinner-small-width);\n  --spinner-width: var(--spinner-small-width);\n  --icon-color: var(--cre8-color-content-brand);\n  display: flex;\n  align-items: center;\n}\n.cre8-c-spinner--small .cre8-c-spinner__label {\n  display: inline-block;\n  margin-left: var(--cre8-spacing-8);\n  margin-top: 0;\n  vertical-align: 0.35rem;\n}\n\n.cre8-c-spinner--inverse {\n  --icon-color: var(--cre8-color-content-brand-knockout);\n  --label-color: var(--cre8-color-content-brand-knockout);\n}\n\n.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral {\n  --icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n  --label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n}\n\n.cre8-c-spinner--neutral {\n  --icon-color: var(--cre8-color-button-secondary-neutral-content-active);\n}\n\n.cre8-c-spinner--primary.cre8-c-spinner--inverse {\n  --icon-color: var(--cre8-color-button-primary-inverse-content-active);\n}\n\n.cre8-c-spinner--secondary.cre8-c-spinner--inverse {\n  --icon-color: var(--cre8-color-button-secondary-inverse-content-active);\n}\n\n.cre8-c-spinner--tertiary.cre8-c-spinner--inverse {\n  --icon-color: var(--cre8-color-button-tertiary-inverse-content-active);\n}\n\n.cre8-c-spinner__label {\n  color: var(--label-color, var(--cre8-color-content-default));\n}\n\n.cre8-c-spinner__hidden-label {\n  display: none;\n}\n\n.cre8-c-spinner__icon {\n  height: var(--spinner-height, 1em);\n  width: var(--spinner-width, 1em);\n}\n.cre8-c-spinner__icon circle {\n  fill: transparent;\n  stroke: var(--icon-color, inherit);\n  stroke-dasharray: var(--spinner-stroke-dasharray);\n  stroke-linecap: round;\n  stroke-width: var(--spinner-large-stroke-width);\n  transform-origin: 50% 50%;\n}\n\n.cre8-c-spinner__icon-small circle {\n  stroke-width: var(--spinner-small-stroke-width);\n}\n\n.cre8-c-spinner--indeterminate .cre8-c-spinner__icon {\n  animation: loading 2s linear 0s infinite;\n}\n.cre8-c-spinner--indeterminate .cre8-c-spinner__icon circle {\n  animation-duration: 1.4s;\n  animation-iteration-count: infinite;\n  animation-name: spinner-circle-animation;\n  animation-timing-function: ease-in-out;\n}\n\n.cre8-c-spinner--determinate .cre8-c-spinner__icon {\n  overflow: hidden;\n  transform: rotate(-90deg);\n  transform-origin: center center;\n}`;\nexport default styles;\n"]}

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

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

package/lib/components/logo/logo.styles.js

@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"logo.styles.js","sourceRoot":"","sources":["../../../components/logo/logo.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4kBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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}\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}\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 * 1) Brand's logo\n */\n.cre8-c-logo {\n  display: flex;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"logo.styles.js","sourceRoot":"","sources":["../../../components/logo/logo.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAolBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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 * 1) Brand's logo\n */\n.cre8-c-logo {\n  display: flex;\n}`;\nexport default styles;\n"]}

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

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

package/lib/components/main/main.styles.js

@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"main.styles.js","sourceRoot":"","sources":["../../../components/main/main.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0lBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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}\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}\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 * 1) Container for the main content on the page between the header and footer\n * 2) Set to flex: 1 0 auto for a footer that gets pushed all the way to the bottom\n * for pages that don't have a lot of content\n */\n:host {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto; /* 2 */\n}\n\n/**\n * Full height main container\n */\n.cre8-c-main--full-height {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  height: 100%;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"main.styles.js","sourceRoot":"","sources":["../../../components/main/main.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkmBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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 * 1) Container for the main content on the page between the header and footer\n * 2) Set to flex: 1 0 auto for a footer that gets pushed all the way to the bottom\n * for pages that don't have a lot of content\n */\n:host {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto; /* 2 */\n}\n\n/**\n * Full height main container\n */\n.cre8-c-main--full-height {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  height: 100%;\n}`;\nexport default styles;\n"]}

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

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

package/lib/components/modal/modal.styles.js

@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.js","sourceRoot":"","sources":["../../../components/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmuBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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}\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}\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 #MODAL\n\\\\*------------------------------------*/\n:host {\n  display: block;\n}\n\n/**\n * 1) Modal Composable Component\n */\n.cre8-c-modal {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  top: 0;\n  left: 0;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  background: rgba(0, 0, 0, 0.25);\n  z-index: 1000;\n}\n\n.cre8-c-modal.cre8-is-active {\n  display: flex;\n  visibility: visible;\n  opacity: 1;\n}\n\n/**\n * Modal Focus Trap for Window (keeps focus in modal until closed)\n */\n.cre8-c-modal__focus-trap {\n  display: contents;\n}\n\n/**\n * Modal Window\n */\n.cre8-c-modal__window {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  position: fixed;\n  background: var(--cre8-color-bg-default);\n  width: 34rem;\n  max-width: 100%;\n  border-radius: var(--cre8-border-radius-container);\n  overflow: hidden;\n  overflow-y: auto;\n  /**\n   * Modal Window for mobile user screen widths\n   */\n}\n@media all and (max-width: 768px) {\n  .cre8-c-modal__window {\n    position: inherit;\n    height: 100%;\n    width: 100%;\n  }\n}\n.cre8-c-modal__window:focus-visible {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n\n/**\n * Modal Window Header\n */\n.cre8-c-modal__header {\n  display: flex;\n  padding: 2rem 3rem 1rem;\n  align-items: center;\n  /**\n   * Modal Header with Error state\n   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n   */\n}\n.cre8-c-modal--error .cre8-c-modal__header .cre8-modal-icon {\n  color: var(--cre8-color-content-error-icon);\n  /* 1 */\n}\n.cre8-c-modal__header {\n  /**\n   * Modal Header with Warning state\n   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n   */\n}\n.cre8-c-modal--warning .cre8-c-modal__header .cre8-modal-icon {\n  color: var(--cre8-color-content-warning-icon);\n  /* 1 */\n}\n.cre8-c-modal__header {\n  /**\n   * Modal Header with Success state\n   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n   */\n}\n.cre8-c-modal--success .cre8-c-modal__header .cre8-modal-icon {\n  color: var(--cre8-color-content-success-icon);\n  /* 1 */\n}\n.cre8-c-modal__header {\n  /**\n   * Modal Header with Info or Help State\n   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n   */\n}\n.cre8-c-modal--info .cre8-c-modal__header .cre8-modal-icon, .cre8-c-modal--help .cre8-c-modal__header .cre8-modal-icon {\n  color: var(--cre8-color-content-info-icon);\n  /* 1 */\n}\n\n/**\n * Modal Heading\n */\n.cre8-c-modal__header-inner {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n.cre8-c-modal__header-inner cre8-icon .cre8-modal-icon {\n  height: 2rem;\n  width: 2rem;\n}\n\n/**\n * Modal Window Body\n */\n.cre8-c-modal__body {\n  max-height: 240px;\n  overflow: auto;\n  padding: 0 3rem;\n  /**\n   * Modal Window Body for mobile user screen widths\n   */\n}\n@media all and (max-width: 768px) {\n  .cre8-c-modal__body {\n    height: 100%;\n    max-height: max-content;\n  }\n}\n\n/**\n * Modal Window Footer\n */\n.cre8-c-modal__footer {\n  padding: 1.5rem 3rem calc(100vh - 95dvh);\n}\n\n/**\n * Modal Window Close button\n */\n.cre8-c-modal__close-button {\n  margin-left: auto;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"modal.styles.js","sourceRoot":"","sources":["../../../components/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2uBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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 #MODAL\n\\\\*------------------------------------*/\n:host {\n  display: block;\n}\n\n/**\n * 1) Modal Composable Component\n */\n.cre8-c-modal {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  top: 0;\n  left: 0;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  background: rgba(0, 0, 0, 0.25);\n  z-index: 1000;\n}\n\n.cre8-c-modal.cre8-is-active {\n  display: flex;\n  visibility: visible;\n  opacity: 1;\n}\n\n/**\n * Modal Focus Trap for Window (keeps focus in modal until closed)\n */\n.cre8-c-modal__focus-trap {\n  display: contents;\n}\n\n/**\n * Modal Window\n */\n.cre8-c-modal__window {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  position: fixed;\n  background: var(--cre8-color-bg-default);\n  width: 34rem;\n  max-width: 100%;\n  border-radius: var(--cre8-border-radius-container);\n  overflow: hidden;\n  overflow-y: auto;\n  /**\n   * Modal Window for mobile user screen widths\n   */\n}\n@media all and (max-width: 768px) {\n  .cre8-c-modal__window {\n    position: inherit;\n    height: 100%;\n    width: 100%;\n  }\n}\n.cre8-c-modal__window:focus-visible {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n\n/**\n * Modal Window Header\n */\n.cre8-c-modal__header {\n  display: flex;\n  padding: 2rem 3rem 1rem;\n  align-items: center;\n  /**\n   * Modal Header with Error state\n   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n   */\n}\n.cre8-c-modal--error .cre8-c-modal__header .cre8-modal-icon {\n  color: var(--cre8-color-content-error-icon);\n  /* 1 */\n}\n.cre8-c-modal__header {\n  /**\n   * Modal Header with Warning state\n   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n   */\n}\n.cre8-c-modal--warning .cre8-c-modal__header .cre8-modal-icon {\n  color: var(--cre8-color-content-warning-icon);\n  /* 1 */\n}\n.cre8-c-modal__header {\n  /**\n   * Modal Header with Success state\n   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n   */\n}\n.cre8-c-modal--success .cre8-c-modal__header .cre8-modal-icon {\n  color: var(--cre8-color-content-success-icon);\n  /* 1 */\n}\n.cre8-c-modal__header {\n  /**\n   * Modal Header with Info or Help State\n   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n   */\n}\n.cre8-c-modal--info .cre8-c-modal__header .cre8-modal-icon, .cre8-c-modal--help .cre8-c-modal__header .cre8-modal-icon {\n  color: var(--cre8-color-content-info-icon);\n  /* 1 */\n}\n\n/**\n * Modal Heading\n */\n.cre8-c-modal__header-inner {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n.cre8-c-modal__header-inner cre8-icon .cre8-modal-icon {\n  height: 2rem;\n  width: 2rem;\n}\n\n/**\n * Modal Window Body\n */\n.cre8-c-modal__body {\n  max-height: 240px;\n  overflow: auto;\n  padding: 0 3rem;\n  /**\n   * Modal Window Body for mobile user screen widths\n   */\n}\n@media all and (max-width: 768px) {\n  .cre8-c-modal__body {\n    height: 100%;\n    max-height: max-content;\n  }\n}\n\n/**\n * Modal Window Footer\n */\n.cre8-c-modal__footer {\n  padding: 1.5rem 3rem calc(100vh - 95dvh);\n}\n\n/**\n * Modal Window Close button\n */\n.cre8-c-modal__close-button {\n  margin-left: auto;\n}`;\nexport default styles;\n"]}

package/lib/components/multi-select/multi-select.styles.d.ts.map

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

package/lib/components/multi-select/multi-select.styles.js

@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**