npm - @tmorrow/cre8-wc - Versions diffs - 2.3.6 → 2.3.9 - Mend

@tmorrow/cre8-wc 2.3.6 → 2.3.9

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 (260) hide show

package/lib/components/dropdown/dropdown.styles.js CHANGED Viewed

@@ -617,12 +617,12 @@ span.ripple {
 .cre8-c-dropdown--icon-button {
   color: var(--cre8-color-button-secondary-content);
-  margin-top: 0.5rem;
+  margin-top: var(--cre8-spacing-8);
 }
 .cre8-c-dropdown--icon-link {
   color: var(--cre8-color-content-link);
-  margin-top: 0.5rem;
+  margin-top: var(--cre8-spacing-8);
 }
 .cre8-c-dropdown--toggle {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../components/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAspBhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-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) Dropdown\n */\n.cre8-c-dropdown-container {\n display: inline-flex;\n position: relative;\n}\n\n.cre8-c-dropdown {\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n box-shadow: var(--cre8-shadow-default);\n border-radius: var(--cre8-border-radius-container);\n display: none;\n flex-direction: column;\n left: 0;\n min-width: 100%;\n padding: var(--cre8-spacing-8);\n position: absolute;\n top: 100%;\n white-space: nowrap;\n}\n\n.cre8-c-dropdown--open {\n display: flex;\n}\n\n.cre8-c-dropdown--icon-button {\n color: var(--cre8-color-button-secondary-content);\n margin-top: 0.5rem;\n}\n\n.cre8-c-dropdown--icon-link {\n color: var(--cre8-color-content-link);\n margin-top: 0.5rem;\n}\n\n.cre8-c-dropdown--toggle {\n font-family: var(--cre8-typography-label-default-font-family);\n font-size: var(--cre8-typography-label-default-font-size);\n font-weight: var(--cre8-typography-label-default-font-weight);\n line-height: var(--cre8-typography-label-default-line-height);\n text-decoration: var(--cre8-typography-label-default-text-decoration);\n text-transform: var(--cre8-typography-label-default-text-transform);\n align-items: center;\n justify-content: space-between;\n display: flex;\n gap: var(--cre8-spacing-8);\n white-space: nowrap;\n}\n\n.cre8-c-dropdown--button {\n background-color: var(--cre8-color-button-secondary-bg);\n border: var(--cre8-border-style-default) var(--cre8-border-width-default) var(--cre8-color-button-secondary-border);\n border-radius: var(--cre8-border-radius-button);\n color: var(--cre8-color-button-secondary-content);\n padding: var(--cre8-spacing-8) var(--cre8-spacing-16);\n}\n\n.cre8-c-dropdown--link {\n color: var(--cre8-color-content-link);\n background-color: var(--cre8-color-bg-transparent);\n text-decoration: underline;\n}\n\n.cre8-c-dropdown--close {\n display: none;\n}\n\nul {\n list-style-type: none;\n padding: var(--cre8-spacing-0);\n margin: 0;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../components/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAspBhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-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) Dropdown\n */\n.cre8-c-dropdown-container {\n display: inline-flex;\n position: relative;\n}\n\n.cre8-c-dropdown {\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n box-shadow: var(--cre8-shadow-default);\n border-radius: var(--cre8-border-radius-container);\n display: none;\n flex-direction: column;\n left: 0;\n min-width: 100%;\n padding: var(--cre8-spacing-8);\n position: absolute;\n top: 100%;\n white-space: nowrap;\n}\n\n.cre8-c-dropdown--open {\n display: flex;\n}\n\n.cre8-c-dropdown--icon-button {\n color: var(--cre8-color-button-secondary-content);\n margin-top: var(--cre8-spacing-8);\n}\n\n.cre8-c-dropdown--icon-link {\n color: var(--cre8-color-content-link);\n margin-top: var(--cre8-spacing-8);\n}\n\n.cre8-c-dropdown--toggle {\n font-family: var(--cre8-typography-label-default-font-family);\n font-size: var(--cre8-typography-label-default-font-size);\n font-weight: var(--cre8-typography-label-default-font-weight);\n line-height: var(--cre8-typography-label-default-line-height);\n text-decoration: var(--cre8-typography-label-default-text-decoration);\n text-transform: var(--cre8-typography-label-default-text-transform);\n align-items: center;\n justify-content: space-between;\n display: flex;\n gap: var(--cre8-spacing-8);\n white-space: nowrap;\n}\n\n.cre8-c-dropdown--button {\n background-color: var(--cre8-color-button-secondary-bg);\n border: var(--cre8-border-style-default) var(--cre8-border-width-default) var(--cre8-color-button-secondary-border);\n border-radius: var(--cre8-border-radius-button);\n color: var(--cre8-color-button-secondary-content);\n padding: var(--cre8-spacing-8) var(--cre8-spacing-16);\n}\n\n.cre8-c-dropdown--link {\n color: var(--cre8-color-content-link);\n background-color: var(--cre8-color-bg-transparent);\n text-decoration: underline;\n}\n\n.cre8-c-dropdown--close {\n display: none;\n}\n\nul {\n list-style-type: none;\n padding: var(--cre8-spacing-0);\n margin: 0;\n}`;\nexport default styles;\n"]}

package/lib/components/feature/feature.styles.js CHANGED Viewed

@@ -620,14 +620,14 @@ span.ripple {
  * 2) Take up the remaining space on medr screens
  */
 .cre8-c-feature__body {
-  margin-bottom: 2rem;
+  margin-bottom: var(--cre8-spacing-32);
 }
 @media all and (min-width: 768px) {
   .cre8-c-feature__body {
     display: flex;
     flex-direction: column;
     flex: 1;
-    padding-right: 2rem;
+    padding-right: var(--cre8-spacing-32);
     margin-bottom: 0;
   }
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feature.styles.js","sourceRoot":"","sources":["../../../components/feature/feature.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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-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 Feature is a prominent marketing block that contains\n * Side by side information and an image\n /\n.cre8-c-feature {\n display: flex;\n / 2 /\n flex-direction: column;\n align-items: stretch;\n color: var(--cre8-feature-text-color, var(--cre8-theme-color-core-text, var(--cre8-color-neutral-black)));\n border-radius: var(--cre8-feature-border-radius, var(--cre8-border-radius-container, 0));\n}\n@media all and (min-width: 768px) {\n .cre8-c-feature {\n flex-direction: row;\n }\n}\n\n/\n Inverted feature\n /\n.cre8-c-feature--inverted {\n color: var(--cre8-feature-inverted-text-color, var(--cre8-theme-color-inverted, var(--cre8-color-neutral-white)));\n}\n\n/\n Feature body\n * 1) Container within feature that usually contains an excerpt of text\n * 2) Take up the remaining space on medr screens\n /\n.cre8-c-feature__body {\n margin-bottom: 2rem;\n}\n@media all and (min-width: 768px) {\n .cre8-c-feature__body {\n display: flex;\n flex-direction: column;\n flex: 1;\n padding-right: 2rem;\n margin-bottom: 0;\n }\n}\n\n/\n Feature media container\n /\n.cre8-c-feature__media {\n width: 100%;\n}\n@media all and (min-width: 768px) {\n .cre8-c-feature__media {\n width: 45%;\n }\n}\n\n/\n Feature image\n */\n.cre8-c-feature__image {\n display: block;\n width: 100%;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"feature.styles.js","sourceRoot":"","sources":["../../../components/feature/feature.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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-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 Feature is a prominent marketing block that contains\n * Side by side information and an image\n /\n.cre8-c-feature {\n display: flex;\n / 2 /\n flex-direction: column;\n align-items: stretch;\n color: var(--cre8-feature-text-color, var(--cre8-theme-color-core-text, var(--cre8-color-neutral-black)));\n border-radius: var(--cre8-feature-border-radius, var(--cre8-border-radius-container, 0));\n}\n@media all and (min-width: 768px) {\n .cre8-c-feature {\n flex-direction: row;\n }\n}\n\n/\n Inverted feature\n /\n.cre8-c-feature--inverted {\n color: var(--cre8-feature-inverted-text-color, var(--cre8-theme-color-inverted, var(--cre8-color-neutral-white)));\n}\n\n/\n Feature body\n * 1) Container within feature that usually contains an excerpt of text\n * 2) Take up the remaining space on medr screens\n /\n.cre8-c-feature__body {\n margin-bottom: var(--cre8-spacing-32);\n}\n@media all and (min-width: 768px) {\n .cre8-c-feature__body {\n display: flex;\n flex-direction: column;\n flex: 1;\n padding-right: var(--cre8-spacing-32);\n margin-bottom: 0;\n }\n}\n\n/\n Feature media container\n /\n.cre8-c-feature__media {\n width: 100%;\n}\n@media all and (min-width: 768px) {\n .cre8-c-feature__media {\n width: 45%;\n }\n}\n\n/\n Feature image\n */\n.cre8-c-feature__image {\n display: block;\n width: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/field-note/field-note.styles.js CHANGED Viewed

@@ -600,13 +600,13 @@ span.ripple {
 .cre8-c-field-note {
   display: flex;
   align-items: flex-start;
-  gap: 0.25rem;
+  gap: var(--cre8-spacing-4);
   color: var(--cre8-color-content-default);
-  margin-top: 0.25rem;
+  margin-top: var(--cre8-spacing-4);
 }
 .cre8-field-note-icon {
-  margin-top: 0.25rem;
+  margin-top: var(--cre8-spacing-4);
   height: 1rem;
   width: 1rem;
 }

package/lib/components/field-note/field-note.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field-note.styles.js","sourceRoot":"","sources":["../../../components/field-note/field-note.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAunBhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n:host {\n display: flex;\n}\n\n/\n Field Note\n * 1) Messaging associated with the form field usually located below the form field input\n /\n.cre8-c-field-note {\n display: flex;\n align-items: flex-start;\n gap: 0.25rem;\n color: var(--cre8-color-content-default);\n margin-top: 0.25rem;\n}\n\n.cre8-field-note-icon {\n margin-top: 0.25rem;\n height: 1rem;\n width: 1rem;\n}\n\n/\n Field Note Error State\n /\n.cre8-c-field-note.cre8-is-error {\n color: var(--cre8-color-content-error);\n}\n\n/\n Field Note Success State\n /\n.cre8-c-field-note.cre8-is-success {\n color: var(--cre8-color-content-success);\n}\n\n/\n Inverted field note\n */\n.cre8-c-field-note--inverted {\n color: var(--cre8-color-content-knockout);\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"field-note.styles.js","sourceRoot":"","sources":["../../../components/field-note/field-note.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAunBhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n:host {\n display: flex;\n}\n\n/\n Field Note\n * 1) Messaging associated with the form field usually located below the form field input\n /\n.cre8-c-field-note {\n display: flex;\n align-items: flex-start;\n gap: var(--cre8-spacing-4);\n color: var(--cre8-color-content-default);\n margin-top: var(--cre8-spacing-4);\n}\n\n.cre8-field-note-icon {\n margin-top: var(--cre8-spacing-4);\n height: 1rem;\n width: 1rem;\n}\n\n/\n Field Note Error State\n /\n.cre8-c-field-note.cre8-is-error {\n color: var(--cre8-color-content-error);\n}\n\n/\n Field Note Success State\n /\n.cre8-c-field-note.cre8-is-success {\n color: var(--cre8-color-content-success);\n}\n\n/\n Inverted field note\n */\n.cre8-c-field-note--inverted {\n color: var(--cre8-color-content-knockout);\n}`;\nexport default styles;\n"]}

package/lib/components/footer/footer.styles.js CHANGED Viewed

@@ -601,12 +601,12 @@ span.ripple {
   text-transform: var(--cre8-typography-body-default-text-transform);
   background: var(--cre8-color-bg-brand-xstrong);
   color: var(--cre8-color-content-knockout);
-  padding-top: 2.5rem;
-  padding-bottom: 3rem;
+  padding-top: var(--cre8-spacing-40);
+  padding-bottom: var(--cre8-spacing-48);
 }
 @media all and (min-width: 960px) {
   .cre8-c-footer {
-    padding-top: 3.4375rem;
+    padding-top: var(--cre8-spacing-48);
   }
 }`;
 export default styles;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../components/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAimBhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n 1) Container used to house various Components and content for the global footer\n */\n.cre8-c-footer {\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 background: var(--cre8-color-bg-brand-xstrong);\n color: var(--cre8-color-content-knockout);\n padding-top: 2.5rem;\n padding-bottom: 3rem;\n}\n@media all and (min-width: 960px) {\n .cre8-c-footer {\n padding-top: 3.4375rem;\n }\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../components/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAimBhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n 1) Container used to house various Components and content for the global footer\n */\n.cre8-c-footer {\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 background: var(--cre8-color-bg-brand-xstrong);\n color: var(--cre8-color-content-knockout);\n padding-top: var(--cre8-spacing-40);\n padding-bottom: var(--cre8-spacing-48);\n}\n@media all and (min-width: 960px) {\n .cre8-c-footer {\n padding-top: var(--cre8-spacing-48);\n }\n}`;\nexport default styles;\n"]}

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

@@ -621,7 +621,7 @@ span.ripple {
   white-space: nowrap;
   width: 100%;
   margin: 0;
-  padding: 0.5rem 1rem;
+  padding: var(--cre8-padding-8) var(--cre8-padding-16);
   color: var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));
   text-decoration: none;
   transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
@@ -659,14 +659,14 @@ cre8-icon-legacy {
 }
 @media all and (min-width: 960px) {
   cre8-icon-legacy {
-    margin-left: 0.5rem;
+    margin-left: var(--cre8-spacing-8);
   }
 }
 .cre8-c-global-nav__item-after {
   --cre8-icon-height: 0.75rem;
   --cre8-icon-width: 0.75rem;
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }`;
 export default styles;
 //# sourceMappingURL=global-nav-item.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"global-nav-item.styles.js","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4pBhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n Actual primary nav list item\n /\n/\n Content within the primary nav item\n /\n.cre8-c-global-nav__item-content {\n display: flex;\n align-items: baseline;\n}\n\n/\n Primary navigation link\n * 1) Used to remove any sort of default button styles when a button tag is rendered\n /\n.cre8-c-global-nav__link {\n font-family: var(--cre8-typography-body-small-font-family);\n font-size: var(--cre8-typography-body-small-font-size);\n font-weight: var(--cre8-typography-body-small-font-weight);\n line-height: var(--cre8-typography-body-small-line-height);\n text-decoration: var(--cre8-typography-body-small-text-decoration);\n text-transform: var(--cre8-typography-body-small-text-transform);\n display: flex;\n align-items: center;\n appearance: none;\n / 1 /\n background: transparent;\n / 1 /\n border: none;\n white-space: nowrap;\n width: 100%;\n margin: 0;\n padding: 0.5rem 1rem;\n color: var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));\n text-decoration: none;\n transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n cursor: pointer;\n}\n.cre8-c-global-nav__link:hover, .cre8-c-global-nav__link:focus-visible {\n background: var(--cre8-color-header-menu-bg-hover);\n color: var(--cre8-color-header-menu-content-hover);\n}\n.cre8-c-global-nav__link:active {\n border-color: var(--cre8-color-header-menu-border-pressed);\n background: var(--cre8-color-header-menu-bg-pressed);\n color: var(--cre8-color-header-menu-content-pressed);\n}\n\n/\n Icon within primary navigation item\n * 1) TODO: Figure out how to pass down size(1.5) instead of static rem value\n /\ncre8-icon-legacy {\n --cre8-icon-height: 0.5rem;\n / 1 /\n --cre8-icon-width: 0.5rem;\n / 1 /\n margin-left: auto;\n transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n /\n Icon within active primary nav item\n * 1) Rotate the icon to show that the dropdown is open\n /\n}\n.cre8-c-global-nav__item.cre8-is-active cre8-icon-legacy {\n transform: rotate(-180deg);\n / 1 */\n}\n@media all and (min-width: 960px) {\n cre8-icon-legacy {\n margin-left: 0.5rem;\n }\n}\n\n.cre8-c-global-nav__item-after {\n --cre8-icon-height: 0.75rem;\n --cre8-icon-width: 0.75rem;\n margin-left: 0.5rem;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"global-nav-item.styles.js","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4pBhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n Actual primary nav list item\n /\n/\n Content within the primary nav item\n /\n.cre8-c-global-nav__item-content {\n display: flex;\n align-items: baseline;\n}\n\n/\n Primary navigation link\n * 1) Used to remove any sort of default button styles when a button tag is rendered\n /\n.cre8-c-global-nav__link {\n font-family: var(--cre8-typography-body-small-font-family);\n font-size: var(--cre8-typography-body-small-font-size);\n font-weight: var(--cre8-typography-body-small-font-weight);\n line-height: var(--cre8-typography-body-small-line-height);\n text-decoration: var(--cre8-typography-body-small-text-decoration);\n text-transform: var(--cre8-typography-body-small-text-transform);\n display: flex;\n align-items: center;\n appearance: none;\n / 1 /\n background: transparent;\n / 1 /\n border: none;\n white-space: nowrap;\n width: 100%;\n margin: 0;\n padding: var(--cre8-padding-8) var(--cre8-padding-16);\n color: var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));\n text-decoration: none;\n transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n cursor: pointer;\n}\n.cre8-c-global-nav__link:hover, .cre8-c-global-nav__link:focus-visible {\n background: var(--cre8-color-header-menu-bg-hover);\n color: var(--cre8-color-header-menu-content-hover);\n}\n.cre8-c-global-nav__link:active {\n border-color: var(--cre8-color-header-menu-border-pressed);\n background: var(--cre8-color-header-menu-bg-pressed);\n color: var(--cre8-color-header-menu-content-pressed);\n}\n\n/\n Icon within primary navigation item\n * 1) TODO: Figure out how to pass down size(1.5) instead of static rem value\n /\ncre8-icon-legacy {\n --cre8-icon-height: 0.5rem;\n / 1 /\n --cre8-icon-width: 0.5rem;\n / 1 /\n margin-left: auto;\n transition: transform var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n /\n Icon within active primary nav item\n * 1) Rotate the icon to show that the dropdown is open\n /\n}\n.cre8-c-global-nav__item.cre8-is-active cre8-icon-legacy {\n transform: rotate(-180deg);\n / 1 */\n}\n@media all and (min-width: 960px) {\n cre8-icon-legacy {\n margin-left: var(--cre8-spacing-8);\n }\n}\n\n.cre8-c-global-nav__item-after {\n --cre8-icon-height: 0.75rem;\n --cre8-icon-width: 0.75rem;\n margin-left: var(--cre8-spacing-8);\n}`;\nexport default styles;\n"]}

package/lib/components/grid/grid.styles.js CHANGED Viewed

@@ -767,7 +767,7 @@ span.ripple {
  */
 ::slotted(cre8-grid-item) {
   display: block;
-  padding: 0.75rem;
+  padding: var(--cre8-padding-8);
   /**
   * Slotted grid item within grid with no gap between items
   */
@@ -781,7 +781,7 @@ span.ripple {
   */
 }
 .cre8-c-grid--gap-sm > ::slotted(cre8-grid-item) {
-  padding: 0.25rem;
+  padding: var(--cre8-padding-4);
 }
 ::slotted(cre8-grid-item) {
   /**
@@ -789,7 +789,7 @@ span.ripple {
   */
 }
 .cre8-c-grid--gap-lg > ::slotted(cre8-grid-item) {
-  padding: 1rem;
+  padding: var(--cre8-padding-16);
 }
 ::slotted(cre8-grid-item) {
   /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"grid.styles.js","sourceRoot":"","sources":["../../../components/grid/grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAo7BhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-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) Custom elements default to \\`display: inline\\`, which makes the host a text\n * box and lets its children flow like inline content. Every layout rule below\n * lives on a wrapper inside the shadow root, so without this the host itself\n * never takes part in block layout.\n /\n:host {\n display: block;\n}\n\n/\n 1) Grid layout for items like cards, etc.\n /\n.cre8-c-grid {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: -0.75rem;\n}\n\n/\n Grid with no gap in between items\n /\n.cre8-c-grid--gap-none {\n margin: 0;\n}\n\n/\n Small gap grid\n * 1) Spacing between grid items is smaller than default\n /\n.cre8-c-grid--gap-sm {\n margin: -0.25rem;\n}\n\n/\n Large gap grid\n * 1) Spacing between grid items is larger than default\n /\n.cre8-c-grid--gap-lg {\n margin: -1rem;\n}\n\n/\n Side by Side Grid\n * 1) Grid that stays 2 items per row on all screen sizes\n /\n.cre8-c-grid--side-by-side {\n flex-direction: row;\n}\n\n/\n 2up grid\n * 1) Stacked items on small screens to 2 items per row on medium/large screens\n /\n@media all and (min-width: 768px) {\n .cre8-c-grid--2up {\n flex-direction: row;\n }\n}\n.cre8-c-grid--2up {\n /\n 2up grid that breaks faster\n * 1) Grid that breaks from 1 to 2up at a smaller viewport than the default\n /\n}\n@media all and (min-width: 560px) {\n .cre8-c-grid--2up.cre8-c-grid--break-faster {\n flex-direction: row;\n }\n}\n.cre8-c-grid--2up {\n /\n 2up grid that breaks slower\n * 1) Grid that breaks from 1 to 2up at a larger viewport than the default\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--2up.cre8-c-grid--break-slower {\n flex-direction: column;\n }\n}\n@media all and (min-width: 1400px) {\n .cre8-c-grid--2up.cre8-c-grid--break-slower {\n flex-direction: row;\n }\n}\n\n/\n 3up grid\n * 1) Stacked items on small screens to 3 items per row on medium/large screens\n /\n@media all and (min-width: 768px) {\n .cre8-c-grid--3up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 3up grid\n * 1) Stacked items on small screens to 3 items per row on medium/large screens\n /\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-3up {\n flex-direction: row;\n }\n}\n.cre8-c-grid--1-3up {\n /\n 1 to 3 up grid that breaks faster\n * 1) Grid that breaks from 1 to 3up at a smaller viewport than the default\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-faster {\n flex-direction: row;\n }\n}\n.cre8-c-grid--1-3up {\n /\n 1 to 3up grid that breaks slower\n * 1) Grid that breaks from 1 to 3up at a larger viewport than the default\n /\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-slower {\n flex-direction: column;\n }\n}\n@media all and (min-width: 1200px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-slower {\n flex-direction: row;\n }\n}\n\n/\n 1 to 2 to 4up grid\n * 1) Stacked items on small screens to 2 items per row on medium screens to 4 items per row on large screens\n /\n@media all and (min-width: 560px) {\n .cre8-c-grid--1-2-4up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 4up grid\n * 1) Stacked items on small screens to 4 items per row on medium/large screens\n /\n@media all and (min-width: 768px) {\n .cre8-c-grid--1-4up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 2 to 4up grid\n * 1) Stacked items on small screens to 2 items per row on small/medium screens to\n * 3 items per row on medium screens and 4 items per row on large screens\n /\n@media all and (min-width: 560px) {\n .cre8-c-grid--4up {\n flex-direction: row;\n }\n}\n\n/\n Slotted grid item within 4up Grid\n /\n.cre8-c-grid--2-4-6up {\n flex-direction: row;\n}\n\n/\n Slotted grid item\n /\n::slotted(cre8-grid-item) {\n display: block;\n padding: 0.75rem;\n /\n Slotted grid item within grid with no gap between items\n /\n}\n.cre8-c-grid--gap-none > ::slotted(cre8-grid-item) {\n padding: 0;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within grid with small gap between items\n /\n}\n.cre8-c-grid--gap-sm > ::slotted(cre8-grid-item) {\n padding: 0.25rem;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within grid with large gap between items\n /\n}\n.cre8-c-grid--gap-lg > ::slotted(cre8-grid-item) {\n padding: 1rem;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within side by side grid\n * 1) Grid that stays 2 items per row on all screen sizes\n /\n}\n.cre8-c-grid--side-by-side > ::slotted(cre8-grid-item) {\n width: 50%;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up Grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--2up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break faster (small to large screens) Grid\n /\n}\n@media all and (min-width: 560px) {\n .cre8-c-grid--2up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break slower (small to large screens) Grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 100%;\n }\n}\n@media all and (min-width: 1400px) {\n .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 3up Grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--3up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--3up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-3up Grid\n /\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-3up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1 to 3up break faster (small to large screens) grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {\n width: 33.33%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break slower (small to large screens) Grid\n /\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 100%;\n }\n}\n@media all and (min-width: 1200px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 33.33%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-2-4up Grid\n /\n}\n@media all and (min-width: 560px) {\n .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-2-4up Grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--1-4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 4up Grid\n /\n}\n@media all and (min-width: 560px) {\n .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 4up Grid\n */\n}\n.cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 50%;\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n@media all and (min-width: 1200px) {\n .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 16.66%;\n }\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"grid.styles.js","sourceRoot":"","sources":["../../../components/grid/grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAo7BhB,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: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !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: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !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 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(--cre8-color-bg-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) Custom elements default to \\`display: inline\\`, which makes the host a text\n * box and lets its children flow like inline content. Every layout rule below\n * lives on a wrapper inside the shadow root, so without this the host itself\n * never takes part in block layout.\n /\n:host {\n display: block;\n}\n\n/\n 1) Grid layout for items like cards, etc.\n /\n.cre8-c-grid {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: -0.75rem;\n}\n\n/\n Grid with no gap in between items\n /\n.cre8-c-grid--gap-none {\n margin: 0;\n}\n\n/\n Small gap grid\n * 1) Spacing between grid items is smaller than default\n /\n.cre8-c-grid--gap-sm {\n margin: -0.25rem;\n}\n\n/\n Large gap grid\n * 1) Spacing between grid items is larger than default\n /\n.cre8-c-grid--gap-lg {\n margin: -1rem;\n}\n\n/\n Side by Side Grid\n * 1) Grid that stays 2 items per row on all screen sizes\n /\n.cre8-c-grid--side-by-side {\n flex-direction: row;\n}\n\n/\n 2up grid\n * 1) Stacked items on small screens to 2 items per row on medium/large screens\n /\n@media all and (min-width: 768px) {\n .cre8-c-grid--2up {\n flex-direction: row;\n }\n}\n.cre8-c-grid--2up {\n /\n 2up grid that breaks faster\n * 1) Grid that breaks from 1 to 2up at a smaller viewport than the default\n /\n}\n@media all and (min-width: 560px) {\n .cre8-c-grid--2up.cre8-c-grid--break-faster {\n flex-direction: row;\n }\n}\n.cre8-c-grid--2up {\n /\n 2up grid that breaks slower\n * 1) Grid that breaks from 1 to 2up at a larger viewport than the default\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--2up.cre8-c-grid--break-slower {\n flex-direction: column;\n }\n}\n@media all and (min-width: 1400px) {\n .cre8-c-grid--2up.cre8-c-grid--break-slower {\n flex-direction: row;\n }\n}\n\n/\n 3up grid\n * 1) Stacked items on small screens to 3 items per row on medium/large screens\n /\n@media all and (min-width: 768px) {\n .cre8-c-grid--3up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 3up grid\n * 1) Stacked items on small screens to 3 items per row on medium/large screens\n /\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-3up {\n flex-direction: row;\n }\n}\n.cre8-c-grid--1-3up {\n /\n 1 to 3 up grid that breaks faster\n * 1) Grid that breaks from 1 to 3up at a smaller viewport than the default\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-faster {\n flex-direction: row;\n }\n}\n.cre8-c-grid--1-3up {\n /\n 1 to 3up grid that breaks slower\n * 1) Grid that breaks from 1 to 3up at a larger viewport than the default\n /\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-slower {\n flex-direction: column;\n }\n}\n@media all and (min-width: 1200px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-slower {\n flex-direction: row;\n }\n}\n\n/\n 1 to 2 to 4up grid\n * 1) Stacked items on small screens to 2 items per row on medium screens to 4 items per row on large screens\n /\n@media all and (min-width: 560px) {\n .cre8-c-grid--1-2-4up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 4up grid\n * 1) Stacked items on small screens to 4 items per row on medium/large screens\n /\n@media all and (min-width: 768px) {\n .cre8-c-grid--1-4up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 2 to 4up grid\n * 1) Stacked items on small screens to 2 items per row on small/medium screens to\n * 3 items per row on medium screens and 4 items per row on large screens\n /\n@media all and (min-width: 560px) {\n .cre8-c-grid--4up {\n flex-direction: row;\n }\n}\n\n/\n Slotted grid item within 4up Grid\n /\n.cre8-c-grid--2-4-6up {\n flex-direction: row;\n}\n\n/\n Slotted grid item\n /\n::slotted(cre8-grid-item) {\n display: block;\n padding: var(--cre8-padding-8);\n /\n Slotted grid item within grid with no gap between items\n /\n}\n.cre8-c-grid--gap-none > ::slotted(cre8-grid-item) {\n padding: 0;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within grid with small gap between items\n /\n}\n.cre8-c-grid--gap-sm > ::slotted(cre8-grid-item) {\n padding: var(--cre8-padding-4);\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within grid with large gap between items\n /\n}\n.cre8-c-grid--gap-lg > ::slotted(cre8-grid-item) {\n padding: var(--cre8-padding-16);\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within side by side grid\n * 1) Grid that stays 2 items per row on all screen sizes\n /\n}\n.cre8-c-grid--side-by-side > ::slotted(cre8-grid-item) {\n width: 50%;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up Grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--2up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break faster (small to large screens) Grid\n /\n}\n@media all and (min-width: 560px) {\n .cre8-c-grid--2up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break slower (small to large screens) Grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 100%;\n }\n}\n@media all and (min-width: 1400px) {\n .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 3up Grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--3up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--3up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-3up Grid\n /\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-3up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1 to 3up break faster (small to large screens) grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {\n width: 33.33%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break slower (small to large screens) Grid\n /\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 100%;\n }\n}\n@media all and (min-width: 1200px) {\n .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 33.33%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-2-4up Grid\n /\n}\n@media all and (min-width: 560px) {\n .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-2-4up Grid\n /\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--1-4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 4up Grid\n /\n}\n@media all and (min-width: 560px) {\n .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@media all and (min-width: 768px) {\n .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 4up Grid\n */\n}\n.cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 50%;\n}\n@media all and (min-width: 960px) {\n .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n@media all and (min-width: 1200px) {\n .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 16.66%;\n }\n}`;\nexport default styles;\n"]}

package/lib/components/header/header.styles.js CHANGED Viewed

@@ -640,8 +640,8 @@ span.ripple {
   display: flex;
   align-items: center;
   width: 100%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: var(--cre8-padding-16);
+  padding-bottom: var(--cre8-padding-16);
 }
 .cre8-c-header__bottom {