@carbon/ibm-products 2.6.1 → 2.8.0

package/css/index.css

@@ -1,3 +1,222 @@
+.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);
+}
+
+: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;
+}
+
+:root {
+  --cds-layer: var(--cds-layer-01, #f4f4f4);
+  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
+  --cds-field: var(--cds-field-01, #f4f4f4);
+  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
+}
+
+.cds--layer-one {
+  --cds-layer: var(--cds-layer-01, #f4f4f4);
+  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
+  --cds-field: var(--cds-field-01, #f4f4f4);
+  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
+}
+
+.cds--layer-two {
+  --cds-layer: var(--cds-layer-02, #ffffff);
+  --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
+  --cds-field: var(--cds-field-02, #ffffff);
+  --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
+}
+
+.cds--layer-three {
+  --cds-layer: var(--cds-layer-03, #f4f4f4);
+  --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
+  --cds-field: var(--cds-field-03, #f4f4f4);
+  --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
+}
+
 @keyframes hide-feedback {
   0% {
     opacity: 1;
@@ -73,1265 +292,1535 @@
   white-space: nowrap;
 }
 
-.cds--copy-btn {
+.cds--popover-container {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: none;
-  background-color: var(--cds-layer);
-  cursor: pointer;
-}
-.cds--copy-btn html {
-  font-size: 100%;
-}
-.cds--copy-btn body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  display: inline-block;
 }
-.cds--copy-btn code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+
+.cds--popover--high-contrast .cds--popover {
+  --cds-popover-background-color: var(--cds-background-inverse, #393939);
+  --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
 }
-.cds--copy-btn strong {
-  font-weight: 600;
+
+.cds--popover--drop-shadow .cds--popover {
+  --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
 }
-.cds--copy-btn:hover {
-  background-color: var(--cds-layer-hover);
+
+.cds--popover--caret {
+  --cds-popover-offset: 0.625rem;
 }
-.cds--copy-btn:active {
-  background-color: var(--cds-layer-active);
-}
-.cds--copy-btn::before {
+
+.cds--popover {
   position: absolute;
   z-index: 6000;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  content: "";
-  display: none;
+  filter: var(--cds-popover-drop-shadow, none);
+  inset: 0;
+  pointer-events: none;
 }
-.cds--copy-btn .cds--copy-btn__feedback {
-  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
+
+.cds--popover-content {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  position: absolute;
   z-index: 6000;
-  width: max-content;
-  min-width: 1.5rem;
-  max-width: 13rem;
-  height: auto;
-  padding: 0.1875rem 1rem;
-  background-color: var(--cds-background-inverse, #393939);
-  border-radius: 0.125rem;
-  color: var(--cds-text-inverse, #ffffff);
-  font-weight: 400;
-  text-align: left;
-  transform: translateX(-50%);
-  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: none;
-  overflow: visible;
-  box-sizing: content-box;
-  margin: auto;
-  clip: auto;
-}
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .cds--copy-btn .cds--copy-btn__feedback {
-    width: auto;
-  }
+  width: max-content;
+  max-width: 23rem;
+  background-color: var(--cds-popover-background-color, var(--cds-layer));
+  border-radius: var(--cds-popover-border-radius, 2px);
+  color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
+  pointer-events: auto;
 }
-@supports (-ms-accelerator: true) {
-  .cds--copy-btn .cds--copy-btn__feedback {
-    width: auto;
-  }
+.cds--popover-content *,
+.cds--popover-content *::before,
+.cds--popover-content *::after {
+  box-sizing: inherit;
 }
-@supports (-ms-ime-align: auto) {
-  .cds--copy-btn .cds--copy-btn__feedback {
-    width: auto;
-  }
+
+.cds--popover--open > .cds--popover > .cds--popover-content {
+  display: block;
 }
-@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
-  .cds--copy-btn .cds--copy-btn__feedback {
-    border: 1px solid transparent;
-  }
+
+.cds--popover-content::before {
+  position: absolute;
+  display: none;
+  content: "";
 }
-.cds--copy-btn:focus {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
-  outline-color: var(--cds-focus, #0f62fe);
+
+.cds--popover--open > .cds--popover > .cds--popover-content::before {
+  display: block;
 }
-@media screen and (prefers-contrast) {
-  .cds--copy-btn:focus {
-    outline-style: dotted;
-  }
+
+.cds--popover-caret {
+  position: absolute;
+  z-index: 6000;
+  display: none;
+  background-color: var(--cds-popover-background-color, var(--cds-layer));
+  will-change: transform;
 }
-.cds--copy-btn.cds--copy-btn--animating::before, .cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback {
+
+.cds--popover--open > .cds--popover > .cds--popover-caret {
   display: block;
 }
-.cds--copy-btn.cds--copy-btn--animating::before {
-  border: none;
+
+.cds--popover--tab-tip > .cds--popover .cds--popover-caret {
+  display: none;
 }
-.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
+
+.cds--popover--bottom > .cds--popover .cds--popover-content {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
 }
-.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
+
+.cds--popover--bottom-left > .cds--popover .cds--popover-content {
+  bottom: 0;
+  left: 0;
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--copy {
-  font-size: 0;
+.cds--popover--bottom-right > .cds--popover .cds--popover-content {
+  right: 0;
+  bottom: 0;
+  transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--snippet html {
-  font-size: 100%;
+.cds--popover--bottom > .cds--popover .cds--popover-content::before,
+.cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
+.cds--popover--bottom-right > .cds--popover .cds--popover-content::before {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: var(--cds-popover-offset, 0rem);
+  transform: translateY(-100%);
 }
-.cds--snippet body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+
+.cds--popover--bottom > .cds--popover .cds--popover-caret,
+.cds--popover--bottom-left > .cds--popover .cds--popover-caret,
+.cds--popover--bottom-right > .cds--popover .cds--popover-caret {
+  bottom: 0;
+  left: 50%;
+  width: var(--cds-popover-caret-width, 0.75rem);
+  height: var(--cds-popover-caret-height, 0.375rem);
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  transform: translate(-50%, var(--cds-popover-offset, 0rem));
 }
-.cds--snippet code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+
+.cds--popover--top > .cds--popover .cds--popover-content {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
 }
-.cds--snippet strong {
-  font-weight: 600;
+
+.cds--popover--top-left > .cds--popover .cds--popover-content {
+  top: 0;
+  left: 0;
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--snippet--disabled,
-.cds--snippet--disabled .cds--btn.cds--snippet-btn--expand {
-  background-color: var(--cds-layer);
-  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+.cds--popover--top-right > .cds--popover .cds--popover-content {
+  top: 0;
+  right: 0;
+  transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--snippet--disabled .cds--snippet-btn--expand:hover,
-.cds--snippet--disabled .cds--copy-btn,
-.cds--snippet--disabled .cds--copy-btn:hover {
-  background-color: var(--cds-layer);
-  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
-  cursor: not-allowed;
+.cds--popover--top > .cds--popover .cds--popover-content::before,
+.cds--popover--top-left > .cds--popover .cds--popover-content::before,
+.cds--popover--top-right > .cds--popover .cds--popover-content::before {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--cds-popover-offset, 0rem);
+  transform: translateY(100%);
 }
 
-.cds--snippet--disabled .cds--snippet__icon,
-.cds--snippet--disabled .cds--snippet-btn--expand .cds--icon-chevron--down {
-  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+.cds--popover--top > .cds--popover .cds--popover-caret,
+.cds--popover--top-left > .cds--popover .cds--popover-caret,
+.cds--popover--top-right > .cds--popover .cds--popover-caret {
+  top: 0;
+  left: 50%;
+  width: var(--cds-popover-caret-width, 0.75rem);
+  height: var(--cds-popover-caret-height, 0.375rem);
+  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
 }
 
-.cds--snippet code {
-  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
-  font-size: var(--cds-code-01-font-size, 0.75rem);
-  font-weight: var(--cds-code-01-font-weight, 400);
-  line-height: var(--cds-code-01-line-height, 1.33333);
-  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
+.cds--popover--right > .cds--popover .cds--popover-content {
+  top: 50%;
+  left: 100%;
+  transform: translate(var(--cds-popover-offset, 0rem), -50%);
 }
 
-.cds--snippet--inline {
-  position: relative;
-  display: inline;
-  padding: 0;
-  border: 1px solid transparent;
-  background-color: var(--cds-layer);
-  border-radius: 4px;
-  color: var(--cds-text-primary, #161616);
-  cursor: pointer;
+.cds--popover--right-top > .cds--popover .cds--popover-content {
+  top: 50%;
+  left: 100%;
+  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
 }
-.cds--snippet--inline html {
-  font-size: 100%;
+
+.cds--popover--right-bottom > .cds--popover .cds--popover-content {
+  bottom: 50%;
+  left: 100%;
+  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
-.cds--snippet--inline body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+
+.cds--popover--right > .cds--popover .cds--popover-content::before,
+.cds--popover--right-top > .cds--popover .cds--popover-content::before,
+.cds--popover--right-bottom > .cds--popover .cds--popover-content::before {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--cds-popover-offset, 0rem);
+  transform: translateX(-100%);
 }
-.cds--snippet--inline code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+
+.cds--popover--right > .cds--popover .cds--popover-caret,
+.cds--popover--right-top > .cds--popover .cds--popover-caret,
+.cds--popover--right-bottom > .cds--popover .cds--popover-caret {
+  top: 50%;
+  left: 100%;
+  width: var(--cds-popover-caret-height, 0.375rem);
+  height: var(--cds-popover-caret-width, 0.75rem);
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
 }
-.cds--snippet--inline strong {
-  font-weight: 600;
+
+.cds--popover--left > .cds--popover .cds--popover-content {
+  top: 50%;
+  right: 100%;
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
 }
-.cds--snippet--inline:hover {
-  background-color: var(--cds-layer-hover);
+
+.cds--popover--left-top > .cds--popover .cds--popover-content {
+  top: -50%;
+  right: 100%;
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
-.cds--snippet--inline:active {
-  background-color: var(--cds-layer-active);
+
+.cds--popover--left-bottom > .cds--popover .cds--popover-content {
+  right: 100%;
+  bottom: -50%;
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
-.cds--snippet--inline:focus {
-  border: 1px solid var(--cds-focus, #0f62fe);
-  outline: none;
-}
-.cds--snippet--inline::before {
-  position: absolute;
-  z-index: 6000;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  content: "";
-  display: none;
-  border: none;
-}
-.cds--snippet--inline .cds--copy-btn__feedback {
-  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
-  z-index: 6000;
-  width: max-content;
-  min-width: 1.5rem;
-  max-width: 13rem;
-  height: auto;
-  padding: 0.1875rem 1rem;
-  background-color: var(--cds-background-inverse, #393939);
-  border-radius: 0.125rem;
-  color: var(--cds-text-inverse, #ffffff);
-  font-weight: 400;
-  text-align: left;
-  transform: translateX(-50%);
-  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: none;
-  overflow: visible;
-  box-sizing: content-box;
-  margin: auto;
-  clip: auto;
-}
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .cds--snippet--inline .cds--copy-btn__feedback {
-    width: auto;
-  }
-}
-@supports (-ms-accelerator: true) {
-  .cds--snippet--inline .cds--copy-btn__feedback {
-    width: auto;
-  }
-}
-@supports (-ms-ime-align: auto) {
-  .cds--snippet--inline .cds--copy-btn__feedback {
-    width: auto;
-  }
-}
-@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
-  .cds--snippet--inline .cds--copy-btn__feedback {
-    border: 1px solid transparent;
-  }
-}
-
-.cds--snippet--inline.cds--copy-btn--animating::before,
-.cds--snippet--inline.cds--copy-btn--animating .cds--copy-btn__feedback {
-  display: block;
+
+.cds--popover--left > .cds--popover .cds--popover-content::before,
+.cds--popover--left-top > .cds--popover .cds--popover-content::before,
+.cds--popover--left-bottom > .cds--popover .cds--popover-content::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--cds-popover-offset, 0rem);
+  transform: translateX(100%);
 }
 
-.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before,
-.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
+.cds--popover--left > .cds--popover .cds--popover-caret,
+.cds--popover--left-top > .cds--popover .cds--popover-caret,
+.cds--popover--left-bottom > .cds--popover .cds--popover-caret {
+  top: 50%;
+  right: 100%;
+  width: var(--cds-popover-caret-height, 0.375rem);
+  height: var(--cds-popover-caret-width, 0.75rem);
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
 }
 
-.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before,
-.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
+.cds--popover--tab-tip > .cds--popover .cds--popover-content {
+  border-radius: 0;
 }
 
-.cds--snippet--inline code {
-  padding: 0 0.5rem;
+.cds--popover--tab-tip .cds--popover {
+  will-change: filter;
 }
 
-.cds--snippet--inline.cds--snippet--no-copy {
+.cds--popover--tab-tip__button {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   display: inline-block;
-}
-.cds--snippet--inline.cds--snippet--no-copy:hover {
-  background-color: var(--cds-layer);
-  cursor: auto;
-}
-
-.cds--snippet--light.cds--snippet--inline.cds--snippet--no-copy:hover {
-  background-color: var(--cds-layer-hover);
-  cursor: auto;
-}
-
-.cds--snippet--single {
-  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
-  font-size: var(--cds-code-01-font-size, 0.75rem);
-  font-weight: var(--cds-code-01-font-weight, 400);
-  line-height: var(--cds-code-01-line-height, 1.33333);
-  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
-  position: relative;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
   width: 100%;
-  max-width: 48rem;
-  background-color: var(--cds-layer);
-  display: flex;
-  height: 2.5rem;
+  position: relative;
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
   align-items: center;
-  padding-right: 2.5rem;
-}
-
-.cds--snippet--single.cds--snippet--no-copy {
-  padding: 0;
+  justify-content: center;
 }
-.cds--snippet--single.cds--snippet--no-copy::after {
-  right: 1rem;
+.cds--popover--tab-tip__button *,
+.cds--popover--tab-tip__button *::before,
+.cds--popover--tab-tip__button *::after {
+  box-sizing: inherit;
 }
-
-.cds--snippet--single .cds--snippet-container {
-  position: relative;
-  display: flex;
-  height: 100%;
-  align-items: center;
-  padding-left: 1rem;
-  overflow-x: auto;
+.cds--popover--tab-tip__button::-moz-focus-inner {
+  border: 0;
 }
-.cds--snippet--single .cds--snippet-container:focus {
+.cds--popover--tab-tip__button:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .cds--snippet--single .cds--snippet-container:focus {
+  .cds--popover--tab-tip__button:focus {
     outline-style: dotted;
   }
 }
-
-.cds--snippet--single pre {
-  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
-  font-size: var(--cds-code-01-font-size, 0.75rem);
-  font-weight: var(--cds-code-01-font-weight, 400);
-  line-height: var(--cds-code-01-line-height, 1.33333);
-  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
-  padding-right: 0.5rem;
+.cds--popover--tab-tip__button:hover {
+  background-color: var(--cds-layer-hover);
 }
 
-.cds--snippet--single pre,
-.cds--snippet--inline code {
-  white-space: pre;
+.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
+  background: var(--cds-layer);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 }
 
-.cds--snippet--multi {
-  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
-  font-size: var(--cds-code-01-font-size, 0.75rem);
-  font-weight: var(--cds-code-01-font-weight, 400);
-  line-height: var(--cds-code-01-line-height, 1.33333);
-  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
-  position: relative;
+.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
+  position: absolute;
+  z-index: 6001;
+  bottom: 0;
   width: 100%;
-  max-width: 48rem;
-  background-color: var(--cds-layer);
-  display: flex;
-  padding: 1rem;
+  height: 2px;
+  background: var(--cds-layer);
+  content: "";
 }
 
-.cds--snippet--multi .cds--snippet-container {
-  position: relative;
-  min-height: 100%;
-  max-height: 100%;
-  order: 1;
-  overflow-y: auto;
-  transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-.cds--snippet--multi .cds--snippet-container:focus {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
-  outline-offset: 0;
-}
-@media screen and (prefers-contrast) {
-  .cds--snippet--multi .cds--snippet-container:focus {
-    outline-style: dotted;
-  }
+.cds--popover--tab-tip__button svg {
+  fill: var(--cds-icon-primary, #161616);
 }
 
-.cds--snippet--multi.cds--snippet--expand .cds--snippet-container {
-  padding-bottom: 1rem;
-  transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+.cds--tooltip {
+  --cds-popover-offset: 12px;
 }
 
-.cds--snippet--multi.cds--snippet--wraptext pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
+.cds--tooltip-content {
+  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);
+  max-width: 18rem;
+  padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
+  color: var(--cds-text-inverse, #ffffff);
 }
 
-.cds--snippet--multi .cds--snippet-container pre {
-  padding-right: 2.5rem;
-  padding-bottom: 1.5rem;
-  overflow-x: auto;
+.cds--icon-tooltip {
+  --cds-tooltip-padding-block: 0.125rem;
+  --cds-popover-caret-width: 0.5rem;
+  --cds-popover-caret-height: 0.25rem;
+  --cds-popover-offset: 0.5rem;
 }
 
-.cds--snippet--multi.cds--snippet--no-copy .cds--snippet-container pre {
-  padding-right: 0;
+.cds--icon-tooltip .cds--tooltip-content {
+  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);
 }
 
-.cds--snippet--multi.cds--snippet--expand .cds--snippet-container pre {
-  overflow-x: auto;
+.cds--definition-term {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  width: 100%;
+  border-bottom: 1px dotted var(--cds-border-strong);
+  border-radius: 0;
+  color: var(--cds-text-primary, #161616);
 }
-
-.cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 1rem;
-  height: 100%;
-  background-image: linear-gradient(to right, transparent, var(--cds-layer));
-  content: "";
+.cds--definition-term *,
+.cds--definition-term *::before,
+.cds--definition-term *::after {
+  box-sizing: inherit;
 }
-
-.cds--snippet--multi .cds--snippet-container pre code {
-  overflow: hidden;
-}
-
-.cds--snippet__icon {
-  width: 1rem;
-  height: 1rem;
-  fill: var(--cds-icon-primary, #161616);
-  transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-
-.cds--btn > .cds--snippet__icon {
-  margin-block-start: 0;
+.cds--definition-term::-moz-focus-inner {
+  border: 0;
 }
 
-.cds--copy-btn {
-  display: flex;
-  overflow: visible;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: none;
-  background-color: var(--cds-layer);
-  cursor: pointer;
-  outline: none;
-}
-.cds--copy-btn html {
-  font-size: 100%;
-}
-.cds--copy-btn body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-.cds--copy-btn code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
-}
-.cds--copy-btn strong {
-  font-weight: 600;
-}
-.cds--copy-btn:focus {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
-  outline-color: var(--cds-focus, #0f62fe);
+.cds--definition-term:focus {
+  outline: 1px solid var(--cds-focus, #0f62fe);
+  border-bottom-color: var(--cds-border-interactive, #0f62fe);
 }
 @media screen and (prefers-contrast) {
-  .cds--copy-btn:focus {
+  .cds--definition-term:focus {
     outline-style: dotted;
   }
 }
 
-.cds--snippet .cds--popover-container {
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.cds--snippet--inline.cds--btn {
-  width: initial;
-  height: 1.25rem;
-  padding-inline: 0;
-}
-
-.cds--snippet--inline.cds--btn.cds--btn--primary:hover {
-  color: var(--cds-text-primary, #161616);
-}
-
-.cds--snippet.cds--snippet--multi .cds--popover-container {
-  top: 0.5rem;
-  right: 0.5rem;
+.cds--definition-term:hover {
+  border-bottom-color: var(--cds-border-interactive, #0f62fe);
 }
 
-.cds--snippet--multi .cds--copy-btn {
-  z-index: 10;
+.cds--definition-tooltip {
+  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);
+  max-width: 11rem;
+  padding: 0.5rem 1rem;
 }
 
-.cds--snippet-btn--expand {
+.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-expressive-1lh: (
+    var(--cds-body-compact-02-line-height, 1.375) * 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;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   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);
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  position: absolute;
-  z-index: 10;
-  right: 0;
-  bottom: 0;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  border: 0;
-  background-color: var(--cds-layer);
-  color: var(--cds-text-primary, #161616);
-}
-
-.cds--snippet-btn--expand .cds--snippet-btn--text {
   position: relative;
-  top: -0.0625rem;
+  display: inline-flex;
+  width: max-content;
+  max-width: 20rem;
+  min-height: var(--cds-layout-size-height-local);
+  flex-shrink: 0;
+  justify-content: space-between;
+  margin: 0;
+  border-radius: 0;
+  cursor: pointer;
+  outline: none;
+  padding-block: 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);
+  vertical-align: top;
 }
-
-.cds--snippet-btn--expand--hide.cds--snippet-btn--expand {
-  display: none;
+.cds--btn *,
+.cds--btn *::before,
+.cds--btn *::after {
+  box-sizing: inherit;
 }
-
-.cds--snippet-btn--expand .cds--icon-chevron--down {
-  margin-left: 0.5rem;
-  fill: var(--cds-icon-primary, #161616);
-  transform: rotate(0deg);
-  transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+.cds--btn:disabled, .cds--btn:hover:disabled, .cds--btn:focus:disabled, .cds--btn.cds--btn--disabled, .cds--btn.cds--btn--disabled:hover, .cds--btn.cds--btn--disabled:focus {
+  border-color: var(--cds-button-disabled, #c6c6c6);
+  background: var(--cds-button-disabled, #c6c6c6);
+  box-shadow: none;
+  color: var(--cds-text-on-color-disabled, #8d8d8d);
+  cursor: not-allowed;
 }
-
-.cds--snippet-btn--expand:hover {
-  background: var(--cds-layer-hover);
-  color: var(--cds-text-primary, #161616);
+.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);
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-block-start: 0.0625rem;
 }
 
-.cds--snippet-btn--expand:active {
-  background-color: var(--cds-layer-active);
+.cds--btn::-moz-focus-inner {
+  padding: 0;
+  border: 0;
 }
 
-.cds--snippet-btn--expand:focus {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
+.cds--btn--primary {
+  border-width: 1px;
+  border-style: solid;
   border-color: transparent;
+  background-color: var(--cds-button-primary, #0f62fe);
+  color: var(--cds-text-on-color, #ffffff);
 }
-@media screen and (prefers-contrast) {
-  .cds--snippet-btn--expand:focus {
-    outline-style: dotted;
-  }
+.cds--btn--primary:hover {
+  background-color: var(--cds-button-primary-hover, #0050e6);
 }
-
-.cds--snippet--expand .cds--snippet-btn--expand .cds--icon-chevron--down {
-  transform: rotate(180deg);
-  transition: transform 300ms;
+.cds--btn--primary:focus {
+  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
+  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
-
-.cds--snippet--light,
-.cds--snippet--light .cds--snippet-button,
-.cds--snippet--light .cds--btn.cds--snippet-btn--expand,
-.cds--snippet--light .cds--copy-btn {
-  background-color: var(--cds-layer);
+.cds--btn--primary:active {
+  background-color: var(--cds-button-primary-active, #002d9c);
 }
-
-.cds--snippet--light.cds--snippet--inline:hover,
-.cds--snippet--light .cds--snippet-button:hover,
-.cds--snippet--light .cds--btn.cds--snippet-btn--expand:hover,
-.cds--snippet--light .cds--copy-btn:hover {
-  background-color: var(--cds-layer-hover);
+.cds--btn--primary .cds--btn__icon,
+.cds--btn--primary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
+  fill: currentColor;
 }
-
-.cds--snippet--light.cds--snippet--inline:active,
-.cds--snippet--light .cds--snippet-button:active,
-.cds--snippet--light .cds--btn.cds--snippet-btn--expand:active,
-.cds--snippet--light .cds--copy-btn:active {
-  background-color: var(--cds-layer-active);
+.cds--btn--primary:hover {
+  color: var(--cds-text-on-color, #ffffff);
 }
 
-.cds--snippet--light.cds--snippet--single::after,
-.cds--snippet--light.cds--snippet--multi .cds--snippet-container pre::after {
-  background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
+.cds--btn--secondary {
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  background-color: var(--cds-button-secondary, #393939);
+  color: var(--cds-text-on-color, #ffffff);
 }
-
-.cds--snippet.cds--skeleton .cds--snippet-container {
-  width: 100%;
-  height: 100%;
+.cds--btn--secondary:hover {
+  background-color: var(--cds-button-secondary-hover, #474747);
 }
-
-.cds--snippet-button .cds--btn--copy__feedback {
-  top: 3.175rem;
-  right: auto;
-  left: 50%;
+.cds--btn--secondary:focus {
+  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
+  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
-.cds--snippet-button .cds--btn--copy__feedback::before {
-  top: 0;
+.cds--btn--secondary:active {
+  background-color: var(--cds-button-secondary-active, #6f6f6f);
 }
-.cds--snippet-button .cds--btn--copy__feedback::after {
-  top: -0.25rem;
+.cds--btn--secondary .cds--btn__icon,
+.cds--btn--secondary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
+  fill: currentColor;
 }
-
-.cds--snippet--multi .cds--snippet-button .cds--btn--copy__feedback {
-  top: 2.675rem;
+.cds--btn--secondary:hover, .cds--btn--secondary:focus {
+  color: var(--cds-text-on-color, #ffffff);
 }
 
-.cds--snippet--inline .cds--btn--copy__feedback {
-  top: calc(100% - 0.25rem);
-  right: auto;
-  left: 50%;
-}
-
-.cds--snippet__overflow-indicator--left,
-.cds--snippet__overflow-indicator--right {
-  z-index: 1;
-  width: 1rem;
-  flex: 1 0 auto;
-}
-
-.cds--snippet__overflow-indicator--left {
-  order: 0;
-  margin-right: -1rem;
-  background-image: linear-gradient(to left, transparent, var(--cds-layer));
+.cds--btn--tertiary {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--cds-button-tertiary, #0f62fe);
+  background-color: transparent;
+  color: var(--cds-button-tertiary, #0f62fe);
 }
-
-.cds--snippet__overflow-indicator--right {
-  order: 2;
-  margin-left: -1rem;
-  background-image: linear-gradient(to right, transparent, var(--cds-layer));
+.cds--btn--tertiary:hover {
+  background-color: var(--cds-button-tertiary-hover, #0050e6);
 }
-
-.cds--snippet--single .cds--snippet__overflow-indicator--right,
-.cds--snippet--single .cds--snippet__overflow-indicator--left {
-  position: absolute;
-  width: 2rem;
-  height: calc(100% - 0.25rem);
+.cds--btn--tertiary:focus {
+  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
+  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
-
-.cds--snippet--single .cds--snippet__overflow-indicator--right {
-  right: 2.5rem;
+.cds--btn--tertiary:active {
+  background-color: var(--cds-button-tertiary-active, #002d9c);
 }
-
-.cds--snippet--single.cds--snippet--no-copy .cds--snippet__overflow-indicator--right {
-  right: 0;
+.cds--btn--tertiary .cds--btn__icon,
+.cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
+  fill: currentColor;
 }
-
-.cds--snippet--single .cds--snippet-container:focus ~ .cds--snippet__overflow-indicator--right {
-  right: calc(2.5rem + 0.125rem);
+.cds--btn--tertiary:hover {
+  color: var(--cds-text-inverse, #ffffff);
 }
-
-.cds--snippet--single .cds--snippet-container:focus + .cds--snippet__overflow-indicator--left {
-  left: 0.125rem;
+.cds--btn--tertiary:focus {
+  background-color: var(--cds-button-tertiary, #0f62fe);
+  color: var(--cds-text-inverse, #ffffff);
 }
-
-.cds--snippet--light .cds--snippet__overflow-indicator--left {
-  background-image: linear-gradient(to left, transparent, var(--cds-layer));
+.cds--btn--tertiary:active {
+  border-color: transparent;
+  background-color: var(--cds-button-tertiary-active, #002d9c);
+  color: var(--cds-text-inverse, #ffffff);
 }
-
-.cds--snippet--light .cds--snippet__overflow-indicator--right {
-  background-image: linear-gradient(to right, transparent, var(--cds-layer));
+.cds--btn--tertiary:disabled, .cds--btn--tertiary:hover:disabled, .cds--btn--tertiary:focus:disabled, .cds--btn--tertiary.cds--btn--disabled, .cds--btn--tertiary.cds--btn--disabled:hover, .cds--btn--tertiary.cds--btn--disabled:focus {
+  background: transparent;
+  color: var(--cds-text-on-color-disabled, #8d8d8d);
+  outline: none;
 }
 
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .cds--snippet__overflow-indicator--left {
-      background-image: linear-gradient(to left, rgba(var(--cds-layer), 0), var(--cds-layer));
-    }
-    .cds--snippet__overflow-indicator--right {
-      background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
-    }
-  }
+.cds--btn--ghost {
+  border-width: 1px;
+  border-style: solid;
+  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);
 }
-.cds--snippet--multi.cds--skeleton {
-  height: 6.125rem;
+.cds--btn--ghost:hover {
+  background-color: var(--cds-layer-hover);
 }
-
-.cds--snippet--single.cds--skeleton {
-  height: 3.5rem;
+.cds--btn--ghost:focus {
+  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
+  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
-
-.cds--snippet.cds--skeleton span {
-  position: relative;
-  padding: 0;
-  border: none;
-  background: var(--cds-skeleton-background, #e8e8e8);
-  box-shadow: none;
-  pointer-events: none;
-  display: block;
-  width: 100%;
-  height: 1rem;
-  margin-top: 0.5rem;
+.cds--btn--ghost:active {
+  background-color: var(--cds-layer-active);
 }
-.cds--snippet.cds--skeleton span:hover, .cds--snippet.cds--skeleton span:focus, .cds--snippet.cds--skeleton span:active {
-  border: none;
-  cursor: default;
-  outline: none;
+.cds--btn--ghost .cds--btn__icon,
+.cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
+  fill: currentColor;
 }
-.cds--snippet.cds--skeleton span::before {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  animation: 3000ms ease-in-out skeleton infinite;
-  background: var(--cds-skeleton-element, #c6c6c6);
-  content: "";
-  will-change: transform-origin, transform, opacity;
+.cds--btn--ghost .cds--btn__icon {
+  position: static;
+  margin-left: 0.5rem;
 }
-@media (prefers-reduced-motion: reduce) {
-  .cds--snippet.cds--skeleton span::before {
-    animation: none;
-  }
+.cds--btn--ghost:hover, .cds--btn--ghost:active {
+  color: var(--cds-link-primary-hover, #0043ce);
 }
-.cds--snippet.cds--skeleton span:first-child {
-  margin: 0;
+.cds--btn--ghost:active {
+  background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
 }
-.cds--snippet.cds--skeleton span:nth-child(2) {
-  width: 85%;
+.cds--btn--ghost:disabled, .cds--btn--ghost:hover:disabled, .cds--btn--ghost:focus:disabled, .cds--btn--ghost.cds--btn--disabled, .cds--btn--ghost.cds--btn--disabled:hover, .cds--btn--ghost.cds--btn--disabled:focus {
+  border-color: transparent;
+  background: transparent;
+  color: var(--cds-text-on-color-disabled, #8d8d8d);
+  outline: none;
 }
-.cds--snippet.cds--skeleton span:nth-child(3) {
-  width: 95%;
+.cds--btn--ghost:not([disabled]) svg {
+  fill: var(--cds-icon-primary, #161616);
 }
 
-.cds--snippet--single.cds--skeleton .cds--snippet-container {
-  padding-bottom: 0;
+.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));
 }
-
-/* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--snippet__icon {
-    fill: ButtonText;
-  }
+.cds--btn--icon-only > :first-child {
+  min-width: 1rem;
+  margin-block-start: 0.0625rem;
 }
-
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--snippet--inline:focus {
-    color: Highlight;
-    outline: 1px solid Highlight;
-  }
+.cds--btn--icon-only .cds--btn__icon {
+  position: static;
 }
-
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--snippet--single,
-  .cds--snippet--multi {
-    outline: 1px solid transparent;
-  }
+.cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon {
+  margin: 0;
 }
 
-/* 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--btn--icon-only.cds--btn--selected {
+  background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
 }
 
-.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--btn path[data-icon-path=inner-path] {
+  fill: none;
 }
 
-.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--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
+.cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
+  fill: var(--cds-icon-primary, #161616);
 }
 
-.cds--layout-constraint--size__min-xs {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
+.cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
+.cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon,
+.cds--btn.cds--btn--icon-only.cds--btn--ghost[disabled]:hover .cds--btn__icon {
+  fill: var(--cds-icon-on-color-disabled, #8d8d8d);
 }
 
-.cds--layout-constraint--size__max-xs {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
+.cds--btn--ghost.cds--btn--icon-only[disabled] {
+  cursor: not-allowed;
 }
 
-.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--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
+  cursor: not-allowed;
 }
 
-.cds--layout-constraint--size__default-sm {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
+.cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
+  pointer-events: none;
 }
 
-.cds--layout-constraint--size__min-sm {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
+.cds--btn--danger {
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  background-color: var(--cds-button-danger-primary, #da1e28);
+  color: var(--cds-text-on-color, #ffffff);
 }
-
-.cds--layout-constraint--size__max-sm {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
+.cds--btn--danger:hover {
+  background-color: var(--cds-button-danger-hover, #b81921);
 }
-
-.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--btn--danger:focus {
+  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
+  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
-
-.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--btn--danger:active {
+  background-color: var(--cds-button-danger-active, #750e13);
 }
-
-.cds--layout-constraint--size__min-md {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
+.cds--btn--danger .cds--btn__icon,
+.cds--btn--danger .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
+  fill: currentColor;
 }
-
-.cds--layout-constraint--size__max-md {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
+.cds--btn--danger:hover {
+  color: var(--cds-text-on-color, #ffffff);
 }
-
-.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--btn--danger--tertiary {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--cds-button-danger-secondary, #da1e28);
+  background-color: transparent;
+  color: var(--cds-button-danger-secondary, #da1e28);
 }
-
-.cds--layout-constraint--size__default-lg {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
+.cds--btn--danger--tertiary:hover {
+  background-color: var(--cds-button-danger-hover, #b81921);
 }
-
-.cds--layout-constraint--size__min-lg {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
+.cds--btn--danger--tertiary:focus {
+  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
+  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
-
-.cds--layout-constraint--size__max-lg {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
+.cds--btn--danger--tertiary:active {
+  background-color: var(--cds-button-danger-active, #750e13);
 }
-
-.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--btn--danger--tertiary .cds--btn__icon,
+.cds--btn--danger--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
+  fill: currentColor;
 }
-
-.cds--layout-constraint--size__default-xl {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
+.cds--btn--danger--tertiary:hover {
+  border-color: var(--cds-button-danger-hover, #b81921);
+  color: var(--cds-text-on-color, #ffffff);
 }
-
-.cds--layout-constraint--size__min-xl {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
+.cds--btn--danger--tertiary:focus {
+  background-color: var(--cds-button-danger-primary, #da1e28);
+  color: var(--cds-text-on-color, #ffffff);
 }
-
-.cds--layout-constraint--size__max-xl {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
+.cds--btn--danger--tertiary:active {
+  border-color: var(--cds-button-danger-active, #750e13);
+  background-color: var(--cds-button-danger-active, #750e13);
+  color: var(--cds-text-on-color, #ffffff);
 }
-
-.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--btn--danger--tertiary:disabled, .cds--btn--danger--tertiary:hover:disabled, .cds--btn--danger--tertiary:focus:disabled, .cds--btn--danger--tertiary.cds--btn--disabled, .cds--btn--danger--tertiary.cds--btn--disabled:hover, .cds--btn--danger--tertiary.cds--btn--disabled:focus {
+  background: transparent;
+  color: var(--cds-text-on-color-disabled, #8d8d8d);
+  outline: none;
 }
-
-.cds--layout-constraint--size__default-2xl {
-  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
+.cds--btn--danger--ghost {
+  border-width: 1px;
+  border-style: solid;
+  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);
 }
-
-.cds--layout-constraint--size__min-2xl {
-  --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
+.cds--btn--danger--ghost:hover {
+  background-color: var(--cds-button-danger-hover, #b81921);
 }
-
-.cds--layout-constraint--size__max-2xl {
-  --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
+.cds--btn--danger--ghost:focus {
+  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
+  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
-
-.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--btn--danger--ghost:active {
+  background-color: var(--cds-button-danger-active, #750e13);
 }
-
-.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--btn--danger--ghost .cds--btn__icon,
+.cds--btn--danger--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
+  fill: currentColor;
 }
-
-.cds--layout-constraint--density__min-condensed {
-  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+.cds--btn--danger--ghost .cds--btn__icon {
+  position: static;
+  margin-left: 0.5rem;
 }
-
-.cds--layout-constraint--density__max-condensed {
-  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+.cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active {
+  color: var(--cds-text-on-color, #ffffff);
 }
-
-.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--btn--danger--ghost:disabled, .cds--btn--danger--ghost:hover:disabled, .cds--btn--danger--ghost:focus:disabled, .cds--btn--danger--ghost.cds--btn--disabled, .cds--btn--danger--ghost.cds--btn--disabled:hover, .cds--btn--danger--ghost.cds--btn--disabled:focus {
+  border-color: transparent;
+  background: transparent;
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  outline: none;
 }
 
-.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--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);
+  padding-block: min((var(--cds-layout-size-height-local) - var(--temp-expressive-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
 }
 
-.cds--layout-constraint--density__min-normal {
-  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
+.cds--btn--icon-only.cds--btn--expressive {
+  padding: 12px 13px;
 }
 
-.cds--layout-constraint--density__max-normal {
-  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
+.cds--btn.cds--btn--expressive .cds--btn__icon {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
-.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;
-  margin: 0;
-  font-family: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  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: relative;
-  display: inline-flex;
-  width: max-content;
+.cds--btn-set .cds--btn.cds--btn--expressive {
   max-width: 20rem;
-  height: var(--cds-layout-size-height-local);
-  flex-shrink: 0;
-  justify-content: space-between;
-  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);
-  vertical-align: top;
-}
-.cds--btn *,
-.cds--btn *::before,
-.cds--btn *::after {
-  box-sizing: inherit;
 }
-.cds--btn:disabled, .cds--btn:hover:disabled, .cds--btn:focus:disabled, .cds--btn.cds--btn--disabled, .cds--btn.cds--btn--disabled:hover, .cds--btn.cds--btn--disabled:focus {
-  border-color: var(--cds-button-disabled, #c6c6c6);
-  background: var(--cds-button-disabled, #c6c6c6);
+
+.cds--btn.cds--skeleton {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: var(--cds-skeleton-background, #e8e8e8);
   box-shadow: none;
-  color: var(--cds-text-on-color-disabled, #8d8d8d);
-  cursor: not-allowed;
+  pointer-events: none;
+  width: 9.375rem;
 }
-.cds--btn .cds--btn__icon {
+.cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
+  border: none;
+  cursor: default;
+  outline: none;
+}
+.cds--btn.cds--skeleton::before {
   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);
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  margin-block-start: 0.0625rem;
+  width: 100%;
+  height: 100%;
+  animation: 3000ms ease-in-out skeleton infinite;
+  background: var(--cds-skeleton-element, #c6c6c6);
+  content: "";
+  will-change: transform-origin, transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cds--btn.cds--skeleton::before {
+    animation: none;
+  }
 }
 
-.cds--btn::-moz-focus-inner {
-  padding: 0;
-  border: 0;
+.cds--btn-set {
+  display: flex;
 }
 
-.cds--btn--primary {
-  border-width: 1px;
-  border-style: solid;
-  border-color: transparent;
-  background-color: var(--cds-button-primary, #0f62fe);
-  color: var(--cds-text-on-color, #ffffff);
+.cds--btn-set--stacked {
+  flex-direction: column;
 }
-.cds--btn--primary:hover {
-  background-color: var(--cds-button-primary-hover, #0050e6);
+
+.cds--btn-set .cds--btn {
+  width: 100%;
+  max-width: 12.25rem;
 }
-.cds--btn--primary:focus {
-  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
-  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
+.cds--btn-set .cds--btn:not(:focus) {
+  box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
 }
-.cds--btn--primary:active {
-  background-color: var(--cds-button-primary-active, #002d9c);
+.cds--btn-set .cds--btn:first-of-type:not(:focus) {
+  box-shadow: inherit;
 }
-.cds--btn--primary .cds--btn__icon,
-.cds--btn--primary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
-  fill: currentColor;
+
+.cds--btn-set .cds--btn:focus + .cds--btn {
+  box-shadow: inherit;
 }
-.cds--btn--primary:hover {
-  color: var(--cds-text-on-color, #ffffff);
+
+.cds--btn-set--stacked .cds--btn:not(:focus) {
+  box-shadow: 0 -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0);
 }
 
-.cds--btn--secondary {
-  border-width: 1px;
+.cds--btn-set--stacked .cds--btn:first-of-type:not(:focus) {
+  box-shadow: inherit;
+}
+
+.cds--btn-set .cds--btn.cds--btn--disabled {
+  box-shadow: -0.0625rem 0 0 0 var(--cds-icon-on-color-disabled, #8d8d8d);
+}
+.cds--btn-set .cds--btn.cds--btn--disabled:first-of-type {
+  box-shadow: none;
+}
+
+.cds--btn-set--stacked .cds--btn.cds--btn--disabled {
+  box-shadow: 0 -0.0625rem 0 0 var(--cds-layer-selected-disabled, #8d8d8d);
+}
+.cds--btn-set--stacked .cds--btn.cds--btn--disabled:first-of-type {
+  box-shadow: none;
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--btn:focus {
+    color: Highlight;
+    outline: 1px solid Highlight;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
+  .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
+    fill: ButtonText;
+  }
+}
+
+.cds--copy-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background-color: var(--cds-layer);
+  cursor: pointer;
+}
+.cds--copy-btn html {
+  font-size: 100%;
+}
+.cds--copy-btn body {
+  font-weight: 400;
+  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+.cds--copy-btn code {
+  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+}
+.cds--copy-btn strong {
+  font-weight: 600;
+}
+.cds--copy-btn:hover {
+  background-color: var(--cds-layer-hover);
+}
+.cds--copy-btn:active {
+  background-color: var(--cds-layer-active);
+}
+.cds--copy-btn::before {
+  position: absolute;
+  z-index: 6000;
+  width: 0;
+  height: 0;
   border-style: solid;
-  border-color: transparent;
-  background-color: var(--cds-button-secondary, #393939);
-  color: var(--cds-text-on-color, #ffffff);
+  content: "";
+  display: none;
 }
-.cds--btn--secondary:hover {
-  background-color: var(--cds-button-secondary-hover, #474747);
+.cds--copy-btn .cds--copy-btn__feedback {
+  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
+  z-index: 6000;
+  width: max-content;
+  min-width: 1.5rem;
+  max-width: 13rem;
+  height: auto;
+  padding: 0.1875rem 1rem;
+  background-color: var(--cds-background-inverse, #393939);
+  border-radius: 0.125rem;
+  color: var(--cds-text-inverse, #ffffff);
+  font-weight: 400;
+  text-align: left;
+  transform: translateX(-50%);
+  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: none;
+  overflow: visible;
+  box-sizing: content-box;
+  margin: auto;
+  clip: auto;
 }
-.cds--btn--secondary:focus {
-  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
-  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .cds--copy-btn .cds--copy-btn__feedback {
+    width: auto;
+  }
 }
-.cds--btn--secondary:active {
-  background-color: var(--cds-button-secondary-active, #6f6f6f);
+@supports (-ms-accelerator: true) {
+  .cds--copy-btn .cds--copy-btn__feedback {
+    width: auto;
+  }
 }
-.cds--btn--secondary .cds--btn__icon,
-.cds--btn--secondary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
-  fill: currentColor;
+@supports (-ms-ime-align: auto) {
+  .cds--copy-btn .cds--copy-btn__feedback {
+    width: auto;
+  }
 }
-.cds--btn--secondary:hover, .cds--btn--secondary:focus {
-  color: var(--cds-text-on-color, #ffffff);
+@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
+  .cds--copy-btn .cds--copy-btn__feedback {
+    border: 1px solid transparent;
+  }
+}
+.cds--copy-btn:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  outline-color: var(--cds-focus, #0f62fe);
+}
+@media screen and (prefers-contrast) {
+  .cds--copy-btn:focus {
+    outline-style: dotted;
+  }
+}
+.cds--copy-btn.cds--copy-btn--animating::before, .cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback {
+  display: block;
+}
+.cds--copy-btn.cds--copy-btn--animating::before {
+  border: none;
+}
+.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
+  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
+}
+.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
+  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
 }
 
-.cds--btn--tertiary {
-  border-width: 1px;
+.cds--copy-btn svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--copy {
+  font-size: 0;
+}
+
+.cds--snippet html {
+  font-size: 100%;
+}
+.cds--snippet body {
+  font-weight: 400;
+  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+.cds--snippet code {
+  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+}
+.cds--snippet strong {
+  font-weight: 600;
+}
+
+.cds--snippet--disabled,
+.cds--snippet--disabled .cds--btn.cds--snippet-btn--expand {
+  background-color: var(--cds-layer);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--snippet--disabled .cds--snippet-btn--expand:hover,
+.cds--snippet--disabled .cds--copy-btn,
+.cds--snippet--disabled .cds--copy-btn:hover {
+  background-color: var(--cds-layer);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  cursor: not-allowed;
+}
+
+.cds--snippet--disabled .cds--snippet__icon,
+.cds--snippet--disabled .cds--snippet-btn--expand .cds--icon-chevron--down {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--snippet code {
+  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
+  font-size: var(--cds-code-01-font-size, 0.75rem);
+  font-weight: var(--cds-code-01-font-weight, 400);
+  line-height: var(--cds-code-01-line-height, 1.33333);
+  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
+}
+
+.cds--snippet--inline {
+  position: relative;
+  display: inline;
+  padding: 0;
+  border: 1px solid transparent;
+  background-color: var(--cds-layer);
+  border-radius: 4px;
+  color: var(--cds-text-primary, #161616);
+  cursor: pointer;
+}
+.cds--snippet--inline html {
+  font-size: 100%;
+}
+.cds--snippet--inline body {
+  font-weight: 400;
+  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+.cds--snippet--inline code {
+  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+}
+.cds--snippet--inline strong {
+  font-weight: 600;
+}
+.cds--snippet--inline:hover {
+  background-color: var(--cds-layer-hover);
+}
+.cds--snippet--inline:active {
+  background-color: var(--cds-layer-active);
+}
+.cds--snippet--inline:focus {
+  border: 1px solid var(--cds-focus, #0f62fe);
+  outline: none;
+}
+.cds--snippet--inline::before {
+  position: absolute;
+  z-index: 6000;
+  width: 0;
+  height: 0;
   border-style: solid;
-  border-color: var(--cds-button-tertiary, #0f62fe);
-  background-color: transparent;
-  color: var(--cds-button-tertiary, #0f62fe);
+  content: "";
+  display: none;
+  border: none;
+}
+.cds--snippet--inline .cds--copy-btn__feedback {
+  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
+  z-index: 6000;
+  width: max-content;
+  min-width: 1.5rem;
+  max-width: 13rem;
+  height: auto;
+  padding: 0.1875rem 1rem;
+  background-color: var(--cds-background-inverse, #393939);
+  border-radius: 0.125rem;
+  color: var(--cds-text-inverse, #ffffff);
+  font-weight: 400;
+  text-align: left;
+  transform: translateX(-50%);
+  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: none;
+  overflow: visible;
+  box-sizing: content-box;
+  margin: auto;
+  clip: auto;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .cds--snippet--inline .cds--copy-btn__feedback {
+    width: auto;
+  }
+}
+@supports (-ms-accelerator: true) {
+  .cds--snippet--inline .cds--copy-btn__feedback {
+    width: auto;
+  }
+}
+@supports (-ms-ime-align: auto) {
+  .cds--snippet--inline .cds--copy-btn__feedback {
+    width: auto;
+  }
+}
+@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
+  .cds--snippet--inline .cds--copy-btn__feedback {
+    border: 1px solid transparent;
+  }
+}
+
+.cds--snippet--inline.cds--copy-btn--animating::before,
+.cds--snippet--inline.cds--copy-btn--animating .cds--copy-btn__feedback {
+  display: block;
+}
+
+.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before,
+.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
+  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
+}
+
+.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before,
+.cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
+  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
+}
+
+.cds--snippet--inline code {
+  padding: 0 0.5rem;
+}
+
+.cds--snippet--inline.cds--snippet--no-copy {
+  display: inline-block;
+}
+.cds--snippet--inline.cds--snippet--no-copy:hover {
+  background-color: var(--cds-layer);
+  cursor: auto;
+}
+
+.cds--snippet--light.cds--snippet--inline.cds--snippet--no-copy:hover {
+  background-color: var(--cds-layer-hover);
+  cursor: auto;
+}
+
+.cds--snippet--single {
+  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
+  font-size: var(--cds-code-01-font-size, 0.75rem);
+  font-weight: var(--cds-code-01-font-weight, 400);
+  line-height: var(--cds-code-01-line-height, 1.33333);
+  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
+  position: relative;
+  width: 100%;
+  max-width: 48rem;
+  background-color: var(--cds-layer);
+  display: flex;
+  height: 2.5rem;
+  align-items: center;
+  padding-right: 2.5rem;
+}
+
+.cds--snippet--single.cds--snippet--no-copy {
+  padding: 0;
+}
+.cds--snippet--single.cds--snippet--no-copy::after {
+  right: 1rem;
+}
+
+.cds--snippet--single .cds--snippet-container {
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-left: 1rem;
+  overflow-x: auto;
+}
+.cds--snippet--single .cds--snippet-container:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--snippet--single .cds--snippet-container:focus {
+    outline-style: dotted;
+  }
+}
+
+.cds--snippet--single pre {
+  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
+  font-size: var(--cds-code-01-font-size, 0.75rem);
+  font-weight: var(--cds-code-01-font-weight, 400);
+  line-height: var(--cds-code-01-line-height, 1.33333);
+  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
+  padding-right: 0.5rem;
+}
+
+.cds--snippet--single pre,
+.cds--snippet--inline code {
+  white-space: pre;
+}
+
+.cds--snippet--multi {
+  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
+  font-size: var(--cds-code-01-font-size, 0.75rem);
+  font-weight: var(--cds-code-01-font-weight, 400);
+  line-height: var(--cds-code-01-line-height, 1.33333);
+  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
+  position: relative;
+  width: 100%;
+  max-width: 48rem;
+  background-color: var(--cds-layer);
+  display: flex;
+  padding: 1rem;
+}
+
+.cds--snippet--multi .cds--snippet-container {
+  position: relative;
+  min-height: 100%;
+  max-height: 100%;
+  order: 1;
+  overflow-y: auto;
+  transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--btn--tertiary:hover {
-  background-color: var(--cds-button-tertiary-hover, #0050e6);
+.cds--snippet--multi .cds--snippet-container:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  outline-offset: 0;
 }
-.cds--btn--tertiary:focus {
-  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
-  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
+@media screen and (prefers-contrast) {
+  .cds--snippet--multi .cds--snippet-container:focus {
+    outline-style: dotted;
+  }
 }
-.cds--btn--tertiary:active {
-  background-color: var(--cds-button-tertiary-active, #002d9c);
+
+.cds--snippet--multi.cds--snippet--expand .cds--snippet-container {
+  padding-bottom: 1rem;
+  transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--btn--tertiary .cds--btn__icon,
-.cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
-  fill: currentColor;
+
+.cds--snippet--multi.cds--snippet--wraptext pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
-.cds--btn--tertiary:hover {
-  color: var(--cds-text-inverse, #ffffff);
+
+.cds--snippet--multi .cds--snippet-container pre {
+  padding-right: 2.5rem;
+  padding-bottom: 1.5rem;
+  overflow-x: auto;
 }
-.cds--btn--tertiary:focus {
-  background-color: var(--cds-button-tertiary, #0f62fe);
-  color: var(--cds-text-inverse, #ffffff);
+
+.cds--snippet--multi.cds--snippet--no-copy .cds--snippet-container pre {
+  padding-right: 0;
 }
-.cds--btn--tertiary:active {
-  border-color: transparent;
-  background-color: var(--cds-button-tertiary-active, #002d9c);
-  color: var(--cds-text-inverse, #ffffff);
+
+.cds--snippet--multi.cds--snippet--expand .cds--snippet-container pre {
+  overflow-x: auto;
 }
-.cds--btn--tertiary:disabled, .cds--btn--tertiary:hover:disabled, .cds--btn--tertiary:focus:disabled, .cds--btn--tertiary.cds--btn--disabled, .cds--btn--tertiary.cds--btn--disabled:hover, .cds--btn--tertiary.cds--btn--disabled:focus {
-  background: transparent;
-  color: var(--cds-text-on-color-disabled, #8d8d8d);
-  outline: none;
+
+.cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1rem;
+  height: 100%;
+  background-image: linear-gradient(to right, transparent, var(--cds-layer));
+  content: "";
 }
 
-.cds--btn--ghost {
-  border-width: 1px;
-  border-style: solid;
-  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);
+.cds--snippet--multi .cds--snippet-container pre code {
+  overflow: hidden;
 }
-.cds--btn--ghost:hover {
-  background-color: var(--cds-layer-hover);
+
+.cds--snippet__icon {
+  width: 1rem;
+  height: 1rem;
+  fill: var(--cds-icon-primary, #161616);
+  transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--btn--ghost:focus {
-  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
-  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
+
+.cds--btn > .cds--snippet__icon {
+  margin-block-start: 0;
 }
-.cds--btn--ghost:active {
-  background-color: var(--cds-layer-active);
+
+.cds--copy-btn {
+  display: flex;
+  overflow: visible;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background-color: var(--cds-layer);
+  cursor: pointer;
+  outline: none;
 }
-.cds--btn--ghost .cds--btn__icon,
-.cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
-  fill: currentColor;
+.cds--copy-btn html {
+  font-size: 100%;
 }
-.cds--btn--ghost .cds--btn__icon {
-  position: static;
-  margin-left: 0.5rem;
+.cds--copy-btn body {
+  font-weight: 400;
+  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
-.cds--btn--ghost:hover, .cds--btn--ghost:active {
-  color: var(--cds-link-primary-hover, #0043ce);
+.cds--copy-btn code {
+  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
 }
-.cds--btn--ghost:active {
-  background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
+.cds--copy-btn strong {
+  font-weight: 600;
 }
-.cds--btn--ghost:disabled, .cds--btn--ghost:hover:disabled, .cds--btn--ghost:focus:disabled, .cds--btn--ghost.cds--btn--disabled, .cds--btn--ghost.cds--btn--disabled:hover, .cds--btn--ghost.cds--btn--disabled:focus {
-  border-color: transparent;
-  background: transparent;
-  color: var(--cds-text-on-color-disabled, #8d8d8d);
-  outline: none;
+.cds--copy-btn:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  outline-color: var(--cds-focus, #0f62fe);
 }
-.cds--btn--ghost:not([disabled]) svg {
-  fill: var(--cds-icon-primary, #161616);
+@media screen and (prefers-contrast) {
+  .cds--copy-btn:focus {
+    outline-style: dotted;
+  }
 }
 
-.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--snippet .cds--popover-container {
+  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
-.cds--btn--icon-only > :first-child {
-  min-width: 1rem;
-  margin-block-start: 0.0625rem;
+
+.cds--snippet--inline.cds--btn {
+  width: initial;
+  height: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0;
 }
-.cds--btn--icon-only .cds--btn__icon {
-  position: static;
+
+.cds--snippet--inline.cds--btn.cds--btn--primary:hover {
+  color: var(--cds-text-primary, #161616);
 }
-.cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon {
-  margin: 0;
+
+.cds--snippet.cds--snippet--multi .cds--popover-container {
+  top: 0.5rem;
+  right: 0.5rem;
 }
 
-.cds--btn--icon-only.cds--btn--selected {
-  background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
+.cds--snippet--multi .cds--copy-btn {
+  z-index: 10;
 }
 
-.cds--btn path[data-icon-path=inner-path] {
-  fill: none;
+.cds--snippet-btn--expand {
+  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);
+  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+  display: inline-flex;
+  height: 2rem;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border: 0;
+  background-color: var(--cds-layer);
+  color: var(--cds-text-primary, #161616);
 }
 
-.cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
-.cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
-  fill: var(--cds-icon-primary, #161616);
+.cds--snippet-btn--expand .cds--snippet-btn--text {
+  position: relative;
+  top: -0.0625rem;
 }
 
-.cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
-.cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon,
-.cds--btn.cds--btn--icon-only.cds--btn--ghost[disabled]:hover .cds--btn__icon {
-  fill: var(--cds-icon-on-color-disabled, #8d8d8d);
+.cds--snippet-btn--expand--hide.cds--snippet-btn--expand {
+  display: none;
 }
 
-.cds--btn--ghost.cds--btn--icon-only[disabled] {
-  cursor: not-allowed;
+.cds--snippet-btn--expand .cds--icon-chevron--down {
+  margin-left: 0.5rem;
+  fill: var(--cds-icon-primary, #161616);
+  transform: rotate(0deg);
+  transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
-  cursor: not-allowed;
+.cds--snippet-btn--expand:hover {
+  background: var(--cds-layer-hover);
+  color: var(--cds-text-primary, #161616);
 }
 
-.cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
-  pointer-events: none;
+.cds--snippet-btn--expand:active {
+  background-color: var(--cds-layer-active);
 }
 
-.cds--btn--danger {
-  border-width: 1px;
-  border-style: solid;
+.cds--snippet-btn--expand:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
   border-color: transparent;
-  background-color: var(--cds-button-danger-primary, #da1e28);
-  color: var(--cds-text-on-color, #ffffff);
-}
-.cds--btn--danger:hover {
-  background-color: var(--cds-button-danger-hover, #b81921);
-}
-.cds--btn--danger:focus {
-  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
-  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
-.cds--btn--danger:active {
-  background-color: var(--cds-button-danger-active, #750e13);
+@media screen and (prefers-contrast) {
+  .cds--snippet-btn--expand:focus {
+    outline-style: dotted;
+  }
 }
-.cds--btn--danger .cds--btn__icon,
-.cds--btn--danger .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
-  fill: currentColor;
+
+.cds--snippet--expand .cds--snippet-btn--expand .cds--icon-chevron--down {
+  transform: rotate(180deg);
+  transition: transform 300ms;
 }
-.cds--btn--danger:hover {
-  color: var(--cds-text-on-color, #ffffff);
+
+.cds--snippet--light,
+.cds--snippet--light .cds--snippet-button,
+.cds--snippet--light .cds--btn.cds--snippet-btn--expand,
+.cds--snippet--light .cds--copy-btn {
+  background-color: var(--cds-layer);
 }
-.cds--btn--danger--tertiary {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--cds-button-danger-secondary, #da1e28);
-  background-color: transparent;
-  color: var(--cds-button-danger-secondary, #da1e28);
+
+.cds--snippet--light.cds--snippet--inline:hover,
+.cds--snippet--light .cds--snippet-button:hover,
+.cds--snippet--light .cds--btn.cds--snippet-btn--expand:hover,
+.cds--snippet--light .cds--copy-btn:hover {
+  background-color: var(--cds-layer-hover);
 }
-.cds--btn--danger--tertiary:hover {
-  background-color: var(--cds-button-danger-hover, #b81921);
+
+.cds--snippet--light.cds--snippet--inline:active,
+.cds--snippet--light .cds--snippet-button:active,
+.cds--snippet--light .cds--btn.cds--snippet-btn--expand:active,
+.cds--snippet--light .cds--copy-btn:active {
+  background-color: var(--cds-layer-active);
 }
-.cds--btn--danger--tertiary:focus {
-  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
-  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
+
+.cds--snippet--light.cds--snippet--single::after,
+.cds--snippet--light.cds--snippet--multi .cds--snippet-container pre::after {
+  background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
 }
-.cds--btn--danger--tertiary:active {
-  background-color: var(--cds-button-danger-active, #750e13);
+
+.cds--snippet.cds--skeleton .cds--snippet-container {
+  width: 100%;
+  height: 100%;
 }
-.cds--btn--danger--tertiary .cds--btn__icon,
-.cds--btn--danger--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
-  fill: currentColor;
+
+.cds--snippet-button .cds--btn--copy__feedback {
+  top: 3.175rem;
+  right: auto;
+  left: 50%;
 }
-.cds--btn--danger--tertiary:hover {
-  border-color: var(--cds-button-danger-hover, #b81921);
-  color: var(--cds-text-on-color, #ffffff);
+.cds--snippet-button .cds--btn--copy__feedback::before {
+  top: 0;
 }
-.cds--btn--danger--tertiary:focus {
-  background-color: var(--cds-button-danger-primary, #da1e28);
-  color: var(--cds-text-on-color, #ffffff);
+.cds--snippet-button .cds--btn--copy__feedback::after {
+  top: -0.25rem;
 }
-.cds--btn--danger--tertiary:active {
-  border-color: var(--cds-button-danger-active, #750e13);
-  background-color: var(--cds-button-danger-active, #750e13);
-  color: var(--cds-text-on-color, #ffffff);
+
+.cds--snippet--multi .cds--snippet-button .cds--btn--copy__feedback {
+  top: 2.675rem;
 }
-.cds--btn--danger--tertiary:disabled, .cds--btn--danger--tertiary:hover:disabled, .cds--btn--danger--tertiary:focus:disabled, .cds--btn--danger--tertiary.cds--btn--disabled, .cds--btn--danger--tertiary.cds--btn--disabled:hover, .cds--btn--danger--tertiary.cds--btn--disabled:focus {
-  background: transparent;
-  color: var(--cds-text-on-color-disabled, #8d8d8d);
-  outline: none;
+
+.cds--snippet--inline .cds--btn--copy__feedback {
+  top: calc(100% - 0.25rem);
+  right: auto;
+  left: 50%;
 }
-.cds--btn--danger--ghost {
-  border-width: 1px;
-  border-style: solid;
-  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);
+
+.cds--snippet__overflow-indicator--left,
+.cds--snippet__overflow-indicator--right {
+  z-index: 1;
+  width: 1rem;
+  flex: 1 0 auto;
 }
-.cds--btn--danger--ghost:hover {
-  background-color: var(--cds-button-danger-hover, #b81921);
+
+.cds--snippet__overflow-indicator--left {
+  order: 0;
+  margin-right: -1rem;
+  background-image: linear-gradient(to left, transparent, var(--cds-layer));
 }
-.cds--btn--danger--ghost:focus {
-  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
-  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
+
+.cds--snippet__overflow-indicator--right {
+  order: 2;
+  margin-left: -1rem;
+  background-image: linear-gradient(to right, transparent, var(--cds-layer));
 }
-.cds--btn--danger--ghost:active {
-  background-color: var(--cds-button-danger-active, #750e13);
+
+.cds--snippet--single .cds--snippet__overflow-indicator--right,
+.cds--snippet--single .cds--snippet__overflow-indicator--left {
+  position: absolute;
+  width: 2rem;
+  height: calc(100% - 0.25rem);
 }
-.cds--btn--danger--ghost .cds--btn__icon,
-.cds--btn--danger--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
-  fill: currentColor;
+
+.cds--snippet--single .cds--snippet__overflow-indicator--right {
+  right: 2.5rem;
 }
-.cds--btn--danger--ghost .cds--btn__icon {
-  position: static;
-  margin-left: 0.5rem;
+
+.cds--snippet--single.cds--snippet--no-copy .cds--snippet__overflow-indicator--right {
+  right: 0;
 }
-.cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active {
-  color: var(--cds-text-on-color, #ffffff);
+
+.cds--snippet--single .cds--snippet-container:focus ~ .cds--snippet__overflow-indicator--right {
+  right: calc(2.5rem + 0.125rem);
 }
-.cds--btn--danger--ghost:disabled, .cds--btn--danger--ghost:hover:disabled, .cds--btn--danger--ghost:focus:disabled, .cds--btn--danger--ghost.cds--btn--disabled, .cds--btn--danger--ghost.cds--btn--disabled:hover, .cds--btn--danger--ghost.cds--btn--disabled:focus {
-  border-color: transparent;
-  background: transparent;
-  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
-  outline: none;
+
+.cds--snippet--single .cds--snippet-container:focus + .cds--snippet__overflow-indicator--left {
+  left: 0.125rem;
 }
 
-.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);
+.cds--snippet--light .cds--snippet__overflow-indicator--left {
+  background-image: linear-gradient(to left, transparent, var(--cds-layer));
 }
 
-.cds--btn--icon-only.cds--btn--expressive {
-  padding: 12px 13px;
+.cds--snippet--light .cds--snippet__overflow-indicator--right {
+  background-image: linear-gradient(to right, transparent, var(--cds-layer));
 }
 
-.cds--btn.cds--btn--expressive .cds--btn__icon {
-  width: 1.25rem;
-  height: 1.25rem;
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .cds--snippet__overflow-indicator--left {
+      background-image: linear-gradient(to left, rgba(var(--cds-layer), 0), var(--cds-layer));
+    }
+    .cds--snippet__overflow-indicator--right {
+      background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
+    }
+  }
+}
+.cds--snippet--multi.cds--skeleton {
+  height: 6.125rem;
 }
 
-.cds--btn-set .cds--btn.cds--btn--expressive {
-  max-width: 20rem;
+.cds--snippet--single.cds--skeleton {
+  height: 3.5rem;
 }
 
-.cds--btn.cds--skeleton {
+.cds--snippet.cds--skeleton span {
   position: relative;
   padding: 0;
   border: none;
   background: var(--cds-skeleton-background, #e8e8e8);
   box-shadow: none;
   pointer-events: none;
-  width: 9.375rem;
+  display: block;
+  width: 100%;
+  height: 1rem;
+  margin-top: 0.5rem;
 }
-.cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
+.cds--snippet.cds--skeleton span:hover, .cds--snippet.cds--skeleton span:focus, .cds--snippet.cds--skeleton span:active {
   border: none;
   cursor: default;
   outline: none;
 }
-.cds--btn.cds--skeleton::before {
+.cds--snippet.cds--skeleton span::before {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -1341,70 +1830,46 @@
   will-change: transform-origin, transform, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
-  .cds--btn.cds--skeleton::before {
+  .cds--snippet.cds--skeleton span::before {
     animation: none;
   }
 }
-
-.cds--btn-set {
-  display: flex;
-}
-
-.cds--btn-set--stacked {
-  flex-direction: column;
-}
-
-.cds--btn-set .cds--btn {
-  width: 100%;
-  max-width: 12.25rem;
-}
-.cds--btn-set .cds--btn:not(:focus) {
-  box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
-}
-.cds--btn-set .cds--btn:first-of-type:not(:focus) {
-  box-shadow: inherit;
-}
-
-.cds--btn-set .cds--btn:focus + .cds--btn {
-  box-shadow: inherit;
+.cds--snippet.cds--skeleton span:first-child {
+  margin: 0;
 }
-
-.cds--btn-set--stacked .cds--btn:not(:focus) {
-  box-shadow: 0 -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0);
+.cds--snippet.cds--skeleton span:nth-child(2) {
+  width: 85%;
 }
-
-.cds--btn-set--stacked .cds--btn:first-of-type:not(:focus) {
-  box-shadow: inherit;
+.cds--snippet.cds--skeleton span:nth-child(3) {
+  width: 95%;
 }
 
-.cds--btn-set .cds--btn.cds--btn--disabled {
-  box-shadow: -0.0625rem 0 0 0 var(--cds-icon-on-color-disabled, #8d8d8d);
-}
-.cds--btn-set .cds--btn.cds--btn--disabled:first-of-type {
-  box-shadow: none;
+.cds--snippet--single.cds--skeleton .cds--snippet-container {
+  padding-bottom: 0;
 }
 
-.cds--btn-set--stacked .cds--btn.cds--btn--disabled {
-  box-shadow: 0 -0.0625rem 0 0 var(--cds-layer-selected-disabled, #8d8d8d);
-}
-.cds--btn-set--stacked .cds--btn.cds--btn--disabled:first-of-type {
-  box-shadow: none;
+/* stylelint-disable */
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--snippet__icon {
+    fill: ButtonText;
+  }
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--btn:focus {
+  .cds--snippet--inline:focus {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
-  .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
-    fill: ButtonText;
+  .cds--snippet--single,
+  .cds--snippet--multi {
+    outline: 1px solid transparent;
   }
 }
 
+/* stylelint-enable */
 .cds--modal {
   position: fixed;
   z-index: 9000;
@@ -1580,6 +2045,13 @@
 }
 
 .cds--modal-header__label {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   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);
@@ -1587,8 +2059,20 @@
   margin-bottom: 0.25rem;
   color: var(--cds-text-secondary, #525252);
 }
+.cds--modal-header__label *,
+.cds--modal-header__label *::before,
+.cds--modal-header__label *::after {
+  box-sizing: inherit;
+}
 
 .cds--modal-header__heading {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   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);
@@ -1596,6 +2080,11 @@
   padding-right: calc(20% - 3rem);
   color: var(--cds-text-primary, #161616);
 }
+.cds--modal-header__heading *,
+.cds--modal-header__heading *::before,
+.cds--modal-header__heading *::after {
+  box-sizing: inherit;
+}
 
 .cds--modal-container--xs .cds--modal-content__regular-content {
   padding-right: 1rem;
@@ -1796,21 +2285,19 @@ textarea:-webkit-autofill:focus {
   -webkit-text-fill-color: var(--cds-text-primary, #161616);
 }
 
-.cds--fieldset html {
+.cds--fieldset {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
   font-size: 100%;
+  vertical-align: baseline;
 }
-.cds--fieldset body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-.cds--fieldset code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
-}
-.cds--fieldset strong {
-  font-weight: 600;
+.cds--fieldset *,
+.cds--fieldset *::before,
+.cds--fieldset *::after {
+  box-sizing: inherit;
 }
 
 .cds--form-item {
@@ -2086,6 +2573,13 @@ 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));
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   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);
@@ -2102,21 +2596,10 @@ fieldset[disabled] .cds--form__helper-text {
   font-family: inherit;
   transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--text-input html {
-  font-size: 100%;
-}
-.cds--text-input body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-.cds--text-input code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
-}
-.cds--text-input strong {
-  font-weight: 600;
+.cds--text-input *,
+.cds--text-input *::before,
+.cds--text-input *::after {
+  box-sizing: inherit;
 }
 .cds--text-input:focus, .cds--text-input:active {
   outline: 2px solid var(--cds-focus, #0f62fe);
@@ -2678,6 +3161,151 @@ fieldset[disabled] .cds--form__helper-text {
     stroke-dashoffset: 0;
   }
 }
+.cds--loading {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  animation-duration: 690ms;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: rotate;
+  animation-timing-function: linear;
+  width: 5.5rem;
+  height: 5.5rem;
+}
+.cds--loading *,
+.cds--loading *::before,
+.cds--loading *::after {
+  box-sizing: inherit;
+}
+.cds--loading svg circle {
+  animation-duration: 10ms;
+  animation-name: init-stroke;
+  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--loading svg circle {
+    animation: none;
+  }
+}
+
+.cds--loading__svg {
+  fill: transparent;
+}
+
+.cds--loading__svg circle {
+  stroke-dasharray: 276.4608 276.4608;
+  stroke-linecap: butt;
+  stroke-width: 10;
+}
+
+.cds--loading__stroke {
+  stroke: var(--cds-interactive, #0f62fe);
+  stroke-dashoffset: 52.527552;
+}
+
+.cds--loading--small .cds--loading__stroke {
+  stroke-dashoffset: 143.759616;
+}
+
+.cds--loading--stop {
+  animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
+}
+.cds--loading--stop svg circle {
+  animation-delay: 700ms;
+  animation-duration: 700ms;
+  animation-fill-mode: forwards;
+  animation-name: stroke-end;
+  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--loading--stop svg circle {
+    animation: none;
+  }
+}
+
+.cds--loading--small {
+  width: 1rem;
+  height: 1rem;
+}
+.cds--loading--small circle {
+  stroke-width: 16;
+}
+
+.cds--loading--small .cds--loading__svg {
+  stroke: var(--cds-interactive, #0f62fe);
+}
+
+.cds--loading__background {
+  stroke: var(--cds-layer-accent);
+  stroke-dashoffset: -22;
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    circle.cds--loading__background {
+      stroke-dasharray: 265;
+      stroke-dashoffset: 0;
+    }
+  }
+}
+.cds--loading-overlay {
+  position: fixed;
+  z-index: 6000;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  transition: background-color 700ms cubic-bezier(0.4, 0.14, 0.3, 1);
+}
+
+.cds--loading-overlay--stop {
+  display: none;
+}
+
+@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;
+  }
+}
 .cds--inline-loading {
   display: flex;
   width: 100%;
@@ -2804,17 +3432,28 @@ fieldset[disabled] .cds--form__helper-text {
   margin-left: auto;
 }
 
+.cds--tabs,
+.cds--tab-content {
+  --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));
+}
+
+.cds--tabs.cds--tabs--tall,
+.cds--tabs.cds--tabs--contained.cds--tabs--tall {
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-lg)), var(--cds-layout-size-height, var(--cds-layout-size-height-xl)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
+}
+
 .cds--tabs {
   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);
+  --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)));
   position: relative;
   display: flex;
   width: 100%;
   height: auto;
-  min-height: 2.5rem;
-  max-height: 4rem;
+  min-height: var(--cds-layout-size-height-local);
+  max-height: var(--cds-layout-size-height-xl);
   color: var(--cds-text-primary, #161616);
 }
 .cds--tabs html {
@@ -2834,7 +3473,7 @@ fieldset[disabled] .cds--form__helper-text {
   font-weight: 600;
 }
 .cds--tabs.cds--tabs--contained {
-  min-height: 3rem;
+  --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-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
 }
 .cds--tabs .cds--tab--list {
   display: flex;
@@ -2848,8 +3487,20 @@ fieldset[disabled] .cds--form__helper-text {
   display: none;
 }
 .cds--tabs .cds--tabs__nav {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   display: flex;
 }
+.cds--tabs .cds--tabs__nav *,
+.cds--tabs .cds--tabs__nav *::before,
+.cds--tabs .cds--tabs__nav *::after {
+  box-sizing: inherit;
+}
 .cds--tabs .cds--tab--overflow-nav-button {
   box-sizing: border-box;
   padding: 0;
@@ -2968,6 +3619,10 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tabs .cds--tabs__nav-item-label-wrapper {
   display: flex;
 }
+.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item-label-wrapper {
+  position: relative;
+  top: 0.0625rem;
+}
 .cds--tabs .cds--tabs__nav-item {
   display: flex;
   flex: 1 0 auto;
@@ -3004,12 +3659,6 @@ 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;
 }
@@ -3046,7 +3695,7 @@ fieldset[disabled] .cds--form__helper-text {
   margin-top: -2px;
 }
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
-  padding-left: 1rem;
+  padding-inline-start: var(--cds-layout-density-padding-inline-local);
 }
 .cds--tabs .cds--tabs__nav-link {
   box-sizing: border-box;
@@ -3070,9 +3719,9 @@ fieldset[disabled] .cds--form__helper-text {
   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.75rem 1rem 0.5rem;
   border-bottom: 2px solid var(--cds-border-subtle);
   color: var(--cds-text-secondary, #525252);
+  padding-inline: var(--cds-layout-density-padding-inline-local);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -3097,9 +3746,8 @@ fieldset[disabled] .cds--form__helper-text {
   }
 }
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-link {
-  height: 3rem;
-  padding: 0.5rem 1rem;
   border-bottom: 0;
+  padding-inline: var(--cds-layout-density-padding-inline-local);
 }
 .cds--tabs.cds--tabs--contained:not(.cds--tabs--tall) .cds--tabs__nav-item-label {
   line-height: calc(3rem - (0.5rem * 2));
@@ -3111,16 +3759,13 @@ fieldset[disabled] .cds--form__helper-text {
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
   min-height: 1rem;
 }
-.cds--tabs.cds--tabs--contained.cds--tabs--tall .cds--tabs__nav-link {
-  height: 4rem;
-}
 .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
   overflow-x: visible;
 }
 .cds--tabs .cds--tabs__nav-item--icon-only, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only {
   display: flex;
-  width: var(--cds-icon-tab-size, 2.5rem);
-  height: var(--cds-icon-tab-size, 2.5rem);
+  width: var(--cds-layout-size-height-local);
+  height: var(--cds-layout-size-height-local);
   align-items: center;
   justify-content: center;
   padding: 0;
@@ -3128,9 +3773,6 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tabs .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label {
   line-height: 0;
 }
-.cds--tabs.cds--tabs__icon--lg {
-  --cds-icon-tab-size: 3rem;
-}
 .cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):hover {
   border-bottom: 2px solid var(--cds-border-strong);
   color: var(--cds-text-primary, #161616);
@@ -3209,7 +3851,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--tab-content {
-  padding: 1rem;
+  padding: var(--cds-layout-density-padding-inline-local);
 }
 .cds--tab-content:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
@@ -3239,7 +3881,7 @@ fieldset[disabled] .cds--form__helper-text {
   width: 10rem;
   height: 100%;
   align-items: center;
-  padding: 0 1rem;
+  padding: 0 var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--tabs.cds--skeleton .cds--tabs__nav-link span {
@@ -3457,12 +4099,20 @@ p.c4p--about-modal__copyright-text:first-child {
   cursor: pointer;
   text-align: start;
   width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   outline: 2px solid transparent;
   outline-offset: -2px;
   position: relative;
   display: flex;
   width: 2.5rem;
   height: 2.5rem;
+  min-height: 2.5rem;
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -3480,25 +4130,13 @@ p.c4p--about-modal__copyright-text:first-child {
 .cds--overflow-menu__trigger::-moz-focus-inner {
   border: 0;
 }
-.cds--overflow-menu html,
-.cds--overflow-menu__trigger html {
-  font-size: 100%;
-}
-.cds--overflow-menu body,
-.cds--overflow-menu__trigger body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-.cds--overflow-menu code,
-.cds--overflow-menu__trigger code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
-}
-.cds--overflow-menu strong,
-.cds--overflow-menu__trigger strong {
-  font-weight: 600;
+.cds--overflow-menu *,
+.cds--overflow-menu *::before,
+.cds--overflow-menu *::after,
+.cds--overflow-menu__trigger *,
+.cds--overflow-menu__trigger *::before,
+.cds--overflow-menu__trigger *::after {
+  box-sizing: inherit;
 }
 .cds--overflow-menu:focus,
 .cds--overflow-menu__trigger:focus {
@@ -3566,6 +4204,13 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .cds--overflow-menu-options {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   position: absolute;
   z-index: 6000;
@@ -3578,21 +4223,10 @@ p.c4p--about-modal__copyright-text:first-child {
   background-color: var(--cds-layer);
   list-style: none;
 }
-.cds--overflow-menu-options html {
-  font-size: 100%;
-}
-.cds--overflow-menu-options body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-.cds--overflow-menu-options code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
-}
-.cds--overflow-menu-options strong {
-  font-weight: 600;
+.cds--overflow-menu-options *,
+.cds--overflow-menu-options *::before,
+.cds--overflow-menu-options *::after {
+  box-sizing: inherit;
 }
 .cds--overflow-menu-options::after {
   position: absolute;
@@ -3685,6 +4319,13 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .cds--overflow-menu-options__option {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   display: flex;
   width: 100%;
   height: 2.5rem;
@@ -3693,21 +4334,10 @@ p.c4p--about-modal__copyright-text:first-child {
   background-color: transparent;
   transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
 }
-.cds--overflow-menu-options__option html {
-  font-size: 100%;
-}
-.cds--overflow-menu-options__option body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-.cds--overflow-menu-options__option code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
-}
-.cds--overflow-menu-options__option strong {
-  font-weight: 600;
+.cds--overflow-menu-options__option *,
+.cds--overflow-menu-options__option *::before,
+.cds--overflow-menu-options__option *::after {
+  box-sizing: inherit;
 }
 
 .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
@@ -5486,86 +6116,6 @@ a.cds--overflow-menu-options__btn::before {
   margin-left: auto;
 }
 
-.cds--tooltip {
-  --cds-popover-offset: 12px;
-}
-
-.cds--tooltip-content {
-  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);
-  max-width: 18rem;
-  padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
-  color: var(--cds-text-inverse, #ffffff);
-}
-
-.cds--icon-tooltip {
-  --cds-tooltip-padding-block: 0.125rem;
-  --cds-popover-caret-width: 0.5rem;
-  --cds-popover-caret-height: 0.25rem;
-  --cds-popover-offset: 0.5rem;
-}
-
-.cds--icon-tooltip .cds--tooltip-content {
-  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);
-}
-
-.cds--definition-term {
-  box-sizing: border-box;
-  padding: 0;
-  border: 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  display: inline-block;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  background: none;
-  cursor: pointer;
-  text-align: start;
-  width: 100%;
-  border-bottom: 1px dotted var(--cds-border-strong);
-  border-radius: 0;
-  color: var(--cds-text-primary, #161616);
-}
-.cds--definition-term *,
-.cds--definition-term *::before,
-.cds--definition-term *::after {
-  box-sizing: inherit;
-}
-.cds--definition-term::-moz-focus-inner {
-  border: 0;
-}
-
-.cds--definition-term:focus {
-  outline: 1px solid var(--cds-focus, #0f62fe);
-  border-bottom-color: var(--cds-border-interactive, #0f62fe);
-}
-@media screen and (prefers-contrast) {
-  .cds--definition-term:focus {
-    outline-style: dotted;
-  }
-}
-
-.cds--definition-term:hover {
-  border-bottom-color: var(--cds-border-interactive, #0f62fe);
-}
-
-.cds--definition-tooltip {
-  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);
-  max-width: 11rem;
-  padding: 0.5rem 1rem;
-}
-
 .cds--progress {
   box-sizing: border-box;
   padding: 0;
@@ -7787,151 +8337,6 @@ a.cds--overflow-menu-options__btn::before {
   margin-left: 0.5rem;
 }
 
-.cds--loading {
-  box-sizing: border-box;
-  padding: 0;
-  border: 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  animation-duration: 690ms;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: rotate;
-  animation-timing-function: linear;
-  width: 5.5rem;
-  height: 5.5rem;
-}
-.cds--loading *,
-.cds--loading *::before,
-.cds--loading *::after {
-  box-sizing: inherit;
-}
-.cds--loading svg circle {
-  animation-duration: 10ms;
-  animation-name: init-stroke;
-  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .cds--loading svg circle {
-    animation: none;
-  }
-}
-
-.cds--loading__svg {
-  fill: transparent;
-}
-
-.cds--loading__svg circle {
-  stroke-dasharray: 276.4608 276.4608;
-  stroke-linecap: butt;
-  stroke-width: 10;
-}
-
-.cds--loading__stroke {
-  stroke: var(--cds-interactive, #0f62fe);
-  stroke-dashoffset: 52.527552;
-}
-
-.cds--loading--small .cds--loading__stroke {
-  stroke-dashoffset: 143.759616;
-}
-
-.cds--loading--stop {
-  animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
-}
-.cds--loading--stop svg circle {
-  animation-delay: 700ms;
-  animation-duration: 700ms;
-  animation-fill-mode: forwards;
-  animation-name: stroke-end;
-  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .cds--loading--stop svg circle {
-    animation: none;
-  }
-}
-
-.cds--loading--small {
-  width: 1rem;
-  height: 1rem;
-}
-.cds--loading--small circle {
-  stroke-width: 16;
-}
-
-.cds--loading--small .cds--loading__svg {
-  stroke: var(--cds-interactive, #0f62fe);
-}
-
-.cds--loading__background {
-  stroke: var(--cds-layer-accent);
-  stroke-dashoffset: -22;
-}
-
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    circle.cds--loading__background {
-      stroke-dasharray: 265;
-      stroke-dashoffset: 0;
-    }
-  }
-}
-.cds--loading-overlay {
-  position: fixed;
-  z-index: 6000;
-  top: 0;
-  left: 0;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
-  transition: background-color 700ms cubic-bezier(0.4, 0.14, 0.3, 1);
-}
-
-.cds--loading-overlay--stop {
-  display: none;
-}
-
-@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;
-  }
-}
 .c4p--export-modal .cds--modal-footer .cds--btn {
   max-width: none;
 }
@@ -9154,8 +9559,8 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-helper-text-01-font-size: 0.75rem;
   --cds-helper-text-01-line-height: 1.33333;
   --cds-helper-text-01-letter-spacing: 0.32px;
-  --cds-helper-text-02-font-size: carbon--type-scale(2);
-  --cds-helper-text-02-font-weight: carbon--font-weight("regular");
+  --cds-helper-text-02-font-size: 0.875rem;
+  --cds-helper-text-02-font-weight: 400;
   --cds-helper-text-02-line-height: 1.28572;
   --cds-helper-text-02-letter-spacing: 0.16px;
   --cds-body-short-01-font-size: 0.875rem;
@@ -9657,27 +10062,23 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .cds--breadcrumb {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   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: inline;
-}
-.cds--breadcrumb html {
-  font-size: 100%;
-}
-.cds--breadcrumb body {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-.cds--breadcrumb code {
-  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+  display: inline;
 }
-.cds--breadcrumb strong {
-  font-weight: 600;
+.cds--breadcrumb *,
+.cds--breadcrumb *::before,
+.cds--breadcrumb *::after {
+  box-sizing: inherit;
 }
 @media (min-width: 42rem) {
   .cds--breadcrumb {
@@ -12407,7 +12808,8 @@ button.c4p--add-select__global-filter-toggle--open {
   white-space: nowrap;
 }
 .c4p--page-header .c4p--page-header__title-row {
-  margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
+  --title-row-margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
+  margin-top: var(--title-row-margin-top);
   margin-bottom: 0;
   transform: translateY(0.125rem);
 }
@@ -12445,7 +12847,7 @@ button.c4p--add-select__global-filter-toggle--open {
   position: sticky;
 }
 .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs + .c4p--page-header__title-row--sticky {
-  top: var(--c4p--page-header--breadcrumb-top);
+  top: calc(var(--c4p--page-header--breadcrumb-top) - var(--title-row-margin-top));
 }
 .c4p--page-header .c4p--page-header__title-column {
   min-height: 40px;
@@ -13468,6 +13870,13 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .cds--search-magnifier-icon {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
   position: absolute;
   z-index: 2;
   top: 50%;
@@ -13478,6 +13887,11 @@ button.c4p--add-select__global-filter-toggle--open {
   pointer-events: none;
   transform: translateY(-50%);
 }
+.cds--search-magnifier-icon *,
+.cds--search-magnifier-icon *::before,
+.cds--search-magnifier-icon *::after {
+  box-sizing: inherit;
+}
 
 .cds--search-close {
   box-sizing: border-box;
@@ -13677,450 +14091,94 @@ button.c4p--add-select__global-filter-toggle--open {
   cursor: default;
   outline: none;
 }
-.cds--search--lg.cds--skeleton .cds--search-input::before,
-.cds--search--md.cds--skeleton .cds--search-input::before,
-.cds--search--sm.cds--skeleton .cds--search-input::before {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  animation: 3000ms ease-in-out skeleton infinite;
-  background: var(--cds-skeleton-element, #c6c6c6);
-  content: "";
-  will-change: transform-origin, transform, opacity;
-}
-@media (prefers-reduced-motion: reduce) {
-  .cds--search--lg.cds--skeleton .cds--search-input::before,
-  .cds--search--md.cds--skeleton .cds--search-input::before,
-  .cds--search--sm.cds--skeleton .cds--search-input::before {
-    animation: none;
-  }
-}
-.cds--search--lg.cds--skeleton .cds--search-input::placeholder,
-.cds--search--md.cds--skeleton .cds--search-input::placeholder,
-.cds--search--sm.cds--skeleton .cds--search-input::placeholder {
-  color: transparent;
-}
-
-.cds--search--expandable {
-  transition: width 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-
-.cds--search--expandable.cds--search--expanded {
-  width: 100%;
-}
-
-.cds--search--expandable .cds--search-input {
-  width: 0;
-  padding: 0;
-  transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 0s linear 70ms;
-}
-.cds--search--expandable .cds--search-input::placeholder {
-  position: relative;
-  opacity: 0;
-  transition-duration: 70ms;
-  transition-property: padding, opacity;
-  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-
-.cds--search--expandable.cds--search--expanded .cds--search-input {
-  width: 100%;
-  transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-.cds--search--expandable.cds--search--expanded .cds--search-input::placeholder {
-  position: relative;
-  padding: 0;
-  opacity: 1;
-}
-
-.cds--search--expandable .cds--search-magnifier {
-  position: absolute;
-  cursor: pointer;
-}
-
-.cds--search--expandable .cds--search-magnifier:hover {
-  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
-}
-
-.cds--search--expandable.cds--search--expanded .cds--search-magnifier {
-  pointer-events: none;
-}
-
-.cds--search--expandable .cds--search-magnifier-icon {
-  fill: var(--cds-icon-primary, #161616);
-}
-
-.cds--search--expandable.cds--search--expanded .cds--search-magnifier-icon {
-  fill: var(--cds-icon-secondary, #525252);
-}
-
-.cds--search--expandable.cds--search--disabled svg {
-  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
-}
-
-@media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--search-close svg,
-  .cds--search-magnifier-icon {
-    fill: ButtonText;
-  }
-}
-
-.cds--popover-container {
-  position: relative;
-  display: inline-block;
-}
-
-.cds--popover--high-contrast .cds--popover {
-  --cds-popover-background-color: var(--cds-background-inverse, #393939);
-  --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
-}
-
-.cds--popover--drop-shadow .cds--popover {
-  --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
-}
-
-.cds--popover--caret {
-  --cds-popover-offset: 0.625rem;
-}
-
-.cds--popover {
-  position: absolute;
-  z-index: 6000;
-  filter: var(--cds-popover-drop-shadow, none);
-  inset: 0;
-  pointer-events: none;
-}
-
-.cds--popover-content {
-  position: absolute;
-  z-index: 6000;
-  display: none;
-  width: max-content;
-  max-width: 23rem;
-  background-color: var(--cds-popover-background-color, var(--cds-layer));
-  border-radius: var(--cds-popover-border-radius, 2px);
-  color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
-  pointer-events: auto;
-}
-
-.cds--popover--open > .cds--popover > .cds--popover-content {
-  display: block;
-}
-
-.cds--popover-content::before {
-  position: absolute;
-  display: none;
-  content: "";
-}
-
-.cds--popover--open > .cds--popover > .cds--popover-content::before {
-  display: block;
-}
-
-.cds--popover-caret {
-  position: absolute;
-  z-index: 6000;
-  display: none;
-  background-color: var(--cds-popover-background-color, var(--cds-layer));
-  will-change: transform;
-}
-
-.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%;
-  transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
-}
-
-.cds--popover--bottom-left .cds--popover-content {
-  bottom: 0;
-  left: 0;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
-}
-
-.cds--popover--bottom-right .cds--popover-content {
-  right: 0;
-  bottom: 0;
-  transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
-}
-
-.cds--popover--bottom .cds--popover-content::before,
-.cds--popover--bottom-left .cds--popover-content::before,
-.cds--popover--bottom-right .cds--popover-content::before {
-  top: 0;
-  right: 0;
-  left: 0;
-  height: var(--cds-popover-offset, 0rem);
-  transform: translateY(-100%);
-}
-
-.cds--popover--bottom .cds--popover-caret,
-.cds--popover--bottom-left .cds--popover-caret,
-.cds--popover--bottom-right .cds--popover-caret {
-  bottom: 0;
-  left: 50%;
-  width: var(--cds-popover-caret-width, 0.75rem);
-  height: var(--cds-popover-caret-height, 0.375rem);
-  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
-  transform: translate(-50%, var(--cds-popover-offset, 0rem));
-}
-
-.cds--popover--top .cds--popover-content {
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
-}
-
-.cds--popover--top-left .cds--popover-content {
-  top: 0;
-  left: 0;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
-}
-
-.cds--popover--top-right .cds--popover-content {
-  top: 0;
-  right: 0;
-  transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
-}
-
-.cds--popover--top .cds--popover-content::before,
-.cds--popover--top-left .cds--popover-content::before,
-.cds--popover--top-right .cds--popover-content::before {
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: var(--cds-popover-offset, 0rem);
-  transform: translateY(100%);
-}
-
-.cds--popover--top .cds--popover-caret,
-.cds--popover--top-left .cds--popover-caret,
-.cds--popover--top-right .cds--popover-caret {
-  top: 0;
-  left: 50%;
-  width: var(--cds-popover-caret-width, 0.75rem);
-  height: var(--cds-popover-caret-height, 0.375rem);
-  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
-  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
-}
-
-.cds--popover--right .cds--popover-content {
-  top: 50%;
-  left: 100%;
-  transform: translate(var(--cds-popover-offset, 0rem), -50%);
-}
-
-.cds--popover--right-top .cds--popover-content {
-  top: 50%;
-  left: 100%;
-  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
-}
-
-.cds--popover--right-bottom .cds--popover-content {
-  bottom: 50%;
-  left: 100%;
-  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
-}
-
-.cds--popover--right .cds--popover-content::before,
-.cds--popover--right-top .cds--popover-content::before,
-.cds--popover--right-bottom .cds--popover-content::before {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--cds-popover-offset, 0rem);
-  transform: translateX(-100%);
-}
-
-.cds--popover--right .cds--popover-caret,
-.cds--popover--right-top .cds--popover-caret,
-.cds--popover--right-bottom .cds--popover-caret {
-  top: 50%;
-  left: 100%;
-  width: var(--cds-popover-caret-height, 0.375rem);
-  height: var(--cds-popover-caret-width, 0.75rem);
-  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
-  transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
+.cds--search--lg.cds--skeleton .cds--search-input::before,
+.cds--search--md.cds--skeleton .cds--search-input::before,
+.cds--search--sm.cds--skeleton .cds--search-input::before {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  animation: 3000ms ease-in-out skeleton infinite;
+  background: var(--cds-skeleton-element, #c6c6c6);
+  content: "";
+  will-change: transform-origin, transform, opacity;
 }
-
-.cds--popover--left .cds--popover-content {
-  top: 50%;
-  right: 100%;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
+@media (prefers-reduced-motion: reduce) {
+  .cds--search--lg.cds--skeleton .cds--search-input::before,
+  .cds--search--md.cds--skeleton .cds--search-input::before,
+  .cds--search--sm.cds--skeleton .cds--search-input::before {
+    animation: none;
+  }
 }
-
-.cds--popover--left-top .cds--popover-content {
-  top: -50%;
-  right: 100%;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
+.cds--search--lg.cds--skeleton .cds--search-input::placeholder,
+.cds--search--md.cds--skeleton .cds--search-input::placeholder,
+.cds--search--sm.cds--skeleton .cds--search-input::placeholder {
+  color: transparent;
 }
 
-.cds--popover--left-bottom .cds--popover-content {
-  right: 100%;
-  bottom: -50%;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
+.cds--search--expandable {
+  transition: width 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--popover--left .cds--popover-content::before,
-.cds--popover--left-top .cds--popover-content::before,
-.cds--popover--left-bottom .cds--popover-content::before {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: var(--cds-popover-offset, 0rem);
-  transform: translateX(100%);
+.cds--search--expandable.cds--search--expanded {
+  width: 100%;
 }
 
-.cds--popover--left .cds--popover-caret,
-.cds--popover--left-top .cds--popover-caret,
-.cds--popover--left-bottom .cds--popover-caret {
-  top: 50%;
-  right: 100%;
-  width: var(--cds-popover-caret-height, 0.375rem);
-  height: var(--cds-popover-caret-width, 0.75rem);
-  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
+.cds--search--expandable .cds--search-input {
+  width: 0;
+  padding: 0;
+  transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9), width 0s linear 70ms;
 }
-
-.cds--popover--tab-tip .cds--popover-content {
-  border-radius: 0;
+.cds--search--expandable .cds--search-input::placeholder {
+  position: relative;
+  opacity: 0;
+  transition-duration: 70ms;
+  transition-property: padding, opacity;
+  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--popover--tab-tip__button {
-  box-sizing: border-box;
-  padding: 0;
-  border: 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  display: inline-block;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  background: none;
-  cursor: pointer;
-  text-align: start;
+.cds--search--expandable.cds--search--expanded .cds--search-input {
   width: 100%;
-  position: relative;
-  display: inline-flex;
-  width: 2rem;
-  height: 2rem;
-  align-items: center;
-  justify-content: center;
+  transition: padding 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--popover--tab-tip__button *,
-.cds--popover--tab-tip__button *::before,
-.cds--popover--tab-tip__button *::after {
-  box-sizing: inherit;
+.cds--search--expandable.cds--search--expanded .cds--search-input::placeholder {
+  position: relative;
+  padding: 0;
+  opacity: 1;
 }
-.cds--popover--tab-tip__button::-moz-focus-inner {
-  border: 0;
+
+.cds--search--expandable .cds--search-magnifier {
+  position: absolute;
+  cursor: pointer;
 }
-.cds--popover--tab-tip__button:focus {
+.cds--search--expandable .cds--search-magnifier:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
-}
-@media screen and (prefers-contrast) {
-  .cds--popover--tab-tip__button:focus {
-    outline-style: dotted;
-  }
-}
-.cds--popover--tab-tip__button:hover {
-  background-color: var(--cds-layer-hover);
 }
 
-.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
-  background: var(--cds-layer);
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+.cds--search--expandable .cds--search-magnifier:hover {
+  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
 }
 
-.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
-  position: absolute;
-  z-index: 6001;
-  bottom: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--cds-layer);
-  content: "";
+.cds--search--expandable.cds--search--expanded .cds--search-magnifier {
+  pointer-events: none;
 }
 
-.cds--popover--tab-tip__button svg {
+.cds--search--expandable .cds--search-magnifier-icon {
   fill: var(--cds-icon-primary, #161616);
 }
 
-:root {
-  --cds-layer: var(--cds-layer-01, #f4f4f4);
-  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
-  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
-  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
-  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
-  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
-  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
-  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
-  --cds-field: var(--cds-field-01, #f4f4f4);
-  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
-  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
-  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
-  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
-}
-
-.cds--layer-one {
-  --cds-layer: var(--cds-layer-01, #f4f4f4);
-  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
-  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
-  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
-  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
-  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
-  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
-  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
-  --cds-field: var(--cds-field-01, #f4f4f4);
-  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
-  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
-  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
-  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
+.cds--search--expandable.cds--search--expanded .cds--search-magnifier-icon {
+  fill: var(--cds-icon-secondary, #525252);
 }
 
-.cds--layer-two {
-  --cds-layer: var(--cds-layer-02, #ffffff);
-  --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
-  --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
-  --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
-  --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
-  --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
-  --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
-  --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
-  --cds-field: var(--cds-field-02, #ffffff);
-  --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
-  --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
-  --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
-  --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
+.cds--search--expandable.cds--search--disabled svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
-.cds--layer-three {
-  --cds-layer: var(--cds-layer-03, #f4f4f4);
-  --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
-  --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
-  --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
-  --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
-  --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
-  --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
-  --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
-  --cds-field: var(--cds-field-03, #f4f4f4);
-  --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
-  --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
-  --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
-  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--search-close svg,
+  .cds--search-magnifier-icon {
+    fill: ButtonText;
+  }
 }
 
 .c4p--toolbar {
@@ -14174,6 +14232,22 @@ button.c4p--add-select__global-filter-toggle--open {
   content: "";
 }
 
+.c4p--tooltip-trigger {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  appearance: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+}
+
 @keyframes web-terminal-entrance {
   from {
     opacity: 0;
@@ -14336,8 +14410,8 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-helper-text-01-font-size: 0.75rem;
   --cds-helper-text-01-line-height: 1.33333;
   --cds-helper-text-01-letter-spacing: 0.32px;
-  --cds-helper-text-02-font-size: carbon--type-scale(2);
-  --cds-helper-text-02-font-weight: carbon--font-weight("regular");
+  --cds-helper-text-02-font-size: 0.875rem;
+  --cds-helper-text-02-font-weight: 400;
   --cds-helper-text-02-line-height: 1.28572;
   --cds-helper-text-02-letter-spacing: 0.16px;
   --cds-body-short-01-font-size: 0.875rem;
@@ -14774,8 +14848,8 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-helper-text-01-font-size: 0.75rem;
   --cds-helper-text-01-line-height: 1.33333;
   --cds-helper-text-01-letter-spacing: 0.32px;
-  --cds-helper-text-02-font-size: carbon--type-scale(2);
-  --cds-helper-text-02-font-weight: carbon--font-weight("regular");
+  --cds-helper-text-02-font-size: 0.875rem;
+  --cds-helper-text-02-font-weight: 400;
   --cds-helper-text-02-line-height: 1.28572;
   --cds-helper-text-02-letter-spacing: 0.16px;
   --cds-body-short-01-font-size: 0.875rem;
@@ -16451,6 +16525,67 @@ button.c4p--add-select__global-filter-toggle--open {
   margin-top: 0;
 }
 
+.c4p--datagrid .c4p--datagrid__col-resizer-range {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: calc(0.5rem * -1);
+  width: 1rem;
+  height: 100%;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+.c4p--datagrid .c4p--datagrid__col-resizer-range:focus {
+  outline: 0;
+}
+
+.c4p--datagrid .c4p--datagrid__col-resizer-range:focus::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  background-color: var(--cds-focus, #0f62fe);
+  content: "";
+  transform: translate(-50%, -50%);
+}
+
+.c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator {
+  position: absolute;
+  z-index: 2;
+  right: calc(0.5rem * -1);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 100%;
+  margin: 0;
+  background-color: var(--cds-focus, #0f62fe);
+  transform: translate(-50%, 0);
+}
+
+.c4p--datagrid .c4p--datagrid__col-resizer-range:focus::after {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: var(--c4p--datagrid--row-height);
+  right: 0.5rem;
+  width: 1px;
+  height: calc(var(--c4p--datagrid--grid-height) - var(--c4p--datagrid--row-height));
+  background-color: var(--cds-layer-active-01, #c6c6c6);
+  content: "";
+}
+
+.c4p--datagrid .c4p--datagrid__col-resizer-range::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 50%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36