@kaizen/components 2.3.7 → 2.5.0

package/dist/styles.css

@@ -559,7 +559,7 @@
   }
 }
 @layer kz-components {
-  .VisuallyHidden-module_srOnly__tTjOK {
+  .VisuallyHidden-module_srOnly__-f5sJ {
     clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
@@ -568,6 +568,7 @@
     width: 1px;
   }
 }
+
 @layer kz-components {
   .LoadingSpinner-module_loadingSpinner__Zc2mJ {
     --loading-spinner-size: 48px;
@@ -1019,161 +1020,190 @@
     visibility: hidden;
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-@layer tokens, normalize, reset, kz-components;
 @layer reset {
-  .Heading-module_heading__Gq6I8 {
+  .Heading-module_heading__6D0PM {
     margin: 0;
   }
 }
+
 @layer kz-components {
-  .Heading-module_display-0__yZ7rx {
-    font-family: var(--typography-display-0-font-family, "Tiempos Headline", Georgia, serif);
-    font-weight: var(--typography-display-0-font-weight, 800);
-    font-size: var(--typography-display-0-font-size, 4.5rem);
-    line-height: var(--typography-display-0-line-height, 5.25rem);
-    letter-spacing: var(--typography-display-0-letter-spacing, 0em);
+  .Heading-module_display-0__Dmiig {
+    font-family: var(--typography-display-0-font-family);
+    font-weight: var(--typography-display-0-font-weight);
+    font-size: var(--typography-display-0-font-size);
+    line-height: var(--typography-display-0-line-height);
+    letter-spacing: var(--typography-display-0-letter-spacing);
   }
-  .Heading-module_composable-header-title__mqQVh {
-    font-family: var(--typography-display-0-font-family, "Tiempos Headline", Georgia, serif);
-    font-weight: 500;
-    font-size: var(--typography-heading-1-font-size, 2.125rem);
-    line-height: var(--typography-heading-1-line-height, 2.625rem);
-    letter-spacing: var(--typography-heading-1-letter-spacing, normal);
-  }
-  .Heading-module_heading-1__PbAcw {
-    font-family: var(--typography-heading-1-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-heading-1-font-weight, 500);
-    font-size: var(--typography-heading-1-font-size, 2.125rem);
-    line-height: var(--typography-heading-1-line-height, 2.625rem);
-    letter-spacing: var(--typography-heading-1-letter-spacing, normal);
-  }
-  .Heading-module_heading-2__Ovpfe {
-    font-family: var(--typography-heading-2-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-heading-2-font-weight, 600);
-    font-size: var(--typography-heading-2-font-size, 1.75rem);
-    line-height: var(--typography-heading-2-line-height, 2.25rem);
-    letter-spacing: var(--typography-heading-2-letter-spacing, normal);
+
+  .Heading-module_composable-header-title__CPBzk {
+    font-family: var(--typography-display-0-font-family); /* Tiempos */
+    font-weight: 500; /* Medium */
+    font-size: var(--typography-heading-1-font-size);
+    line-height: var(--typography-heading-1-line-height);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
   }
-  .Heading-module_heading-3__S4Pb1 {
-    font-family: var(--typography-heading-3-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-heading-3-font-weight, 600);
-    font-size: var(--typography-heading-3-font-size, 1.375rem);
-    line-height: var(--typography-heading-3-line-height, 1.875rem);
-    letter-spacing: var(--typography-heading-3-letter-spacing, normal);
+
+  .Heading-module_heading-1__-GXEH {
+    font-family: var(--typography-heading-1-font-family);
+    font-weight: var(--typography-heading-1-font-weight);
+    font-size: var(--typography-heading-1-font-size);
+    line-height: var(--typography-heading-1-line-height);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
   }
-  .Heading-module_heading-4__IIiwi {
-    font-family: var(--typography-heading-4-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-heading-4-font-weight, 600);
-    font-size: var(--typography-heading-4-font-size, 1.125rem);
-    line-height: var(--typography-heading-4-line-height, 1.5rem);
-    letter-spacing: var(--typography-heading-4-letter-spacing, normal);
+
+  .Heading-module_heading-2__LiRAV {
+    font-family: var(--typography-heading-2-font-family);
+    font-weight: var(--typography-heading-2-font-weight);
+    font-size: var(--typography-heading-2-font-size);
+    line-height: var(--typography-heading-2-line-height);
+    letter-spacing: var(--typography-heading-2-letter-spacing);
   }
-  .Heading-module_heading-5__QFtpN {
-    font-family: var(--typography-heading-5-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-heading-5-font-weight, 600);
-    font-size: var(--typography-heading-5-font-size, 1rem);
-    line-height: var(--typography-heading-5-line-height, 1.5rem);
-    letter-spacing: var(--typography-heading-5-letter-spacing, normal);
+
+  .Heading-module_heading-3__nVAgQ {
+    font-family: var(--typography-heading-3-font-family);
+    font-weight: var(--typography-heading-3-font-weight);
+    font-size: var(--typography-heading-3-font-size);
+    line-height: var(--typography-heading-3-line-height);
+    letter-spacing: var(--typography-heading-3-letter-spacing);
   }
-  .Heading-module_heading-6__kts-- {
-    font-family: var(--typography-heading-6-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-heading-6-font-weight, 600);
-    font-size: var(--typography-heading-6-font-size, 0.875rem);
-    line-height: var(--typography-heading-6-line-height, 1.5rem);
-    letter-spacing: var(--typography-heading-6-letter-spacing, normal);
+
+  .Heading-module_heading-4__ESVT7 {
+    font-family: var(--typography-heading-4-font-family);
+    font-weight: var(--typography-heading-4-font-weight);
+    font-size: var(--typography-heading-4-font-size);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
   }
-  .Heading-module_dark__IqcnT {
-    color: var(--color-purple-800, #2f2438);
-    opacity: 100%;
+
+  .Heading-module_heading-5__zzZxI {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
   }
-  .Heading-module_dark-reduced-opacity__i-JqI {
-    color: var(--color-purple-800, #2f2438);
-    opacity: 70%;
+
+  .Heading-module_heading-6__-JvYA {
+    font-family: var(--typography-heading-6-font-family);
+    font-weight: var(--typography-heading-6-font-weight);
+    font-size: var(--typography-heading-6-font-size);
+    line-height: var(--typography-heading-6-line-height);
+    letter-spacing: var(--typography-heading-6-letter-spacing);
   }
-  .Heading-module_white__mUqRT {
-    color: var(--color-white, #ffffff);
-    opacity: 100%;
+
+  .Heading-module_dark__vO-Uw {
+    color: var(--color-purple-800);
+    opacity: 1;
   }
-  .Heading-module_white-reduced-opacity__y1wq8 {
-    color: var(--color-white, #ffffff);
-    opacity: 80%;
+
+  .Heading-module_dark-reduced-opacity__24gWp {
+    color: var(--color-purple-800);
+    opacity: 0.7;
   }
-  .Heading-module_positive__mBS79.Heading-module_small__qupiD {
-    color: var(--color-green-600, #2c7d67);
+
+  .Heading-module_white__AJgq4 {
+    color: var(--color-white);
+    opacity: 1;
   }
-  .Heading-module_positive__mBS79.Heading-module_large__cB-V3 {
-    color: var(--color-green-500, #3f9a86);
+
+  .Heading-module_white-reduced-opacity__VvQaa {
+    color: var(--color-white);
+    opacity: 0.8;
   }
-  .Heading-module_negative__Q4byH.Heading-module_small__qupiD {
-    color: var(--color-red-600, #a82433);
+
+  .Heading-module_positive__GVkBf {
+    &.Heading-module_small__bALDR {
+      color: var(--color-green-600);
+    }
+
+    &.Heading-module_large__FLTyA {
+      color: var(--color-green-500);
+    }
   }
-  .Heading-module_negative__Q4byH.Heading-module_large__cB-V3 {
-    color: var(--color-red-500, #c93b55);
+
+  .Heading-module_negative__exyNh {
+    &.Heading-module_small__bALDR {
+      color: var(--color-red-600);
+    }
+
+    &.Heading-module_large__FLTyA {
+      color: var(--color-red-500);
+    }
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
+
 @layer kz-components {
-  .Text-module_text__Byo7R {
+  .Text-module_text__3xRq3 {
     --icon-vertical-align: text-bottom;
+
     margin: 0;
+
+    strong {
+      font-weight: var(--typography-paragraph-bold-font-weight);
+    }
   }
-  .Text-module_text__Byo7R strong {
-    font-weight: var(--typography-paragraph-bold-font-weight, 600);
-  }
-  .Text-module_intro-lede__ENE72 {
-    font-family: var(--typography-paragraph-intro-lede-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-intro-lede-font-weight, 400);
-    font-size: var(--typography-paragraph-intro-lede-font-size, 1.25rem);
-    line-height: var(--typography-paragraph-intro-lede-line-height, 1.875rem);
-    letter-spacing: var(--typography-paragraph-intro-lede-letter-spacing, 0);
+
+  .Text-module_intro-lede__Pf95y {
+    font-family: var(--typography-paragraph-intro-lede-font-family);
+    font-weight: var(--typography-paragraph-intro-lede-font-weight);
+    font-size: var(--typography-paragraph-intro-lede-font-size);
+    line-height: var(--typography-paragraph-intro-lede-line-height);
+    letter-spacing: var(--typography-paragraph-intro-lede-letter-spacing);
   }
-  .Text-module_body__cO-XH {
-    font-family: var(--typography-paragraph-body-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-body-font-weight, 400);
-    font-size: var(--typography-paragraph-body-font-size, 1rem);
-    line-height: var(--typography-paragraph-body-line-height, 1.5rem);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing, normal);
+
+  .Text-module_body__o-QuI {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
   }
-  .Text-module_small__uZNGn {
-    font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    line-height: var(--typography-paragraph-small-line-height, 1.125rem);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
+
+  .Text-module_small__d6k-f {
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
   }
-  .Text-module_extra-small__3g9eN {
-    font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
-    font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
-    line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
-    letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
+
+  .Text-module_extra-small__jP3Xx {
+    font-family: var(--typography-paragraph-extra-small-font-family);
+    font-weight: var(--typography-paragraph-extra-small-font-weight);
+    font-size: var(--typography-paragraph-extra-small-font-size);
+    line-height: var(--typography-paragraph-extra-small-line-height);
+    letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
   }
-  .Text-module_dark__-jDSk {
-    color: var(--color-purple-800, #2f2438);
-    opacity: 100%;
+
+  .Text-module_dark__ApVTx {
+    color: var(--color-purple-800);
+    opacity: 1;
   }
-  .Text-module_dark-reduced-opacity__18nLo {
-    color: var(--color-purple-800, #2f2438);
-    opacity: 70%;
+
+  .Text-module_dark-reduced-opacity__-ef8o {
+    color: var(--color-purple-800);
+    opacity: 0.7;
   }
-  .Text-module_white__-yVD0 {
-    color: var(--color-white, #ffffff);
-    opacity: 100%;
+
+  .Text-module_white__Vj0Na {
+    color: var(--color-white);
+    opacity: 1;
   }
-  .Text-module_white-reduced-opacity__i0veZ {
-    color: var(--color-white, #ffffff);
-    opacity: 80%;
+
+  .Text-module_white-reduced-opacity__kYl0h {
+    color: var(--color-white);
+    opacity: 0.8;
   }
-  .Text-module_positive__e-IKh {
-    color: var(--color-green-600, #2c7d67);
+
+  .Text-module_positive__ngZQ5 {
+    color: var(--color-green-600);
   }
-  .Text-module_negative__agbge {
-    color: var(--color-red-600, #a82433);
+
+  .Text-module_negative__729Es {
+    color: var(--color-red-600);
   }
 }
+
 @layer kz-components {
   .BrandMoment-module_body__mZWwj {
     width: 100%;
@@ -2399,81 +2429,104 @@
     border-color: var(--color-white, #ffffff);
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Label-module_label__Dmp7q {
+  :root {
+    --label-start-margin: var(--spacing-xs);
+    --dt-color-form-text-color: var(--color-purple-800);
+  }
+
+  .Label-module_label__jvxMB {
     --icon-vertical-align: text-bottom;
   }
-  .Label-module_label__Dmp7q,
-  .ideal-sans .Label-module_label__Dmp7q {
+
+  .Label-module_label__jvxMB,
+  .ideal-sans .Label-module_label__jvxMB {
+    /* override Murmur global styles :( */
     opacity: inherit;
-    color: var(--color-purple-800, #2f2438);
+    color: var(--dt-color-form-text-color);
     visibility: visible;
     width: 100%;
     text-align: start;
   }
-  .Label-module_reversed__n6Q4r {
-    color: var(--color-white, #ffffff);
-  }
-  .Label-module_reversed__n6Q4r a {
-    color: var(--color-white, #ffffff);
-  }
-  .Label-module_reversed__n6Q4r a:hover {
-    text-decoration: none;
+
+  .Label-module_reversed__Qu7Kc {
+    color: var(--color-white);
+
+    a {
+      color: var(--color-white);
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
   }
-  .Label-module_disabled__qOB4e {
-    opacity: 30%;
+
+  .Label-module_disabled__3Mej6 {
+    opacity: 0.3;
   }
-  .Label-module_text__LUnIh,
-  .ideal-sans .Label-module_text__LUnIh {
-    font-family: var(--typography-heading-6-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-size: var(--typography-heading-6-font-size, 0.875rem);
-    line-height: var(--typography-heading-6-line-height, 1.5rem);
-    letter-spacing: var(--typography-heading-6-letter-spacing, normal);
-    font-weight: var(--typography-heading-6-font-weight, 600);
+
+  /* ///////////////////////////////////////////////////
+  ////  LABEL TYPES
+  //////////////////////////////////////////////////// */
+
+  /* This is to override bootstrap styles. Remove when appropriate */
+  .Label-module_text__zkbHj,
+  .ideal-sans .Label-module_text__zkbHj {
+    font-family: var(--typography-heading-6-font-family);
+    font-size: var(--typography-heading-6-font-size);
+    line-height: var(--typography-heading-6-line-height);
+    letter-spacing: var(--typography-heading-6-letter-spacing);
+    font-weight: var(--typography-heading-6-font-weight);
   }
-  .Label-module_radio__-Iu-D, .Label-module_checkbox__Fhjww {
+
+  .Label-module_checkboxOrRadio__lzm9I,
+  .Label-module_checkbox__vtFpn,
+  .Label-module_radio__xenTn,
+  .ideal-sans .Label-module_checkboxOrRadio__lzm9I {
     display: flex;
-    font-family: var(--typography-paragraph-body-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-size: var(--typography-paragraph-body-font-size, 1rem);
-    line-height: var(--typography-paragraph-body-line-height, 1.5rem);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing, normal);
-    font-weight: var(--typography-paragraph-body-font-weight, 400);
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    font-weight: var(--typography-paragraph-body-font-weight);
   }
-  .Label-module_toggle__4tyKF {
+
+  .Label-module_toggle__prty7 {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-family: var(--typography-paragraph-body-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-size: var(--typography-paragraph-body-font-size, 1rem);
-    line-height: var(--typography-paragraph-body-line-height, 1.5rem);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing, normal);
-    font-weight: var(--typography-paragraph-body-font-weight, 400);
-  }
-  .Label-module_checkbox__Fhjww .Label-module_prependedLabel__pdsEt,
-  .Label-module_radio__-Iu-D .Label-module_prependedLabel__pdsEt,
-  .Label-module_toggle__4tyKF .Label-module_prependedLabel__pdsEt {
-    order: -1;
-    margin-inline-end: var(--spacing-xs, 0.375rem);
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    font-weight: var(--typography-paragraph-body-font-weight);
   }
-  .Label-module_checkbox__Fhjww .Label-module_appendedLabel__-OHis,
-  .Label-module_radio__-Iu-D .Label-module_appendedLabel__-OHis,
-  .Label-module_toggle__4tyKF .Label-module_appendedLabel__-OHis {
-    margin-inline-start: var(--spacing-xs, 0.375rem);
+
+  .Label-module_checkbox__vtFpn,
+  .Label-module_radio__xenTn,
+  .Label-module_toggle__prty7 {
+    /* apply padding when label is inline with form control */
+    .Label-module_prependedLabel__XhXdP {
+      order: -1; /* place label before the control */
+      margin-inline-end: var(--label-start-margin);
+    }
+
+    .Label-module_appendedLabel__vp5Uc {
+      margin-inline-start: var(--label-start-margin);
+    }
   }
-  .Label-module_prominent__SPdrr {
-    font-family: var(--typography-heading-4-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-heading-4-font-weight, 600);
-    font-size: var(--typography-heading-4-font-size, 1.125rem);
-    line-height: var(--typography-heading-4-line-height, 1.5rem);
-    letter-spacing: var(--typography-heading-4-letter-spacing, normal);
+
+  .Label-module_prominent__dW3K7 {
+    font-family: var(--typography-heading-4-font-family);
+    font-weight: var(--typography-heading-4-font-weight);
+    font-size: var(--typography-heading-4-font-size);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
     display: block;
-    margin-bottom: var(--spacing-xs, 0.375rem);
+    margin-bottom: var(--spacing-xs);
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -2704,20 +2757,22 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Content-module_content__ZeTRs {
-    max-width: 1392px;
-    margin: 0 72px;
+  .Content-module_content__DUKqQ {
+    max-width: var(--layout-content-max-width);
+    margin: 0 var(--layout-content-side-margin);
     width: 100%;
+
+    /* Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table) */
     min-width: 0;
-  }
-  @media (max-width: calc(1080px - 1px)) {
-    .Content-module_content__ZeTRs {
-      margin: 0 12px;
+
+    /* Currently unable to do media query equations so using a fixed value instead */
+    @media (width <= 1079px) {
+      margin: 0 var(--content-margin-width-on-medium-and-small);
     }
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -3328,16 +3383,17 @@
     margin-top: var(--spacing-6, 0.375rem);
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .LabelledMessage-module_labelledMessage__8hqzY {
+  .LabelledMessage-module_labelledMessage__kz-UQ {
     display: inline-flex;
     white-space: nowrap;
   }
-  .LabelledMessage-module_labelSeparator__f3zFN {
-    margin-inline-end: var(--spacing-6, 0.375rem);
+
+  .LabelledMessage-module_labelSeparator__A-4BK {
+    margin-inline-end: var(--spacing-6);
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
   .DateInputDescription-module_dateInputDescription__dEWv8 {
@@ -3620,33 +3676,48 @@
   }
   /* stylelint-enable no-descending-specificity */
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Divider-module_wrapper__K5mht {
+  /* 
+  Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
+  */
+
+  :root {
+    --dt-content-border-color: rgb(var(--color-gray-600-rgb), 0.1);
+  }
+
+  .Divider-module_wrapper__AzvdU {
     width: 100%;
     border: 0;
     margin: 0;
-    border-radius: var(--border-solid-border-radius, 7px);
+    border-radius: var(--border-solid-border-radius);
+
+    /* 
+    This is here to protect against a global style in a consumer.
+    https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
+    */
     visibility: visible;
   }
-  .Divider-module_content__BhDyy, .Divider-module_menuSeparator__kjXV5 {
-    border-top: 1px solid;
-    border-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
+
+  .Divider-module_content__eq5aD,
+  .Divider-module_menuSeparator__FAvna {
+    border-top: 1px solid var(--dt-content-border-color);
   }
-  .Divider-module_canvas__2eQT6 {
+
+  .Divider-module_canvas__G87W- {
     border-top: 1px solid;
     border-bottom: 1px solid;
-    border-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
+    border-color: var(--dt-content-border-color);
   }
-  .Divider-module_reversed__puJw2 {
-    border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+
+  .Divider-module_reversed__GuBmn {
+    border-color: rgb(var(--color-white-rgb), 0.1);
   }
-  .Divider-module_menuSeparator__kjXV5 {
-    /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+
+  .Divider-module_menuSeparator__FAvna {
     margin: 5px 0;
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
@@ -3847,12 +3918,12 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .ErrorPage-module_paragraphPadding__-L-qy {
-    padding: var(--spacing-24, 1.5rem) 0;
+  .ErrorPage-module_paragraphPadding__PJzGg {
+    padding: var(--spacing-24) 0;
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
   .FieldGroup-module_group__74Z9M {
@@ -4957,48 +5028,59 @@
   /* stylelint-enable no-descending-specificity */
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
+:root {
+  --border-width: var(--border-width-1);
+  --notification-vertical-padding: calc(var(--spacing-6) - var(--border-width));
+  --notification-fade-out: opacity 200ms ease;
+  --notification-collapse-height: margin-top 200ms ease, margin-bottom 200ms ease;
+  --notification-collapse-height-delayed: margin-top 200ms ease 200ms, margin-bottom 200ms ease;
+  --notification-pop-up: transform 200ms ease-out;
+  --notification-slide-right: transform 300ms ease-out;
+}
+
 @layer kz-components {
-  .GenericNotification-module_notification__-JP1M {
+  /* Replace @extend %ca-notification from _mixin.scss */
+  .GenericNotification-module_notification__-lOMz {
     display: flex;
     box-sizing: border-box;
     pointer-events: all;
+
+    &:focus {
+      outline-offset: 1px;
+      outline: 2px solid var(--color-blue-500);
+    }
   }
-  .GenericNotification-module_notification__-JP1M:focus {
-    outline-offset: 1px;
-    outline: 2px solid var(--color-blue-500);
-  }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_inline__OciO5, .GenericNotification-module_notification__-JP1M.GenericNotification-module_toast__GOVfC {
-    margin-bottom: var(--spacing-24, 1.5rem);
-    border-width: var(--border-width-1);
+
+  /* Variants */
+  .GenericNotification-module_inline__lnYb9,
+  .GenericNotification-module_toast__dPvtC {
+    margin-bottom: var(--spacing-24);
+    border-width: var(--border-width);
     border-style: solid;
-    border-radius: var(--border-solid-border-radius, 7px);
+    border-radius: var(--border-solid-border-radius);
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_inline__OciO5 {
+
+  .GenericNotification-module_inline__lnYb9 {
     width: auto;
     min-height: 46px;
-    padding: calc(var(--spacing-6, 0.375rem) - var(--border-width-1)) var(--spacing-12, 0.75rem);
-    transition: opacity 200ms ease, transform 200ms ease-out, margin-top 200ms ease, margin-bottom 200ms ease;
+    padding: var(--notification-vertical-padding) var(--spacing-12);
+    transition:
+      var(--notification-fade-out), var(--notification-pop-up), var(--notification-collapse-height);
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_toast__GOVfC {
+
+  .GenericNotification-module_toast__dPvtC {
     container-type: inline-size;
     width: 25rem;
-    box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
+    box-shadow: var(--shadow-small-box-shadow);
     max-width: 100%;
-    padding: calc(var(--spacing-6, 0.375rem) - var(--border-width-1)) 10px;
-    transition: opacity 200ms ease, transform 300ms ease-out, margin-top 200ms ease 200ms, margin-bottom 200ms ease;
+    padding: var(--notification-vertical-padding) 10px;
+    transition:
+      var(--notification-fade-out), var(--notification-slide-right),
+      var(--notification-collapse-height-delayed);
     will-change: transform;
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_global__Weka- {
+
+  .GenericNotification-module_global__i1IKL {
     width: 100%;
     display: flex;
     align-items: center;
@@ -5008,148 +5090,229 @@
     padding-top: var(--spacing-16);
     padding-bottom: var(--spacing-16);
     padding-inline-start: var(--spacing-8);
-    transition: margin-top 200ms ease, margin-bottom 200ms ease;
+    transition: var(--notification-collapse-height);
     position: relative;
     z-index: 1030;
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_security__QTALa {
-    background: var(--color-yellow-100, #fff9e4);
+
+  /* Types (colors) */
+  .GenericNotification-module_success__HMC7W {
+    background: var(--color-green-100);
+    border-color: var(--color-green-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-green-500);
+  }
+
+  .GenericNotification-module_informative__S4sGn {
+    background: var(--color-blue-100);
+    border-color: var(--color-blue-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-blue-500);
+  }
+
+  .GenericNotification-module_cautionary__VMbSA,
+  .GenericNotification-module_security__pdJT9 {
+    background: var(--color-yellow-100);
     border-color: var(--color-yellow-700);
-    color: var(--color-purple-800, #2f2438);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-yellow-700);
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct {
-    opacity: 0%;
+
+  .GenericNotification-module_warning__42AEX {
+    background: var(--color-red-100);
+    border-color: var(--color-red-500);
+    color: var(--color-purple-800);
+
+    --icon-color: var(--color-red-500);
+  }
+
+  /* Hidden state */
+  .GenericNotification-module_hidden__QOpq1 {
+    opacity: 0;
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_inline__OciO5, .GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_global__Weka- {
+
+  .GenericNotification-module_hidden__QOpq1.GenericNotification-module_inline__lnYb9,
+  .GenericNotification-module_hidden__QOpq1.GenericNotification-module_global__i1IKL {
     margin-bottom: 0;
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_inline__OciO5 {
+
+  .GenericNotification-module_hidden__QOpq1.GenericNotification-module_inline__lnYb9 {
+    /*
+    When entering we use "ease-out", but when transitioning to hidden we want to use "ease-in".
+    We want it moving the fastest when it is the furthest off screen.
+    */
     transition-timing-function: ease-in;
     transform: translateY(-50%);
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_toast__GOVfC {
+
+  .GenericNotification-module_hidden__QOpq1.GenericNotification-module_toast__dPvtC {
+    /*
+    When entering we use "ease-out", but when transitioning to hidden we want to use "ease-in".
+    We want it moving the fastest when it is the furthest off screen.
+    */
     transition-timing-function: ease-in;
     transform: translateX(50%);
   }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_hidden__WJjct.GenericNotification-module_global__Weka- {
+
+  .GenericNotification-module_hidden__QOpq1.GenericNotification-module_global__i1IKL {
     z-index: 1029;
-    opacity: 100%;
-  }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_noBottomMargin__28nF8 {
-    margin-bottom: 0;
-  }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_persistent__O7bgI {
-    transition: none;
-  }
-  .GenericNotification-module_notification__-JP1M.GenericNotification-module_subtle__kPns9 {
-    background: none;
-    border: none;
-    padding: 0;
+    opacity: 1;
   }
-  .GenericNotification-module_icon__SDb8v {
+
+  /* Structure: .icon (from %ca-notification__icon) */
+  .GenericNotification-module_icon__rMIaU {
     align-items: flex-start;
     box-sizing: content-box;
+    color: var(--icon-color);
   }
-  .GenericNotification-module_security__QTALa .GenericNotification-module_icon__SDb8v {
-    color: var(--color-yellow-700);
-  }
-  .GenericNotification-module_inline__OciO5 .GenericNotification-module_icon__SDb8v, .GenericNotification-module_toast__GOVfC .GenericNotification-module_icon__SDb8v {
+
+  .GenericNotification-module_inline__lnYb9 .GenericNotification-module_icon__rMIaU,
+  .GenericNotification-module_toast__dPvtC .GenericNotification-module_icon__rMIaU {
     width: 22px;
     height: 22px;
     font-size: 22px;
-    margin-top: var(--spacing-6, 0.375rem);
+    margin-top: var(--spacing-6);
   }
-  .GenericNotification-module_global__Weka- .GenericNotification-module_icon__SDb8v {
+
+  .GenericNotification-module_global__i1IKL .GenericNotification-module_icon__rMIaU {
     width: 24px;
     height: 24px;
     font-size: 24px;
   }
-  .GenericNotification-module_textContainer__Avpbk {
+
+  /* Structure: .textContainer from %ca-notification__text-container */
+  .GenericNotification-module_textContainer__yHSKi {
     box-sizing: content-box;
     display: flex;
     flex-flow: row wrap;
     flex: 1 0 0;
   }
-  .GenericNotification-module_inline__OciO5 .GenericNotification-module_textContainer__Avpbk, .GenericNotification-module_toast__GOVfC .GenericNotification-module_textContainer__Avpbk {
-    margin-inline-start: var(--spacing-6, 0.375rem);
+
+  .GenericNotification-module_inline__lnYb9 .GenericNotification-module_textContainer__yHSKi,
+  .GenericNotification-module_toast__dPvtC .GenericNotification-module_textContainer__yHSKi {
+    margin-inline-start: var(--spacing-6);
   }
-  .GenericNotification-module_toast__GOVfC .GenericNotification-module_textContainer__Avpbk {
-    margin-inline-start: var(--spacing-6, 0.375rem);
-    max-width: calc(100% - var(--spacing-48, 3rem));
+
+  .GenericNotification-module_toast__dPvtC .GenericNotification-module_textContainer__yHSKi {
+    max-width: calc(100% - var(--spacing-48));
     overflow-wrap: break-word;
     hyphens: auto;
   }
-  .GenericNotification-module_global__Weka- .GenericNotification-module_textContainer__Avpbk {
+
+  .GenericNotification-module_global__i1IKL .GenericNotification-module_textContainer__yHSKi {
     margin-inline-start: var(--spacing-8);
   }
-  .GenericNotification-module_inline__OciO5 .GenericNotification-module_textContainer__Avpbk {
-    transition: opacity 200ms ease;
+
+  .GenericNotification-module_inline__lnYb9 .GenericNotification-module_textContainer__yHSKi {
+    /*
+  Inline notifications often fade onto a white background.
+  Fading the higher-contrast text out at, as well as the whole container, makes for a smoother animation.  
+  */
+    transition: var(--notification-fade-out);
   }
-  .GenericNotification-module_textContainer__Avpbk.GenericNotification-module_forceMultiline__JcVA4 {
+
+  .GenericNotification-module_forceMultiline__SlLf9 {
     flex-direction: column;
   }
-  .GenericNotification-module_title__dvQOr {
+
+  /* Structure: .title from %ca-notification__title */
+  .GenericNotification-module_title__3cvl6 {
     position: relative;
-    font-family: var(--typography-heading-6-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-heading-6-font-weight, 600);
-    font-size: var(--typography-heading-6-font-size, 0.875rem);
-    line-height: var(--typography-heading-6-line-height, 1.5rem);
-    letter-spacing: var(--typography-heading-6-letter-spacing, normal);
+    font-family: var(--typography-heading-6-font-family);
+    font-weight: var(--typography-heading-6-font-weight);
+    font-size: var(--typography-heading-6-font-size);
+    line-height: var(--typography-heading-6-line-height);
+    letter-spacing: var(--typography-heading-6-letter-spacing);
     margin: 0;
     padding-right: 6px;
+
+    /* overriding Bootstrap style that changes h6s to text-transform: uppercase */
     text-transform: none;
     color: inherit;
     top: 0.37em;
   }
-  .GenericNotification-module_text__X-5ld {
+
+  .GenericNotification-module_notificationTitle__-yijp {
+    top: 0.42em;
     position: relative;
-    font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    line-height: var(--typography-paragraph-small-line-height, 1.125rem);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
+    margin-inline-end: var(--spacing-6);
+    line-height: var(--typography-heading-6-line-height);
+  }
+
+  @container (max-width: 25rem) {
+    .GenericNotification-module_notificationTitle__-yijp {
+      width: 100%;
+    }
+  }
+
+  /* Structure: .text from %ca-notification__text */
+  .GenericNotification-module_text__B5r5l {
+    position: relative;
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
     margin: 0;
     color: inherit;
+
+    a[href]:not([data-rac]) {
+      border-bottom: var(--spacing-1) solid var(--color-blue-500);
+      text-decoration: none;
+      color: var(--color-blue-500);
+
+      &:hover {
+        text-decoration: none;
+        color: var(--color-blue-600);
+        border-bottom: var(--spacing-1) solid var(--color-blue-600);
+      }
+    }
+
+    strong {
+      font-weight: var(--typography-button-secondary-font-weight);
+    }
+
+    p {
+      font-weight: inherit;
+    }
   }
-  .GenericNotification-module_inline__OciO5 .GenericNotification-module_text__X-5ld, .GenericNotification-module_toast__GOVfC .GenericNotification-module_text__X-5ld {
+
+  .GenericNotification-module_inline__lnYb9 .GenericNotification-module_text__B5r5l,
+  .GenericNotification-module_toast__dPvtC .GenericNotification-module_text__B5r5l {
     position: relative;
-    font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    line-height: var(--typography-paragraph-small-line-height, 1.125rem);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
-    margin-top: var(--spacing-6, 0.375rem);
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+
+    /*
+    When the title and text are on different lines this ensures the baselines of the first lines are exactly 1 grid unit apart.
+    When they are both on a single line it ensures both are 1 grid unit tall.
+    */
+    margin-top: var(--spacing-6);
     flex: 0 1 auto;
-    padding-bottom: var(--spacing-12, 0.75rem);
+    padding-bottom: var(--spacing-12);
     top: 0.21em;
   }
-  .GenericNotification-module_toast__GOVfC .GenericNotification-module_text__X-5ld {
+
+  .GenericNotification-module_toast__dPvtC .GenericNotification-module_text__B5r5l {
     width: 100%;
   }
-  .GenericNotification-module_global__Weka- .GenericNotification-module_text__X-5ld {
+
+  .GenericNotification-module_global__i1IKL .GenericNotification-module_text__B5r5l {
     position: static;
-    font-weight: var(--typography-paragraph-body-font-weight, 400);
-    font-size: var(--typography-paragraph-body-font-size, 1rem);
-    line-height: var(--typography-paragraph-body-line-height, 1.5rem);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing, normal);
-  }
-  .GenericNotification-module_text__X-5ld a[href]:not([data-rac]) {
-    border-bottom: var(--spacing-1) solid var(--color-blue-500, #0168b3);
-    text-decoration: none;
-    color: var(--color-blue-500, #0168b3);
-  }
-  .GenericNotification-module_text__X-5ld a[href]:not([data-rac]):hover {
-    text-decoration: none;
-    color: var(--color-blue-600, #004970);
-    border-bottom: var(--spacing-1) solid var(--color-blue-600, #004970);
-  }
-  .GenericNotification-module_text__X-5ld strong {
-    font-weight: var(--typography-button-secondary-font-weight, 500);
-  }
-  .GenericNotification-module_text__X-5ld p {
-    font-weight: inherit;
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
   }
-  .GenericNotification-module_cancel__c6wky {
+
+  /* Structure: .cancel from %ca-notification__cancel */
+  .GenericNotification-module_cancel__4O-Ys {
     cursor: pointer;
     appearance: none;
     transition: none;
@@ -5159,43 +5322,78 @@
     border: none;
     background: transparent;
     font: inherit;
-    color: var(--color-purple-800, #2f2438);
-  }
-  .GenericNotification-module_cancel__c6wky .GenericNotification-module_icon__SDb8v {
-    opacity: 70%;
-    transition: var(--animation-duration-fast, 300ms) opacity;
-  }
-  .GenericNotification-module_cancel__c6wky:disabled .GenericNotification-module_icon__SDb8v, .GenericNotification-module_disabled__WGBhD.GenericNotification-module_cancel__c6wky .GenericNotification-module_icon__SDb8v {
-    opacity: 30%;
-  }
-  .GenericNotification-module_cancel__c6wky:not(:disabled, .GenericNotification-module_disabled__WGBhD):hover .GenericNotification-module_icon__SDb8v, .GenericNotification-module_cancel__c6wky:not(:disabled, .GenericNotification-module_disabled__WGBhD):focus .GenericNotification-module_icon__SDb8v, .GenericNotification-module_cancel__c6wky:not(:disabled, .GenericNotification-module_disabled__WGBhD).GenericNotification-module_hover__hUURd .GenericNotification-module_icon__SDb8v {
-    opacity: 100%;
-  }
-  .GenericNotification-module_cancel__c6wky:not(:disabled, .GenericNotification-module_disabled__WGBhD):active .GenericNotification-module_icon__SDb8v, .GenericNotification-module_cancel__c6wky:not(:disabled, .GenericNotification-module_disabled__WGBhD).GenericNotification-module_active__-6ahb .GenericNotification-module_icon__SDb8v {
-    opacity: 100%;
-  }
-  .GenericNotification-module_cancel__c6wky:active {
-    transform: translateY(1px);
+    color: var(--color-purple-800);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-solid-border-radius);
+
+    .GenericNotification-module_icon__rMIaU {
+      opacity: 0.7;
+      transition: var(--animation-duration-fast) opacity;
+    }
+
+    &:disabled,
+    &.GenericNotification-module_disabled__V2Wyr {
+      .GenericNotification-module_icon__rMIaU {
+        opacity: 0.3;
+      }
+    }
+
+    &:not(:disabled, .GenericNotification-module_disabled__V2Wyr) {
+      &:hover,
+      &:focus,
+      &.GenericNotification-module_hover__erovs {
+        .GenericNotification-module_icon__rMIaU {
+          opacity: 1;
+        }
+      }
+
+      &:active,
+      &.GenericNotification-module_active__2ksOr {
+        .GenericNotification-module_icon__rMIaU {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+
+    &:focus-visible {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: -4px;
+    }
   }
-  .GenericNotification-module_inline__OciO5 .GenericNotification-module_cancel__c6wky, .GenericNotification-module_toast__GOVfC .GenericNotification-module_cancel__c6wky {
+
+  .GenericNotification-module_inline__lnYb9 .GenericNotification-module_cancel__4O-Ys,
+  .GenericNotification-module_toast__dPvtC .GenericNotification-module_cancel__4O-Ys {
     width: var(--spacing-48);
     height: var(--spacing-48);
     margin-top: calc(-1 * var(--spacing-6));
     margin-bottom: calc(-1 * var(--spacing-6));
   }
-  .GenericNotification-module_inline__OciO5 .GenericNotification-module_cancel__c6wky {
+
+  .GenericNotification-module_inline__lnYb9 .GenericNotification-module_cancel__4O-Ys {
     margin-inline-end: calc(-1 * var(--spacing-12));
   }
-  .GenericNotification-module_toast__GOVfC .GenericNotification-module_cancel__c6wky {
+
+  .GenericNotification-module_toast__dPvtC .GenericNotification-module_cancel__4O-Ys {
     margin-inline-end: -10px;
   }
-  .GenericNotification-module_global__Weka- .GenericNotification-module_cancel__c6wky {
+
+  .GenericNotification-module_global__i1IKL .GenericNotification-module_cancel__4O-Ys {
     width: var(--spacing-48);
     height: var(--spacing-48);
     margin-top: calc(-1 * var(--spacing-24));
     margin-bottom: calc(-1 * var(--spacing-24));
   }
-  .GenericNotification-module_cancelLabel__HJzsk {
+
+  /* Structure: .cancelLabel from %ca-notification__cancel__label */
+  .GenericNotification-module_cancelLabel__uLIuz {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -5205,68 +5403,32 @@
     clip-path: rect(0 0 0 0);
     border: 0;
   }
-}
-@layer kz-components {
-  .GenericNotification-module_icon__SDb8v {
-    color: var(--icon-color);
-  }
-  .GenericNotification-module_cancel__c6wky {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--border-solid-border-radius);
-  }
-  .GenericNotification-module_cancel__c6wky:focus-visible {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
-    outline-offset: -4px;
-  }
-  .GenericNotification-module_notificationTitle__Oaqb8 {
-    top: 0.42em;
-    position: relative;
-    margin-inline-end: var(--spacing-6, 0.375rem);
-    line-height: var(--typography-heading-6-line-height, 1.5rem);
-  }
-  @container (max-width: 25rem) {
-    .GenericNotification-module_notificationTitle__Oaqb8 {
-      width: 100%;
-    }
-  }
-  .GenericNotification-module_success__oLGIP {
-    background: var(--color-green-100, #e8f8f4);
-    border-color: var(--color-green-500);
-    color: var(--color-purple-800, #2f2438);
-    --icon-color: var(--color-green-500);
-  }
-  .GenericNotification-module_informative__WLimi {
-    background: var(--color-blue-100, #e6f6ff);
-    border-color: var(--color-blue-500);
-    color: var(--color-purple-800, #2f2438);
-    --icon-color: var(--color-blue-500);
+
+  /* Modifiers */
+  .GenericNotification-module_noBottomMargin__okqYr {
+    margin-bottom: 0;
   }
-  .GenericNotification-module_cautionary__lneFu {
-    background: var(--color-yellow-100, #fff9e4);
-    border-color: var(--color-yellow-700);
-    color: var(--color-purple-800, #2f2438);
-    --icon-color: var(--color-yellow-700);
+
+  .GenericNotification-module_persistent__y-Jp7 {
+    transition: none;
   }
-  .GenericNotification-module_warning__7275P {
-    background: var(--color-red-100, #fdeaee);
-    border-color: var(--color-red-500);
-    color: var(--color-purple-800, #2f2438);
-    --icon-color: var(--color-red-500);
+
+  /* This is only for inline notifications */
+  .GenericNotification-module_subtle__TCixZ {
+    background: none;
+    border: none;
+    padding: 0;
   }
 }
+
 @layer kz-components {
   .NotificationIcon-module_notificationIcon__4xH0m {
     font-size: inherit;
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .ToastNotificationsList-module_toastNotificationsList__APiSP {
+  .ToastNotificationsList-module_toastNotificationsList__AUm-A {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -5274,24 +5436,24 @@
     padding-bottom: 0;
     padding-top: 172px;
     position: fixed;
-    right: var(--spacing-md, 1.5rem);
+    right: var(--spacing-md);
     top: 0;
     bottom: 0;
     z-index: 1100;
     max-width: 100%;
     pointer-events: none;
-  }
-  @media (max-width: 1079px) {
-    .ToastNotificationsList-module_toastNotificationsList__APiSP {
+
+    /* Media queries can’t perform this calculation yet. Update when CSS supports it.  */
+    @media (width <= 1079px) {
       padding-top: 108px;
     }
-  }
-  @media (max-width: 767px) {
-    .ToastNotificationsList-module_toastNotificationsList__APiSP {
-      left: var(--spacing-md, 1.5rem);
+
+    @media (width <= 767px) {
+      left: var(--spacing-md);
     }
   }
 }
+
 @layer kz-components {
   .Link-module_link__8oxip {
     color: var(--link-text-color, var(--color-blue-500));
@@ -8483,179 +8645,224 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Tag-module_root__uRhoc {
-    margin-inline-end: calc(var(--spacing-md, 1.5rem) * 0.5);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
-    color: var(--color-purple-800, #2f2438);
+  .Tag-module_root__sGbnM {
+    --medium: calc(var(--spacing-md) * 1.25);
+    --small: var(--spacing-md);
+
+    margin-inline-end: calc(var(--spacing-md) * 0.5);
+    font-size: var(--typography-paragraph-small-font-size);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+    color: var(--color-purple-800);
     display: inline-block;
-    border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
-    border-radius: calc(var(--spacing-md, 1.5rem) * 0.75);
-    padding: 0 calc(var(--spacing-md, 1.5rem) * 0.4);
+    border: var(--border-borderless-border-width) var(--border-borderless-border-style)
+      var(--border-borderless-border-color);
+    border-radius: calc(var(--spacing-md) * 0.75);
+    padding: 0 calc(var(--spacing-md) * 0.4);
     box-sizing: border-box;
+
+    &.Tag-module_profile__lpDJR {
+      padding-left: calc(var(--spacing-md) * 0.2);
+    }
   }
-  .Tag-module_root__uRhoc.Tag-module_profile__OoGsS {
-    padding-left: calc(var(--spacing-md, 1.5rem) * 0.2);
-  }
-  .Tag-module_layoutContainer__pBLSz {
+
+  .Tag-module_layoutContainer__cPxSs {
     height: 100%;
     display: flex;
     align-items: center;
   }
-  .Tag-module_validationIcon__B-YLv {
+
+  .Tag-module_validationIcon__i87BD {
     align-items: center;
     display: flex;
-    color: var(--color-white, #ffffff);
-    margin-inline: calc(var(--spacing-md, 1.5rem) * -0.15) var(--spacing-xs, 0.375rem);
+    color: var(--color-white);
+    margin-inline: calc(var(--spacing-md) * -0.15) var(--spacing-xs);
   }
-  .Tag-module_profile__OoGsS {
-    margin-inline: calc(var(--spacing-md, 1.5rem) * -0.15) var(--spacing-xs, 0.375rem);
+
+  .Tag-module_profile__lpDJR {
+    margin-inline: calc(var(--spacing-md) * -0.15) var(--spacing-xs);
     display: inline-flex;
     align-items: center;
   }
-  .Tag-module_textContent__q76X- {
+
+  .Tag-module_textContent__61iwm {
     margin-top: -1px;
-    font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-paragraph-small-font-weight, 400);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    line-height: var(--typography-paragraph-small-line-height, 1.125rem);
-    letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
     white-space: nowrap;
   }
-  .Tag-module_iconWrapper__aPrKH {
+
+  .Tag-module_iconWrapper__gXgCb {
     --icon-size: 16;
+
     position: relative;
     height: 16px;
     width: 16px;
   }
-  .Tag-module_dismissButton__rHv7r {
+
+  .Tag-module_dismissButton__MgLNJ {
+    /* Replace @include button-reset to reset button's style */
     appearance: none;
-    display: inline;
     background: transparent;
-    color: inherit;
     font: inherit;
     margin: 0;
-    padding: 0;
     border: none;
+
+    /* Original style */
     position: relative;
     display: flex;
     height: 100%;
     align-items: center;
-    padding: 0 var(--spacing-xs, 0.375rem);
+    padding: 0 var(--spacing-xs);
     margin-inline: -0.225rem -0.6625rem;
-    color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
+    color: rgb(var(--color-purple-800-rgb), 0.7);
     cursor: pointer;
+
+    &:hover {
+      color: var(--color-purple-800);
+    }
+
+    &:active {
+      color: var(--color-purple-800);
+    }
+
+    svg {
+      position: relative;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible .Tag-module_iconWrapper__gXgCb {
+      color: var(--color-purple-800);
+
+      &::after {
+        --focus-ring-offset: calc((var(--border-focus-ring-border-width)));
+
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-radius: 50%;
+        border-width: var(--border-focus-ring-border-width);
+        border-style: var(--border-focus-ring-border-style);
+        border-color: var(--color-blue-500);
+        inset: calc(-1 * var(--focus-ring-offset));
+      }
+    }
   }
-  .Tag-module_dismissButton__rHv7r:hover {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r:active {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r svg {
-    position: relative;
-  }
-  .Tag-module_dismissButton__rHv7r:focus {
-    outline: none;
-  }
-  .Tag-module_dismissButton__rHv7r:focus-visible .Tag-module_iconWrapper__aPrKH {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tag-module_dismissButton__rHv7r:focus-visible .Tag-module_iconWrapper__aPrKH::after {
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-radius: 50%;
-    border-width: var(--border-focus-ring-border-width, 2px);
-    border-style: var(--border-focus-ring-border-style, solid);
-    border-color: var(--color-blue-500, #0168b3);
-    inset: calc(-1 * calc((var(--border-focus-ring-border-width, 2px))));
-  }
-  .Tag-module_background__LkzGB {
+
+  .Tag-module_background__DaA0W {
+    /*
+    As our icons are only one-tone, this span places
+    a white background under the dismissible icon to
+    give the illusion of a background colour that is
+    different to the rest of the tag
+    */
     position: absolute;
     display: inline-block;
-    width: calc(var(--spacing-xs, 0.375rem) + 0.125rem);
-    height: calc(var(--spacing-xs, 0.375rem) + 0.125rem);
+    width: calc(var(--spacing-xs) + 0.125rem); /* optical adjustment */
+    height: calc(var(--spacing-xs) + 0.125rem); /* optical adjustment */
     background-color: white;
     left: 10px;
     top: 10px;
   }
-  .Tag-module_truncate__5w7HW {
+
+  .Tag-module_truncate__5kX5V {
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
   }
-  .Tag-module_inline__pPM-d {
+
+  .Tag-module_inline__QQfqi {
     margin: 0;
   }
-  .Tag-module_medium__NkOrv {
-    height: calc(var(--spacing-md, 1.5rem) * 1.25);
-  }
-  .Tag-module_small__-xyNk {
-    height: var(--spacing-md, 1.5rem);
-  }
-  .Tag-module_default__6PVke {
-    background-color: var(--color-gray-300, #eaeaec);
-  }
-  .Tag-module_sentimentPositive__nbqE1 {
-    background-color: var(--color-green-100, #e8f8f4);
-  }
-  .Tag-module_sentimentNeutral__8BtD8 {
-    background-color: var(--color-gray-300, #eaeaec);
+
+  .Tag-module_medium__PI53x {
+    height: var(--medium);
   }
-  .Tag-module_sentimentNegative__1J85t {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_small__hcPrf {
+    height: var(--small);
   }
-  .Tag-module_sentimentNone__8BWjU {
-    background-color: var(--color-white, #ffffff);
-    border-color: var(--color-gray-300, #eaeaec);
+
+  .Tag-module_default__Wq9hK {
+    background-color: var(--color-gray-300);
   }
-  .Tag-module_validationPositive__vgFUE {
-    background-color: var(--color-green-100, #e8f8f4);
+
+  .Tag-module_sentimentPositive__M4lXI {
+    background-color: var(--color-green-100);
   }
-  .Tag-module_validationPositive__vgFUE .Tag-module_validationIcon__B-YLv {
-    color: var(--color-green-500, #3f9a86);
+
+  .Tag-module_sentimentNeutral__uxZ6y {
+    background-color: var(--color-gray-300);
   }
-  .Tag-module_validationInformative__bnJ4A {
-    background-color: var(--color-blue-100, #e6f6ff);
+
+  .Tag-module_sentimentNegative__JxDtU {
+    background-color: var(--color-red-100);
   }
-  .Tag-module_validationInformative__bnJ4A .Tag-module_validationIcon__B-YLv {
-    color: var(--color-blue-500, #0168b3);
+
+  .Tag-module_sentimentNone__vDXoz {
+    background-color: var(--color-white);
+    border-color: var(--color-gray-300);
   }
-  .Tag-module_validationNegative__lZgIY {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_validationPositive__KXW2z {
+    background-color: var(--color-green-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-green-500);
+    }
   }
-  .Tag-module_validationNegative__lZgIY .Tag-module_validationIcon__B-YLv {
-    color: var(--color-red-500, #c93b55);
+
+  .Tag-module_validationInformative__wJlj5 {
+    background-color: var(--color-blue-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-blue-500);
+    }
   }
-  .Tag-module_validationCautionary__ERS2t {
-    background-color: var(--color-yellow-100, #fff9e4);
+
+  .Tag-module_validationNegative__CEuAp {
+    background-color: var(--color-red-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-red-500);
+    }
   }
-  .Tag-module_validationCautionary__ERS2t .Tag-module_validationIcon__B-YLv {
-    color: var(--color-yellow-700);
+
+  .Tag-module_validationCautionary__ay3Dg {
+    background-color: var(--color-yellow-100);
+
+    .Tag-module_validationIcon__i87BD {
+      color: var(--color-yellow-700);
+    }
   }
-  .Tag-module_statusLive__xG48w {
-    background-color: var(--color-green-100, #e8f8f4);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusLive__Ycm63 {
+    background-color: var(--color-green-100);
+    color: var(--color-purple-800);
   }
-  .Tag-module_statusAction__woL-O {
-    background-color: var(--color-orange-100, #fff0e8);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusAction__Gdpew {
+    background-color: var(--color-orange-100);
+    color: var(--color-purple-800);
   }
-  .Tag-module_statusClosed__VhZP- {
-    background-color: var(--color-red-100, #fdeaee);
+
+  .Tag-module_statusClosed__9Ggv1 {
+    background-color: var(--color-red-100);
   }
-  .Tag-module_statusDraft__9QZDv {
-    background-color: var(--color-blue-100, #e6f6ff);
-    color: var(--color-purple-800, #2f2438);
+
+  .Tag-module_statusDraft__m3ksY {
+    background-color: var(--color-blue-100);
+    color: var(--color-purple-800);
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10855,211 +11062,273 @@
     }
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/* stylelint-disable selector-no-vendor-prefix */
 @layer kz-components {
-  .ToggleSwitch-module_checkbox__ezWz3 {
-    opacity: 0%;
-    position: absolute;
+  :root {
+    --animation-timing: var(--animation-duration-immediate) var(--animation-easing-function-linear);
+    --focus-ring-offset: 1px;
   }
-  .ideal-sans .ToggleSwitch-module_checkbox__ezWz3 {
+
+  .ToggleSwitch-module_checkbox__NmNyg {
+    /* Reset checkbox */
+    opacity: 0;
     position: absolute;
+
+    .ideal-sans & {
+      /* This is to override bootstrap styles. Remove when appropriate */
+      position: absolute;
+    }
   }
-  .ToggleSwitch-module_track__fcDMP {
+
+  .ToggleSwitch-module_track__Zvo6N {
     position: relative;
-    background-color: var(--color-gray-500, #878792);
-    border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
-    border-radius: var(--spacing-md, 1.5rem);
+    background-color: var(--color-gray-500);
+    border: var(--border-borderless-border-width) var(--border-borderless-border-style)
+      var(--border-borderless-border-color);
+    border-radius: var(--spacing-md);
     box-sizing: content-box;
-    width: calc(var(--spacing-md, 1.5rem) * 1.05 * 2);
-    height: calc(var(--spacing-md, 1.5rem) * 1.25);
-    padding: 0 calc(var(--spacing-md, 1.5rem) * 0.15);
+    width: calc((var(--spacing-md) * 1.05) * 2);
+    height: calc(var(--spacing-md) * 1.25);
+    padding: 0 calc(var(--spacing-md) * 0.15);
     display: flex;
     align-items: center;
-    transition: background-color var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear);
+    transition: background-color var(--animation-timing);
+
     /* TODO: Fix */
     /* stylelint-disable no-descending-specificity */
+    .ToggleSwitch-module_checkbox__NmNyg:not(.ToggleSwitch-module_disabled__qntEm):focus + &,
+    .ToggleSwitch-module_checkbox__NmNyg:not(.ToggleSwitch-module_disabled__qntEm):hover:focus + & {
+      border-color: transparent;
+      outline: 2px solid var(--color-blue-500);
+      outline-offset: var(--focus-ring-offset);
+      background-color: var(--color-gray-600);
+    }
+
+    .ToggleSwitch-module_checkbox__NmNyg:not(.ToggleSwitch-module_disabled__qntEm) + &:hover,
+    label:hover .ToggleSwitch-module_checkbox__NmNyg:not(.ToggleSwitch-module_disabled__qntEm) + & {
+      background-color: var(--color-gray-600);
+    }
+
     /* stylelint-enable no-descending-specificity */
   }
-  .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R):focus + .ToggleSwitch-module_track__fcDMP, .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R):hover:focus + .ToggleSwitch-module_track__fcDMP {
-    border-color: transparent;
-    outline: 2px solid var(--color-blue-500, #0168b3);
-    outline-offset: 1px;
-    background-color: var(--color-gray-600, #524e56);
-  }
-  .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
-    background-color: var(--color-purple-500, #844587);
-    background-color: var(--color-gray-600, #524e56);
-  }
-  .ToggleSwitch-module_thumb__8PULV {
+
+  .ToggleSwitch-module_thumb__YIdcS {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--color-white, #ffffff);
-    border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
-    border-radius: var(--spacing-md, 1.5rem);
-    transition: left var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear), right var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear);
+    background-color: var(--color-white);
+    border: var(--border-borderless-border-width) var(--border-borderless-border-style)
+      var(--border-borderless-border-color);
+    border-radius: var(--spacing-md);
+    transition:
+      left var(--animation-timing),
+      right var(--animation-timing);
     cursor: default;
   }
-  .ToggleSwitch-module_checkIcon__8iitB {
-    color: var(--color-green-500, #3f9a86);
-    opacity: 0%;
-    transition-duration: var(--animation-duration-rapid, 200ms);
+
+  .ToggleSwitch-module_checkIcon__J4eSM {
+    color: var(--color-green-500);
+    opacity: 0;
+    transition-duration: var(--animation-duration-rapid);
   }
+
   /* stylelint-disable no-descending-specificity */
-  .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP {
-    border-color: var(--border-borderless-border-color, transparent);
-    background-color: var(--color-green-500, #3f9a86);
-  }
-  .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP {
-    border-color: transparent;
-    background-color: var(--color-green-600, #2c7d67);
-  }
-  .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_thumb__8PULV {
-    position: relative;
-    right: auto;
-    inset-inline-start: calc(var(--spacing-md, 1.5rem) * 1.1);
-  }
-  .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkIcon__8iitB {
-    opacity: 100%;
-    transition-delay: var(--animation-duration-immediate, 100ms);
-    transition-duration: var(--animation-duration-fast, 300ms);
-  }
-  .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
-    background-color: var(--color-green-600, #2c7d67);
-  }
-  .ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_thumb__8PULV {
-    position: relative;
-    right: auto;
-    inset-inline-start: calc(var(--spacing-md, 1.5rem) * -0.05);
-  }
-  .ToggleSwitch-module_reversed__Q3-iM .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP,
-  .ToggleSwitch-module_reversed__Q3-iM .ToggleSwitch-module_checkbox__ezWz3:hover:focus + .ToggleSwitch-module_track__fcDMP {
-    outline-color: var(--color-blue-300, #73c0e8);
-  }
-  .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_track__fcDMP {
-    background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.2);
+  .ToggleSwitch-module_on__-OJbU {
+    .ToggleSwitch-module_checkbox__NmNyg + .ToggleSwitch-module_track__Zvo6N {
+      border-color: var(--border-borderless-border-color);
+      background-color: var(--color-green-500);
+    }
+
+    .ToggleSwitch-module_checkbox__NmNyg:focus + .ToggleSwitch-module_track__Zvo6N {
+      border-color: transparent;
+      background-color: var(--color-green-600);
+    }
+
+    .ToggleSwitch-module_thumb__YIdcS {
+      position: relative;
+      right: auto;
+      inset-inline-start: calc(var(--spacing-md) * 1.1);
+    }
+
+    .ToggleSwitch-module_checkIcon__J4eSM {
+      opacity: 1;
+      transition-delay: var(--animation-duration-immediate);
+      transition-duration: var(--animation-duration-fast);
+    }
+
+    .ToggleSwitch-module_checkbox__NmNyg:not(.ToggleSwitch-module_disabled__qntEm) + .ToggleSwitch-module_track__Zvo6N:hover,
+    label:hover & .ToggleSwitch-module_checkbox__NmNyg:not(.ToggleSwitch-module_disabled__qntEm) + .ToggleSwitch-module_track__Zvo6N {
+      background-color: var(--color-green-600);
+    }
   }
-  .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP,
-  .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:hover:focus + .ToggleSwitch-module_track__fcDMP {
-    background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
+
+  .ToggleSwitch-module_off__e-dto {
+    .ToggleSwitch-module_thumb__YIdcS {
+      position: relative;
+      right: auto;
+      inset-inline-start: calc(var(--spacing-md) * -0.05);
+    }
   }
-  .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
-    background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
+
+  .ToggleSwitch-module_reversed__5Jz8i {
+    .ToggleSwitch-module_checkbox__NmNyg:focus + .ToggleSwitch-module_track__Zvo6N,
+    .ToggleSwitch-module_checkbox__NmNyg:hover:focus + .ToggleSwitch-module_track__Zvo6N {
+      outline-color: var(--color-blue-300);
+    }
+
+    &.ToggleSwitch-module_off__e-dto {
+      .ToggleSwitch-module_track__Zvo6N {
+        background-color: rgb(var(--color-white-rgb), 0.2);
+      }
+
+      .ToggleSwitch-module_checkbox__NmNyg:focus + .ToggleSwitch-module_track__Zvo6N,
+      .ToggleSwitch-module_checkbox__NmNyg:hover:focus + .ToggleSwitch-module_track__Zvo6N {
+        background-color: rgb(var(--color-white-rgb), 0.65);
+      }
+
+      .ToggleSwitch-module_checkbox__NmNyg:not(.ToggleSwitch-module_disabled__qntEm) + .ToggleSwitch-module_track__Zvo6N:hover,
+      label:hover & .ToggleSwitch-module_checkbox__NmNyg:not(.ToggleSwitch-module_disabled__qntEm) + .ToggleSwitch-module_track__Zvo6N {
+        background-color: rgb(var(--color-white-rgb), 0.65);
+      }
+    }
   }
-  label .ToggleSwitch-module_disabled__3H-9R.ToggleSwitch-module_track__fcDMP {
-    opacity: 100%;
+
+  /* When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component */
+  label .ToggleSwitch-module_disabled__qntEm.ToggleSwitch-module_track__Zvo6N {
+    opacity: 1;
   }
-  .ToggleSwitch-module_disabled__3H-9R.ToggleSwitch-module_track__fcDMP {
-    opacity: 30%;
+
+  .ToggleSwitch-module_disabled__qntEm.ToggleSwitch-module_track__Zvo6N {
+    opacity: 0.3;
   }
+
   /* stylelint-enable no-descending-specificity */
 }
-/** THIS IS AN AUTOGENERATED FILE **/
+
 @layer kz-components {
-  .ToggleSwitchField-module_container__e7TXD {
+  .ToggleSwitchField-module_container__6c4oG {
     display: flex;
   }
-  .ToggleSwitchField-module_fullWidth__ybDf- .ToggleSwitchField-module_inner__9-O0m {
-    width: 100%;
+
+  .ToggleSwitchField-module_fullWidth__iGJSg {
+    .ToggleSwitchField-module_inner__k1hyg {
+      width: 100%;
+    }
   }
-  .ToggleSwitchField-module_on__HQOkN label {
-    font-weight: var(--typography-paragraph-bold-font-weight, 600);
+
+  .ToggleSwitchField-module_on__8RJfp label {
+    font-weight: var(--typography-paragraph-bold-font-weight);
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
+
 @layer kz-components {
-  .OverlayArrow-module_overlayArrow__UoDjH {
+  .OverlayArrow-module_overlayArrow__65sMU {
     display: flex;
+
+    /* 
+    for correct arrow positioning with rounded corners we need to do bit trickery here
+    the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
+    so we first set padding on arrow from all sides (that'll be used for start position computation)
+    and then we remove it from the oposite axis
+   */
+
     padding: 8px;
-  }
-  .OverlayArrow-module_overlayArrow__UoDjH[data-placement=top], .OverlayArrow-module_overlayArrow__UoDjH[data-placement=bottom] {
-    padding: 0 8px;
-  }
-  .OverlayArrow-module_overlayArrow__UoDjH[data-placement=left], .OverlayArrow-module_overlayArrow__UoDjH[data-placement=right] {
-    padding: 8px 0;
-  }
-  .OverlayArrow-module_overlayArrow__UoDjH path {
-    fill: var(--color-purple-800, #2f2438);
-    box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
-  }
-  .OverlayArrow-module_overlayArrow__UoDjH[data-placement=right] svg {
-    transform: rotate(90deg);
-  }
-  .OverlayArrow-module_overlayArrow__UoDjH[data-placement=bottom] svg {
-    transform: rotate(180deg);
-  }
-  .OverlayArrow-module_overlayArrow__UoDjH[data-placement=left] svg {
-    transform: rotate(270deg);
-  }
-  .OverlayArrow-module_overlayArrow__UoDjH.OverlayArrow-module_reversed__N3t-k path {
-    fill: var(--color-white, #ffffff);
+
+    &[data-placement='top'],
+    &[data-placement='bottom'] {
+      padding: 0 8px;
+    }
+
+    &[data-placement='left'],
+    &[data-placement='right'] {
+      padding: 8px 0;
+    }
+
+    path {
+      fill: var(--color-purple-800);
+      box-shadow: var(--shadow-small-box-shadow);
+    }
+
+    &[data-placement='right'] svg {
+      transform: rotate(90deg);
+    }
+
+    &[data-placement='bottom'] svg {
+      transform: rotate(180deg);
+    }
+
+    &[data-placement='left'] svg {
+      transform: rotate(270deg);
+    }
+
+    &.OverlayArrow-module_reversed__ChGpb path {
+      fill: var(--color-white);
+    }
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
+
 @layer kz-components {
-  .Tooltip-module_tooltip__NMZ65 {
+  .Tooltip-module_tooltip__Q1YfF {
     max-width: 200px;
-    padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
-    color: var(--color-white, #ffffff);
+    padding: var(--spacing-8) var(--spacing-12);
+    color: var(--color-white);
     text-align: center;
-    font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
-    font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
-    letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
-    line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
-    border-radius: var(--border-solid-border-radius, 7px);
-    box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
-    background-color: var(--color-purple-800, #2f2438);
+    font-family: var(--typography-paragraph-extra-small-font-family);
+    font-size: var(--typography-paragraph-extra-small-font-size);
+    font-weight: var(--typography-paragraph-extra-small-font-weight);
+    letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
+    line-height: var(--typography-paragraph-extra-small-line-height);
+    border-radius: var(--border-solid-border-radius);
+    box-shadow: var(--shadow-small-box-shadow);
+    background-color: var(--color-purple-800);
     text-wrap: pretty;
+
     /* fixes FF gap */
     transform: translate3d(0, 0, 0);
-  }
-  .Tooltip-module_tooltip__NMZ65.Tooltip-module_reversed__aTr5h {
-    background-color: var(--color-white, #ffffff);
-    color: var(--color-purple-800, #2f2438);
-  }
-  .Tooltip-module_tooltip__NMZ65[data-placement=top] {
-    --origin: translateY(4px);
-  }
-  .Tooltip-module_tooltip__NMZ65[data-placement=bottom] {
-    --origin: translateY(-4px);
-  }
-  .Tooltip-module_tooltip__NMZ65[data-placement=right] {
-    --origin: translateX(-4px);
-  }
-  .Tooltip-module_tooltip__NMZ65[data-placement=left] {
-    --origin: translateX(4px);
-  }
-  .Tooltip-module_tooltip__NMZ65[data-entering] {
-    animation: Tooltip-module_slide__d94sa var(--animation-duration-fast, 300ms);
-  }
-  .Tooltip-module_tooltip__NMZ65[data-exiting] {
-    animation: Tooltip-module_slide__d94sa var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
+
+    &.Tooltip-module_reversed__IIGeJ {
+      background-color: var(--color-white);
+      color: var(--color-purple-800);
+    }
+
+    &[data-placement='top'] {
+      --origin: translateY(4px);
+    }
+
+    &[data-placement='bottom'] {
+      --origin: translateY(-4px);
+    }
+
+    &[data-placement='right'] {
+      --origin: translateX(-4px);
+    }
+
+    &[data-placement='left'] {
+      --origin: translateX(4px);
+    }
+
+    &[data-entering] {
+      animation: Tooltip-module_slide__TOr18 var(--animation-duration-fast);
+    }
+
+    &[data-exiting] {
+      animation: Tooltip-module_slide__TOr18 var(--animation-duration-fast) reverse
+        var(--animation-easing-function-ease-in);
+    }
   }
 }
-@keyframes Tooltip-module_slide__d94sa {
+
+@keyframes Tooltip-module_slide__TOr18 {
   from {
     transform: var(--origin);
     opacity: 0;
   }
+
   to {
     transform: translateY(0);
     opacity: 1;
   }
 }
+
 @layer kz-components {
   .Well-module_container__Bu20U {
     background-color: var(--background-color);