@carbon/ibm-products 1.22.0 → 1.24.0

package/css/index-full-carbon.css

@@ -921,7 +921,6 @@ em {
     .bx--snippet__overflow-indicator--left {
       background-image: linear-gradient(to left, rgba(var(--cds-field-01, #f4f4f4), 0), var(--cds-field-01, #f4f4f4));
     }
-
     .bx--snippet__overflow-indicator--right {
       background-image: linear-gradient(to right, rgba(var(--cds-field-01, #f4f4f4), 0), var(--cds-field-01, #f4f4f4));
     }
@@ -3029,6 +3028,9 @@ em {
     width: 48%;
   }
 }
+.bx--modal-container .bx--modal-container-body {
+  display: contents;
+}
 
 .bx--modal-content {
   font-size: var(--cds-body-long-01-font-size, 0.875rem);
@@ -3195,7 +3197,6 @@ em {
   .bx--modal-scroll-content > *:last-child {
     padding-bottom: 0;
   }
-
   .bx--modal-content--overflow-indicator {
     display: none;
   }
@@ -4282,7 +4283,6 @@ fieldset[disabled] .bx--form__helper-text {
     top: 1px;
     right: 0.5rem;
   }
-
   .bx--inline-loading__checkmark {
     animation: none;
     stroke-dasharray: 0;
@@ -5775,94 +5775,76 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
     flex-basis: 0;
     flex-grow: 1;
   }
-
   .bx--col--auto,
 .bx--col-md--auto {
     width: auto;
     max-width: 100%;
     flex: 1 0 0%;
   }
-
   .bx--col-md-0 {
     display: none;
   }
-
   .bx--col-md-1 {
     display: block;
     max-width: 12.5%;
     flex: 0 0 12.5%;
   }
-
   .bx--col-md-2 {
     display: block;
     max-width: 25%;
     flex: 0 0 25%;
   }
-
   .bx--col-md-3 {
     display: block;
     max-width: 37.5%;
     flex: 0 0 37.5%;
   }
-
   .bx--col-md-4 {
     display: block;
     max-width: 50%;
     flex: 0 0 50%;
   }
-
   .bx--col-md-5 {
     display: block;
     max-width: 62.5%;
     flex: 0 0 62.5%;
   }
-
   .bx--col-md-6 {
     display: block;
     max-width: 75%;
     flex: 0 0 75%;
   }
-
   .bx--col-md-7 {
     display: block;
     max-width: 87.5%;
     flex: 0 0 87.5%;
   }
-
   .bx--col-md-8 {
     display: block;
     max-width: 100%;
     flex: 0 0 100%;
   }
-
   .bx--offset-md-0 {
     margin-left: 0;
   }
-
   .bx--offset-md-1 {
     margin-left: 12.5%;
   }
-
   .bx--offset-md-2 {
     margin-left: 25%;
   }
-
   .bx--offset-md-3 {
     margin-left: 37.5%;
   }
-
   .bx--offset-md-4 {
     margin-left: 50%;
   }
-
   .bx--offset-md-5 {
     margin-left: 62.5%;
   }
-
   .bx--offset-md-6 {
     margin-left: 75%;
   }
-
   .bx--offset-md-7 {
     margin-left: 87.5%;
   }
@@ -6131,174 +6113,140 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
     flex-basis: 0;
     flex-grow: 1;
   }
-
   .bx--col--auto,
 .bx--col-lg--auto {
     width: auto;
     max-width: 100%;
     flex: 1 0 0%;
   }
-
   .bx--col-lg-0 {
     display: none;
   }
-
   .bx--col-lg-1 {
     display: block;
     max-width: 6.25%;
     flex: 0 0 6.25%;
   }
-
   .bx--col-lg-2 {
     display: block;
     max-width: 12.5%;
     flex: 0 0 12.5%;
   }
-
   .bx--col-lg-3 {
     display: block;
     max-width: 18.75%;
     flex: 0 0 18.75%;
   }
-
   .bx--col-lg-4 {
     display: block;
     max-width: 25%;
     flex: 0 0 25%;
   }
-
   .bx--col-lg-5 {
     display: block;
     max-width: 31.25%;
     flex: 0 0 31.25%;
   }
-
   .bx--col-lg-6 {
     display: block;
     max-width: 37.5%;
     flex: 0 0 37.5%;
   }
-
   .bx--col-lg-7 {
     display: block;
     max-width: 43.75%;
     flex: 0 0 43.75%;
   }
-
   .bx--col-lg-8 {
     display: block;
     max-width: 50%;
     flex: 0 0 50%;
   }
-
   .bx--col-lg-9 {
     display: block;
     max-width: 56.25%;
     flex: 0 0 56.25%;
   }
-
   .bx--col-lg-10 {
     display: block;
     max-width: 62.5%;
     flex: 0 0 62.5%;
   }
-
   .bx--col-lg-11 {
     display: block;
     max-width: 68.75%;
     flex: 0 0 68.75%;
   }
-
   .bx--col-lg-12 {
     display: block;
     max-width: 75%;
     flex: 0 0 75%;
   }
-
   .bx--col-lg-13 {
     display: block;
     max-width: 81.25%;
     flex: 0 0 81.25%;
   }
-
   .bx--col-lg-14 {
     display: block;
     max-width: 87.5%;
     flex: 0 0 87.5%;
   }
-
   .bx--col-lg-15 {
     display: block;
     max-width: 93.75%;
     flex: 0 0 93.75%;
   }
-
   .bx--col-lg-16 {
     display: block;
     max-width: 100%;
     flex: 0 0 100%;
   }
-
   .bx--offset-lg-0 {
     margin-left: 0;
   }
-
   .bx--offset-lg-1 {
     margin-left: 6.25%;
   }
-
   .bx--offset-lg-2 {
     margin-left: 12.5%;
   }
-
   .bx--offset-lg-3 {
     margin-left: 18.75%;
   }
-
   .bx--offset-lg-4 {
     margin-left: 25%;
   }
-
   .bx--offset-lg-5 {
     margin-left: 31.25%;
   }
-
   .bx--offset-lg-6 {
     margin-left: 37.5%;
   }
-
   .bx--offset-lg-7 {
     margin-left: 43.75%;
   }
-
   .bx--offset-lg-8 {
     margin-left: 50%;
   }
-
   .bx--offset-lg-9 {
     margin-left: 56.25%;
   }
-
   .bx--offset-lg-10 {
     margin-left: 62.5%;
   }
-
   .bx--offset-lg-11 {
     margin-left: 68.75%;
   }
-
   .bx--offset-lg-12 {
     margin-left: 75%;
   }
-
   .bx--offset-lg-13 {
     margin-left: 81.25%;
   }
-
   .bx--offset-lg-14 {
     margin-left: 87.5%;
   }
-
   .bx--offset-lg-15 {
     margin-left: 93.75%;
   }
@@ -6567,174 +6515,140 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
     flex-basis: 0;
     flex-grow: 1;
   }
-
   .bx--col--auto,
 .bx--col-xlg--auto {
     width: auto;
     max-width: 100%;
     flex: 1 0 0%;
   }
-
   .bx--col-xlg-0 {
     display: none;
   }
-
   .bx--col-xlg-1 {
     display: block;
     max-width: 6.25%;
     flex: 0 0 6.25%;
   }
-
   .bx--col-xlg-2 {
     display: block;
     max-width: 12.5%;
     flex: 0 0 12.5%;
   }
-
   .bx--col-xlg-3 {
     display: block;
     max-width: 18.75%;
     flex: 0 0 18.75%;
   }
-
   .bx--col-xlg-4 {
     display: block;
     max-width: 25%;
     flex: 0 0 25%;
   }
-
   .bx--col-xlg-5 {
     display: block;
     max-width: 31.25%;
     flex: 0 0 31.25%;
   }
-
   .bx--col-xlg-6 {
     display: block;
     max-width: 37.5%;
     flex: 0 0 37.5%;
   }
-
   .bx--col-xlg-7 {
     display: block;
     max-width: 43.75%;
     flex: 0 0 43.75%;
   }
-
   .bx--col-xlg-8 {
     display: block;
     max-width: 50%;
     flex: 0 0 50%;
   }
-
   .bx--col-xlg-9 {
     display: block;
     max-width: 56.25%;
     flex: 0 0 56.25%;
   }
-
   .bx--col-xlg-10 {
     display: block;
     max-width: 62.5%;
     flex: 0 0 62.5%;
   }
-
   .bx--col-xlg-11 {
     display: block;
     max-width: 68.75%;
     flex: 0 0 68.75%;
   }
-
   .bx--col-xlg-12 {
     display: block;
     max-width: 75%;
     flex: 0 0 75%;
   }
-
   .bx--col-xlg-13 {
     display: block;
     max-width: 81.25%;
     flex: 0 0 81.25%;
   }
-
   .bx--col-xlg-14 {
     display: block;
     max-width: 87.5%;
     flex: 0 0 87.5%;
   }
-
   .bx--col-xlg-15 {
     display: block;
     max-width: 93.75%;
     flex: 0 0 93.75%;
   }
-
   .bx--col-xlg-16 {
     display: block;
     max-width: 100%;
     flex: 0 0 100%;
   }
-
   .bx--offset-xlg-0 {
     margin-left: 0;
   }
-
   .bx--offset-xlg-1 {
     margin-left: 6.25%;
   }
-
   .bx--offset-xlg-2 {
     margin-left: 12.5%;
   }
-
   .bx--offset-xlg-3 {
     margin-left: 18.75%;
   }
-
   .bx--offset-xlg-4 {
     margin-left: 25%;
   }
-
   .bx--offset-xlg-5 {
     margin-left: 31.25%;
   }
-
   .bx--offset-xlg-6 {
     margin-left: 37.5%;
   }
-
   .bx--offset-xlg-7 {
     margin-left: 43.75%;
   }
-
   .bx--offset-xlg-8 {
     margin-left: 50%;
   }
-
   .bx--offset-xlg-9 {
     margin-left: 56.25%;
   }
-
   .bx--offset-xlg-10 {
     margin-left: 62.5%;
   }
-
   .bx--offset-xlg-11 {
     margin-left: 68.75%;
   }
-
   .bx--offset-xlg-12 {
     margin-left: 75%;
   }
-
   .bx--offset-xlg-13 {
     margin-left: 81.25%;
   }
-
   .bx--offset-xlg-14 {
     margin-left: 87.5%;
   }
-
   .bx--offset-xlg-15 {
     margin-left: 93.75%;
   }
@@ -7003,174 +6917,140 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
     flex-basis: 0;
     flex-grow: 1;
   }
-
   .bx--col--auto,
 .bx--col-max--auto {
     width: auto;
     max-width: 100%;
     flex: 1 0 0%;
   }
-
   .bx--col-max-0 {
     display: none;
   }
-
   .bx--col-max-1 {
     display: block;
     max-width: 6.25%;
     flex: 0 0 6.25%;
   }
-
   .bx--col-max-2 {
     display: block;
     max-width: 12.5%;
     flex: 0 0 12.5%;
   }
-
   .bx--col-max-3 {
     display: block;
     max-width: 18.75%;
     flex: 0 0 18.75%;
   }
-
   .bx--col-max-4 {
     display: block;
     max-width: 25%;
     flex: 0 0 25%;
   }
-
   .bx--col-max-5 {
     display: block;
     max-width: 31.25%;
     flex: 0 0 31.25%;
   }
-
   .bx--col-max-6 {
     display: block;
     max-width: 37.5%;
     flex: 0 0 37.5%;
   }
-
   .bx--col-max-7 {
     display: block;
     max-width: 43.75%;
     flex: 0 0 43.75%;
   }
-
   .bx--col-max-8 {
     display: block;
     max-width: 50%;
     flex: 0 0 50%;
   }
-
   .bx--col-max-9 {
     display: block;
     max-width: 56.25%;
     flex: 0 0 56.25%;
   }
-
   .bx--col-max-10 {
     display: block;
     max-width: 62.5%;
     flex: 0 0 62.5%;
   }
-
   .bx--col-max-11 {
     display: block;
     max-width: 68.75%;
     flex: 0 0 68.75%;
   }
-
   .bx--col-max-12 {
     display: block;
     max-width: 75%;
     flex: 0 0 75%;
   }
-
   .bx--col-max-13 {
     display: block;
     max-width: 81.25%;
     flex: 0 0 81.25%;
   }
-
   .bx--col-max-14 {
     display: block;
     max-width: 87.5%;
     flex: 0 0 87.5%;
   }
-
   .bx--col-max-15 {
     display: block;
     max-width: 93.75%;
     flex: 0 0 93.75%;
   }
-
   .bx--col-max-16 {
     display: block;
     max-width: 100%;
     flex: 0 0 100%;
   }
-
   .bx--offset-max-0 {
     margin-left: 0;
   }
-
   .bx--offset-max-1 {
     margin-left: 6.25%;
   }
-
   .bx--offset-max-2 {
     margin-left: 12.5%;
   }
-
   .bx--offset-max-3 {
     margin-left: 18.75%;
   }
-
   .bx--offset-max-4 {
     margin-left: 25%;
   }
-
   .bx--offset-max-5 {
     margin-left: 31.25%;
   }
-
   .bx--offset-max-6 {
     margin-left: 37.5%;
   }
-
   .bx--offset-max-7 {
     margin-left: 43.75%;
   }
-
   .bx--offset-max-8 {
     margin-left: 50%;
   }
-
   .bx--offset-max-9 {
     margin-left: 56.25%;
   }
-
   .bx--offset-max-10 {
     margin-left: 62.5%;
   }
-
   .bx--offset-max-11 {
     margin-left: 68.75%;
   }
-
   .bx--offset-max-12 {
     margin-left: 75%;
   }
-
   .bx--offset-max-13 {
     margin-left: 81.25%;
   }
-
   .bx--offset-max-14 {
     margin-left: 87.5%;
   }
-
   .bx--offset-max-15 {
     margin-left: 93.75%;
   }
@@ -11636,6 +11516,7 @@ a.bx--overflow-menu-options__btn::before {
 .c4p--side-panel__container .c4p--side-panel__action-toolbar {
   position: sticky;
   z-index: 4;
+  /* stylelint-disable-next-line carbon/layout-token-use */
   top: var(--c4p--side-panel--title-height);
   display: flex;
   align-items: center;
@@ -12773,7 +12654,7 @@ a.bx--side-nav__link--current::before {
 }
 
 .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
-  animation: 400ms step-content-entrance;
+  animation: step-content-entrance 400ms;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
   opacity: 0;
@@ -16325,6 +16206,9 @@ button.c4p--add-select__global-filter-toggle--open {
   display: inline-flex;
   white-space: nowrap;
 }
+.c4p--tag-set .c4p--tag-set__tag-container--multiline {
+  flex-wrap: wrap;
+}
 .c4p--tag-set .c4p--tag-set__tag-container--hidden {
   position: absolute;
   top: -100vh;
@@ -16447,19 +16331,25 @@ button.c4p--add-select__global-filter-toggle--open {
 
 @keyframes background-appear {
   from {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     background-color: var(--from-color);
   }
   to {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     background-color: var(--to-color);
   }
 }
 @keyframes background-and-shadow-appear {
   from {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     background-color: var(--from-color);
+    /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: 0 1px 0 var(--from-color);
   }
   to {
+    /* stylelint-disable-next-line carbon/theme-token-use */
     background-color: var(--to-color);
+    /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: 0 1px 0 var(--to-color-shadow);
   }
 }
@@ -16469,9 +16359,9 @@ button.c4p--add-select__global-filter-toggle--open {
   /* z-index used to raise above any position relative content as per Carbon header */
   /* dropped  1 below Carbon header so as not to overlay the side panel */
   z-index: 7999;
+  /* stylelint-disable-next-line carbon/layout-token-use */
   top: var(--c4p--page-header--header-top);
-  display: inline-block;
-  /* cause top/bottom margin to reserve space */
+  display: inline-block; /* cause top/bottom margin to reserve space */
   width: 100%;
   background-color: var(--cds-ui-background, #ffffff);
   color: var(--cds-text-01, #161616);
@@ -16579,8 +16469,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 @media (min-width: 66rem) {
   .c4p--page-header .c4p--page-header__action-bar-column-content {
-    flex-wrap: nowrap;
-    /* assume enough space */
+    flex-wrap: nowrap; /* assume enough space */
   }
 }
 .c4p--page-header .c4p--page-header__breadcrumb-row .c4p--page-header__page-actions {
@@ -16599,15 +16488,13 @@ button.c4p--add-select__global-filter-toggle--open {
   visibility: visible;
 }
 .c4p--page-header .c4p--page-header__breadcrumb-column {
-  overflow: hidden;
-  /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
+  overflow: hidden; /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
   max-width: 100%;
   flex: 0 0 100%;
 }
 @media (min-width: 42rem) {
   .c4p--page-header .c4p--page-header__breadcrumb-column {
-    overflow: hidden;
-    /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
+    overflow: hidden; /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
   }
 }
 .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar.c4p--page-header__breadcrumb-row .c4p--page-header__breadcrumb-column {
@@ -16680,7 +16567,6 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--page-header .c4p--page-header__breadcrumb-title:not(.c4p--page-header__breadcrumb-title--pre-collapsed) {
   opacity: var(--c4p--page-header--breadcrumb-title-opacity);
   transform: translateY(var(--c4p--page-header--breadcrumb-title-top));
-  /* token linter does not support this form */
   visibility: var(--c4p--page-header--breadcrumb-title-visibility);
 }
 .c4p--page-header .c4p--page-header__breadcrumb-container--hidden .c4p--page-header__breadcrumb-title.c4p--page-header__breadcrumb-title {
@@ -16691,8 +16577,7 @@ button.c4p--add-select__global-filter-toggle--open {
   max-width: var(--c4p--page-header--max-action-bar-width-px);
   flex: 1 1 var(--c4p--page-header--max-action-bar-width-px);
   padding-top: var(--cds-spacing-04, 0.75rem);
-  margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
-  /* align with breadcrumb */
+  margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem)); /* align with breadcrumb */
   vertical-align: top;
   white-space: nowrap;
 }
@@ -16703,8 +16588,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 @media (min-width: 42rem) {
   .c4p--page-header .c4p--page-header__title-row {
-    flex-wrap: nowrap;
-    /* assume enough space */
+    flex-wrap: nowrap; /* assume enough space */
   }
 }
 .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--under-action-bar {
@@ -16753,6 +16637,7 @@ button.c4p--add-select__global-filter-toggle--open {
   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);
+  min-height: var(--cds-spacing-08, 2.5rem);
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -16886,8 +16771,7 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-bottom: var(--cds-spacing-05, 1rem);
 }
 .c4p--page-header .c4p--page-header__navigation-row .bx--tab-content {
-  display: none;
-  /* need to figure out how to handle the tab content */
+  display: none; /* need to figure out how to handle the tab content */
 }
 .c4p--page-header .c4p--page-header__navigation-tabs {
   margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
@@ -18152,7 +18036,8 @@ button.c4p--add-select__global-filter-toggle--open {
   position: fixed;
   top: var(--cds-spacing-09, 3rem);
   right: 0;
-  width: 40rem;
+  width: 100%;
+  max-width: 40rem;
   height: calc(100vh - var(--cds-spacing-09, 3rem));
   border-left: 1px solid #262626;
   color: var(--cds-text-01, #161616);
@@ -18986,6 +18871,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--options-tile__summary--warn svg path[fill=none] {
+  /* stylelint-disable-next-line carbon/theme-token-use */
   fill: #000000;
 }
 
@@ -19106,6 +18992,7 @@ button.c4p--add-select__global-filter-toggle--open {
   --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
 }
 .c4p--inline-edit.c4p--inline-edit--invalid {
+  /* stylelint-disable-next-line carbon/theme-token-use */
   outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
   outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
 }
@@ -19115,6 +19002,7 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 .c4p--inline-edit.c4p--inline-edit--editing {
+  /* stylelint-disable-next-line carbon/theme-token-use */
   outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
   outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
   background-color: var(--cds-ui-01, #f4f4f4);
@@ -19130,6 +19018,7 @@ button.c4p--add-select__global-filter-toggle--open {
   width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
   max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem));
   min-height: var(--c4p--inline-edit--size);
+  /* stylelint-disable-next-line carbon/layout-token-use */
   margin-right: var(--c4p--inline-edit--toolbar-width);
   margin-left: var(--cds-spacing-05, 1rem);
   line-height: var(--c4p--inline-edit--size);
@@ -19215,12 +19104,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
   display: inline-flex;
   width: var(--c4p--inline-edit--size);
+  max-width: var(--c4p--inline-edit--size);
   height: 100%;
   min-height: initial;
   max-height: var(--c4p--inline-edit--size);
-  padding: calc(
-    0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
-  );
+  align-items: center;
+  justify-content: center;
   border: 2px solid transparent;
 }
 .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
@@ -19241,38 +19130,27 @@ button.c4p--add-select__global-filter-toggle--open {
   border-color: transparent;
 }
 .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
-  margin-right: 0;
+  overflow: visible;
+  width: var(--c4p--inline-edit--edit-size);
   transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition-property: margin, padding;
 }
-.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
-  transition: width 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-@media (prefers-reduced-motion: reduce) {
-  .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
-    transition: none;
-  }
-}
 .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
-  padding-right: 0;
-  padding-left: 0;
-  border-right: 0;
-  border-left: 0;
-  margin-right: calc(-1 * var(--c4p--inline-edit--size));
-}
-.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save svg {
   overflow: hidden;
   width: 0;
+  padding: 0;
+  border-right: 0;
+  border-left: 0;
 }
 .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
   display: inline-flex;
   width: var(--c4p--inline-edit--size);
+  max-width: var(--c4p--inline-edit--size);
   height: 100%;
   min-height: initial;
   max-height: var(--c4p--inline-edit--size);
-  padding: calc(
-    0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
-  );
+  align-items: center;
+  justify-content: center;
   border: 2px solid transparent;
 }
 .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
@@ -19296,12 +19174,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--inline-edit .c4p--inline-edit__validation-icon {
   display: inline-flex;
   width: var(--c4p--inline-edit--size);
+  max-width: var(--c4p--inline-edit--size);
   height: 100%;
   min-height: initial;
   max-height: var(--c4p--inline-edit--size);
-  padding: calc(
-    0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
-  );
+  align-items: center;
+  justify-content: center;
   border: 2px solid transparent;
 }
 .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
@@ -19627,24 +19505,17 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--datagrid__grid-container {
   display: block;
-  overflow: auto;
   width: 100%;
   padding-top: 0;
 }
 .c4p--datagrid__grid-container .bx--data-table-content {
   width: 100%;
   height: 100%;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  overflow-x: unset;
+  overflow-x: auto;
 }
 .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
-  display: flex;
-  overflow: auto;
+  overflow: hidden;
   max-height: 100%;
-  flex-direction: column;
-}
-.c4p--datagrid__grid-container .c4p--datagrid__with-pagination tr:last-of-type > td {
-  border-bottom: none;
 }
 .c4p--datagrid__grid-container .c4p--datagrid__head {
   display: flex;
@@ -19726,6 +19597,10 @@ button.c4p--add-select__global-filter-toggle--open {
   flex: 1 1 auto;
 }
 
+.c4p--datagrid__with-pagination table tr:last-of-type > td {
+  border-bottom: none;
+}
+
 .c4p--datagrid__resizer {
   position: absolute;
   z-index: 1;
@@ -19818,22 +19693,101 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__datagridLeftPanel {
   display: flex;
   width: 388px;
-  height: 100%;
   background-color: var(--cds-ui-01, #f4f4f4);
 }
 
+.c4p--datagrid__leftPanel-position {
+  display: inherit;
+}
+
 .c4p--datagrid__datagridWithPanel {
   position: relative;
   display: flex;
-  overflow: auto;
   width: 100%;
+  height: 100%;
+  flex-direction: column;
+}
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
+  display: flex;
+  overflow: hidden;
   flex-direction: column;
 }
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
+  width: 100%;
+}
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__datagridLeftPanel {
+  flex: 0 0 auto;
+}
+.c4p--datagrid__datagridWithPanel .bx--data-table-content {
+  flex: 1 1 0%;
+}
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
+  overflow: hidden;
+}
+
+.c4p--datagrid__table-container {
+  position: relative;
+  display: flex;
+  overflow: auto;
+  width: 100%;
+  max-height: 100%;
+}
 
 .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
   border-left: 1px solid var(--cds-interactive-01, #0f62fe);
 }
 
+.c4p--datagrid .bx--data-table-header {
+  background: transparent;
+}
+
+.c4p--datagrid__dense-header {
+  display: flex;
+  flex-wrap: wrap;
+}
+.c4p--datagrid__dense-header .bx--data-table-header {
+  flex: 1 1 auto;
+  padding-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
+  flex: 0 0 auto;
+}
+.c4p--datagrid__dense-header .bx--table-toolbar {
+  background: transparent;
+}
+.c4p--datagrid__dense-header .bx__table-container {
+  flex: 1 1 100%;
+}
+.c4p--datagrid__dense-header .bx--table-toolbar {
+  padding-top: var(--cds-spacing-07, 2rem);
+}
+.c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
+  position: relative;
+}
+.c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 1px;
+  height: var(--cds-spacing-05, 1rem);
+  border-left: 1px solid var(--cds-ui-03, #e0e0e0);
+  content: "";
+  transform: translateY(-50%);
+}
+
+.bx--data-table--selected {
+  position: relative;
+}
+
+.bx--data-table--selected::before {
+  position: absolute;
+  left: 0;
+  width: var(--cds-spacing-02, 0.25rem);
+  height: 100%;
+  background-color: var(--cds-interactive-01, #0f62fe);
+  content: "";
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -20113,6 +20067,13 @@ th.c4p--datagrid__select-all-toggle-on.button {
   margin-left: var(--cds-spacing-01, 0.125rem);
 }
 
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2022
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -20181,7 +20142,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   display: flex;
   overflow: hidden;
   width: 100%;
-  height: 100%;
   flex-direction: column;
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
 }
@@ -20190,6 +20150,143 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   overflow-x: unset;
 }
 
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotate-end-p1 {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotate-end-p2 {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+/* Stroke animations */
+@keyframes init-stroke {
+  0% {
+    stroke-dashoffset: 276.4608;
+  }
+  100% {
+    stroke-dashoffset: 52.527552;
+  }
+}
+@keyframes stroke-end {
+  0% {
+    stroke-dashoffset: 52.527552;
+  }
+  100% {
+    stroke-dashoffset: 276.4608;
+  }
+}
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes form-content-entrance {
+  0% {
+    opacity: 0;
+    transform: translateY(-0.75rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.c4p--tearsheet-edit {
+  --c4p--tearsheet-edit--total-width: 0;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form__form--hidden-form {
+  display: none;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form__form--visible-form {
+  animation-duration: 400ms;
+  animation-fill-mode: forwards;
+  animation-name: form-content-entrance;
+  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .c4p--tearsheet-edit .c4p--tearsheet-edit__form__form--visible-form {
+    animation: none;
+    opacity: 1;
+  }
+}
+.c4p--tearsheet-edit .c4p--tearsheet-edit__content {
+  height: 100%;
+  padding: var(--cds-spacing-06, 1.5rem);
+  overflow-x: hidden;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__content .bx--grid {
+  padding: 0;
+  margin: 0;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--heading {
+  padding-bottom: var(--cds-spacing-06, 1.5rem);
+}
+
+.c4p--tearsheet-edit .bx--btn-set .bx--btn.bx--btn--disabled {
+  box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
+}
+
+.c4p--tearsheet-edit .bx--side-nav--ux {
+  position: initial;
+  width: 100%;
+  max-width: 100%;
+  background-color: transparent;
+}
+
+.c4p--tearsheet-edit .bx--side-nav__link:hover {
+  cursor: pointer;
+}
+
+.c4p--tearsheet-edit .bx--side-nav__overlay-active {
+  display: none;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--title,
+.c4p--tearsheet-edit .c4p--tearsheet-edit__section--title {
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__section--subtitle,
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--subtitle {
+  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);
+  margin-bottom: var(--cds-spacing-03, 0.5rem);
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__section--description,
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--description {
+  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: var(--cds-spacing-06, 1.5rem);
+}
+
+.c4p--tearsheet-edit .bx--fieldset {
+  margin-bottom: 0;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--fieldset > * {
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
+
 @font-face {
   font-display: auto;
   font-family: "IBM Plex Mono";
@@ -25445,12 +25542,10 @@ th .bx--table-sort__flex {
   background-color: var(--cds-field-01, #f4f4f4);
   border: none;
   cursor: default;
-  -moz-appearance: textfield;
-  /* Firefox */
+  -moz-appearance: textfield; /* Firefox */
 }
 .numInputWrapper .numInput::-webkit-outer-spin-button, .numInputWrapper .numInput::-webkit-inner-spin-button {
-  margin: 0;
-  /* <-- Apparently some margin are still there even though it's hidden */
+  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
   -webkit-appearance: none;
 }
 .numInputWrapper .numInput:focus {