@kaizen/components 2.4.0 → 2.5.1

package/dist/styles.css

@@ -1020,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_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_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_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%;
@@ -2400,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 **/
@@ -2716,7 +2768,7 @@
 
     /* 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);
+      margin: 0 var(--spacing-12);
     }
   }
 }
@@ -3331,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 {
@@ -4975,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;
@@ -5026,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;
@@ -5177,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;
@@ -5223,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;
@@ -5292,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));
@@ -10918,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);