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

	@@ -1 +1 @@
1	- {"version":3,"file":"link-list.styles.js","sourceRoot":"","sources":["../../../components/link-list/link-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAusBhB,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 A list of hyperlinks\n * 1) Override preset line-height value to condense link text. Note: this should\n * be done sparingly to control wrapping text for specific scenarios\n /\n.cre8-c-link-list {\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-top: -1rem;\n list-style: none;\n /\n Slotted link list item\n /\n}\n.cre8-c-link-list ::slotted(cre8-link-list-item) {\n margin-top: 1rem;\n}\n\n/\n A secondary link list\n * 1) Uses a more subtle treatment than the default link list\n * 2) TODO: Create a tier 2 token for secondary link colors\n /\n.cre8-c-link-list--secondary {\n --cre8-link-list-item-active-text-color: var(--cre8-color-content-default);\n / 2 /\n color: var(--cre8-color-content-subtle);\n}\n\n/\n Inverted link list\n * 1) Link list on a dark background\n /\n.cre8-c-link-list--inverted {\n --cre8-link-list-link-color: var(--cre8-color-content-knockout);\n}\n\n/\n Display link list\n/\n.cre8-c-link-list--display {\n color: var(--cre8-color-content-strong);\n}\n\n/\n Condensed link list\n * 1) Removes spacing between link list items\n /\n.cre8-c-link-list--condensed {\n margin-top: -0.625rem;\n /\n Slotted link list item within condensed link list\n /\n}\n.cre8-c-link-list--condensed ::slotted(cre8-link-list-item) {\n margin-top: 0.625rem;\n}\n\n/\n Small link list\n /\n.cre8-c-link-list--sm {\n font-family: var(--cre8-typography-body-small-font-family);\n font-size: var(--cre8-typography-body-small-font-size);\n font-weight: var(--cre8-typography-body-small-font-weight);\n line-height: var(--cre8-typography-body-small-line-height);\n text-decoration: var(--cre8-typography-body-small-text-decoration);\n text-transform: var(--cre8-typography-body-small-text-transform);\n}\n\n/\n Horizontal behavior\n * 1) Displays as a horizontal list\n /\n.cre8-c-link-list--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n margin: -0.5rem 0 0 -1rem;\n /\n Slotted link list item within horizontal link list\n /\n}\n.cre8-c-link-list--horizontal ::slotted(cre8-link-list-item) {\n margin-top: 0.5rem;\n margin-left: 1rem;\n}\n\n/\n Responsive behavior\n * 1) Displays as a horizontal list on small screens and moves to a vertical\n /\n@media all and (max-width: 768px) {\n .cre8-c-link-list--responsive {\n flex-direction: row;\n flex-wrap: wrap;\n margin: -0.5rem 0 0 -1rem;\n /\n Slotted link list item within responsive link list\n */\n }\n .cre8-c-link-list--responsive ::slotted(cre8-link-list-item) {\n margin-top: 0.5rem;\n margin-left: 1rem;\n }\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"link-list.styles.js","sourceRoot":"","sources":["../../../components/link-list/link-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAusBhB,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 A list of hyperlinks\n * 1) Override preset line-height value to condense link text. Note: this should\n * be done sparingly to control wrapping text for specific scenarios\n /\n.cre8-c-link-list {\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-top: -1rem;\n list-style: none;\n /\n Slotted link list item\n /\n}\n.cre8-c-link-list ::slotted(cre8-link-list-item) {\n margin-top: var(--cre8-spacing-16);\n}\n\n/\n A secondary link list\n * 1) Uses a more subtle treatment than the default link list\n * 2) TODO: Create a tier 2 token for secondary link colors\n /\n.cre8-c-link-list--secondary {\n --cre8-link-list-item-active-text-color: var(--cre8-color-content-default);\n / 2 /\n color: var(--cre8-color-content-subtle);\n}\n\n/\n Inverted link list\n * 1) Link list on a dark background\n /\n.cre8-c-link-list--inverted {\n --cre8-link-list-link-color: var(--cre8-color-content-knockout);\n}\n\n/\n Display link list\n/\n.cre8-c-link-list--display {\n color: var(--cre8-color-content-strong);\n}\n\n/\n Condensed link list\n * 1) Removes spacing between link list items\n /\n.cre8-c-link-list--condensed {\n margin-top: -0.625rem;\n /\n Slotted link list item within condensed link list\n /\n}\n.cre8-c-link-list--condensed ::slotted(cre8-link-list-item) {\n margin-top: var(--cre8-spacing-8);\n}\n\n/\n Small link list\n /\n.cre8-c-link-list--sm {\n font-family: var(--cre8-typography-body-small-font-family);\n font-size: var(--cre8-typography-body-small-font-size);\n font-weight: var(--cre8-typography-body-small-font-weight);\n line-height: var(--cre8-typography-body-small-line-height);\n text-decoration: var(--cre8-typography-body-small-text-decoration);\n text-transform: var(--cre8-typography-body-small-text-transform);\n}\n\n/\n Horizontal behavior\n * 1) Displays as a horizontal list\n /\n.cre8-c-link-list--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n margin: -0.5rem 0 0 -1rem;\n /\n Slotted link list item within horizontal link list\n /\n}\n.cre8-c-link-list--horizontal ::slotted(cre8-link-list-item) {\n margin-top: var(--cre8-spacing-8);\n margin-left: var(--cre8-spacing-16);\n}\n\n/\n Responsive behavior\n * 1) Displays as a horizontal list on small screens and moves to a vertical\n /\n@media all and (max-width: 768px) {\n .cre8-c-link-list--responsive {\n flex-direction: row;\n flex-wrap: wrap;\n margin: -0.5rem 0 0 -1rem;\n /\n Slotted link list item within responsive link list\n */\n }\n .cre8-c-link-list--responsive ::slotted(cre8-link-list-item) {\n margin-top: var(--cre8-spacing-8);\n margin-left: var(--cre8-spacing-16);\n }\n}`;\nexport default styles;\n"]}

package/lib/components/link-list-item/link-list-item.styles.js CHANGED Viewed

@@ -632,7 +632,7 @@ span.ripple {
  * 1) Container to place things like badges after an item
  */
 .cre8-c-link-list__item-before {
-  margin-right: 0.5rem;
+  margin-right: var(--cre8-spacing-8);
 }
 /**
@@ -640,7 +640,7 @@ span.ripple {
  * 1) Container to place things like badges after an item
  */
 .cre8-c-link-list__item-after {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }
 ::slotted(cre8-icon-legacy) {

package/lib/components/link-list-item/link-list-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link-list-item.styles.js","sourceRoot":"","sources":["../../../components/link-list-item/link-list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuoBhB,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) An individual list item with a link inside\n /\n/\n Link list link\n * 1) Set to inherit color so that the link list link. Maybe a TODO\n /\n.cre8-c-link-list__item {\n display: flex;\n align-items: center;\n}\n\n/\n Link list link\n /\n.cre8-c-link-list__link {\n display: flex;\n align-items: center;\n color: var(--cre8-link-list-link-color, var(--cre8-color-content-link));\n text-decoration: underline;\n}\n.cre8-c-link-list__link:hover, .cre8-c-link-list__link:focus {\n color: var(--cre8-link-list-link-hover-color, var(--cre8-color-content-link-hover));\n text-decoration: none;\n}\n.cre8-c-link-list__link {\n /\n Link list link within active link list item\n * 1) This custom property cascade is set at the link list level\n * 2) TODO: Discuss how we want to handle bold variants since mixins can't get passed down\n /\n}\n.cre8-c-link-list__item.cre8-is-active .cre8-c-link-list__link {\n color: var(--cre8-link-list-item-active-text-color);\n font-weight: var(--cre8-font-weight-bold);\n / 2 /\n}\n\n/\n Link list item after\n * 1) Container to place things like badges after an item\n /\n.cre8-c-link-list__item-before {\n margin-right: 0.5rem;\n}\n\n/\n Link list item after\n * 1) Container to place things like badges after an item\n */\n.cre8-c-link-list__item-after {\n margin-left: 0.5rem;\n}\n\n::slotted(cre8-icon-legacy) {\n --cre8-icon-height: 1.5rem;\n --cre8-icon-width: 1.5rem;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"link-list-item.styles.js","sourceRoot":"","sources":["../../../components/link-list-item/link-list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuoBhB,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) An individual list item with a link inside\n /\n/\n Link list link\n * 1) Set to inherit color so that the link list link. Maybe a TODO\n /\n.cre8-c-link-list__item {\n display: flex;\n align-items: center;\n}\n\n/\n Link list link\n /\n.cre8-c-link-list__link {\n display: flex;\n align-items: center;\n color: var(--cre8-link-list-link-color, var(--cre8-color-content-link));\n text-decoration: underline;\n}\n.cre8-c-link-list__link:hover, .cre8-c-link-list__link:focus {\n color: var(--cre8-link-list-link-hover-color, var(--cre8-color-content-link-hover));\n text-decoration: none;\n}\n.cre8-c-link-list__link {\n /\n Link list link within active link list item\n * 1) This custom property cascade is set at the link list level\n * 2) TODO: Discuss how we want to handle bold variants since mixins can't get passed down\n /\n}\n.cre8-c-link-list__item.cre8-is-active .cre8-c-link-list__link {\n color: var(--cre8-link-list-item-active-text-color);\n font-weight: var(--cre8-font-weight-bold);\n / 2 /\n}\n\n/\n Link list item after\n * 1) Container to place things like badges after an item\n /\n.cre8-c-link-list__item-before {\n margin-right: var(--cre8-spacing-8);\n}\n\n/\n Link list item after\n * 1) Container to place things like badges after an item\n */\n.cre8-c-link-list__item-after {\n margin-left: var(--cre8-spacing-8);\n}\n\n::slotted(cre8-icon-legacy) {\n --cre8-icon-height: 1.5rem;\n --cre8-icon-width: 1.5rem;\n}`;\nexport default styles;\n"]}

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

@@ -606,7 +606,7 @@ span.ripple {
   list-style: none;
   padding: 0;
   margin: 0;
-  margin-bottom: 1rem;
+  margin-bottom: var(--cre8-spacing-16);
 }
 /**
@@ -615,8 +615,8 @@ span.ripple {
  */
 ::slotted(cre8-list-item) {
   display: block;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: var(--cre8-padding-16);
+  padding-bottom: var(--cre8-padding-16);
   border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle);
   /**
   * List item with bare list
@@ -634,8 +634,8 @@ span.ripple {
   */
 }
 .cre8-c-list--condensed ::slotted(cre8-list-item) {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: var(--cre8-padding-8);
+  padding-bottom: var(--cre8-padding-8);
 }
 ::slotted(cre8-list-item) {
   /**
@@ -644,8 +644,8 @@ span.ripple {
   */
 }
 .cre8-c-list--padded ::slotted(cre8-list-item) {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding-top: var(--cre8-spacing-32);
+  padding-bottom: var(--cre8-spacing-32);
 }`;
 export default styles;
 //# sourceMappingURL=list.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../components/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuoBhB,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) Generic stacked list that allows for styling of borders in between items\n /\n.cre8-c-list {\n list-style: none;\n padding: 0;\n margin: 0;\n margin-bottom: 1rem;\n}\n\n/\n Slotted list item compponent\n * TODO: Add tier 2 variable that is used for light borders for cards, table rows, etc.\n /\n::slotted(cre8-list-item) {\n display: block;\n padding-top: 1rem;\n padding-bottom: 1rem;\n border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle);\n /\n List item with bare list\n * 1) Remove the border between items\n /\n}\n.cre8-c-list--bare ::slotted(cre8-list-item) {\n border-bottom: 0;\n / 1 /\n}\n::slotted(cre8-list-item) {\n /\n List item with condensed list\n * 1) Reduce padding between items compared to the default\n /\n}\n.cre8-c-list--condensed ::slotted(cre8-list-item) {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n::slotted(cre8-list-item) {\n /\n List item with padded list\n * 1) Increase padding between items compared to the default\n */\n}\n.cre8-c-list--padded ::slotted(cre8-list-item) {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"list.styles.js","sourceRoot":"","sources":["../../../components/list/list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuoBhB,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) Generic stacked list that allows for styling of borders in between items\n /\n.cre8-c-list {\n list-style: none;\n padding: 0;\n margin: 0;\n margin-bottom: var(--cre8-spacing-16);\n}\n\n/\n Slotted list item compponent\n * TODO: Add tier 2 variable that is used for light borders for cards, table rows, etc.\n /\n::slotted(cre8-list-item) {\n display: block;\n padding-top: var(--cre8-padding-16);\n padding-bottom: var(--cre8-padding-16);\n border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle);\n /\n List item with bare list\n * 1) Remove the border between items\n /\n}\n.cre8-c-list--bare ::slotted(cre8-list-item) {\n border-bottom: 0;\n / 1 /\n}\n::slotted(cre8-list-item) {\n /\n List item with condensed list\n * 1) Reduce padding between items compared to the default\n /\n}\n.cre8-c-list--condensed ::slotted(cre8-list-item) {\n padding-top: var(--cre8-padding-8);\n padding-bottom: var(--cre8-padding-8);\n}\n::slotted(cre8-list-item) {\n /\n List item with padded list\n * 1) Increase padding between items compared to the default\n */\n}\n.cre8-c-list--padded ::slotted(cre8-list-item) {\n padding-top: var(--cre8-spacing-32);\n padding-bottom: var(--cre8-spacing-32);\n}`;\nexport default styles;\n"]}

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

@@ -660,7 +660,7 @@ span.ripple {
  */
 .cre8-c-modal__header {
   display: flex;
-  padding: 2rem 3rem 1rem;
+  padding: var(--cre8-spacing-32) var(--cre8-spacing-48) var(--cre8-padding-16);
   align-items: center;
   /**
    * Modal Header with Error state
@@ -708,7 +708,7 @@ span.ripple {
 .cre8-c-modal__header-inner {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--cre8-spacing-16);
 }
 .cre8-c-modal__header-inner cre8-icon .cre8-modal-icon {
   height: 2rem;
@@ -721,7 +721,7 @@ span.ripple {
 .cre8-c-modal__body {
   max-height: 240px;
   overflow: auto;
-  padding: 0 3rem;
+  padding: 0 var(--cre8-spacing-48);
   /**
    * Modal Window Body for mobile user screen widths
    */
@@ -737,7 +737,7 @@ span.ripple {
  * Modal Window Footer
  */
 .cre8-c-modal__footer {
-  padding: 1.5rem 3rem calc(100vh - 95dvh);
+  padding: var(--cre8-padding-24) var(--cre8-spacing-48) calc(100vh - 95dvh);
 }
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.styles.js","sourceRoot":"","sources":["../../../components/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0uBhB,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 #MODAL\n\\\\------------------------------------/\n:host {\n display: block;\n}\n\n/\n 1) Modal Composable Component\n /\n.cre8-c-modal {\n position: fixed;\n height: 100vh;\n width: 100vw;\n top: 0;\n left: 0;\n display: none;\n justify-content: center;\n align-items: center;\n background: rgba(0, 0, 0, 0.25);\n z-index: 1000;\n}\n\n.cre8-c-modal.cre8-is-active {\n display: flex;\n visibility: visible;\n opacity: 1;\n}\n\n/\n Modal Focus Trap for Window (keeps focus in modal until closed)\n /\n.cre8-c-modal__focus-trap {\n display: contents;\n}\n\n/\n Modal Window\n /\n.cre8-c-modal__window {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: fixed;\n background: var(--cre8-color-bg-default);\n width: 34rem;\n max-width: 100%;\n border-radius: var(--cre8-border-radius-container);\n overflow: hidden;\n overflow-y: auto;\n /\n Modal Window for mobile user screen widths\n /\n}\n@media all and (max-width: 768px) {\n .cre8-c-modal__window {\n position: inherit;\n height: 100%;\n width: 100%;\n }\n}\n.cre8-c-modal__window:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n\n/\n Modal Window Header\n /\n.cre8-c-modal__header {\n display: flex;\n padding: 2rem 3rem 1rem;\n align-items: center;\n /\n Modal Header with Error state\n * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n /\n}\n.cre8-c-modal--error .cre8-c-modal__header .cre8-modal-icon {\n color: var(--cre8-color-content-error-icon);\n / 1 /\n}\n.cre8-c-modal__header {\n /\n Modal Header with Warning state\n * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n /\n}\n.cre8-c-modal--warning .cre8-c-modal__header .cre8-modal-icon {\n color: var(--cre8-color-content-warning-icon);\n / 1 /\n}\n.cre8-c-modal__header {\n /\n Modal Header with Success state\n * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n /\n}\n.cre8-c-modal--success .cre8-c-modal__header .cre8-modal-icon {\n color: var(--cre8-color-content-success-icon);\n / 1 /\n}\n.cre8-c-modal__header {\n /\n Modal Header with Info or Help State\n * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n /\n}\n.cre8-c-modal--info .cre8-c-modal__header .cre8-modal-icon, .cre8-c-modal--help .cre8-c-modal__header .cre8-modal-icon {\n color: var(--cre8-color-content-info-icon);\n / 1 /\n}\n\n/\n Modal Heading\n /\n.cre8-c-modal__header-inner {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n.cre8-c-modal__header-inner cre8-icon .cre8-modal-icon {\n height: 2rem;\n width: 2rem;\n}\n\n/\n Modal Window Body\n /\n.cre8-c-modal__body {\n max-height: 240px;\n overflow: auto;\n padding: 0 3rem;\n /\n Modal Window Body for mobile user screen widths\n /\n}\n@media all and (max-width: 768px) {\n .cre8-c-modal__body {\n height: 100%;\n max-height: max-content;\n }\n}\n\n/\n Modal Window Footer\n /\n.cre8-c-modal__footer {\n padding: 1.5rem 3rem calc(100vh - 95dvh);\n}\n\n/\n Modal Window Close button\n */\n.cre8-c-modal__close-button {\n margin-left: auto;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"modal.styles.js","sourceRoot":"","sources":["../../../components/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0uBhB,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 #MODAL\n\\\\------------------------------------/\n:host {\n display: block;\n}\n\n/\n 1) Modal Composable Component\n /\n.cre8-c-modal {\n position: fixed;\n height: 100vh;\n width: 100vw;\n top: 0;\n left: 0;\n display: none;\n justify-content: center;\n align-items: center;\n background: rgba(0, 0, 0, 0.25);\n z-index: 1000;\n}\n\n.cre8-c-modal.cre8-is-active {\n display: flex;\n visibility: visible;\n opacity: 1;\n}\n\n/\n Modal Focus Trap for Window (keeps focus in modal until closed)\n /\n.cre8-c-modal__focus-trap {\n display: contents;\n}\n\n/\n Modal Window\n /\n.cre8-c-modal__window {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: fixed;\n background: var(--cre8-color-bg-default);\n width: 34rem;\n max-width: 100%;\n border-radius: var(--cre8-border-radius-container);\n overflow: hidden;\n overflow-y: auto;\n /\n Modal Window for mobile user screen widths\n /\n}\n@media all and (max-width: 768px) {\n .cre8-c-modal__window {\n position: inherit;\n height: 100%;\n width: 100%;\n }\n}\n.cre8-c-modal__window:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n\n/\n Modal Window Header\n /\n.cre8-c-modal__header {\n display: flex;\n padding: var(--cre8-spacing-32) var(--cre8-spacing-48) var(--cre8-padding-16);\n align-items: center;\n /\n Modal Header with Error state\n * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n /\n}\n.cre8-c-modal--error .cre8-c-modal__header .cre8-modal-icon {\n color: var(--cre8-color-content-error-icon);\n / 1 /\n}\n.cre8-c-modal__header {\n /\n Modal Header with Warning state\n * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n /\n}\n.cre8-c-modal--warning .cre8-c-modal__header .cre8-modal-icon {\n color: var(--cre8-color-content-warning-icon);\n / 1 /\n}\n.cre8-c-modal__header {\n /\n Modal Header with Success state\n * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n /\n}\n.cre8-c-modal--success .cre8-c-modal__header .cre8-modal-icon {\n color: var(--cre8-color-content-success-icon);\n / 1 /\n}\n.cre8-c-modal__header {\n /\n Modal Header with Info or Help State\n * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon\n /\n}\n.cre8-c-modal--info .cre8-c-modal__header .cre8-modal-icon, .cre8-c-modal--help .cre8-c-modal__header .cre8-modal-icon {\n color: var(--cre8-color-content-info-icon);\n / 1 /\n}\n\n/\n Modal Heading\n /\n.cre8-c-modal__header-inner {\n display: flex;\n align-items: center;\n gap: var(--cre8-spacing-16);\n}\n.cre8-c-modal__header-inner cre8-icon .cre8-modal-icon {\n height: 2rem;\n width: 2rem;\n}\n\n/\n Modal Window Body\n /\n.cre8-c-modal__body {\n max-height: 240px;\n overflow: auto;\n padding: 0 var(--cre8-spacing-48);\n /\n Modal Window Body for mobile user screen widths\n /\n}\n@media all and (max-width: 768px) {\n .cre8-c-modal__body {\n height: 100%;\n max-height: max-content;\n }\n}\n\n/\n Modal Window Footer\n /\n.cre8-c-modal__footer {\n padding: var(--cre8-padding-24) var(--cre8-spacing-48) calc(100vh - 95dvh);\n}\n\n/\n Modal Window Close button\n */\n.cre8-c-modal__close-button {\n margin-left: auto;\n}`;\nexport default styles;\n"]}

package/lib/components/multi-select/multi-select.styles.js CHANGED Viewed

@@ -733,7 +733,7 @@ span.ripple {
   min-height: 30px;
   width: 100%;
   border-right: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  padding-right: 2.75rem;
+  padding-right: var(--cre8-spacing-40);
 }
 .cre8-c-multi-select__tag-wrapper {
@@ -743,7 +743,7 @@ span.ripple {
   display: flex;
   flex-wrap: wrap;
   height: 100%;
-  gap: 0.25rem;
+  gap: var(--cre8-spacing-4);
 }
 .cre8-c-multi-select__icons-wrapper {
@@ -751,7 +751,7 @@ span.ripple {
   justify-content: end;
   margin-right: -36px;
   margin-left: -48px;
-  gap: 1.5rem;
+  gap: var(--cre8-spacing-24);
   min-width: 96px;
 }
 .cre8-c-multi-select__icons-wrapper button {

package/lib/components/multi-select/multi-select.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multi-select.styles.js","sourceRoot":"","sources":["../../../components/multi-select/multi-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAg0BhB,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: block;\n}\n\n.cre8-c-multi-select {\n position: relative;\n}\n\n/\n Label\n /\n.cre8-c-multi-select__label {\n font-family: var(--cre8-typography-label-small-font-family);\n font-size: var(--cre8-typography-label-small-font-size);\n font-weight: var(--cre8-typography-label-small-font-weight);\n line-height: var(--cre8-typography-label-small-line-height);\n text-decoration: var(--cre8-typography-label-small-text-decoration);\n text-transform: var(--cre8-typography-label-small-text-transform);\n display: block;\n margin-bottom: 0.5rem;\n margin-left: var(--cre8-input-label-margin-left, 0px);\n}\n\n/\n Body\n * 1) The div that contains the input and icons\n /\n.cre8-c-multi-select__body {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\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 outline: var(--cre8-border-width-focus) solid transparent;\n outline-offset: 0.125rem;\n --size-base-unit: .5rem;\n -webkit-appearance: none;\n width: 100%;\n border-width: var(--cre8-border-width-default);\n border-style: solid;\n border-color: var(--cre8-color-border-strong);\n border-radius: var(--cre8-border-radius-default);\n padding: var(--cre8-input-padding, 0.75rem 0.5rem);\n color: var(--cre8-color-content-default);\n background-color: var(--cre8-color-bg-default);\n transition: outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n /\n Hover, focus, active, and focus-visible styles for default input elements\n /\n}\n.cre8-c-multi-select__body:hover:not(:disabled), .cre8-c-multi-select__body:focus:not(:disabled), .cre8-c-multi-select__body:active:not(:disabled), .cre8-c-multi-select__body:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n /\n Error state\n /\n}\n.cre8-is-error .cre8-c-multi-select__body:hover:not(:disabled), .cre8-is-error .cre8-c-multi-select__body:focus:not(:disabled), .cre8-is-error .cre8-c-multi-select__body:active:not(:disabled), .cre8-is-error .cre8-c-multi-select__body:focus-visible {\n outline-color: var(--cre8-color-border-error);\n}\n.cre8-c-multi-select__body:hover:not(:disabled), .cre8-c-multi-select__body:focus:not(:disabled), .cre8-c-multi-select__body:active:not(:disabled), .cre8-c-multi-select__body:focus-visible {\n /\n Success state\n /\n}\n.cre8-is-success .cre8-c-multi-select__body:hover:not(:disabled), .cre8-is-success .cre8-c-multi-select__body:focus:not(:disabled), .cre8-is-success .cre8-c-multi-select__body:active:not(:disabled), .cre8-is-success .cre8-c-multi-select__body:focus-visible {\n outline-color: var(--cre8-color-border-success);\n}\n.cre8-c-multi-select__body {\n /\n Disabled styles for default input elements\n /\n}\n.cre8-c-multi-select__body:disabled {\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n color: var(--cre8-color-content-disabled);\n cursor: not-allowed;\n /\n Disabled text colors\n /\n}\n.cre8-c-multi-select__body:disabled::placeholder {\n color: var(--cre8-color-content-disabled);\n}\n.cre8-c-multi-select__body {\n /\n Placeholder styles for default input elements\n /\n}\n.cre8-c-multi-select__body::placeholder {\n color: var(--cre8-color-content-subtle);\n}\n.cre8-c-multi-select__body {\n /\n Error state for default input elements\n /\n}\n.cre8-is-error .cre8-c-multi-select__body {\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-multi-select__body {\n /\n Success state for default input elements\n /\n}\n.cre8-is-success .cre8-c-multi-select__body {\n border-color: var(--cre8-color-border-success);\n}\n.cre8-c-multi-select__body {\n padding: var(--cre8-spacing-8);\n padding-inline-end: 2.75rem;\n min-width: 240px;\n cursor: pointer;\n min-height: 3rem;\n height: fit-content;\n}\n.cre8-is-disabled .cre8-c-multi-select__body {\n box-shadow: none;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n cursor: not-allowed;\n outline: none;\n}\n.cre8-is-disabled .cre8-c-multi-select__body:hover, .cre8-is-disabled .cre8-c-multi-select__body:focus, .cre8-is-disabled .cre8-c-multi-select__body:active, .cre8-is-disabled .cre8-c-multi-select__body:focus-visible {\n outline: none;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n color: var(--cre8-color-content-disabled);\n}\n.cre8-is-disabled .cre8-c-multi-select__body .cre8-c-multi-select__content {\n border-color: var(--cre8-color-border-disabled);\n}\n\n.cre8-c-multi-select__content {\n display: flex;\n min-height: 30px;\n width: 100%;\n border-right: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n padding-right: 2.75rem;\n}\n\n.cre8-c-multi-select__tag-wrapper {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n height: 100%;\n gap: 0.25rem;\n}\n\n.cre8-c-multi-select__icons-wrapper {\n display: flex;\n justify-content: end;\n margin-right: -36px;\n margin-left: -48px;\n gap: 1.5rem;\n min-width: 96px;\n}\n.cre8-c-multi-select__icons-wrapper button {\n background-color: inherit;\n border: none;\n padding: none;\n}\n.cre8-is-disabled .cre8-c-multi-select__icons-wrapper button {\n cursor: not-allowed;\n}\n\n.cre8-c-multi-select--no-clear-icon .cre8-c-multi-select__clear_icon {\n display: none;\n}\n\n/\n Select Icon\n * 1) The icons within the body container positioned absolutely over the input\n /\ncre8-icon {\n display: flex;\n pointer-events: none;\n color: var(--cre8-color-button-tertiary-content);\n}\n.cre8-is-disabled cre8-icon {\n color: var(--cre8-color-border-disabled);\n}\n\n.cre8-c-multi-select__dropdown {\n background-color: var(--cre8-color-bg-default);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n box-shadow: var(--cre8-shadow-default);\n border-radius: var(--cre8-border-radius-container) var(--cre8-border-radius-container);\n flex-direction: column;\n left: 0;\n min-width: 100%;\n position: absolute;\n top: 100%;\n white-space: nowrap;\n margin-top: var(--cre8-spacing-4);\n margin-left: 0;\n padding: var(--cre8-spacing-8);\n}\n.cre8-c-multi-select__dropdown ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n.cre8-c-multi-select__dropdown li {\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-color: var(--cre8-color-bg-default);\n border: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-transparent);\n border-radius: var(--cre8-border-radius-none);\n color: var(--cre8-color-content-default);\n width: 100%;\n cursor: pointer;\n margin: var(--cre8-spacing-0);\n padding: var(--cre8-spacing-8) var(--cre8-spacing-8);\n text-align: left;\n}\n.cre8-c-multi-select__dropdown li:active, .cre8-c-multi-select__dropdown li:hover, .cre8-c-multi-select__dropdown li:focus {\n background-color: var(--cre8-color-bg-brand-hover);\n color: var(--cre8-color-content-default);\n outline: var(--cre8-border-width-none);\n border: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);\n}\n\n/\n Select field notes\n */\n.cre8-c-multi-select__field-note,\n.cre8-c-multi-select__field-note-success,\n.cre8-c-multi-select__field-note-error {\n flex-basis: 100%;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"multi-select.styles.js","sourceRoot":"","sources":["../../../components/multi-select/multi-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAg0BhB,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: block;\n}\n\n.cre8-c-multi-select {\n position: relative;\n}\n\n/\n Label\n /\n.cre8-c-multi-select__label {\n font-family: var(--cre8-typography-label-small-font-family);\n font-size: var(--cre8-typography-label-small-font-size);\n font-weight: var(--cre8-typography-label-small-font-weight);\n line-height: var(--cre8-typography-label-small-line-height);\n text-decoration: var(--cre8-typography-label-small-text-decoration);\n text-transform: var(--cre8-typography-label-small-text-transform);\n display: block;\n margin-bottom: 0.5rem;\n margin-left: var(--cre8-input-label-margin-left, 0px);\n}\n\n/\n Body\n * 1) The div that contains the input and icons\n /\n.cre8-c-multi-select__body {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\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 outline: var(--cre8-border-width-focus) solid transparent;\n outline-offset: 0.125rem;\n --size-base-unit: .5rem;\n -webkit-appearance: none;\n width: 100%;\n border-width: var(--cre8-border-width-default);\n border-style: solid;\n border-color: var(--cre8-color-border-strong);\n border-radius: var(--cre8-border-radius-default);\n padding: var(--cre8-input-padding, 0.75rem 0.5rem);\n color: var(--cre8-color-content-default);\n background-color: var(--cre8-color-bg-default);\n transition: outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n /\n Hover, focus, active, and focus-visible styles for default input elements\n /\n}\n.cre8-c-multi-select__body:hover:not(:disabled), .cre8-c-multi-select__body:focus:not(:disabled), .cre8-c-multi-select__body:active:not(:disabled), .cre8-c-multi-select__body:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n /\n Error state\n /\n}\n.cre8-is-error .cre8-c-multi-select__body:hover:not(:disabled), .cre8-is-error .cre8-c-multi-select__body:focus:not(:disabled), .cre8-is-error .cre8-c-multi-select__body:active:not(:disabled), .cre8-is-error .cre8-c-multi-select__body:focus-visible {\n outline-color: var(--cre8-color-border-error);\n}\n.cre8-c-multi-select__body:hover:not(:disabled), .cre8-c-multi-select__body:focus:not(:disabled), .cre8-c-multi-select__body:active:not(:disabled), .cre8-c-multi-select__body:focus-visible {\n /\n Success state\n /\n}\n.cre8-is-success .cre8-c-multi-select__body:hover:not(:disabled), .cre8-is-success .cre8-c-multi-select__body:focus:not(:disabled), .cre8-is-success .cre8-c-multi-select__body:active:not(:disabled), .cre8-is-success .cre8-c-multi-select__body:focus-visible {\n outline-color: var(--cre8-color-border-success);\n}\n.cre8-c-multi-select__body {\n /\n Disabled styles for default input elements\n /\n}\n.cre8-c-multi-select__body:disabled {\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n color: var(--cre8-color-content-disabled);\n cursor: not-allowed;\n /\n Disabled text colors\n /\n}\n.cre8-c-multi-select__body:disabled::placeholder {\n color: var(--cre8-color-content-disabled);\n}\n.cre8-c-multi-select__body {\n /\n Placeholder styles for default input elements\n /\n}\n.cre8-c-multi-select__body::placeholder {\n color: var(--cre8-color-content-subtle);\n}\n.cre8-c-multi-select__body {\n /\n Error state for default input elements\n /\n}\n.cre8-is-error .cre8-c-multi-select__body {\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-multi-select__body {\n /\n Success state for default input elements\n /\n}\n.cre8-is-success .cre8-c-multi-select__body {\n border-color: var(--cre8-color-border-success);\n}\n.cre8-c-multi-select__body {\n padding: var(--cre8-spacing-8);\n padding-inline-end: 2.75rem;\n min-width: 240px;\n cursor: pointer;\n min-height: 3rem;\n height: fit-content;\n}\n.cre8-is-disabled .cre8-c-multi-select__body {\n box-shadow: none;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n cursor: not-allowed;\n outline: none;\n}\n.cre8-is-disabled .cre8-c-multi-select__body:hover, .cre8-is-disabled .cre8-c-multi-select__body:focus, .cre8-is-disabled .cre8-c-multi-select__body:active, .cre8-is-disabled .cre8-c-multi-select__body:focus-visible {\n outline: none;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n color: var(--cre8-color-content-disabled);\n}\n.cre8-is-disabled .cre8-c-multi-select__body .cre8-c-multi-select__content {\n border-color: var(--cre8-color-border-disabled);\n}\n\n.cre8-c-multi-select__content {\n display: flex;\n min-height: 30px;\n width: 100%;\n border-right: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n padding-right: var(--cre8-spacing-40);\n}\n\n.cre8-c-multi-select__tag-wrapper {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n height: 100%;\n gap: var(--cre8-spacing-4);\n}\n\n.cre8-c-multi-select__icons-wrapper {\n display: flex;\n justify-content: end;\n margin-right: -36px;\n margin-left: -48px;\n gap: var(--cre8-spacing-24);\n min-width: 96px;\n}\n.cre8-c-multi-select__icons-wrapper button {\n background-color: inherit;\n border: none;\n padding: none;\n}\n.cre8-is-disabled .cre8-c-multi-select__icons-wrapper button {\n cursor: not-allowed;\n}\n\n.cre8-c-multi-select--no-clear-icon .cre8-c-multi-select__clear_icon {\n display: none;\n}\n\n/\n Select Icon\n * 1) The icons within the body container positioned absolutely over the input\n /\ncre8-icon {\n display: flex;\n pointer-events: none;\n color: var(--cre8-color-button-tertiary-content);\n}\n.cre8-is-disabled cre8-icon {\n color: var(--cre8-color-border-disabled);\n}\n\n.cre8-c-multi-select__dropdown {\n background-color: var(--cre8-color-bg-default);\n border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);\n box-shadow: var(--cre8-shadow-default);\n border-radius: var(--cre8-border-radius-container) var(--cre8-border-radius-container);\n flex-direction: column;\n left: 0;\n min-width: 100%;\n position: absolute;\n top: 100%;\n white-space: nowrap;\n margin-top: var(--cre8-spacing-4);\n margin-left: 0;\n padding: var(--cre8-spacing-8);\n}\n.cre8-c-multi-select__dropdown ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n.cre8-c-multi-select__dropdown li {\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-color: var(--cre8-color-bg-default);\n border: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-transparent);\n border-radius: var(--cre8-border-radius-none);\n color: var(--cre8-color-content-default);\n width: 100%;\n cursor: pointer;\n margin: var(--cre8-spacing-0);\n padding: var(--cre8-spacing-8) var(--cre8-spacing-8);\n text-align: left;\n}\n.cre8-c-multi-select__dropdown li:active, .cre8-c-multi-select__dropdown li:hover, .cre8-c-multi-select__dropdown li:focus {\n background-color: var(--cre8-color-bg-brand-hover);\n color: var(--cre8-color-content-default);\n outline: var(--cre8-border-width-none);\n border: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);\n}\n\n/\n Select field notes\n */\n.cre8-c-multi-select__field-note,\n.cre8-c-multi-select__field-note-success,\n.cre8-c-multi-select__field-note-error {\n flex-basis: 100%;\n}`;\nexport default styles;\n"]}

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

@@ -593,7 +593,7 @@ span.ripple {
  * 1) Headline of a page with an h1 heading and optional description
  */
 .cre8-c-page-header {
-  margin-bottom: 2rem;
+  margin-bottom: var(--cre8-spacing-32);
 }
 /**
@@ -628,7 +628,7 @@ span.ripple {
   display: inline-block;
   position: relative;
   bottom: 0.625rem;
-  margin-left: 1rem;
+  margin-left: var(--cre8-spacing-16);
 }
 /**

package/lib/components/page-header/page-header.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"page-header.styles.js","sourceRoot":"","sources":["../../../components/page-header/page-header.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkoBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: 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) Headline of a page with an h1 heading and optional description\n /\n.cre8-c-page-header {\n margin-bottom: 2rem;\n}\n\n/\n Page header title\n /\n.cre8-c-page-header__title {\n display: inline;\n margin: 0;\n font-family: var(--cre8-typography-display-default-mobile-font-family);\n font-size: var(--cre8-typography-display-default-mobile-font-size);\n font-weight: var(--cre8-typography-display-default-mobile-font-weight);\n line-height: var(--cre8-typography-display-default-mobile-line-height);\n text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);\n text-transform: var(--cre8-typography-display-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n .cre8-c-page-header__title {\n font-family: var(--cre8-typography-display-default-font-family);\n font-size: var(--cre8-typography-display-default-font-size);\n font-weight: var(--cre8-typography-display-default-font-weight);\n line-height: var(--cre8-typography-display-default-line-height);\n text-decoration: var(--cre8-typography-display-default-text-decoration);\n text-transform: var(--cre8-typography-display-default-text-transform);\n }\n}\n\n/\n Page header title after\n * 1) Container placed after page header title if something like a badge needs to be placed there\n /\n.cre8-c-page-header__title-after {\n display: inline-block;\n position: relative;\n bottom: 0.625rem;\n margin-left: 1rem;\n}\n\n/\n Page header description\n */\n.cre8-c-page-header__description {\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}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"page-header.styles.js","sourceRoot":"","sources":["../../../components/page-header/page-header.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkoBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: 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) Headline of a page with an h1 heading and optional description\n /\n.cre8-c-page-header {\n margin-bottom: var(--cre8-spacing-32);\n}\n\n/\n Page header title\n /\n.cre8-c-page-header__title {\n display: inline;\n margin: 0;\n font-family: var(--cre8-typography-display-default-mobile-font-family);\n font-size: var(--cre8-typography-display-default-mobile-font-size);\n font-weight: var(--cre8-typography-display-default-mobile-font-weight);\n line-height: var(--cre8-typography-display-default-mobile-line-height);\n text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);\n text-transform: var(--cre8-typography-display-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n .cre8-c-page-header__title {\n font-family: var(--cre8-typography-display-default-font-family);\n font-size: var(--cre8-typography-display-default-font-size);\n font-weight: var(--cre8-typography-display-default-font-weight);\n line-height: var(--cre8-typography-display-default-line-height);\n text-decoration: var(--cre8-typography-display-default-text-decoration);\n text-transform: var(--cre8-typography-display-default-text-transform);\n }\n}\n\n/\n Page header title after\n * 1) Container placed after page header title if something like a badge needs to be placed there\n /\n.cre8-c-page-header__title-after {\n display: inline-block;\n position: relative;\n bottom: 0.625rem;\n margin-left: var(--cre8-spacing-16);\n}\n\n/\n Page header description\n */\n.cre8-c-page-header__description {\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}`;\nexport default styles;\n"]}