@carbon/ibm-products 2.28.1 → 2.29.0

package/css/index.css

@@ -7435,11 +7435,17 @@ a.cds--overflow-menu-options__btn::before {
   height: 2.5rem;
 }
 .c4p--side-panel .c4p--side-panel__slug-and-close {
-  position: absolute;
+  position: fixed;
   z-index: 10; /* must be higher than title container border bottom */
   top: 0;
   right: 0;
   display: flex;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+@media (prefers-reduced-motion) {
+  .c4p--side-panel .c4p--side-panel__slug-and-close {
+    position: absolute;
+  }
 }
 .c4p--side-panel .c4p--side-panel__actions-container {
   position: sticky;
@@ -7565,13 +7571,33 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--tearsheet.c4p--tearsheet {
+  --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  --overlay-opacity: 1;
   z-index: 9001;
   align-items: flex-end;
   color: var(--cds-text-primary, #161616);
-  transition: visibility 0s linear 240ms, background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
+  transition: visibility 0s linear 240ms;
   --c4p--tearsheet--stacking-scale-factor-single: 0.95;
   --c4p--tearsheet--stacking-scale-factor-double: 0.9;
 }
+.c4p--tearsheet.c4p--tearsheet::before {
+  position: absolute;
+  display: block;
+  background: var(--overlay-color);
+  content: "";
+  inset: 0;
+  opacity: var(--overlay-opacity);
+  transition: background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .c4p--tearsheet.c4p--tearsheet::before {
+    transition: none;
+  }
+}
+.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet {
+  /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
+  background: initial;
+}
 .c4p--tearsheet.is-visible {
   z-index: 9000;
   align-items: flex-end;
@@ -7583,19 +7609,19 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
+  --overlay-opacity: 0.67;
   z-index: 8999;
-  background-color: rgba(22, 22, 22, 0.33);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
+  --overlay-opacity: 0.22;
   z-index: 8998;
-  background-color: rgba(22, 22, 22, 0.11);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
+  --overlay-opacity: 0.5;
   z-index: 8999;
-  background-color: rgba(22, 22, 22, 0.25);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-2-of-2, .c4p--tearsheet.c4p--tearsheet--stacked-3-of-3 {
-  background-color: rgba(22, 22, 22, 0.25);
+  --overlay-opacity: 0.5;
 }
 .c4p--tearsheet .c4p--tearsheet__container {
   top: auto;
@@ -7708,10 +7734,12 @@ a.cds--overflow-menu-options__btn::before {
   padding: 1.5rem 2rem 0;
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
-  padding-right: 5rem;
+  padding-inline-end: 5rem;
 }
 .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
-  margin-right: 3rem;
+  /* spacing 11 plus additional space for slug/close */
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  padding-inline-end: calc(8rem);
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
   max-width: 80%;
@@ -7806,6 +7834,10 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
   background: var(--cds-background, #ffffff);
 }
+.c4p--tearsheet.c4p--tearsheet--has-slug {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  --overlay-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
+}
 .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
   inset-inline-end: 0;
 }
@@ -35678,241 +35710,1675 @@ a.cds--side-nav__link--current::before {
   white-space: nowrap;
 }
 
-.c4p--full-page-error {
-  height: inherit;
-}
-
-.c4p--full-page-error__error-container {
-  height: 100%;
-  margin: 0 1.5rem;
-}
-@media (max-width: 41.98rem) {
-  .c4p--full-page-error__error-container {
-    margin: 0 0.5rem;
-  }
-}
-
-.c4p--full-page-error__error-grid {
-  height: 100%;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.c4p--full-page-error__error-column {
-  padding: 0;
-}
-@media (min-width: 66rem) {
-  .c4p--full-page-error__error-column {
-    padding: 0 2rem 0 0;
-  }
-}
-
-.c4p--full-page-error__error-svg-container {
-  display: flex;
-  height: 100%;
-  padding: 0.5rem 0.5rem 5rem 0.5rem;
-}
-@media (min-width: 42rem) {
-  .c4p--full-page-error__error-svg-container {
-    padding: auto 0.5rem 5rem 0.5rem;
-  }
-}
-
-.c4p--full-page-error__error-label,
-.c4p--full-page-error__error-title {
-  font-size: 2rem;
-  font-weight: 400;
-  line-height: 1.25;
-  letter-spacing: 0;
-  font-size: calc(2rem + 0.25 * (100vw - 20rem) / 22);
-}
-@media (min-width: 42rem) {
-  .c4p--full-page-error__error-label,
-  .c4p--full-page-error__error-title {
-    font-size: 2.25rem;
-    font-weight: 300;
-    line-height: 1.22;
-    font-size: calc(2.25rem + 0.375 * (100vw - 42rem) / 24);
-  }
-}
-@media (min-width: 66rem) {
-  .c4p--full-page-error__error-label,
-  .c4p--full-page-error__error-title {
-    font-size: 2.625rem;
-    line-height: 1.19;
-    font-size: calc(2.625rem + 0.375 * (100vw - 66rem) / 16);
-  }
-}
-@media (min-width: 82rem) {
-  .c4p--full-page-error__error-label,
-  .c4p--full-page-error__error-title {
-    font-size: 3rem;
-    line-height: 1.17;
-    font-size: calc(3rem + 0.75 * (100vw - 82rem) / 17);
-  }
-}
-@media (min-width: 99rem) {
-  .c4p--full-page-error__error-label,
-  .c4p--full-page-error__error-title {
-    font-size: 3.75rem;
-    font-size: 3.75rem;
-  }
-}
-
-.c4p--full-page-error__error-label {
-  display: block;
-  color: var(--cds-text-error, #da1e28);
-}
-
-.c4p--full-page-error__error-title {
-  margin-bottom: 3rem;
-}
-
-.c4p--full-page-error__description {
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: var(--cds-body-02-font-weight, 400);
-  line-height: var(--cds-body-02-line-height, 1.5);
-  letter-spacing: var(--cds-body-02-letter-spacing, 0);
-  margin-bottom: 2rem;
-}
-
-.c4p--full-page-error__error-svg-container svg.c4p--full-page-error__error-svg {
-  width: 100%;
-}
-
-.c4p--full-page-error__error-svg-container svg.c4p--full-page-error__error-svg path {
-  fill: var(--cds-background, #ffffff);
-  stroke: var(--cds-border-inverse, #161616);
-}
-
-.c4p--search-bar {
-  position: relative;
-  display: flex;
-}
-.c4p--search-bar .c4p--search-bar__scopes .cds--label {
-  position: absolute;
-}
-
-.c4p--string-formatter {
-  display: inline-block;
-  text-align: left;
-}
-
-.c4p--string-formatter--content {
-  display: inline-block;
-  text-align: left;
-}
-
-.c4p--string-formatter--truncate {
-  display: -webkit-box;
-  overflow: hidden;
-  max-width: 80ch;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-.c4p--string-formatter__tooltip > button {
-  border-width: 0;
-  color: currentColor;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-}
-
-.cds--popover {
-  max-width: 1rem;
-  margin: 0 auto;
-}
-
-.c4p--string-formatter .cds--popover-content {
-  max-inline-size: 20rem;
-}
-
-.c4p--string-formatter .cds--popover--left .cds--popover,
-.c4p--string-formatter .cds--popover--left-bottom .cds--popover,
-.c4p--string-formatter .cds--popover--left-top .cds--popover {
-  margin: 0;
-}
-
-.c4p--string-formatter .cds--popover--right .cds--popover,
-.c4p--string-formatter .cds--popover--right-bottom .cds--popover,
-.c4p--string-formatter .cds--popover--right-top .cds--popover {
-  margin-right: 0;
-  margin-left: auto;
-}
-
-.c4p--string-formatter .cds--popover--top .cds--popover-caret,
-.c4p--string-formatter .cds--popover--top-left .cds--popover-caret,
-.c4p--string-formatter .cds--popover--top-right .cds--popover-caret {
-  /* stylelint-disable-next-line declaration-no-important */
-  inset-block-start: -1px !important;
-}
-
-.c4p--string-formatter .cds--popover--bottom .cds--popover-caret,
-.c4p--string-formatter .cds--popover--bottom-left .cds--popover-caret,
-.c4p--string-formatter .cds--popover--bottom-right .cds--popover-caret {
-  /* stylelint-disable-next-line declaration-no-important */
-  inset-block-end: -1px !important;
-}
-
-.c4p--user-avatar {
-  position: relative;
-  display: flex;
-  width: 4rem;
-  height: 4rem;
-  align-items: center;
-  justify-content: center;
-  border: 0.5px solid transparent;
-  border-radius: 100%;
-  color: var(--cds-text-inverse, #ffffff);
-  outline: none;
-  outline-offset: 3px;
-}
-
-.c4p--user-avatar svg {
-  color: var(--cds-icon-inverse, #ffffff);
-}
-
-.c4p--user-avatar__tooltip:focus-within .c4p--user-avatar {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-}
-
-.c4p--user-avatar--light-cyan {
-  background-color: #1192e8;
-}
-
-.c4p--user-avatar--dark-cyan {
-  background-color: #0072c3;
-}
-
-.c4p--user-avatar--xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: var(--cds-heading-04-font-size, 1.75rem);
-  font-weight: var(--cds-heading-04-font-weight, 400);
-  line-height: var(--cds-heading-04-line-height, 1.28572);
-  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
-}
-
-.c4p--user-avatar--lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: var(--cds-heading-03-font-size, 1.25rem);
-  font-weight: var(--cds-heading-03-font-weight, 400);
-  line-height: var(--cds-heading-03-line-height, 1.4);
-  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
-}
-
-.c4p--user-avatar--md {
-  width: 2rem;
-  height: 2rem;
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-compact-01-font-weight, 400);
-  line-height: var(--cds-body-compact-01-line-height, 1.28572);
-  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
-}
-
-.c4p--user-avatar--sm {
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/type-token-use */
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable function-no-unknown */
+.c4p--decorator--light {
+  --cds-ai-aura-end: rgba(255, 255, 255, 0);
+  --cds-ai-aura-hover-background: #edf5ff;
+  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
+  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
+  --cds-ai-border-end: #d0e2ff;
+  --cds-ai-border-start: #78a9ff;
+  --cds-ai-border-strong: #4589ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
+  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
+  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
+  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
+  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
+  --cds-ai-skeleton-background: #b8d3ff;
+  --cds-ai-skeleton-element-background: #001141;
+  --cds-background: #f4f4f4;
+  --cds-background-active: rgba(141, 141, 141, 0.5);
+  --cds-background-brand: #0f62fe;
+  --cds-background-hover: rgba(141, 141, 141, 0.12);
+  --cds-background-inverse: #393939;
+  --cds-background-inverse-hover: #474747;
+  --cds-background-selected: rgba(141, 141, 141, 0.2);
+  --cds-background-selected-hover: rgba(141, 141, 141, 0.32);
+  --cds-border-disabled: #c6c6c6;
+  --cds-border-interactive: #0f62fe;
+  --cds-border-inverse: #161616;
+  --cds-border-strong-01: #8d8d8d;
+  --cds-border-strong-02: #8d8d8d;
+  --cds-border-strong-03: #8d8d8d;
+  --cds-border-subtle-00: #c6c6c6;
+  --cds-border-subtle-01: #e0e0e0;
+  --cds-border-subtle-02: #c6c6c6;
+  --cds-border-subtle-03: #e0e0e0;
+  --cds-border-subtle-selected-01: #c6c6c6;
+  --cds-border-subtle-selected-02: #c6c6c6;
+  --cds-border-subtle-selected-03: #c6c6c6;
+  --cds-border-tile-01: #a8a8a8;
+  --cds-border-tile-02: #c6c6c6;
+  --cds-border-tile-03: #a8a8a8;
+  --cds-chat-avatar-agent: #393939;
+  --cds-chat-avatar-bot: #6f6f6f;
+  --cds-chat-avatar-user: #0f62fe;
+  --cds-chat-bubble-agent: #ffffff;
+  --cds-chat-bubble-agent-border: #e0e0e0;
+  --cds-chat-bubble-user: #e0e0e0;
+  --cds-chat-prompt-background: #ffffff;
+  --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
+  --cds-chat-prompt-border-start: #f4f4f4;
+  --cds-field-01: #ffffff;
+  --cds-field-02: #f4f4f4;
+  --cds-field-03: #ffffff;
+  --cds-field-hover-01: #e8e8e8;
+  --cds-field-hover-02: #e8e8e8;
+  --cds-field-hover-03: #e8e8e8;
+  --cds-focus: #0f62fe;
+  --cds-focus-inset: #ffffff;
+  --cds-focus-inverse: #ffffff;
+  --cds-highlight: #d0e2ff;
+  --cds-icon-disabled: rgba(22, 22, 22, 0.25);
+  --cds-icon-interactive: #0f62fe;
+  --cds-icon-inverse: #ffffff;
+  --cds-icon-on-color: #ffffff;
+  --cds-icon-on-color-disabled: #8d8d8d;
+  --cds-icon-primary: #161616;
+  --cds-icon-secondary: #525252;
+  --cds-interactive: #0f62fe;
+  --cds-layer-01: #ffffff;
+  --cds-layer-02: #f4f4f4;
+  --cds-layer-03: #ffffff;
+  --cds-layer-accent-01: #e0e0e0;
+  --cds-layer-accent-02: #e0e0e0;
+  --cds-layer-accent-03: #e0e0e0;
+  --cds-layer-accent-active-01: #a8a8a8;
+  --cds-layer-accent-active-02: #a8a8a8;
+  --cds-layer-accent-active-03: #a8a8a8;
+  --cds-layer-accent-hover-01: #d1d1d1;
+  --cds-layer-accent-hover-02: #d1d1d1;
+  --cds-layer-accent-hover-03: #d1d1d1;
+  --cds-layer-active-01: #c6c6c6;
+  --cds-layer-active-02: #c6c6c6;
+  --cds-layer-active-03: #c6c6c6;
+  --cds-layer-hover-01: #e8e8e8;
+  --cds-layer-hover-02: #e8e8e8;
+  --cds-layer-hover-03: #e8e8e8;
+  --cds-layer-selected-01: #e0e0e0;
+  --cds-layer-selected-02: #e0e0e0;
+  --cds-layer-selected-03: #e0e0e0;
+  --cds-layer-selected-disabled: #8d8d8d;
+  --cds-layer-selected-hover-01: #d1d1d1;
+  --cds-layer-selected-hover-02: #d1d1d1;
+  --cds-layer-selected-hover-03: #d1d1d1;
+  --cds-layer-selected-inverse: #161616;
+  --cds-link-inverse: #78a9ff;
+  --cds-link-inverse-active: #f4f4f4;
+  --cds-link-inverse-hover: #a6c8ff;
+  --cds-link-primary: #0f62fe;
+  --cds-link-primary-hover: #0043ce;
+  --cds-link-secondary: #0043ce;
+  --cds-link-visited: #8a3ffc;
+  --cds-overlay: rgba(22, 22, 22, 0.5);
+  --cds-shadow: rgba(0, 0, 0, 0.3);
+  --cds-skeleton-background: #e8e8e8;
+  --cds-skeleton-element: #c6c6c6;
+  --cds-slug-background: #525252;
+  --cds-slug-background-hover: #6f6f6f;
+  --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
+  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
+  --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-caret-bottom: #d0e2ff;
+  --cds-slug-callout-caret-bottom-background: #ccdbf8;
+  --cds-slug-callout-caret-bottom-background-actions: #d2dcee;
+  --cds-slug-callout-caret-center: #a7c7ff;
+  --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
+  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
+  --cds-slug-gradient: #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-gradient-hover: #161616 linear-gradient(135deg, #d1d1d1 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-hollow-hover: #474747;
+  --cds-support-caution-major: #ff832b;
+  --cds-support-caution-minor: #f1c21b;
+  --cds-support-caution-undefined: #8a3ffc;
+  --cds-support-error: #da1e28;
+  --cds-support-error-inverse: #fa4d56;
+  --cds-support-info: #0043ce;
+  --cds-support-info-inverse: #4589ff;
+  --cds-support-success: #24a148;
+  --cds-support-success-inverse: #42be65;
+  --cds-support-warning: #f1c21b;
+  --cds-support-warning-inverse: #f1c21b;
+  --cds-text-disabled: rgba(22, 22, 22, 0.25);
+  --cds-text-error: #da1e28;
+  --cds-text-helper: #6f6f6f;
+  --cds-text-inverse: #ffffff;
+  --cds-text-on-color: #ffffff;
+  --cds-text-on-color-disabled: #8d8d8d;
+  --cds-text-placeholder: rgba(22, 22, 22, 0.4);
+  --cds-text-primary: #161616;
+  --cds-text-secondary: #525252;
+  --cds-toggle-off: #8d8d8d;
+  --cds-spacing-01: 0.125rem;
+  --cds-spacing-02: 0.25rem;
+  --cds-spacing-03: 0.5rem;
+  --cds-spacing-04: 0.75rem;
+  --cds-spacing-05: 1rem;
+  --cds-spacing-06: 1.5rem;
+  --cds-spacing-07: 2rem;
+  --cds-spacing-08: 2.5rem;
+  --cds-spacing-09: 3rem;
+  --cds-spacing-10: 4rem;
+  --cds-spacing-11: 5rem;
+  --cds-spacing-12: 6rem;
+  --cds-spacing-13: 10rem;
+  --cds-fluid-spacing-01: 0;
+  --cds-fluid-spacing-02: 2vw;
+  --cds-fluid-spacing-03: 5vw;
+  --cds-fluid-spacing-04: 10vw;
+  --cds-caption-01-font-size: 0.75rem;
+  --cds-caption-01-font-weight: 400;
+  --cds-caption-01-line-height: 1.33333;
+  --cds-caption-01-letter-spacing: 0.32px;
+  --cds-caption-02-font-size: 0.875rem;
+  --cds-caption-02-font-weight: 400;
+  --cds-caption-02-line-height: 1.28572;
+  --cds-caption-02-letter-spacing: 0.32px;
+  --cds-label-01-font-size: 0.75rem;
+  --cds-label-01-font-weight: 400;
+  --cds-label-01-line-height: 1.33333;
+  --cds-label-01-letter-spacing: 0.32px;
+  --cds-label-02-font-size: 0.875rem;
+  --cds-label-02-font-weight: 400;
+  --cds-label-02-line-height: 1.28572;
+  --cds-label-02-letter-spacing: 0.16px;
+  --cds-helper-text-01-font-size: 0.75rem;
+  --cds-helper-text-01-line-height: 1.33333;
+  --cds-helper-text-01-letter-spacing: 0.32px;
+  --cds-helper-text-02-font-size: 0.875rem;
+  --cds-helper-text-02-font-weight: 400;
+  --cds-helper-text-02-line-height: 1.28572;
+  --cds-helper-text-02-letter-spacing: 0.16px;
+  --cds-body-short-01-font-size: 0.875rem;
+  --cds-body-short-01-font-weight: 400;
+  --cds-body-short-01-line-height: 1.28572;
+  --cds-body-short-01-letter-spacing: 0.16px;
+  --cds-body-short-02-font-size: 1rem;
+  --cds-body-short-02-font-weight: 400;
+  --cds-body-short-02-line-height: 1.375;
+  --cds-body-short-02-letter-spacing: 0;
+  --cds-body-long-01-font-size: 0.875rem;
+  --cds-body-long-01-font-weight: 400;
+  --cds-body-long-01-line-height: 1.42857;
+  --cds-body-long-01-letter-spacing: 0.16px;
+  --cds-body-long-02-font-size: 1rem;
+  --cds-body-long-02-font-weight: 400;
+  --cds-body-long-02-line-height: 1.5;
+  --cds-body-long-02-letter-spacing: 0;
+  --cds-code-01-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+  --cds-code-01-font-size: 0.75rem;
+  --cds-code-01-font-weight: 400;
+  --cds-code-01-line-height: 1.33333;
+  --cds-code-01-letter-spacing: 0.32px;
+  --cds-code-02-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+  --cds-code-02-font-size: 0.875rem;
+  --cds-code-02-font-weight: 400;
+  --cds-code-02-line-height: 1.42857;
+  --cds-code-02-letter-spacing: 0.32px;
+  --cds-heading-01-font-size: 0.875rem;
+  --cds-heading-01-font-weight: 600;
+  --cds-heading-01-line-height: 1.42857;
+  --cds-heading-01-letter-spacing: 0.16px;
+  --cds-heading-02-font-size: 1rem;
+  --cds-heading-02-font-weight: 600;
+  --cds-heading-02-line-height: 1.5;
+  --cds-heading-02-letter-spacing: 0;
+  --cds-productive-heading-01-font-size: 0.875rem;
+  --cds-productive-heading-01-font-weight: 600;
+  --cds-productive-heading-01-line-height: 1.28572;
+  --cds-productive-heading-01-letter-spacing: 0.16px;
+  --cds-productive-heading-02-font-size: 1rem;
+  --cds-productive-heading-02-font-weight: 600;
+  --cds-productive-heading-02-line-height: 1.375;
+  --cds-productive-heading-02-letter-spacing: 0;
+  --cds-productive-heading-03-font-size: 1.25rem;
+  --cds-productive-heading-03-font-weight: 400;
+  --cds-productive-heading-03-line-height: 1.4;
+  --cds-productive-heading-03-letter-spacing: 0;
+  --cds-productive-heading-04-font-size: 1.75rem;
+  --cds-productive-heading-04-font-weight: 400;
+  --cds-productive-heading-04-line-height: 1.28572;
+  --cds-productive-heading-04-letter-spacing: 0;
+  --cds-productive-heading-05-font-size: 2rem;
+  --cds-productive-heading-05-font-weight: 400;
+  --cds-productive-heading-05-line-height: 1.25;
+  --cds-productive-heading-05-letter-spacing: 0;
+  --cds-productive-heading-06-font-size: 2.625rem;
+  --cds-productive-heading-06-font-weight: 300;
+  --cds-productive-heading-06-line-height: 1.199;
+  --cds-productive-heading-06-letter-spacing: 0;
+  --cds-productive-heading-07-font-size: 3.375rem;
+  --cds-productive-heading-07-font-weight: 300;
+  --cds-productive-heading-07-line-height: 1.19;
+  --cds-productive-heading-07-letter-spacing: 0;
+  --cds-expressive-paragraph-01-font-size: 1.5rem;
+  --cds-expressive-paragraph-01-font-weight: 300;
+  --cds-expressive-paragraph-01-line-height: 1.334;
+  --cds-expressive-paragraph-01-letter-spacing: 0;
+  --cds-expressive-heading-01-font-size: 0.875rem;
+  --cds-expressive-heading-01-font-weight: 600;
+  --cds-expressive-heading-01-line-height: 1.42857;
+  --cds-expressive-heading-01-letter-spacing: 0.16px;
+  --cds-expressive-heading-02-font-size: 1rem;
+  --cds-expressive-heading-02-font-weight: 600;
+  --cds-expressive-heading-02-line-height: 1.5;
+  --cds-expressive-heading-02-letter-spacing: 0;
+  --cds-expressive-heading-03-font-size: 1.25rem;
+  --cds-expressive-heading-03-font-weight: 400;
+  --cds-expressive-heading-03-line-height: 1.4;
+  --cds-expressive-heading-03-letter-spacing: 0;
+  --cds-expressive-heading-04-font-size: 1.75rem;
+  --cds-expressive-heading-04-font-weight: 400;
+  --cds-expressive-heading-04-line-height: 1.28572;
+  --cds-expressive-heading-04-letter-spacing: 0;
+  --cds-expressive-heading-05-font-size: 2rem;
+  --cds-expressive-heading-05-font-weight: 400;
+  --cds-expressive-heading-05-line-height: 1.25;
+  --cds-expressive-heading-05-letter-spacing: 0;
+  --cds-expressive-heading-06-font-size: 2rem;
+  --cds-expressive-heading-06-font-weight: 600;
+  --cds-expressive-heading-06-line-height: 1.25;
+  --cds-expressive-heading-06-letter-spacing: 0;
+  --cds-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
+  --cds-quotation-01-font-size: 1.25rem;
+  --cds-quotation-01-font-weight: 400;
+  --cds-quotation-01-line-height: 1.3;
+  --cds-quotation-01-letter-spacing: 0;
+  --cds-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
+  --cds-quotation-02-font-size: 2rem;
+  --cds-quotation-02-font-weight: 300;
+  --cds-quotation-02-line-height: 1.25;
+  --cds-quotation-02-letter-spacing: 0;
+  --cds-display-01-font-size: 2.625rem;
+  --cds-display-01-font-weight: 300;
+  --cds-display-01-line-height: 1.19;
+  --cds-display-01-letter-spacing: 0;
+  --cds-display-02-font-size: 2.625rem;
+  --cds-display-02-font-weight: 600;
+  --cds-display-02-line-height: 1.19;
+  --cds-display-02-letter-spacing: 0;
+  --cds-display-03-font-size: 2.625rem;
+  --cds-display-03-font-weight: 300;
+  --cds-display-03-line-height: 1.19;
+  --cds-display-03-letter-spacing: 0;
+  --cds-display-04-font-size: 2.625rem;
+  --cds-display-04-font-weight: 300;
+  --cds-display-04-line-height: 1.19;
+  --cds-display-04-letter-spacing: 0;
+  --cds-legal-01-font-size: 0.75rem;
+  --cds-legal-01-font-weight: 400;
+  --cds-legal-01-line-height: 1.33333;
+  --cds-legal-01-letter-spacing: 0.32px;
+  --cds-legal-02-font-size: 0.875rem;
+  --cds-legal-02-font-weight: 400;
+  --cds-legal-02-line-height: 1.28572;
+  --cds-legal-02-letter-spacing: 0.16px;
+  --cds-body-compact-01-font-size: 0.875rem;
+  --cds-body-compact-01-font-weight: 400;
+  --cds-body-compact-01-line-height: 1.28572;
+  --cds-body-compact-01-letter-spacing: 0.16px;
+  --cds-body-compact-02-font-size: 1rem;
+  --cds-body-compact-02-font-weight: 400;
+  --cds-body-compact-02-line-height: 1.375;
+  --cds-body-compact-02-letter-spacing: 0;
+  --cds-heading-compact-01-font-size: 0.875rem;
+  --cds-heading-compact-01-font-weight: 600;
+  --cds-heading-compact-01-line-height: 1.28572;
+  --cds-heading-compact-01-letter-spacing: 0.16px;
+  --cds-heading-compact-02-font-size: 1rem;
+  --cds-heading-compact-02-font-weight: 600;
+  --cds-heading-compact-02-line-height: 1.375;
+  --cds-heading-compact-02-letter-spacing: 0;
+  --cds-body-01-font-size: 0.875rem;
+  --cds-body-01-font-weight: 400;
+  --cds-body-01-line-height: 1.42857;
+  --cds-body-01-letter-spacing: 0.16px;
+  --cds-body-02-font-size: 1rem;
+  --cds-body-02-font-weight: 400;
+  --cds-body-02-line-height: 1.5;
+  --cds-body-02-letter-spacing: 0;
+  --cds-heading-03-font-size: 1.25rem;
+  --cds-heading-03-font-weight: 400;
+  --cds-heading-03-line-height: 1.4;
+  --cds-heading-03-letter-spacing: 0;
+  --cds-heading-04-font-size: 1.75rem;
+  --cds-heading-04-font-weight: 400;
+  --cds-heading-04-line-height: 1.28572;
+  --cds-heading-04-letter-spacing: 0;
+  --cds-heading-05-font-size: 2rem;
+  --cds-heading-05-font-weight: 400;
+  --cds-heading-05-line-height: 1.25;
+  --cds-heading-05-letter-spacing: 0;
+  --cds-heading-06-font-size: 2.625rem;
+  --cds-heading-06-font-weight: 300;
+  --cds-heading-06-line-height: 1.199;
+  --cds-heading-06-letter-spacing: 0;
+  --cds-heading-07-font-size: 3.375rem;
+  --cds-heading-07-font-weight: 300;
+  --cds-heading-07-line-height: 1.19;
+  --cds-heading-07-letter-spacing: 0;
+  --cds-fluid-heading-03-font-size: 1.25rem;
+  --cds-fluid-heading-03-font-weight: 400;
+  --cds-fluid-heading-03-line-height: 1.4;
+  --cds-fluid-heading-03-letter-spacing: 0;
+  --cds-fluid-heading-04-font-size: 1.75rem;
+  --cds-fluid-heading-04-font-weight: 400;
+  --cds-fluid-heading-04-line-height: 1.28572;
+  --cds-fluid-heading-04-letter-spacing: 0;
+  --cds-fluid-heading-05-font-size: 2rem;
+  --cds-fluid-heading-05-font-weight: 400;
+  --cds-fluid-heading-05-line-height: 1.25;
+  --cds-fluid-heading-05-letter-spacing: 0;
+  --cds-fluid-heading-06-font-size: 2rem;
+  --cds-fluid-heading-06-font-weight: 600;
+  --cds-fluid-heading-06-line-height: 1.25;
+  --cds-fluid-heading-06-letter-spacing: 0;
+  --cds-fluid-paragraph-01-font-size: 1.5rem;
+  --cds-fluid-paragraph-01-font-weight: 300;
+  --cds-fluid-paragraph-01-line-height: 1.334;
+  --cds-fluid-paragraph-01-letter-spacing: 0;
+  --cds-fluid-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
+  --cds-fluid-quotation-01-font-size: 1.25rem;
+  --cds-fluid-quotation-01-font-weight: 400;
+  --cds-fluid-quotation-01-line-height: 1.3;
+  --cds-fluid-quotation-01-letter-spacing: 0;
+  --cds-fluid-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
+  --cds-fluid-quotation-02-font-size: 2rem;
+  --cds-fluid-quotation-02-font-weight: 300;
+  --cds-fluid-quotation-02-line-height: 1.25;
+  --cds-fluid-quotation-02-letter-spacing: 0;
+  --cds-fluid-display-01-font-size: 2.625rem;
+  --cds-fluid-display-01-font-weight: 300;
+  --cds-fluid-display-01-line-height: 1.19;
+  --cds-fluid-display-01-letter-spacing: 0;
+  --cds-fluid-display-02-font-size: 2.625rem;
+  --cds-fluid-display-02-font-weight: 600;
+  --cds-fluid-display-02-line-height: 1.19;
+  --cds-fluid-display-02-letter-spacing: 0;
+  --cds-fluid-display-03-font-size: 2.625rem;
+  --cds-fluid-display-03-font-weight: 300;
+  --cds-fluid-display-03-line-height: 1.19;
+  --cds-fluid-display-03-letter-spacing: 0;
+  --cds-fluid-display-04-font-size: 2.625rem;
+  --cds-fluid-display-04-font-weight: 300;
+  --cds-fluid-display-04-line-height: 1.19;
+  --cds-fluid-display-04-letter-spacing: 0;
+  --cds-true: ;
+  --cds-button-separator: #e0e0e0;
+  --cds-button-primary: #0f62fe;
+  --cds-button-secondary: #393939;
+  --cds-button-tertiary: #0f62fe;
+  --cds-button-danger-primary: #da1e28;
+  --cds-button-danger-secondary: #da1e28;
+  --cds-button-danger-active: #750e13;
+  --cds-button-primary-active: #002d9c;
+  --cds-button-secondary-active: #6f6f6f;
+  --cds-button-tertiary-active: #002d9c;
+  --cds-button-danger-hover: #b81921;
+  --cds-button-primary-hover: #0050e6;
+  --cds-button-secondary-hover: #474747;
+  --cds-button-tertiary-hover: #0050e6;
+  --cds-button-disabled: #c6c6c6;
+  --cds-tag-background-red: #ffd7d9;
+  --cds-tag-color-red: #750e13;
+  --cds-tag-hover-red: #ffc2c5;
+  --cds-tag-background-magenta: #ffd6e8;
+  --cds-tag-color-magenta: #740937;
+  --cds-tag-hover-magenta: #ffbdda;
+  --cds-tag-background-purple: #e8daff;
+  --cds-tag-color-purple: #491d8b;
+  --cds-tag-hover-purple: #dcc7ff;
+  --cds-tag-background-blue: #d0e2ff;
+  --cds-tag-color-blue: #002d9c;
+  --cds-tag-hover-blue: #b8d3ff;
+  --cds-tag-background-cyan: #bae6ff;
+  --cds-tag-color-cyan: #003a6d;
+  --cds-tag-hover-cyan: #99daff;
+  --cds-tag-background-teal: #9ef0f0;
+  --cds-tag-color-teal: #004144;
+  --cds-tag-hover-teal: #57e5e5;
+  --cds-tag-background-green: #a7f0ba;
+  --cds-tag-color-green: #044317;
+  --cds-tag-hover-green: #74e792;
+  --cds-tag-background-gray: #e0e0e0;
+  --cds-tag-color-gray: #393939;
+  --cds-tag-hover-gray: #d1d1d1;
+  --cds-tag-background-cool-gray: #dde1e6;
+  --cds-tag-color-cool-gray: #343a3f;
+  --cds-tag-hover-cool-gray: #cdd3da;
+  --cds-tag-background-warm-gray: #e5e0df;
+  --cds-tag-color-warm-gray: #3c3838;
+  --cds-tag-hover-warm-gray: #d8d0cf;
+  --cds-notification-background-error: #fff1f1;
+  --cds-notification-background-success: #defbe6;
+  --cds-notification-background-info: #edf5ff;
+  --cds-notification-background-warning: #fdf6dd;
+  --cds-notification-action-hover: #ffffff;
+  --cds-notification-action-tertiary-inverse: #ffffff;
+  --cds-notification-action-tertiary-inverse-active: #c6c6c6;
+  --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
+  --cds-notification-action-tertiary-inverse-text: #161616;
+  --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25);
+  --cds-layer: var(--cds-layer-01, #f4f4f4);
+  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
+  --cds-field: var(--cds-field-01, #f4f4f4);
+  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
+}
+
+.c4p--decorator--dark {
+  --cds-ai-aura-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-hover-background: #333333;
+  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
+  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
+  --cds-ai-border-start: #4589ff;
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
+  --cds-ai-overlay: rgba(0, 17, 65, 0.5);
+  --cds-ai-skeleton-background: #0053ff;
+  --cds-ai-skeleton-element-background: #001141;
+  --cds-background: #161616;
+  --cds-background-active: rgba(141, 141, 141, 0.4);
+  --cds-background-brand: #0f62fe;
+  --cds-background-hover: rgba(141, 141, 141, 0.16);
+  --cds-background-inverse: #f4f4f4;
+  --cds-background-inverse-hover: #e8e8e8;
+  --cds-background-selected: rgba(141, 141, 141, 0.24);
+  --cds-background-selected-hover: rgba(141, 141, 141, 0.32);
+  --cds-border-disabled: rgba(141, 141, 141, 0.5);
+  --cds-border-interactive: #4589ff;
+  --cds-border-inverse: #f4f4f4;
+  --cds-border-strong-01: #6f6f6f;
+  --cds-border-strong-02: #8d8d8d;
+  --cds-border-strong-03: #a8a8a8;
+  --cds-border-subtle-00: #393939;
+  --cds-border-subtle-01: #525252;
+  --cds-border-subtle-02: #6f6f6f;
+  --cds-border-subtle-03: #6f6f6f;
+  --cds-border-subtle-selected-01: #6f6f6f;
+  --cds-border-subtle-selected-02: #8d8d8d;
+  --cds-border-subtle-selected-03: #8d8d8d;
+  --cds-border-tile-01: #525252;
+  --cds-border-tile-02: #6f6f6f;
+  --cds-border-tile-03: #8d8d8d;
+  --cds-chat-avatar-agent: #c6c6c6;
+  --cds-chat-avatar-bot: #8d8d8d;
+  --cds-chat-avatar-user: #4589ff;
+  --cds-chat-bubble-agent: #262626;
+  --cds-chat-bubble-agent-border: #525252;
+  --cds-chat-bubble-user: #393939;
+  --cds-chat-prompt-background: #161616;
+  --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
+  --cds-chat-prompt-border-start: #262626;
+  --cds-field-01: #262626;
+  --cds-field-02: #393939;
+  --cds-field-03: #525252;
+  --cds-field-hover-01: #333333;
+  --cds-field-hover-02: #474747;
+  --cds-field-hover-03: #636363;
+  --cds-focus: #ffffff;
+  --cds-focus-inset: #161616;
+  --cds-focus-inverse: #0f62fe;
+  --cds-highlight: #002d9c;
+  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
+  --cds-icon-interactive: #ffffff;
+  --cds-icon-inverse: #161616;
+  --cds-icon-on-color: #ffffff;
+  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
+  --cds-icon-primary: #f4f4f4;
+  --cds-icon-secondary: #c6c6c6;
+  --cds-interactive: #4589ff;
+  --cds-layer-01: #262626;
+  --cds-layer-02: #393939;
+  --cds-layer-03: #525252;
+  --cds-layer-accent-01: #393939;
+  --cds-layer-accent-02: #525252;
+  --cds-layer-accent-03: #6f6f6f;
+  --cds-layer-accent-active-01: #6f6f6f;
+  --cds-layer-accent-active-02: #8d8d8d;
+  --cds-layer-accent-active-03: #393939;
+  --cds-layer-accent-hover-01: #474747;
+  --cds-layer-accent-hover-02: #636363;
+  --cds-layer-accent-hover-03: #5e5e5e;
+  --cds-layer-active-01: #525252;
+  --cds-layer-active-02: #6f6f6f;
+  --cds-layer-active-03: #8d8d8d;
+  --cds-layer-hover-01: #333333;
+  --cds-layer-hover-02: #474747;
+  --cds-layer-hover-03: #636363;
+  --cds-layer-selected-01: #393939;
+  --cds-layer-selected-02: #525252;
+  --cds-layer-selected-03: #6f6f6f;
+  --cds-layer-selected-disabled: #a8a8a8;
+  --cds-layer-selected-hover-01: #474747;
+  --cds-layer-selected-hover-02: #636363;
+  --cds-layer-selected-hover-03: #5e5e5e;
+  --cds-layer-selected-inverse: #f4f4f4;
+  --cds-link-inverse: #0f62fe;
+  --cds-link-inverse-active: #161616;
+  --cds-link-inverse-hover: #0043ce;
+  --cds-link-primary: #78a9ff;
+  --cds-link-primary-hover: #a6c8ff;
+  --cds-link-secondary: #a6c8ff;
+  --cds-link-visited: #be95ff;
+  --cds-overlay: rgba(0, 0, 0, 0.65);
+  --cds-shadow: rgba(0, 0, 0, 0.8);
+  --cds-skeleton-background: #292929;
+  --cds-skeleton-element: #393939;
+  --cds-slug-background: #c6c6c6;
+  --cds-slug-background-hover: #e0e0e0;
+  --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
+  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end-hover-02: transparent;
+  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
+  --cds-slug-callout-aura-start-hover-02: transparent;
+  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-caret-bottom: #3d4655;
+  --cds-slug-callout-caret-bottom-background: #213250;
+  --cds-slug-callout-caret-bottom-background-actions: #192436;
+  --cds-slug-callout-caret-center: #3f68af;
+  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
+  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
+  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
+  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
+  --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-hollow-hover: #b5b5b5;
+  --cds-support-caution-major: #ff832b;
+  --cds-support-caution-minor: #f1c21b;
+  --cds-support-caution-undefined: #a56eff;
+  --cds-support-error: #fa4d56;
+  --cds-support-error-inverse: #da1e28;
+  --cds-support-info: #4589ff;
+  --cds-support-info-inverse: #0043ce;
+  --cds-support-success: #42be65;
+  --cds-support-success-inverse: #24a148;
+  --cds-support-warning: #f1c21b;
+  --cds-support-warning-inverse: #f1c21b;
+  --cds-text-disabled: rgba(244, 244, 244, 0.25);
+  --cds-text-error: #ff8389;
+  --cds-text-helper: #a8a8a8;
+  --cds-text-inverse: #161616;
+  --cds-text-on-color: #ffffff;
+  --cds-text-on-color-disabled: rgba(255, 255, 255, 0.25);
+  --cds-text-placeholder: rgba(244, 244, 244, 0.4);
+  --cds-text-primary: #f4f4f4;
+  --cds-text-secondary: #c6c6c6;
+  --cds-toggle-off: #6f6f6f;
+  --cds-spacing-01: 0.125rem;
+  --cds-spacing-02: 0.25rem;
+  --cds-spacing-03: 0.5rem;
+  --cds-spacing-04: 0.75rem;
+  --cds-spacing-05: 1rem;
+  --cds-spacing-06: 1.5rem;
+  --cds-spacing-07: 2rem;
+  --cds-spacing-08: 2.5rem;
+  --cds-spacing-09: 3rem;
+  --cds-spacing-10: 4rem;
+  --cds-spacing-11: 5rem;
+  --cds-spacing-12: 6rem;
+  --cds-spacing-13: 10rem;
+  --cds-fluid-spacing-01: 0;
+  --cds-fluid-spacing-02: 2vw;
+  --cds-fluid-spacing-03: 5vw;
+  --cds-fluid-spacing-04: 10vw;
+  --cds-caption-01-font-size: 0.75rem;
+  --cds-caption-01-font-weight: 400;
+  --cds-caption-01-line-height: 1.33333;
+  --cds-caption-01-letter-spacing: 0.32px;
+  --cds-caption-02-font-size: 0.875rem;
+  --cds-caption-02-font-weight: 400;
+  --cds-caption-02-line-height: 1.28572;
+  --cds-caption-02-letter-spacing: 0.32px;
+  --cds-label-01-font-size: 0.75rem;
+  --cds-label-01-font-weight: 400;
+  --cds-label-01-line-height: 1.33333;
+  --cds-label-01-letter-spacing: 0.32px;
+  --cds-label-02-font-size: 0.875rem;
+  --cds-label-02-font-weight: 400;
+  --cds-label-02-line-height: 1.28572;
+  --cds-label-02-letter-spacing: 0.16px;
+  --cds-helper-text-01-font-size: 0.75rem;
+  --cds-helper-text-01-line-height: 1.33333;
+  --cds-helper-text-01-letter-spacing: 0.32px;
+  --cds-helper-text-02-font-size: 0.875rem;
+  --cds-helper-text-02-font-weight: 400;
+  --cds-helper-text-02-line-height: 1.28572;
+  --cds-helper-text-02-letter-spacing: 0.16px;
+  --cds-body-short-01-font-size: 0.875rem;
+  --cds-body-short-01-font-weight: 400;
+  --cds-body-short-01-line-height: 1.28572;
+  --cds-body-short-01-letter-spacing: 0.16px;
+  --cds-body-short-02-font-size: 1rem;
+  --cds-body-short-02-font-weight: 400;
+  --cds-body-short-02-line-height: 1.375;
+  --cds-body-short-02-letter-spacing: 0;
+  --cds-body-long-01-font-size: 0.875rem;
+  --cds-body-long-01-font-weight: 400;
+  --cds-body-long-01-line-height: 1.42857;
+  --cds-body-long-01-letter-spacing: 0.16px;
+  --cds-body-long-02-font-size: 1rem;
+  --cds-body-long-02-font-weight: 400;
+  --cds-body-long-02-line-height: 1.5;
+  --cds-body-long-02-letter-spacing: 0;
+  --cds-code-01-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+  --cds-code-01-font-size: 0.75rem;
+  --cds-code-01-font-weight: 400;
+  --cds-code-01-line-height: 1.33333;
+  --cds-code-01-letter-spacing: 0.32px;
+  --cds-code-02-font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+  --cds-code-02-font-size: 0.875rem;
+  --cds-code-02-font-weight: 400;
+  --cds-code-02-line-height: 1.42857;
+  --cds-code-02-letter-spacing: 0.32px;
+  --cds-heading-01-font-size: 0.875rem;
+  --cds-heading-01-font-weight: 600;
+  --cds-heading-01-line-height: 1.42857;
+  --cds-heading-01-letter-spacing: 0.16px;
+  --cds-heading-02-font-size: 1rem;
+  --cds-heading-02-font-weight: 600;
+  --cds-heading-02-line-height: 1.5;
+  --cds-heading-02-letter-spacing: 0;
+  --cds-productive-heading-01-font-size: 0.875rem;
+  --cds-productive-heading-01-font-weight: 600;
+  --cds-productive-heading-01-line-height: 1.28572;
+  --cds-productive-heading-01-letter-spacing: 0.16px;
+  --cds-productive-heading-02-font-size: 1rem;
+  --cds-productive-heading-02-font-weight: 600;
+  --cds-productive-heading-02-line-height: 1.375;
+  --cds-productive-heading-02-letter-spacing: 0;
+  --cds-productive-heading-03-font-size: 1.25rem;
+  --cds-productive-heading-03-font-weight: 400;
+  --cds-productive-heading-03-line-height: 1.4;
+  --cds-productive-heading-03-letter-spacing: 0;
+  --cds-productive-heading-04-font-size: 1.75rem;
+  --cds-productive-heading-04-font-weight: 400;
+  --cds-productive-heading-04-line-height: 1.28572;
+  --cds-productive-heading-04-letter-spacing: 0;
+  --cds-productive-heading-05-font-size: 2rem;
+  --cds-productive-heading-05-font-weight: 400;
+  --cds-productive-heading-05-line-height: 1.25;
+  --cds-productive-heading-05-letter-spacing: 0;
+  --cds-productive-heading-06-font-size: 2.625rem;
+  --cds-productive-heading-06-font-weight: 300;
+  --cds-productive-heading-06-line-height: 1.199;
+  --cds-productive-heading-06-letter-spacing: 0;
+  --cds-productive-heading-07-font-size: 3.375rem;
+  --cds-productive-heading-07-font-weight: 300;
+  --cds-productive-heading-07-line-height: 1.19;
+  --cds-productive-heading-07-letter-spacing: 0;
+  --cds-expressive-paragraph-01-font-size: 1.5rem;
+  --cds-expressive-paragraph-01-font-weight: 300;
+  --cds-expressive-paragraph-01-line-height: 1.334;
+  --cds-expressive-paragraph-01-letter-spacing: 0;
+  --cds-expressive-heading-01-font-size: 0.875rem;
+  --cds-expressive-heading-01-font-weight: 600;
+  --cds-expressive-heading-01-line-height: 1.42857;
+  --cds-expressive-heading-01-letter-spacing: 0.16px;
+  --cds-expressive-heading-02-font-size: 1rem;
+  --cds-expressive-heading-02-font-weight: 600;
+  --cds-expressive-heading-02-line-height: 1.5;
+  --cds-expressive-heading-02-letter-spacing: 0;
+  --cds-expressive-heading-03-font-size: 1.25rem;
+  --cds-expressive-heading-03-font-weight: 400;
+  --cds-expressive-heading-03-line-height: 1.4;
+  --cds-expressive-heading-03-letter-spacing: 0;
+  --cds-expressive-heading-04-font-size: 1.75rem;
+  --cds-expressive-heading-04-font-weight: 400;
+  --cds-expressive-heading-04-line-height: 1.28572;
+  --cds-expressive-heading-04-letter-spacing: 0;
+  --cds-expressive-heading-05-font-size: 2rem;
+  --cds-expressive-heading-05-font-weight: 400;
+  --cds-expressive-heading-05-line-height: 1.25;
+  --cds-expressive-heading-05-letter-spacing: 0;
+  --cds-expressive-heading-06-font-size: 2rem;
+  --cds-expressive-heading-06-font-weight: 600;
+  --cds-expressive-heading-06-line-height: 1.25;
+  --cds-expressive-heading-06-letter-spacing: 0;
+  --cds-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
+  --cds-quotation-01-font-size: 1.25rem;
+  --cds-quotation-01-font-weight: 400;
+  --cds-quotation-01-line-height: 1.3;
+  --cds-quotation-01-letter-spacing: 0;
+  --cds-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
+  --cds-quotation-02-font-size: 2rem;
+  --cds-quotation-02-font-weight: 300;
+  --cds-quotation-02-line-height: 1.25;
+  --cds-quotation-02-letter-spacing: 0;
+  --cds-display-01-font-size: 2.625rem;
+  --cds-display-01-font-weight: 300;
+  --cds-display-01-line-height: 1.19;
+  --cds-display-01-letter-spacing: 0;
+  --cds-display-02-font-size: 2.625rem;
+  --cds-display-02-font-weight: 600;
+  --cds-display-02-line-height: 1.19;
+  --cds-display-02-letter-spacing: 0;
+  --cds-display-03-font-size: 2.625rem;
+  --cds-display-03-font-weight: 300;
+  --cds-display-03-line-height: 1.19;
+  --cds-display-03-letter-spacing: 0;
+  --cds-display-04-font-size: 2.625rem;
+  --cds-display-04-font-weight: 300;
+  --cds-display-04-line-height: 1.19;
+  --cds-display-04-letter-spacing: 0;
+  --cds-legal-01-font-size: 0.75rem;
+  --cds-legal-01-font-weight: 400;
+  --cds-legal-01-line-height: 1.33333;
+  --cds-legal-01-letter-spacing: 0.32px;
+  --cds-legal-02-font-size: 0.875rem;
+  --cds-legal-02-font-weight: 400;
+  --cds-legal-02-line-height: 1.28572;
+  --cds-legal-02-letter-spacing: 0.16px;
+  --cds-body-compact-01-font-size: 0.875rem;
+  --cds-body-compact-01-font-weight: 400;
+  --cds-body-compact-01-line-height: 1.28572;
+  --cds-body-compact-01-letter-spacing: 0.16px;
+  --cds-body-compact-02-font-size: 1rem;
+  --cds-body-compact-02-font-weight: 400;
+  --cds-body-compact-02-line-height: 1.375;
+  --cds-body-compact-02-letter-spacing: 0;
+  --cds-heading-compact-01-font-size: 0.875rem;
+  --cds-heading-compact-01-font-weight: 600;
+  --cds-heading-compact-01-line-height: 1.28572;
+  --cds-heading-compact-01-letter-spacing: 0.16px;
+  --cds-heading-compact-02-font-size: 1rem;
+  --cds-heading-compact-02-font-weight: 600;
+  --cds-heading-compact-02-line-height: 1.375;
+  --cds-heading-compact-02-letter-spacing: 0;
+  --cds-body-01-font-size: 0.875rem;
+  --cds-body-01-font-weight: 400;
+  --cds-body-01-line-height: 1.42857;
+  --cds-body-01-letter-spacing: 0.16px;
+  --cds-body-02-font-size: 1rem;
+  --cds-body-02-font-weight: 400;
+  --cds-body-02-line-height: 1.5;
+  --cds-body-02-letter-spacing: 0;
+  --cds-heading-03-font-size: 1.25rem;
+  --cds-heading-03-font-weight: 400;
+  --cds-heading-03-line-height: 1.4;
+  --cds-heading-03-letter-spacing: 0;
+  --cds-heading-04-font-size: 1.75rem;
+  --cds-heading-04-font-weight: 400;
+  --cds-heading-04-line-height: 1.28572;
+  --cds-heading-04-letter-spacing: 0;
+  --cds-heading-05-font-size: 2rem;
+  --cds-heading-05-font-weight: 400;
+  --cds-heading-05-line-height: 1.25;
+  --cds-heading-05-letter-spacing: 0;
+  --cds-heading-06-font-size: 2.625rem;
+  --cds-heading-06-font-weight: 300;
+  --cds-heading-06-line-height: 1.199;
+  --cds-heading-06-letter-spacing: 0;
+  --cds-heading-07-font-size: 3.375rem;
+  --cds-heading-07-font-weight: 300;
+  --cds-heading-07-line-height: 1.19;
+  --cds-heading-07-letter-spacing: 0;
+  --cds-fluid-heading-03-font-size: 1.25rem;
+  --cds-fluid-heading-03-font-weight: 400;
+  --cds-fluid-heading-03-line-height: 1.4;
+  --cds-fluid-heading-03-letter-spacing: 0;
+  --cds-fluid-heading-04-font-size: 1.75rem;
+  --cds-fluid-heading-04-font-weight: 400;
+  --cds-fluid-heading-04-line-height: 1.28572;
+  --cds-fluid-heading-04-letter-spacing: 0;
+  --cds-fluid-heading-05-font-size: 2rem;
+  --cds-fluid-heading-05-font-weight: 400;
+  --cds-fluid-heading-05-line-height: 1.25;
+  --cds-fluid-heading-05-letter-spacing: 0;
+  --cds-fluid-heading-06-font-size: 2rem;
+  --cds-fluid-heading-06-font-weight: 600;
+  --cds-fluid-heading-06-line-height: 1.25;
+  --cds-fluid-heading-06-letter-spacing: 0;
+  --cds-fluid-paragraph-01-font-size: 1.5rem;
+  --cds-fluid-paragraph-01-font-weight: 300;
+  --cds-fluid-paragraph-01-line-height: 1.334;
+  --cds-fluid-paragraph-01-letter-spacing: 0;
+  --cds-fluid-quotation-01-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
+  --cds-fluid-quotation-01-font-size: 1.25rem;
+  --cds-fluid-quotation-01-font-weight: 400;
+  --cds-fluid-quotation-01-line-height: 1.3;
+  --cds-fluid-quotation-01-letter-spacing: 0;
+  --cds-fluid-quotation-02-font-family: 'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif;
+  --cds-fluid-quotation-02-font-size: 2rem;
+  --cds-fluid-quotation-02-font-weight: 300;
+  --cds-fluid-quotation-02-line-height: 1.25;
+  --cds-fluid-quotation-02-letter-spacing: 0;
+  --cds-fluid-display-01-font-size: 2.625rem;
+  --cds-fluid-display-01-font-weight: 300;
+  --cds-fluid-display-01-line-height: 1.19;
+  --cds-fluid-display-01-letter-spacing: 0;
+  --cds-fluid-display-02-font-size: 2.625rem;
+  --cds-fluid-display-02-font-weight: 600;
+  --cds-fluid-display-02-line-height: 1.19;
+  --cds-fluid-display-02-letter-spacing: 0;
+  --cds-fluid-display-03-font-size: 2.625rem;
+  --cds-fluid-display-03-font-weight: 300;
+  --cds-fluid-display-03-line-height: 1.19;
+  --cds-fluid-display-03-letter-spacing: 0;
+  --cds-fluid-display-04-font-size: 2.625rem;
+  --cds-fluid-display-04-font-weight: 300;
+  --cds-fluid-display-04-line-height: 1.19;
+  --cds-fluid-display-04-letter-spacing: 0;
+  --cds-true: ;
+  --cds-button-separator: #161616;
+  --cds-button-primary: #0f62fe;
+  --cds-button-secondary: #6f6f6f;
+  --cds-button-tertiary: #ffffff;
+  --cds-button-danger-primary: #da1e28;
+  --cds-button-danger-secondary: #fa4d56;
+  --cds-button-danger-active: #750e13;
+  --cds-button-primary-active: #002d9c;
+  --cds-button-secondary-active: #393939;
+  --cds-button-tertiary-active: #c6c6c6;
+  --cds-button-danger-hover: #b81921;
+  --cds-button-primary-hover: #0050e6;
+  --cds-button-secondary-hover: #5e5e5e;
+  --cds-button-tertiary-hover: #f4f4f4;
+  --cds-button-disabled: rgba(141, 141, 141, 0.3);
+  --cds-tag-background-red: #a2191f;
+  --cds-tag-color-red: #ffd7d9;
+  --cds-tag-hover-red: #c21e25;
+  --cds-tag-background-magenta: #9f1853;
+  --cds-tag-color-magenta: #ffd6e8;
+  --cds-tag-hover-magenta: #bf1d63;
+  --cds-tag-background-purple: #6929c4;
+  --cds-tag-color-purple: #e8daff;
+  --cds-tag-hover-purple: #7c3dd6;
+  --cds-tag-background-blue: #0043ce;
+  --cds-tag-color-blue: #d0e2ff;
+  --cds-tag-hover-blue: #0053ff;
+  --cds-tag-background-cyan: #00539a;
+  --cds-tag-color-cyan: #bae6ff;
+  --cds-tag-hover-cyan: #0066bd;
+  --cds-tag-background-teal: #005d5d;
+  --cds-tag-color-teal: #9ef0f0;
+  --cds-tag-hover-teal: #007070;
+  --cds-tag-background-green: #0e6027;
+  --cds-tag-color-green: #a7f0ba;
+  --cds-tag-hover-green: #11742f;
+  --cds-tag-background-gray: #525252;
+  --cds-tag-color-gray: #e0e0e0;
+  --cds-tag-hover-gray: #636363;
+  --cds-tag-background-cool-gray: #4d5358;
+  --cds-tag-color-cool-gray: #dde1e6;
+  --cds-tag-hover-cool-gray: #5d646a;
+  --cds-tag-background-warm-gray: #565151;
+  --cds-tag-color-warm-gray: #e5e0df;
+  --cds-tag-hover-warm-gray: #696363;
+  --cds-notification-background-error: #262626;
+  --cds-notification-background-success: #262626;
+  --cds-notification-background-info: #262626;
+  --cds-notification-background-warning: #262626;
+  --cds-notification-action-hover: var(--cds-layer-hover);
+  --cds-notification-action-tertiary-inverse: #0f62fe;
+  --cds-notification-action-tertiary-inverse-active: #002d9c;
+  --cds-notification-action-tertiary-inverse-hover: #0050e6;
+  --cds-notification-action-tertiary-inverse-text: #ffffff;
+  --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d;
+  --cds-layer: var(--cds-layer-01, #f4f4f4);
+  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
+  --cds-field: var(--cds-field-01, #f4f4f4);
+  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
+}
+
+.c4p--decorator {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: normal;
+  border-radius: 6rem;
+}
+
+.c4p--decorator .c4p--decorator__label {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  position: relative;
+  display: inline-flex;
+  height: 1.5rem;
+  align-items: normal;
+  padding: 0 0.5rem;
+  border-width: 0.0625rem 0 0.0625rem 0.0625rem;
+  border-style: solid;
+  border-color: var(--cds-border-subtle-02, #e0e0e0);
+  border-radius: 6rem 0 0 6rem;
+  background-color: var(--cds-layer-01, #f4f4f4);
+  color: var(--cds-text-secondary, #525252);
+  line-height: 1.8;
+}
+
+.c4p--decorator .c4p--decorator__value {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  height: 1.5rem;
+  align-items: normal;
+  padding: 0 0.5rem;
+  border-width: 0.0625rem 0.0625rem 0.0625rem 0;
+  border-style: solid;
+  border-color: var(--cds-border-subtle-02, #e0e0e0);
+  border-radius: 0 6rem 6rem 0;
+  background-color: var(--cds-layer-01, #f4f4f4);
+  color: var(--cds-text-primary, #161616);
+  line-height: 1.8;
+}
+
+.c4p--decorator .c4p--decorator-icon {
+  margin-top: 0.1875rem;
+  margin-right: 0.25rem;
+}
+
+.c4p--decorator--default .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  content: "";
+}
+
+.c4p--decorator--link {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.c4p--decorator--link .c4p--decorator__label {
+  background-color: var(--cds-layer-02, #ffffff);
+}
+
+.c4p--decorator--link .c4p--decorator__value {
+  background-color: var(--cds-layer-02, #ffffff);
+  color: var(--cds-link-primary, #0f62fe);
+}
+.c4p--decorator--link .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  content: "";
+}
+
+.c4p--decorator--link:hover .c4p--decorator__value {
+  color: var(--cds-link-primary-hover, #0043ce);
+  text-decoration: underline;
+}
+
+.c4p--decorator--link:focus {
+  text-decoration: none;
+}
+
+.c4p--decorator--link:focus .c4p--decorator__value {
+  border-color: var(--cds-focus, #0f62fe);
+}
+.c4p--decorator--link:focus .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-focus, #0f62fe);
+  content: "";
+}
+
+.c4p--decorator--link:active .c4p--decorator__value {
+  color: var(--cds-text-primary, #161616);
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled) {
+  display: flex;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled) .c4p--decorator__label {
+  background-color: var(--cds-layer-02, #ffffff);
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled) .c4p--decorator__value {
+  background-color: var(--cds-layer-02, #ffffff);
+}
+.c4p--decorator--button:not(.c4p--decorator-disabled) .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  content: "";
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled):hover .c4p--decorator__label {
+  border-color: var(--cds-border-strong);
+  background-color: var(--cds-layer-hover-02, #e8e8e8);
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled):hover .c4p--decorator__value {
+  border-color: var(--cds-border-strong);
+  background-color: var(--cds-layer-hover-02, #e8e8e8);
+}
+.c4p--decorator--button:not(.c4p--decorator-disabled):hover .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-strong);
+  content: "";
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled):focus {
+  outline: none;
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled):focus .c4p--decorator__label {
+  border-color: var(--cds-focus, #0f62fe);
+  background-color: var(--cds-layer-02, #ffffff);
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled):focus .c4p--decorator__value {
+  border-color: var(--cds-focus, #0f62fe);
+  background-color: var(--cds-layer-02, #ffffff);
+}
+.c4p--decorator--button:not(.c4p--decorator-disabled):focus .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  content: "";
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled):active .c4p--decorator__label {
+  background-color: var(--cds-layer-selected-02, #e0e0e0);
+}
+
+.c4p--decorator--button:not(.c4p--decorator-disabled):active .c4p--decorator__value {
+  background-color: var(--cds-layer-selected-02, #e0e0e0);
+}
+.c4p--decorator--button:not(.c4p--decorator-disabled):active .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  content: "";
+}
+
+.c4p--decorator--button.c4p--decorator-disabled {
+  padding: 0;
+  border: 0;
+  cursor: not-allowed;
+}
+
+.c4p--decorator--button.c4p--decorator-disabled .c4p--decorator__label {
+  background-color: var(--cds-layer-02, #ffffff);
+  color: var(--cds-icon-on-color-disabled, #8d8d8d);
+}
+
+.c4p--decorator--button.c4p--decorator-disabled .c4p--decorator__value {
+  background-color: var(--cds-layer-02, #ffffff);
+  color: var(--cds-icon-on-color-disabled, #8d8d8d);
+}
+.c4p--decorator--button.c4p--decorator-disabled .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  content: "";
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label {
+  background-color: var(--cds-layer-02, #ffffff);
+  cursor: pointer;
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled):not(:hover) .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  content: "";
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__value {
+  background-color: var(--cds-layer-02, #ffffff);
+  cursor: pointer;
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:hover {
+  border-color: var(--cds-border-strong);
+  background-color: var(--cds-layer-hover-02, #e8e8e8);
+}
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:hover::after {
+  position: absolute;
+  z-index: 1;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  border-right: 1px solid var(--cds-border-strong);
+  content: "";
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__value:hover {
+  border-color: var(--cds-border-strong);
+  background-color: var(--cds-layer-hover-02, #e8e8e8);
+}
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__value:hover::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-strong);
+  content: "";
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  outline: none;
+}
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:focus::after {
+  position: absolute;
+  z-index: 1;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  border-right: 1px solid var(--cds-focus, #0f62fe);
+  content: "";
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__value:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  outline: none;
+}
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__value:focus::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-focus, #0f62fe);
+  content: "";
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:active {
+  background-color: var(--cds-layer-hover-02, #e8e8e8);
+}
+
+.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__value:active {
+  background-color: var(--cds-layer-hover-02, #e8e8e8);
+}
+
+.c4p--decorator--buttons.c4p--decorator-disabled .c4p--decorator__label {
+  background-color: var(--cds-layer-02, #ffffff);
+  color: var(--cds-icon-on-color-disabled, #8d8d8d);
+}
+
+.c4p--decorator--buttons.c4p--decorator-disabled .c4p--decorator__value {
+  background-color: var(--cds-layer-02, #ffffff);
+  color: var(--cds-icon-on-color-disabled, #8d8d8d);
+}
+.c4p--decorator--buttons.c4p--decorator-disabled .c4p--decorator__value::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
+  content: "";
+}
+
+.c4p--decorator--sm .c4p--decorator__label {
+  height: 1.125rem;
+  padding: 0 0.25rem 0 0.5rem;
+  line-height: 1.333;
+}
+
+.c4p--decorator--sm .c4p--decorator__value {
+  height: 1.125rem;
+  padding: 0 0.5rem 0 calc(0.25rem + 1px);
+  line-height: 1.333;
+}
+
+.c4p--decorator--truncate-end .c4p--decorator__value {
+  display: inline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c4p--decorator--truncate-start .c4p--decorator__value {
+  display: inline;
+  overflow: hidden;
+  direction: rtl;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c4p--decorator-icon__magnitude-unknown {
+  fill: var(--cds-icon-secondary, #525252);
+}
+
+.c4p--decorator-icon__magnitude-benign {
+  fill: #007d79;
+}
+
+.c4p--decorator-icon__magnitude-low {
+  fill: var(--cds-support-warning, #f1c21b);
+}
+
+.c4p--decorator-icon__magnitude-medium {
+  fill: #ff832b;
+}
+
+.c4p--decorator-icon__magnitude-high {
+  fill: var(--cds-support-error, #da1e28);
+}
+
+.c4p--decorator-icon__magnitude-critical {
+  fill: var(--cds-support-error, #da1e28);
+}
+
+.c4p--decorator-disabled svg {
+  fill: var(--cds-icon-on-color-disabled, #8d8d8d);
+}
+
+.c4p--decorator .c4p--decorator-icon--sm {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-top: 0.15625rem;
+}
+
+.c4p--decorator--light.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:hover .c4p--decorator-icon__magnitude-low, .c4p--decorator--light.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:active .c4p--decorator-icon__magnitude-low {
+  stroke: #8e6a00;
+  stroke-width: 1px;
+}
+.c4p--decorator--light.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:hover .c4p--decorator-icon__magnitude-medium path:first-child, .c4p--decorator--light.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:active .c4p--decorator-icon__magnitude-medium path:first-child {
+  fill: #ba4e00;
+}
+
+.c4p--decorator--dark.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:hover .c4p--decorator-icon__magnitude-high path:first-child, .c4p--decorator--dark.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:active .c4p--decorator-icon__magnitude-high path:first-child {
+  fill: #ff8389;
+}
+.c4p--decorator--dark.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:hover .c4p--decorator-icon__magnitude-critical, .c4p--decorator--dark.c4p--decorator--buttons:not(.c4p--decorator-disabled) .c4p--decorator__label:active .c4p--decorator-icon__magnitude-critical {
+  stroke: #ff8389;
+  stroke-width: 0.03125rem;
+}
+
+.c4p--decorator--light.c4p--decorator--button:not(.c4p--decorator-disabled):hover .c4p--decorator-icon__magnitude-low, .c4p--decorator--light.c4p--decorator--button:not(.c4p--decorator-disabled):active .c4p--decorator-icon__magnitude-low {
+  stroke: #8e6a00;
+  stroke-width: 1px;
+}
+.c4p--decorator--light.c4p--decorator--button:not(.c4p--decorator-disabled):hover .c4p--decorator-icon__magnitude-medium path:first-child, .c4p--decorator--light.c4p--decorator--button:not(.c4p--decorator-disabled):active .c4p--decorator-icon__magnitude-medium path:first-child {
+  fill: #ba4e00;
+}
+
+.c4p--decorator--dark.c4p--decorator--button:not(.c4p--decorator-disabled):hover .c4p--decorator-icon__magnitude-high path:first-child, .c4p--decorator--dark.c4p--decorator--button:not(.c4p--decorator-disabled):active .c4p--decorator-icon__magnitude-high path:first-child {
+  fill: #ff8389;
+}
+.c4p--decorator--dark.c4p--decorator--button:not(.c4p--decorator-disabled):hover .c4p--decorator-icon__magnitude-critical, .c4p--decorator--dark.c4p--decorator--button:not(.c4p--decorator-disabled):active .c4p--decorator-icon__magnitude-critical {
+  stroke: #ff8389;
+  stroke-width: 0.03125rem;
+}
+
+.c4p--description-list .cds--structured-list {
+  margin-bottom: 2rem;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__row {
+  border-block-end-width: 0;
+  border-block-start-width: 0;
+}
+
+.c4p--description-list .cds--structured-list .c4p--description-list__body .c4p--description-list__row:first-child {
+  border-block-start-width: 0;
+}
+
+.c4p--description-list .cds--structured-list .c4p--description-list__body .c4p--description-list__row:last-child {
+  border-block-end-width: 0;
+}
+
+.c4p--description-list--bordered .c4p--description-list__body .c4p--description-list__row {
+  border-block-start-width: 1px;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell {
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
+  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell:first-of-type {
+  width: 1%;
+  padding-left: 0;
+  white-space: nowrap;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell:last-of-type {
+  padding-right: 0;
+  color: var(--cds-text-primary, #161616);
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__row:first-of-type > .c4p--description-list__cell {
+  padding-top: 0;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__row:last-of-type > .c4p--description-list__cell {
+  padding-bottom: 0;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell ul {
+  list-style: none;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell ul > li {
+  margin-bottom: 0.5rem;
+}
+
+.c4p--description-list--lg .c4p--description-list__body .c4p--description-list__cell {
+  padding: 1rem 1.5rem 1rem 1rem;
+}
+
+.c4p--description-list--sm .c4p--description-list__body .c4p--description-list__cell {
+  padding: 0.25rem 1.5rem 0.25rem 0.25rem;
+}
+
+.c4p--description-list--xs .c4p--description-list__body .c4p--description-list__cell {
+  padding: 0.25rem;
+}
+
+.c4p--description-list .cds--structured-list-row--focused-within {
+  outline: none;
+}
+
+.c4p--full-page-error {
+  height: inherit;
+}
+
+.c4p--full-page-error__error-container {
+  height: 100%;
+  margin: 0 1.5rem;
+}
+@media (max-width: 41.98rem) {
+  .c4p--full-page-error__error-container {
+    margin: 0 0.5rem;
+  }
+}
+
+.c4p--full-page-error__error-grid {
+  height: 100%;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.c4p--full-page-error__error-column {
+  padding: 0;
+}
+@media (min-width: 66rem) {
+  .c4p--full-page-error__error-column {
+    padding: 0 2rem 0 0;
+  }
+}
+
+.c4p--full-page-error__error-svg-container {
+  display: flex;
+  height: 100%;
+  padding: 0.5rem 0.5rem 5rem 0.5rem;
+}
+@media (min-width: 42rem) {
+  .c4p--full-page-error__error-svg-container {
+    padding: auto 0.5rem 5rem 0.5rem;
+  }
+}
+
+.c4p--full-page-error__error-label,
+.c4p--full-page-error__error-title {
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-size: calc(2rem + 0.25 * (100vw - 20rem) / 22);
+}
+@media (min-width: 42rem) {
+  .c4p--full-page-error__error-label,
+  .c4p--full-page-error__error-title {
+    font-size: 2.25rem;
+    font-weight: 300;
+    line-height: 1.22;
+    font-size: calc(2.25rem + 0.375 * (100vw - 42rem) / 24);
+  }
+}
+@media (min-width: 66rem) {
+  .c4p--full-page-error__error-label,
+  .c4p--full-page-error__error-title {
+    font-size: 2.625rem;
+    line-height: 1.19;
+    font-size: calc(2.625rem + 0.375 * (100vw - 66rem) / 16);
+  }
+}
+@media (min-width: 82rem) {
+  .c4p--full-page-error__error-label,
+  .c4p--full-page-error__error-title {
+    font-size: 3rem;
+    line-height: 1.17;
+    font-size: calc(3rem + 0.75 * (100vw - 82rem) / 17);
+  }
+}
+@media (min-width: 99rem) {
+  .c4p--full-page-error__error-label,
+  .c4p--full-page-error__error-title {
+    font-size: 3.75rem;
+    font-size: 3.75rem;
+  }
+}
+
+.c4p--full-page-error__error-label {
+  display: block;
+  color: var(--cds-text-error, #da1e28);
+}
+
+.c4p--full-page-error__error-title {
+  margin-bottom: 3rem;
+}
+
+.c4p--full-page-error__description {
+  font-size: var(--cds-body-02-font-size, 1rem);
+  font-weight: var(--cds-body-02-font-weight, 400);
+  line-height: var(--cds-body-02-line-height, 1.5);
+  letter-spacing: var(--cds-body-02-letter-spacing, 0);
+  margin-bottom: 2rem;
+}
+
+.c4p--full-page-error__error-svg-container svg.c4p--full-page-error__error-svg {
+  width: 100%;
+}
+
+.c4p--full-page-error__error-svg-container svg.c4p--full-page-error__error-svg path {
+  fill: var(--cds-background, #ffffff);
+  stroke: var(--cds-border-inverse, #161616);
+}
+
+.c4p--search-bar {
+  position: relative;
+  display: flex;
+}
+.c4p--search-bar .c4p--search-bar__scopes .cds--label {
+  position: absolute;
+}
+
+.c4p--string-formatter {
+  display: inline-block;
+  text-align: left;
+}
+
+.c4p--string-formatter--content {
+  display: inline-block;
+  text-align: left;
+}
+
+.c4p--string-formatter--truncate {
+  display: -webkit-box;
+  overflow: hidden;
+  max-width: 80ch;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.c4p--string-formatter__tooltip > button {
+  border-width: 0;
+  color: currentColor;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.cds--popover {
+  max-width: 1rem;
+  margin: 0 auto;
+}
+
+.c4p--string-formatter .cds--popover-content {
+  max-inline-size: 20rem;
+}
+
+.c4p--string-formatter .cds--popover--left .cds--popover,
+.c4p--string-formatter .cds--popover--left-bottom .cds--popover,
+.c4p--string-formatter .cds--popover--left-top .cds--popover {
+  margin: 0;
+}
+
+.c4p--string-formatter .cds--popover--right .cds--popover,
+.c4p--string-formatter .cds--popover--right-bottom .cds--popover,
+.c4p--string-formatter .cds--popover--right-top .cds--popover {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+.c4p--string-formatter .cds--popover--top .cds--popover-caret,
+.c4p--string-formatter .cds--popover--top-left .cds--popover-caret,
+.c4p--string-formatter .cds--popover--top-right .cds--popover-caret {
+  /* stylelint-disable-next-line declaration-no-important */
+  inset-block-start: -1px !important;
+}
+
+.c4p--string-formatter .cds--popover--bottom .cds--popover-caret,
+.c4p--string-formatter .cds--popover--bottom-left .cds--popover-caret,
+.c4p--string-formatter .cds--popover--bottom-right .cds--popover-caret {
+  /* stylelint-disable-next-line declaration-no-important */
+  inset-block-end: -1px !important;
+}
+
+.c4p--user-avatar {
+  position: relative;
+  display: flex;
+  width: 4rem;
+  height: 4rem;
+  align-items: center;
+  justify-content: center;
+  border: 0.5px solid transparent;
+  border-radius: 100%;
+  color: var(--cds-text-inverse, #ffffff);
+  outline: none;
+  outline-offset: 3px;
+}
+
+.c4p--user-avatar svg {
+  color: var(--cds-icon-inverse, #ffffff);
+}
+
+.c4p--user-avatar__tooltip:focus-within .c4p--user-avatar {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+}
+
+.c4p--user-avatar--light-cyan {
+  background-color: #1192e8;
+}
+
+.c4p--user-avatar--dark-cyan {
+  background-color: #0072c3;
+}
+
+.c4p--user-avatar--xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-heading-04-font-weight, 400);
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
+}
+
+.c4p--user-avatar--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-heading-03-font-weight, 400);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
+}
+
+.c4p--user-avatar--md {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+}
+
+.c4p--user-avatar--sm {
   width: 1.5rem;
   height: 1.5rem;
   font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -35958,4 +37424,80 @@ a.cds--side-nav__link--current::before {
   height: 1.5rem;
 }
 
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable function-no-unknown */
+.c4p--status-indicator__title {
+  font-size: var(--cds-heading-02-font-size, 1rem);
+  font-weight: var(--cds-heading-02-font-weight, 600);
+  line-height: var(--cds-heading-02-line-height, 1.5);
+  letter-spacing: var(--cds-heading-02-letter-spacing, 0);
+  margin-bottom: 0.25rem;
+}
+
+.c4p--status-indicator-step__details {
+  display: flex;
+  min-height: 2rem;
+  align-items: center;
+}
+
+.c4p--status-indicator-step__icon {
+  position: relative;
+  display: flex;
+  width: 1.5rem;
+}
+
+.c4p--status-indicator-step__text {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+  color: var(--cds-text-primary, #161616);
+}
+
+.c4p--status-indicator .c4p--status-indicator__button {
+  align-items: center;
+  margin-top: 0.125rem;
+  margin-left: 0.5rem;
+}
+
+.c4p--status-indicator .c4p--status-indicator__button:not([disabled]) svg {
+  margin-left: 0.5rem;
+  fill: currentColor;
+}
+
+.c4p--status-indicator-step--inactive .c4p--status-indicator-step__text {
+  color: var(--cds-text-secondary, #525252);
+}
+
+.c4p--status-indicator-step--inactive svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.c4p--status-indicator-step--active .c4p--status-indicator-step__icon {
+  margin-right: 0;
+}
+
+.c4p--status-indicator-step--active .cds--inline-loading__animation {
+  margin-right: 0.4375rem;
+}
+
+.c4p--status-indicator-step--error svg {
+  fill: var(--cds-support-error, #da1e28);
+}
+
+.c4p--status-indicator-step--finished svg {
+  fill: var(--cds-support-success, #24a148);
+}
+
+.c4p--status-indicator-step__error-message {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  margin-top: -0.125rem;
+  margin-bottom: 0.375rem;
+  margin-left: 1.5rem;
+  color: var(--cds-text-error, #da1e28);
+}
+
 /*# sourceMappingURL=index.css.map */