@tmorrow/cre8-wc 2.0.5 → 2.0.7

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

@@ -1 +1 @@
-{"version":3,"file":"heading.styles.js","sourceRoot":"","sources":["../../../components/heading/heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAu4BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n  color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n  margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n  margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n  margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: size(8) !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n  padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n  padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n  padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n}\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:host {\n  display: inline;\n  text-align: left;\n}\n\n/**\n * DefaultHeading component styling/Heading title-large\n */\n.cre8-c-heading,\n.cre8-c-heading--title-large {\n  font-family: var(--cre8-typography-title-large-mobile-font-family);\n  font-size: var(--cre8-typography-title-large-mobile-font-size);\n  font-weight: var(--cre8-typography-title-large-mobile-font-weight);\n  line-height: var(--cre8-typography-title-large-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-large-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading,\n  .cre8-c-heading--title-large {\n    font-family: var(--cre8-typography-title-large-font-family);\n    font-size: var(--cre8-typography-title-large-font-size);\n    font-weight: var(--cre8-typography-title-large-font-weight);\n    line-height: var(--cre8-typography-title-large-line-height);\n    text-decoration: var(--cre8-typography-title-large-text-decoration);\n    text-transform: var(--cre8-typography-title-large-text-transform);\n  }\n}\n.cre8-c-heading,\n.cre8-c-heading--title-large {\n  margin: 0;\n  color: var(--cre8-color-content-default);\n}\n\n/**\n * Heading with theme headline-large preset applied\n */\n.cre8-c-heading--headline-large {\n  font-family: var(--cre8-typography-headline-large-mobile-font-family);\n  font-size: var(--cre8-typography-headline-large-mobile-font-size);\n  font-weight: var(--cre8-typography-headline-large-mobile-font-weight);\n  line-height: var(--cre8-typography-headline-large-mobile-line-height);\n  text-decoration: var(--cre8-typography-headline-large-mobile-text-decoration);\n  text-transform: var(--cre8-typography-headline-large-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--headline-large {\n    font-family: var(--cre8-typography-headline-large-font-family);\n    font-size: var(--cre8-typography-headline-large-font-size);\n    font-weight: var(--cre8-typography-headline-large-font-weight);\n    line-height: var(--cre8-typography-headline-large-line-height);\n    text-decoration: var(--cre8-typography-headline-large-text-decoration);\n    text-transform: var(--cre8-typography-headline-large-text-transform);\n  }\n}\n\n/**\n * Heading with theme headline-default preset applied\n */\n.cre8-c-heading--headline-default {\n  font-family: var(--cre8-typography-headline-default-mobile-font-family);\n  font-size: var(--cre8-typography-headline-default-mobile-font-size);\n  font-weight: var(--cre8-typography-headline-default-mobile-font-weight);\n  line-height: var(--cre8-typography-headline-default-mobile-line-height);\n  text-decoration: var(--cre8-typography-headline-default-mobile-text-decoration);\n  text-transform: var(--cre8-typography-headline-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--headline-default {\n    font-family: var(--cre8-typography-headline-default-font-family);\n    font-size: var(--cre8-typography-headline-default-font-size);\n    font-weight: var(--cre8-typography-headline-default-font-weight);\n    line-height: var(--cre8-typography-headline-default-line-height);\n    text-decoration: var(--cre8-typography-headline-default-text-decoration);\n    text-transform: var(--cre8-typography-headline-default-text-transform);\n  }\n}\n\n/**\n * Heading with theme headline-small preset applied\n */\n.cre8-c-heading--headline-small {\n  font-family: var(--cre8-typography-headline-small-mobile-font-family);\n  font-size: var(--cre8-typography-headline-small-mobile-font-size);\n  font-weight: var(--cre8-typography-headline-small-mobile-font-weight);\n  line-height: var(--cre8-typography-headline-small-mobile-line-height);\n  text-decoration: var(--cre8-typography-headline-small-mobile-text-decoration);\n  text-transform: var(--cre8-typography-headline-small-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--headline-small {\n    font-family: var(--cre8-typography-headline-small-font-family);\n    font-size: var(--cre8-typography-headline-small-font-size);\n    font-weight: var(--cre8-typography-headline-small-font-weight);\n    line-height: var(--cre8-typography-headline-small-line-height);\n    text-decoration: var(--cre8-typography-headline-small-text-decoration);\n    text-transform: var(--cre8-typography-headline-small-text-transform);\n  }\n}\n\n/**\n * Heading with theme title-xlarge preset applied\n */\n.cre8-c-heading--title-xlarge {\n  font-family: var(--cre8-typography-title-xlarge-mobile-font-family);\n  font-size: var(--cre8-typography-title-xlarge-mobile-font-size);\n  font-weight: var(--cre8-typography-title-xlarge-mobile-font-weight);\n  line-height: var(--cre8-typography-title-xlarge-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-xlarge-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-xlarge-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--title-xlarge {\n    font-family: var(--cre8-typography-title-xlarge-font-family);\n    font-size: var(--cre8-typography-title-xlarge-font-size);\n    font-weight: var(--cre8-typography-title-xlarge-font-weight);\n    line-height: var(--cre8-typography-title-xlarge-line-height);\n    text-decoration: var(--cre8-typography-title-xlarge-text-decoration);\n    text-transform: var(--cre8-typography-title-xlarge-text-transform);\n  }\n}\n\n/**\n * Heading with theme title-large preset applied\n */\n.cre8-c-heading--title-large {\n  font-family: var(--cre8-typography-title-large-mobile-font-family);\n  font-size: var(--cre8-typography-title-large-mobile-font-size);\n  font-weight: var(--cre8-typography-title-large-mobile-font-weight);\n  line-height: var(--cre8-typography-title-large-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-large-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--title-large {\n    font-family: var(--cre8-typography-title-large-font-family);\n    font-size: var(--cre8-typography-title-large-font-size);\n    font-weight: var(--cre8-typography-title-large-font-weight);\n    line-height: var(--cre8-typography-title-large-line-height);\n    text-decoration: var(--cre8-typography-title-large-text-decoration);\n    text-transform: var(--cre8-typography-title-large-text-transform);\n  }\n}\n\n/**\n * Heading with theme title-default preset applied\n */\n.cre8-c-heading--title-default {\n  font-family: var(--cre8-typography-title-default-mobile-font-family);\n  font-size: var(--cre8-typography-title-default-mobile-font-size);\n  font-weight: var(--cre8-typography-title-default-mobile-font-weight);\n  line-height: var(--cre8-typography-title-default-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--title-default {\n    font-family: var(--cre8-typography-title-default-font-family);\n    font-size: var(--cre8-typography-title-default-font-size);\n    font-weight: var(--cre8-typography-title-default-font-weight);\n    line-height: var(--cre8-typography-title-default-line-height);\n    text-decoration: var(--cre8-typography-title-default-text-decoration);\n    text-transform: var(--cre8-typography-title-default-text-transform);\n  }\n}\n\n/**\n * Heading with theme title-small preset applied\n */\n.cre8-c-heading--title-small {\n  font-family: var(--cre8-typography-title-small-mobile-font-family);\n  font-size: var(--cre8-typography-title-small-mobile-font-size);\n  font-weight: var(--cre8-typography-title-small-mobile-font-weight);\n  line-height: var(--cre8-typography-title-small-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-small-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-small-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--title-small {\n    font-family: var(--cre8-typography-title-small-font-family);\n    font-size: var(--cre8-typography-title-small-font-size);\n    font-weight: var(--cre8-typography-title-small-font-weight);\n    line-height: var(--cre8-typography-title-small-line-height);\n    text-decoration: var(--cre8-typography-title-small-text-decoration);\n    text-transform: var(--cre8-typography-title-small-text-transform);\n  }\n}\n\n/**\n * Heading with theme display-small preset applied\n */\n.cre8-c-heading--display-small {\n  font-family: var(--cre8-typography-display-small-mobile-font-family);\n  font-size: var(--cre8-typography-display-small-mobile-font-size);\n  font-weight: var(--cre8-typography-display-small-mobile-font-weight);\n  line-height: var(--cre8-typography-display-small-mobile-line-height);\n  text-decoration: var(--cre8-typography-display-small-mobile-text-decoration);\n  text-transform: var(--cre8-typography-display-small-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--display-small {\n    font-family: var(--cre8-typography-display-small-font-family);\n    font-size: var(--cre8-typography-display-small-font-size);\n    font-weight: var(--cre8-typography-display-small-font-weight);\n    line-height: var(--cre8-typography-display-small-line-height);\n    text-decoration: var(--cre8-typography-display-small-text-decoration);\n    text-transform: var(--cre8-typography-display-small-text-transform);\n  }\n}\n\n/**\n * Heading with theme display-default preset applied\n */\n.cre8-c-heading--display-default {\n  font-family: var(--cre8-typography-display-default-mobile-font-family);\n  font-size: var(--cre8-typography-display-default-mobile-font-size);\n  font-weight: var(--cre8-typography-display-default-mobile-font-weight);\n  line-height: var(--cre8-typography-display-default-mobile-line-height);\n  text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);\n  text-transform: var(--cre8-typography-display-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--display-default {\n    font-family: var(--cre8-typography-display-default-font-family);\n    font-size: var(--cre8-typography-display-default-font-size);\n    font-weight: var(--cre8-typography-display-default-font-weight);\n    line-height: var(--cre8-typography-display-default-line-height);\n    text-decoration: var(--cre8-typography-display-default-text-decoration);\n    text-transform: var(--cre8-typography-display-default-text-transform);\n  }\n}\n\n/**\n * Heading with theme label-large preset applied\n */\n.cre8-c-heading--label-large {\n  font-family: var(--cre8-typography-label-large-font-family);\n  font-size: var(--cre8-typography-label-large-font-size);\n  font-weight: var(--cre8-typography-label-large-font-weight);\n  line-height: var(--cre8-typography-label-large-line-height);\n  text-decoration: var(--cre8-typography-label-large-text-decoration);\n  text-transform: var(--cre8-typography-label-large-text-transform);\n}\n\n/**\n * Heading with theme label-default preset applied\n */\n.cre8-c-heading--label-default {\n  font-family: var(--cre8-typography-label-default-font-family);\n  font-size: var(--cre8-typography-label-default-font-size);\n  font-weight: var(--cre8-typography-label-default-font-weight);\n  line-height: var(--cre8-typography-label-default-line-height);\n  text-decoration: var(--cre8-typography-label-default-text-decoration);\n  text-transform: var(--cre8-typography-label-default-text-transform);\n}\n\n/**\n * Heading with theme label-small preset applied\n */\n.cre8-c-heading--label-small {\n  font-family: var(--cre8-typography-label-small-font-family);\n  font-size: var(--cre8-typography-label-small-font-size);\n  font-weight: var(--cre8-typography-label-small-font-weight);\n  line-height: var(--cre8-typography-label-small-line-height);\n  text-decoration: var(--cre8-typography-label-small-text-decoration);\n  text-transform: var(--cre8-typography-label-small-text-transform);\n}\n\n/**\n * Heading with theme meta-default preset applied\n */\n.cre8-c-heading--meta-large {\n  font-family: var(--cre8-typography-meta-large-font-family);\n  font-size: var(--cre8-typography-meta-large-font-size);\n  font-weight: var(--cre8-typography-meta-large-font-weight);\n  line-height: var(--cre8-typography-meta-large-line-height);\n  text-decoration: var(--cre8-typography-meta-large-text-decoration);\n  text-transform: var(--cre8-typography-meta-large-text-transform);\n  text-transform: uppercase;\n}\n\n/**\n * Heading with theme meta-default preset applied\n */\n.cre8-c-heading--meta-default {\n  font-family: var(--cre8-typography-meta-default-font-family);\n  font-size: var(--cre8-typography-meta-default-font-size);\n  font-weight: var(--cre8-typography-meta-default-font-weight);\n  line-height: var(--cre8-typography-meta-default-line-height);\n  text-decoration: var(--cre8-typography-meta-default-text-decoration);\n  text-transform: var(--cre8-typography-meta-default-text-transform);\n  text-transform: uppercase;\n}\n\n/**\n * Heading with theme meta-small preset applied\n */\n.cre8-c-heading--meta-small {\n  font-family: var(--cre8-typography-meta-small-font-family);\n  font-size: var(--cre8-typography-meta-small-font-size);\n  font-weight: var(--cre8-typography-meta-small-font-weight);\n  line-height: var(--cre8-typography-meta-small-line-height);\n  text-decoration: var(--cre8-typography-meta-small-text-decoration);\n  text-transform: var(--cre8-typography-meta-small-text-transform);\n  text-transform: uppercase;\n}\n\n/**\n * Heading with brand color applied\n */\n.cre8-c-heading--brand-color {\n  color: var(--cre8-color-content-brand-strong);\n}\n.cre8-c-heading--brand-color.cre8-c-heading--inverted {\n  color: var(--cre8-color-content-brand-knockout);\n}\n\n.cre8-c-heading--inverted {\n  color: var(--cre8-color-content-knockout);\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"heading.styles.js","sourceRoot":"","sources":["../../../components/heading/heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+4BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n  color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n  margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n  margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n  margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: size(8) !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n  padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n  padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n  padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n  display: inline;\n  text-align: left;\n}\n\n/**\n * DefaultHeading component styling/Heading title-large\n */\n.cre8-c-heading,\n.cre8-c-heading--title-large {\n  font-family: var(--cre8-typography-title-large-mobile-font-family);\n  font-size: var(--cre8-typography-title-large-mobile-font-size);\n  font-weight: var(--cre8-typography-title-large-mobile-font-weight);\n  line-height: var(--cre8-typography-title-large-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-large-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading,\n  .cre8-c-heading--title-large {\n    font-family: var(--cre8-typography-title-large-font-family);\n    font-size: var(--cre8-typography-title-large-font-size);\n    font-weight: var(--cre8-typography-title-large-font-weight);\n    line-height: var(--cre8-typography-title-large-line-height);\n    text-decoration: var(--cre8-typography-title-large-text-decoration);\n    text-transform: var(--cre8-typography-title-large-text-transform);\n  }\n}\n.cre8-c-heading,\n.cre8-c-heading--title-large {\n  margin: 0;\n  color: var(--cre8-color-content-default);\n}\n\n/**\n * Heading with theme headline-large preset applied\n */\n.cre8-c-heading--headline-large {\n  font-family: var(--cre8-typography-headline-large-mobile-font-family);\n  font-size: var(--cre8-typography-headline-large-mobile-font-size);\n  font-weight: var(--cre8-typography-headline-large-mobile-font-weight);\n  line-height: var(--cre8-typography-headline-large-mobile-line-height);\n  text-decoration: var(--cre8-typography-headline-large-mobile-text-decoration);\n  text-transform: var(--cre8-typography-headline-large-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--headline-large {\n    font-family: var(--cre8-typography-headline-large-font-family);\n    font-size: var(--cre8-typography-headline-large-font-size);\n    font-weight: var(--cre8-typography-headline-large-font-weight);\n    line-height: var(--cre8-typography-headline-large-line-height);\n    text-decoration: var(--cre8-typography-headline-large-text-decoration);\n    text-transform: var(--cre8-typography-headline-large-text-transform);\n  }\n}\n\n/**\n * Heading with theme headline-default preset applied\n */\n.cre8-c-heading--headline-default {\n  font-family: var(--cre8-typography-headline-default-mobile-font-family);\n  font-size: var(--cre8-typography-headline-default-mobile-font-size);\n  font-weight: var(--cre8-typography-headline-default-mobile-font-weight);\n  line-height: var(--cre8-typography-headline-default-mobile-line-height);\n  text-decoration: var(--cre8-typography-headline-default-mobile-text-decoration);\n  text-transform: var(--cre8-typography-headline-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--headline-default {\n    font-family: var(--cre8-typography-headline-default-font-family);\n    font-size: var(--cre8-typography-headline-default-font-size);\n    font-weight: var(--cre8-typography-headline-default-font-weight);\n    line-height: var(--cre8-typography-headline-default-line-height);\n    text-decoration: var(--cre8-typography-headline-default-text-decoration);\n    text-transform: var(--cre8-typography-headline-default-text-transform);\n  }\n}\n\n/**\n * Heading with theme headline-small preset applied\n */\n.cre8-c-heading--headline-small {\n  font-family: var(--cre8-typography-headline-small-mobile-font-family);\n  font-size: var(--cre8-typography-headline-small-mobile-font-size);\n  font-weight: var(--cre8-typography-headline-small-mobile-font-weight);\n  line-height: var(--cre8-typography-headline-small-mobile-line-height);\n  text-decoration: var(--cre8-typography-headline-small-mobile-text-decoration);\n  text-transform: var(--cre8-typography-headline-small-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--headline-small {\n    font-family: var(--cre8-typography-headline-small-font-family);\n    font-size: var(--cre8-typography-headline-small-font-size);\n    font-weight: var(--cre8-typography-headline-small-font-weight);\n    line-height: var(--cre8-typography-headline-small-line-height);\n    text-decoration: var(--cre8-typography-headline-small-text-decoration);\n    text-transform: var(--cre8-typography-headline-small-text-transform);\n  }\n}\n\n/**\n * Heading with theme title-xlarge preset applied\n */\n.cre8-c-heading--title-xlarge {\n  font-family: var(--cre8-typography-title-xlarge-mobile-font-family);\n  font-size: var(--cre8-typography-title-xlarge-mobile-font-size);\n  font-weight: var(--cre8-typography-title-xlarge-mobile-font-weight);\n  line-height: var(--cre8-typography-title-xlarge-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-xlarge-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-xlarge-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--title-xlarge {\n    font-family: var(--cre8-typography-title-xlarge-font-family);\n    font-size: var(--cre8-typography-title-xlarge-font-size);\n    font-weight: var(--cre8-typography-title-xlarge-font-weight);\n    line-height: var(--cre8-typography-title-xlarge-line-height);\n    text-decoration: var(--cre8-typography-title-xlarge-text-decoration);\n    text-transform: var(--cre8-typography-title-xlarge-text-transform);\n  }\n}\n\n/**\n * Heading with theme title-large preset applied\n */\n.cre8-c-heading--title-large {\n  font-family: var(--cre8-typography-title-large-mobile-font-family);\n  font-size: var(--cre8-typography-title-large-mobile-font-size);\n  font-weight: var(--cre8-typography-title-large-mobile-font-weight);\n  line-height: var(--cre8-typography-title-large-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-large-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--title-large {\n    font-family: var(--cre8-typography-title-large-font-family);\n    font-size: var(--cre8-typography-title-large-font-size);\n    font-weight: var(--cre8-typography-title-large-font-weight);\n    line-height: var(--cre8-typography-title-large-line-height);\n    text-decoration: var(--cre8-typography-title-large-text-decoration);\n    text-transform: var(--cre8-typography-title-large-text-transform);\n  }\n}\n\n/**\n * Heading with theme title-default preset applied\n */\n.cre8-c-heading--title-default {\n  font-family: var(--cre8-typography-title-default-mobile-font-family);\n  font-size: var(--cre8-typography-title-default-mobile-font-size);\n  font-weight: var(--cre8-typography-title-default-mobile-font-weight);\n  line-height: var(--cre8-typography-title-default-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--title-default {\n    font-family: var(--cre8-typography-title-default-font-family);\n    font-size: var(--cre8-typography-title-default-font-size);\n    font-weight: var(--cre8-typography-title-default-font-weight);\n    line-height: var(--cre8-typography-title-default-line-height);\n    text-decoration: var(--cre8-typography-title-default-text-decoration);\n    text-transform: var(--cre8-typography-title-default-text-transform);\n  }\n}\n\n/**\n * Heading with theme title-small preset applied\n */\n.cre8-c-heading--title-small {\n  font-family: var(--cre8-typography-title-small-mobile-font-family);\n  font-size: var(--cre8-typography-title-small-mobile-font-size);\n  font-weight: var(--cre8-typography-title-small-mobile-font-weight);\n  line-height: var(--cre8-typography-title-small-mobile-line-height);\n  text-decoration: var(--cre8-typography-title-small-mobile-text-decoration);\n  text-transform: var(--cre8-typography-title-small-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--title-small {\n    font-family: var(--cre8-typography-title-small-font-family);\n    font-size: var(--cre8-typography-title-small-font-size);\n    font-weight: var(--cre8-typography-title-small-font-weight);\n    line-height: var(--cre8-typography-title-small-line-height);\n    text-decoration: var(--cre8-typography-title-small-text-decoration);\n    text-transform: var(--cre8-typography-title-small-text-transform);\n  }\n}\n\n/**\n * Heading with theme display-small preset applied\n */\n.cre8-c-heading--display-small {\n  font-family: var(--cre8-typography-display-small-mobile-font-family);\n  font-size: var(--cre8-typography-display-small-mobile-font-size);\n  font-weight: var(--cre8-typography-display-small-mobile-font-weight);\n  line-height: var(--cre8-typography-display-small-mobile-line-height);\n  text-decoration: var(--cre8-typography-display-small-mobile-text-decoration);\n  text-transform: var(--cre8-typography-display-small-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--display-small {\n    font-family: var(--cre8-typography-display-small-font-family);\n    font-size: var(--cre8-typography-display-small-font-size);\n    font-weight: var(--cre8-typography-display-small-font-weight);\n    line-height: var(--cre8-typography-display-small-line-height);\n    text-decoration: var(--cre8-typography-display-small-text-decoration);\n    text-transform: var(--cre8-typography-display-small-text-transform);\n  }\n}\n\n/**\n * Heading with theme display-default preset applied\n */\n.cre8-c-heading--display-default {\n  font-family: var(--cre8-typography-display-default-mobile-font-family);\n  font-size: var(--cre8-typography-display-default-mobile-font-size);\n  font-weight: var(--cre8-typography-display-default-mobile-font-weight);\n  line-height: var(--cre8-typography-display-default-mobile-line-height);\n  text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);\n  text-transform: var(--cre8-typography-display-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-heading--display-default {\n    font-family: var(--cre8-typography-display-default-font-family);\n    font-size: var(--cre8-typography-display-default-font-size);\n    font-weight: var(--cre8-typography-display-default-font-weight);\n    line-height: var(--cre8-typography-display-default-line-height);\n    text-decoration: var(--cre8-typography-display-default-text-decoration);\n    text-transform: var(--cre8-typography-display-default-text-transform);\n  }\n}\n\n/**\n * Heading with theme label-large preset applied\n */\n.cre8-c-heading--label-large {\n  font-family: var(--cre8-typography-label-large-font-family);\n  font-size: var(--cre8-typography-label-large-font-size);\n  font-weight: var(--cre8-typography-label-large-font-weight);\n  line-height: var(--cre8-typography-label-large-line-height);\n  text-decoration: var(--cre8-typography-label-large-text-decoration);\n  text-transform: var(--cre8-typography-label-large-text-transform);\n}\n\n/**\n * Heading with theme label-default preset applied\n */\n.cre8-c-heading--label-default {\n  font-family: var(--cre8-typography-label-default-font-family);\n  font-size: var(--cre8-typography-label-default-font-size);\n  font-weight: var(--cre8-typography-label-default-font-weight);\n  line-height: var(--cre8-typography-label-default-line-height);\n  text-decoration: var(--cre8-typography-label-default-text-decoration);\n  text-transform: var(--cre8-typography-label-default-text-transform);\n}\n\n/**\n * Heading with theme label-small preset applied\n */\n.cre8-c-heading--label-small {\n  font-family: var(--cre8-typography-label-small-font-family);\n  font-size: var(--cre8-typography-label-small-font-size);\n  font-weight: var(--cre8-typography-label-small-font-weight);\n  line-height: var(--cre8-typography-label-small-line-height);\n  text-decoration: var(--cre8-typography-label-small-text-decoration);\n  text-transform: var(--cre8-typography-label-small-text-transform);\n}\n\n/**\n * Heading with theme meta-default preset applied\n */\n.cre8-c-heading--meta-large {\n  font-family: var(--cre8-typography-meta-large-font-family);\n  font-size: var(--cre8-typography-meta-large-font-size);\n  font-weight: var(--cre8-typography-meta-large-font-weight);\n  line-height: var(--cre8-typography-meta-large-line-height);\n  text-decoration: var(--cre8-typography-meta-large-text-decoration);\n  text-transform: var(--cre8-typography-meta-large-text-transform);\n  text-transform: uppercase;\n}\n\n/**\n * Heading with theme meta-default preset applied\n */\n.cre8-c-heading--meta-default {\n  font-family: var(--cre8-typography-meta-default-font-family);\n  font-size: var(--cre8-typography-meta-default-font-size);\n  font-weight: var(--cre8-typography-meta-default-font-weight);\n  line-height: var(--cre8-typography-meta-default-line-height);\n  text-decoration: var(--cre8-typography-meta-default-text-decoration);\n  text-transform: var(--cre8-typography-meta-default-text-transform);\n  text-transform: uppercase;\n}\n\n/**\n * Heading with theme meta-small preset applied\n */\n.cre8-c-heading--meta-small {\n  font-family: var(--cre8-typography-meta-small-font-family);\n  font-size: var(--cre8-typography-meta-small-font-size);\n  font-weight: var(--cre8-typography-meta-small-font-weight);\n  line-height: var(--cre8-typography-meta-small-line-height);\n  text-decoration: var(--cre8-typography-meta-small-text-decoration);\n  text-transform: var(--cre8-typography-meta-small-text-transform);\n  text-transform: uppercase;\n}\n\n/**\n * Heading with brand color applied\n */\n.cre8-c-heading--brand-color {\n  color: var(--cre8-color-content-brand-strong);\n}\n.cre8-c-heading--brand-color.cre8-c-heading--inverted {\n  color: var(--cre8-color-content-brand-knockout);\n}\n\n.cre8-c-heading--inverted {\n  color: var(--cre8-color-content-knockout);\n}`;\nexport default styles;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6tBhB,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) Block with an image and overlay on medium and large screens\n */\n.cre8-c-hero {\n  position: relative;\n  margin-bottom: 2rem;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero {\n    height: 40vh;\n  }\n}\n\n/**\n * Hero image\n */\n.cre8-c-hero__image {\n  width: 100%;\n  height: 100%;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero__image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    object-fit: cover;\n  }\n}\n\n/**\n * Hero body\n * 1) Content is placed in the bottom left part of the image on medium/large screens by default\n */\n.cre8-c-hero__body {\n  display: flex;\n  flex-direction: column;\n  padding-top: 1rem;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero__body {\n    position: absolute;\n    align-items: flex-start;\n    justify-content: flex-end;\n    width: 100%;\n    height: 100%;\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align top left variant\n   * 1) Place body content in the top left part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-left .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: flex-start;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align left variant\n   * 1) Place body content along left part of the image and vertically centered on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--left .cre8-c-hero__body {\n    justify-content: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align top center variant\n   * 1) Place body content in the top center part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-center .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align center variant\n   * 1) Place body content horizontally and vertically centered overlaying the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--center .cre8-c-hero__body {\n    justify-content: center;\n    align-items: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align bottom center variant\n   * 1) Place body content in the bottom center part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--bottom-center .cre8-c-hero__body {\n    justify-content: flex-end;\n    align-items: center;\n  }\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-right .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: flex-end;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align right variant\n   * 1) Place body content along right part of the image and vertically centered on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--right .cre8-c-hero__body {\n    justify-content: center;\n    align-items: flex-end;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align bottom right variant\n   * 1) Place body content in the bottom right part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--bottom-right .cre8-c-hero__body {\n    justify-content: flex-end;\n    align-items: flex-end;\n  }\n}\n\n.cre8-c-hero--has-overlay::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 1;\n}\n.cre8-c-hero--has-overlay .cre8-c-hero__body {\n  z-index: 2;\n  --cre8-color-content-default: #ffffff;\n  --cre8-color-content-subtle: rgba(255, 255, 255, 0.85);\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAquBhB,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) Block with an image and overlay on medium and large screens\n */\n.cre8-c-hero {\n  position: relative;\n  margin-bottom: 2rem;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero {\n    height: 40vh;\n  }\n}\n\n/**\n * Hero image\n */\n.cre8-c-hero__image {\n  width: 100%;\n  height: 100%;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero__image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    object-fit: cover;\n  }\n}\n\n/**\n * Hero body\n * 1) Content is placed in the bottom left part of the image on medium/large screens by default\n */\n.cre8-c-hero__body {\n  display: flex;\n  flex-direction: column;\n  padding-top: 1rem;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero__body {\n    position: absolute;\n    align-items: flex-start;\n    justify-content: flex-end;\n    width: 100%;\n    height: 100%;\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align top left variant\n   * 1) Place body content in the top left part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-left .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: flex-start;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align left variant\n   * 1) Place body content along left part of the image and vertically centered on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--left .cre8-c-hero__body {\n    justify-content: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align top center variant\n   * 1) Place body content in the top center part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-center .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align center variant\n   * 1) Place body content horizontally and vertically centered overlaying the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--center .cre8-c-hero__body {\n    justify-content: center;\n    align-items: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align bottom center variant\n   * 1) Place body content in the bottom center part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--bottom-center .cre8-c-hero__body {\n    justify-content: flex-end;\n    align-items: center;\n  }\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-right .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: flex-end;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align right variant\n   * 1) Place body content along right part of the image and vertically centered on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--right .cre8-c-hero__body {\n    justify-content: center;\n    align-items: flex-end;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align bottom right variant\n   * 1) Place body content in the bottom right part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--bottom-right .cre8-c-hero__body {\n    justify-content: flex-end;\n    align-items: flex-end;\n  }\n}\n\n.cre8-c-hero--has-overlay::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 1;\n}\n.cre8-c-hero--has-overlay .cre8-c-hero__body {\n  z-index: 2;\n  --cre8-color-content-default: #ffffff;\n  --cre8-color-content-subtle: rgba(255, 255, 255, 0.85);\n}`;\nexport default styles;\n"]}

package/lib/components/icon/icon.d.ts

@@ -9,7 +9,7 @@ import { Cre8Element } from '../cre8-element';
  * **'svg-legacy'** will be **deprecated** in Web Components v0.5.0
  *
  * - [List of new figma @tmorrow/cre8-wc/icons](https:/www.figma.com/file/j1a0rBkoH65XiGKfq7ppWa/Iconography?type=design&node-id=2037-5773&mode=design&t=6ZzC6KH3Gkxf3fj5-4)
- * - The new `svg` from the svg package: https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/.
+ * - The new `svg` from the svg package: https:/docs.cre8.dev/svgs/.
  *
  * ##Usability Considerations
  * - If the icon is decorative: set `aria-hidden` to true.
@@ -19,17 +19,17 @@ import { Cre8Element } from '../cre8-element';
  * For example, if the icon is a close button, setting `aria-label="Close"`will give
  * the SVG an aria-label to make it sufficiently accessible.
  *
- * [More information on Accessibility with svgs](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/getting-started-accessibility--page)
+ * [More information on Accessibility with svgs](https:/docs.cre8.dev/svgs/?path=/story/getting-started-accessibility--page)
  *
  * ##How to use
  * Cre8 Web Components (cre8-wc) includes the `cre8_dev/svgs` package.
  * If you need to install a newer version than what's included, please see
- * the [installation instructions for svgs](https:/git.express-scripts.com/ExpressScripts/svgs#installation).
+ * the [installation instructions for svgs](https:/github.com/tmorrowdev/svgs#installation).
  * - Import the component (this is the icon container): `import '@cre8_dev/svgs';`
  * - Import an svg as a string: `import svgInfo from '@tmorrow/cre8-wc/icons/Info.svg?raw';`
  *
  * Your import paths may be different depending on your project's build configuration.
- * Please see [Importing Icons](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/icon-sets-importing-@tmorrow/cre8-wc/icons--page)
+ * Please see [Importing Icons](https:/docs.cre8.dev/svgs/?path=/story/icon-sets-importing-@tmorrow/cre8-wc/icons--page)
  * of the `cre8_dev/svgs` documentation for more information.
  */
 export declare class Cre8Icon extends Cre8Element {

package/lib/components/icon/icon.js

@@ -50,7 +50,7 @@ import svgVaccine from '@tmorrow/cre8-wc/icons/Vaccinations.svg?raw';
 import svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';
 import svgCaretDoubleRight from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';
 import svgErrorAlt from '@tmorrow/cre8-wc/icons/error-alt.svg?raw';
-import svgEsi from '@tmorrow/cre8-wc/icons/express-scripts.svg?raw';
+import svgPharmacy from '@tmorrow/cre8-wc/icons/pharmacy.svg?raw';
 import svgInsta from '@tmorrow/cre8-wc/icons/instagram.svg?raw';
 import svgLinkedin from '@tmorrow/cre8-wc/icons/linkedin.svg?raw';
 import svgOpen from '@tmorrow/cre8-wc/icons/open.svg?raw';
@@ -76,7 +76,7 @@ import iconSprite from '@tmorrow/cre8-wc/icons/cre8-icons.svg?raw';
  * **'svg-legacy'** will be **deprecated** in Web Components v0.5.0
  *
  * - [List of new figma @tmorrow/cre8-wc/icons](https:/www.figma.com/file/j1a0rBkoH65XiGKfq7ppWa/Iconography?type=design&node-id=2037-5773&mode=design&t=6ZzC6KH3Gkxf3fj5-4)
- * - The new `svg` from the svg package: https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/.
+ * - The new `svg` from the svg package: https:/docs.cre8.dev/svgs/.
  *
  * ##Usability Considerations
  * - If the icon is decorative: set `aria-hidden` to true.
@@ -86,17 +86,17 @@ import iconSprite from '@tmorrow/cre8-wc/icons/cre8-icons.svg?raw';
  * For example, if the icon is a close button, setting `aria-label="Close"`will give
  * the SVG an aria-label to make it sufficiently accessible.
  *
- * [More information on Accessibility with svgs](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/getting-started-accessibility--page)
+ * [More information on Accessibility with svgs](https:/docs.cre8.dev/svgs/?path=/story/getting-started-accessibility--page)
  *
  * ##How to use
  * Cre8 Web Components (cre8-wc) includes the `cre8_dev/svgs` package.
  * If you need to install a newer version than what's included, please see
- * the [installation instructions for svgs](https:/git.express-scripts.com/ExpressScripts/svgs#installation).
+ * the [installation instructions for svgs](https:/github.com/tmorrowdev/svgs#installation).
  * - Import the component (this is the icon container): `import '@cre8_dev/svgs';`
  * - Import an svg as a string: `import svgInfo from '@tmorrow/cre8-wc/icons/Info.svg?raw';`
  *
  * Your import paths may be different depending on your project's build configuration.
- * Please see [Importing Icons](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/icon-sets-importing-@tmorrow/cre8-wc/icons--page)
+ * Please see [Importing Icons](https:/docs.cre8.dev/svgs/?path=/story/icon-sets-importing-@tmorrow/cre8-wc/icons--page)
  * of the `cre8_dev/svgs` documentation for more information.
  */
 export class Cre8Icon extends Cre8Element {
@@ -149,7 +149,7 @@ export class Cre8Icon extends Cre8Element {
         iconMap['error-alt'] = html `<svg src='${svgErrorAlt}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
         iconMap['error-round'] = html `<svg src='${svgError}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
         iconMap['error'] = html `<svg src='${svgError}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
-        iconMap['express-scripts'] = html `<svg src='${svgEsi}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
+        iconMap['pharmacy'] = html `<svg src='${svgPharmacy}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
         iconMap['external-file'] = html `<svg src='${svgExternal}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
         iconMap['find-drug'] = html `<svg src='${svgMedication}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
         iconMap['globe'] = html `<svg src='${svgGlobe}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;

package/lib/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../components/icon/icon.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-len */\n/* eslint-disable dot-notation */\n/* eslint-disable max-statements */\nimport { html, TemplateResult, } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport svgAdd from '@tmorrow/cre8-wc/icons/add.svg?raw';\nimport svgArrowLeft from '@tmorrow/cre8-wc/icons/Arrow_-_Left.svg?raw';\nimport svgChat from '@tmorrow/cre8-wc/icons/Chat_Default.svg?raw';\nimport svgCalendar from '@tmorrow/cre8-wc/icons/calendar.svg?raw';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down_Filled.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport svgDownload from '@tmorrow/cre8-wc/icons/Download.svg?raw';\nimport svgEdit from '@tmorrow/cre8-wc/icons/Edit.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis_Filled.svg?raw';\nimport svgMessageFilled from '@tmorrow/cre8-wc/icons/Message_Unread_Filled.svg?raw';\nimport svgMessage from '@tmorrow/cre8-wc/icons/Message_Unread.svg?raw';\nimport svgError from '@tmorrow/cre8-wc/icons/Error.svg?raw';\nimport svgExternal from '@tmorrow/cre8-wc/icons/External_Link.svg?raw';\nimport svgMedication from '@tmorrow/cre8-wc/icons/Medication.svg?raw';\nimport svgGlobe from '@tmorrow/cre8-wc/icons/Globe.svg?raw';\nimport svgHelp from '@tmorrow/cre8-wc/icons/Help.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport svgLightbulb from '@tmorrow/cre8-wc/icons/Lightbulb.svg?raw';\nimport svgLocation from '@tmorrow/cre8-wc/icons/Location.svg?raw';\nimport svgMenu from '@tmorrow/cre8-wc/icons/Menu.svg?raw';\nimport svgMinus from '@tmorrow/cre8-wc/icons/Minus.svg?raw';\nimport svgAccountFilled from '@tmorrow/cre8-wc/icons/Account_Filled.svg?raw';\nimport svgNotification from '@tmorrow/cre8-wc/icons/Notification.svg?raw';\nimport svgRefill from '@tmorrow/cre8-wc/icons/Refill.svg?raw';\nimport svgAccount from '@tmorrow/cre8-wc/icons/Account.svg?raw';\nimport svgPlayFilled from '@tmorrow/cre8-wc/icons/Play_Arrow.svg?raw';\nimport svgPlayCircle from '@tmorrow/cre8-wc/icons/Play_Circle.svg?raw';\nimport svgSpinner from '@tmorrow/cre8-wc/icons/Spinner_75.svg?raw';\nimport svgUndo from '@tmorrow/cre8-wc/icons/Undo.svg?raw';\nimport svgSearch from '@tmorrow/cre8-wc/icons/Search.svg?raw';\nimport svgCart from '@tmorrow/cre8-wc/icons/Cart.svg?raw';\nimport svgRectangle from '@tmorrow/cre8-wc/icons/Rectangle.svg?raw';\nimport svgVaccine from '@tmorrow/cre8-wc/icons/Vaccinations.svg?raw';\nimport svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCaretDoubleRight from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';\nimport svgErrorAlt from '@tmorrow/cre8-wc/icons/error-alt.svg?raw';\nimport svgEsi from '@tmorrow/cre8-wc/icons/express-scripts.svg?raw';\nimport svgInsta from '@tmorrow/cre8-wc/icons/instagram.svg?raw';\nimport svgLinkedin from '@tmorrow/cre8-wc/icons/linkedin.svg?raw';\nimport svgOpen from '@tmorrow/cre8-wc/icons/open.svg?raw';\nimport svgPause from '@tmorrow/cre8-wc/icons/pause.svg?raw';\nimport svgPersonBubble from '@tmorrow/cre8-wc/icons/person-bubble.svg?raw';\nimport svgPinterest from '@tmorrow/cre8-wc/icons/pinterest.svg?raw';\nimport svgRss from '@tmorrow/cre8-wc/icons/rss-feed.svg?raw';\nimport svgRx from '@tmorrow/cre8-wc/icons/rx.svg?raw';\nimport svgSwap from '@tmorrow/cre8-wc/icons/swap.svg?raw';\nimport svgThumbsUp from '@tmorrow/cre8-wc/icons/thumb-up.svg?raw';\nimport svgTrendFlat from '@tmorrow/cre8-wc/icons/trending-flat.svg?raw';\nimport svgTrendUp from '@tmorrow/cre8-wc/icons/trending-up.svg?raw';\nimport svgTwitter from '@tmorrow/cre8-wc/icons/twitter.svg?raw';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './icon.styles.js';\nimport iconSprite from '@tmorrow/cre8-wc/icons/cre8-icons.svg?raw';\n\n/**\n *\n * \n * <svg> is a web component, which can be used with any frontend framework and use any svg.\n * It takes raw svgs as props and renders them.\n *\n * **'svg-legacy'** will be **deprecated** in Web Components v0.5.0\n *\n * - [List of new figma @tmorrow/cre8-wc/icons](https:/www.figma.com/file/j1a0rBkoH65XiGKfq7ppWa/Iconography?type=design&node-id=2037-5773&mode=design&t=6ZzC6KH3Gkxf3fj5-4)\n * - The new `svg` from the svg package: https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/.\n *\n * ##Usability Considerations\n * - If the icon is decorative: set `aria-hidden` to true.\n * - If the icon is interactive (not decorative): set `aria-hidden` to false and add the `aria-label`\n * - If the icon is key to functionality from a screen reader perspective, it is required to add `aria-label`\n * which will describe the icon.\n * For example, if the icon is a close button, setting `aria-label=\"Close\"`will give\n * the SVG an aria-label to make it sufficiently accessible.\n *\n * [More information on Accessibility with svgs](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/getting-started-accessibility--page)\n *\n * ##How to use\n * Cre8 Web Components (cre8-wc) includes the `cre8_dev/svgs` package.\n * If you need to install a newer version than what's included, please see\n * the [installation instructions for svgs](https:/git.express-scripts.com/ExpressScripts/svgs#installation).\n * - Import the component (this is the icon container): `import '@cre8_dev/svgs';`\n * - Import an svg as a string: `import svgInfo from '@tmorrow/cre8-wc/icons/Info.svg?raw';`\n *\n * Your import paths may be different depending on your project's build configuration.\n * Please see [Importing Icons](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/icon-sets-importing-@tmorrow/cre8-wc/icons--page)\n * of the `cre8_dev/svgs` documentation for more information.\n */\n\nexport class Cre8Icon extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Focusable\n     *\n     * @required\n     */\n    @property({ type: Boolean, reflect: true })\n    focusable?: boolean;\n\n    /**\n     * Icon name (this method of passing in svgs is to be deprecated)\n     *\n     * @required\n     */\n    @property()\n    name: string;\n\n    /**\n     * Raw SVG markup to render. Preferred over `name`/sprite-path icons.\n     */\n    @property({ reflect: true })\n    svg?: string\n    /**\n     * Icon path\n     * 1) This points to the file where the icon sprite lives\n     * 2) This method of pathing will soon be depricated\n     *\n     */\n    @property()\n    iconUrl?: string = iconSprite;\n\n    /**\n     * Icon Title, this string is used for the aira-label of the svg\n     *\n     * @required\n     */\n    @property()\n    iconTitle?: string;\n\n    /**\n     * Get the path to the @tmorrow/cre8-wc/icons, either by overriding it on the window\n     * or by using the bundled icon path\n     */\n    getIconPath() {\n        if (window.Cre8_ICON_URL) {\n            return window.Cre8_ICON_URL;\n        }\n\n        const script = document.querySelector<HTMLScriptElement>('script[src$=\"icon\"]');\n        if (script) {\n            return `${script.src.replace(/^(.+)\\/.*$/, '$1')}/svgs/svgs.svg`;\n        }\n\n        return this.iconUrl;\n    }\n\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-icon-wrapper', {});\n\n        const iconMap: { [name: string]: TemplateResult<1> } = {};\n\n        iconMap['add'] = html`<svg src=${svgAdd} container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['arrow-back'] = html`<svg src='${svgArrowLeft}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['arrow-forward'] = html`<svg src='${svgArrowLeft}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['attention'] = html`<svg src='${svgChat}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['calendar'] = html`<svg src='${svgCalendar}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['calendar-datepicker'] = html`<svg src='${svgCalendar}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\" height=\"24\" width=\"24\"></svg>`;\n        iconMap['caret-down'] = html`<svg src='${svgCaretDown}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['caret-double-left'] = html`<svg src='${svgCaretDoubleRight}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['caret-double-right'] = html`<svg src='${svgCaretDoubleRight}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['check-circle'] = html`<svg src='${svgCheckCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['check'] = html`<svg src='${svgCheck}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['close'] = html`<svg src='${svgClose}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['delta-down'] = html`<svg src='${svgCaretDown}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['delta-up'] = html`<svg src='${svgCaretDown}' flip=\"vertical\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['download'] = html`<svg src='${svgDownload}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['edit'] = html`<svg src='${svgEdit}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['ellipsis'] = html`<svg src='${svgEllipsis}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['email'] = html`${svgMessageFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['envelope'] = html`<svg src='${svgMessage}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['error-alt'] = html`<svg src='${svgErrorAlt}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['error-round'] = html`<svg src='${svgError}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['error'] = html`<svg src='${svgError}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['express-scripts'] = html`<svg src='${svgEsi}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['external-file'] = html`<svg src='${svgExternal}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['find-drug'] = html`<svg src='${svgMedication}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['globe'] = html`<svg src='${svgGlobe}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['help'] = html`<svg src='${svgHelp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['info'] = html`<svg src='${svgInfoFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['instagram'] = html`<svg src='${svgInsta}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['keyboard-arrow-down'] = html`<svg src='${svgCaretUp}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['keyboard-arrow-left'] = html`<svg src='${svgCaretUp}' rotate=\"-90\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['keyboard-arrow-right'] = html`<svg src='${svgCaretUp}' rotate=\"90\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['keyboard-arrow-up'] = html`<svg src='${svgCaretUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['language'] = html`<svg src='${svgGlobe}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['light-bulb'] = html`<svg src='${svgLightbulb}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['linkedin'] = html`<svg src='${svgLinkedin}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['location-on'] = html`<svg src='${svgLocation}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['menu'] = html`<svg src='${svgMenu}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['minus'] = html`<svg src='${svgMinus}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['neutral'] = html`<svg src='${svgAccountFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['notifications'] = html`<svg src='${svgNotification}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['open'] = html`<svg src='${svgOpen}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['order-status'] = html`<svg src='${svgRefill}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['pause'] = html`<svg src='${svgPause}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['people'] = html`<svg src='${svgAccount}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['person-bubble'] = html`<svg src='${svgPersonBubble}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['person'] = html`<svg src='${svgAccountFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['pinterest'] = html`<svg src='${svgPinterest}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['play-arrow'] = html`<svg src='${svgPlayFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['play-circle-outline'] = html`<svg src='${svgPlayCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['progress-spinner'] = html`<svg src='${svgSpinner}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['replay'] = html`<svg src='${svgUndo}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['rss-feed'] = html`<svg src='${svgRss}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['rx'] = html`<svg src='${svgRx}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['search'] = html`<svg src='${svgSearch}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['shop'] = html`<svg src='${svgCart}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['spinner'] = html`<svg src='${svgSpinner}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['square'] = html`<svg src='${svgRectangle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['success'] = html`<svg src='${svgCheckCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['swap'] = html`<svg src='${svgSwap}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['thumb-up'] = html`<svg src='${svgThumbsUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['trending-flat'] = html`<svg src='${svgTrendFlat}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['trending-up'] = html`<svg src='${svgTrendUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['twitter'] = html`<svg src='${svgTwitter}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['vaccine'] = html`<svg src='${svgVaccine}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['warning'] = html`<svg src='${svgWarningFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n\n        const iconPath = this.getIconPath();\n\n        // if (iconMap[this.name] !== undefined) {\n        //     return iconMap[this.name];\n        // }\n        if (!this.name && !this.svg) {\n            console.warn('Cre8Icon: No icon name or svg provided. Please provide either a name or svg.');\n            return html``;\n        }\n\n        const wrapperRole = this.iconTitle ? 'img' : undefined;\n        return html`\n            ${this.svg ? html`<span class=\"${componentClassName}\" role=\"${ifDefined(wrapperRole)}\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\">${unsafeHTML(this.svg)}</span>` : html`\n        <span class=\"${componentClassName}\" role=\"${ifDefined(wrapperRole)}\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\">\n            <svg class=\"cre8-c-icon\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"${this.focusable ? 'true' : 'false'}\" aria-hidden=\"true\">\n                <use href=\"${iconPath}#${this.name}\"></use>\n            </svg>\n        </span>` }`;\n    }\n}\n\n\nif (customElements.get('cre8-icon') === undefined) {\n    customElements.define('cre8-icon', Cre8Icon);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-icon': Cre8Icon;\n    }\n    interface Window {\n        Cre8_ICON_URL?: string;\n    }\n}\n\nexport default Cre8Icon;\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../components/icon/icon.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-len */\n/* eslint-disable dot-notation */\n/* eslint-disable max-statements */\nimport { html, TemplateResult, } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport svgAdd from '@tmorrow/cre8-wc/icons/add.svg?raw';\nimport svgArrowLeft from '@tmorrow/cre8-wc/icons/Arrow_-_Left.svg?raw';\nimport svgChat from '@tmorrow/cre8-wc/icons/Chat_Default.svg?raw';\nimport svgCalendar from '@tmorrow/cre8-wc/icons/calendar.svg?raw';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down_Filled.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport svgDownload from '@tmorrow/cre8-wc/icons/Download.svg?raw';\nimport svgEdit from '@tmorrow/cre8-wc/icons/Edit.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis_Filled.svg?raw';\nimport svgMessageFilled from '@tmorrow/cre8-wc/icons/Message_Unread_Filled.svg?raw';\nimport svgMessage from '@tmorrow/cre8-wc/icons/Message_Unread.svg?raw';\nimport svgError from '@tmorrow/cre8-wc/icons/Error.svg?raw';\nimport svgExternal from '@tmorrow/cre8-wc/icons/External_Link.svg?raw';\nimport svgMedication from '@tmorrow/cre8-wc/icons/Medication.svg?raw';\nimport svgGlobe from '@tmorrow/cre8-wc/icons/Globe.svg?raw';\nimport svgHelp from '@tmorrow/cre8-wc/icons/Help.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport svgLightbulb from '@tmorrow/cre8-wc/icons/Lightbulb.svg?raw';\nimport svgLocation from '@tmorrow/cre8-wc/icons/Location.svg?raw';\nimport svgMenu from '@tmorrow/cre8-wc/icons/Menu.svg?raw';\nimport svgMinus from '@tmorrow/cre8-wc/icons/Minus.svg?raw';\nimport svgAccountFilled from '@tmorrow/cre8-wc/icons/Account_Filled.svg?raw';\nimport svgNotification from '@tmorrow/cre8-wc/icons/Notification.svg?raw';\nimport svgRefill from '@tmorrow/cre8-wc/icons/Refill.svg?raw';\nimport svgAccount from '@tmorrow/cre8-wc/icons/Account.svg?raw';\nimport svgPlayFilled from '@tmorrow/cre8-wc/icons/Play_Arrow.svg?raw';\nimport svgPlayCircle from '@tmorrow/cre8-wc/icons/Play_Circle.svg?raw';\nimport svgSpinner from '@tmorrow/cre8-wc/icons/Spinner_75.svg?raw';\nimport svgUndo from '@tmorrow/cre8-wc/icons/Undo.svg?raw';\nimport svgSearch from '@tmorrow/cre8-wc/icons/Search.svg?raw';\nimport svgCart from '@tmorrow/cre8-wc/icons/Cart.svg?raw';\nimport svgRectangle from '@tmorrow/cre8-wc/icons/Rectangle.svg?raw';\nimport svgVaccine from '@tmorrow/cre8-wc/icons/Vaccinations.svg?raw';\nimport svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCaretDoubleRight from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';\nimport svgErrorAlt from '@tmorrow/cre8-wc/icons/error-alt.svg?raw';\nimport svgPharmacy from '@tmorrow/cre8-wc/icons/pharmacy.svg?raw';\nimport svgInsta from '@tmorrow/cre8-wc/icons/instagram.svg?raw';\nimport svgLinkedin from '@tmorrow/cre8-wc/icons/linkedin.svg?raw';\nimport svgOpen from '@tmorrow/cre8-wc/icons/open.svg?raw';\nimport svgPause from '@tmorrow/cre8-wc/icons/pause.svg?raw';\nimport svgPersonBubble from '@tmorrow/cre8-wc/icons/person-bubble.svg?raw';\nimport svgPinterest from '@tmorrow/cre8-wc/icons/pinterest.svg?raw';\nimport svgRss from '@tmorrow/cre8-wc/icons/rss-feed.svg?raw';\nimport svgRx from '@tmorrow/cre8-wc/icons/rx.svg?raw';\nimport svgSwap from '@tmorrow/cre8-wc/icons/swap.svg?raw';\nimport svgThumbsUp from '@tmorrow/cre8-wc/icons/thumb-up.svg?raw';\nimport svgTrendFlat from '@tmorrow/cre8-wc/icons/trending-flat.svg?raw';\nimport svgTrendUp from '@tmorrow/cre8-wc/icons/trending-up.svg?raw';\nimport svgTwitter from '@tmorrow/cre8-wc/icons/twitter.svg?raw';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './icon.styles.js';\nimport iconSprite from '@tmorrow/cre8-wc/icons/cre8-icons.svg?raw';\n\n/**\n *\n * \n * <svg> is a web component, which can be used with any frontend framework and use any svg.\n * It takes raw svgs as props and renders them.\n *\n * **'svg-legacy'** will be **deprecated** in Web Components v0.5.0\n *\n * - [List of new figma @tmorrow/cre8-wc/icons](https:/www.figma.com/file/j1a0rBkoH65XiGKfq7ppWa/Iconography?type=design&node-id=2037-5773&mode=design&t=6ZzC6KH3Gkxf3fj5-4)\n * - The new `svg` from the svg package: https:/docs.cre8.dev/svgs/.\n *\n * ##Usability Considerations\n * - If the icon is decorative: set `aria-hidden` to true.\n * - If the icon is interactive (not decorative): set `aria-hidden` to false and add the `aria-label`\n * - If the icon is key to functionality from a screen reader perspective, it is required to add `aria-label`\n * which will describe the icon.\n * For example, if the icon is a close button, setting `aria-label=\"Close\"`will give\n * the SVG an aria-label to make it sufficiently accessible.\n *\n * [More information on Accessibility with svgs](https:/docs.cre8.dev/svgs/?path=/story/getting-started-accessibility--page)\n *\n * ##How to use\n * Cre8 Web Components (cre8-wc) includes the `cre8_dev/svgs` package.\n * If you need to install a newer version than what's included, please see\n * the [installation instructions for svgs](https:/github.com/tmorrowdev/svgs#installation).\n * - Import the component (this is the icon container): `import '@cre8_dev/svgs';`\n * - Import an svg as a string: `import svgInfo from '@tmorrow/cre8-wc/icons/Info.svg?raw';`\n *\n * Your import paths may be different depending on your project's build configuration.\n * Please see [Importing Icons](https:/docs.cre8.dev/svgs/?path=/story/icon-sets-importing-@tmorrow/cre8-wc/icons--page)\n * of the `cre8_dev/svgs` documentation for more information.\n */\n\nexport class Cre8Icon extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Focusable\n     *\n     * @required\n     */\n    @property({ type: Boolean, reflect: true })\n    focusable?: boolean;\n\n    /**\n     * Icon name (this method of passing in svgs is to be deprecated)\n     *\n     * @required\n     */\n    @property()\n    name: string;\n\n    /**\n     * Raw SVG markup to render. Preferred over `name`/sprite-path icons.\n     */\n    @property({ reflect: true })\n    svg?: string\n    /**\n     * Icon path\n     * 1) This points to the file where the icon sprite lives\n     * 2) This method of pathing will soon be depricated\n     *\n     */\n    @property()\n    iconUrl?: string = iconSprite;\n\n    /**\n     * Icon Title, this string is used for the aira-label of the svg\n     *\n     * @required\n     */\n    @property()\n    iconTitle?: string;\n\n    /**\n     * Get the path to the @tmorrow/cre8-wc/icons, either by overriding it on the window\n     * or by using the bundled icon path\n     */\n    getIconPath() {\n        if (window.Cre8_ICON_URL) {\n            return window.Cre8_ICON_URL;\n        }\n\n        const script = document.querySelector<HTMLScriptElement>('script[src$=\"icon\"]');\n        if (script) {\n            return `${script.src.replace(/^(.+)\\/.*$/, '$1')}/svgs/svgs.svg`;\n        }\n\n        return this.iconUrl;\n    }\n\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-icon-wrapper', {});\n\n        const iconMap: { [name: string]: TemplateResult<1> } = {};\n\n        iconMap['add'] = html`<svg src=${svgAdd} container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['arrow-back'] = html`<svg src='${svgArrowLeft}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['arrow-forward'] = html`<svg src='${svgArrowLeft}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['attention'] = html`<svg src='${svgChat}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['calendar'] = html`<svg src='${svgCalendar}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['calendar-datepicker'] = html`<svg src='${svgCalendar}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\" height=\"24\" width=\"24\"></svg>`;\n        iconMap['caret-down'] = html`<svg src='${svgCaretDown}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['caret-double-left'] = html`<svg src='${svgCaretDoubleRight}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['caret-double-right'] = html`<svg src='${svgCaretDoubleRight}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['check-circle'] = html`<svg src='${svgCheckCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['check'] = html`<svg src='${svgCheck}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['close'] = html`<svg src='${svgClose}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['delta-down'] = html`<svg src='${svgCaretDown}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['delta-up'] = html`<svg src='${svgCaretDown}' flip=\"vertical\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['download'] = html`<svg src='${svgDownload}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['edit'] = html`<svg src='${svgEdit}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['ellipsis'] = html`<svg src='${svgEllipsis}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['email'] = html`${svgMessageFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['envelope'] = html`<svg src='${svgMessage}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['error-alt'] = html`<svg src='${svgErrorAlt}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['error-round'] = html`<svg src='${svgError}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['error'] = html`<svg src='${svgError}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['pharmacy'] = html`<svg src='${svgPharmacy}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['external-file'] = html`<svg src='${svgExternal}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['find-drug'] = html`<svg src='${svgMedication}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['globe'] = html`<svg src='${svgGlobe}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['help'] = html`<svg src='${svgHelp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['info'] = html`<svg src='${svgInfoFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['instagram'] = html`<svg src='${svgInsta}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['keyboard-arrow-down'] = html`<svg src='${svgCaretUp}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['keyboard-arrow-left'] = html`<svg src='${svgCaretUp}' rotate=\"-90\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['keyboard-arrow-right'] = html`<svg src='${svgCaretUp}' rotate=\"90\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['keyboard-arrow-up'] = html`<svg src='${svgCaretUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['language'] = html`<svg src='${svgGlobe}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['light-bulb'] = html`<svg src='${svgLightbulb}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['linkedin'] = html`<svg src='${svgLinkedin}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['location-on'] = html`<svg src='${svgLocation}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['menu'] = html`<svg src='${svgMenu}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['minus'] = html`<svg src='${svgMinus}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['neutral'] = html`<svg src='${svgAccountFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['notifications'] = html`<svg src='${svgNotification}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['open'] = html`<svg src='${svgOpen}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['order-status'] = html`<svg src='${svgRefill}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['pause'] = html`<svg src='${svgPause}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['people'] = html`<svg src='${svgAccount}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['person-bubble'] = html`<svg src='${svgPersonBubble}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['person'] = html`<svg src='${svgAccountFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['pinterest'] = html`<svg src='${svgPinterest}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['play-arrow'] = html`<svg src='${svgPlayFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['play-circle-outline'] = html`<svg src='${svgPlayCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['progress-spinner'] = html`<svg src='${svgSpinner}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['replay'] = html`<svg src='${svgUndo}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['rss-feed'] = html`<svg src='${svgRss}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['rx'] = html`<svg src='${svgRx}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['search'] = html`<svg src='${svgSearch}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['shop'] = html`<svg src='${svgCart}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['spinner'] = html`<svg src='${svgSpinner}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['square'] = html`<svg src='${svgRectangle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['success'] = html`<svg src='${svgCheckCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['swap'] = html`<svg src='${svgSwap}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['thumb-up'] = html`<svg src='${svgThumbsUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['trending-flat'] = html`<svg src='${svgTrendFlat}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['trending-up'] = html`<svg src='${svgTrendUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['twitter'] = html`<svg src='${svgTwitter}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['vaccine'] = html`<svg src='${svgVaccine}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n        iconMap['warning'] = html`<svg src='${svgWarningFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n\n        const iconPath = this.getIconPath();\n\n        // if (iconMap[this.name] !== undefined) {\n        //     return iconMap[this.name];\n        // }\n        if (!this.name && !this.svg) {\n            console.warn('Cre8Icon: No icon name or svg provided. Please provide either a name or svg.');\n            return html``;\n        }\n\n        const wrapperRole = this.iconTitle ? 'img' : undefined;\n        return html`\n            ${this.svg ? html`<span class=\"${componentClassName}\" role=\"${ifDefined(wrapperRole)}\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\">${unsafeHTML(this.svg)}</span>` : html`\n        <span class=\"${componentClassName}\" role=\"${ifDefined(wrapperRole)}\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\">\n            <svg class=\"cre8-c-icon\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"${this.focusable ? 'true' : 'false'}\" aria-hidden=\"true\">\n                <use href=\"${iconPath}#${this.name}\"></use>\n            </svg>\n        </span>` }`;\n    }\n}\n\n\nif (customElements.get('cre8-icon') === undefined) {\n    customElements.define('cre8-icon', Cre8Icon);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-icon': Cre8Icon;\n    }\n    interface Window {\n        Cre8_ICON_URL?: string;\n    }\n}\n\nexport default Cre8Icon;\n"]}

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

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

package/lib/components/icon/icon.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 */
 }
 
 /**