@carbon/ibm-products 2.43.2-canary.1 → 2.43.2-canary.101

package/css/index-without-carbon.css

@@ -1802,6 +1802,10 @@ p.c4p--about-modal__copyright-text:first-child {
   color: var(--cds-text-inverse, #ffffff);
   visibility: hidden;
 }
+.c4p--coachmark-overlay--tooltip {
+  position: initial;
+  transform: none !important;
+}
 .c4p--coachmark-overlay--fixed {
   position: fixed;
   right: 1rem;
@@ -1823,105 +1827,42 @@ p.c4p--about-modal__copyright-text:first-child {
   transform: translateY(0);
   visibility: visible;
 }
-.c4p--coachmark-overlay__caret {
-  position: absolute;
-  z-index: 5902;
-  width: 0;
-  height: 0;
-  border-right: 0.375rem solid transparent;
-  border-bottom: solid 0.375rem var(--cds-background-inverse, #393939);
-  border-left: 0.375rem solid transparent;
-}
 .c4p--coachmark-overlay--top {
   transform: translate(-50%, calc(-1 * (100% + 1.5rem + 0.375rem)));
 }
-.c4p--coachmark-overlay--top .c4p--coachmark-overlay__caret {
-  left: calc(50% - 0.375rem);
-  transform: rotate(180deg);
-}
 .c4p--coachmark-overlay--top-left {
   transform: translate(-1.5rem, calc(-1 * (100% + 1.5rem + 0.375rem)));
 }
-.c4p--coachmark-overlay--top-left .c4p--coachmark-overlay__caret {
-  left: 1.125rem;
-  transform: rotate(180deg);
-}
 .c4p--coachmark-overlay--top-right {
   transform: translate(calc(-1 * (100% - 1.5rem)), calc(-1 * (100% + 1.5rem + 0.375rem)));
 }
-.c4p--coachmark-overlay--top-right .c4p--coachmark-overlay__caret {
-  right: 1.125rem;
-  transform: rotate(180deg);
-}
 .c4p--coachmark-overlay--bottom {
   transform: translate(-50%, 1.875rem);
 }
-.c4p--coachmark-overlay--bottom .c4p--coachmark-overlay__caret {
-  top: -0.375rem;
-  left: calc(50% - 0.375rem);
-}
 .c4p--coachmark-overlay--bottom-left {
   transform: translate(-1.5rem, 1.875rem);
 }
-.c4p--coachmark-overlay--bottom-left .c4p--coachmark-overlay__caret {
-  top: -0.375rem;
-  left: 1.125rem;
-}
 .c4p--coachmark-overlay--bottom-right {
   transform: translate(calc(-1 * (100% - 1.5rem)), 1.875rem);
 }
-.c4p--coachmark-overlay--bottom-right .c4p--coachmark-overlay__caret {
-  top: -0.375rem;
-  right: 1.125rem;
-}
 .c4p--coachmark-overlay--left {
   transform: translate(calc(-1 * (100% + 1.5rem + 0.375rem)), -50%);
 }
-.c4p--coachmark-overlay--left .c4p--coachmark-overlay__caret {
-  top: calc(50% - 0.1875rem);
-  right: -0.5625rem;
-  transform: rotate(90deg);
-}
 .c4p--coachmark-overlay--left-top {
   transform: translate(calc(-1 * (100% + 1.5rem + 0.375rem)), -1.5rem);
 }
-.c4p--coachmark-overlay--left-top .c4p--coachmark-overlay__caret {
-  top: 1.3125rem;
-  right: -0.5625rem;
-  transform: rotate(90deg);
-}
 .c4p--coachmark-overlay--left-bottom {
   transform: translate(calc(-1 * (100% + 1.5rem + 0.375rem)), calc(-1 * (100% - 1.5rem)));
 }
-.c4p--coachmark-overlay--left-bottom .c4p--coachmark-overlay__caret {
-  right: -0.5625rem;
-  bottom: 1.3125rem;
-  transform: rotate(90deg);
-}
 .c4p--coachmark-overlay--right {
   transform: translate(1.875rem, -50%);
 }
-.c4p--coachmark-overlay--right .c4p--coachmark-overlay__caret {
-  top: calc(50% - 0.1875rem);
-  left: -0.5625rem;
-  transform: rotate(-90deg);
-}
 .c4p--coachmark-overlay--right-top {
   transform: translate(1.875rem, -1.5rem);
 }
-.c4p--coachmark-overlay--right-top .c4p--coachmark-overlay__caret {
-  top: 1.3125rem;
-  left: -0.5625rem;
-  transform: rotate(-90deg);
-}
 .c4p--coachmark-overlay--right-bottom {
   transform: translate(1.875rem, calc(-1 * (100% - 1.5rem)));
 }
-.c4p--coachmark-overlay--right-bottom .c4p--coachmark-overlay__caret {
-  bottom: 1.3125rem;
-  left: -0.5625rem;
-  transform: rotate(-90deg);
-}
 .c4p--coachmark-overlay__element-stepped-media {
   height: 8rem;
   margin-bottom: 1rem;
@@ -2193,6 +2134,10 @@ p.c4p--about-modal__copyright-text:first-child {
   background-color: #7c3dd6 !important;
 }
 
+.c4p--coachmark {
+  position: relative;
+}
+
 /* stylelint-disable carbon/layout-token-use */
 /* stylelint-disable carbon/motion-easing-use */
 /* stylelint-disable max-nesting-depth */
@@ -2229,9 +2174,7 @@ p.c4p--about-modal__copyright-text:first-child {
   outline: 0.125rem var(--cds-focus, #0f62fe) solid;
 }
 .c4p--coachmark-beacon .c4p--coachmark-beacon__target {
-  position: absolute;
-  top: -1rem;
-  left: -1rem;
+  display: flex;
   width: 2rem;
   height: 2rem;
   padding: 0;
@@ -2781,10 +2724,6 @@ p.c4p--about-modal__copyright-text:first-child {
   border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
 }
 
-.c4p--create-modal {
-  background-color: var(--cds-background, #ffffff);
-}
-
 .c4p--create-modal .cds--modal-close {
   display: none;
 }
@@ -3366,7 +3305,7 @@ p.c4p--about-modal__copyright-text:first-child {
   height: 2.5rem;
 }
 .c4p--side-panel .c4p--side-panel__slug-and-close {
-  position: fixed;
+  position: absolute;
   z-index: 10; /* must be higher than title container border bottom */
   top: 0;
   right: 0;
@@ -4352,6 +4291,101 @@ p.c4p--about-modal__copyright-text:first-child {
   }
 }
 
+/* stylelint-disable carbon/theme-token-use */
+.c4p--http-errors-404__prefix-cls-1 {
+  fill: none;
+}
+
+.c4p--http-errors-404__prefix-cls-67 {
+  fill: #697077;
+}
+
+.c4p--http-errors-404__prefix-cls-68 {
+  fill: #282828;
+}
+
+.c4p--http-errors-404__prefix-cls-69 {
+  fill: #51565c;
+}
+
+.c4p--http-errors-404__prefix-cls-70 {
+  fill: #002b50;
+}
+
+.c4p--http-errors-404__prefix-cls-71 {
+  fill: #413d3d;
+}
+
+.c4p--http-errors-404__prefix-cls-72 {
+  fill: #908b8b;
+}
+
+.c4p--http-errors-404__prefix-cls-75 {
+  fill: #a4a4a5;
+}
+
+.c4p--http-errors-404__prefix-cls-76 {
+  opacity: 0.15;
+}
+
+.c4p--http-errors-403__prefix-cls-1 {
+  fill: none;
+}
+
+.c4p--http-errors-403__prefix-cls-80 {
+  mix-blend-mode: multiply;
+  opacity: 0.25;
+}
+
+.c4p--http-errors-403__prefix-cls-75 {
+  fill: #595655;
+}
+
+.c4p--http-errors-403__prefix-cls-76 {
+  opacity: 0.15;
+}
+
+.c4p--http-errors-403__prefix-cls-77 {
+  fill: #373d42;
+}
+
+.c4p--http-errors-403__prefix-cls-78 {
+  fill: #002b50;
+}
+
+.c4p--http-errors-403__prefix-cls-81 {
+  fill: #2b2828;
+}
+
+.c4p--http-errors-other__prefix-cls-1 {
+  fill: none;
+}
+
+.c4p--http-errors-other__prefix-cls-69 {
+  fill: #697077;
+}
+
+.c4p--http-errors-other__prefix-cls-70 {
+  fill: #282828;
+}
+
+.c4p--http-errors-other__prefix-cls-71 {
+  fill: #51565c;
+}
+
+.c4p--http-errors-other__prefix-cls-72 {
+  fill: #e0dbda;
+}
+
+.c4p--http-errors-other__prefix-cls-73 {
+  fill: #003d73;
+}
+
+.c4p--http-errors-other__prefix-cls-75 {
+  opacity: 0.15;
+}
+
+/* stylelint-enable */
 .c4p--import-modal .cds--modal-close {
   display: none;
 }
@@ -4946,6 +4980,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-link-inverse: #0f62fe;
   --cds-link-inverse-active: #161616;
   --cds-link-inverse-hover: #0043ce;
+  --cds-link-inverse-visited: #8a3ffc;
   --cds-link-primary: #78a9ff;
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
@@ -8621,6 +8656,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-link-inverse: #0f62fe;
   --cds-link-inverse-active: #161616;
   --cds-link-inverse-hover: #0043ce;
+  --cds-link-inverse-visited: #8a3ffc;
   --cds-link-primary: #78a9ff;
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
@@ -9051,6 +9087,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-link-inverse: #0f62fe;
   --cds-link-inverse-active: #161616;
   --cds-link-inverse-hover: #0043ce;
+  --cds-link-inverse-visited: #8a3ffc;
   --cds-link-primary: #78a9ff;
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
@@ -9766,14 +9803,14 @@ button.c4p--add-select__global-filter-toggle--open {
   overflow: hidden;
 }
 
-.c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__summary,
+.c4p--options-tile__summary.c4p--options-tile__summary--open:not(.c4p--options-tile__summary--closing),
 .c4p--options-tile__summary--hidden {
   height: 0;
   margin-top: 0;
   opacity: 0;
 }
 
-.c4p--options-tile:not(.c4p--options-tile--closing) > details[open] .c4p--options-tile__chevron {
+.c4p--options-tile__chevron.c4p--options-tile__chevron--open:not(.c4p--options-tile__chevron--closing) {
   transform: rotate(180deg);
 }
 
@@ -10017,6 +10054,7 @@ button.c4p--add-select__global-filter-toggle--open {
   position: sticky;
   z-index: 4;
   left: 0;
+  background-color: var(--cds-background, #ffffff);
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th.c4p--data-spreadsheet__td {
   font-weight: 600;
@@ -10125,6 +10163,11 @@ button.c4p--add-select__global-filter-toggle--open {
   border: 0.125rem solid var(--cds-background-brand, #0f62fe);
   outline: 0;
 }
+.c4p--data-spreadsheet .c4p--data-spreadsheet__td-th.c4p--data-spreadsheet__td_custom {
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
 .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element {
   position: absolute;
   z-index: 2;
@@ -10175,7 +10218,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td:hover {
   background-color: var(--cds-background-inverse, #393939);
 }
-.c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element .c4p--data-spreadsheet__th--selected-header.c4p--data-spreadsheet__th {
+.c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element .c4p--data-spreadsheet__th--selected-header.c4p--data-spreadsheet__th:not(.c4p--data-spreadsheet__th--active-header-disabledSwapping) {
   cursor: grab;
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element .c4p--data-spreadsheet__th--selected-header-reorder-active.c4p--data-spreadsheet__th {
@@ -10190,6 +10233,9 @@ button.c4p--add-select__global-filter-toggle--open {
   width: 0.125rem;
   background-color: var(--cds-background-brand, #0f62fe);
 }
+.c4p--data-spreadsheet .c4p--data-spreadsheet__th--active-header-disabledSwapping {
+  cursor: pointer;
+}
 .c4p--data-spreadsheet .c4p--data-spreadsheet__th--active-header,
 .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--active-header.c4p--data-spreadsheet__td {
   background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
@@ -10205,7 +10251,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td:hover {
   background-color: var(--cds-background-inverse, #393939);
 }
-.c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header.c4p--data-spreadsheet__th {
+.c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header.c4p--data-spreadsheet__th:not(.c4p--data-spreadsheet__th--active-header-disabledSwapping) {
   cursor: grab;
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header-reorder-active.c4p--data-spreadsheet__th {
@@ -10556,6 +10602,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--datagrid__head-hidden-select-all {
+  min-width: 3rem;
   padding-right: 3rem;
 }
 .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
@@ -11846,6 +11893,18 @@ th.c4p--datagrid__select-all-toggle-on.button {
   align-items: center;
 }
 
+.c4p--datagrid__inline-edit--outer-cell-checkbox-focus .cds--checkbox-label::before {
+  outline: 0.125rem solid var(--cds-focus, #0f62fe);
+  outline-offset: 1px;
+}
+
+.c4p--datagrid__inline-edit--outer-cell-checkbox {
+  display: flex;
+  height: -webkit-fill-available;
+  justify-content: center;
+  padding-inline: 1rem;
+}
+
 .c4p--datagrid__static--outer-cell {
   display: flex;
   height: -webkit-fill-available;
@@ -12150,10 +12209,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
   min-width: auto;
 }
 
-.c4p--datagrid .cds--pagination {
-  background-color: var(--cds-layer-02, #ffffff);
-}
-
 :root {
   --cds-grid-gutter: 2rem;
   --cds-grid-columns: 4;
@@ -15405,6 +15460,7 @@ a.cds--side-nav__link--current::before {
   --cds-link-inverse: #0f62fe;
   --cds-link-inverse-active: #161616;
   --cds-link-inverse-hover: #0043ce;
+  --cds-link-inverse-visited: #8a3ffc;
   --cds-link-primary: #78a9ff;
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
@@ -16209,6 +16265,7 @@ a.cds--side-nav__link--current::before {
   --cds-link-inverse: #0f62fe;
   --cds-link-inverse-active: #161616;
   --cds-link-inverse-hover: #0043ce;
+  --cds-link-inverse-visited: #8a3ffc;
   --cds-link-primary: #78a9ff;
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
@@ -17123,6 +17180,7 @@ a.cds--side-nav__link--current::before {
   --cds-link-inverse: #78a9ff;
   --cds-link-inverse-active: #f4f4f4;
   --cds-link-inverse-hover: #a6c8ff;
+  --cds-link-inverse-visited: #be95ff;
   --cds-link-primary: #0f62fe;
   --cds-link-primary-hover: #0043ce;
   --cds-link-secondary: #0043ce;
@@ -17533,6 +17591,7 @@ a.cds--side-nav__link--current::before {
   --cds-link-inverse: #0f62fe;
   --cds-link-inverse-active: #161616;
   --cds-link-inverse-hover: #0043ce;
+  --cds-link-inverse-visited: #8a3ffc;
   --cds-link-primary: #78a9ff;
   --cds-link-primary-hover: #a6c8ff;
   --cds-link-secondary: #a6c8ff;
@@ -18696,14 +18755,14 @@ a.cds--side-nav__link--current::before {
 .c4p--string-formatter .cds--popover--top .cds--popover-caret,
 .c4p--string-formatter .cds--popover--top-left .cds--popover-caret,
 .c4p--string-formatter .cds--popover--top-right .cds--popover-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line */
   inset-block-start: -1px !important;
 }
 
 .c4p--string-formatter .cds--popover--bottom .cds--popover-caret,
 .c4p--string-formatter .cds--popover--bottom-left .cds--popover-caret,
 .c4p--string-formatter .cds--popover--bottom-right .cds--popover-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line */
   inset-block-end: -1px !important;
 }
 
@@ -19483,7 +19542,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   border-radius: 1rem;
   margin: 0.25rem;
   cursor: default;
-  max-inline-size: 100%;
+  max-inline-size: 13rem;
   min-block-size: var(--cds-layout-size-height-local);
   min-inline-size: 2rem;
   padding-inline: 0.5rem;
@@ -19523,28 +19582,28 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
 .cds--tag.cds--tag--lg:has(.cds--tag__custom-icon) {
   padding-inline-start: 0.5rem;
 }
+.cds--tag:not(.cds--tag--selectable) {
+  border: 0;
+}
 .cds--tag:not(:first-child) {
   margin-inline-start: 0;
 }
 
+.cds--tag--operational > span,
+.cds--tag--selectable > span,
 .cds--tag__label {
+  display: block;
   overflow: hidden;
-  max-inline-size: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .cds--tag--interactive:focus {
-  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
-  outline: none;
-}
-
-.cds--tag--interactive:hover {
-  cursor: pointer;
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: 1px;
 }
 
 .cds--tag--filter {
-  cursor: pointer;
   padding-block-end: 0;
   padding-block-start: 0;
   padding-inline-end: 0;
@@ -19553,11 +19612,6 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   outline: none;
 }
 
-.cds--interactive--tag-children {
-  display: inline-flex;
-  place-items: center;
-}
-
 .cds--tag--selectable {
   border: 1px solid var(--cds-border-inverse, #161616);
   background-color: var(--cds-layer);
@@ -19750,19 +19804,19 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   background-color: var(--cds-background-inverse-hover, #474747);
 }
 
-.cds--tag--outline:not(.cds--tag--operational) {
+.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) {
   background-color: var(--cds-background, #ffffff);
   color: var(--cds-text-primary, #161616);
   outline: 1px solid var(--cds-background-inverse, #393939);
   outline-offset: -1px;
 }
-.cds--tag--outline:not(.cds--tag--operational).cds--tag--operational {
+.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational {
   border: 1px solid var(--cds-background, #ffffff);
 }
-.cds--tag--outline:not(.cds--tag--operational).cds--tag--operational:hover {
+.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational:hover {
   background-color: var(--cds-layer-hover);
 }
-.cds--tag--outline:not(.cds--tag--operational) .cds--tag__close-icon:hover {
+.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover {
   background-color: var(--cds-layer-hover);
 }
 
@@ -19959,7 +20013,48 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   }
 }
 
+.cds--tag-label-tooltip {
+  max-inline-size: -webkit-fill-available;
+}
+
+.cds--tag__custom-icon + .cds--tag-label-tooltip {
+  max-inline-size: 11rem;
+}
+
+.cds--tag--filter .cds--tag__custom-icon + .cds--tag-label-tooltip {
+  max-inline-size: 9.875rem;
+}
+
 /* stylelint-enable */
+.cds--interactive--tag-children {
+  display: inline-flex;
+  max-inline-size: 12.5rem;
+  place-items: center;
+}
+
+.cds--tag--filter .cds--tag__custom-icon + span > .cds--interactive--tag-children {
+  max-inline-size: 11.5rem;
+}
+
+.cds--tag .cds--definition-term {
+  -webkit-border-after: none;
+  border-block-end: none;
+  cursor: default;
+  max-inline-size: 12rem;
+}
+
+.cds--tag .cds--tag__custom-icon + span > .cds--definition-term {
+  max-inline-size: 11rem;
+}
+
+.cds--tag > .cds--popover-container {
+  display: flex;
+}
+
+.cds--toggletip-button:has(.cds--tag--operational.cds--tag--disabled) {
+  pointer-events: none;
+}
+
 .c4p--condition-builder__condition-wrapper * {
   font-size: var(--cds-body-01-font-size, 0.875rem);
   font-weight: var(--cds-body-01-font-weight, 400);
@@ -19967,7 +20062,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
 
-.c4p--condition-builder__item__content {
+.c4p--condition-builder__popover-content-wrapper {
   overflow: auto;
   min-width: 12rem;
   max-width: 20rem;
@@ -20038,7 +20133,7 @@ html .c4p--filter-panel-accordion-item .cds--accordion__content {
 .c4p--condition-builder__item-date,
 .c4p--condition-builder__item-text,
 .c4p--condition-builder__item-number,
-c4p--condition-builder__item-time {
+.c4p--condition-builder__item-time {
   padding-block-end: 1rem;
   padding-inline: 1rem;
 }
@@ -20391,7 +20486,8 @@ c4p--condition-builder__item-time {
   background-color: var(--cds-layer);
 }
 .c4p--condition-builder__tree .c4p--condition-builder__condition-wrapper > :nth-child(1) .c4p--condition-builder__button,
-.c4p--condition-builder__tree .c4p--condition-builder__condition-wrapper > :nth-child(2) .c4p--condition-builder__button {
+.c4p--condition-builder__tree .c4p--condition-builder__condition-wrapper > :nth-child(2) .c4p--condition-builder__button:not(.c4p--condition-builder__add-button,
+.c4p--condition-builder__add-condition-sub-group) {
   /* stylelint-disable-next-line carbon/theme-token-use */
   box-shadow: inset 0 0.125rem 0 0 var(--c4p--condition-builder__condition-wrapper-color);
 }
@@ -20410,6 +20506,32 @@ c4p--condition-builder__item-time {
   margin-left: auto;
 }
 
+.c4p--condition-builder__add-condition-sub-group-wrapper {
+  z-index: -1;
+  width: 0;
+  margin-left: -50%;
+  opacity: 0;
+  pointer-events: none;
+  transition: all linear 110ms;
+}
+
+.c4p--condition-builder__add-condition-sub-group-wrapper--show {
+  z-index: 0;
+  width: auto;
+  margin-left: 0;
+  opacity: 1;
+  pointer-events: all;
+  transition: all linear 110ms;
+}
+
+.c4p--condition-builder__invalid-input {
+  display: flex;
+}
+
+.c4p--condition-builder__invalid-input > svg {
+  color: var(--cds-support-warning, #f1c21b);
+}
+
 .c4p--condition-builder__condition-block,
 .c4p--condition-builder__condition-block .c4p--condition-builder__block {
   position: relative;
@@ -20435,7 +20557,8 @@ c4p--condition-builder__item-time {
 }
 
 .c4p--condition-builder__condition__deletion-preview .c4p--condition-builder__button:not(.c4p--condition-builder__statement-button,
-.c4p--condition-builder__connector-button) {
+.c4p--condition-builder__connector-button,
+.c4p--condition-builder__add-button) {
   background-color: var(--cds-tag-background-red, #ffd7d9);
   color: var(--cds-tag-color-red, #750e13);
 }
@@ -20454,11 +20577,23 @@ c4p--condition-builder__item-time {
 }
 
 .c4p--condition-builder__group-preview {
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 240ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+.c4p--condition-builder__group-preview .c4p--condition-builder__preview-condition {
+  display: flex;
+}
+
+.c4p--condition-builder__group-preview-animate {
+  height: auto;
   opacity: 0.5;
   pointer-events: none;
+  transition: all 240ms cubic-bezier(0.4, 0.14, 1, 1);
 }
 
-.c4p--condition-builder__connector-disabled {
+.c4p--condition-builder__connector--disabled {
   display: flex;
   min-width: 4rem;
   align-items: center;
@@ -20467,6 +20602,10 @@ c4p--condition-builder__item-time {
   padding-inline: 0.5rem;
 }
 
+.c4p--condition-builder__condition-wrapper > .c4p--condition-builder__condition-block:last-child > .c4p--condition-builder__groupConnector {
+  margin-bottom: 0;
+}
+
 .c4p--condition-builder {
   padding: 1.5rem;
 }
@@ -20494,7 +20633,7 @@ c4p--condition-builder__item-time {
 
 .c4p--condition-builder__condition-block {
   display: flex;
-  width: max-content;
+  width: fit-content;
   flex-direction: row;
 }
 
@@ -20517,6 +20656,11 @@ c4p--condition-builder__item-time {
   margin-top: 0.25rem;
 }
 
+.c4p--condition-builder__add-group,
+.c4p--condition-builder__group-separator {
+  width: fit-content;
+}
+
 /* stylelint-disable carbon/layout-token-use */
 /* stylelint-disable max-nesting-depth */
 .c4p--card__get-started {