@tmorrow/cre8-wc 2.0.5 → 2.0.6

package/lib/components/utility-nav/utility-nav.styles.js

@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

package/lib/components/utility-nav/utility-nav.styles.js.map

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

package/lib/components/utility-nav-item/utility-nav-item.styles.d.ts.map

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

package/lib/components/utility-nav-item/utility-nav-item.styles.js

@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

package/lib/components/utility-nav-item/utility-nav-item.styles.js.map

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

package/lib/design-tokens/core/scss/theming/component.css

@@ -1 +1 @@
-*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}
+*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem;--cre8-l-max-width: 82.5rem;--cre8-l-linelength-width: 42rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem;--cre8-l-max-width: 82.5rem;--cre8-l-linelength-width: 42rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}

package/lib/design-tokens/core/scss/theming/variables.css

@@ -1,5 +1,9 @@
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -36,4 +40,6 @@
  */
 /**
  * Visually hidden from display
- *//*# sourceMappingURL=variables.css.map */
+ */
+
+/*# sourceMappingURL=variables.css.map */

package/lib/design-tokens/core/scss/theming/variables.scss

@@ -1,6 +1,17 @@
 // Global CSS custom properties that aren't part of a themes dcre8gn tokens
 :root {
   --size-base-unit: 0.5rem;
+
+  // Layout widths
+  // 1) `cre8-layout-container` and `cre8-linelength-container` are built
+  //    entirely around these two properties, but neither had a definition
+  //    anywhere in the shipped package. `max-width` therefore resolved to an
+  //    invalid value and fell back to `none`, so both containers silently did
+  //    nothing unless the host page declared the properties itself.
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

package/mcp-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.5",
+  "version": "2.0.6",
   "library": "@tmorrow/cre8-wc",
   "tagPrefix": "cre8",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmorrow/cre8-wc",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "license": "BSD-3-Clause",
   "scripts": {
@@ -74,6 +74,10 @@
       "types": "./lib/icons/*",
       "default": "./lib/icons/*"
     },
+    "./themes/*": "./lib/design-tokens/brands/*/css/tokens_*.css",
+    "./themes/tmorrow-frost": "./lib/design-tokens/brands/tmorrow/css/tokens_tmorrow-frost.css",
+    "./themes/tmorrow-neon": "./lib/design-tokens/brands/tmorrow/css/tokens_tmorrow-neon.css",
+    "./styles/*": "./lib/design-tokens/core/scss/theming/*",
     "./design-tokens/*": {
       "import": "./lib/design-tokens/*",
       "types": "./lib/design-tokens/*",
@@ -121,15 +125,15 @@
     "@mdx-js/rollup": "^3.1.1",
     "@open-wc/testing-helpers": "^3.0.1",
     "@skypack/package-check": "^0.2.2",
-    "@storybook/addon-a11y": "10.0.6",
-    "@storybook/addon-docs": "10.0.6",
+    "@storybook/addon-a11y": "10.5.4",
+    "@storybook/addon-docs": "10.5.4",
     "@storybook/addon-mcp": "^0.5.0",
-    "@storybook/addon-themes": "10.0.6",
-    "@storybook/builder-vite": "10.0.6",
-    "@storybook/react": "^10.0.6",
-    "@storybook/react-vite": "^10.3.5",
-    "@storybook/web-components": "^10.0.6",
-    "@storybook/web-components-vite": "^10.0.6",
+    "@storybook/addon-themes": "10.5.4",
+    "@storybook/builder-vite": "10.5.4",
+    "@storybook/react": "10.5.4",
+    "@storybook/react-vite": "10.5.4",
+    "@storybook/web-components": "10.5.4",
+    "@storybook/web-components-vite": "10.5.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
@@ -146,7 +150,6 @@
     "del-cli": "^7.0.0",
     "dotenv": "^17.2.3",
     "element-internals-polyfill": "^3.0.2",
-    "fs": "0.0.1-security",
     "glob": "^11.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
@@ -158,7 +161,6 @@
     "lint-staged": "^16.2.6",
     "loader-utils": "^3.3.1",
     "marked": "^17.0.0",
-    "path": "^0.12.7",
     "plop": "^4.0.4",
     "postcss": "^8.5.6",
     "react": "^19.2.0",
@@ -166,7 +168,7 @@
     "react-dom": "^19.2.0",
     "sanitize-html": "^2.17.0",
     "sass": "^1.97.2",
-    "storybook": "^10.0.6",
+    "storybook": "10.5.4",
     "style-dictionary": "^5.1.1",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.4.5",

package/react-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.5",
+  "version": "2.0.6",
   "library": "@tmorrow/cre8-react",
   "componentPrefix": "Cre8",
   "description": "React wrappers for cre8 Web Components (@tmorrow/cre8-wc)",
@@ -3587,7 +3587,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@tmorrow/cre8-wc": "^2.0.5",
+    "@tmorrow/cre8-wc": "^2.0.6",
     "react": ">=18",
     "react-dom": ">=18"
   }

package/dist/assets/Changelog-Documentation-CblO0Xot.js

@@ -1,3 +0,0 @@
-import{j as t,M as s}from"./blocks-B_WQ1U89.js";import{useMDXComponents as r}from"./index-DSuzaFN1.js";import"./preload-helper-PPVm8Dsz.js";import"./iframe-CdWmiVXf.js";import"./_commonjsHelpers-DaWZu8wl.js";function o(n){const e={h1:"h1",p:"p",...r(),...n.components};return t.jsxs(t.Fragment,{children:[t.jsx(s,{title:"Documentation/Changelog"}),`
-`,t.jsx(e.h1,{id:"changelog",children:"Changelog"}),`
-`,t.jsx(e.p,{children:"Please check the CHANGELOG.md file in the project root for version history and updates."})]})}function p(n={}){const{wrapper:e}={...r(),...n.components};return e?t.jsx(e,{...n,children:t.jsx(o,{...n})}):o(n)}export{p as default};

package/dist/assets/Code-Guidelines-BRHT7M6Y.js

@@ -1,3 +0,0 @@
-import{j as e,M as i}from"./blocks-B_WQ1U89.js";import{useMDXComponents as s}from"./index-DSuzaFN1.js";import"./preload-helper-PPVm8Dsz.js";import"./iframe-CdWmiVXf.js";import"./_commonjsHelpers-DaWZu8wl.js";function o(n){const t={h1:"h1",p:"p",...s(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Documentation/Code Guidelines"}),`
-`,e.jsx(t.h1,{id:"code-guidelines",children:"Code Guidelines"}),`
-`,e.jsx(t.p,{children:"Please check the docs/CODE_GUIDELINES.md file for coding standards and best practices."})]})}function u(n={}){const{wrapper:t}={...s(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(o,{...n})}):o(n)}export{u as default};

package/dist/assets/Color-64QXVMR3-CVvl9AcC.js

@@ -1 +0,0 @@
-import{r as x,R as b,W as J,g as me,s as M,T as ye,F as xe,a as we}from"./blocks-B_WQ1U89.js";import{a as d,c as ke,d as q}from"./iframe-CdWmiVXf.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";var _e=q({"../../node_modules/color-name/index.js"(t,l){l.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),Q=q({"../../node_modules/color-convert/conversions.js"(t,l){var i=_e(),f={};for(const e of Object.keys(i))f[i[e]]=e;var s={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};l.exports=s;for(const e of Object.keys(s)){if(!("channels"in s[e]))throw new Error("missing channels property: "+e);if(!("labels"in s[e]))throw new Error("missing channel labels property: "+e);if(s[e].labels.length!==s[e].channels)throw new Error("channel and label counts mismatch: "+e);const{channels:r,labels:n}=s[e];delete s[e].channels,delete s[e].labels,Object.defineProperty(s[e],"channels",{value:r}),Object.defineProperty(s[e],"labels",{value:n})}s.rgb.hsl=function(e){const r=e[0]/255,n=e[1]/255,o=e[2]/255,a=Math.min(r,n,o),c=Math.max(r,n,o),u=c-a;let h,g;c===a?h=0:r===c?h=(n-o)/u:n===c?h=2+(o-r)/u:o===c&&(h=4+(r-n)/u),h=Math.min(h*60,360),h<0&&(h+=360);const p=(a+c)/2;return c===a?g=0:p<=.5?g=u/(c+a):g=u/(2-c-a),[h,g*100,p*100]},s.rgb.hsv=function(e){let r,n,o,a,c;const u=e[0]/255,h=e[1]/255,g=e[2]/255,p=Math.max(u,h,g),y=p-Math.min(u,h,g),m=d(function(_){return(p-_)/6/y+1/2},"diffc");return y===0?(a=0,c=0):(c=y/p,r=m(u),n=m(h),o=m(g),u===p?a=o-n:h===p?a=1/3+r-o:g===p&&(a=2/3+n-r),a<0?a+=1:a>1&&(a-=1)),[a*360,c*100,p*100]},s.rgb.hwb=function(e){const r=e[0],n=e[1];let o=e[2];const a=s.rgb.hsl(e)[0],c=1/255*Math.min(r,Math.min(n,o));return o=1-1/255*Math.max(r,Math.max(n,o)),[a,c*100,o*100]},s.rgb.cmyk=function(e){const r=e[0]/255,n=e[1]/255,o=e[2]/255,a=Math.min(1-r,1-n,1-o),c=(1-r-a)/(1-a)||0,u=(1-n-a)/(1-a)||0,h=(1-o-a)/(1-a)||0;return[c*100,u*100,h*100,a*100]};function v(e,r){return(e[0]-r[0])**2+(e[1]-r[1])**2+(e[2]-r[2])**2}d(v,"comparativeDistance"),s.rgb.keyword=function(e){const r=f[e];if(r)return r;let n=1/0,o;for(const a of Object.keys(i)){const c=i[a],u=v(e,c);u<n&&(n=u,o=a)}return o},s.keyword.rgb=function(e){return i[e]},s.rgb.xyz=function(e){let r=e[0]/255,n=e[1]/255,o=e[2]/255;r=r>.04045?((r+.055)/1.055)**2.4:r/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,o=o>.04045?((o+.055)/1.055)**2.4:o/12.92;const a=r*.4124+n*.3576+o*.1805,c=r*.2126+n*.7152+o*.0722,u=r*.0193+n*.1192+o*.9505;return[a*100,c*100,u*100]},s.rgb.lab=function(e){const r=s.rgb.xyz(e);let n=r[0],o=r[1],a=r[2];n/=95.047,o/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,o=o>.008856?o**(1/3):7.787*o+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;const c=116*o-16,u=500*(n-o),h=200*(o-a);return[c,u,h]},s.hsl.rgb=function(e){const r=e[0]/360,n=e[1]/100,o=e[2]/100;let a,c,u;if(n===0)return u=o*255,[u,u,u];o<.5?a=o*(1+n):a=o+n-o*n;const h=2*o-a,g=[0,0,0];for(let p=0;p<3;p++)c=r+1/3*-(p-1),c<0&&c++,c>1&&c--,6*c<1?u=h+(a-h)*6*c:2*c<1?u=a:3*c<2?u=h+(a-h)*(2/3-c)*6:u=h,g[p]=u*255;return g},s.hsl.hsv=function(e){const r=e[0];let n=e[1]/100,o=e[2]/100,a=n;const c=Math.max(o,.01);o*=2,n*=o<=1?o:2-o,a*=c<=1?c:2-c;const u=(o+n)/2,h=o===0?2*a/(c+a):2*n/(o+n);return[r,h*100,u*100]},s.hsv.rgb=function(e){const r=e[0]/60,n=e[1]/100;let o=e[2]/100;const a=Math.floor(r)%6,c=r-Math.floor(r),u=255*o*(1-n),h=255*o*(1-n*c),g=255*o*(1-n*(1-c));switch(o*=255,a){case 0:return[o,g,u];case 1:return[h,o,u];case 2:return[u,o,g];case 3:return[u,h,o];case 4:return[g,u,o];case 5:return[o,u,h]}},s.hsv.hsl=function(e){const r=e[0],n=e[1]/100,o=e[2]/100,a=Math.max(o,.01);let c,u;u=(2-n)*o;const h=(2-n)*a;return c=n*a,c/=h<=1?h:2-h,c=c||0,u/=2,[r,c*100,u*100]},s.hwb.rgb=function(e){const r=e[0]/360;let n=e[1]/100,o=e[2]/100;const a=n+o;let c;a>1&&(n/=a,o/=a);const u=Math.floor(6*r),h=1-o;c=6*r-u,(u&1)!==0&&(c=1-c);const g=n+c*(h-n);let p,y,m;switch(u){default:case 6:case 0:p=h,y=g,m=n;break;case 1:p=g,y=h,m=n;break;case 2:p=n,y=h,m=g;break;case 3:p=n,y=g,m=h;break;case 4:p=g,y=n,m=h;break;case 5:p=h,y=n,m=g;break}return[p*255,y*255,m*255]},s.cmyk.rgb=function(e){const r=e[0]/100,n=e[1]/100,o=e[2]/100,a=e[3]/100,c=1-Math.min(1,r*(1-a)+a),u=1-Math.min(1,n*(1-a)+a),h=1-Math.min(1,o*(1-a)+a);return[c*255,u*255,h*255]},s.xyz.rgb=function(e){const r=e[0]/100,n=e[1]/100,o=e[2]/100;let a,c,u;return a=r*3.2406+n*-1.5372+o*-.4986,c=r*-.9689+n*1.8758+o*.0415,u=r*.0557+n*-.204+o*1.057,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,c=c>.0031308?1.055*c**(1/2.4)-.055:c*12.92,u=u>.0031308?1.055*u**(1/2.4)-.055:u*12.92,a=Math.min(Math.max(0,a),1),c=Math.min(Math.max(0,c),1),u=Math.min(Math.max(0,u),1),[a*255,c*255,u*255]},s.xyz.lab=function(e){let r=e[0],n=e[1],o=e[2];r/=95.047,n/=100,o/=108.883,r=r>.008856?r**(1/3):7.787*r+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;const a=116*n-16,c=500*(r-n),u=200*(n-o);return[a,c,u]},s.lab.xyz=function(e){const r=e[0],n=e[1],o=e[2];let a,c,u;c=(r+16)/116,a=n/500+c,u=c-o/200;const h=c**3,g=a**3,p=u**3;return c=h>.008856?h:(c-16/116)/7.787,a=g>.008856?g:(a-16/116)/7.787,u=p>.008856?p:(u-16/116)/7.787,a*=95.047,c*=100,u*=108.883,[a,c,u]},s.lab.lch=function(e){const r=e[0],n=e[1],o=e[2];let a;a=Math.atan2(o,n)*360/2/Math.PI,a<0&&(a+=360);const u=Math.sqrt(n*n+o*o);return[r,u,a]},s.lch.lab=function(e){const r=e[0],n=e[1],a=e[2]/360*2*Math.PI,c=n*Math.cos(a),u=n*Math.sin(a);return[r,c,u]},s.rgb.ansi16=function(e,r=null){const[n,o,a]=e;let c=r===null?s.rgb.hsv(e)[2]:r;if(c=Math.round(c/50),c===0)return 30;let u=30+(Math.round(a/255)<<2|Math.round(o/255)<<1|Math.round(n/255));return c===2&&(u+=60),u},s.hsv.ansi16=function(e){return s.rgb.ansi16(s.hsv.rgb(e),e[2])},s.rgb.ansi256=function(e){const r=e[0],n=e[1],o=e[2];return r===n&&n===o?r<8?16:r>248?231:Math.round((r-8)/247*24)+232:16+36*Math.round(r/255*5)+6*Math.round(n/255*5)+Math.round(o/255*5)},s.ansi16.rgb=function(e){let r=e%10;if(r===0||r===7)return e>50&&(r+=3.5),r=r/10.5*255,[r,r,r];const n=(~~(e>50)+1)*.5,o=(r&1)*n*255,a=(r>>1&1)*n*255,c=(r>>2&1)*n*255;return[o,a,c]},s.ansi256.rgb=function(e){if(e>=232){const c=(e-232)*10+8;return[c,c,c]}e-=16;let r;const n=Math.floor(e/36)/5*255,o=Math.floor((r=e%36)/6)/5*255,a=r%6/5*255;return[n,o,a]},s.rgb.hex=function(e){const n=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(n.length)+n},s.hex.rgb=function(e){const r=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!r)return[0,0,0];let n=r[0];r[0].length===3&&(n=n.split("").map(h=>h+h).join(""));const o=parseInt(n,16),a=o>>16&255,c=o>>8&255,u=o&255;return[a,c,u]},s.rgb.hcg=function(e){const r=e[0]/255,n=e[1]/255,o=e[2]/255,a=Math.max(Math.max(r,n),o),c=Math.min(Math.min(r,n),o),u=a-c;let h,g;return u<1?h=c/(1-u):h=0,u<=0?g=0:a===r?g=(n-o)/u%6:a===n?g=2+(o-r)/u:g=4+(r-n)/u,g/=6,g%=1,[g*360,u*100,h*100]},s.hsl.hcg=function(e){const r=e[1]/100,n=e[2]/100,o=n<.5?2*r*n:2*r*(1-n);let a=0;return o<1&&(a=(n-.5*o)/(1-o)),[e[0],o*100,a*100]},s.hsv.hcg=function(e){const r=e[1]/100,n=e[2]/100,o=r*n;let a=0;return o<1&&(a=(n-o)/(1-o)),[e[0],o*100,a*100]},s.hcg.rgb=function(e){const r=e[0]/360,n=e[1]/100,o=e[2]/100;if(n===0)return[o*255,o*255,o*255];const a=[0,0,0],c=r%1*6,u=c%1,h=1-u;let g=0;switch(Math.floor(c)){case 0:a[0]=1,a[1]=u,a[2]=0;break;case 1:a[0]=h,a[1]=1,a[2]=0;break;case 2:a[0]=0,a[1]=1,a[2]=u;break;case 3:a[0]=0,a[1]=h,a[2]=1;break;case 4:a[0]=u,a[1]=0,a[2]=1;break;default:a[0]=1,a[1]=0,a[2]=h}return g=(1-n)*o,[(n*a[0]+g)*255,(n*a[1]+g)*255,(n*a[2]+g)*255]},s.hcg.hsv=function(e){const r=e[1]/100,n=e[2]/100,o=r+n*(1-r);let a=0;return o>0&&(a=r/o),[e[0],a*100,o*100]},s.hcg.hsl=function(e){const r=e[1]/100,o=e[2]/100*(1-r)+.5*r;let a=0;return o>0&&o<.5?a=r/(2*o):o>=.5&&o<1&&(a=r/(2*(1-o))),[e[0],a*100,o*100]},s.hcg.hwb=function(e){const r=e[1]/100,n=e[2]/100,o=r+n*(1-r);return[e[0],(o-r)*100,(1-o)*100]},s.hwb.hcg=function(e){const r=e[1]/100,o=1-e[2]/100,a=o-r;let c=0;return a<1&&(c=(o-a)/(1-a)),[e[0],a*100,c*100]},s.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},s.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},s.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},s.gray.hsl=function(e){return[0,0,e[0]]},s.gray.hsv=s.gray.hsl,s.gray.hwb=function(e){return[0,100,e[0]]},s.gray.cmyk=function(e){return[0,0,0,e[0]]},s.gray.lab=function(e){return[e[0],0,0]},s.gray.hex=function(e){const r=Math.round(e[0]/100*255)&255,o=((r<<16)+(r<<8)+r).toString(16).toUpperCase();return"000000".substring(o.length)+o},s.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),Ee=q({"../../node_modules/color-convert/route.js"(t,l){var i=Q();function f(){const r={},n=Object.keys(i);for(let o=n.length,a=0;a<o;a++)r[n[a]]={distance:-1,parent:null};return r}d(f,"buildGraph");function s(r){const n=f(),o=[r];for(n[r].distance=0;o.length;){const a=o.pop(),c=Object.keys(i[a]);for(let u=c.length,h=0;h<u;h++){const g=c[h],p=n[g];p.distance===-1&&(p.distance=n[a].distance+1,p.parent=a,o.unshift(g))}}return n}d(s,"deriveBFS");function v(r,n){return function(o){return n(r(o))}}d(v,"link");function e(r,n){const o=[n[r].parent,r];let a=i[n[r].parent][r],c=n[r].parent;for(;n[c].parent;)o.unshift(n[c].parent),a=v(i[n[c].parent][c],a),c=n[c].parent;return a.conversion=o,a}d(e,"wrapConversion"),l.exports=function(r){const n=s(r),o={},a=Object.keys(n);for(let c=a.length,u=0;u<c;u++){const h=a[u];n[h].parent!==null&&(o[h]=e(h,n))}return o}}}),Me=q({"../../node_modules/color-convert/index.js"(t,l){var i=Q(),f=Ee(),s={},v=Object.keys(i);function e(n){const o=d(function(...a){const c=a[0];return c==null?c:(c.length>1&&(a=c),n(a))},"wrappedFn");return"conversion"in n&&(o.conversion=n.conversion),o}d(e,"wrapRaw");function r(n){const o=d(function(...a){const c=a[0];if(c==null)return c;c.length>1&&(a=c);const u=n(a);if(typeof u=="object")for(let h=u.length,g=0;g<h;g++)u[g]=Math.round(u[g]);return u},"wrappedFn");return"conversion"in n&&(o.conversion=n.conversion),o}d(r,"wrapRounded"),v.forEach(n=>{s[n]={},Object.defineProperty(s[n],"channels",{value:i[n].channels}),Object.defineProperty(s[n],"labels",{value:i[n].labels});const o=f(n);Object.keys(o).forEach(c=>{const u=o[c];s[n][c]=r(u),s[n][c].raw=e(u)})}),l.exports=s}}),E=ke(Me());function Z(t,l,{signal:i,edges:f}={}){let s,v=null;const e=f!=null&&f.includes("leading"),r=f==null||f.includes("trailing"),n=d(()=>{v!==null&&(t.apply(s,v),s=void 0,v=null)},"invoke"),o=d(()=>{r&&n(),h()},"onTimerEnd");let a=null;const c=d(()=>{a!=null&&clearTimeout(a),a=setTimeout(()=>{a=null,o()},l)},"schedule"),u=d(()=>{a!==null&&(clearTimeout(a),a=null)},"cancelTimer"),h=d(()=>{u(),s=void 0,v=null},"cancel"),g=d(()=>{n()},"flush"),p=d(function(...y){if(i?.aborted)return;s=this,v=y;const m=a==null;c(),e&&m&&n()},"debounced");return p.schedule=c,p.cancel=h,p.flush=g,i?.addEventListener("abort",h,{once:!0}),p}d(Z,"debounce");function ee(t,...l){return te(t,ne,...l)}d(ee,"partial");function te(t,l,...i){const f=d(function(...s){let v=0;const e=i.slice().map(n=>n===l?s[v++]:n),r=s.slice(v);return t.apply(this,e.concat(r))},"partialed");return t.prototype&&(f.prototype=Object.create(t.prototype)),f}d(te,"partialImpl");var ne=Symbol("partial.placeholder");ee.placeholder=ne;function re(t,...l){return oe(t,ae,...l)}d(re,"partialRight");function oe(t,l,...i){const f=d(function(...s){const v=i.filter(a=>a===l).length,e=Math.max(s.length-v,0),r=s.slice(0,e);let n=e;const o=i.slice().map(a=>a===l?s[n++]:a);return t.apply(this,r.concat(o))},"partialedRight");return t.prototype&&(f.prototype=Object.create(t.prototype)),f}d(oe,"partialRightImpl");var ae=Symbol("partialRight.placeholder");re.placeholder=ae;function C(){return(C=Object.assign||function(t){for(var l=1;l<arguments.length;l++){var i=arguments[l];for(var f in i)Object.prototype.hasOwnProperty.call(i,f)&&(t[f]=i[f])}return t}).apply(this,arguments)}d(C,"u");function T(t,l){if(t==null)return{};var i,f,s={},v=Object.keys(t);for(f=0;f<v.length;f++)l.indexOf(i=v[f])>=0||(s[i]=t[i]);return s}d(T,"c");function z(t){var l=x.useRef(t),i=x.useRef(function(f){l.current&&l.current(f)});return l.current=t,i.current}d(z,"i");var R=d(function(t,l,i){return l===void 0&&(l=0),i===void 0&&(i=1),t>i?i:t<l?l:t},"s"),S=d(function(t){return"touches"in t},"f"),K=d(function(t){return t&&t.ownerDocument.defaultView||self},"v"),A=d(function(t,l,i){var f=t.getBoundingClientRect(),s=S(l)?(function(v,e){for(var r=0;r<v.length;r++)if(v[r].identifier===e)return v[r];return v[0]})(l.touches,i):l;return{left:R((s.pageX-(f.left+K(t).pageXOffset))/f.width),top:R((s.pageY-(f.top+K(t).pageYOffset))/f.height)}},"d"),W=d(function(t){!S(t)&&t.preventDefault()},"h"),X=b.memo(function(t){var l=t.onMove,i=t.onKey,f=T(t,["onMove","onKey"]),s=x.useRef(null),v=z(l),e=z(i),r=x.useRef(null),n=x.useRef(!1),o=x.useMemo(function(){var h=d(function(y){W(y),(S(y)?y.touches.length>0:y.buttons>0)&&s.current?v(A(s.current,y,r.current)):p(!1)},"e"),g=d(function(){return p(!1)},"r");function p(y){var m=n.current,_=K(s.current),w=y?_.addEventListener:_.removeEventListener;w(m?"touchmove":"mousemove",h),w(m?"touchend":"mouseup",g)}return d(p,"t"),[function(y){var m=y.nativeEvent,_=s.current;if(_&&(W(m),!(function(I,be){return be&&!S(I)})(m,n.current)&&_)){if(S(m)){n.current=!0;var w=m.changedTouches||[];w.length&&(r.current=w[0].identifier)}_.focus(),v(A(_,m,r.current)),p(!0)}},function(y){var m=y.which||y.keyCode;m<37||m>40||(y.preventDefault(),e({left:m===39?.05:m===37?-.05:0,top:m===40?.05:m===38?-.05:0}))},p]},[e,v]),a=o[0],c=o[1],u=o[2];return x.useEffect(function(){return u},[u]),b.createElement("div",C({},f,{onTouchStart:a,onMouseDown:a,className:"react-colorful__interactive",ref:s,onKeyDown:c,tabIndex:0,role:"slider"}))}),O=d(function(t){return t.filter(Boolean).join(" ")},"g"),D=d(function(t){var l=t.color,i=t.left,f=t.top,s=f===void 0?.5:f,v=O(["react-colorful__pointer",t.className]);return b.createElement("div",{className:v,style:{top:100*s+"%",left:100*i+"%"}},b.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:l}}))},"p"),k=d(function(t,l,i){return l===void 0&&(l=0),i===void 0&&(i=Math.pow(10,l)),Math.round(i*t)/i},"b"),Ce={grad:.9,turn:360,rad:360/(2*Math.PI)},$e=d(function(t){return ce(F(t))},"x"),F=d(function(t){return t[0]==="#"&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:t.length===4?k(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:t.length===8?k(parseInt(t.substring(6,8),16)/255,2):1}},"C"),Re=d(function(t,l){return l===void 0&&(l="deg"),Number(t)*(Ce[l]||1)},"E"),Se=d(function(t){var l=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(t);return l?Oe({h:Re(l[1],l[2]),s:Number(l[3]),l:Number(l[4]),a:l[5]===void 0?1:Number(l[5])/(l[6]?100:1)}):{h:0,s:0,v:0,a:1}},"H"),Oe=d(function(t){var l=t.s,i=t.l;return{h:t.h,s:(l*=(i<50?i:100-i)/100)>0?2*l/(i+l)*100:0,v:i+l,a:t.a}},"N"),Ie=d(function(t){return He(se(t))},"w"),le=d(function(t){var l=t.s,i=t.v,f=t.a,s=(200-l)*i/100;return{h:k(t.h),s:k(s>0&&s<200?l*i/100/(s<=100?s:200-s)*100:0),l:k(s/2),a:k(f,2)}},"y"),B=d(function(t){var l=le(t);return"hsl("+l.h+", "+l.s+"%, "+l.l+"%)"},"q"),j=d(function(t){var l=le(t);return"hsla("+l.h+", "+l.s+"%, "+l.l+"%, "+l.a+")"},"k"),se=d(function(t){var l=t.h,i=t.s,f=t.v,s=t.a;l=l/360*6,i/=100,f/=100;var v=Math.floor(l),e=f*(1-i),r=f*(1-(l-v)*i),n=f*(1-(1-l+v)*i),o=v%6;return{r:k(255*[f,r,e,e,n,f][o]),g:k(255*[n,f,f,r,e,e][o]),b:k(255*[e,e,n,f,f,r][o]),a:k(s,2)}},"I"),Ne=d(function(t){var l=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(t);return l?ce({r:Number(l[1])/(l[2]?100/255:1),g:Number(l[3])/(l[4]?100/255:1),b:Number(l[5])/(l[6]?100/255:1),a:l[7]===void 0?1:Number(l[7])/(l[8]?100:1)}):{h:0,s:0,v:0,a:1}},"z"),N=d(function(t){var l=t.toString(16);return l.length<2?"0"+l:l},"D"),He=d(function(t){var l=t.r,i=t.g,f=t.b,s=t.a,v=s<1?N(k(255*s)):"";return"#"+N(l)+N(i)+N(f)+v},"K"),ce=d(function(t){var l=t.r,i=t.g,f=t.b,s=t.a,v=Math.max(l,i,f),e=v-Math.min(l,i,f),r=e?v===l?(i-f)/e:v===i?2+(f-l)/e:4+(l-i)/e:0;return{h:k(60*(r<0?r+6:r)),s:k(v?e/v*100:0),v:k(v/255*100),a:s}},"L"),ie=b.memo(function(t){var l=t.hue,i=t.onChange,f=O(["react-colorful__hue",t.className]);return b.createElement("div",{className:f},b.createElement(X,{onMove:d(function(s){i({h:360*s.left})},"onMove"),onKey:d(function(s){i({h:R(l+360*s.left,0,360)})},"onKey"),"aria-label":"Hue","aria-valuenow":k(l),"aria-valuemax":"360","aria-valuemin":"0"},b.createElement(D,{className:"react-colorful__hue-pointer",left:l/360,color:B({h:l,s:100,v:100,a:1})})))}),ue=b.memo(function(t){var l=t.hsva,i=t.onChange,f={backgroundColor:B({h:l.h,s:100,v:100,a:1})};return b.createElement("div",{className:"react-colorful__saturation",style:f},b.createElement(X,{onMove:d(function(s){i({s:100*s.left,v:100-100*s.top})},"onMove"),onKey:d(function(s){i({s:R(l.s+100*s.left,0,100),v:R(l.v-100*s.top,0,100)})},"onKey"),"aria-label":"Color","aria-valuetext":"Saturation "+k(l.s)+"%, Brightness "+k(l.v)+"%"},b.createElement(D,{className:"react-colorful__saturation-pointer",top:1-l.v/100,left:l.s/100,color:B(l)})))}),fe=d(function(t,l){if(t===l)return!0;for(var i in t)if(t[i]!==l[i])return!1;return!0},"F"),he=d(function(t,l){return t.replace(/\s/g,"")===l.replace(/\s/g,"")},"P"),je=d(function(t,l){return t.toLowerCase()===l.toLowerCase()||fe(F(t),F(l))},"X");function G(t,l,i){var f=z(i),s=x.useState(function(){return t.toHsva(l)}),v=s[0],e=s[1],r=x.useRef({color:l,hsva:v});x.useEffect(function(){if(!t.equal(l,r.current.color)){var o=t.toHsva(l);r.current={hsva:o,color:l},e(o)}},[l,t]),x.useEffect(function(){var o;fe(v,r.current.hsva)||t.equal(o=t.fromHsva(v),r.current.color)||(r.current={hsva:v,color:o},f(o))},[v,t,f]);var n=x.useCallback(function(o){e(function(a){return Object.assign({},a,o)})},[]);return[v,n]}d(G,"Y");var ze=typeof window<"u"?x.useLayoutEffect:x.useEffect,Pe=d(function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},"$"),U=new Map,de=d(function(t){ze(function(){var l=t.current?t.current.ownerDocument:document;if(l!==void 0&&!U.has(l)){var i=l.createElement("style");i.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,U.set(l,i);var f=Pe();f&&i.setAttribute("nonce",f),l.head.appendChild(i)}},[])},"Q"),qe=d(function(t){var l=t.className,i=t.colorModel,f=t.color,s=f===void 0?i.defaultColor:f,v=t.onChange,e=T(t,["className","colorModel","color","onChange"]),r=x.useRef(null);de(r);var n=G(i,s,v),o=n[0],a=n[1],c=O(["react-colorful",l]);return b.createElement("div",C({},e,{ref:r,className:c}),b.createElement(ue,{hsva:o,onChange:a}),b.createElement(ie,{hue:o.h,onChange:a,className:"react-colorful__last-control"}))},"U"),Te={defaultColor:"000",toHsva:$e,fromHsva:d(function(t){return Ie({h:t.h,s:t.s,v:t.v,a:1})},"fromHsva"),equal:je},Le=d(function(t){return b.createElement(qe,C({},t,{colorModel:Te}))},"Z"),Ke=d(function(t){var l=t.className,i=t.hsva,f=t.onChange,s={backgroundImage:"linear-gradient(90deg, "+j(Object.assign({},i,{a:0}))+", "+j(Object.assign({},i,{a:1}))+")"},v=O(["react-colorful__alpha",l]),e=k(100*i.a);return b.createElement("div",{className:v},b.createElement("div",{className:"react-colorful__alpha-gradient",style:s}),b.createElement(X,{onMove:d(function(r){f({a:r.left})},"onMove"),onKey:d(function(r){f({a:R(i.a+r.left)})},"onKey"),"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},b.createElement(D,{className:"react-colorful__alpha-pointer",left:i.a,color:j(i)})))},"ee"),ve=d(function(t){var l=t.className,i=t.colorModel,f=t.color,s=f===void 0?i.defaultColor:f,v=t.onChange,e=T(t,["className","colorModel","color","onChange"]),r=x.useRef(null);de(r);var n=G(i,s,v),o=n[0],a=n[1],c=O(["react-colorful",l]);return b.createElement("div",C({},e,{ref:r,className:c}),b.createElement(ue,{hsva:o,onChange:a}),b.createElement(ie,{hue:o.h,onChange:a}),b.createElement(Ke,{hsva:o,onChange:a,className:"react-colorful__last-control"}))},"re"),Fe={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:Se,fromHsva:j,equal:he},Be=d(function(t){return b.createElement(ve,C({},t,{colorModel:Fe}))},"ue"),Ve={defaultColor:"rgba(0, 0, 0, 1)",toHsva:Ne,fromHsva:d(function(t){var l=se(t);return"rgba("+l.r+", "+l.g+", "+l.b+", "+l.a+")"},"fromHsva"),equal:he},Xe=d(function(t){return b.createElement(ve,C({},t,{colorModel:Ve}))},"He"),De=M.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),Ge=M(J)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),Ae=M.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),We=M(ye)(({theme:t})=>({fontFamily:t.typography.fonts.base})),Ue=M.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Ye=M.div(({theme:t,active:l})=>({width:16,height:16,boxShadow:l?`${t.appBorderColor} 0 0 0 1px inset, ${t.textMutedColor}50 0 0 0 4px`:`${t.appBorderColor} 0 0 0 1px inset`,borderRadius:t.appBorderRadius})),Je=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,Y=d(({value:t,style:l,...i})=>{const f=`linear-gradient(${t}, ${t}), ${Je}, linear-gradient(#fff, #fff)`;return b.createElement(Ye,{...i,style:{...l,backgroundImage:f}})},"Swatch"),Qe=M(xe.Input)(({theme:t,readOnly:l})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:t.typography.fonts.base})),Ze=M(we)(({theme:t})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:t.input.color})),ge=(t=>(t.RGB="rgb",t.HSL="hsl",t.HEX="hex",t))(ge||{}),L=Object.values(ge),et=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,tt=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,nt=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,V=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,rt=/^\s*#?([0-9a-f]{3})\s*$/i,ot={hex:Le,rgb:Xe,hsl:Be},H={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},pe=d(t=>{const l=t?.match(et);if(!l)return[0,0,0,1];const[,i,f,s,v=1]=l;return[i,f,s,v].map(Number)},"stringToArgs"),at=d(t=>{const[l,i,f,s]=pe(t),[v,e,r]=E.default.rgb.hsl([l,i,f])||[0,0,0];return{valid:!0,value:t,keyword:E.default.rgb.keyword([l,i,f]),colorSpace:"rgb",rgb:t,hsl:`hsla(${v}, ${e}%, ${r}%, ${s})`,hex:`#${E.default.rgb.hex([l,i,f]).toLowerCase()}`}},"parseRgb"),lt=d(t=>{const[l,i,f,s]=pe(t),[v,e,r]=E.default.hsl.rgb([l,i,f])||[0,0,0];return{valid:!0,value:t,keyword:E.default.hsl.keyword([l,i,f]),colorSpace:"hsl",rgb:`rgba(${v}, ${e}, ${r}, ${s})`,hsl:t,hex:`#${E.default.hsl.hex([l,i,f]).toLowerCase()}`}},"parseHsl"),st=d(t=>{const l=t.replace("#",""),i=E.default.keyword.rgb(l)||E.default.hex.rgb(l),f=E.default.rgb.hsl(i);let s=t;/[^#a-f0-9]/i.test(t)?s=l:V.test(t)&&(s=`#${l}`);let v=!0;if(s.startsWith("#"))v=V.test(s);else try{E.default.keyword.hex(s)}catch{v=!1}return{valid:v,value:s,keyword:E.default.rgb.keyword(i),colorSpace:"hex",rgb:`rgba(${i[0]}, ${i[1]}, ${i[2]}, 1)`,hsl:`hsla(${f[0]}, ${f[1]}%, ${f[2]}%, 1)`,hex:s}},"parseHexOrKeyword"),$=d(t=>{if(t)return tt.test(t)?at(t):nt.test(t)?lt(t):st(t)},"parseValue"),ct=d((t,l,i)=>{if(!t||!l?.valid)return H[i];if(i!=="hex")return l?.[i]||H[i];if(!l.hex.startsWith("#"))try{return`#${E.default.keyword.hex(l.hex)}`}catch{return H.hex}const f=l.hex.match(rt);if(!f)return V.test(l.hex)?l.hex:H.hex;const[s,v,e]=f[1].split("");return`#${s}${s}${v}${v}${e}${e}`},"getRealValue"),it=d((t,l)=>{const[i,f]=x.useState(t||""),[s,v]=x.useState(()=>$(i)),[e,r]=x.useState(s?.colorSpace||"hex");x.useEffect(()=>{const c=t||"",u=$(c);f(c),v(u),r(u?.colorSpace||"hex")},[t]);const n=x.useMemo(()=>ct(i,s,e).toLowerCase(),[i,s,e]),o=x.useCallback(c=>{const u=$(c),h=u?.value||c||"";f(h),h===""&&(v(void 0),l(void 0)),u&&(v(u),r(u.colorSpace),l(u.value))},[l]),a=x.useCallback(()=>{const u=(L.indexOf(e)+1)%L.length,h=L[u];r(h);const g=s?.[h]||"";f(g),l(g)},[s,e,l]);return{value:i,realValue:n,updateValue:o,color:s,colorSpace:e,cycleColorSpace:a}},"useColorInput"),P=d(t=>t.replace(/\s*/,"").toLowerCase(),"id"),ut=d((t,l,i)=>{const[f,s]=x.useState(l?.valid?[l]:[]);x.useEffect(()=>{l===void 0&&s([])},[l]);const v=x.useMemo(()=>(t||[]).map(n=>typeof n=="string"?$(n):n.title?{...$(n.color),keyword:n.title}:$(n.color)).concat(f).filter(Boolean).slice(-27),[t,f]),e=x.useCallback(r=>{r?.valid&&(v.some(n=>n&&n[i]&&P(n[i]||"")===P(r[i]||""))||s(n=>n.concat(r)))},[i,v]);return{presets:v,addPreset:e}},"usePresets"),ft=d(({name:t,value:l,onChange:i,onFocus:f,onBlur:s,presetColors:v,startOpen:e=!1,argType:r})=>{const n=x.useCallback(Z(i,200),[i]),{value:o,realValue:a,updateValue:c,color:u,colorSpace:h,cycleColorSpace:g}=it(l,n),{presets:p,addPreset:y}=ut(v??[],u,h),m=ot[h],_=!!r?.table?.readonly;return b.createElement(De,{"aria-readonly":_},b.createElement(Ge,{startOpen:e,trigger:_?null:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>u&&y(u),tooltip:b.createElement(Ae,null,b.createElement(m,{color:a==="transparent"?"#000000":a,onChange:c,onFocus:f,onBlur:s}),p.length>0&&b.createElement(Ue,null,p.map((w,I)=>b.createElement(J,{key:`${w?.value||I}-${I}`,hasChrome:!1,tooltip:b.createElement(We,{note:w?.keyword||w?.value||""})},b.createElement(Y,{value:w?.[h]||"",active:!!(u&&w&&w[h]&&P(w[h]||"")===P(u[h])),onClick:()=>w&&c(w.value||"")})))))},b.createElement(Y,{value:a,style:{margin:4}})),b.createElement(Qe,{id:me(t),value:o,onChange:w=>c(w.target.value),onFocus:w=>w.target.select(),readOnly:_,placeholder:"Choose color..."}),o?b.createElement(Ze,{onClick:g}):null)},"ColorControl"),pt=ft;export{ft as ColorControl,pt as default};

package/dist/assets/Contributing-Guidelines-Q4jfpqq1.js

@@ -1,3 +0,0 @@
-import{j as t,M as r}from"./blocks-B_WQ1U89.js";import{useMDXComponents as o}from"./index-DSuzaFN1.js";import"./preload-helper-PPVm8Dsz.js";import"./iframe-CdWmiVXf.js";import"./_commonjsHelpers-DaWZu8wl.js";function i(n){const e={h1:"h1",p:"p",...o(),...n.components};return t.jsxs(t.Fragment,{children:[t.jsx(r,{title:"Documentation/Contributing"}),`
-`,t.jsx(e.h1,{id:"contributing-guidelines",children:"Contributing Guidelines"}),`
-`,t.jsx(e.p,{children:"Please check the CONTRIBUTING.md file in the project root for contributing guidelines and development setup instructions."})]})}function p(n={}){const{wrapper:e}={...o(),...n.components};return e?t.jsx(e,{...n,children:t.jsx(i,{...n})}):i(n)}export{p as default};