@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.20

package/css/index-without-carbon-released-only.css

@@ -164,14 +164,17 @@
   font-weight: var(--cds-body-short-01-font-weight, 400);
   line-height: var(--cds-body-short-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
-  height: 4rem;
   align-items: center;
+  margin: 0;
+}
+.c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
+  height: 4rem;
   padding-top: 1rem;
   padding-bottom: 2rem;
-  margin: 0;
 }
 
-.c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
+.c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
+.c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
   max-width: none;
 }
 
@@ -1722,7 +1725,7 @@
 @media (prefers-reduced-motion: no-preference) {
   .c4p--cascade__element,
 .c4p--cascade__col {
-    /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
+    /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
     animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
     animation-fill-mode: forwards;
     opacity: 0;
@@ -2133,26 +2136,6 @@
   white-space: nowrap;
 }
 
-@keyframes side-panel-exit-left {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(calc(-1 * 30rem));
-  }
-}
-@keyframes side-panel-exit-right {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(30rem);
-  }
-}
 .c4p--side-panel__container {
   --c4p--side-panel--subtitle-opacity: 1;
   --c4p--side-panel--title-container-height: 0;
@@ -2172,8 +2155,6 @@
   box-sizing: border-box;
   background-color: var(--cds-layer-01, #f4f4f4);
   color: var(--cds-text-primary, #161616);
-  transition: transform 240ms;
-  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--side-panel__container.c4p--side-panel__container--xs {
   width: 16rem;
@@ -2187,37 +2168,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
-  width: 16rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(16rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
-  width: 16rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-16rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--sm {
   width: 20rem;
   max-width: 100%;
@@ -2230,37 +2187,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
-  width: 20rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(20rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
-  width: 20rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-20rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--md {
   width: 30rem;
   max-width: 100%;
@@ -2273,37 +2206,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
-  width: 30rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(30rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
-  width: 30rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-30rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--lg {
   width: 40rem;
   max-width: 100%;
@@ -2316,37 +2225,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
-  width: 40rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(40rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
-  width: 40rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-40rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--2xl {
   width: 75%;
   max-width: 100%;
@@ -2359,37 +2244,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
-  width: 75%;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(75%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
-  width: 75%;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-75%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
   /* stylelint-disable-next-line max-nesting-depth */
 }
@@ -2522,10 +2383,7 @@
 .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
   position: fixed;
   z-index: 2;
-  top: calc(
-      var(--c4p--side-panel--title-text-height) +
-        var(--c4p--side-panel--label-text-height) + 3rem
-    );
+  top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
   background-color: var(--cds-layer-01, #f4f4f4);
 }
 .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -2540,7 +2398,6 @@
 }
 .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
   position: fixed;
-  top: 3rem;
   height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
 }
 .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -2561,10 +2418,7 @@
 }
 .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
   position: fixed;
-  top: calc(
-      var(--c4p--side-panel--title-text-height) +
-        var(--c4p--side-panel--subtitle-container-height) + 3rem
-    );
+  top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
   width: 100%;
   border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
 }
@@ -2589,8 +2443,7 @@
   padding: 0 1rem;
   margin-bottom: 0.5rem;
   background-color: var(--cds-layer-01, #f4f4f4);
-  transition: transform 150ms;
-  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
   min-width: 2rem;
@@ -2721,8 +2574,6 @@
   width: 100%;
   height: 100%;
   background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
-  transition: background-color 240ms;
-  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -2869,7 +2720,7 @@
   /* stylelint-disable-next-line function-no-unknown */
   z-index: 9000;
   align-items: flex-end;
-  transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
+  transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
 }
 @media (prefers-reduced-motion: reduce) {
   .c4p--tearsheet.is-visible {
@@ -2976,6 +2827,7 @@
   letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  word-break: break-word;
 }
 @media (min-width: 42rem) {
   .c4p--tearsheet .c4p--tearsheet__header-description {
@@ -3556,7 +3408,9 @@
   display: inline-block;
   overflow: hidden;
   width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
-  max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
+  max-width: calc(
+      100% - var(--c4p--inline-edit--toolbar-width) - 1rem
+    );
   min-height: var(--c4p--inline-edit--size);
   /* stylelint-disable-next-line carbon/layout-token-use */
   margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -3827,130 +3681,543 @@
   background: var(--cds-layer-02, #ffffff);
 }
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-    transform: translateY(-38.5rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.c4p--add-select__header {
+  padding: 1rem;
+  padding-bottom: 0;
+  border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
 }
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-38.5rem);
-  }
+
+.c4p--add-select__body {
+  padding: 1rem;
 }
-.c4p--notifications-panel__container {
-  --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: #393939;
-  --cds-border-subtle-02: #525252;
-  --cds-border-subtle-03: #6f6f6f;
-  --cds-border-subtle-selected-01: #525252;
-  --cds-border-subtle-selected-02: #6f6f6f;
-  --cds-border-subtle-selected-03: #8d8d8d;
-  --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-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;
+
+/* stylelint-disable max-nesting-depth */
+.c4p--add-select__selections.cds--structured-list {
+  margin-bottom: 0;
+}
+.c4p--add-select__selections-wrapper {
+  display: block;
+}
+.c4p--add-select__selections-cell-wrapper {
+  display: flex;
+  height: 3rem;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
+}
+.c4p--add-select__selections-cell-title {
+  display: block;
+  color: var(--cds-text-primary, #161616);
+}
+.c4p--add-select__selections-cell-subtitle {
+  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);
+  display: block;
+  color: var(--cds-text-secondary, #525252);
+}
+.c4p--add-select__selections-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
+.c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
+  visibility: visible;
+}
+.c4p--add-select__selections-hidden-hover {
+  visibility: hidden;
+}
+.c4p--add-select__selections-row--selected.cds--structured-list-row {
+  border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
+  background-color: var(--cds-layer-selected-01, #e0e0e0);
+}
+.c4p--add-select__selections-checkbox {
+  display: flex;
+  align-items: center;
+}
+.c4p--add-select__selections-checkbox-label-wrapper {
+  display: flex;
+  margin-left: 1rem;
+}
+.c4p--add-select__selections-checkbox-label-text {
+  display: flex;
+  flex-direction: column;
+}
+.c4p--add-select__selections-checkbox-wrapper.cds--form-item {
+  flex: 0;
+}
+.c4p--add-select__selections-checkbox-wrapper .cds--checkbox-label-text {
+  display: none;
+}
+.c4p--add-select__selections-cell-avatar {
+  margin-right: 0.5rem;
+}
+.c4p--add-select__selections-cell-icon {
+  margin-right: 0.5rem;
+}
+.c4p--add-select__selections-row {
+  border-left: 0.125rem solid transparent;
+}
+.c4p--add-select__selections-row-meta--selected {
+  border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
+  background-color: var(--cds-layer-hover-01, #e8e8e8);
+}
+
+.c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
+  color: var(--cds-interactive, #0f62fe);
+}
+.c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-view-children svg {
+  color: var(--cds-interactive, #0f62fe);
+}
+.c4p--add-select .c4p--add-select__selections-row:hover button.c4p--add-select__selections-view-children.cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path {
+  fill: currentColor;
+}
+
+.c4p--add-select__sub-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+.c4p--add-select__sub-header-multi {
+  padding: 0 1rem;
+}
+
+.c4p--add-select .cds--structured-list-row {
+  border-bottom: 0;
+}
+
+.c4p--add-select .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
+  border-bottom: 0;
+}
+
+.c4p--add-select__sidebar-header {
+  display: flex;
+  padding: 2rem 1rem 0.5rem 1rem;
+  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
+}
+.c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
+  font-size: var(--cds-productive-heading-02-font-size, 1rem);
+  font-weight: var(--cds-productive-heading-02-font-weight, 600);
+  line-height: var(--cds-productive-heading-02-line-height, 1.375);
+  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
+}
+
+.c4p--add-select__sidebar-title {
+  margin-right: 0.5rem;
+}
+
+.c4p--add-select__sidebar-selected-item-title {
+  color: var(--cds-text-primary, #161616);
+}
+.c4p--add-select__sidebar-selected-item-subtitle {
+  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);
+  color: var(--cds-text-secondary, #525252);
+}
+
+.c4p--add-select__sidebar-body {
+  padding: 0 1rem;
+}
+
+.c4p--add-select .c4p--add-select__sidebar-item-header {
+  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-bottom: 0.5rem;
+  color: var(--cds-text-secondary, #525252);
+}
+
+.c4p--add-select .c4p--add-select__sidebar-item-body {
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+  margin-bottom: 1rem;
+}
+
+.c4p--add-select .c4p--add-select__sidebar-item-remove-button:hover {
+  background: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.c4p--add-select .c4p--add-select__sidebar-accordion-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.c4p--add-select__columns {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  overflow-x: auto;
+}
+.c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
+  margin-left: 0.5rem;
+}
+.c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
+  border-left: 0;
+}
+.c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
+  padding: 0;
+}
+.c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
+  height: auto;
+  padding: 0 0.5rem;
+}
+.c4p--add-select__columns .c4p--add-select__tags {
+  padding: 0 0.5rem;
+  margin-bottom: 0;
+}
+.c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
+  padding: 0;
+}
+.c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
+  border-top: 0;
+}
+
+.c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
+  padding: 0 1rem;
+}
+
+.c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
+  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+}
+
+.c4p--add-select__column {
+  overflow: auto;
+  flex: 0 0 20rem;
+  padding: 1rem;
+  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+}
+.c4p--add-select__column-search-bar {
+  display: flex;
+}
+.c4p--add-select__column-search-bar label {
+  display: none;
+}
+.c4p--add-select__column-sort-filter {
+  display: flex;
+}
+.c4p--add-select__column .cds--overflow-menu {
+  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
+}
+
+.c4p--add-select__tags {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+.c4p--add-select__tags-label {
+  margin-right: 0.5rem;
+}
+
+.c4p--add-select__global-filter {
+  position: absolute;
+  z-index: 6000;
+  right: 0;
+  width: 100%;
+  max-width: 40rem;
+  background: var(--cds-layer-01, #f4f4f4);
+  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
+  transform: translate(0, 100%);
+}
+.c4p--add-select__global-filter-search {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+}
+.c4p--add-select__global-filter-content {
+  padding: 1rem;
+}
+.c4p--add-select__global-filter-opts {
+  display: grid;
+  grid-gap: 1rem 2rem;
+  grid-template-columns: repeat(2, 1fr);
+}
+.c4p--add-select__global-filter-applied {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  background: var(--cds-layer-01, #f4f4f4);
+}
+
+.c4p--add-select__global-filter-button-set button.c4p--add-select__global-filter-button {
+  max-width: none;
+  flex: 1;
+}
+
+button.c4p--add-select__global-filter-toggle {
+  border-bottom-color: var(--cds-border-strong-01, #8d8d8d);
+  background: var(--cds-field-01, #f4f4f4);
+}
+button.c4p--add-select__global-filter-toggle--open {
+  border-bottom: var(--cds-border-strong-01, #8d8d8d);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+}
+
+.c4p--add-select__meta-panel {
+  padding: 1rem;
+}
+.c4p--add-select__meta-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.c4p--add-select__meta-panel-entry {
+  margin-bottom: 1rem;
+}
+
+.c4p--add-select__meta-panel p.c4p--add-select__meta-panel-title {
+  font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-productive-heading-03-font-weight, 400);
+  line-height: var(--cds-productive-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
+}
+
+.c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-title {
+  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-productive-heading-01-font-weight, 600);
+  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+}
+
+.c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+}
+
+.c4p--add-select__selections .cds--list-box__menu {
+  left: auto;
+}
+
+.c4p--add-select__tags .cds--tag {
+  margin: 0;
+}
+
+.c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
+  flex-basis: 22.5rem;
+}
+
+.c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
+  color: var(--cds-text-secondary, #525252);
+}
+
+.c4p--add-select.c4p--tearsheet .c4p--tearsheet__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
+  max-width: 11.25rem;
+}
+
+.c4p--add-select .c4p--add-select__items-label {
+  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-productive-heading-01-font-weight, 600);
+  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+}
+
+.c4p--add-select .cds--modal-container--sm .cds--modal-content p {
+  padding-right: 0;
+}
+
+.c4p--add-select .cds--structured-list-td {
+  height: 4rem;
+  padding: 1rem;
+  vertical-align: middle;
+}
+
+.c4p--add-select .cds--radio-button__appearance {
+  margin: 0 1rem 0 0;
+}
+
+.c4p--add-select .cds--radio-button-wrapper .cds--radio-button__label {
+  justify-content: left;
+}
+
+.c4p--add-select .cds--breadcrumb .cds--link {
+  cursor: pointer;
+}
+
+.c4p--add-select .cds--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
+  opacity: 1;
+}
+.c4p--add-select .cds--accordion__item .c4p--add-select__sidebar-accordion-title button {
+  opacity: 0;
+}
+
+.c4p--add-select .cds--checkbox-label-text {
+  padding-left: 0.5rem;
+}
+
+.c4p--add-select__multi .c4p--empty-state {
+  max-width: 16rem;
+  margin-top: 3rem;
+}
+
+.c4p--add-select .cds--accordion__arrow {
+  transform: rotate(0deg);
+}
+
+.c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
+  transform: rotate(90deg);
+}
+
+.c4p--add-select .cds--accordion--start .cds--accordion__arrow {
+  margin: 0 0 0 1rem;
+}
+
+.c4p--add-select .cds--accordion--start .cds--accordion__title {
+  margin: 0 1rem 0 0.5rem;
+}
+
+.c4p--add-select .cds--accordion__item--active .cds--accordion__content {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0.5rem;
+}
+
+.c4p--add-select .cds--tooltip,
+.c4p--add-select .cds--overflow-menu-options {
+  z-index: 9000;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-38.5rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-38.5rem);
+  }
+}
+.c4p--notifications-panel__container {
+  --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: #393939;
+  --cds-border-subtle-02: #525252;
+  --cds-border-subtle-03: #6f6f6f;
+  --cds-border-subtle-selected-01: #525252;
+  --cds-border-subtle-selected-02: #6f6f6f;
+  --cds-border-subtle-selected-03: #8d8d8d;
+  --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-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;
@@ -4210,8 +4477,7 @@
   max-height: 38.5rem;
   background-color: var(--cds-background, #ffffff);
   color: var(--cds-text-primary, #161616);
-  transition: transform 110ms;
-  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
   position: sticky;
@@ -4285,8 +4551,7 @@
   background-color: var(--cds-background, #ffffff);
   cursor: pointer;
   text-align: left;
-  transition: background-color 240ms;
-  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
   margin-bottom: 0.25rem;
@@ -4399,8 +4664,7 @@
   margin: 0 auto;
   background-color: var(--cds-layer-02, #ffffff);
   content: "";
-  transition: background-color 240ms;
-  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
 .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -6954,10 +7218,6 @@
   padding-right: 1rem;
 }
 
-.c4p--remove-modal .cds--modal-close {
-  display: none;
-}
-
 .c4p--remove-modal__body {
   padding-right: 20%;
   margin-bottom: 1rem;
@@ -7671,113 +7931,881 @@
 .c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
   /* stylelint-disable-next-line max-nesting-depth */
 }
-.cds--tooltip__trigger.c4p--user-profile-image__tooltip:hover, .cds--tooltip__trigger.c4p--user-profile-image__tooltip:focus,
-.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg:hover,
-.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg:focus {
-  /* stylelint-disable-next-line max-nesting-depth */
+.cds--tooltip__trigger.c4p--user-profile-image__tooltip:hover, .cds--tooltip__trigger.c4p--user-profile-image__tooltip:focus,
+.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg:hover,
+.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg:focus {
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+.cds--tooltip__trigger.c4p--user-profile-image__tooltip:hover svg, .cds--tooltip__trigger.c4p--user-profile-image__tooltip:focus svg,
+.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg:hover svg,
+.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg:focus svg {
+  fill: var(--cds-layer-01, #f4f4f4);
+}
+
+.c4p--user-profile-image {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  text-transform: uppercase;
+}
+
+.c4p--user-profile-image__tooltip.cds--btn--md.cds--btn--icon-only {
+  min-height: auto;
+  padding: 0;
+  border-radius: 50%;
+}
+
+.cds--tooltip__trigger .c4p--user-profile-image svg,
+.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
+  fill: var(--cds-layer-01, #f4f4f4);
+}
+
+.c4p--user-profile-image__photo {
+  width: 100%;
+  border-radius: 100%;
+}
+
+.c4p--user-profile-image__photo--xl {
+  width: 4rem;
+  height: 4rem;
+}
+
+.c4p--user-profile-image__photo--lg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.c4p--user-profile-image__photo--md {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.c4p--user-profile-image__photo--sm {
+  width: calc(1rem + 0.25rem);
+  height: calc(1rem + 0.25rem);
+}
+
+.c4p--user-profile-image__photo--xs {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c4p--user-profile-image--xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-productive-heading-04-font-weight, 400);
+  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
+}
+
+.c4p--user-profile-image--lg {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+}
+
+.c4p--user-profile-image--md {
+  width: 1.5rem;
+  height: 1.5rem;
+  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);
+  font-weight: 600;
+}
+
+.c4p--user-profile-image--sm {
+  width: calc(1rem + 0.25rem);
+  height: calc(1rem + 0.25rem);
+  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);
+  font-weight: 600;
+}
+
+.c4p--user-profile-image--xs {
+  width: 1rem;
+  height: 1rem;
+  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);
+  font-weight: 600;
+}
+
+@keyframes web-terminal-entrance {
+  from {
+    opacity: 0;
+    transform: translateX(40rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes web-terminal-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(40rem);
+  }
 }
-.cds--tooltip__trigger.c4p--user-profile-image__tooltip:hover svg, .cds--tooltip__trigger.c4p--user-profile-image__tooltip:focus svg,
-.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg:hover svg,
-.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg:focus svg {
-  fill: var(--cds-layer-01, #f4f4f4);
+/*
+  The reason for not using theme tokens in the web terminal
+  component is because we want these colors to always be the same
+  despite of which carbon theme the user has.
+*/
+.c4p--web-terminal {
+  --cds-background: #262626;
+  --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: #8d8d8d;
+  --cds-border-strong-02: #a8a8a8;
+  --cds-border-strong-03: #c6c6c6;
+  --cds-border-subtle-00: #525252;
+  --cds-border-subtle-01: #525252;
+  --cds-border-subtle-02: #6f6f6f;
+  --cds-border-subtle-03: #8d8d8d;
+  --cds-border-subtle-selected-01: #6f6f6f;
+  --cds-border-subtle-selected-02: #8d8d8d;
+  --cds-border-subtle-selected-03: #a8a8a8;
+  --cds-field-01: #393939;
+  --cds-field-02: #525252;
+  --cds-field-03: #6f6f6f;
+  --cds-field-hover-01: #474747;
+  --cds-field-hover-02: #636363;
+  --cds-field-hover-03: #5e5e5e;
+  --cds-focus: #ffffff;
+  --cds-focus-inset: #161616;
+  --cds-focus-inverse: #0f62fe;
+  --cds-highlight: #0043ce;
+  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
+  --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: #393939;
+  --cds-layer-02: #525252;
+  --cds-layer-03: #6f6f6f;
+  --cds-layer-accent-01: #525252;
+  --cds-layer-accent-02: #6f6f6f;
+  --cds-layer-accent-03: #8d8d8d;
+  --cds-layer-accent-active-01: #8d8d8d;
+  --cds-layer-accent-active-02: #393939;
+  --cds-layer-accent-active-03: #525252;
+  --cds-layer-accent-hover-01: #636363;
+  --cds-layer-accent-hover-02: #5e5e5e;
+  --cds-layer-accent-hover-03: #7a7a7a;
+  --cds-layer-active-01: #6f6f6f;
+  --cds-layer-active-02: #8d8d8d;
+  --cds-layer-active-03: #393939;
+  --cds-layer-hover-01: #474747;
+  --cds-layer-hover-02: #636363;
+  --cds-layer-hover-03: #5e5e5e;
+  --cds-layer-selected-01: #525252;
+  --cds-layer-selected-02: #6f6f6f;
+  --cds-layer-selected-03: #525252;
+  --cds-layer-selected-disabled: #a8a8a8;
+  --cds-layer-selected-hover-01: #636363;
+  --cds-layer-selected-hover-02: #5e5e5e;
+  --cds-layer-selected-hover-03: #636363;
+  --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: #333333;
+  --cds-skeleton-element: #525252;
+  --cds-support-caution-major: #ff832b;
+  --cds-support-caution-minor: #f1c21b;
+  --cds-support-caution-undefined: #a56eff;
+  --cds-support-error: #ff8389;
+  --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: #ffb3b8;
+  --cds-text-helper: #c6c6c6;
+  --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: #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-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-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: carbon--type-scale(2);
+  --cds-helper-text-02-font-weight: carbon--font-weight("regular");
+  --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: 2rem;
+  --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: 2.625rem;
+  --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: 600;
+  --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: 2rem;
+  --cds-heading-06-font-weight: 300;
+  --cds-heading-06-line-height: 1.199;
+  --cds-heading-06-letter-spacing: 0;
+  --cds-heading-07-font-size: 2.625rem;
+  --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: 600;
+  --cds-fluid-display-04-line-height: 1.19;
+  --cds-fluid-display-04-letter-spacing: 0;
+  --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-01, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  position: fixed;
+  top: 3rem;
+  right: 0;
+  width: 100%;
+  max-width: 40rem;
+  height: calc(100vh - 3rem);
+  border-left: 1px solid #262626;
+  color: var(--cds-text-primary, #161616);
+  /* stylelint-disable-next-line  */
+  background-color: #161616;
 }
 
-.c4p--user-profile-image {
+.c4p--web-terminal__bar {
   display: flex;
-  flex-direction: column;
+  height: 3rem;
   align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  text-transform: uppercase;
-}
-
-.c4p--user-profile-image__tooltip.cds--btn--md.cds--btn--icon-only {
-  min-height: auto;
-  padding: 0;
-  border-radius: 50%;
-}
-
-.cds--tooltip__trigger .c4p--user-profile-image svg,
-.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
-  fill: var(--cds-layer-01, #f4f4f4);
-}
-
-.c4p--user-profile-image__photo {
-  width: 100%;
-  border-radius: 100%;
-}
-
-.c4p--user-profile-image__photo--xl {
-  width: 4rem;
-  height: 4rem;
-}
-
-.c4p--user-profile-image__photo--lg {
-  width: 2rem;
-  height: 2rem;
-}
-
-.c4p--user-profile-image__photo--md {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.c4p--user-profile-image__photo--sm {
-  width: calc(1rem + 0.25rem);
-  height: calc(1rem + 0.25rem);
-}
-
-.c4p--user-profile-image__photo--xs {
-  width: 1rem;
-  height: 1rem;
+  justify-content: space-between;
+  background-color: var(--cds-background, #ffffff);
 }
 
-.c4p--user-profile-image--xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
-  font-weight: var(--cds-productive-heading-04-font-weight, 400);
-  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
-  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
+.c4p--web-terminal__actions {
+  display: flex;
 }
 
-.c4p--user-profile-image--lg {
-  width: 2rem;
-  height: 2rem;
-  font-size: var(--cds-body-short-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-short-01-font-weight, 400);
-  line-height: var(--cds-body-short-01-line-height, 1.28572);
-  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+.c4p--web-terminal__documentation-overflow {
+  --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: #393939;
+  --cds-border-subtle-02: #525252;
+  --cds-border-subtle-03: #6f6f6f;
+  --cds-border-subtle-selected-01: #525252;
+  --cds-border-subtle-selected-02: #6f6f6f;
+  --cds-border-subtle-selected-03: #8d8d8d;
+  --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-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-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-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: carbon--type-scale(2);
+  --cds-helper-text-02-font-weight: carbon--font-weight("regular");
+  --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: 2rem;
+  --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: 2.625rem;
+  --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: 600;
+  --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: 2rem;
+  --cds-heading-06-font-weight: 300;
+  --cds-heading-06-line-height: 1.199;
+  --cds-heading-06-letter-spacing: 0;
+  --cds-heading-07-font-size: 2.625rem;
+  --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: 600;
+  --cds-fluid-display-04-line-height: 1.19;
+  --cds-fluid-display-04-letter-spacing: 0;
+  --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-01, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
 }
 
-.c4p--user-profile-image--md {
-  width: 1.5rem;
-  height: 1.5rem;
-  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);
-  font-weight: 600;
+.c4p--web-terminal__body {
+  height: 100%;
 }
 
-.c4p--user-profile-image--sm {
-  width: calc(1rem + 0.25rem);
-  height: calc(1rem + 0.25rem);
-  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);
-  font-weight: 600;
+.c4p--web-terminal-content-wrapper {
+  width: 100vw;
+  height: 100%;
 }
 
-.c4p--user-profile-image--xs {
-  width: 1rem;
-  height: 1rem;
-  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);
-  font-weight: 600;
+.c4p--web-terminal-content-wrapper--open {
+  width: calc(100vw - 40rem);
 }
 
 /*# sourceMappingURL=index-without-carbon-released-only.css.map */