@kaizen/components 1.78.0 → 1.79.0

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;
+  }
 }

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

@@ -3,84 +3,86 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../../../../styles/utils/button-reset';
 
-.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;
+@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;
 
-  &: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,20 +2,22 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/shadow';
 
-.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;
+@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;
 
-  &: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,26 +1,28 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-.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;
+@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;
 
-  @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;
+    }
   }
 }