@tmorrow/cre8-wc 1.2.4 → 1.2.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuyBhB,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* Accordion Item panel button\n* 1) Icon rotating on open was causing scrollbar to continuously appear/disappear\n*    during the animation, overflow-x: hidden; prevents this from happening\n*/\n:host {\n  display: block;\n}\n:host ::slotted(*) {\n  text-align: left;\n  width: 100%;\n}\n\n.cre8-c-accordion-item {\n  border-bottom: var(--cre8-accordion-item-border-bottom);\n  border-radius: var(--cre8-border-radius-none);\n  --cre8-u-icon-display: flex;\n  --cre8-u-icon-align-items: center;\n  --cre8-u-icon-justify-content: center;\n  padding: 1.5rem 0.5rem;\n}\n\n.cre8-c-accordion-item--small cre8-heading button {\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-accordion-item--small cre8-heading button {\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.cre8-c-accordion-item--large cre8-heading button {\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-accordion-item--large cre8-heading button {\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.cre8-c-accordion-item__body {\n  margin-right: 0rem;\n  margin-left: 0rem;\n  padding: 0rem;\n  overflow: hidden;\n  visibility: hidden;\n  transition: height var(--cre8-anim-fade-quick) var(--cre8-anim-ease), visibility var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__body {\n  visibility: visible;\n}\n\n.cre8-c-accordion-item__body-inner {\n  display: flex;\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  padding: 0.5rem 3rem 0rem 0.5rem;\n}\n\ncre8-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.5rem;\n  min-height: 1.5rem;\n  min-width: 1.5rem;\n  transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  width: 1.5rem;\n}\n.cre8-c-accordion-item.cre8-is-active cre8-icon {\n  transform: rotate(180deg);\n}\n\n.cre8-c-accordion-item__icon {\n  align-items: center;\n  background: var(--cre8-color-bg-brand-strong);\n  border-radius: var(--cre8-border-radius-round);\n  color: var(--cre8-color-content-knockout);\n  display: flex;\n  height: 2rem;\n  justify-content: center;\n  margin-left: 0.5rem;\n  margin-right: 0.125rem;\n  min-height: 2rem;\n  min-width: 2rem;\n  width: 2rem;\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon {\n  background: var(--cre8-color-button-secondary-bg);\n  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-button-secondary-border);\n  color: var(--cre8-color-button-secondary-content);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:hover {\n  border-color: var(--cre8-color-button-secondary-border-hover);\n  background-color: var(--cre8-color-button-secondary-bg-hover);\n  color: var(--cre8-color-button-secondary-content-hover);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus {\n  border-radius: var(--cre8-border-radius-default);\n  box-shadow: 0rem 0rem 0rem 0.125rem var(--cre8-color-border-active-outline);\n  outline: none;\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-secondary-border-active);\n  color: var(--cre8-color-button-secondary-content-active);\n  background-color: var(--cre8-color-button-secondary-bg-active);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__icon:focus .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-active);\n  background-color: var(--cre8-color-bg-transparent);\n}\n\n.cre8-c-accordion-item__button {\n  color: var(--cre8-color-content-default);\n  display: block;\n  appearance: none;\n  background-color: var(--cre8-color-bg-transparent);\n  border: var(--cre8-border-width-none);\n  cursor: pointer;\n  padding: 0.25rem 0.5rem;\n  overflow-x: hidden;\n  transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  width: 100%;\n}\n.cre8-c-accordion-item__button.cre8-brand-color {\n  color: var(--cre8-color-content-brand-strong);\n}\n.cre8-c-accordion-item__button.cre8-u-justify-content-start {\n  justify-content: flex-start;\n}\n.cre8-c-accordion-item__button.cre8-u-justify-content-start .cre8-c-accordion-item__icon-before {\n  margin-left: 0rem;\n}\n.cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-primary-border-hover);\n  background-color: var(--cre8-color-button-primary-bg-hover);\n  color: var(--cre8-color-button-primary-content-hover);\n}\n.cre8-c-accordion-item.cre8-is-active .cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-secondary-border-hover);\n  background-color: var(--cre8-color-button-secondary-bg-hover);\n  color: var(--cre8-color-button-secondary-content-hover);\n}\n.cre8-c-accordion-item__button:hover .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-hover);\n  background-color: var(--cre8-color-bg-transparent);\n}\n.cre8-c-accordion-item__button:focus {\n  border-radius: var(--cre8-border-radius-default);\n  box-shadow: 0rem 0rem 0rem 0.125rem var(--cre8-color-border-active-outline);\n  outline: none;\n}\n.cre8-c-accordion-item__button:focus .cre8-c-accordion-item__icon {\n  border-color: var(--cre8-color-button-primary-border-active);\n  color: var(--cre8-color-button-primary-content-active);\n  background-color: var(--cre8-color-button-primary-bg-active);\n}\n.cre8-c-accordion-item__button:focus .cre8-c-accordion-item__tertiary-icon {\n  border-color: var(--cre8-color-border-transparent);\n  color: var(--cre8-color-button-tertiary-content-active);\n  background-color: var(--cre8-color-bg-transparent);\n}\n\n.cre8-c-accordion-item--icon-before .cre8-c-accordion-item__body {\n  margin-left: 2.5rem;\n}\n\n.cre8-c-accordion-item__icon-before {\n  margin-right: 0.75rem;\n}\n.cre8-c-accordion-item__icon-before h4[slot=header] {\n  display: block;\n  pointer-events: none;\n}\n\n.cre8-c-accordion-item__button slot {\n  display: contents;\n  text-align: initial;\n}\n\n.cre8-c-accordion-item--icon-before-heading-text {\n  display: flex;\n  text-align: left;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  min-width: 100%;\n}\n\n.cre8-c-accordion-item--icon-after-heading-text {\n  display: flex;\n  text-align: left;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  min-width: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/alert/alert.d.ts

@@ -0,0 +1,60 @@
+import '../button/button';
+import '../link/link';
+import '../heading/heading';
+import '../text-passage/text-passage';
+import '../icon/icon';
+import { Cre8Element } from '../cre8-element';
+/**
+ * The general purpose of an alert or notification is to draw the user’s attention
+ * and provide the user with timely, relevant information.
+ *
+ * ## Alert Styles:
+ * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.
+ * Each alert will have different icon to be displayed in the alert.
+ * - Users can select two types of alert variants: 'standalone', or 'banner'.
+ * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.
+ * - User can add button or link in the alert.
+ * If users choose to emphasize the alert (**strong**), user needs to used **"inverted"** prop in button or link.
+ * - User can choose whether the alert can be dismissed or not
+ *
+ */
+export declare class Cre8Alert extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /** The alert type. */
+    status?: 'error' | 'info' | 'notification' | 'neutral' | 'warning' | 'success';
+    /** The alert variant. */
+    variant: 'standalone' | 'banner';
+    emphasis: 'subtle' | 'strong';
+    iconAlert: string;
+    /**
+     * Icon title used for the icon alt text
+     */
+    iconTitle?: string;
+    headerText: string;
+    ctaBody: string;
+    /**
+     * Dismissed property
+     * 1) State that changes to true and is removed when the banner is dismissed
+     */
+    dismissed?: boolean;
+    /**
+     * Dismissable property
+     * 1) Adds the ability to close when toggled to true
+     */
+    notDismissible?: boolean;
+    /**
+     * On banner dismiss
+     * 1) Function that toggles dismissed to true and removes the banner from the UI
+     */
+    onDismiss(): void;
+    private checkEmphasisAlert;
+    private mapStatusToIconAlert;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-alert': Cre8Alert;
+    }
+}
+export default Cre8Alert;
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":"AAQA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;GAaG;AAEH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAEzB,sBAAsB;IAEtB,MAAM,CAAC,EACD,OAAO,GACP,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,SAAS,CAAU;IAEzB,yBAAyB;IAEzB,OAAO,EAAE,YAAY,GAAG,QAAQ,CAAgB;IAGhD,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAY;IAIzC,SAAS,EAAE,MAAM,CAAa;IAE9B;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,UAAU,EAAE,MAAM,CAAa;IAG/B,OAAO,EAAE,MAAM,CAAa;IAE5B;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IAEH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,SAAS;IAIT,OAAO,CAAC,kBAAkB,CAIxB;IAEF,OAAO,CAAC,oBAAoB,CA+C1B;IAEF,MAAM;CAsDT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ;AAED,eAAe,SAAS,CAAC"}