@tmorrow/cre8-wc 2.0.5 → 2.0.7

package/lib/components/global-nav-item/global-nav-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-nav-item.styles.js","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqpBhB,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 * Actual primary nav list item\n */\n/**\n * Content within the primary nav item\n */\n.cre8-c-global-nav__item-content {\n  display: flex;\n  align-items: baseline;\n}\n\n/**\n * Primary navigation link\n * 1) Used to remove any sort of default button styles when a button tag is rendered\n */\n.cre8-c-global-nav__link {\n  font-family: var(--cre8-typography-body-small-font-family);\n  font-size: var(--cre8-typography-body-small-font-size);\n  font-weight: var(--cre8-typography-body-small-font-weight);\n  line-height: var(--cre8-typography-body-small-line-height);\n  text-decoration: var(--cre8-typography-body-small-text-decoration);\n  text-transform: var(--cre8-typography-body-small-text-transform);\n  display: flex;\n  align-items: center;\n  appearance: none;\n  /* 1 */\n  background: transparent;\n  /* 1 */\n  border: none;\n  white-space: nowrap;\n  width: 100%;\n  margin: 0;\n  padding: 0.5rem 1rem;\n  color: var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));\n  text-decoration: none;\n  transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  cursor: pointer;\n}\n.cre8-c-global-nav__link:hover, .cre8-c-global-nav__link:focus-visible {\n  background: var(--cre8-color-header-menu-bg-hover);\n  color: var(--cre8-color-header-menu-content-hover);\n}\n.cre8-c-global-nav__link:active {\n  border-color: var(--cre8-color-header-menu-border-pressed);\n  background: var(--cre8-color-header-menu-bg-pressed);\n  color: var(--cre8-color-header-menu-content-pressed);\n}\n\n/**\n * Icon within primary navigation item\n * 1) TODO: Figure out how to pass down size(1.5) instead of static rem value\n */\ncre8-icon-legacy {\n  --cre8-icon-height: 0.5rem;\n  /* 1 */\n  --cre8-icon-width: 0.5rem;\n  /* 1 */\n  margin-left: auto;\n  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  /**\n  * Icon within active primary nav item\n  * 1) Rotate the icon to show that the dropdown is open\n  */\n}\n.cre8-c-global-nav__item.cre8-is-active cre8-icon-legacy {\n  transform: rotate(-180deg);\n  /* 1 */\n}\n@media all and (min-width: 960px) {\n  cre8-icon-legacy {\n    margin-left: 0.5rem;\n  }\n}\n\n.cre8-c-global-nav__item-after {\n  --cre8-icon-height: 0.75rem;\n  --cre8-icon-width: 0.75rem;\n  margin-left: 0.5rem;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"global-nav-item.styles.js","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6pBhB,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 * Actual primary nav list item\n */\n/**\n * Content within the primary nav item\n */\n.cre8-c-global-nav__item-content {\n  display: flex;\n  align-items: baseline;\n}\n\n/**\n * Primary navigation link\n * 1) Used to remove any sort of default button styles when a button tag is rendered\n */\n.cre8-c-global-nav__link {\n  font-family: var(--cre8-typography-body-small-font-family);\n  font-size: var(--cre8-typography-body-small-font-size);\n  font-weight: var(--cre8-typography-body-small-font-weight);\n  line-height: var(--cre8-typography-body-small-line-height);\n  text-decoration: var(--cre8-typography-body-small-text-decoration);\n  text-transform: var(--cre8-typography-body-small-text-transform);\n  display: flex;\n  align-items: center;\n  appearance: none;\n  /* 1 */\n  background: transparent;\n  /* 1 */\n  border: none;\n  white-space: nowrap;\n  width: 100%;\n  margin: 0;\n  padding: 0.5rem 1rem;\n  color: var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));\n  text-decoration: none;\n  transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  cursor: pointer;\n}\n.cre8-c-global-nav__link:hover, .cre8-c-global-nav__link:focus-visible {\n  background: var(--cre8-color-header-menu-bg-hover);\n  color: var(--cre8-color-header-menu-content-hover);\n}\n.cre8-c-global-nav__link:active {\n  border-color: var(--cre8-color-header-menu-border-pressed);\n  background: var(--cre8-color-header-menu-bg-pressed);\n  color: var(--cre8-color-header-menu-content-pressed);\n}\n\n/**\n * Icon within primary navigation item\n * 1) TODO: Figure out how to pass down size(1.5) instead of static rem value\n */\ncre8-icon-legacy {\n  --cre8-icon-height: 0.5rem;\n  /* 1 */\n  --cre8-icon-width: 0.5rem;\n  /* 1 */\n  margin-left: auto;\n  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  /**\n  * Icon within active primary nav item\n  * 1) Rotate the icon to show that the dropdown is open\n  */\n}\n.cre8-c-global-nav__item.cre8-is-active cre8-icon-legacy {\n  transform: rotate(-180deg);\n  /* 1 */\n}\n@media all and (min-width: 960px) {\n  cre8-icon-legacy {\n    margin-left: 0.5rem;\n  }\n}\n\n.cre8-c-global-nav__item-after {\n  --cre8-icon-height: 0.75rem;\n  --cre8-icon-width: 0.75rem;\n  margin-left: 0.5rem;\n}`;\nexport default styles;\n"]}

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

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

package/lib/components/grid/grid.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/grid/grid.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.styles.js","sourceRoot":"","sources":["../../../components/grid/grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAm6BhB,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) Grid layout for items like cards, etc.\n */\n.cre8-c-grid {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin: -0.75rem;\n}\n\n/**\n * Grid with no gap in between items\n */\n.cre8-c-grid--gap-none {\n  margin: 0;\n}\n\n/**\n * Small gap grid\n * 1) Spacing between grid items is smaller than default\n */\n.cre8-c-grid--gap-sm {\n  margin: -0.25rem;\n}\n\n/**\n * Large gap grid\n * 1) Spacing between grid items is larger than default\n */\n.cre8-c-grid--gap-lg {\n  margin: -1rem;\n}\n\n/**\n * Side by Side Grid\n * 1) Grid that stays 2 items per row on all screen sizes\n */\n.cre8-c-grid--side-by-side {\n  flex-direction: row;\n}\n\n/**\n * 2up grid\n * 1) Stacked items on small screens to 2 items per row on medium/large screens\n */\n@media all and (min-width: 768px) {\n  .cre8-c-grid--2up {\n    flex-direction: row;\n  }\n}\n.cre8-c-grid--2up {\n  /**\n  * 2up grid that breaks faster\n  * 1) Grid that breaks from 1 to 2up at a smaller viewport than the default\n  */\n}\n@media all and (min-width: 560px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-faster {\n    flex-direction: row;\n  }\n}\n.cre8-c-grid--2up {\n  /**\n  * 2up grid that breaks slower\n  * 1) Grid that breaks from 1 to 2up at a larger viewport than the default\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-slower {\n    flex-direction: column;\n  }\n}\n@media all and (min-width: 1400px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-slower {\n    flex-direction: row;\n  }\n}\n\n/**\n * 3up grid\n * 1) Stacked items on small screens to 3 items per row on medium/large screens\n */\n@media all and (min-width: 768px) {\n  .cre8-c-grid--3up {\n    flex-direction: row;\n  }\n}\n\n/**\n * 1 to 3up grid\n * 1) Stacked items on small screens to 3 items per row on medium/large screens\n */\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-3up {\n    flex-direction: row;\n  }\n}\n.cre8-c-grid--1-3up {\n  /**\n  * 1 to 3 up grid that breaks faster\n  * 1) Grid that breaks from 1 to 3up at a smaller viewport than the default\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-faster {\n    flex-direction: row;\n  }\n}\n.cre8-c-grid--1-3up {\n  /**\n  * 1 to 3up grid that breaks slower\n  * 1) Grid that breaks from 1 to 3up at a larger viewport than the default\n  */\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-slower {\n    flex-direction: column;\n  }\n}\n@media all and (min-width: 1200px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-slower {\n    flex-direction: row;\n  }\n}\n\n/**\n * 1 to 2 to 4up grid\n * 1) Stacked items on small screens to 2 items per row on medium screens to 4 items per row on large screens\n */\n@media all and (min-width: 560px) {\n  .cre8-c-grid--1-2-4up {\n    flex-direction: row;\n  }\n}\n\n/**\n * 1 to 4up grid\n * 1) Stacked items on small screens to 4 items per row on medium/large screens\n */\n@media all and (min-width: 768px) {\n  .cre8-c-grid--1-4up {\n    flex-direction: row;\n  }\n}\n\n/**\n * 1 to 2 to 4up grid\n * 1) Stacked items on small screens to 2 items per row on small/medium screens to\n * 3 items per row on medium screens and 4 items per row on large screens\n */\n@media all and (min-width: 560px) {\n  .cre8-c-grid--4up {\n    flex-direction: row;\n  }\n}\n\n/**\n  * Slotted grid item within 4up Grid\n  */\n.cre8-c-grid--2-4-6up {\n  flex-direction: row;\n}\n\n/**\n * Slotted grid item\n */\n::slotted(cre8-grid-item) {\n  display: block;\n  padding: 0.75rem;\n  /**\n  * Slotted grid item within grid with no gap between items\n  */\n}\n.cre8-c-grid--gap-none > ::slotted(cre8-grid-item) {\n  padding: 0;\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within grid with small gap between items\n  */\n}\n.cre8-c-grid--gap-sm > ::slotted(cre8-grid-item) {\n  padding: 0.25rem;\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within grid with large gap between items\n  */\n}\n.cre8-c-grid--gap-lg > ::slotted(cre8-grid-item) {\n  padding: 1rem;\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within side by side grid\n  * 1) Grid that stays 2 items per row on all screen sizes\n  */\n}\n.cre8-c-grid--side-by-side > ::slotted(cre8-grid-item) {\n  width: 50%;\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 2up Grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--2up > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 2up break faster (small to large screens) Grid\n  */\n}\n@media all and (min-width: 560px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 2up break slower (small to large screens) Grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n    width: 100%;\n  }\n}\n@media all and (min-width: 1400px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 3up Grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--3up > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--3up > ::slotted(cre8-grid-item) {\n    width: 33.3333%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 1-3up Grid\n  */\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-3up > ::slotted(cre8-grid-item) {\n    width: 33.3333%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 1 to 3up break faster (small to large screens) grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {\n    width: 33.33%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 2up break slower (small to large screens) Grid\n  */\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n    width: 100%;\n  }\n}\n@media all and (min-width: 1200px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n    width: 33.33%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 1-2-4up Grid\n  */\n}\n@media all and (min-width: 560px) {\n  .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {\n    width: 25%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 1-2-4up Grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--1-4up > ::slotted(cre8-grid-item) {\n    width: 25%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 4up Grid\n  */\n}\n@media all and (min-width: 560px) {\n  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n    width: 33.3333%;\n  }\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n    width: 25%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 4up Grid\n  */\n}\n.cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n  width: 50%;\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n    width: 25%;\n  }\n}\n@media all and (min-width: 1200px) {\n  .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n    width: 16.66%;\n  }\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"grid.styles.js","sourceRoot":"","sources":["../../../components/grid/grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA26BhB,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) Grid layout for items like cards, etc.\n */\n.cre8-c-grid {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin: -0.75rem;\n}\n\n/**\n * Grid with no gap in between items\n */\n.cre8-c-grid--gap-none {\n  margin: 0;\n}\n\n/**\n * Small gap grid\n * 1) Spacing between grid items is smaller than default\n */\n.cre8-c-grid--gap-sm {\n  margin: -0.25rem;\n}\n\n/**\n * Large gap grid\n * 1) Spacing between grid items is larger than default\n */\n.cre8-c-grid--gap-lg {\n  margin: -1rem;\n}\n\n/**\n * Side by Side Grid\n * 1) Grid that stays 2 items per row on all screen sizes\n */\n.cre8-c-grid--side-by-side {\n  flex-direction: row;\n}\n\n/**\n * 2up grid\n * 1) Stacked items on small screens to 2 items per row on medium/large screens\n */\n@media all and (min-width: 768px) {\n  .cre8-c-grid--2up {\n    flex-direction: row;\n  }\n}\n.cre8-c-grid--2up {\n  /**\n  * 2up grid that breaks faster\n  * 1) Grid that breaks from 1 to 2up at a smaller viewport than the default\n  */\n}\n@media all and (min-width: 560px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-faster {\n    flex-direction: row;\n  }\n}\n.cre8-c-grid--2up {\n  /**\n  * 2up grid that breaks slower\n  * 1) Grid that breaks from 1 to 2up at a larger viewport than the default\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-slower {\n    flex-direction: column;\n  }\n}\n@media all and (min-width: 1400px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-slower {\n    flex-direction: row;\n  }\n}\n\n/**\n * 3up grid\n * 1) Stacked items on small screens to 3 items per row on medium/large screens\n */\n@media all and (min-width: 768px) {\n  .cre8-c-grid--3up {\n    flex-direction: row;\n  }\n}\n\n/**\n * 1 to 3up grid\n * 1) Stacked items on small screens to 3 items per row on medium/large screens\n */\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-3up {\n    flex-direction: row;\n  }\n}\n.cre8-c-grid--1-3up {\n  /**\n  * 1 to 3 up grid that breaks faster\n  * 1) Grid that breaks from 1 to 3up at a smaller viewport than the default\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-faster {\n    flex-direction: row;\n  }\n}\n.cre8-c-grid--1-3up {\n  /**\n  * 1 to 3up grid that breaks slower\n  * 1) Grid that breaks from 1 to 3up at a larger viewport than the default\n  */\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-slower {\n    flex-direction: column;\n  }\n}\n@media all and (min-width: 1200px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-slower {\n    flex-direction: row;\n  }\n}\n\n/**\n * 1 to 2 to 4up grid\n * 1) Stacked items on small screens to 2 items per row on medium screens to 4 items per row on large screens\n */\n@media all and (min-width: 560px) {\n  .cre8-c-grid--1-2-4up {\n    flex-direction: row;\n  }\n}\n\n/**\n * 1 to 4up grid\n * 1) Stacked items on small screens to 4 items per row on medium/large screens\n */\n@media all and (min-width: 768px) {\n  .cre8-c-grid--1-4up {\n    flex-direction: row;\n  }\n}\n\n/**\n * 1 to 2 to 4up grid\n * 1) Stacked items on small screens to 2 items per row on small/medium screens to\n * 3 items per row on medium screens and 4 items per row on large screens\n */\n@media all and (min-width: 560px) {\n  .cre8-c-grid--4up {\n    flex-direction: row;\n  }\n}\n\n/**\n  * Slotted grid item within 4up Grid\n  */\n.cre8-c-grid--2-4-6up {\n  flex-direction: row;\n}\n\n/**\n * Slotted grid item\n */\n::slotted(cre8-grid-item) {\n  display: block;\n  padding: 0.75rem;\n  /**\n  * Slotted grid item within grid with no gap between items\n  */\n}\n.cre8-c-grid--gap-none > ::slotted(cre8-grid-item) {\n  padding: 0;\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within grid with small gap between items\n  */\n}\n.cre8-c-grid--gap-sm > ::slotted(cre8-grid-item) {\n  padding: 0.25rem;\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within grid with large gap between items\n  */\n}\n.cre8-c-grid--gap-lg > ::slotted(cre8-grid-item) {\n  padding: 1rem;\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within side by side grid\n  * 1) Grid that stays 2 items per row on all screen sizes\n  */\n}\n.cre8-c-grid--side-by-side > ::slotted(cre8-grid-item) {\n  width: 50%;\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 2up Grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--2up > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 2up break faster (small to large screens) Grid\n  */\n}\n@media all and (min-width: 560px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 2up break slower (small to large screens) Grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n    width: 100%;\n  }\n}\n@media all and (min-width: 1400px) {\n  .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 3up Grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--3up > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--3up > ::slotted(cre8-grid-item) {\n    width: 33.3333%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 1-3up Grid\n  */\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-3up > ::slotted(cre8-grid-item) {\n    width: 33.3333%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 1 to 3up break faster (small to large screens) grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {\n    width: 33.33%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 2up break slower (small to large screens) Grid\n  */\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n    width: 100%;\n  }\n}\n@media all and (min-width: 1200px) {\n  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n    width: 33.33%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 1-2-4up Grid\n  */\n}\n@media all and (min-width: 560px) {\n  .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {\n    width: 25%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 1-2-4up Grid\n  */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--1-4up > ::slotted(cre8-grid-item) {\n    width: 25%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 4up Grid\n  */\n}\n@media all and (min-width: 560px) {\n  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n    width: 50%;\n  }\n}\n@media all and (min-width: 768px) {\n  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n    width: 33.3333%;\n  }\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n    width: 25%;\n  }\n}\n::slotted(cre8-grid-item) {\n  /**\n  * Slotted grid item within 4up Grid\n  */\n}\n.cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n  width: 50%;\n}\n@media all and (min-width: 960px) {\n  .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n    width: 25%;\n  }\n}\n@media all and (min-width: 1200px) {\n  .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n    width: 16.66%;\n  }\n}`;\nexport default styles;\n"]}

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

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

package/lib/components/grid-item/grid-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/grid-item/grid-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-item.styles.js","sourceRoot":"","sources":["../../../components/grid-item/grid-item.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) Item used for the various items within the grid\n */\n.cre8-c-grid__item {\n  height: 100%;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"grid-item.styles.js","sourceRoot":"","sources":["../../../components/grid-item/grid-item.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) Item used for the various items within the grid\n */\n.cre8-c-grid__item {\n  height: 100%;\n}`;\nexport default styles;\n"]}

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

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

package/lib/components/header/header.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/header/header.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.styles.js","sourceRoot":"","sources":["../../../components/header/header.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAioBhB,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) Global header where the navigation, logo, and other content lives across the entire site\n  */\n.cre8-c-header {\n  background: var(--cre8-header-background, var(--cre8-color-header-bg-default));\n  color: var(--cre8-color-content-default);\n  position: relative;\n  z-index: 3;\n}\n\n/**\n * Header top section\n * 1) Optional slot used for global navigation usually\n */\n.cre8-c-header__top {\n  position: relative;\n  top: 0;\n  width: 100%;\n  z-index: 3;\n  background: var(--cre8-header-top-background);\n}\n\n/**\n * Inner container of the header top section\n * 1) Used to cap the width of the content within the header\n */\n.cre8-c-header__top-inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  overflow: auto;\n}\n\n/**\n * Header middle section\n * 1) Section of the site used for the logo and primary navigation\n */\n.cre8-c-header__middle {\n  width: 100%;\n  box-shadow: var(--cre8-theme-box-shadow-md);\n  border-bottom: var(--cre8-header-middle-border-bottom-color);\n}\n\n/**\n * Inner container of the header middle section\n * 1) Used to cap the width of the content within the header\n */\n.cre8-c-header__middle-inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.cre8-c-header__bottom {\n  background: var(--cre8-header-bottom-background);\n  box-shadow: var(--cre8-header-bottom-box-shadow);\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"header.styles.js","sourceRoot":"","sources":["../../../components/header/header.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyoBhB,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) Global header where the navigation, logo, and other content lives across the entire site\n  */\n.cre8-c-header {\n  background: var(--cre8-header-background, var(--cre8-color-header-bg-default));\n  color: var(--cre8-color-content-default);\n  position: relative;\n  z-index: 3;\n}\n\n/**\n * Header top section\n * 1) Optional slot used for global navigation usually\n */\n.cre8-c-header__top {\n  position: relative;\n  top: 0;\n  width: 100%;\n  z-index: 3;\n  background: var(--cre8-header-top-background);\n}\n\n/**\n * Inner container of the header top section\n * 1) Used to cap the width of the content within the header\n */\n.cre8-c-header__top-inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  overflow: auto;\n}\n\n/**\n * Header middle section\n * 1) Section of the site used for the logo and primary navigation\n */\n.cre8-c-header__middle {\n  width: 100%;\n  box-shadow: var(--cre8-theme-box-shadow-md);\n  border-bottom: var(--cre8-header-middle-border-bottom-color);\n}\n\n/**\n * Inner container of the header middle section\n * 1) Used to cap the width of the content within the header\n */\n.cre8-c-header__middle-inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.cre8-c-header__bottom {\n  background: var(--cre8-header-bottom-background);\n  box-shadow: var(--cre8-header-bottom-box-shadow);\n}`;\nexport default styles;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1C;;;;;;;;;;;;;;;;GAgBG;AACP,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IAEC,IAAI,CAAC,EACH,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,aAAa,GACb,eAAe,GACf,aAAa,GACb,aAAa,GACb,eAAe,GACf,aAAa,GACb,YAAY,GACZ,cAAc,GACd,YAAY,CAAC;IAEnB;;;;;;;;;;;;;;;OAeG;IAEC,UAAU,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE/D;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB,MAAM;CAkDT;AAOD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,WAAW,CAAC;KAC/B;CACJ;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1C;;;;;;;;;;;;;;;;GAgBG;AACP,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IAEC,IAAI,CAAC,EACH,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,aAAa,GACb,eAAe,GACf,aAAa,GACb,aAAa,GACb,eAAe,GACf,aAAa,GACb,YAAY,GACZ,cAAc,GACd,YAAY,CAAC;IAEnB;;;;;;;;;;;;;;;OAeG;IAEC,UAAU,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE/D;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB,MAAM;CAwDT;AAOD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,WAAW,CAAC;KAC/B;CACJ;AAED,eAAe,WAAW,CAAC"}

package/lib/components/heading/heading.js

@@ -58,7 +58,6 @@ export class Cre8Heading extends Cre8Element {
             }
             : {};
         const componentClassName = this.componentClassNames('cre8-c-heading', {
-            ...tagVariantClassNames,
             'cre8-c-heading--headline-large': this.type === 'headline-large',
             'cre8-c-heading--headline-default': this.type === 'headline-default',
             'cre8-c-heading--headline-small': this.type === 'headline-small',
@@ -74,6 +73,13 @@ export class Cre8Heading extends Cre8Element {
             'cre8-c-heading--meta-large': this.type === 'meta-large',
             'cre8-c-heading--meta-default': this.type === 'meta-default',
             'cre8-c-heading--meta-small': this.type === 'meta-small',
+            // Spread last. `tagVariantClassNames` is `{}` whenever `type` is
+            // set, so the type-derived keys above still win when both could
+            // apply. Spreading it first meant those same keys immediately
+            // overwrote the tagVariant fallback with `false`, so an unset
+            // `type` produced no preset class at all and every heading fell
+            // back to the bare `.cre8-c-heading` size.
+            ...tagVariantClassNames,
             'cre8-c-heading--brand-color': this.brandColor,
             'cre8-c-heading--inverted': this.inverted,
         });

package/lib/components/heading/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAErC;;;;;;;;;;;;;;;;GAgBG;AACP,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QA2CI;;;;;;;;;;;;;;;WAeG;QAEC,eAAU,GAA4C,IAAI,CAAC;IAoEnE,CAAC;IAlDG,MAAM;QACF,MAAM,oBAAoB,GAAG,CAAC,IAAI,CAAC,IAAI;YACnC,CAAC,CAAC;gBACE,gCAAgC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC1D,kCAAkC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC5D,gCAAgC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBACvD,+BAA+B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBACzD,6BAA6B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;aAC1D;YACD,CAAC,CAAC,EAAE,CAAC;QAET,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE;YAClE,GAAG,oBAAoB;YACvB,gCAAgC,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAChE,kCAAkC,EAAE,IAAI,CAAC,IAAI,KAAK,kBAAkB;YACpE,gCAAgC,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAChE,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc;YAC5D,iCAAiC,EAAE,IAAI,CAAC,IAAI,KAAK,iBAAiB;YAClE,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;YACxD,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc;YAC5D,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;YACxD,6BAA6B,EAAE,IAAI,CAAC,UAAU;YAC9C,0BAA0B,EAAE,IAAI,CAAC,QAAQ;SAC5C,CAAC,CAAC;QAEH,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF;gBACI,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;QACvF,CAAC;IACL,CAAC;;AA9HM,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAyBrB;IADH,QAAQ,EAAE;yCAgBQ;AAmBf;IADH,QAAQ,EAAE;+CACoD;AAQ3D;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAClB;AAuD7B,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './heading.styles.js';\n\n    /**\n     *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6\n     *  is the least important in the content hierarchy.\n     *\n     * # How to Use\n     * 1. The cre8-heading tag wraps around one of the six native HTML \"h\" tags, depending on your chosen variation.\n     * 2. There are two main use cases for using this component:\n     *    text passage headings and Components with a title (i.e. modal, card or alert)\n     * 3. There will be instances when the design requires the heading text to have the brand color applied\n     *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)\n     *    attribute to true on the cre8-heading tag.\n     * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)\n     *    attribute to the tag for white text.\n     *\n     *\n     * @slot - The heading text content\n     */\nexport class Cre8Heading extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Heading type\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**display-default** renders a heading with the heading display-default preset treatment</li>\n     * <li>**display-small** renders a heading with the heading display-small preset treatment</li>\n     * <li>**headline-large** renders a heading with the heading headline-large preset treatment</li>\n     * <li>**headline-default** renders a heading with the heading headline-default preset treatment</li>\n     * <li>**headline-small** renders a heading with the heading headline-small preset treatment</li>\n     * <li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>\n     * <li>**title-large** renders a heading with the heading title-large preset treatment</li>\n     * <li>**title-default** renders a heading with the heading title-default preset treatment</li>\n     * <li>**title-small** renders a heading with the heading title-small preset treatment</li>\n     * <li>**label-large** renders a heading with the label-large preset treatment</li>\n     * <li>**label** renders a heading with the label preset treatment</li>\n     * <li>**label-small** renders a heading with the label-small preset treatment</li>\n     * <li>**meta-large** renders a heading with the meta-large preset treatment</li>\n     * <li>**meta-default** renders a heading with the meta-default preset treatment</li>\n     * <li>**meta-small** renders a heading with the meta-small preset treatment</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n        type?:\n        | 'display-default'\n        | 'display-small'\n        | 'headline-large'\n        | 'headline-default'\n        | 'headline-small'\n        | 'title-xlarge'\n        | 'title-large'\n        | 'title-default'\n        | 'title-small'\n        | 'label-large'\n        | 'label-default'\n        | 'label-small'\n        | 'meta-large'\n        | 'meta-default'\n        | 'meta-small';\n\n    /**\n     * Dynamic tag name for the component\n     * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**h1** renders an `h1` tag</li>\n     * <li>**h2** renders an `h2` tag. This is the default</li>\n     * <li>**h3** renders an `h3` tag</li>\n     * <li>**h4** renders an `h4` tag</li>\n     * <li>**h5** renders an `h5` tag</li>\n     * <li>**h6** renders an `h6` tag</li>\n     * </ul>\n     * </cre8-text-passage>\n     *\n     * @attr{string}\n     */\n    @property()\n        tagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h5';\n\n    /**\n     * Invert the color of the font from dark to light. An inverted `heading` should be used on a dark background.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        inverted?: boolean;\n\n    /**\n     * Apply the brand color to the heading text.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        brandColor?: boolean;\n\n    render() {\n        const tagVariantClassNames = !this.type\n            ? {\n                'cre8-c-heading--headline-large': this.tagVariant === 'h1',\n                'cre8-c-heading--headline-default': this.tagVariant === 'h2',\n                'cre8-c-heading--headline-small': this.tagVariant === 'h3',\n                'cre8-c-heading--title-large': this.tagVariant === 'h4',\n                'cre8-c-heading--title-default': this.tagVariant === 'h5',\n                'cre8-c-heading--title-small': this.tagVariant === 'h6',\n            }\n            : {};\n\n        const componentClassName = this.componentClassNames('cre8-c-heading', {\n            ...tagVariantClassNames,\n            'cre8-c-heading--headline-large': this.type === 'headline-large',\n            'cre8-c-heading--headline-default': this.type === 'headline-default',\n            'cre8-c-heading--headline-small': this.type === 'headline-small',\n            'cre8-c-heading--title-large': this.type === 'title-large',\n            'cre8-c-heading--title-default': this.type === 'title-default',\n            'cre8-c-heading--title-small': this.type === 'title-small',\n            'cre8-c-heading--title-xlarge': this.type === 'title-xlarge',\n            'cre8-c-heading--display-default': this.type === 'display-default',\n            'cre8-c-heading--display-small': this.type === 'display-small',\n            'cre8-c-heading--label-large': this.type === 'label-large',\n            'cre8-c-heading--label-default': this.type === 'label-default',\n            'cre8-c-heading--label-small': this.type === 'label-small',\n            'cre8-c-heading--meta-large': this.type === 'meta-large',\n            'cre8-c-heading--meta-default': this.type === 'meta-default',\n            'cre8-c-heading--meta-small': this.type === 'meta-small',\n            'cre8-c-heading--brand-color': this.brandColor,\n            'cre8-c-heading--inverted': this.inverted,\n        });\n\n        switch (this.tagVariant) {\n            case 'h1':\n                return html` <h1 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h1> `;\n            case 'h2':\n                return html` <h2 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h2> `;\n            case 'h3':\n                return html` <h3 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h3> `;\n            case 'h4':\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n            case 'h5':\n                return html` <h5 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h5> `;\n            case 'h6':\n                return html` <h6 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h6> `;\n            default:\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n        }\n    }\n}\n\n\nif (customElements.get('cre8-heading') === undefined) {\n    customElements.define('cre8-heading', Cre8Heading);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-heading': Cre8Heading;\n    }\n}\n\nexport default Cre8Heading;\n"]}
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAErC;;;;;;;;;;;;;;;;GAgBG;AACP,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QA2CI;;;;;;;;;;;;;;;WAeG;QAEC,eAAU,GAA4C,IAAI,CAAC;IA0EnE,CAAC;IAxDG,MAAM;QACF,MAAM,oBAAoB,GAAG,CAAC,IAAI,CAAC,IAAI;YACnC,CAAC,CAAC;gBACE,gCAAgC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC1D,kCAAkC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC5D,gCAAgC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBACvD,+BAA+B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;gBACzD,6BAA6B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;aAC1D;YACD,CAAC,CAAC,EAAE,CAAC;QAET,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE;YAClE,gCAAgC,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAChE,kCAAkC,EAAE,IAAI,CAAC,IAAI,KAAK,kBAAkB;YACpE,gCAAgC,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAChE,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc;YAC5D,iCAAiC,EAAE,IAAI,CAAC,IAAI,KAAK,iBAAiB;YAClE,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,+BAA+B,EAAE,IAAI,CAAC,IAAI,KAAK,eAAe;YAC9D,6BAA6B,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa;YAC1D,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;YACxD,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc;YAC5D,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;YACxD,iEAAiE;YACjE,gEAAgE;YAChE,8DAA8D;YAC9D,8DAA8D;YAC9D,gEAAgE;YAChE,2CAA2C;YAC3C,GAAG,oBAAoB;YACvB,6BAA6B,EAAE,IAAI,CAAC,UAAU;YAC9C,0BAA0B,EAAE,IAAI,CAAC,QAAQ;SAC5C,CAAC,CAAC;QAEH,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF,KAAK,IAAI;gBACL,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;YACnF;gBACI,OAAO,IAAI,CAAA,0BAA0B,kBAAkB,uBAAuB,CAAC;QACvF,CAAC;IACL,CAAC;;AApIM,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAyBrB;IADH,QAAQ,EAAE;yCAgBQ;AAmBf;IADH,QAAQ,EAAE;+CACoD;AAQ3D;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAClB;AA6D7B,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './heading.styles.js';\n\n    /**\n     *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6\n     *  is the least important in the content hierarchy.\n     *\n     * # How to Use\n     * 1. The cre8-heading tag wraps around one of the six native HTML \"h\" tags, depending on your chosen variation.\n     * 2. There are two main use cases for using this component:\n     *    text passage headings and Components with a title (i.e. modal, card or alert)\n     * 3. There will be instances when the design requires the heading text to have the brand color applied\n     *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)\n     *    attribute to true on the cre8-heading tag.\n     * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)\n     *    attribute to the tag for white text.\n     *\n     *\n     * @slot - The heading text content\n     */\nexport class Cre8Heading extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Heading type\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**display-default** renders a heading with the heading display-default preset treatment</li>\n     * <li>**display-small** renders a heading with the heading display-small preset treatment</li>\n     * <li>**headline-large** renders a heading with the heading headline-large preset treatment</li>\n     * <li>**headline-default** renders a heading with the heading headline-default preset treatment</li>\n     * <li>**headline-small** renders a heading with the heading headline-small preset treatment</li>\n     * <li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>\n     * <li>**title-large** renders a heading with the heading title-large preset treatment</li>\n     * <li>**title-default** renders a heading with the heading title-default preset treatment</li>\n     * <li>**title-small** renders a heading with the heading title-small preset treatment</li>\n     * <li>**label-large** renders a heading with the label-large preset treatment</li>\n     * <li>**label** renders a heading with the label preset treatment</li>\n     * <li>**label-small** renders a heading with the label-small preset treatment</li>\n     * <li>**meta-large** renders a heading with the meta-large preset treatment</li>\n     * <li>**meta-default** renders a heading with the meta-default preset treatment</li>\n     * <li>**meta-small** renders a heading with the meta-small preset treatment</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n        type?:\n        | 'display-default'\n        | 'display-small'\n        | 'headline-large'\n        | 'headline-default'\n        | 'headline-small'\n        | 'title-xlarge'\n        | 'title-large'\n        | 'title-default'\n        | 'title-small'\n        | 'label-large'\n        | 'label-default'\n        | 'label-small'\n        | 'meta-large'\n        | 'meta-default'\n        | 'meta-small';\n\n    /**\n     * Dynamic tag name for the component\n     * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**h1** renders an `h1` tag</li>\n     * <li>**h2** renders an `h2` tag. This is the default</li>\n     * <li>**h3** renders an `h3` tag</li>\n     * <li>**h4** renders an `h4` tag</li>\n     * <li>**h5** renders an `h5` tag</li>\n     * <li>**h6** renders an `h6` tag</li>\n     * </ul>\n     * </cre8-text-passage>\n     *\n     * @attr{string}\n     */\n    @property()\n        tagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h5';\n\n    /**\n     * Invert the color of the font from dark to light. An inverted `heading` should be used on a dark background.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        inverted?: boolean;\n\n    /**\n     * Apply the brand color to the heading text.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        brandColor?: boolean;\n\n    render() {\n        const tagVariantClassNames = !this.type\n            ? {\n                'cre8-c-heading--headline-large': this.tagVariant === 'h1',\n                'cre8-c-heading--headline-default': this.tagVariant === 'h2',\n                'cre8-c-heading--headline-small': this.tagVariant === 'h3',\n                'cre8-c-heading--title-large': this.tagVariant === 'h4',\n                'cre8-c-heading--title-default': this.tagVariant === 'h5',\n                'cre8-c-heading--title-small': this.tagVariant === 'h6',\n            }\n            : {};\n\n        const componentClassName = this.componentClassNames('cre8-c-heading', {\n            'cre8-c-heading--headline-large': this.type === 'headline-large',\n            'cre8-c-heading--headline-default': this.type === 'headline-default',\n            'cre8-c-heading--headline-small': this.type === 'headline-small',\n            'cre8-c-heading--title-large': this.type === 'title-large',\n            'cre8-c-heading--title-default': this.type === 'title-default',\n            'cre8-c-heading--title-small': this.type === 'title-small',\n            'cre8-c-heading--title-xlarge': this.type === 'title-xlarge',\n            'cre8-c-heading--display-default': this.type === 'display-default',\n            'cre8-c-heading--display-small': this.type === 'display-small',\n            'cre8-c-heading--label-large': this.type === 'label-large',\n            'cre8-c-heading--label-default': this.type === 'label-default',\n            'cre8-c-heading--label-small': this.type === 'label-small',\n            'cre8-c-heading--meta-large': this.type === 'meta-large',\n            'cre8-c-heading--meta-default': this.type === 'meta-default',\n            'cre8-c-heading--meta-small': this.type === 'meta-small',\n            // Spread last. `tagVariantClassNames` is `{}` whenever `type` is\n            // set, so the type-derived keys above still win when both could\n            // apply. Spreading it first meant those same keys immediately\n            // overwrote the tagVariant fallback with `false`, so an unset\n            // `type` produced no preset class at all and every heading fell\n            // back to the bare `.cre8-c-heading` size.\n            ...tagVariantClassNames,\n            'cre8-c-heading--brand-color': this.brandColor,\n            'cre8-c-heading--inverted': this.inverted,\n        });\n\n        switch (this.tagVariant) {\n            case 'h1':\n                return html` <h1 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h1> `;\n            case 'h2':\n                return html` <h2 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h2> `;\n            case 'h3':\n                return html` <h3 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h3> `;\n            case 'h4':\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n            case 'h5':\n                return html` <h5 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h5> `;\n            case 'h6':\n                return html` <h6 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h6> `;\n            default:\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n        }\n    }\n}\n\n\nif (customElements.get('cre8-heading') === undefined) {\n    customElements.define('cre8-heading', Cre8Heading);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-heading': Cre8Heading;\n    }\n}\n\nexport default Cre8Heading;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"heading.styles.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAu4BV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"heading.styles.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+4BV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/heading/heading.styles.js

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