@ukic/react 3.5.0 → 3.6.0

package/dist/core/core.css

@@ -17,13 +17,13 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     var(--ic-font-code-family);--ic-font-badge:var(--ic-font-weight-semibold) var(--ic-font-size-caption) /
     var(--ic-font-line-height-badge) var(--ic-font-body-family);--ic-font-badge-small:var(--ic-font-weight-semibold)
     var(--ic-font-size-badge-small) / var(--ic-font-line-height-badge-small)
-    var(--ic-font-body-family)}:root,ic-theme,.ic-theme-light{--ic-color-text-primary:var(--ic-color-text-primary-light);--ic-color-text-secondary:var(--ic-color-text-secondary-light);--ic-color-text-tertiary:var(--ic-color-text-tertiary-light);--ic-color-background-primary:var(--ic-color-background-primary-light);--ic-color-background-secondary:var(--ic-color-background-secondary-light);--ic-color-background-active:var(--ic-color-background-active-light);--ic-color-background-hover:var(--ic-color-background-hover-light);--ic-color-background-pressed:var(--ic-color-background-pressed-light);--ic-color-background-disabled:var(--ic-color-background-disabled-light);--ic-color-background-success:var(--ic-color-background-success-light);--ic-color-background-warning:var(--ic-color-background-warning-light);--ic-color-background-destructive:var(
+    var(--ic-font-body-family)}:root,ic-theme,.ic-theme-light{--ic-color-text-primary:var(--ic-color-text-primary-light);--ic-color-text-secondary:var(--ic-color-text-secondary-light);--ic-color-text-tertiary:var(--ic-color-text-tertiary-light);--ic-color-text-disabled:var(--ic-color-text-disabled-light);--ic-color-text-action:var(--ic-color-text-action-light);--ic-color-text-action-hover:var(--ic-color-text-action-hover-light);--ic-color-text-action-pressed:var(--ic-color-text-action-pressed-light);--ic-color-text-error:var(--ic-color-text-error-dark);--ic-color-background-primary:var(--ic-color-background-primary-light);--ic-color-background-secondary:var(--ic-color-background-secondary-light);--ic-color-background-active:var(--ic-color-background-active-light);--ic-color-background-hover:var(--ic-color-background-hover-light);--ic-color-background-pressed:var(--ic-color-background-pressed-light);--ic-color-background-disabled:var(--ic-color-background-disabled-light);--ic-color-background-success:var(--ic-color-background-success-light);--ic-color-background-warning:var(--ic-color-background-warning-light);--ic-color-background-destructive:var(
     --ic-color-background-destructive-light
   );--ic-color-background-destructive-hover:var(
     --ic-color-background-destructive-hover-light
   );--ic-color-background-destructive-pressed:var(
     --ic-color-background-destructive-pressed-light
-  );--ic-color-background-neutral:var(--ic-color-background-neutral-light);--ic-color-border-neutral-grey:var(--ic-color-border-neutral-grey-light);--ic-color-border-neutral-hover:var(--ic-color-border-neutral-hover-default);--ic-color-border-neutral-pressed:var(
+  );--ic-color-background-neutral:var(--ic-color-background-neutral-light);--ic-color-page-background:var(--ic-color-page-background-light);--ic-color-border-neutral-grey:var(--ic-color-border-neutral-grey-light);--ic-color-border-neutral:var(--ic-color-border-neutral-default);--ic-color-border-neutral-hover:var(--ic-color-border-neutral-hover-default);--ic-color-border-neutral-pressed:var(
     --ic-color-border-neutral-pressed-default
   );--ic-color-border-neutral-disabled:var(
     --ic-color-border-neutral-disabled-mid
@@ -31,9 +31,9 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-color-border-success-pressed-light
   );--ic-color-border-warning:var(--ic-color-border-warning-default);--ic-color-border-warning-hover:var(--ic-color-border-warning-hover-light);--ic-color-border-warning-pressed:var(
     --ic-color-border-warning-pressed-light
-  );--ic-color-border-error:var(--ic-color-border-error-default);--ic-color-border-error-hover:var(--ic-color-border-error-hover-light);--ic-color-border-error-pressed:var(--ic-color-border-error-pressed-light);--ic-color-border-action:var(--ic-color-border-action-default);--ic-color-border-action-hover:var(--ic-color-border-action-hover-light);--ic-color-border-action-pressed:var(--ic-color-border-action-pressed-light);--ic-action-default:var(--ic-action-default-light);--ic-action-default-hover:var(--ic-action-default-hover-light);--ic-action-default-pressed:var(--ic-action-default-pressed-light);--ic-action-default-selected:var(--ic-action-default-selected-light);--ic-action-destructive:var(--ic-action-destructive-light);--ic-action-destructive-hover:var(--ic-action-destructive-hover-light);--ic-action-destructive-pressed:var(--ic-action-destructive-pressed-light);--ic-action-neutral:var(--ic-action-neutral-light);--ic-color-hyperlink-default:var(--ic-color-hyperlink-default-light);--ic-color-hyperlink-visited:var(--ic-color-hyperlink-visited-light);--ic-color-hyperlink-visited-monochrome:var(
+  );--ic-color-border-error:var(--ic-color-border-error-default);--ic-color-border-error-hover:var(--ic-color-border-error-hover-light);--ic-color-border-error-pressed:var(--ic-color-border-error-pressed-light);--ic-color-border-action:var(--ic-color-border-action-default);--ic-color-border-action-hover:var(--ic-color-border-action-hover-light);--ic-color-border-action-pressed:var(--ic-color-border-action-pressed-light);--ic-action-default:var(--ic-action-default-light);--ic-action-default-hover:var(--ic-action-default-hover-light);--ic-action-default-pressed:var(--ic-action-default-pressed-light);--ic-action-default-selected:var(--ic-action-default-selected-light);--ic-action-destructive:var(--ic-action-destructive-light);--ic-action-destructive-hover:var(--ic-action-destructive-hover-light);--ic-action-destructive-pressed:var(--ic-action-destructive-pressed-light);--ic-action-monochrome-default:var(--ic-action-monochrome);--ic-action-monochrome-default-hover:var(--ic-action-monochrome-hover);--ic-action-monochrome-default-pressed:var(--ic-action-monochrome-pressed);--ic-action-neutral:var(--ic-action-neutral-light);--ic-color-hyperlink-default:var(--ic-color-hyperlink-default-light);--ic-color-hyperlink-visited:var(--ic-color-hyperlink-visited-light);--ic-color-hyperlink-visited-monochrome:var(
     --ic-color-hyperlink-visited-monochrome-light
-  );--ic-status-success:var(--ic-status-success-light);--ic-status-warning:var(--ic-status-warning-light);--ic-status-error:var(--ic-status-error-light);--ic-status-anomalous:var(--ic-status-anomalous-light);--ic-status-info:var(--ic-status-info-light);--ic-status-unknown:var(--ic-status-unknown-light);--ic-color-icon-grey:var(--ic-color-icon-grey-light);--ic-color-icon-hover:var(--ic-color-icon-hover-light);--ic-color-icon-pressed:var(--ic-color-icon-pressed-light);--ic-color-icon-disabled:var(--ic-color-icon-disabled-light);--ic-color-icon-action-default:var(--ic-color-icon-action-default-light);--ic-color-icon-error:var(--ic-color-icon-error-light);--ic-atoms-input-field-background:var(
+  );--ic-status-success:var(--ic-status-success-light);--ic-status-success-default-color:var(--ic-status-success-default);--ic-status-success-contrast-color:var(--ic-status-success-contrast);--ic-status-warning:var(--ic-status-warning-light);--ic-status-warning-default-color:var(--ic-status-warning-default);--ic-status-warning-dark-color:var(--ic-status-warning-dark);--ic-status-error:var(--ic-status-error-light);--ic-status-error-default-color:var(--ic-status-error-default);--ic-status-error-dark-color:var(--ic-status-error-dark);--ic-status-anomalous:var(--ic-status-anomalous-light);--ic-status-anomalous-default-color:var(--ic-status-anomalous-default);--ic-status-info:var(--ic-status-info-light);--ic-status-info-light-color:var(--ic-status-info-light);--ic-status-info-dark-color:var(--ic-status-info-dark);--ic-status-unknown:var(--ic-status-unknown-light);--ic-status-neutral:var(--ic-status-unknown-default);--ic-status-neutral-light:var(--ic-status-unknown-light);--ic-status-neutral-dark:var(--ic-status-unknown-dark);--ic-color-icon-grey:var(--ic-color-icon-grey-light);--ic-color-icon-hover:var(--ic-color-icon-hover-light);--ic-color-icon-pressed:var(--ic-color-icon-pressed-light);--ic-color-icon-disabled:var(--ic-color-icon-disabled-light);--ic-color-icon-action-default:var(--ic-color-icon-action-default-light);--ic-color-icon-action-default-hover:var(--ic-color-icon-action-hover);--ic-color-icon-action-default-pressed:var(--ic-color-icon-action-pressed);--ic-color-icon-error:var(--ic-color-icon-error-light);--ic-atoms-input-field-background:var(
     --ic-atoms-input-field-background-light
   );--ic-atoms-input-field-label:var(--ic-atoms-input-field-label-light);--ic-atoms-input-field-label-disabled:var(
     --ic-atoms-input-field-label-disabled-light
@@ -509,13 +509,13 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-action-default-bg-pressed
   );--ic-top-navigation-nav-group-link:var(--ic-color-hyperlink-default);--ic-top-navigation-nav-item:var(--ic-color-text-primary);--ic-top-navigation-nav-item-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-nav-group-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-nav-item-pressed:var(--ic-action-dark-bg-pressed);--ic-top-navigation-nav-group-pressed:var(--ic-action-dark-bg-pressed);--ic-top-navigation-nav-item-banner:var(--ic-action-default);--ic-top-navigation-nav-group-chevron:var(--ic-color-icon-neutral);--ic-top-navigation-link:var(--ic-color-brand-text);--ic-top-navigation-status-tag:var(--ic-color-background-primary);--ic-top-navigation-status-tag-text:var(--ic-color-text-primary);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-lighten-20);--ic-top-navigation-logo:var(--ic-color-icon-brand);--ic-top-navigation-icon:var(--ic-color-icon-brand);--ic-top-navigation-theme:var(--ic-color-icon-brand);--ic-top-navigation-disabled:var(--ic-color-text-disabled-mid);--ic-top-navigation-enabled:var(--ic-color-brand-text);--ic-top-navigation-menu-background:var(--ic-color-background-secondary);--ic-top-navigation-menu-border:var(--ic-color-border-neutral-default);--ic-top-navigation-selected:var(--ic-color-icon-brand);--ic-top-navigation-search-placeholder-text:var(
     --ic-atoms-input-text-field-content-placeholder
-  );--ic-tree-view-text:var(--ic-color-text-primary);--ic-tree-view-background:var(--ic-color-background-primary);--ic-tree-view-text-disabled:var(--ic-color-text-disabled-mid);--ic-tree-view-icon-disabled:var(--ic-color-icon-disabled-mid);--ic-tree-view-icon:var(--ic-color-icon-neutral);--ic-tree-view-dropdown-arrow:var(--ic-color-icon-action-default);--ic-tree-view-dropdown-arrow-disabled:var(--ic-color-icon-disabled-mid);--ic-tree-view-divider:var(--ic-state-layer-neutral-dark);--ic-tree-view-hover:var(--ic-action-dark-bg-hover);--ic-tree-view-pressed:var(--ic-action-dark-bg-pressed);--ic-tree-view-selected:var(--ic-action-default-bg-pressed)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--ic-color-text-primary:var(--ic-color-text-primary-dark);--ic-color-text-secondary:var(--ic-color-text-secondary-dark);--ic-color-text-tertiary:var(--ic-color-text-tertiary-dark);--ic-color-background-primary:var(--ic-color-background-primary-dark);--ic-color-background-secondary:var(--ic-color-background-secondary-dark);--ic-color-background-active:var(--ic-color-background-active-dark);--ic-color-background-hover:var(--ic-color-background-hover-dark);--ic-color-background-pressed:var(--ic-color-background-pressed-dark);--ic-color-background-disabled:var(--ic-color-background-disabled-dark);--ic-color-background-success:var(--ic-color-background-success-dark);--ic-color-background-warning:var(--ic-color-background-warning-dark);--ic-color-background-destructive:var(
+  );--ic-tree-view-text:var(--ic-color-text-primary);--ic-tree-view-background:var(--ic-color-background-primary);--ic-tree-view-text-disabled:var(--ic-color-text-disabled-mid);--ic-tree-view-icon-disabled:var(--ic-color-icon-disabled-mid);--ic-tree-view-icon:var(--ic-color-icon-neutral);--ic-tree-view-dropdown-arrow:var(--ic-color-icon-action-default);--ic-tree-view-dropdown-arrow-disabled:var(--ic-color-icon-disabled-mid);--ic-tree-view-divider:var(--ic-state-layer-neutral-dark);--ic-tree-view-hover:var(--ic-action-dark-bg-hover);--ic-tree-view-pressed:var(--ic-action-dark-bg-pressed);--ic-tree-view-selected:var(--ic-action-default-bg-pressed)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--ic-color-text-primary:var(--ic-color-text-primary-dark);--ic-color-text-secondary:var(--ic-color-text-secondary-dark);--ic-color-text-tertiary:var(--ic-color-text-tertiary-dark);--ic-color-text-disabled:var(--ic-color-text-disabled-dark);--ic-color-text-action:var(--ic-color-text-action-dark);--ic-color-text-action-hover:var(--ic-color-text-action-hover-dark);--ic-color-text-action-pressed:var(--ic-color-text-action-pressed-dark);--ic-color-text-error:var(--ic-color-text-error-light);--ic-color-background-primary:var(--ic-color-background-primary-dark);--ic-color-background-secondary:var(--ic-color-background-secondary-dark);--ic-color-background-active:var(--ic-color-background-active-dark);--ic-color-background-hover:var(--ic-color-background-hover-dark);--ic-color-background-pressed:var(--ic-color-background-pressed-dark);--ic-color-background-disabled:var(--ic-color-background-disabled-dark);--ic-color-background-success:var(--ic-color-background-success-dark);--ic-color-background-warning:var(--ic-color-background-warning-dark);--ic-color-background-destructive:var(
       --ic-color-background-destructive-dark
     );--ic-color-background-destructive-hover:var(
       --ic-color-background-destructive-hover-dark
     );--ic-color-background-destructive-pressed:var(
       --ic-color-background-destructive-pressed-dark
-    );--ic-color-background-neutral:var(--ic-color-background-neutral-dark);--ic-color-border-neutral-grey:var(--ic-color-border-neutral-grey-dark);--ic-color-border-neutral-hover:var(--ic-color-border-neutral-hover-dark);--ic-color-border-neutral-pressed:var(
+    );--ic-color-background-neutral:var(--ic-color-background-neutral-dark);--ic-color-page-background:var(--ic-color-page-background-dark);--ic-color-border-neutral-grey:var(--ic-color-border-neutral-grey-dark);--ic-color-border-neutral:var(--ic-color-border-neutral-default-dark);--ic-color-border-neutral-hover:var(--ic-color-border-neutral-hover-dark);--ic-color-border-neutral-pressed:var(
       --ic-color-border-neutral-pressed-dark
     );--ic-color-border-neutral-disabled:var(
       --ic-color-border-neutral-disabled-dark
@@ -525,9 +525,17 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
       --ic-color-border-warning-pressed-dark
     );--ic-color-border-error:var(--ic-color-border-error-default-dark);--ic-color-border-error-hover:var(--ic-color-border-error-hover-dark);--ic-color-border-error-pressed:var(--ic-color-border-error-pressed-dark);--ic-color-border-action:var(--ic-color-border-action-default-dark);--ic-color-border-action-hover:var(--ic-color-border-action-hover-dark);--ic-color-border-action-pressed:var(
       --ic-color-border-action-pressed-dark
-    );--ic-action-default:var(--ic-action-default-dark);--ic-action-default-hover:var(--ic-action-default-hover-dark);--ic-action-default-pressed:var(--ic-action-default-pressed-dark);--ic-action-default-selected:var(--ic-action-default-selected-dark);--ic-action-destructive:var(--ic-action-destructive-dark);--ic-action-destructive-hover:var(--ic-action-destructive-hover-dark);--ic-action-destructive-pressed:var(--ic-action-destructive-pressed-dark);--ic-action-neutral:var(--ic-action-neutral-dark);--ic-color-hyperlink-default:var(--ic-color-hyperlink-default-dark);--ic-color-hyperlink-visited:var(--ic-color-hyperlink-visited-dark);--ic-color-hyperlink-visited-monochrome:var(
+    );--ic-action-default:var(--ic-action-default-dark);--ic-action-default-hover:var(--ic-action-default-hover-dark);--ic-action-default-pressed:var(--ic-action-default-pressed-dark);--ic-action-default-selected:var(--ic-action-default-selected-dark);--ic-action-destructive:var(--ic-action-destructive-dark);--ic-action-destructive-hover:var(--ic-action-destructive-hover-dark);--ic-action-destructive-pressed:var(--ic-action-destructive-pressed-dark);--ic-action-monochrome-default:var(--ic-action-monochrome-dark);--ic-action-monochrome-default-hover:var(
+      --ic-action-monochrome-hover-dark
+    );--ic-action-monochrome-default-pressed:var(
+      --ic-action-monochrome-pressed-dark
+    );--ic-action-neutral:var(--ic-action-neutral-dark);--ic-color-hyperlink-default:var(--ic-color-hyperlink-default-dark);--ic-color-hyperlink-visited:var(--ic-color-hyperlink-visited-dark);--ic-color-hyperlink-visited-monochrome:var(
       --ic-color-hyperlink-visited-monochrome-dark
-    );--ic-status-success:var(--ic-status-success-dark);--ic-status-warning:var(--ic-status-warning-dark);--ic-status-error:var(--ic-status-error-dark);--ic-status-anomalous:var(--ic-status-anomalous-dark);--ic-status-info:var(--ic-status-info-dark);--ic-status-unknown:var(--ic-status-unknown-dark);--ic-color-icon-grey:var(--ic-color-icon-grey-dark);--ic-color-icon-hover:var(--ic-color-icon-hover-dark);--ic-color-icon-pressed:var(--ic-color-icon-pressed-dark);--ic-color-icon-disabled:var(--ic-color-icon-disabled-dark);--ic-color-icon-action-default:var(--ic-color-icon-action-default-dark);--ic-color-icon-error:var(--ic-color-icon-error-dark);--ic-atoms-input-field-background:var(
+    );--ic-status-success:var(--ic-status-success-dark);--ic-status-success-default-color:var(--ic-status-success-default-dm);--ic-status-success-contrast-color:var(--ic-status-success-contrast-dm);--ic-status-warning:var(--ic-status-warning-dark);--ic-status-warning-default-color:var(--ic-status-warning-default-dm);--ic-status-warning-dark-color:var(--ic-status-warning-dark-dm);--ic-status-error:var(--ic-status-error-dark);--ic-status-error-default-color:var(--ic-status-error-default-dm);--ic-status-error-dark-color:var(--ic-status-error-dark-dm);--ic-status-anomalous:var(--ic-status-anomalous-dark);--ic-status-anomalous-default-color:var(--ic-status-anomalous-default-dm);--ic-status-info:var(--ic-status-info-dark);--ic-status-info-light-color:var(--ic-status-info-light-dm);--ic-status-info-dark-color:var(--ic-status-info-dark-dm);--ic-status-unknown:var(--ic-status-unknown-dark);--ic-status-neutral:var(--ic-status-unknown-default-dm);--ic-status-neutral-light:var(--ic-status-unknown-light-dm);--ic-status-neutral-dark:var(--ic-status-unknown-dark-dm);--ic-color-icon-grey:var(--ic-color-icon-grey-dark);--ic-color-icon-hover:var(--ic-color-icon-hover-dark);--ic-color-icon-pressed:var(--ic-color-icon-pressed-dark);--ic-color-icon-disabled:var(--ic-color-icon-disabled-dark);--ic-color-icon-action-default:var(--ic-color-icon-action-default-dark);--ic-color-icon-action-default-hover:var(
+      --ic-color-icon-action-hover-dark
+    );--ic-color-icon-action-default-pressed:var(
+      --ic-color-icon-action-pressed-dark
+    );--ic-color-icon-error:var(--ic-color-icon-error-dark);--ic-atoms-input-field-background:var(
       --ic-atoms-input-field-background-dark
     );--ic-atoms-input-field-label:var(--ic-atoms-input-field-label-dark);--ic-atoms-input-field-label-disabled:var(
       --ic-atoms-input-field-label-disabled-dark
@@ -684,9 +692,9 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     );--ic-button-secondary-background-pressed-active:var(
       --ic-action-default-bg-pressed
     );--ic-button-secondary-background-hover-monochrome:var(
-      --ic-action-dark-bg-hover
+      --ic-action-light-bg-hover
     );--ic-button-secondary-background-pressed-monochrome:var(
-      --ic-action-dark-bg-pressed
+      --ic-action-light-bg-pressed
     );--ic-button-secondary-background-non-transparent-hover:linear-gradient(
       var(--ic-button-secondary-background-hover-active) 0 0
     );--ic-button-secondary-background-non-transparent-active:linear-gradient(
@@ -758,9 +766,9 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     );--ic-button-tertiary-background-monochrome:var(
       --ic-color-background-neutral
     );--ic-button-tertiary-background-hover-monochrome:var(
-      --ic-action-dark-bg-hover
+      --ic-action-light-bg-hover
     );--ic-button-tertiary-background-pressed-monochrome:var(
-      --ic-action-dark-bg-pressed
+      --ic-action-light-bg-pressed
     );--ic-button-tertiary-background-non-transparent-monochrome-hover:linear-gradient(
       var(--ic-button-tertiary-background-hover-monochrome) 0 0
     );--ic-button-tertiary-background-non-transparent-monochrome-active:linear-gradient(
@@ -1075,13 +1083,13 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
       --ic-action-default-bg-pressed
     );--ic-top-navigation-nav-group-link:var(--ic-color-hyperlink-default);--ic-top-navigation-nav-item:var(--ic-color-text-primary);--ic-top-navigation-nav-item-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-nav-group-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-nav-item-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-nav-group-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-nav-item-banner:var(--ic-action-default);--ic-top-navigation-nav-group-chevron:var(--ic-color-icon-brand);--ic-top-navigation-link:var(--ic-color-brand-text);--ic-top-navigation-status-tag:var(--ic-color-background-primary-light);--ic-top-navigation-status-tag-text:var(--ic-color-text-primary-light);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-lighten-20);--ic-top-navigation-logo:var(--ic-color-icon-brand);--ic-top-navigation-icon:var(--ic-color-icon-brand);--ic-top-navigation-theme:var(--ic-color-icon-brand);--ic-top-navigation-disabled:var(--ic-color-text-disabled-dark);--ic-top-navigation-enabled:var(--ic-color-brand-text);--ic-top-navigation-menu-background:var(--ic-color-background-primary);--ic-top-navigation-menu-border:var(--ic-color-border-neutral-default);--ic-top-navigation-selected:var(--ic-color-icon-brand);--ic-top-navigation-search-placeholder-text:var(
       --ic-atoms-input-text-field-content-placeholder
-    );--ic-tree-view-text:var(--ic-color-text-primary);--ic-tree-view-background:var(--ic-color-background-primary);--ic-tree-view-text-disabled:var(--ic-color-text-disabled-dark);--ic-tree-view-icon-disabled:var(--ic-color-icon-disabled);--ic-tree-view-icon:var(--ic-color-icon-inverted);--ic-tree-view-dropdown-arrow:var(--ic-color-icon-action-default);--ic-tree-view-dropdown-arrow-disabled:var(--ic-color-icon-disabled);--ic-tree-view-divider:var(--ic-state-layer-neutral-light);--ic-tree-view-hover:var(--ic-action-light-bg-hover);--ic-tree-view-pressed:var(--ic-action-light-bg-pressed);--ic-tree-view-selected:var(--ic-action-default-bg-pressed-30)}}.ic-theme-dark{color-scheme:dark;--ic-color-text-primary:var(--ic-color-text-primary-dark);--ic-color-text-secondary:var(--ic-color-text-secondary-dark);--ic-color-text-tertiary:var(--ic-color-text-tertiary-dark);--ic-color-background-primary:var(--ic-color-background-primary-dark);--ic-color-background-secondary:var(--ic-color-background-secondary-dark);--ic-color-background-active:var(--ic-color-background-active-dark);--ic-color-background-hover:var(--ic-color-background-hover-dark);--ic-color-background-pressed:var(--ic-color-background-pressed-dark);--ic-color-background-disabled:var(--ic-color-background-disabled-dark);--ic-color-background-success:var(--ic-color-background-success-dark);--ic-color-background-warning:var(--ic-color-background-warning-dark);--ic-color-background-destructive:var(
+    );--ic-tree-view-text:var(--ic-color-text-primary);--ic-tree-view-background:var(--ic-color-background-primary);--ic-tree-view-text-disabled:var(--ic-color-text-disabled-dark);--ic-tree-view-icon-disabled:var(--ic-color-icon-disabled);--ic-tree-view-icon:var(--ic-color-icon-inverted);--ic-tree-view-dropdown-arrow:var(--ic-color-icon-action-default);--ic-tree-view-dropdown-arrow-disabled:var(--ic-color-icon-disabled);--ic-tree-view-divider:var(--ic-state-layer-neutral-light);--ic-tree-view-hover:var(--ic-action-light-bg-hover);--ic-tree-view-pressed:var(--ic-action-light-bg-pressed);--ic-tree-view-selected:var(--ic-action-default-bg-pressed-30)}}.ic-theme-dark{color-scheme:dark;--ic-color-text-primary:var(--ic-color-text-primary-dark);--ic-color-text-secondary:var(--ic-color-text-secondary-dark);--ic-color-text-tertiary:var(--ic-color-text-tertiary-dark);--ic-color-text-disabled:var(--ic-color-text-disabled-dark);--ic-color-text-action:var(--ic-color-text-action-dark);--ic-color-text-action-hover:var(--ic-color-text-action-hover-dark);--ic-color-text-action-pressed:var(--ic-color-text-action-pressed-dark);--ic-color-text-error:var(--ic-color-text-error-light);--ic-color-background-primary:var(--ic-color-background-primary-dark);--ic-color-background-secondary:var(--ic-color-background-secondary-dark);--ic-color-background-active:var(--ic-color-background-active-dark);--ic-color-background-hover:var(--ic-color-background-hover-dark);--ic-color-background-pressed:var(--ic-color-background-pressed-dark);--ic-color-background-disabled:var(--ic-color-background-disabled-dark);--ic-color-background-success:var(--ic-color-background-success-dark);--ic-color-background-warning:var(--ic-color-background-warning-dark);--ic-color-background-destructive:var(
     --ic-color-background-destructive-dark
   );--ic-color-background-destructive-hover:var(
     --ic-color-background-destructive-hover-dark
   );--ic-color-background-destructive-pressed:var(
     --ic-color-background-destructive-pressed-dark
-  );--ic-color-background-neutral:var(--ic-color-background-neutral-dark);--ic-color-border-neutral-grey:var(--ic-color-border-neutral-grey-dark);--ic-color-border-neutral-hover:var(--ic-color-border-neutral-hover-dark);--ic-color-border-neutral-pressed:var(
+  );--ic-color-background-neutral:var(--ic-color-background-neutral-dark);--ic-color-page-background:var(--ic-color-page-background-dark);--ic-color-border-neutral-grey:var(--ic-color-border-neutral-grey-dark);--ic-color-border-neutral:var(--ic-color-border-neutral-default-dark);--ic-color-border-neutral-hover:var(--ic-color-border-neutral-hover-dark);--ic-color-border-neutral-pressed:var(
     --ic-color-border-neutral-pressed-dark
   );--ic-color-border-neutral-disabled:var(
     --ic-color-border-neutral-disabled-dark
@@ -1089,9 +1097,13 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-color-border-success-pressed-dark
   );--ic-color-border-warning:var(--ic-color-border-warning-default-dark);--ic-color-border-warning-hover:var(--ic-color-border-warning-hover-dark);--ic-color-border-warning-pressed:var(
     --ic-color-border-warning-pressed-dark
-  );--ic-color-border-error:var(--ic-color-border-error-default-dark);--ic-color-border-error-hover:var(--ic-color-border-error-hover-dark);--ic-color-border-error-pressed:var(--ic-color-border-error-pressed-dark);--ic-color-border-action:var(--ic-color-border-action-default-dark);--ic-color-border-action-hover:var(--ic-color-border-action-hover-dark);--ic-color-border-action-pressed:var(--ic-color-border-action-pressed-dark);--ic-action-default:var(--ic-action-default-dark);--ic-action-default-hover:var(--ic-action-default-hover-dark);--ic-action-default-pressed:var(--ic-action-default-pressed-dark);--ic-action-default-selected:var(--ic-action-default-selected-dark);--ic-action-destructive:var(--ic-action-destructive-dark);--ic-action-destructive-hover:var(--ic-action-destructive-hover-dark);--ic-action-destructive-pressed:var(--ic-action-destructive-pressed-dark);--ic-action-neutral:var(--ic-action-neutral-dark);--ic-color-hyperlink-default:var(--ic-color-hyperlink-default-dark);--ic-color-hyperlink-visited:var(--ic-color-hyperlink-visited-dark);--ic-color-hyperlink-visited-monochrome:var(
+  );--ic-color-border-error:var(--ic-color-border-error-default-dark);--ic-color-border-error-hover:var(--ic-color-border-error-hover-dark);--ic-color-border-error-pressed:var(--ic-color-border-error-pressed-dark);--ic-color-border-action:var(--ic-color-border-action-default-dark);--ic-color-border-action-hover:var(--ic-color-border-action-hover-dark);--ic-color-border-action-pressed:var(--ic-color-border-action-pressed-dark);--ic-action-default:var(--ic-action-default-dark);--ic-action-default-hover:var(--ic-action-default-hover-dark);--ic-action-default-pressed:var(--ic-action-default-pressed-dark);--ic-action-default-selected:var(--ic-action-default-selected-dark);--ic-action-destructive:var(--ic-action-destructive-dark);--ic-action-destructive-hover:var(--ic-action-destructive-hover-dark);--ic-action-destructive-pressed:var(--ic-action-destructive-pressed-dark);--ic-action-monochrome-default:var(--ic-action-monochrome-dark);--ic-action-monochrome-default-hover:var(--ic-action-monochrome-hover-dark);--ic-action-monochrome-default-pressed:var(
+    --ic-action-monochrome-pressed-dark
+  );--ic-action-neutral:var(--ic-action-neutral-dark);--ic-color-hyperlink-default:var(--ic-color-hyperlink-default-dark);--ic-color-hyperlink-visited:var(--ic-color-hyperlink-visited-dark);--ic-color-hyperlink-visited-monochrome:var(
     --ic-color-hyperlink-visited-monochrome-dark
-  );--ic-status-success:var(--ic-status-success-dark);--ic-status-warning:var(--ic-status-warning-dark);--ic-status-error:var(--ic-status-error-dark);--ic-status-anomalous:var(--ic-status-anomalous-dark);--ic-status-info:var(--ic-status-info-dark);--ic-status-unknown:var(--ic-status-unknown-dark);--ic-color-icon-grey:var(--ic-color-icon-grey-dark);--ic-color-icon-hover:var(--ic-color-icon-hover-dark);--ic-color-icon-pressed:var(--ic-color-icon-pressed-dark);--ic-color-icon-disabled:var(--ic-color-icon-disabled-dark);--ic-color-icon-action-default:var(--ic-color-icon-action-default-dark);--ic-color-icon-error:var(--ic-color-icon-error-dark);--ic-atoms-input-field-background:var(
+  );--ic-status-success:var(--ic-status-success-dark);--ic-status-success-default-color:var(--ic-status-success-default-dm);--ic-status-success-contrast-color:var(--ic-status-success-contrast-dm);--ic-status-warning:var(--ic-status-warning-dark);--ic-status-warning-default-color:var(--ic-status-warning-default-dm);--ic-status-warning-dark-color:var(--ic-status-warning-dark-dm);--ic-status-error:var(--ic-status-error-dark);--ic-status-error-default-color:var(--ic-status-error-default-dm);--ic-status-error-dark-color:var(--ic-status-error-dark-dm);--ic-status-anomalous:var(--ic-status-anomalous-dark);--ic-status-anomalous-default-color:var(--ic-status-anomalous-default-dm);--ic-status-info:var(--ic-status-info-dark);--ic-status-info-light-color:var(--ic-status-info-light-dm);--ic-status-info-dark-color:var(--ic-status-info-dark-dm);--ic-status-unknown:var(--ic-status-unknown-dark);--ic-status-neutral:var(--ic-status-unknown-default-dm);--ic-status-neutral-light:var(--ic-status-unknown-light-dm);--ic-status-neutral-dark:var(--ic-status-unknown-dark-dm);--ic-color-icon-grey:var(--ic-color-icon-grey-dark);--ic-color-icon-hover:var(--ic-color-icon-hover-dark);--ic-color-icon-pressed:var(--ic-color-icon-pressed-dark);--ic-color-icon-disabled:var(--ic-color-icon-disabled-dark);--ic-color-icon-action-default:var(--ic-color-icon-action-default-dark);--ic-color-icon-action-default-hover:var(--ic-color-icon-action-hover-dark);--ic-color-icon-action-default-pressed:var(
+    --ic-color-icon-action-pressed-dark
+  );--ic-color-icon-error:var(--ic-color-icon-error-dark);--ic-atoms-input-field-background:var(
     --ic-atoms-input-field-background-dark
   );--ic-atoms-input-field-label:var(--ic-atoms-input-field-label-dark);--ic-atoms-input-field-label-disabled:var(
     --ic-atoms-input-field-label-disabled-dark
@@ -1244,9 +1256,9 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
   );--ic-button-secondary-background-pressed-active:var(
     --ic-action-default-bg-pressed
   );--ic-button-secondary-background-hover-monochrome:var(
-    --ic-action-dark-bg-hover
+    --ic-action-light-bg-hover
   );--ic-button-secondary-background-pressed-monochrome:var(
-    --ic-action-dark-bg-pressed
+    --ic-action-light-bg-pressed
   );--ic-button-secondary-background-non-transparent-hover:linear-gradient(
     var(--ic-button-secondary-background-hover-active) 0 0
   );--ic-button-secondary-background-non-transparent-active:linear-gradient(
@@ -1312,9 +1324,9 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
   );--ic-button-tertiary-background-monochrome:var(
     --ic-color-background-neutral
   );--ic-button-tertiary-background-hover-monochrome:var(
-    --ic-action-dark-bg-hover
+    --ic-action-light-bg-hover
   );--ic-button-tertiary-background-pressed-monochrome:var(
-    --ic-action-dark-bg-pressed
+    --ic-action-light-bg-pressed
   );--ic-button-tertiary-background-non-transparent-monochrome-hover:linear-gradient(
     var(--ic-button-tertiary-background-hover-monochrome) 0 0
   );--ic-button-tertiary-background-non-transparent-monochrome-active:linear-gradient(
@@ -1593,7 +1605,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
   );--ic-status-error-pressed:rgb(
     calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
       calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
-  );--ic-status-info-default:var(--ic-blue-900);--ic-status-info-default-dm:var(--ic-blue-900);--ic-status-info-light:var(--ic-blue-0);--ic-status-info-light-dm:var(--ic-blue-100);--ic-status-info-dark:var(--ic-blue-1600);--ic-status-info-dark-dm:var(--ic-blue-1700);--ic-status-info-contrast:var(--ic-blue-400);--ic-status-info-contrast-dm:var(--ic-blue-400);--ic-status-anomalous-default:var(--ic-purple-1400);--ic-status-anomalous-default-dm:var(--ic-purple-500);--ic-status-anomalous-light:var(--ic-purple-50);--ic-status-anomalous-light-dm:var(--ic-purple-50);--ic-status-anomalous-dark:var(--ic-purple-1800);--ic-status-anomalous-dark-dm:var(--ic-purple-1800);--ic-status-anomalous-contrast:var(--ic-purple-400);--ic-status-anomalous-contrast-dm:var(--ic-purple-400);--ic-status-unknown-default:var(--ic-architectural-500);--ic-status-unknown-default-dm:var(--ic-architectural-300);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-light-dm:var(--ic-architectural-100);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-unknown-dark-dm:var(--ic-architectural-850);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown-contrast-dm:var(--ic-architectural-300);--ic-color-brand-text:var(--ic-architectural-20);--ic-color-text-primary-light:var(--ic-architectural-950);--ic-color-text-primary-dark:var(--ic-architectural-40);--ic-color-text-secondary-light:var(--ic-architectural-700);--ic-color-text-secondary-dark:var(--ic-architectural-100);--ic-color-text-tertiary-light:var(--ic-architectural-500);--ic-color-text-tertiary-dark:var(--ic-architectural-200);--ic-color-text-inverted:var(--ic-architectural-white);--ic-color-text-disabled-mid:var(--ic-architectural-300);--ic-color-text-disabled-light:var(--ic-architectural-200);--ic-color-text-disabled-dark:var(--ic-architectural-600);--ic-color-text-inactive:var(--ic-architectural-400);--ic-color-text-action-light:var(--ic-blue-800);--ic-color-text-action-dark:var(--ic-blue-400);--ic-color-text-action-hover-light:var(--ic-blue-1100);--ic-color-text-action-hover-dark:var(--ic-blue-200);--ic-color-text-action-pressed-light:var(--ic-blue-1300);--ic-color-text-action-pressed-dark:var(--ic-blue-100);--ic-color-text-error-light:var(--ic-red-400);--ic-color-text-error-dark:var(--ic-red-800);--ic-color-text-action-monochrome-light:var(--ic-architectural-800);--ic-color-text-action-monochrome-dark:var(--ic-architectural-white);--ic-color-text-action-monochrome-hover-light:var(--ic-architectural-850);--ic-color-text-action-monochrome-hover-dark:var(--ic-architectural-40);--ic-color-text-action-monochrome-pressed-light:var(--ic-architectural-950);--ic-color-text-action-monochrome-pressed-dark:var(--ic-architectural-60);--ic-color-background-primary-light:var(--ic-architectural-white);--ic-color-background-primary-dark:var(--ic-architectural-850);--ic-color-background-secondary-light:var(--ic-architectural-20);--ic-color-background-secondary-40:var(--ic-architectural-40);--ic-color-background-secondary-dark:var(--ic-architectural-700);--ic-color-background-neutral-light:var(--ic-architectural-800);--ic-color-background-neutral-dark:var(--ic-architectural-950);--ic-color-background-active-light:var(--ic-blue-800);--ic-color-background-active-dark:var(--ic-blue-400);--ic-color-background-hover-default:var(--ic-blue-1100);--ic-color-background-hover-light:var(--ic-architectural-200);--ic-color-background-hover-dark:var(--ic-architectural-800);--ic-color-background-active-hover-light:var(--ic-blue-1100);--ic-color-background-active-hover-dark:var(--ic-blue-200);--ic-color-background-pressed-default:var(--ic-blue-1300);--ic-color-background-pressed-light:var(--ic-architectural-300);--ic-color-background-pressed-dark:var(--ic-architectural-700);--ic-color-background-active-pressed-light:var(--ic-blue-1300);--ic-color-background-active-pressed-dark:var(--ic-blue-100);--ic-color-background-disabled-default:var(--ic-architectural-200);--ic-color-background-disabled-light:var(--ic-architectural-80);--ic-color-background-disabled-dark:var(--ic-architectural-300);--ic-color-background-disabled-mid:var(--ic-architectural-400);--ic-color-background-disabled-darkest:var(--ic-architectural-600);--ic-color-background-disabled-selected:var(--ic-blue-1500);--ic-color-background-selected:var(--ic-architectural-white);--ic-color-background-clear-icon-hover:var(--ic-architectural-100);--ic-color-background-elevation-level-1:var(--ic-architectural-950);--ic-color-background-elevation-level-2:var(--ic-architectural-900);--ic-color-background-elevation-level-3:var(--ic-architectural-850);--ic-color-background-elevation-level-4:var(--ic-architectural-800);--ic-color-background-success-light:var(--ic-green-1400);--ic-color-background-success-dark:var(--ic-green-300);--ic-color-background-warning-light:var(--ic-yellow-400);--ic-color-background-warning-dark:var(--ic-yellow-300);--ic-color-background-destructive-light:var(--ic-red-800);--ic-color-background-destructive-dark:var(--ic-red-600);--ic-color-background-destructive-hover-light:var(--ic-red-1100);--ic-color-background-destructive-hover-dark:var(--ic-red-400);--ic-color-background-destructive-pressed-light:var(--ic-red-1300);--ic-color-background-destructive-pressed-dark:var(--ic-red-200);--ic-color-border-neutral-default:var(--ic-architectural-300);--ic-color-border-neutral-default-dark:var(--ic-architectural-500);--ic-color-border-neutral-black:var(--ic-architectural-black);--ic-color-border-neutral-white:var(--ic-architectural-white);--ic-color-border-neutral-grey-light:var(--ic-architectural-40);--ic-color-border-neutral-grey-dark:var(--ic-architectural-400);--ic-color-border-neutral-pressed-default:var(--ic-architectural-600);--ic-color-border-neutral-pressed-light:var(--ic-architectural-200);--ic-color-border-neutral-pressed-dark:var(--ic-architectural-200);--ic-color-border-neutral-hover-default:var(--ic-architectural-500);--ic-color-border-neutral-hover-light:var(--ic-architectural-200);--ic-color-border-neutral-hover-dark:var(--ic-architectural-300);--ic-color-border-neutral-disabled-light:var(--ic-architectural-200);--ic-color-border-neutral-disabled-mid:var(--ic-architectural-300);--ic-color-border-neutral-disabled-dark:var(--ic-architectural-600);--ic-color-border-monochrome-light:var(--ic-architectural-800);--ic-color-border-monochrome-dark:var(--ic-architectural-white);--ic-color-border-monochrome-hover-light:var(--ic-architectural-40);--ic-color-border-monochrome-hover-dark:var(--ic-architectural-850);--ic-color-border-monochrome-pressed-light:var(--ic-architectural-60);--ic-color-border-monochrome-pressed-dark:var(--ic-architectural-950);--ic-color-border-success-default:var(--ic-green-1400);--ic-color-border-success-default-dark:var(--ic-green-1000);--ic-color-border-success-hover-light:var(--ic-green-1600);--ic-color-border-success-hover-dark:var(--ic-green-800);--ic-color-border-success-pressed-light:var(--ic-green-1700);--ic-color-border-success-pressed-dark:var(--ic-green-700);--ic-color-border-warning-default:var(--ic-yellow-900);--ic-color-border-warning-default-dark:var(--ic-yellow-800);--ic-color-border-warning-hover-light:var(--ic-yellow-1100);--ic-color-border-warning-hover-dark:var(--ic-yellow-600);--ic-color-border-warning-pressed-light:var(--ic-yellow-1200);--ic-color-border-warning-pressed-dark:var(--ic-yellow-500);--ic-color-border-error-default:var(--ic-red-800);--ic-color-border-error-default-dark:var(--ic-red-900);--ic-color-border-error-hover-light:var(--ic-red-1000);--ic-color-border-error-hover-dark:var(--ic-red-700);--ic-color-border-error-pressed-light:var(--ic-red-1100);--ic-color-border-error-pressed-dark:var(--ic-red-600);--ic-color-border-action-default:var(--ic-blue-800);--ic-color-border-action-default-dark:var(--ic-blue-400);--ic-color-border-action-hover-light:var(--ic-blue-1100);--ic-color-border-action-hover-dark:var(--ic-blue-200);--ic-color-border-action-pressed-light:var(--ic-blue-1300);--ic-color-border-action-pressed-dark:var(--ic-blue-100);--ic-action-default-light:var(--ic-blue-800);--ic-action-default-dark:var(--ic-blue-400);--ic-action-default-hover-light:var(--ic-blue-1100);--ic-action-default-hover-dark:var(--ic-blue-200);--ic-action-default-pressed-light:var(--ic-blue-1300);--ic-action-default-pressed-dark:var(--ic-blue-100);--ic-action-default-selected-light:var(--ic-blue-800-state-layer-10);--ic-action-default-selected-dark:var(--ic-blue-900);--ic-action-default-disabled:var(--ic-blue-50);--ic-action-default-active-alpha:var(--ic-blue-800-state-layer-50);--ic-action-default-bg-hover:var(--ic-blue-800-state-layer-10);--ic-action-default-bg-hover-24:var(--ic-blue-800-state-layer-24);--ic-action-default-bg-pressed-30:var(--ic-blue-800-state-layer-30);--ic-action-default-bg-pressed-hover-34:var(--ic-blue-800-state-layer-34);--ic-action-default-bg-pressed:var(--ic-blue-800-state-layer-20);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-pressed-no-alpha:#d0def2;--ic-action-destructive-light:var(--ic-red-800);--ic-action-destructive-dark:var(--ic-red-600);--ic-action-destructive-hover-light:var(--ic-red-1100);--ic-action-destructive-hover-dark:var(--ic-red-400);--ic-action-destructive-pressed-light:var(--ic-red-1300);--ic-action-destructive-pressed-dark:var(--ic-red-200);--ic-action-light-bg-hover:var(--ic-state-layer-lighten-10);--ic-action-light-bg-hover-24:var(--ic-architectural-white-state-layer-24);--ic-action-light-bg-pressed:var(--ic-state-layer-lighten-20);--ic-action-light-bg-pressed-34:var(--ic-architectural-white-state-layer-34);--ic-action-dark-bg-hover:var(--ic-architectural-700-state-layer-10);--ic-action-dark-bg-pressed:var(--ic-architectural-700-state-layer-20);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-action-neutral-light:var(--ic-architectural-100);--ic-action-neutral-dark:var(--ic-architectural-800);--ic-action-monochrome:var(--ic-architectural-40);--ic-action-monochrome-dark:var(--ic-architectural-950);--ic-action-monochrome-hover:var(--ic-architectural-200);--ic-action-monochrome-hover-dark:var(--ic-architectural-800);--ic-action-monochrome-pressed:var(--ic-architectural-300);--ic-action-monochrome-pressed-dark:var(--ic-architectural-700);--ic-brand-blue-primary:#1b3c79;--ic-brand-blue-primary-r:27;--ic-brand-blue-primary-g:60;--ic-brand-blue-primary-b:121;--ic-brand-blue-primary-a:1;--ic-brand-darken-20:var(--ic-state-layer-darken-20);--ic-brand-darken-30:var(--ic-state-layer-darken-30);--ic-brand-darken-40:var(--ic-state-layer-darken-40);--ic-brand-lighten-20:var(--ic-state-layer-lighten-20);--ic-brand-lighten-40:var(--ic-state-layer-lighten-40);--ic-brand-color-primary-r:var(--ic-brand-blue-primary-r);--ic-brand-color-primary-g:var(--ic-brand-blue-primary-g);--ic-brand-color-primary-b:var(--ic-brand-blue-primary-b);--ic-brand-color-primary-a:var(--ic-brand-blue-primary-a);--ic-brand-color-primary:rgb(
+  );--ic-status-info-default:var(--ic-blue-900);--ic-status-info-default-dm:var(--ic-blue-900);--ic-status-info-light:var(--ic-blue-0);--ic-status-info-light-dm:var(--ic-blue-100);--ic-status-info-dark:var(--ic-blue-1600);--ic-status-info-dark-dm:var(--ic-blue-1700);--ic-status-info-contrast:var(--ic-blue-400);--ic-status-info-contrast-dm:var(--ic-blue-400);--ic-status-anomalous-default:var(--ic-purple-1400);--ic-status-anomalous-default-dm:var(--ic-purple-500);--ic-status-anomalous-light:var(--ic-purple-50);--ic-status-anomalous-light-dm:var(--ic-purple-50);--ic-status-anomalous-dark:var(--ic-purple-1800);--ic-status-anomalous-dark-dm:var(--ic-purple-1800);--ic-status-anomalous-contrast:var(--ic-purple-400);--ic-status-anomalous-contrast-dm:var(--ic-purple-400);--ic-status-unknown-default:var(--ic-architectural-500);--ic-status-unknown-default-dm:var(--ic-architectural-300);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-light-dm:var(--ic-architectural-100);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-unknown-dark-dm:var(--ic-architectural-850);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown-contrast-dm:var(--ic-architectural-300);--ic-color-brand-text:var(--ic-architectural-20);--ic-color-text-primary-light:var(--ic-architectural-950);--ic-color-text-primary-dark:var(--ic-architectural-40);--ic-color-text-secondary-light:var(--ic-architectural-700);--ic-color-text-secondary-dark:var(--ic-architectural-100);--ic-color-text-tertiary-light:var(--ic-architectural-500);--ic-color-text-tertiary-dark:var(--ic-architectural-200);--ic-color-text-inverted:var(--ic-architectural-white);--ic-color-text-disabled-mid:var(--ic-architectural-300);--ic-color-text-disabled-light:var(--ic-architectural-200);--ic-color-text-disabled-dark:var(--ic-architectural-600);--ic-color-text-inactive:var(--ic-architectural-400);--ic-color-text-action-light:var(--ic-blue-800);--ic-color-text-action-dark:var(--ic-blue-400);--ic-color-text-action-hover-light:var(--ic-blue-1100);--ic-color-text-action-hover-dark:var(--ic-blue-200);--ic-color-text-action-pressed-light:var(--ic-blue-1300);--ic-color-text-action-pressed-dark:var(--ic-blue-100);--ic-color-text-error-light:var(--ic-red-400);--ic-color-text-error-dark:var(--ic-red-800);--ic-color-text-action-monochrome-light:var(--ic-architectural-800);--ic-color-text-action-monochrome-dark:var(--ic-architectural-white);--ic-color-text-action-monochrome-hover-light:var(--ic-architectural-850);--ic-color-text-action-monochrome-hover-dark:var(--ic-architectural-40);--ic-color-text-action-monochrome-pressed-light:var(--ic-architectural-950);--ic-color-text-action-monochrome-pressed-dark:var(--ic-architectural-60);--ic-color-background-primary-light:var(--ic-architectural-white);--ic-color-background-primary-dark:var(--ic-architectural-850);--ic-color-background-secondary-light:var(--ic-architectural-20);--ic-color-background-secondary-40:var(--ic-architectural-40);--ic-color-background-secondary-dark:var(--ic-architectural-700);--ic-color-background-neutral-light:var(--ic-architectural-800);--ic-color-background-neutral-dark:var(--ic-architectural-950);--ic-color-background-active-light:var(--ic-blue-800);--ic-color-background-active-dark:var(--ic-blue-400);--ic-color-background-hover-default:var(--ic-blue-1100);--ic-color-background-hover-light:var(--ic-architectural-200);--ic-color-background-hover-dark:var(--ic-architectural-800);--ic-color-background-active-hover-light:var(--ic-blue-1100);--ic-color-background-active-hover-dark:var(--ic-blue-200);--ic-color-background-pressed-default:var(--ic-blue-1300);--ic-color-background-pressed-light:var(--ic-architectural-300);--ic-color-background-pressed-dark:var(--ic-architectural-700);--ic-color-background-active-pressed-light:var(--ic-blue-1300);--ic-color-background-active-pressed-dark:var(--ic-blue-100);--ic-color-background-disabled-default:var(--ic-architectural-200);--ic-color-background-disabled-light:var(--ic-architectural-80);--ic-color-background-disabled-dark:var(--ic-architectural-300);--ic-color-background-disabled-mid:var(--ic-architectural-400);--ic-color-background-disabled-darkest:var(--ic-architectural-600);--ic-color-background-disabled-selected:var(--ic-blue-1500);--ic-color-background-selected:var(--ic-architectural-white);--ic-color-background-clear-icon-hover:var(--ic-architectural-100);--ic-color-background-elevation-level-1:var(--ic-architectural-950);--ic-color-background-elevation-level-2:var(--ic-architectural-900);--ic-color-background-elevation-level-3:var(--ic-architectural-850);--ic-color-background-elevation-level-4:var(--ic-architectural-800);--ic-color-page-background-light:var(--ic-architectural-white);--ic-color-page-background-dark:var(--ic-architectural-900);--ic-color-background-success-light:var(--ic-green-1400);--ic-color-background-success-dark:var(--ic-green-300);--ic-color-background-warning-light:var(--ic-yellow-400);--ic-color-background-warning-dark:var(--ic-yellow-300);--ic-color-background-destructive-light:var(--ic-red-800);--ic-color-background-destructive-dark:var(--ic-red-600);--ic-color-background-destructive-hover-light:var(--ic-red-1100);--ic-color-background-destructive-hover-dark:var(--ic-red-400);--ic-color-background-destructive-pressed-light:var(--ic-red-1300);--ic-color-background-destructive-pressed-dark:var(--ic-red-200);--ic-color-border-neutral-default:var(--ic-architectural-300);--ic-color-border-neutral-default-dark:var(--ic-architectural-500);--ic-color-border-neutral-black:var(--ic-architectural-black);--ic-color-border-neutral-white:var(--ic-architectural-white);--ic-color-border-neutral-grey-light:var(--ic-architectural-40);--ic-color-border-neutral-grey-dark:var(--ic-architectural-400);--ic-color-border-neutral-pressed-default:var(--ic-architectural-600);--ic-color-border-neutral-pressed-light:var(--ic-architectural-200);--ic-color-border-neutral-pressed-dark:var(--ic-architectural-200);--ic-color-border-neutral-hover-default:var(--ic-architectural-500);--ic-color-border-neutral-hover-light:var(--ic-architectural-200);--ic-color-border-neutral-hover-dark:var(--ic-architectural-300);--ic-color-border-neutral-disabled-light:var(--ic-architectural-200);--ic-color-border-neutral-disabled-mid:var(--ic-architectural-300);--ic-color-border-neutral-disabled-dark:var(--ic-architectural-600);--ic-color-border-monochrome-light:var(--ic-architectural-800);--ic-color-border-monochrome-dark:var(--ic-architectural-white);--ic-color-border-monochrome-hover-light:var(--ic-architectural-40);--ic-color-border-monochrome-hover-dark:var(--ic-architectural-850);--ic-color-border-monochrome-pressed-light:var(--ic-architectural-60);--ic-color-border-monochrome-pressed-dark:var(--ic-architectural-950);--ic-color-border-success-default:var(--ic-green-1400);--ic-color-border-success-default-dark:var(--ic-green-1000);--ic-color-border-success-hover-light:var(--ic-green-1600);--ic-color-border-success-hover-dark:var(--ic-green-800);--ic-color-border-success-pressed-light:var(--ic-green-1700);--ic-color-border-success-pressed-dark:var(--ic-green-700);--ic-color-border-warning-default:var(--ic-yellow-900);--ic-color-border-warning-default-dark:var(--ic-yellow-800);--ic-color-border-warning-hover-light:var(--ic-yellow-1100);--ic-color-border-warning-hover-dark:var(--ic-yellow-600);--ic-color-border-warning-pressed-light:var(--ic-yellow-1200);--ic-color-border-warning-pressed-dark:var(--ic-yellow-500);--ic-color-border-error-default:var(--ic-red-800);--ic-color-border-error-default-dark:var(--ic-red-900);--ic-color-border-error-hover-light:var(--ic-red-1000);--ic-color-border-error-hover-dark:var(--ic-red-700);--ic-color-border-error-pressed-light:var(--ic-red-1100);--ic-color-border-error-pressed-dark:var(--ic-red-600);--ic-color-border-action-default:var(--ic-blue-800);--ic-color-border-action-default-dark:var(--ic-blue-400);--ic-color-border-action-hover-light:var(--ic-blue-1100);--ic-color-border-action-hover-dark:var(--ic-blue-200);--ic-color-border-action-pressed-light:var(--ic-blue-1300);--ic-color-border-action-pressed-dark:var(--ic-blue-100);--ic-action-default-light:var(--ic-blue-800);--ic-action-default-dark:var(--ic-blue-400);--ic-action-default-hover-light:var(--ic-blue-1100);--ic-action-default-hover-dark:var(--ic-blue-200);--ic-action-default-pressed-light:var(--ic-blue-1300);--ic-action-default-pressed-dark:var(--ic-blue-100);--ic-action-default-selected-light:var(--ic-blue-800-state-layer-10);--ic-action-default-selected-dark:var(--ic-blue-900);--ic-action-default-disabled:var(--ic-blue-50);--ic-action-default-active-alpha:var(--ic-blue-800-state-layer-50);--ic-action-default-bg-hover:var(--ic-blue-800-state-layer-10);--ic-action-default-bg-hover-24:var(--ic-blue-800-state-layer-24);--ic-action-default-bg-pressed-30:var(--ic-blue-800-state-layer-30);--ic-action-default-bg-pressed-hover-34:var(--ic-blue-800-state-layer-34);--ic-action-default-bg-pressed:var(--ic-blue-800-state-layer-20);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-pressed-no-alpha:#d0def2;--ic-action-destructive-light:var(--ic-red-800);--ic-action-destructive-dark:var(--ic-red-600);--ic-action-destructive-hover-light:var(--ic-red-1100);--ic-action-destructive-hover-dark:var(--ic-red-400);--ic-action-destructive-pressed-light:var(--ic-red-1300);--ic-action-destructive-pressed-dark:var(--ic-red-200);--ic-action-light-bg-hover:var(--ic-state-layer-lighten-10);--ic-action-light-bg-hover-24:var(--ic-architectural-white-state-layer-24);--ic-action-light-bg-pressed:var(--ic-state-layer-lighten-20);--ic-action-light-bg-pressed-34:var(--ic-architectural-white-state-layer-34);--ic-action-dark-bg-hover:var(--ic-architectural-700-state-layer-10);--ic-action-dark-bg-pressed:var(--ic-architectural-700-state-layer-20);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-action-neutral-light:var(--ic-architectural-100);--ic-action-neutral-dark:var(--ic-architectural-800);--ic-action-monochrome:var(--ic-architectural-40);--ic-action-monochrome-dark:var(--ic-architectural-950);--ic-action-monochrome-hover:var(--ic-architectural-200);--ic-action-monochrome-hover-dark:var(--ic-architectural-800);--ic-action-monochrome-pressed:var(--ic-architectural-300);--ic-action-monochrome-pressed-dark:var(--ic-architectural-700);--ic-brand-blue-primary:#1b3c79;--ic-brand-blue-primary-r:27;--ic-brand-blue-primary-g:60;--ic-brand-blue-primary-b:121;--ic-brand-blue-primary-a:1;--ic-brand-darken-20:var(--ic-state-layer-darken-20);--ic-brand-darken-30:var(--ic-state-layer-darken-30);--ic-brand-darken-40:var(--ic-state-layer-darken-40);--ic-brand-lighten-20:var(--ic-state-layer-lighten-20);--ic-brand-lighten-40:var(--ic-state-layer-lighten-40);--ic-brand-color-primary-r:var(--ic-brand-blue-primary-r);--ic-brand-color-primary-g:var(--ic-brand-blue-primary-g);--ic-brand-color-primary-b:var(--ic-brand-blue-primary-b);--ic-brand-color-primary-a:var(--ic-brand-blue-primary-a);--ic-brand-color-primary:rgb(
     var(--ic-brand-color-primary-r) var(--ic-brand-color-primary-g)
       var(--ic-brand-color-primary-b) / var(--ic-brand-color-primary-a)
   );--ic-brand-color-secondary:rgb(
@@ -1694,7 +1706,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
   );--ic-atoms-input-select-content-divider-light:var(
     --ic-color-icon-grey-default
   );--ic-atoms-input-select-content-divider-dark:var(--ic-color-icon-grey-light);--ic-atoms-input-select-content-text-cursor-light:var(
-    --ic-color-text-action
+    --ic-color-text-action-light
   );--ic-atoms-input-select-content-text-cursor-dark:var(
     --ic-color-text-action-dark
   );--ic-atoms-input-text-field-content-placeholder-light:var(
@@ -1717,7 +1729,9 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-color-text-disabled-mid
   );--ic-atoms-input-text-area-content-disabled-dark:var(
     --ic-color-text-disabled-dark
-  );--ic-atoms-input-text-area-content-cursor-light:var(--ic-color-text-action);--ic-atoms-input-text-area-content-cursor-dark:var(
+  );--ic-atoms-input-text-area-content-cursor-light:var(
+    --ic-color-text-action-light
+  );--ic-atoms-input-text-area-content-cursor-dark:var(
     --ic-color-text-action-dark
   );--ic-atoms-input-text-area-content-icon-light:var(--ic-color-icon-neutral);--ic-atoms-input-text-area-content-icon-dark:var(--ic-color-icon-inverted);--ic-atoms-input-text-area-content-icon-disabled-light:var(
     --ic-color-icon-disabled-mid
@@ -1831,4 +1845,4 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     inset 0 0 0 8px var(--ic-architectural-black);--ic-border-hc:var(--ic-space-1px) solid transparent;--ic-border-keyline-darken:1px solid var(--ic-color-keyline-darken);--ic-border-keyline-lighten:1px solid var(--ic-color-keyline-lighten)}:root{--ic-elevation-raised:0 0 2px rgb(0 0 0 / 50%);--ic-elevation-overlay:0 2px 8px rgb(0 0 0 / 20%);--ic-elevation-modal:0 4px 16px rgb(0 0 0 / 25%);--ic-elevation-inset:inset 0 4px 16px rgb(0 0 0 / 25%),
     inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
     cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
-    cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-skip-link:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}
+    cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200);--ic-z-index-skip-link:calc(var(--ic-z-index-base-value) + 210)}

package/dist/performance-tests/App.js

@@ -1,17 +1,119 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Routes, Route } from "react-router-dom";
-import IcButtonPage from "./pages/IcButton";
-import MultipleIcButtonsPage from "./pages/MultipleIcButtons";
-import IcCheckboxPage from "./pages/IcCheckbox";
+import IcButtonSinglePage from "./pages/IcButton/IcButtonSingle";
+import IcButtonMultiplePage from "./pages/IcButton/IcButtonMultiple";
+import IcButtonVariantsPage from "./pages/IcButton/IcButtonVariants";
+import IcButtonEventsPage from "./pages/IcButton/IcButtonWithEvents";
+import IcCheckboxSinglePage from "./pages/IcCheckbox/IcCheckboxSingle";
+import IcCheckboxMultiplePage from "./pages/IcCheckbox/IcCheckboxMultiple";
+import IcCheckboxBasicMultiplePage from "./pages/IcCheckbox/IcCheckboxBasicMultiple";
+import IcSideNavigationPage from "./pages/IcSideNavigation/IcSideNavigationClosed";
+import IcSideNavigationExpandedPage from "./pages/IcSideNavigation/IcSideNavigationExpanded";
+import IcTopNavigationBasicPage from "./pages/IcTopNavigation/IcTopNavigationBasic";
+import IcTopNavigationPage from "./pages/IcTopNavigation/IcTopNavigationWithNavigation";
+import IcPopoverMenuSinglePage from "./pages/IcPopoverMenu/IcPopoverMenuSingle";
+import IcPopoverMenuMultiplePage from "./pages/IcPopoverMenu/IcPopoverMenuMultiple";
+import IcPopoverMenuNotRenderedPage from "./pages/IcPopoverMenu/IcPopoverMenuMultipleNotRendered";
+import IcAccordionSinglePage from "./pages/IcAccordion/IcAccordionSingle";
+import IcAccordionMultiplePage from "./pages/IcAccordion/IcAccordionMultiple";
+import IcDialogSinglePage from "./pages/IcDialog/IcDialogSingle";
+import IcDialogSlottedContentPage from "./pages/IcDialog/IcDialogSlottedContent";
+import IcDialogMultiplePage from "./pages/IcDialog/IcDialogMultiple";
+import IcDialogAllOpenPage from "./pages/IcDialog/IcDialogAllOpen";
+import IcSelectSinglePage from "./pages/IcSelect/Single/IcSelectSingle";
+import IcSelectVariantsPage from "./pages/IcSelect/Single/IcSelectVariants";
+import IcSelectMultiplePage from "./pages/IcSelect/Single/IcSelectMultiple";
+import IcSearchableSelectSinglePage from "./pages/IcSelect/Searchable/IcSelectSearchableSingle";
+import IcSelectSearchableVariantsPage from "./pages/IcSelect/Searchable/IcSelectSearchableVariants";
+import IcSelectSearchableMultiplePage from "./pages/IcSelect/Searchable/IcSelectSearchableMultiple";
+import IcSelectMultiSinglePage from "./pages/IcSelect/Multi/IcSelectMultiSingle";
+import IcSelectMultiVariantsPage from "./pages/IcSelect/Multi/IcSelectMultiVariants";
+import IcSelectMultiMultiplePage from "./pages/IcSelect/Multi/IcSelectMultiMultiple";
+import IcSearchBarSinglePage from "./pages/IcSearchBar/IcSearchBarSingle";
+import IcSearchBarVariantsPage from "./pages/IcSearchBar/IcSearchBarVariants";
+import IcSearchBarMultiplePage from "./pages/IcSearchBar/IcSearchBarMultiple";
+import IcRadioSinglePage from "./pages/IcRadio/IcRadioSingle";
+import IcRadioVariantsPage from "./pages/IcRadio/IcRadioVariants";
+import IcRadioMultiplePage from "./pages/IcRadio/IcRadioMultiple";
+import IcToastSinglePage from "./pages/IcToast/IcToastSingle";
+import IcToastVariantsPage from "./pages/IcToast/IcToastVariants";
+import IcToastMultiplePage from "./pages/IcToast/IcToastMultiple";
+import IcHeroPage from "./pages/IcHero";
+import IcPageHeaderPage from "./pages/IcPageHeader";
+import IcFooterPage from "./pages/IcFooter";
+import IcStepperPage from "./pages/IcStepper";
+var getThemeFromUrl = function () {
+    var hash = window.location.hash;
+    var queryIndex = hash.indexOf("?");
+    if (queryIndex !== -1) {
+        var params = new URLSearchParams(hash.substring(queryIndex));
+        var theme = params.get("theme");
+        return theme === "dark" ? "dark" : "light";
+    }
+    return "light";
+};
 // Using React router to create pages
 // HashRouter (https://reactrouter.com/en/main/router-components/hash-router) is used so reloading the page doesn't re-direct to 404
 var App = function () {
+    var _a = useState(getThemeFromUrl()), theme = _a[0], setTheme = _a[1];
+    useEffect(function () {
+        var onPopState = function () { return setTheme(getThemeFromUrl()); };
+        window.addEventListener("popstate", onPopState);
+        return function () { return window.removeEventListener("popstate", onPopState); };
+    }, []);
+    useEffect(function () {
+        var colorVar = theme === "dark"
+            ? "--ic-color-page-background-dark"
+            : "--ic-color-background-primary-light";
+        document.body.style.backgroundColor = getComputedStyle(document.body)
+            .getPropertyValue(colorVar)
+            .trim();
+    }, [theme]);
     return (React.createElement(React.Fragment, null,
         React.createElement("main", null,
             React.createElement(Routes, null,
                 React.createElement(Route, { path: "/" },
-                    React.createElement(Route, { path: "buttons", element: React.createElement(IcButtonPage, null) }),
-                    React.createElement(Route, { path: "multiple-buttons", element: React.createElement(MultipleIcButtonsPage, null) }),
-                    React.createElement(Route, { path: "checkbox", element: React.createElement(IcCheckboxPage, null) }))))));
+                    React.createElement(Route, { path: "button", element: React.createElement(IcButtonSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "button-multiple", element: React.createElement(IcButtonMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "button-variants", element: React.createElement(IcButtonVariantsPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "button-events", element: React.createElement(IcButtonEventsPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "checkbox", element: React.createElement(IcCheckboxSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "checkbox-multiple", element: React.createElement(IcCheckboxMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "checkbox-basic-multiple", element: React.createElement(IcCheckboxBasicMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "side-navigation", element: React.createElement(IcSideNavigationPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "side-navigation-expanded", element: React.createElement(IcSideNavigationExpandedPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "top-navigation-basic", element: React.createElement(IcTopNavigationBasicPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "top-navigation", element: React.createElement(IcTopNavigationPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "popover-menu", element: React.createElement(IcPopoverMenuSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "popover-menu-multiple", element: React.createElement(IcPopoverMenuMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "popover-menu-multiple-not-rendered", element: React.createElement(IcPopoverMenuNotRenderedPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "accordion", element: React.createElement(IcAccordionSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "accordion-multiple", element: React.createElement(IcAccordionMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "dialog", element: React.createElement(IcDialogSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "dialog-slotted-content", element: React.createElement(IcDialogSlottedContentPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "dialog-multiple", element: React.createElement(IcDialogMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "dialog-all-open", element: React.createElement(IcDialogAllOpenPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "select", element: React.createElement(IcSelectSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "select-variants", element: React.createElement(IcSelectVariantsPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "select-multiple", element: React.createElement(IcSelectMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "searchable-select", element: React.createElement(IcSearchableSelectSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "searchable-select-variants", element: React.createElement(IcSelectSearchableVariantsPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "searchable-select-multiple", element: React.createElement(IcSelectSearchableMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "multi-select", element: React.createElement(IcSelectMultiSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "multi-select-variants", element: React.createElement(IcSelectMultiVariantsPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "multi-select-multiple", element: React.createElement(IcSelectMultiMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "searchbar", element: React.createElement(IcSearchBarSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "searchbar-variants", element: React.createElement(IcSearchBarVariantsPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "searchbar-multiple", element: React.createElement(IcSearchBarMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "radio", element: React.createElement(IcRadioSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "radio-variants", element: React.createElement(IcRadioVariantsPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "radio-multiple", element: React.createElement(IcRadioMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "toast", element: React.createElement(IcToastSinglePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "toast-variants", element: React.createElement(IcToastVariantsPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "toast-multiple", element: React.createElement(IcToastMultiplePage, { theme: theme }) }),
+                    React.createElement(Route, { path: "hero", element: React.createElement(IcHeroPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "page-header", element: React.createElement(IcPageHeaderPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "footer", element: React.createElement(IcFooterPage, { theme: theme }) }),
+                    React.createElement(Route, { path: "stepper", element: React.createElement(IcStepperPage, { theme: theme }) }))))));
 };
 export default App;

package/dist/performance-tests/pages/IcAccordion/IcAccordionMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcAccordionMultiplePage: React.FC<PageProps>;
+export default IcAccordionMultiplePage;

package/dist/performance-tests/pages/IcAccordion/IcAccordionMultiple/index.js

@@ -0,0 +1,25 @@
+// IcAccordionMultiplePage displays multiple accordion groups for the purpose of performance testing of the IcAccordion component.
+import React from "react";
+import { IcAccordion, IcAccordionGroup, IcTypography, IcTheme, } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var ACCORDION_ICON = (React.createElement(SlottedSVG, { slot: "icon", width: "20", height: "1em", viewBox: "0 0 512 512", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" })));
+var Accordion = function () { return (React.createElement(IcAccordionGroup, { label: "Title of the Accordion Group" },
+    React.createElement(IcAccordion, { heading: "Accordion 1" },
+        ACCORDION_ICON,
+        React.createElement(IcTypography, { variant: "body" }, "This is an example of the main body text")),
+    React.createElement(IcAccordion, { heading: "Accordion 2" },
+        ACCORDION_ICON,
+        React.createElement(IcTypography, { variant: "body" }, "This is an example of the main body text")),
+    React.createElement(IcAccordion, { heading: "Accordion 3" },
+        ACCORDION_ICON,
+        React.createElement(IcTypography, { variant: "body" }, "This is an example of the main body text")),
+    React.createElement(IcAccordion, { heading: "Accordion 4" },
+        ACCORDION_ICON,
+        React.createElement(IcTypography, { variant: "body" }, "This is an example of the main body text")))); };
+var IcAccordionMultiplePage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } }, Array.from({ length: 20 }).map(function (_, i) { return (React.createElement(Accordion, { key: i })); }))));
+};
+export default IcAccordionMultiplePage;

package/dist/performance-tests/pages/IcAccordion/IcAccordionSingle/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcAccordionSinglePage: React.FC<PageProps>;
+export default IcAccordionSinglePage;

package/dist/performance-tests/pages/IcAccordion/IcAccordionSingle/index.js

@@ -0,0 +1,17 @@
+// IcAccordionSinglePage displays a single nested accordion group for the purpose of performance testing of the IcAccordion component.
+import React from "react";
+import { IcAccordion, IcAccordionGroup, IcTypography, IcTheme, } from "../../../../components";
+var IcAccordionSinglePage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcAccordionGroup, { label: "Coffee" },
+                React.createElement(IcAccordion, { heading: "Cappuccino" },
+                    React.createElement(IcTypography, { variant: "body" }, "An espresso-based drink that is traditionally prepared with steamed milk foam.")),
+                React.createElement(IcAccordion, { heading: "Other coffees", expanded: true },
+                    React.createElement(IcAccordion, { heading: "Americano", expanded: true },
+                        React.createElement(IcTypography, { variant: "body" }, "An espresso-based drink that is diluted with hot water.")),
+                    React.createElement(IcAccordion, { heading: "Latte", expanded: true },
+                        React.createElement(IcTypography, { variant: "body" }, "A milkier coffee than a cappuccino.")))))));
+};
+export default IcAccordionSinglePage;

package/dist/performance-tests/pages/IcButton/IcButtonMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcButtonMultiplePage: React.FC<PageProps>;
+export default IcButtonMultiplePage;

package/dist/performance-tests/pages/IcButton/IcButtonMultiple/index.js

@@ -0,0 +1,15 @@
+// IcButtonMultiplePage displays multiple buttons for the purpose of performance testing of the IcButton component.
+import React from "react";
+import { IcButton, IcTheme, IcTypography } from "../../../../components";
+var IcButtonMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var buttons = Array.from({ length: 100 }, function (_, index) { return (React.createElement(IcButton, { key: index, style: { padding: "var(--ic-space-xs)" } },
+        "Button ",
+        index + 1)); });
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Button Multiple Page")),
+            buttons)));
+};
+export default IcButtonMultiplePage;

package/dist/performance-tests/pages/IcButton/IcButtonSingle/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcButtonSinglePage: React.FC<PageProps>;
+export default IcButtonSinglePage;

package/dist/performance-tests/pages/IcButton/IcButtonSingle/index.js

@@ -0,0 +1,12 @@
+// IcButtonSinglePage displays a single button for the purpose of performance testing of the IcButton component.
+import React from "react";
+import { IcButton, IcTheme, IcTypography } from "../../../../components";
+var IcButtonSinglePage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Button Page")),
+            React.createElement(IcButton, null, "Button"))));
+};
+export default IcButtonSinglePage;

package/dist/performance-tests/pages/IcButton/IcButtonVariants/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcButtonVariantsPage: React.FC<PageProps>;
+export default IcButtonVariantsPage;

package/dist/performance-tests/pages/IcButton/IcButtonVariants/index.js

@@ -0,0 +1,50 @@
+// IcButtonVariantsPage displays multiple button variants for the purpose of performance testing of the IcButton component.
+import React from "react";
+import { IcButton, IcTheme, IcTypography } from "../../../../components";
+import { SlottedSVG } from "../../../../react-component-lib/slottedSVG";
+var ICON = (React.createElement(SlottedSVG, { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", fill: "#000000" },
+    React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    React.createElement("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" })));
+var IcButtonVariantsPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Button Variants Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "0.5rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "6px",
+            } },
+            React.createElement(IcButton, { variant: "primary" }, "Primary"),
+            React.createElement(IcButton, { variant: "primary", size: "small" }, "Primary Small"),
+            React.createElement(IcButton, { variant: "primary", size: "large" }, "Primary Large"),
+            React.createElement(IcButton, { variant: "secondary" }, "Secondary"),
+            React.createElement(IcButton, { variant: "secondary", fullWidth: true }, "Secondary full width"),
+            React.createElement(IcButton, { variant: "tertiary" }, "Tertiary"),
+            React.createElement(IcButton, { variant: "destructive" }, "Destructive"),
+            React.createElement(IcButton, { variant: "primary", disabled: true }, "Primary - disabled"),
+            React.createElement(IcButton, { variant: "secondary", loading: true }, "Loading button"),
+            React.createElement(IcButton, { variant: "primary", dropdown: true }, "Dropdown"),
+            React.createElement(IcButton, { variant: "primary" },
+                React.createElement(SlottedSVG, { slot: "left-icon", xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", fill: "#000000" },
+                    React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                    React.createElement("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" })),
+                "With icon"),
+            React.createElement(IcButton, { variant: "icon-primary", "aria-label": "refresh" }, ICON),
+            React.createElement(IcButton, { variant: "icon-secondary", "aria-label": "refresh" }, ICON),
+            React.createElement(IcButton, { variant: "icon-tertiary", "aria-label": "refresh" }, ICON),
+            React.createElement(IcButton, { variant: "icon-destructive", "aria-label": "refresh" }, ICON),
+            React.createElement(IcButton, { variant: "icon", "aria-label": "you can disable tooltips on icon buttons", disableTooltip: true }, ICON),
+            React.createElement(IcButton, { variant: "primary", fileUpload: true, accept: ".doc, text/plain, .json, .png", onIcFileSelection: function (event) {
+                    return console.log("Single file upload", event.detail);
+                } }, "Upload file button"),
+            React.createElement(IcButton, { variant: "primary", fileUpload: true, multiple: true, accept: ".doc, text/plain, .json, .png", onIcFileSelection: function (event) {
+                    return console.log("Multiple files upload", event.detail);
+                } }, "Upload multiple files button"),
+            React.createElement(IcButton, { variant: "primary", monochrome: true }, "Monochrome"),
+            React.createElement(IcButton, { variant: "primary", theme: "dark", monochrome: true }, "Monochrome dark theme"))));
+};
+export default IcButtonVariantsPage;

package/dist/performance-tests/pages/IcButton/IcButtonWithEvents/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcButtonEventsPage: React.FC<PageProps>;
+export default IcButtonEventsPage;