@carbon/ibm-products 2.2.0 → 2.3.0

package/css/index.css

@@ -76,8 +76,6 @@
 .cds--copy-btn {
   position: relative;
   display: flex;
-  width: 2.5rem;
-  height: 2.5rem;
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -487,11 +485,13 @@
   transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
+.cds--btn > .cds--snippet__icon {
+  margin-block-start: 0;
+}
+
 .cds--copy-btn {
   display: flex;
   overflow: visible;
-  width: 2.5rem;
-  height: 2.5rem;
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -534,16 +534,13 @@
   right: 0;
 }
 
-.cds--snippet--inline.cds--btn--md.cds--btn--icon-only {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.cds--snippet--inline.cds--btn--md {
-  min-height: 1.25rem;
+.cds--snippet--inline.cds--btn {
+  width: initial;
+  height: 1.25rem;
+  padding-inline: 0;
 }
 
-.cds--snippet--inline.cds--btn--primary:hover {
+.cds--snippet--inline.cds--btn.cds--btn--primary:hover {
   color: var(--cds-text-primary, #161616);
 }
 
@@ -552,12 +549,8 @@
   right: 0.5rem;
 }
 
-.cds--snippet--multi .cds--copy-btn.cds--btn--md {
+.cds--snippet--multi .cds--copy-btn {
   z-index: 10;
-  width: 2rem;
-  height: 2rem;
-  min-height: 2rem;
-  padding: 0;
 }
 
 .cds--snippet-btn--expand {
@@ -807,7 +800,167 @@
 }
 
 /* stylelint-enable */
+:root {
+  --cds-layout-size-height-xs: 1.5rem;
+  --cds-layout-size-height-sm: 2rem;
+  --cds-layout-size-height-md: 2.5rem;
+  --cds-layout-size-height-lg: 3rem;
+  --cds-layout-size-height-xl: 4rem;
+  --cds-layout-size-height-2xl: 5rem;
+  --cds-layout-size-height-min: 0px;
+  --cds-layout-size-height-max: 999999999px;
+  --cds-layout-density-padding-inline-condensed: 0.5rem;
+  --cds-layout-density-padding-inline-normal: 1rem;
+  --cds-layout-density-padding-inline-min: 0px;
+  --cds-layout-density-padding-inline-max: 999999999px;
+}
+
+.cds--layout--size-xs {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-xs {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
+}
+
+.cds--layout-constraint--size\:min-xs {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
+}
+
+.cds--layout-constraint--size\:max-xs {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
+}
+
+.cds--layout--size-sm {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-sm {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
+}
+
+.cds--layout-constraint--size\:min-sm {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
+}
+
+.cds--layout-constraint--size\:max-sm {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
+}
+
+.cds--layout--size-md {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-md {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
+}
+
+.cds--layout-constraint--size\:min-md {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
+}
+
+.cds--layout-constraint--size\:max-md {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
+}
+
+.cds--layout--size-lg {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-lg {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
+}
+
+.cds--layout-constraint--size\:min-lg {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
+}
+
+.cds--layout-constraint--size\:max-lg {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
+}
+
+.cds--layout--size-xl {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-xl {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
+}
+
+.cds--layout-constraint--size\:min-xl {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
+}
+
+.cds--layout-constraint--size\:max-xl {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
+}
+
+.cds--layout--size-2xl {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout-constraint--size\:default-2xl {
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
+}
+
+.cds--layout-constraint--size\:min-2xl {
+  --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
+}
+
+.cds--layout-constraint--size\:max-2xl {
+  --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
+}
+
+.cds--layout--density-condensed {
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
+}
+
+.cds--layout-constraint--density\:default-condensed {
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
+}
+
+.cds--layout-constraint--density\:min-condensed {
+  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+}
+
+.cds--layout-constraint--density\:max-condensed {
+  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+}
+
+.cds--layout--density-normal {
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
+}
+
+.cds--layout-constraint--density\:default-normal {
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
+}
+
+.cds--layout-constraint--density\:min-normal {
+  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
+}
+
+.cds--layout-constraint--density\:max-normal {
+  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
+}
+
 .cds--btn {
+  --cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
+  --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
+  --temp-1lh: (
+    var(--cds-body-compact-01-line-height, 1.28572) * 1em
+  );
+  --temp-padding-block-max: calc(
+    (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
+      0.0625rem
+  );
   box-sizing: border-box;
   padding: 0;
   border: 0;
@@ -823,15 +976,16 @@
   display: inline-flex;
   width: max-content;
   max-width: 20rem;
-  min-height: 3rem;
+  height: var(--cds-layout-size-height-local);
   flex-shrink: 0;
-  align-items: center;
   justify-content: space-between;
-  padding: calc(0.875rem - 3px) calc(4rem - 1px) calc(0.875rem - 3px) calc(1rem - 1px);
   margin: 0;
   border-radius: 0;
   cursor: pointer;
   outline: none;
+  padding-block-start: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
+  padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
   text-align: left;
   text-decoration: none;
   transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
@@ -851,10 +1005,12 @@
 }
 .cds--btn .cds--btn__icon {
   position: absolute;
-  right: 1rem;
+  top: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
+  right: var(--cds-layout-density-padding-inline-local);
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
+  margin-block-start: 0.0625rem;
 }
 
 .cds--btn::-moz-focus-inner {
@@ -957,7 +1113,7 @@
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-link-primary, #0f62fe);
-  padding: calc(0.875rem - 3px) 1rem;
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--ghost:hover {
   background-color: var(--cds-layer-hover);
@@ -989,19 +1145,19 @@
   color: var(--cds-text-on-color-disabled, #8d8d8d);
   outline: none;
 }
-.cds--btn--ghost.cds--btn--sm {
-  padding: calc(0.375rem - 3px) 1rem;
-}
-.cds--btn--ghost.cds--btn--field, .cds--btn--ghost.cds--btn--md {
-  padding: calc(0.675rem - 3px) 1rem;
-}
 .cds--btn--ghost:not([disabled]) svg {
   fill: var(--cds-icon-primary, #161616);
 }
 
 .cds--btn--icon-only {
-  padding-right: 0.9375rem;
-  padding-left: 0.9375rem;
+  width: var(--cds-layout-size-height-local);
+  height: var(--cds-layout-size-height-local);
+  justify-content: center;
+  padding: 0;
+  padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
+}
+.cds--btn--icon-only > :first-child {
+  margin-block-start: 0.0625rem;
 }
 .cds--btn--icon-only .cds--btn__icon {
   position: static;
@@ -1033,15 +1189,12 @@
   cursor: not-allowed;
 }
 
-.cds--btn--field.cds--btn--icon-only,
-.cds--btn--md.cds--btn--icon-only {
-  padding-right: 0.6875rem;
-  padding-left: 0.6875rem;
+.cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
+  cursor: not-allowed;
 }
 
-.cds--btn--sm.cds--btn--icon-only {
-  padding-right: 0.4375rem;
-  padding-left: 0.4375rem;
+.cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
+  pointer-events: none;
 }
 
 .cds--btn--danger {
@@ -1113,7 +1266,7 @@
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-button-danger-secondary, #da1e28);
-  padding: calc(0.875rem - 3px) 1rem;
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--danger--ghost:hover {
   background-color: var(--cds-button-danger-hover, #b81921);
@@ -1142,46 +1295,12 @@
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   outline: none;
 }
-.cds--btn--danger--ghost.cds--btn--sm {
-  padding: calc(0.375rem - 3px) 1rem;
-}
-.cds--btn--danger--ghost.cds--btn--field, .cds--btn--danger--ghost.cds--btn--md {
-  padding: calc(0.675rem - 3px) 1rem;
-}
-
-.cds--btn--sm {
-  min-height: 2rem;
-  padding: calc(0.375rem - 3px) calc(4rem - 4px) calc(0.375rem - 3px) calc(1rem - 4px);
-}
-
-.cds--btn--2xl:not(.cds--btn--icon-only) {
-  align-items: baseline;
-  padding-top: 1rem;
-  padding-right: 4rem;
-  padding-left: 1rem;
-  min-height: 5rem;
-}
-
-.cds--btn--xl:not(.cds--btn--icon-only) {
-  align-items: baseline;
-  padding-top: 1rem;
-  padding-right: 4rem;
-  padding-left: 1rem;
-  min-height: 4rem;
-}
-
-.cds--btn--field,
-.cds--btn--md {
-  min-height: 2.5rem;
-  padding: calc(0.675rem - 3px) calc(4rem - 4px) calc(0.675rem - 3px) calc(1rem - 4px);
-}
 
 .cds--btn--expressive {
   font-size: var(--cds-body-compact-02-font-size, 1rem);
   font-weight: var(--cds-body-compact-02-font-weight, 400);
   line-height: var(--cds-body-compact-02-line-height, 1.375);
   letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
-  min-height: 3rem;
 }
 
 .cds--btn--icon-only.cds--btn--expressive {
@@ -1854,6 +1973,7 @@ input[data-invalid] ~ .cds--form-requirement,
 .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
 .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
 .cds--time-picker--invalid ~ .cds--form-requirement,
+.cds--time-picker--warning ~ .cds--form-requirement,
 .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
 .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
 .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
@@ -1954,6 +2074,8 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--text-input {
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
+  --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -1961,8 +2083,8 @@ fieldset[disabled] .cds--form__helper-text {
   outline: 2px solid transparent;
   outline-offset: -2px;
   width: 100%;
-  height: 2.5rem;
-  padding: 0 1rem;
+  height: var(--cds-layout-size-height-local);
+  padding: 0 var(--cds-layout-density-padding-inline-local);
   border: none;
   border-bottom: 1px solid var(--cds-border-strong);
   background-color: var(--cds-field);
@@ -1999,14 +2121,6 @@ fieldset[disabled] .cds--form__helper-text {
   display: none;
 }
 
-.cds--text-input--lg {
-  height: 3rem;
-}
-
-.cds--text-input--sm {
-  height: 2rem;
-}
-
 .cds--password-input {
   padding-right: 2.5rem;
 }
@@ -2866,11 +2980,47 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tabs .cds--tabs__nav-item .cds--tabs__nav-link {
   transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
+.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
+  padding: 1rem;
+  margin-top: -0.5rem;
+  margin-right: -1rem;
+  margin-left: -1rem;
+}
+.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
+  background-color: inherit;
+}
+.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg {
+  width: 24px;
+  height: 24px;
+  padding: 0.25rem;
+  margin: -0.25rem;
+}
+.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg:hover {
+  background-color: var(--cds-layer-accent-hover);
+}
+.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled).cds--tabs__nav-item--selected .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon svg:hover {
+  background-color: var(--cds-layer-hover);
+}
+.cds--tabs .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled) .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon:hover {
+  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+}
 .cds--tabs .cds--tabs__nav-item--icon {
   display: flex;
   align-items: center;
   padding-left: 0.5rem;
 }
+.cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
+  padding: 0.25rem;
+  margin: -0.25rem;
+  line-height: 0;
+  pointer-events: auto;
+}
+.cds--tabs .cds--tabs__nav-item--icon-left {
+  display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+  margin-top: -2px;
+}
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
   padding-left: 1rem;
 }
@@ -2961,7 +3111,7 @@ fieldset[disabled] .cds--form__helper-text {
   border-bottom: 2px solid var(--cds-border-strong);
   color: var(--cds-text-primary, #161616);
 }
-.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled):hover {
+.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):not(.cds--tabs__nav-item--hover-off):hover {
   background-color: var(--cds-layer-accent-hover);
   color: var(--cds-text-primary, #161616);
 }
@@ -3342,6 +3492,10 @@ p.c4p--about-modal__copyright-text:first-child {
   background-color: var(--cds-layer-hover);
 }
 
+.cds--overflow-menu > :first-child {
+  margin-block-start: 0;
+}
+
 .cds--overflow-menu--sm {
   width: 2rem;
   height: 2rem;
@@ -3666,8 +3820,33 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--button-menu {
   min-width: 160px;
 }
+.c4p--button-menu.c4p--button-menu__wrapper--primary, .c4p--button-menu.c4p--button-menu__wrapper--primary.cds--overflow-menu.cds--overflow-menu--open {
+  background-color: var(--cds-button-primary, #0f62fe);
+}
+.c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--primary:hover {
+  background-color: var(--cds-button-primary-hover, #0050e6);
+}
+.c4p--button-menu.c4p--button-menu__wrapper--tertiary, .c4p--button-menu.c4p--button-menu__wrapper--tertiary.cds--overflow-menu.cds--overflow-menu--open {
+  background-color: var(--cds-button-tertiary, #0f62fe);
+}
+.c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--tertiary:hover {
+  background-color: var(--cds-button-tertiary-hover, #0050e6);
+}
+.c4p--button-menu.c4p--button-menu__wrapper--ghost, .c4p--button-menu.c4p--button-menu__wrapper--ghost.cds--overflow-menu.cds--overflow-menu--open {
+  background-color: transparent;
+}
+.c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--ghost:hover {
+  background-color: var(--cds-layer-hover);
+}
 .c4p--button-menu .c4p--button-menu__trigger {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+  display: flex;
   width: 100%;
+  align-items: center;
+  justify-content: space-between;
   padding: 0 1rem;
 }
 
@@ -5951,18 +6130,18 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--create-full-page .c4p--create-full-page__step-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);
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
   margin-bottom: 0.5rem;
 }
 
 .c4p--create-full-page .c4p--create-full-page__step-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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   margin-bottom: 1.5rem;
 }
 
@@ -6051,10 +6230,10 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--create-full-page .c4p--create-full-page__step-title {
-  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);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-heading-04-font-weight, 400);
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
   margin-bottom: 1rem;
 }
 
@@ -6112,27 +6291,27 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--create-modal__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);
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-heading-03-font-weight, 400);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-modal__subtitle {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   margin-bottom: 0.5rem;
   color: var(--cds-text-secondary, #525252);
 }
 
 .c4p--create-modal__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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   padding-right: calc(20% - 1rem);
   margin: 0.5rem 0 1rem 0;
 }
@@ -6162,7 +6341,6 @@ a.cds--overflow-menu-options__btn::before {
   --c4p--side-panel--collapsed-title-y-position: 1rem;
   --c4p--side-panel--label-text-height: 0;
   position: fixed;
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: 9000;
   top: 3rem;
   height: calc(100% - 3rem);
@@ -6341,10 +6519,10 @@ a.cds--overflow-menu-options__btn::before {
   top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
 }
 .c4p--side-panel__container .c4p--side-panel__title-text {
-  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);
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-heading-03-font-weight, 400);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
   display: -webkit-box;
   overflow: hidden;
   padding-right: 3rem;
@@ -6369,10 +6547,10 @@ a.cds--overflow-menu-options__btn::before {
   white-space: nowrap;
 }
 .c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
-  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);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
   display: -webkit-box;
   overflow: hidden;
   padding-right: 3rem;
@@ -6384,10 +6562,10 @@ a.cds--overflow-menu-options__btn::before {
   transform: translateY(var(--c4p--side-panel--collapsed-title-y-position));
 }
 .c4p--side-panel__container .c4p--side-panel__subtitle-text {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   overflow: hidden;
   padding: 0 3rem 1rem 1rem;
   -webkit-box-orient: vertical;
@@ -6568,7 +6746,6 @@ a.cds--overflow-menu-options__btn::before {
 
 .c4p--side-panel__overlay {
   position: fixed;
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: 6000;
   width: 100%;
   height: 100%;
@@ -6663,18 +6840,18 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--create-side-panel__form-title-text {
-  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);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
   padding-bottom: 0.5rem;
 }
 
 .c4p--create-side-panel__form-description-text {
-  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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
 
 .c4p--create-side-panel.c4p--side-panel .cds--btn.c4p--side-panel__close-button {
@@ -6682,18 +6859,18 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--create-side-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);
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-heading-03-font-weight, 400);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel__subtitle {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   margin-bottom: 0.5rem;
   color: var(--cds-text-secondary, #525252);
 }
@@ -6708,7 +6885,6 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--tearsheet.c4p--tearsheet {
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: 9001;
   align-items: flex-end;
   color: var(--cds-text-primary, #161616);
@@ -6717,7 +6893,6 @@ a.cds--overflow-menu-options__btn::before {
   --c4p--tearsheet--stacking-scale-factor-double: 0.9;
 }
 .c4p--tearsheet.is-visible {
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: 9000;
   align-items: flex-end;
   transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
@@ -6728,17 +6903,14 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: 8999;
   background-color: rgba(22, 22, 22, 0.33);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: 8998;
   background-color: rgba(22, 22, 22, 0.11);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: 8999;
   background-color: rgba(22, 22, 22, 0.25);
 }
@@ -6787,11 +6959,13 @@ a.cds--overflow-menu-options__btn::before {
   padding: 1.5rem 2rem;
   border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   margin: 0;
+  background-color: var(--cds-layer);
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
   padding: 1rem;
   border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   margin: 0;
+  background-color: var(--cds-layer);
 }
 .c4p--tearsheet .c4p--tearsheet__header-content {
   display: flex;
@@ -6811,20 +6985,20 @@ a.cds--overflow-menu-options__btn::before {
   display: none;
 }
 .c4p--tearsheet.c4p--tearsheet--wide .cds--modal-header__heading.c4p--tearsheet__heading {
-  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);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-heading-04-font-weight, 400);
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
 }
 .c4p--tearsheet .c4p--tearsheet__header-description {
   display: -webkit-box;
   overflow: hidden;
   max-width: 100%;
   margin-top: 1rem;
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   word-break: break-word;
@@ -6882,10 +7056,13 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--tearsheet .c4p--tearsheet__main {
   display: flex;
   flex-direction: row;
-  background-color: var(--cds-layer);
+  background-color: var(--cds-background, #ffffff);
   grid-column: 1/-1;
   grid-row: 1/-1;
 }
+.c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
+  background-color: var(--cds-layer);
+}
 .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
   border-right: none;
   border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -7019,19 +7196,19 @@ a.cds--overflow-menu-options__btn::before {
 
 .c4p--tearsheet-create .c4p--tearsheet-create__section--subtitle,
 .c4p--tearsheet-create .c4p--tearsheet-create__step--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);
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
   margin-bottom: 0.5rem;
 }
 
 .c4p--tearsheet-create .c4p--tearsheet-create__section--description,
 .c4p--tearsheet-create .c4p--tearsheet-create__step--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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   margin-bottom: 1.5rem;
 }
 
@@ -7075,18 +7252,18 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-title-text {
-  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);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
   padding-bottom: 0.5rem;
 }
 
 .c4p--create-tearsheet-narrow .c4p--create-tearsheet-narrow__form-description-text {
-  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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
 
 .cds--link {
@@ -8307,10 +8484,10 @@ c4p--card__icon:active {
 .c4p--import-modal .c4p--import-modal__file-drop-header,
 .c4p--import-modal .c4p--import-modal__label {
   margin-bottom: 0.5rem;
-  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);
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
 }
 
 .c4p--import-modal__helper-text {
@@ -8391,6 +8568,9 @@ c4p--card__icon:active {
   display: flex;
   align-items: center;
 }
+.c4p--add-select__selections-form-control-wrapper--radio {
+  cursor: pointer;
+}
 .c4p--add-select__selections-form-control-label-wrapper {
   display: flex;
   margin-left: 1rem;
@@ -8441,10 +8621,10 @@ c4p--card__icon:active {
   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);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
 }
 
 .c4p--add-select__sidebar-title {
@@ -8476,10 +8656,10 @@ c4p--card__icon:active {
 }
 
 .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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   margin-bottom: 1rem;
 }
 
@@ -8620,24 +8800,24 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .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);
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-heading-03-font-weight, 400);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
 }
 
 .c4p--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);
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
 }
 
 .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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
 }
 
 .c4p--add-select__selections .cds--list-box__menu {
@@ -8671,10 +8851,10 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .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);
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
 }
 
 .c4p--add-select .cds--modal-container--sm .cds--modal-content p {
@@ -8870,6 +9050,14 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-fluid-spacing-02: 2vw;
   --cds-fluid-spacing-03: 5vw;
   --cds-fluid-spacing-04: 10vw;
+  --cds-caption-01-font-size: 0.75rem;
+  --cds-caption-01-font-weight: 400;
+  --cds-caption-01-line-height: 1.33333;
+  --cds-caption-01-letter-spacing: 0.32px;
+  --cds-caption-02-font-size: 0.875rem;
+  --cds-caption-02-font-weight: 400;
+  --cds-caption-02-line-height: 1.28572;
+  --cds-caption-02-letter-spacing: 0.32px;
   --cds-label-01-font-size: 0.75rem;
   --cds-label-01-font-weight: 400;
   --cds-label-01-line-height: 1.33333;
@@ -9133,7 +9321,7 @@ button.c4p--add-select__global-filter-toggle--open {
   top: 3rem;
   right: 0;
   overflow: auto;
-  min-width: 22.75rem;
+  min-width: 20rem;
   max-width: 22.75rem;
   min-height: 38.5rem;
   max-height: 38.5rem;
@@ -9170,10 +9358,10 @@ button.c4p--add-select__global-filter-toggle--open {
   color: var(--cds-text-primary, #161616);
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__header {
-  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);
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
   margin: 0;
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__time-section-label {
@@ -9342,10 +9530,10 @@ button.c4p--add-select__global-filter-toggle--open {
   margin-top: 10rem;
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__main-section-empty.c4p--notifications-panel__main-section .c4p-subtext {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
 }
 .c4p--notifications-panel__container .c4p--notifications-panel__main-section {
   min-height: 498px;
@@ -9651,6 +9839,10 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .cds--tag {
+  --cds-layout-size-height-xs: 1.125rem;
+  --cds-layout-size-height-sm: 1.125rem;
+  --cds-layout-size-height-md: 1.5rem;
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-md)));
   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);
@@ -9660,16 +9852,25 @@ button.c4p--add-select__global-filter-toggle--open {
   display: inline-flex;
   min-width: 2rem;
   max-width: 100%;
-  min-height: 1.5rem;
+  min-height: var(--cds-layout-size-height-local);
   align-items: center;
   justify-content: center;
-  padding: 0.25rem 0.5rem;
   margin: 0.25rem;
   border-radius: 0.9375rem;
   cursor: default;
+  padding-inline: 0.5rem;
   vertical-align: middle;
   word-break: break-word;
 }
+.cds--layout--size-xs .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-xs);
+}
+.cds--layout--size-sm .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-sm);
+}
+.cds--layout--size-md .cds--tag {
+  --cds-layout-size-height: var(--cds-layout-size-height-md);
+}
 .cds--tag.cds--tag--interactive:hover,
 .cds--tag .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-gray, #c6c6c6);
@@ -9840,8 +10041,8 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .cds--tag__close-icon {
   display: flex;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--cds-layout-size-height-local);
+  height: var(--cds-layout-size-height-local);
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
@@ -9895,18 +10096,11 @@ button.c4p--add-select__global-filter-toggle--open {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
-.cds--tag--sm {
-  min-height: 1.125rem;
-  padding: 0 0.5rem;
-}
-
 .cds--tag--sm.cds--tag--filter {
   padding-right: 0;
 }
 
 .cds--tag--sm .cds--tag__close-icon {
-  width: 1.125rem;
-  height: 1.125rem;
   margin-left: 0.3125rem;
 }
 
@@ -11708,7 +11902,6 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--breadcrumb-with-overflow__overflow-menu-options.c4p--breadcrumb-with-overflow__overflow-menu-options {
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: 8000;
 }
 
@@ -11818,10 +12011,10 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item,
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item .cds--tag {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   display: block;
   overflow: hidden;
   min-width: initial;
@@ -11874,7 +12067,6 @@ button.c4p--add-select__global-filter-toggle--open {
   justify-content: flex-end;
 }
 
-/* stylelint-disable-next-line function-no-unknown */
 @keyframes background-appear {
   from {
     /* stylelint-disable-next-line carbon/theme-token-use */
@@ -12181,10 +12373,10 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 .c4p--page-header .c4p--page-header__title {
-  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);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-heading-04-font-weight, 400);
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
   min-height: 2.5rem;
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -12284,16 +12476,16 @@ button.c4p--add-select__global-filter-toggle--open {
   height: 1rem;
 }
 .c4p--page-header .c4p--page-header__subtitle {
-  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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
 .c4p--page-header .c4p--page-header__available-row {
-  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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   margin-top: 0.5rem;
 }
 .c4p--page-header .c4p--page-header__available-row + .c4p--page-header__last-row-buffer--active {
@@ -12303,10 +12495,10 @@ button.c4p--add-select__global-filter-toggle--open {
   margin-top: 1rem;
 }
 .c4p--page-header .c4p--page-header__available-row * {
-  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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
 .c4p--page-header .c4p--page-header__navigation-row {
   flex-wrap: wrap-reverse;
@@ -12479,10 +12671,10 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--saving__text {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
 }
 
 .c4p--saving__buttons {
@@ -13515,7 +13707,7 @@ button.c4p--add-select__global-filter-toggle--open {
   pointer-events: auto;
 }
 
-.cds--popover--open .cds--popover-content {
+.cds--popover--open > .cds--popover > .cds--popover-content {
   display: block;
 }
 
@@ -13525,7 +13717,7 @@ button.c4p--add-select__global-filter-toggle--open {
   content: "";
 }
 
-.cds--popover--open .cds--popover-content::before {
+.cds--popover--open > .cds--popover > .cds--popover-content::before {
   display: block;
 }
 
@@ -13537,10 +13729,14 @@ button.c4p--add-select__global-filter-toggle--open {
   will-change: transform;
 }
 
-.cds--popover--open.cds--popover--caret .cds--popover-caret {
+.cds--popover--open > .cds--popover > .cds--popover-caret {
   display: block;
 }
 
+.cds--popover--tab-tip .cds--popover .cds--popover-caret {
+  display: none;
+}
+
 .cds--popover--bottom .cds--popover-content {
   bottom: 0;
   left: 50%;
@@ -14026,6 +14222,14 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-fluid-spacing-02: 2vw;
   --cds-fluid-spacing-03: 5vw;
   --cds-fluid-spacing-04: 10vw;
+  --cds-caption-01-font-size: 0.75rem;
+  --cds-caption-01-font-weight: 400;
+  --cds-caption-01-line-height: 1.33333;
+  --cds-caption-01-letter-spacing: 0.32px;
+  --cds-caption-02-font-size: 0.875rem;
+  --cds-caption-02-font-weight: 400;
+  --cds-caption-02-line-height: 1.28572;
+  --cds-caption-02-letter-spacing: 0.32px;
   --cds-label-01-font-size: 0.75rem;
   --cds-label-01-font-weight: 400;
   --cds-label-01-line-height: 1.33333;
@@ -14456,6 +14660,14 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-fluid-spacing-02: 2vw;
   --cds-fluid-spacing-03: 5vw;
   --cds-fluid-spacing-04: 10vw;
+  --cds-caption-01-font-size: 0.75rem;
+  --cds-caption-01-font-weight: 400;
+  --cds-caption-01-line-height: 1.33333;
+  --cds-caption-01-letter-spacing: 0.32px;
+  --cds-caption-02-font-size: 0.875rem;
+  --cds-caption-02-font-weight: 400;
+  --cds-caption-02-line-height: 1.28572;
+  --cds-caption-02-letter-spacing: 0.32px;
   --cds-label-01-font-size: 0.75rem;
   --cds-label-01-font-weight: 400;
   --cds-label-01-line-height: 1.33333;
@@ -14936,19 +15148,19 @@ button.c4p--add-select__global-filter-toggle--open {
 .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);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-heading-04-font-weight, 400);
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
 }
 
 .c4p--user-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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
 }
 
 .c4p--user-profile-image--md {
@@ -14991,17 +15203,17 @@ button.c4p--add-select__global-filter-toggle--open {
   margin-bottom: 1rem;
 }
 .c4p--edit-side-panel .c4p--edit-side-panel__form-title-text {
-  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);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
   padding-bottom: 0.5rem;
 }
 .c4p--edit-side-panel .c4p--edit-side-panel__form-description-text {
-  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);
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
 }
 .c4p--edit-side-panel.c4p--side-panel .cds--btn.c4p--side-panel__close-button {
   display: none;
@@ -15386,10 +15598,10 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
 .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   width: 100%;
   height: 100%;
   padding: 0 0.5rem;
@@ -15444,18 +15656,18 @@ button.c4p--add-select__global-filter-toggle--open {
   text-align: left;
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__th {
-  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);
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
   color: var(--cds-text-primary, #161616);
   text-align: left;
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__cell-editor {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   outline: 2px solid transparent;
   outline-offset: -2px;
   position: absolute;
@@ -15487,10 +15699,10 @@ button.c4p--add-select__global-filter-toggle--open {
   outline-offset: -2px;
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__cell-editor-ruler {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   position: absolute;
   overflow: hidden;
   width: fit-content;
@@ -15504,10 +15716,10 @@ button.c4p--add-select__global-filter-toggle--open {
   outline: 0.125rem solid var(--cds-background-brand, #0f62fe);
 }
 .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight {
-  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);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   position: absolute;
@@ -15625,13 +15837,6 @@ button.c4p--add-select__global-filter-toggle--open {
   overscroll-behavior: none;
 }
 
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
 .c4p--datagrid__table-toolbar > section {
   z-index: 2;
   overflow: visible;
@@ -16103,11 +16308,6 @@ button.c4p--add-select__global-filter-toggle--open {
   width: 100%;
 }
 
-.cds--body--with-modal-open .c4p--datagrid__grid-container {
-  overflow: hidden;
-  height: 100vh;
-}
-
 .c4p--datagrid .cds--modal {
   width: 100%;
 }
@@ -16148,6 +16348,18 @@ button.c4p--add-select__global-filter-toggle--open {
   background-color: var(--cds-layer-accent);
 }
 
+.c4p--datagrid .cds--action-list .cds--btn.c4p--button-menu {
+  padding: 0;
+}
+
+.c4p--datagrid .cds--action-list .cds--btn {
+  align-items: center;
+}
+
+.c4p--datagrid .cds--action-list .cds--btn__icon {
+  margin-top: 0;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -16578,6 +16790,13 @@ button.c4p--add-select__global-filter-toggle--open {
   grid-template-columns: 1fr 1fr;
 }
 
+.c4p--datagrid-filter-flyout__trigger.cds--btn {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+}
+
 .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
   position: relative;
   background-color: var(--cds-layer-02, #ffffff);
@@ -16701,6 +16920,10 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .cds--btn.c4p--datagrid-filter-panel-open-button {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
   border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   border-bottom: none;
 }
@@ -17229,7 +17452,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
   display: none;
 }
-.c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
+.c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
   left: 0.125rem;
   width: 112px;
 }