@carbon/ibm-products 2.40.0 → 2.40.1-canary.6

package/css/index.css

@@ -22268,6 +22268,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
   max-width: 3rem;
 }
 
+.cds--popover .cds--popover-content {
+  white-space: normal;
+}
+
 .c4p--tag-overflow-popover {
   display: inline-block;
   vertical-align: bottom;
@@ -22328,8 +22332,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
   margin: 0;
   background-color: inherit;
   color: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 .c4p--tag-overflow-popover__el .c4p--tag-overflow-popover__tag .cds--tag__close-icon {
   padding: 0;
@@ -23235,14 +23237,14 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
 
-.c4p--condition-builder__condition-builder-item__content {
+.c4p--condition-builder__item__content {
   overflow: auto;
   min-width: 12rem;
   max-width: 20rem;
   max-height: 22rem;
 }
 
-.c4p--condition-builder__condition-builder-item__title {
+.c4p--condition-builder__item__title {
   font-size: var(--cds-heading-01-font-size, 0.875rem);
   font-weight: var(--cds-heading-01-font-weight, 600);
   line-height: var(--cds-heading-01-line-height, 1.42857);
@@ -23250,28 +23252,28 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   padding: 1rem;
 }
 
-.c4p--condition-builder__condition-builder-item-option__search {
+.c4p--condition-builder__item-option__search {
   padding-block-end: 1rem;
   padding-inline: 1rem;
 }
 
-.c4p--condition-builder__condition-builder-item-option__option {
+.c4p--condition-builder__item-option__option {
   height: 2rem;
   cursor: pointer;
   padding-inline: 1rem;
 }
 
-.c4p--condition-builder__condition-builder-item-option__option:hover {
+.c4p--condition-builder__item-option__option:hover {
   background-color: var(--cds-layer-hover);
 }
 
-.c4p--condition-builder__condition-builder-item-option__option-content {
+.c4p--condition-builder__item-option__option-content {
   display: flex;
   height: 100%;
   align-items: center;
 }
 
-.c4p--condition-builder__condition-builder-item-option__option-label {
+.c4p--condition-builder__item-option__option-label {
   display: flex;
   overflow: hidden;
   align-items: center;
@@ -23280,42 +23282,42 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   white-space: nowrap;
 }
 
-.c4p--condition-builder__condition-builder-item-option > ul[aria-multiSelectable=true] .c4p--condition-builder__condition-builder-item-option__option-label {
+.c4p--condition-builder__item-option > ul[aria-multiSelectable=true] .c4p--condition-builder__item-option__option-label {
   justify-content: center;
 }
 
-.c4p--condition-builder__condition-builder-item-option__option:not(:first-of-type) .c4p--condition-builder__condition-builder-item-option__option-content {
+.c4p--condition-builder__item-option__option:not(:first-of-type) .c4p--condition-builder__item-option__option-content {
   border-block-start: 0.0625rem solid var(--cds-border-subtle);
 }
 
-.c4p--condition-builder__condition-builder-item-option__option:hover .c4p--condition-builder__condition-builder-item-option__option-content,
-.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] .c4p--condition-builder__condition-builder-item-option__option-content,
-.c4p--condition-builder__condition-builder-item-option__option:hover + .c4p--condition-builder__condition-builder-item-option__option .c4p--condition-builder__condition-builder-item-option__option-content,
-.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] + .c4p--condition-builder__condition-builder-item-option__option .c4p--condition-builder__condition-builder-item-option__option-content {
+.c4p--condition-builder__item-option__option:hover .c4p--condition-builder__item-option__option-content,
+.c4p--condition-builder__item-option__option[aria-selected=true] .c4p--condition-builder__item-option__option-content,
+.c4p--condition-builder__item-option__option:hover + .c4p--condition-builder__item-option__option .c4p--condition-builder__item-option__option-content,
+.c4p--condition-builder__item-option__option[aria-selected=true] + .c4p--condition-builder__item-option__option .c4p--condition-builder__item-option__option-content {
   border-block-start-color: transparent;
 }
 
-.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true] {
+.c4p--condition-builder__item-option__option[aria-selected=true] {
   background-color: var(--cds-layer-selected);
 }
 
-.c4p--condition-builder__condition-builder-item-option__option[aria-selected=true]:hover {
+.c4p--condition-builder__item-option__option[aria-selected=true]:hover {
   background-color: var(--cds-layer-selected-hover);
 }
 
-.c4p--condition-builder__condition-builder-item-date,
-.c4p--condition-builder__condition-builder-item-text,
-.c4p--condition-builder__condition-builder-item-number,
-c4p--condition-builder__condition-builder-item-time {
+.c4p--condition-builder__item-date,
+.c4p--condition-builder__item-text,
+.c4p--condition-builder__item-number,
+c4p--condition-builder__item-time {
   padding-block-end: 1rem;
   padding-inline: 1rem;
 }
 
-.c4p--condition-builder__condition-builder-checkmark {
+.c4p--condition-builder__checkmark {
   margin-left: auto;
 }
 
-.c4p--condition-builder__condition-builder-button {
+.c4p--condition-builder__button {
   box-sizing: border-box;
   padding: 0;
   border: 0;
@@ -23341,16 +23343,16 @@ c4p--condition-builder__condition-builder-item-time {
   padding-inline: 0.5rem;
   white-space: nowrap;
 }
-.c4p--condition-builder__condition-builder-button *,
-.c4p--condition-builder__condition-builder-button *::before,
-.c4p--condition-builder__condition-builder-button *::after {
+.c4p--condition-builder__button *,
+.c4p--condition-builder__button *::before,
+.c4p--condition-builder__button *::after {
   box-sizing: inherit;
 }
-.c4p--condition-builder__condition-builder-button::-moz-focus-inner {
+.c4p--condition-builder__button::-moz-focus-inner {
   border: 0;
 }
 
-.c4p--condition-builder__condition-builder-button:hover {
+.c4p--condition-builder__button:hover {
   background-color: var(--cds-layer-hover);
 }
 
@@ -23358,14 +23360,14 @@ c4p--condition-builder__condition-builder-item-time {
   background-color: var(--cds-layer-hover);
 }
 
-.c4p--condition-builder__condition-builder-button:focus {
+.c4p--condition-builder__button:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
   content: "";
   inset: 0;
 }
 @media screen and (prefers-contrast) {
-  .c4p--condition-builder__condition-builder-button:focus {
+  .c4p--condition-builder__button:focus {
     outline-style: dotted;
   }
 }
@@ -23406,12 +23408,12 @@ c4p--condition-builder__condition-builder-item-time {
   margin-left: auto;
 }
 
-.c4p--condition-builder__condition-builder-item-option__option:focus {
+.c4p--condition-builder__item-option__option:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .c4p--condition-builder__condition-builder-item-option__option:focus {
+  .c4p--condition-builder__item-option__option:focus {
     outline-style: dotted;
   }
 }
@@ -23447,13 +23449,13 @@ c4p--condition-builder__condition-builder-item-time {
   }
 }
 
-.c4p--condition-builder__condition-builder-condition__deletion-preview .c4p--condition-builder__condition-builder-button:not(.c4p--condition-builder__statement-button,
+.c4p--condition-builder__condition__deletion-preview .c4p--condition-builder__button:not(.c4p--condition-builder__statement-button,
 .c4p--condition-builder__connector-button) {
   background-color: var(--cds-tag-background-red, #ffd7d9);
   color: var(--cds-tag-color-red, #750e13);
 }
 
-.c4p--condition-builder__condition-builder-condition__deletion-preview .c4p--condition-builder__condition-builder-button:not(.c4p--condition-builder__statement-button,
+.c4p--condition-builder__condition__deletion-preview .c4p--condition-builder__button:not(.c4p--condition-builder__statement-button,
 .c4p--condition-builder__connector-button):hover {
   background-color: var(--cds-tag-hover-red, #ffc2c5);
 }
@@ -23597,4 +23599,667 @@ c4p--condition-builder__condition-builder-item-time {
   cursor: default;
 }
 
+/**
+ * The Guidebanner specifically is theme-agnostic, and so we have to 
+ * use color tokens to keep the colors static instead of theme tokens 
+ * that will change depending on the selected theme.
+ * 
+ * Because of this, we are triggering a *large* amount of linting errors.
+ * So, we're adding a few "disable" rules for the file instead of 60 
+ * individual rules.
+ */
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/motion-duration-use */
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+.c4p--guidebanner {
+  --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-sm: rgba(69, 137, 255, 0.16);
+  --cds-ai-border-end: #4589ff;
+  --cds-ai-border-start: rgba(166, 200, 255, 0.36);
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(0, 0, 0, 0.28);
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.16);
+  --cds-ai-overlay: rgba(0, 0, 0, 0.5);
+  --cds-ai-popover-background: #161616;
+  --cds-ai-popover-caret-bottom: #4589ff;
+  --cds-ai-popover-caret-bottom-background: #202d45;
+  --cds-ai-popover-caret-bottom-background-actions: #1e283a;
+  --cds-ai-popover-caret-center: #4870b5;
+  --cds-ai-popover-shadow-outer-01: rgba(0, 0, 0, 0.12);
+  --cds-ai-popover-shadow-outer-02: rgba(0, 0, 0, 0.08);
+  --cds-ai-skeleton-background: rgba(120, 169, 255, 0.5);
+  --cds-ai-skeleton-element-background: rgba(120, 169, 255, 0.3);
+  --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-border: #525252;
+  --cds-chat-bubble-user: #393939;
+  --cds-chat-button: #78a9ff;
+  --cds-chat-button-active: rgba(141, 141, 141, 0.4);
+  --cds-chat-button-hover: rgba(141, 141, 141, 0.16);
+  --cds-chat-button-selected: rgba(141, 141, 141, 0.24);
+  --cds-chat-button-text-hover: #a6c8ff;
+  --cds-chat-button-text-selected: #c6c6c6;
+  --cds-chat-header-background: #262626;
+  --cds-chat-prompt-background: #161616;
+  --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
+  --cds-chat-prompt-border-start: #262626;
+  --cds-chat-shell-background: #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-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: #f4f4f4;
+  --cds-tag-hover-gray: #636363;
+  --cds-tag-border-red: #fa4d56;
+  --cds-tag-border-blue: #4589ff;
+  --cds-tag-border-cyan: #1192e8;
+  --cds-tag-border-teal: #009d9a;
+  --cds-tag-border-green: #24a148;
+  --cds-tag-border-magenta: #ee5396;
+  --cds-tag-border-purple: #a56eff;
+  --cds-tag-border-gray: #8d8d8d;
+  --cds-tag-border-cool-gray: #878d96;
+  --cds-tag-border-warm-gray: #8f8b8b;
+  --cds-tag-background-cool-gray: #4d5358;
+  --cds-tag-color-cool-gray: #f2f4f8;
+  --cds-tag-hover-cool-gray: #5d646a;
+  --cds-tag-background-warm-gray: #565151;
+  --cds-tag-color-warm-gray: #f7f3f2;
+  --cds-tag-hover-warm-gray: #696363;
+  --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);
+  position: relative;
+  background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
+  background-color: #001d6c;
+}
+
+.c4p--guidebanner__icon-idea {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+}
+.c4p--guidebanner__icon-idea path {
+  fill: #f4f4f4;
+}
+
+.c4p--guidebanner__title {
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
+  padding: 1rem 10.9375rem 0 3.25rem;
+  color: #f4f4f4;
+}
+
+.c4p--guidebanner__close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.c4p--guidebanner__close-button button {
+  width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  padding-top: 6px;
+}
+.c4p--guidebanner__close-button button:active, .c4p--guidebanner__close-button button:hover {
+  background-color: #7433e3;
+}
+.c4p--guidebanner__close-button button path {
+  fill: #ffffff;
+}
+
+.c4p--guidebanner__carousel {
+  padding: 0 0 1rem 0;
+  color: #f4f4f4;
+}
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__carousel {
+  margin-bottom: 0;
+}
+
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element {
+  display: flex;
+  width: 25rem;
+  max-height: 32rem;
+  flex-flow: column;
+  flex-shrink: 0;
+  padding-left: 3.25rem;
+  margin: 1rem 0 0 0;
+  opacity: 1;
+  scroll-snap-align: start;
+  transition: max-height 50ms cubic-bezier(0.2, 0, 1, 0.9), margin-top 50ms cubic-bezier(0.2, 0, 1, 0.9), opacity 300ms cubic-bezier(0.2, 0, 1, 0.9);
+}
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element {
+  max-height: 0.5rem;
+  margin-top: 0;
+  opacity: 0;
+}
+
+.c4p--guidebanner__carousel .c4p--carousel__item:last-child .c4p--guidebanner__element {
+  width: 28rem;
+  padding-right: 3.25rem;
+}
+
+.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-title {
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+  margin: 1rem 0 0 0;
+}
+
+.c4p--guidebanner__carousel .c4p--guidebanner__element-content {
+  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);
+  margin-bottom: 1rem;
+}
+
+.c4p--guidebanner__carousel .cds--btn--tertiary {
+  border-color: #ffffff;
+  color: #ffffff;
+}
+.c4p--guidebanner__carousel .cds--btn--tertiary:active, .c4p--guidebanner__carousel .cds--btn--tertiary:hover {
+  border-color: #ffffff;
+  background-color: #ffffff;
+  color: #161616;
+}
+.c4p--guidebanner__carousel .cds--btn--tertiary svg {
+  position: absolute;
+  right: 1rem;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.c4p--guidebanner__carousel .cds--btn--ghost {
+  margin-left: -1rem;
+  color: #a6c8ff;
+}
+.c4p--guidebanner__carousel .cds--btn--ghost:active, .c4p--guidebanner__carousel .cds--btn--ghost:hover {
+  background-color: #7f3ae7;
+  color: #f4f4f4;
+}
+
+.c4p--guidebanner__carousel .c4p--guidebanner__element-link {
+  color: #a6c8ff;
+}
+.c4p--guidebanner__carousel .c4p--guidebanner__element-link:visited {
+  color: #a6c8ff;
+}
+.c4p--guidebanner__carousel .c4p--guidebanner__element-link:active, .c4p--guidebanner__carousel .c4p--guidebanner__element-link:hover {
+  color: #d0e2ff;
+}
+
+.c4p--guidebanner__navigation {
+  display: flex;
+  border-top: 0.0625rem solid #8a3ffc;
+}
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation {
+  border-top: none;
+}
+
+.c4p--guidebanner__navigation .c4p--guidebanner__toggle-button {
+  margin-left: 2.125rem;
+  color: #a6c8ff;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__toggle-button:active, .c4p--guidebanner__navigation .c4p--guidebanner__toggle-button:hover {
+  background-color: #7433e3;
+  color: #f4f4f4;
+}
+
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button {
+  margin-left: auto;
+}
+
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation .c4p--guidebanner__back-button,
+.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation .c4p--guidebanner__next-button {
+  display: none;
+}
+
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button button:active, .c4p--guidebanner__navigation .c4p--guidebanner__back-button button:hover,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button button:active,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button button:hover {
+  background-color: #7433e3;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button button path,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button button path {
+  fill: #ffffff;
+}
+.c4p--guidebanner__navigation .c4p--guidebanner__back-button button[disabled] path,
+.c4p--guidebanner__navigation .c4p--guidebanner__next-button button[disabled] path {
+  fill: #9b63ff;
+}
+
+.c4p--guidebanner__with-left-gutter .c4p--guidebanner__icon-idea {
+  left: 2rem;
+}
+
+.c4p--guidebanner__with-left-gutter .c4p--guidebanner__title {
+  padding-left: 4.25rem;
+}
+
+.c4p--guidebanner__with-left-gutter .c4p--guidebanner__navigation {
+  padding-left: 1rem;
+}
+
+.c4p--guidebanner__with-left-gutter .c4p--carousel__elements-container {
+  padding-left: 1rem;
+}
+
+.c4p--guidebanner__with-left-gutter .c4p--carousel__elements-container--scrolled {
+  width: 4rem;
+}
+
 /*# sourceMappingURL=index.css.map */