@kaizen/components 0.0.0-canary-test-cherry-picked-updates-20250702235156 → 0.0.0-canary-ssr-generic-modal-1-20250709023540

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.module.scss

@@ -2,74 +2,76 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-.actions {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-start;
-}
+@layer kz-components {
+  .actions {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+  }
 
-.actionsAlignStart {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
+  .actionsAlignStart {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
 
-.padded {
-  padding: $spacing-md;
-  flex-direction: column;
+  .padded {
+    padding: $spacing-md;
+    flex-direction: column;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    padding: 0 $spacing-lg $spacing-lg;
-    flex-direction: row-reverse;
+    @media (min-width: $layout-breakpoints-medium) {
+      padding: 0 $spacing-lg $spacing-lg;
+      flex-direction: row-reverse;
+    }
   }
-}
 
-.actionButton {
-  width: 100%;
+  .actionButton {
+    width: 100%;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    width: inherit;
+    @media (min-width: $layout-breakpoints-medium) {
+      width: inherit;
+    }
   }
-}
 
-.actionButton + .actionButton {
-  margin-inline-end: $spacing-sm;
+  .actionButton + .actionButton {
+    margin-inline-end: $spacing-sm;
 
-  @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
-    margin-block-start: $spacing-sm;
+    @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
+      margin-block-start: $spacing-sm;
+    }
   }
-}
 
-.footerWrap {
-  align-items: baseline;
-  width: 100%;
-  box-sizing: border-box;
-}
+  .footerWrap {
+    align-items: baseline;
+    width: 100%;
+    box-sizing: border-box;
+  }
 
-.center {
-  display: flex;
-  justify-content: center;
-}
+  .center {
+    display: flex;
+    justify-content: center;
+  }
 
-.border {
-  border-block-start: 1px solid $border-solid-border-color;
-}
+  .border {
+    border-block-start: 1px solid $border-solid-border-color;
+  }
 
-.start {
-  display: flex;
-  justify-content: flex-start;
-}
+  .start {
+    display: flex;
+    justify-content: flex-start;
+  }
 
-.end {
-  display: flex;
-  justify-content: flex-end;
-}
+  .end {
+    display: flex;
+    justify-content: flex-end;
+  }
 
-.fixed {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-}
+  .fixed {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
 
-.filler {
-  visibility: hidden;
+  .filler {
+    visibility: hidden;
+  }
 }

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss

@@ -2,23 +2,25 @@
 @import '../../../../../styles/utils/legacy/layout';
 @import '../../../../../styles/utils/layers';
 
-.dismissButton {
-  position: absolute;
-  z-index: $ca-z-index-popover;
+@layer kz-components {
+  .dismissButton {
+    position: absolute;
+    z-index: $ca-z-index-popover;
 
-  @include ca-position($end: 0, $top: 0);
-}
+    @include ca-position($end: 0, $top: 0);
+  }
 
-.layout {
-  width: 100%;
-}
+  .layout {
+    width: 100%;
+  }
 
-.fixed {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
+  .fixed {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
 
-.filler {
-  visibility: hidden;
+  .filler {
+    visibility: hidden;
+  }
 }

package/src/Modal/InputEditModal/InputEditModal.module.scss

@@ -3,50 +3,52 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../GenericModal/GenericModal.module';
 
-.modal {
-  @extend %genericModal;
+@layer kz-components {
+  .modal {
+    @extend %genericModal;
 
-  min-width: 300px;
-  max-width: 600px;
+    min-width: 300px;
+    max-width: 600px;
 
-  .animatingEnter & {
-    animation-duration: $ca-duration-fast;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-in;
+    .animatingEnter & {
+      animation-duration: $ca-duration-fast;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-in;
 
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-  }
+      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+    }
 
-  .animatingLeave & {
-    animation-duration: $ca-duration-rapid;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-out;
+    .animatingLeave & {
+      animation-duration: $ca-duration-rapid;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-out;
 
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+      @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+    }
   }
-}
 
-.header {
-  color: $color-purple-800;
-  text-align: start;
+  .header {
+    color: $color-purple-800;
+    text-align: start;
 
-  &.padded {
-    padding: $spacing-md $spacing-lg;
+    &.padded {
+      padding: $spacing-md $spacing-lg;
 
-    @media (max-width: $layout-breakpoints-medium) {
-      padding: $spacing-md;
+      @media (max-width: $layout-breakpoints-medium) {
+        padding: $spacing-md;
+      }
     }
   }
-}
 
-.body {
-  background: $color-gray-200;
+  .body {
+    background: $color-gray-200;
 
-  &.padded {
-    padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
+    &.padded {
+      padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
 
-    @media (max-width: $layout-breakpoints-medium) {
-      padding: $spacing-md;
+      @media (max-width: $layout-breakpoints-medium) {
+        padding: $spacing-md;
+      }
     }
   }
 }

package/src/MultiSelect/MultiSelect.module.scss

@@ -1,9 +1,11 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.toggleContainer {
-  margin-top: $spacing-6;
-}
+@layer kz-components {
+  .toggleContainer {
+    margin-top: $spacing-6;
+  }
 
-.popover {
-  padding: $spacing-12;
+  .popover {
+    padding: $spacing-12;
+  }
 }

package/src/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss

@@ -1,72 +1,74 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 
-$checkbox-size: 24px;
-$focus-ring-offset: 2px;
-$focus-ring-size: calc(#{$checkbox-size} + #{$focus-ring-offset});
+@layer kz-components {
+  $checkbox-size: 24px;
+  $focus-ring-offset: 2px;
+  $focus-ring-size: calc(#{$checkbox-size} + #{$focus-ring-offset});
 
-.checkbox {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  min-width: $checkbox-size;
-  width: $checkbox-size;
-  height: $checkbox-size;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  background: $color-white;
+  .checkbox {
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    min-width: $checkbox-size;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    border-radius: $border-solid-border-radius;
+    background: $color-white;
 
-  &:hover,
-  &:focus-within {
-    background: $color-gray-200;
-    border-color: $color-gray-600;
-  }
+    &:hover,
+    &:focus-within {
+      background: $color-gray-200;
+      border-color: $color-gray-600;
+    }
 
-  &:focus-within {
-    &::after {
-      width: $focus-ring-size;
-      height: $focus-ring-size;
-      content: '';
-      pointer-events: none;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      border-radius: $border-focus-ring-border-radius;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-color: $color-blue-500;
+    &:focus-within {
+      &::after {
+        width: $focus-ring-size;
+        height: $focus-ring-size;
+        content: '';
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: $border-focus-ring-border-radius;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        border-color: $color-blue-500;
+      }
     }
   }
-}
 
-// Selected = Checked or Indeterminate
-.selected {
-  background: $color-gray-500;
-  background-color: $color-gray-500;
+  // Selected = Checked or Indeterminate
+  .selected {
+    background: $color-gray-500;
+    background-color: $color-gray-500;
 
-  &:hover,
-  &:focus-within {
-    background: $color-gray-600;
-    border-color: $color-gray-600;
+    &:hover,
+    &:focus-within {
+      background: $color-gray-600;
+      border-color: $color-gray-600;
+    }
   }
-}
 
-.nativeCheckbox {
-  opacity: 0%;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
+  .nativeCheckbox {
+    opacity: 0%;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
 
-.iconContainer {
-  display: inline-block;
-  position: relative;
-  pointer-events: none;
-  height: 100%;
-  width: 100%;
-}
+  .iconContainer {
+    display: inline-block;
+    position: relative;
+    pointer-events: none;
+    height: 100%;
+    width: 100%;
+  }
 
-.icon {
-  color: $color-white;
+  .icon {
+    color: $color-white;
+  }
 }

package/src/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.module.scss

@@ -3,69 +3,71 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-.multiSelectOptionField {
-  display: flex;
-  align-items: flex-start;
-  gap: $spacing-6;
-  padding: $spacing-6;
-  border-radius: $border-solid-border-radius;
-  position: relative;
+@layer kz-components {
+  .multiSelectOptionField {
+    display: flex;
+    align-items: flex-start;
+    gap: $spacing-6;
+    padding: $spacing-6;
+    border-radius: $border-solid-border-radius;
+    position: relative;
 
-  &:hover,
-  &:focus-within {
-    background: $color-blue-100;
+    &:hover,
+    &:focus-within {
+      background: $color-blue-100;
 
-    .checkbox {
-      border-color: $color-gray-600;
-      background-color: $color-gray-200;
+      .checkbox {
+        border-color: $color-gray-600;
+        background-color: $color-gray-200;
 
-      &.checked {
-        background-color: $color-gray-600;
+        &.checked {
+          background-color: $color-gray-600;
+        }
       }
     }
-  }
 
-  &:focus-within {
-    &::after {
-      z-index: 2;
-      width: calc(100% + 2px);
-      height: calc(100% + 2px);
-      content: '';
-      pointer-events: none;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      border-radius: $border-focus-ring-border-radius;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-color: $color-blue-500;
-    }
+    &:focus-within {
+      &::after {
+        z-index: 2;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        content: '';
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: $border-focus-ring-border-radius;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        border-color: $color-blue-500;
+      }
 
-    // removes default checkbox focus ring
-    .checkbox::after {
-      display: none;
+      // removes default checkbox focus ring
+      .checkbox::after {
+        display: none;
+      }
     }
   }
-}
 
-.label {
-  color: $color-purple-800;
-  font-family: $typography-paragraph-body-font-family;
-  font-weight: $typography-paragraph-body-font-weight;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  overflow-wrap: anywhere;
+  .label {
+    color: $color-purple-800;
+    font-family: $typography-paragraph-body-font-family;
+    font-weight: $typography-paragraph-body-font-weight;
+    font-size: $typography-paragraph-body-font-size;
+    line-height: $typography-paragraph-body-line-height;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    overflow-wrap: anywhere;
 
-  // Increases the hit area of the checkbox label to the size of
-  // the surrounding div for better mouse user experience
-  &::before {
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
+    // Increases the hit area of the checkbox label to the size of
+    // the surrounding div for better mouse user experience
+    &::before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
   }
 }

package/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.module.scss

@@ -1,9 +1,11 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.multiSelectOptions {
-  display: flex;
-  flex-direction: column;
-  border: none;
-  padding: 0;
-  margin: 0;
+@layer kz-components {
+  .multiSelectOptions {
+    display: flex;
+    flex-direction: column;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
 }