npm - @tmorrow/cre8-wc - Versions diffs - 2.0.5 → 2.0.7 - Mend

@tmorrow/cre8-wc 2.0.5 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (622) hide show

package/lib/components/tag/tag.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsrBhB,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 #TAG\n\\\\------------------------------------ */\n:host {\n display: inline-flex;\n}\n\n.cre8-c-tag {\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 display: flex;\n align-items: center;\n background-color: var(--cre8-color-bg-default);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n color: var(--cre8-color-content-default);\n cursor: pointer;\n gap: var(--cre8-spacing-8);\n padding: var(--cre8-spacing-4) var(--cre8-spacing-16);\n transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n white-space: nowrap;\n}\n\n.cre8-c-tag--square {\n border-radius: var(--cre8-border-radius-small);\n}\n\n.cre8-c-tag--round {\n border-radius: var(--cre8-border-radius-round);\n}\n\n.cre8-c-tag--neutral:hover, .cre8-c-tag--neutral:focus {\n background-color: var(--cre8-color-bg-default-hover);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n}\n\n.cre8-c-tag--branded {\n background-color: var(--cre8-color-bg-brand);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);\n}\n.cre8-c-tag--branded:hover, .cre8-c-tag--branded:focus {\n background-color: var(--cre8-color-bg-brand-hover);\n}\n\n.cre8-c-tag--neutral-hybrid {\n color: var(--cre8-color-content-brand);\n}\n.cre8-c-tag--neutral-hybrid:hover, .cre8-c-tag--neutral-hybrid:focus {\n background-color: var(--cre8-color-bg-default-hover);\n}\n\n.cre8-c-tag--neutral-selected,\n.cre8-c-tag--neutral-hybrid-selected {\n background-color: var(--cre8-color-bg-brand-strong);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);\n color: var(--cre8-color-content-knockout);\n}\n.cre8-c-tag--neutral-selected:hover, .cre8-c-tag--neutral-selected:focus,\n.cre8-c-tag--neutral-hybrid-selected:hover,\n.cre8-c-tag--neutral-hybrid-selected:focus {\n background-color: var(--cre8-color-bg-brand-strong-hover);\n}\n\n.cre8-c-tag--branded-selected {\n background-color: var(--cre8-color-bg-brand-xstrong);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);\n color: var(--cre8-color-content-knockout);\n}\n.cre8-c-tag--branded-selected:hover, .cre8-c-tag--branded-selected:focus {\n background-color: var(--cre8-color-bg-brand-xstrong-hover);\n}\n\n.cre8-c-tag:focus {\n outline: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);\n outline-offset: var(--cre8-border-width-focus);\n}\n\n.cre8-c-tag.cre8-c-tag--disabled,\n.cre8-c-tag.cre8-c-tag--disabled:hover,\n.cre8-c-tag.cre8-c-tag--disabled:focus {\n background-color: var(--cre8-color-bg-disabled);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-disabled);\n color: var(--cre8-color-content-disabled);\n cursor: not-allowed;\n outline: none;\n}\n\n.cre8-c-tag__input {\n font-family: var(--cre8-typography-body-small-font-family);\n font-size: var(--cre8-typography-body-small-font-size);\n font-weight: var(--cre8-typography-body-small-font-weight);\n line-height: var(--cre8-typography-body-small-line-height);\n text-decoration: var(--cre8-typography-body-small-text-decoration);\n text-transform: var(--cre8-typography-body-small-text-transform);\n display: none;\n}\n\n.cre8-tag-text {\n cursor: pointer;\n}\n\n.cre8-c-tag--disabled > .cre8-tag-text {\n cursor: not-allowed;\n}\n\ncre8-icon {\n display: flex;\n align-items: center;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8rBhB,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 #TAG\n\\\\------------------------------------ */\n:host {\n display: inline-flex;\n}\n\n.cre8-c-tag {\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 display: flex;\n align-items: center;\n background-color: var(--cre8-color-bg-default);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n color: var(--cre8-color-content-default);\n cursor: pointer;\n gap: var(--cre8-spacing-8);\n padding: var(--cre8-spacing-4) var(--cre8-spacing-16);\n transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n white-space: nowrap;\n}\n\n.cre8-c-tag--square {\n border-radius: var(--cre8-border-radius-small);\n}\n\n.cre8-c-tag--round {\n border-radius: var(--cre8-border-radius-round);\n}\n\n.cre8-c-tag--neutral:hover, .cre8-c-tag--neutral:focus {\n background-color: var(--cre8-color-bg-default-hover);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n}\n\n.cre8-c-tag--branded {\n background-color: var(--cre8-color-bg-brand);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);\n}\n.cre8-c-tag--branded:hover, .cre8-c-tag--branded:focus {\n background-color: var(--cre8-color-bg-brand-hover);\n}\n\n.cre8-c-tag--neutral-hybrid {\n color: var(--cre8-color-content-brand);\n}\n.cre8-c-tag--neutral-hybrid:hover, .cre8-c-tag--neutral-hybrid:focus {\n background-color: var(--cre8-color-bg-default-hover);\n}\n\n.cre8-c-tag--neutral-selected,\n.cre8-c-tag--neutral-hybrid-selected {\n background-color: var(--cre8-color-bg-brand-strong);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);\n color: var(--cre8-color-content-knockout);\n}\n.cre8-c-tag--neutral-selected:hover, .cre8-c-tag--neutral-selected:focus,\n.cre8-c-tag--neutral-hybrid-selected:hover,\n.cre8-c-tag--neutral-hybrid-selected:focus {\n background-color: var(--cre8-color-bg-brand-strong-hover);\n}\n\n.cre8-c-tag--branded-selected {\n background-color: var(--cre8-color-bg-brand-xstrong);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);\n color: var(--cre8-color-content-knockout);\n}\n.cre8-c-tag--branded-selected:hover, .cre8-c-tag--branded-selected:focus {\n background-color: var(--cre8-color-bg-brand-xstrong-hover);\n}\n\n.cre8-c-tag:focus {\n outline: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);\n outline-offset: var(--cre8-border-width-focus);\n}\n\n.cre8-c-tag.cre8-c-tag--disabled,\n.cre8-c-tag.cre8-c-tag--disabled:hover,\n.cre8-c-tag.cre8-c-tag--disabled:focus {\n background-color: var(--cre8-color-bg-disabled);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-disabled);\n color: var(--cre8-color-content-disabled);\n cursor: not-allowed;\n outline: none;\n}\n\n.cre8-c-tag__input {\n font-family: var(--cre8-typography-body-small-font-family);\n font-size: var(--cre8-typography-body-small-font-size);\n font-weight: var(--cre8-typography-body-small-font-weight);\n line-height: var(--cre8-typography-body-small-line-height);\n text-decoration: var(--cre8-typography-body-small-text-decoration);\n text-transform: var(--cre8-typography-body-small-text-transform);\n display: none;\n}\n\n.cre8-tag-text {\n cursor: pointer;\n}\n\n.cre8-c-tag--disabled > .cre8-tag-text {\n cursor: not-allowed;\n}\n\ncre8-icon {\n display: flex;\n align-items: center;\n}`;\nexport default styles;\n"]}

package/lib/components/tag-list/tag-list.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-list.styles.d.ts","sourceRoot":"","sources":["../../../components/tag-list/tag-list.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,~~yBAmmBV~~,CAAC;AACH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"tag-list.styles.d.ts","sourceRoot":"","sources":["../../../components/tag-list/tag-list.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA2mBV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/tag-list/tag-list.styles.js CHANGED Viewed

@@ -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/tag-list/tag-list.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-list.styles.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmmBhB,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) Fieldset used for tags\n /\n.cre8-c-tag-list {\n border: none;\n padding: 0;\n margin: 0;\n gap: var(--cre8-spacing-16);\n}\n\n.cre8-c-tag-list__legend {\n margin-bottom: var(--cre8-spacing-16);\n}\n\n/\n Slotted tag items\n */\n::slotted(cre8-tag) {\n margin-bottom: var(--cre8-spacing-16);\n margin-right: var(--cre8-spacing-8);\n}\n\n.cre8-c-tag-list__list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"tag-list.styles.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2mBhB,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) Fieldset used for tags\n /\n.cre8-c-tag-list {\n border: none;\n padding: 0;\n margin: 0;\n gap: var(--cre8-spacing-16);\n}\n\n.cre8-c-tag-list__legend {\n margin-bottom: var(--cre8-spacing-16);\n}\n\n/\n Slotted tag items\n */\n::slotted(cre8-tag) {\n margin-bottom: var(--cre8-spacing-16);\n margin-right: var(--cre8-spacing-8);\n}\n\n.cre8-c-tag-list__list {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n}`;\nexport default styles;\n"]}

package/lib/components/tertiary-nav/tertiary-nav.styles.d.ts.map CHANGED Viewed

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

package/lib/components/tertiary-nav/tertiary-nav.styles.js CHANGED Viewed

@@ -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/tertiary-nav/tertiary-nav.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tertiary-nav.styles.js","sourceRoot":"","sources":["../../../components/tertiary-nav/tertiary-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAomBhB,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 #TERTIARY-NAV\n\\\\------------------------------------/\n:host {\n display: flex;\n}\n\n/\n Tertiary nav\n /\n.cre8-c-tertiary-nav {\n width: 100%;\n max-width: 15rem;\n}\n\n/\n Tertiary nav full width\n /\n.cre8-c-tertiary-nav--full-width {\n max-width: none;\n}\n\n/\n Tertiary nav list\n */\n.cre8-c-tertiary-nav__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"tertiary-nav.styles.js","sourceRoot":"","sources":["../../../components/tertiary-nav/tertiary-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4mBhB,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 #TERTIARY-NAV\n\\\\------------------------------------/\n:host {\n display: flex;\n}\n\n/\n Tertiary nav\n /\n.cre8-c-tertiary-nav {\n width: 100%;\n max-width: 15rem;\n}\n\n/\n Tertiary nav full width\n /\n.cre8-c-tertiary-nav--full-width {\n max-width: none;\n}\n\n/\n Tertiary nav list\n */\n.cre8-c-tertiary-nav__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}`;\nexport default styles;\n"]}

package/lib/components/tertiary-nav-item/tertiary-nav-item.styles.d.ts.map CHANGED Viewed

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

package/lib/components/tertiary-nav-item/tertiary-nav-item.styles.js CHANGED Viewed

@@ -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/tertiary-nav-item/tertiary-nav-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tertiary-nav-item.styles.js","sourceRoot":"","sources":["../../../components/tertiary-nav-item/tertiary-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0nBhB,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 #TERTIARY-NAV-ITEM\n\\\\------------------------------------/\n:host {\n display: contents;\n}\n\n/\n Tertiary nav item link\n /\n.cre8-c-tertiary-nav-item__link {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 0.5rem 0.5rem 1rem;\n color: var(--cre8-color-content-brand-strong);\n background-color: var(--cre8-color-bg-default);\n border-block-end: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);\n text-decoration: none;\n transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n width: 100%;\n /\n Tertiary nav item link hover & focus state\n /\n}\n.cre8-c-tertiary-nav-item__link:hover, .cre8-c-tertiary-nav-item__link:focus {\n background-color: var(--cre8-color-bg-subtle);\n}\n.cre8-c-tertiary-nav-item__link {\n /\n Tertiary nav item link focus visible state\n /\n}\n.cre8-c-tertiary-nav-item__link:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-tertiary-nav-item__link {\n /\n Tertiary nav item link active/current state\n */\n}\n.cre8-c-tertiary-nav-item__link:active, .cre8-is-current .cre8-c-tertiary-nav-item__link {\n color: var(--cre8-color-content-default);\n background-color: var(--cre8-color-bg-subtle);\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"tertiary-nav-item.styles.js","sourceRoot":"","sources":["../../../components/tertiary-nav-item/tertiary-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkoBhB,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 #TERTIARY-NAV-ITEM\n\\\\------------------------------------/\n:host {\n display: contents;\n}\n\n/\n Tertiary nav item link\n /\n.cre8-c-tertiary-nav-item__link {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 0.5rem 0.5rem 1rem;\n color: var(--cre8-color-content-brand-strong);\n background-color: var(--cre8-color-bg-default);\n border-block-end: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);\n text-decoration: none;\n transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n width: 100%;\n /\n Tertiary nav item link hover & focus state\n /\n}\n.cre8-c-tertiary-nav-item__link:hover, .cre8-c-tertiary-nav-item__link:focus {\n background-color: var(--cre8-color-bg-subtle);\n}\n.cre8-c-tertiary-nav-item__link {\n /\n Tertiary nav item link focus visible state\n /\n}\n.cre8-c-tertiary-nav-item__link:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-tertiary-nav-item__link {\n /\n Tertiary nav item link active/current state\n */\n}\n.cre8-c-tertiary-nav-item__link:active, .cre8-is-current .cre8-c-tertiary-nav-item__link {\n color: var(--cre8-color-content-default);\n background-color: var(--cre8-color-bg-subtle);\n}`;\nexport default styles;\n"]}

package/lib/components/text-link/text-link.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-link.styles.d.ts","sourceRoot":"","sources":["../../../components/text-link/text-link.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,~~yBA2oBV~~,CAAC;AACH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"text-link.styles.d.ts","sourceRoot":"","sources":["../../../components/text-link/text-link.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmpBV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/text-link/text-link.styles.js CHANGED Viewed

@@ -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/text-link/text-link.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-link.styles.js","sourceRoot":"","sources":["../../../components/text-link/text-link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2oBhB,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) General text link used across the product\n /\n.cre8-c-text-link {\n font-family: var(--cre8-typography-body-default-link-font-family);\n font-size: var(--cre8-typography-body-default-link-font-size);\n font-weight: var(--cre8-typography-body-default-link-font-weight);\n line-height: var(--cre8-typography-body-default-link-line-height);\n text-decoration: var(--cre8-typography-body-default-link-text-decoration);\n text-transform: var(--cre8-typography-body-default-link-text-transform);\n display: inline-flex;\n color: var(--cre8-color-content-link);\n cursor: pointer;\n}\n.cre8-c-text-link:hover, .cre8-c-text-link:focus {\n text-decoration: underline;\n color: var(--cre8-color-content-link-hover);\n}\n.cre8-c-text-link:active {\n color: var(--cre8-color-content-link-active);\n}\n.cre8-c-text-link:visited {\n color: var(--cre8-color-content-link-visited);\n}\n\n/\n Display text link\n* 1) Used for items like article title links\n/\n.cre8-c-text-link--display {\n color: var(--cre8-color-content-default);\n}\n\n/\n A secondary link list\n * 1) Uses a more subtle treatment than the default link list\n /\n.cre8-c-text-link--secondary {\n color: var(--cre8-color-content-subtle);\n}\n\n/\n Inverted text link\n* 1) Used on dark backgrounds\n/\n.cre8-c-text-link--inverted {\n color: var(--cre8-color-content-knockout);\n}\n\n/\n Small text link\n* 1) Shrink the typography size\n/\n.cre8-c-text-link--sm {\n font-family: var(--cre8-typography-body-small-font-family);\n font-size: var(--cre8-typography-body-small-font-size);\n font-weight: var(--cre8-typography-body-small-font-weight);\n line-height: var(--cre8-typography-body-small-line-height);\n text-decoration: var(--cre8-typography-body-small-text-decoration);\n text-transform: var(--cre8-typography-body-small-text-transform);\n}\n\n/\n Text link after\n* 1) Container used to place items after the text link\n*/\n.cre8-c-text-link__after {\n margin-left: 0.5rem;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"text-link.styles.js","sourceRoot":"","sources":["../../../components/text-link/text-link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmpBhB,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) General text link used across the product\n /\n.cre8-c-text-link {\n font-family: var(--cre8-typography-body-default-link-font-family);\n font-size: var(--cre8-typography-body-default-link-font-size);\n font-weight: var(--cre8-typography-body-default-link-font-weight);\n line-height: var(--cre8-typography-body-default-link-line-height);\n text-decoration: var(--cre8-typography-body-default-link-text-decoration);\n text-transform: var(--cre8-typography-body-default-link-text-transform);\n display: inline-flex;\n color: var(--cre8-color-content-link);\n cursor: pointer;\n}\n.cre8-c-text-link:hover, .cre8-c-text-link:focus {\n text-decoration: underline;\n color: var(--cre8-color-content-link-hover);\n}\n.cre8-c-text-link:active {\n color: var(--cre8-color-content-link-active);\n}\n.cre8-c-text-link:visited {\n color: var(--cre8-color-content-link-visited);\n}\n\n/\n Display text link\n* 1) Used for items like article title links\n/\n.cre8-c-text-link--display {\n color: var(--cre8-color-content-default);\n}\n\n/\n A secondary link list\n * 1) Uses a more subtle treatment than the default link list\n /\n.cre8-c-text-link--secondary {\n color: var(--cre8-color-content-subtle);\n}\n\n/\n Inverted text link\n* 1) Used on dark backgrounds\n/\n.cre8-c-text-link--inverted {\n color: var(--cre8-color-content-knockout);\n}\n\n/\n Small text link\n* 1) Shrink the typography size\n/\n.cre8-c-text-link--sm {\n font-family: var(--cre8-typography-body-small-font-family);\n font-size: var(--cre8-typography-body-small-font-size);\n font-weight: var(--cre8-typography-body-small-font-weight);\n line-height: var(--cre8-typography-body-small-line-height);\n text-decoration: var(--cre8-typography-body-small-text-decoration);\n text-transform: var(--cre8-typography-body-small-text-transform);\n}\n\n/\n Text link after\n* 1) Container used to place items after the text link\n*/\n.cre8-c-text-link__after {\n margin-left: 0.5rem;\n}`;\nexport default styles;\n"]}

package/lib/components/text-passage/text-passage-light-dom.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-passage-light-dom.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,~~yBAu0BV~~,CAAC;AACH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"text-passage-light-dom.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+0BV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/text-passage/text-passage-light-dom.styles.js CHANGED Viewed

@@ -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/text-passage/text-passage-light-dom.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-passage-light-dom.styles.js","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAu0BhB,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) A passage of text (e.g. article, blog post), including uncontrolled elements\n * (e.g. unclassed h2, h3, ul, li, and so on).\n * 2) Use this file only for styling text passage and elements inside of text passage.\n /\ncre8-text-passage,\ncre8-text-passage[size=default] {\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 /\n Generic h1 within text passage\n /\n}\ncre8-text-passage h1,\ncre8-text-passage[size=default] h1 {\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-text-passage h1,\n cre8-text-passage[size=default] h1 {\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}\ncre8-text-passage h1,\ncre8-text-passage[size=default] h1 {\n margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic h2 within text passage\n /\n}\ncre8-text-passage h2,\ncre8-text-passage[size=default] h2 {\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-text-passage h2,\n cre8-text-passage[size=default] h2 {\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}\ncre8-text-passage h2,\ncre8-text-passage[size=default] h2 {\n margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic h3 within text passage\n /\n}\ncre8-text-passage h3,\ncre8-text-passage[size=default] h3 {\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-text-passage h3,\n cre8-text-passage[size=default] h3 {\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}\ncre8-text-passage h3,\ncre8-text-passage[size=default] h3 {\n margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic h4 within text passage\n /\n}\ncre8-text-passage h4,\ncre8-text-passage[size=default] h4 {\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-text-passage h4,\n cre8-text-passage[size=default] h4 {\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}\ncre8-text-passage h4,\ncre8-text-passage[size=default] h4 {\n margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic h5 within text passage\n /\n}\ncre8-text-passage h5,\ncre8-text-passage[size=default] h5 {\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 margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic unordered and ordered lists within text passage\n /\n}\ncre8-text-passage ul,\ncre8-text-passage ol,\ncre8-text-passage[size=default] ul,\ncre8-text-passage[size=default] ol {\n margin-top: 0;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Unordered list within text passage\n /\n}\ncre8-text-passage ul,\ncre8-text-passage[size=default] ul {\n margin-left: 1.25rem;\n padding-left: 0;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Ordered list within text passage\n /\n}\ncre8-text-passage ol,\ncre8-text-passage[size=default] ol {\n margin-left: 1.125rem;\n padding-left: 0;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic link tag within text passage\n /\n}\ncre8-text-passage a,\ncre8-text-passage[size=default] a {\n color: var(--cre8-color-content-link);\n}\ncre8-text-passage a:hover, cre8-text-passage a:focus,\ncre8-text-passage[size=default] a:hover,\ncre8-text-passage[size=default] a:focus {\n text-decoration: underline;\n color: var(--cre8-color-content-link-hover);\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Paragraph tag within text passage\n /\n}\ncre8-text-passage p,\ncre8-text-passage[size=default] p {\n margin-top: 0;\n margin-bottom: 1.5rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Blockquote within text passage\n /\n}\ncre8-text-passage blockquote,\ncre8-text-passage[size=default] blockquote {\n font-style: italic;\n border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);\n color: var(--cre8-color-content-subtle);\n padding-left: 1rem;\n margin-left: 0;\n margin-bottom: 1rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Last item declared in the text passage\n * 1) Remove default margin bottom from the item\n /\n}\ncre8-text-passage :last-child,\ncre8-text-passage[size=default] :last-child {\n margin-bottom: 0;\n}\n\n/\n Inverted text passage\n/\ncre8-text-passage[inverted] {\n /\n Blockquote within inverted text passage\n */\n}\ncre8-text-passage[inverted] a {\n color: var(--cre8-color-content-brand-knockout);\n}\ncre8-text-passage[inverted] a:hover, cre8-text-passage[inverted] a:focus {\n color: var(--cre8-color-content-brand-knockout-hover);\n}\ncre8-text-passage[inverted] blockquote {\n color: var(--cre8-color-content-knockout);\n font-style: italic;\n border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);\n padding-left: 1rem;\n margin-left: 0;\n margin-bottom: 1rem;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"text-passage-light-dom.styles.js","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+0BhB,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) A passage of text (e.g. article, blog post), including uncontrolled elements\n * (e.g. unclassed h2, h3, ul, li, and so on).\n * 2) Use this file only for styling text passage and elements inside of text passage.\n /\ncre8-text-passage,\ncre8-text-passage[size=default] {\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 /\n Generic h1 within text passage\n /\n}\ncre8-text-passage h1,\ncre8-text-passage[size=default] h1 {\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-text-passage h1,\n cre8-text-passage[size=default] h1 {\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}\ncre8-text-passage h1,\ncre8-text-passage[size=default] h1 {\n margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic h2 within text passage\n /\n}\ncre8-text-passage h2,\ncre8-text-passage[size=default] h2 {\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-text-passage h2,\n cre8-text-passage[size=default] h2 {\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}\ncre8-text-passage h2,\ncre8-text-passage[size=default] h2 {\n margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic h3 within text passage\n /\n}\ncre8-text-passage h3,\ncre8-text-passage[size=default] h3 {\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-text-passage h3,\n cre8-text-passage[size=default] h3 {\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}\ncre8-text-passage h3,\ncre8-text-passage[size=default] h3 {\n margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic h4 within text passage\n /\n}\ncre8-text-passage h4,\ncre8-text-passage[size=default] h4 {\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-text-passage h4,\n cre8-text-passage[size=default] h4 {\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}\ncre8-text-passage h4,\ncre8-text-passage[size=default] h4 {\n margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic h5 within text passage\n /\n}\ncre8-text-passage h5,\ncre8-text-passage[size=default] h5 {\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 margin-bottom: 0.75rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic unordered and ordered lists within text passage\n /\n}\ncre8-text-passage ul,\ncre8-text-passage ol,\ncre8-text-passage[size=default] ul,\ncre8-text-passage[size=default] ol {\n margin-top: 0;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Unordered list within text passage\n /\n}\ncre8-text-passage ul,\ncre8-text-passage[size=default] ul {\n margin-left: 1.25rem;\n padding-left: 0;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Ordered list within text passage\n /\n}\ncre8-text-passage ol,\ncre8-text-passage[size=default] ol {\n margin-left: 1.125rem;\n padding-left: 0;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Generic link tag within text passage\n /\n}\ncre8-text-passage a,\ncre8-text-passage[size=default] a {\n color: var(--cre8-color-content-link);\n}\ncre8-text-passage a:hover, cre8-text-passage a:focus,\ncre8-text-passage[size=default] a:hover,\ncre8-text-passage[size=default] a:focus {\n text-decoration: underline;\n color: var(--cre8-color-content-link-hover);\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Paragraph tag within text passage\n /\n}\ncre8-text-passage p,\ncre8-text-passage[size=default] p {\n margin-top: 0;\n margin-bottom: 1.5rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Blockquote within text passage\n /\n}\ncre8-text-passage blockquote,\ncre8-text-passage[size=default] blockquote {\n font-style: italic;\n border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);\n color: var(--cre8-color-content-subtle);\n padding-left: 1rem;\n margin-left: 0;\n margin-bottom: 1rem;\n}\ncre8-text-passage,\ncre8-text-passage[size=default] {\n /\n Last item declared in the text passage\n * 1) Remove default margin bottom from the item\n /\n}\ncre8-text-passage :last-child,\ncre8-text-passage[size=default] :last-child {\n margin-bottom: 0;\n}\n\n/\n Inverted text passage\n/\ncre8-text-passage[inverted] {\n /\n Blockquote within inverted text passage\n */\n}\ncre8-text-passage[inverted] a {\n color: var(--cre8-color-content-brand-knockout);\n}\ncre8-text-passage[inverted] a:hover, cre8-text-passage[inverted] a:focus {\n color: var(--cre8-color-content-brand-knockout-hover);\n}\ncre8-text-passage[inverted] blockquote {\n color: var(--cre8-color-content-knockout);\n font-style: italic;\n border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);\n padding-left: 1rem;\n margin-left: 0;\n margin-bottom: 1rem;\n}`;\nexport default styles;\n"]}

package/lib/components/text-passage/text-passage.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-passage.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,~~yBA6mBV~~,CAAC;AACH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"text-passage.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAqnBV,CAAC;AACH,eAAe,MAAM,CAAC"}