@carbon/ibm-products 2.1.3 → 2.2.0

package/css/index.css

@@ -76,6 +76,8 @@
 .cds--copy-btn {
   position: relative;
   display: flex;
+  width: 2.5rem;
+  height: 2.5rem;
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -485,13 +487,11 @@
   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,13 +534,16 @@
   right: 0;
 }
 
-.cds--snippet--inline.cds--btn {
-  width: initial;
-  height: 1.25rem;
-  padding-inline: 0;
+.cds--snippet--inline.cds--btn--md.cds--btn--icon-only {
+  padding-right: 0;
+  padding-left: 0;
 }
 
-.cds--snippet--inline.cds--btn.cds--btn--primary:hover {
+.cds--snippet--inline.cds--btn--md {
+  min-height: 1.25rem;
+}
+
+.cds--snippet--inline.cds--btn--primary:hover {
   color: var(--cds-text-primary, #161616);
 }
 
@@ -549,8 +552,12 @@
   right: 0.5rem;
 }
 
-.cds--snippet--multi .cds--copy-btn {
+.cds--snippet--multi .cds--copy-btn.cds--btn--md {
   z-index: 10;
+  width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  padding: 0;
 }
 
 .cds--snippet-btn--expand {
@@ -800,167 +807,7 @@
 }
 
 /* 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;
@@ -976,16 +823,15 @@
   display: inline-flex;
   width: max-content;
   max-width: 20rem;
-  height: var(--cds-layout-size-height-local);
+  min-height: 3rem;
   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);
@@ -1005,12 +851,10 @@
 }
 .cds--btn .cds--btn__icon {
   position: absolute;
-  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);
+  right: 1rem;
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
-  margin-block-start: 0.0625rem;
 }
 
 .cds--btn::-moz-focus-inner {
@@ -1113,7 +957,7 @@
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-link-primary, #0f62fe);
-  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
+  padding: calc(0.875rem - 3px) 1rem;
 }
 .cds--btn--ghost:hover {
   background-color: var(--cds-layer-hover);
@@ -1145,19 +989,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 {
-  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;
+  padding-right: 0.9375rem;
+  padding-left: 0.9375rem;
 }
 .cds--btn--icon-only .cds--btn__icon {
   position: static;
@@ -1189,12 +1033,15 @@
   cursor: not-allowed;
 }
 
-.cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
-  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--btn--icon-only[disabled] {
-  pointer-events: none;
+.cds--btn--sm.cds--btn--icon-only {
+  padding-right: 0.4375rem;
+  padding-left: 0.4375rem;
 }
 
 .cds--btn--danger {
@@ -1266,7 +1113,7 @@
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-button-danger-secondary, #da1e28);
-  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
+  padding: calc(0.875rem - 3px) 1rem;
 }
 .cds--btn--danger--ghost:hover {
   background-color: var(--cds-button-danger-hover, #b81921);
@@ -1295,12 +1142,46 @@
   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 {
@@ -1973,7 +1854,6 @@ 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,
@@ -2074,8 +1954,6 @@ 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);
@@ -2083,8 +1961,8 @@ fieldset[disabled] .cds--form__helper-text {
   outline: 2px solid transparent;
   outline-offset: -2px;
   width: 100%;
-  height: var(--cds-layout-size-height-local);
-  padding: 0 var(--cds-layout-density-padding-inline-local);
+  height: 2.5rem;
+  padding: 0 1rem;
   border: none;
   border-bottom: 1px solid var(--cds-border-strong);
   background-color: var(--cds-field);
@@ -2121,6 +1999,14 @@ 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;
 }
@@ -2980,47 +2866,11 @@ 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;
 }
@@ -3111,7 +2961,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--selected):not(.cds--tabs__nav-item--disabled):not(.cds--tabs__nav-item--hover-off):hover {
+.cds--tabs.cds--tabs--contained .cds--tabs__nav-item:not(.cds--tabs__nav-item--disabled):hover {
   background-color: var(--cds-layer-accent-hover);
   color: var(--cds-text-primary, #161616);
 }
@@ -3492,10 +3342,6 @@ 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;
@@ -3820,33 +3666,8 @@ 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;
 }
 
@@ -6341,6 +6162,7 @@ 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);
@@ -6746,6 +6568,7 @@ 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%;
@@ -6885,6 +6708,7 @@ 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);
@@ -6893,6 +6717,7 @@ 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);
@@ -6903,14 +6728,17 @@ 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);
 }
@@ -6959,13 +6787,11 @@ 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;
@@ -7056,13 +6882,10 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--tearsheet .c4p--tearsheet__main {
   display: flex;
   flex-direction: row;
-  background-color: var(--cds-background, #ffffff);
+  background-color: var(--cds-layer);
   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);
@@ -8568,9 +8391,6 @@ 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;
@@ -9050,14 +8870,6 @@ 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;
@@ -9321,7 +9133,7 @@ button.c4p--add-select__global-filter-toggle--open {
   top: 3rem;
   right: 0;
   overflow: auto;
-  min-width: 20rem;
+  min-width: 22.75rem;
   max-width: 22.75rem;
   min-height: 38.5rem;
   max-height: 38.5rem;
@@ -9839,10 +9651,6 @@ 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);
@@ -9852,25 +9660,16 @@ button.c4p--add-select__global-filter-toggle--open {
   display: inline-flex;
   min-width: 2rem;
   max-width: 100%;
-  min-height: var(--cds-layout-size-height-local);
+  min-height: 1.5rem;
   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);
@@ -10041,8 +9840,8 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .cds--tag__close-icon {
   display: flex;
-  width: var(--cds-layout-size-height-local);
-  height: var(--cds-layout-size-height-local);
+  width: 1.5rem;
+  height: 1.5rem;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
@@ -10096,11 +9895,18 @@ 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;
 }
 
@@ -11902,6 +11708,7 @@ 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;
 }
 
@@ -12067,6 +11874,7 @@ 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 */
@@ -13707,7 +13515,7 @@ button.c4p--add-select__global-filter-toggle--open {
   pointer-events: auto;
 }
 
-.cds--popover--open > .cds--popover > .cds--popover-content {
+.cds--popover--open .cds--popover-content {
   display: block;
 }
 
@@ -13717,7 +13525,7 @@ button.c4p--add-select__global-filter-toggle--open {
   content: "";
 }
 
-.cds--popover--open > .cds--popover > .cds--popover-content::before {
+.cds--popover--open .cds--popover-content::before {
   display: block;
 }
 
@@ -13729,14 +13537,10 @@ button.c4p--add-select__global-filter-toggle--open {
   will-change: transform;
 }
 
-.cds--popover--open > .cds--popover > .cds--popover-caret {
+.cds--popover--open.cds--popover--caret .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%;
@@ -14222,14 +14026,6 @@ 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;
@@ -14660,14 +14456,6 @@ 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;
@@ -15837,6 +15625,13 @@ 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;
@@ -16308,6 +16103,11 @@ 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%;
 }
@@ -16348,18 +16148,6 @@ 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
@@ -16790,13 +16578,6 @@ 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);
@@ -16920,10 +16701,6 @@ 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;
 }
@@ -17452,7 +17229,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
   display: none;
 }
-.c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
+.c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
   left: 0.125rem;
   width: 112px;
 }