@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

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

@@ -3,52 +3,50 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../GenericModal/GenericModal.module';
 
-@layer kz-components {
-  .modal {
-    @extend %genericModal;
+.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,11 +1,9 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .toggleContainer {
-    margin-top: $spacing-6;
-  }
+.toggleContainer {
+  margin-top: $spacing-6;
+}
 
-  .popover {
-    padding: $spacing-12;
-  }
+.popover {
+  padding: $spacing-12;
 }

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

@@ -1,74 +1,72 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 
-@layer kz-components {
-  $checkbox-size: 24px;
-  $focus-ring-offset: 2px;
-  $focus-ring-size: calc(#{$checkbox-size} + #{$focus-ring-offset});
+$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,71 +3,69 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-@layer kz-components {
-  .multiSelectOptionField {
-    display: flex;
-    align-items: flex-start;
-    gap: $spacing-6;
-    padding: $spacing-6;
-    border-radius: $border-solid-border-radius;
-    position: relative;
+.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,11 +1,9 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .multiSelectOptions {
-    display: flex;
-    flex-direction: column;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
+.multiSelectOptions {
+  display: flex;
+  flex-direction: column;
+  border: none;
+  padding: 0;
+  margin: 0;
 }

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

@@ -3,86 +3,84 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../../../../styles/utils/button-reset';
 
-@layer kz-components {
-  .multiSelectToggle {
-    position: relative;
-    display: inline-flex;
-    width: 100%;
-    border: $border-solid-border-style $border-solid-border-width $color-gray-500;
-    border-radius: $border-solid-border-radius;
-    flex-direction: row-reverse;
-    padding: calc(#{$spacing-12} - #{$border-solid-border-width});
-    box-sizing: border-box;
+.multiSelectToggle {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  border: $border-solid-border-style $border-solid-border-width $color-gray-500;
+  border-radius: $border-solid-border-radius;
+  flex-direction: row-reverse;
+  padding: calc(#{$spacing-12} - #{$border-solid-border-width});
+  box-sizing: border-box;
 
-    &:hover,
-    &:focus-within {
-      border-color: $color-gray-600;
-      background-color: $color-gray-200;
-    }
+  &:hover,
+  &:focus-within {
+    border-color: $color-gray-600;
+    background-color: $color-gray-200;
+  }
 
-    &.error {
-      border: $border-solid-border-style $border-solid-border-width $color-red-500;
-    }
+  &.error {
+    border: $border-solid-border-style $border-solid-border-width $color-red-500;
+  }
 
-    &.caution {
-      border: $border-solid-border-style $border-solid-border-width $color-yellow-600;
-    }
+  &.caution {
+    border: $border-solid-border-style $border-solid-border-width $color-yellow-600;
   }
+}
 
-  .toggleButton {
-    @include button-reset;
+.toggleButton {
+  @include button-reset;
 
-    display: inline-flex;
-    align-items: flex-start;
-    margin: 3px 0;
-    color: rgba($color-purple-800-rgb, 0.7);
+  display: inline-flex;
+  align-items: flex-start;
+  margin: 3px 0;
+  color: rgba($color-purple-800-rgb, 0.7);
 
-    &:hover {
-      color: $color-purple-800;
-    }
+  &:hover {
+    color: $color-purple-800;
+  }
 
-    &:focus {
-      color: $color-purple-800;
-      outline: none;
+  &:focus {
+    color: $color-purple-800;
+    outline: none;
 
-      &::after {
-        position: absolute;
-        pointer-events: none;
-        content: '';
-        inset: calc(
-          -1 * calc(#{$border-focus-ring-border-width} + #{$border-solid-border-width} + 1px)
-        );
-        border-radius: $border-focus-ring-border-radius;
-        border: $border-focus-ring-border-style $border-focus-ring-border-width $color-blue-500;
-      }
+    &::after {
+      position: absolute;
+      pointer-events: none;
+      content: '';
+      inset: calc(
+        -1 * calc(#{$border-focus-ring-border-width} + #{$border-solid-border-width} + 1px)
+      );
+      border-radius: $border-focus-ring-border-radius;
+      border: $border-focus-ring-border-style $border-focus-ring-border-width $color-blue-500;
     }
   }
+}
 
-  .selectedItemsContainer {
-    display: flex;
-    gap: $spacing-12;
-    align-items: flex-start;
-    width: 100%;
-    border-inline-end: 1px solid transparent;
-    padding-inline-end: $spacing-12;
-    margin-inline-end: $spacing-12;
+.selectedItemsContainer {
+  display: flex;
+  gap: $spacing-12;
+  align-items: flex-start;
+  width: 100%;
+  border-inline-end: 1px solid transparent;
+  padding-inline-end: $spacing-12;
+  margin-inline-end: $spacing-12;
 
-    &.hasSelectedItems {
-      border-inline-end-color: rgba($color-gray-600-rgb, 0.2);
-    }
+  &.hasSelectedItems {
+    border-inline-end-color: rgba($color-gray-600-rgb, 0.2);
   }
+}
 
-  .selectedItems {
-    display: flex;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    margin: 0;
-    padding: 0;
-    gap: $spacing-6;
-    list-style: none;
-  }
+.selectedItems {
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+  gap: $spacing-6;
+  list-style: none;
+}
 
-  .clearAllButton {
-    margin: 3px 0;
-  }
+.clearAllButton {
+  margin: 3px 0;
 }

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

@@ -2,22 +2,20 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/shadow';
 
-@layer kz-components {
-  .popover {
-    box-sizing: border-box;
-    box-shadow: $shadow-large-box-shadow;
-    border: $border-focus-ring-border-width $border-focus-ring-border-style transparent;
-    border-radius: $border-solid-border-radius;
-    background: $color-white;
-    overflow: auto;
-    z-index: 100000;
+.popover {
+  box-sizing: border-box;
+  box-shadow: $shadow-large-box-shadow;
+  border: $border-focus-ring-border-width $border-focus-ring-border-style transparent;
+  border-radius: $border-solid-border-radius;
+  background: $color-white;
+  overflow: auto;
+  z-index: 100000;
 
-    &:focus {
-      outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:focus-visible {
-      border-color: $color-blue-500;
-    }
+  &:focus-visible {
+    border-color: $color-blue-500;
   }
 }

package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.module.scss

@@ -1,28 +1,26 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-@layer kz-components {
-  .toastNotificationsList {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    overflow: hidden;
-    padding-bottom: 0;
-    padding-top: 160px + 12px;
-    position: fixed;
-    right: $spacing-md;
-    top: 0;
-    bottom: 0;
-    z-index: 1100;
-    max-width: 100%;
-    pointer-events: none;
+.toastNotificationsList {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  overflow: hidden;
+  padding-bottom: 0;
+  padding-top: 160px + 12px;
+  position: fixed;
+  right: $spacing-md;
+  top: 0;
+  bottom: 0;
+  z-index: 1100;
+  max-width: 100%;
+  pointer-events: none;
 
-    @media (max-width: ($layout-breakpoints-large - 1px)) {
-      padding-top: 108px;
-    }
+  @media (max-width: ($layout-breakpoints-large - 1px)) {
+    padding-top: 108px;
+  }
 
-    @media (max-width: ($layout-breakpoints-medium - 1px)) {
-      left: $spacing-md;
-    }
+  @media (max-width: ($layout-breakpoints-medium - 1px)) {
+    left: $spacing-md;
   }
 }