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

package/src/__next__/Menu/Menu.module.css

@@ -1,34 +1,32 @@
-@layer kz-components {
-  .menu {
-    background-color: var(--color-white);
-    color: var(--color-purple-800);
-    width: 248px;
-    max-height: 22rem;
-    overflow: auto;
-    padding-block: var(--spacing-6);
-    outline: none;
-    border-radius: var(--border-solid-border-radius);
-    box-shadow: var(--shadow-large-box-shadow);
-  }
+.menu {
+  background-color: var(--color-white);
+  color: var(--color-purple-800);
+  width: 248px;
+  max-height: 22rem;
+  overflow: auto;
+  padding-block: var(--spacing-6);
+  outline: none;
+  border-radius: var(--border-solid-border-radius);
+  box-shadow: var(--shadow-large-box-shadow);
+}
 
-  .menu :global(.react-aria-Header) {
-    font-family: var(--typography-heading-6-font-family);
-    font-size: var(--typography-heading-6-font-size);
-    letter-spacing: var(--typography-heading-6-letter-spacing);
-    font-weight: var(--typography-heading-6-font-weight);
-    line-height: var(--typography-heading-6-line-height);
-    padding: var(--spacing-6) 10px;
-    margin-inline: var(--spacing-6);
-  }
+.menu :global(.react-aria-Header) {
+  font-family: var(--typography-heading-6-font-family);
+  font-size: var(--typography-heading-6-font-size);
+  letter-spacing: var(--typography-heading-6-letter-spacing);
+  font-weight: var(--typography-heading-6-font-weight);
+  line-height: var(--typography-heading-6-line-height);
+  padding: var(--spacing-6) 10px;
+  margin-inline: var(--spacing-6);
+}
 
-  .menu section:not(:last-of-type) {
-    &::after {
-      width: 100%;
-      height: 1px;
-      background-color: var(--border-solid-border-color);
-      content: '';
-      display: block;
-      margin-block: var(--spacing-6);
-    }
+.menu section:not(:last-of-type) {
+  &::after {
+    width: 100%;
+    height: 1px;
+    background-color: var(--border-solid-border-color);
+    content: '';
+    display: block;
+    margin-block: var(--spacing-6);
   }
 }

package/src/__next__/Menu/MenuItem.module.css

@@ -1,48 +1,46 @@
-@layer kz-components {
-  .item {
-    display: block;
-    font-family: var(--typography-paragraph-body-font-family);
-    font-size: var(--typography-paragraph-body-font-size);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    line-height: var(--typography-paragraph-body-line-height);
-    color: var(--color-purple-800);
-    padding: var(--spacing-6) var(--spacing-8);
-    border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
-    border-radius: 4px;
-    margin-inline: var(--spacing-6);
-    text-decoration: none;
-    cursor: pointer;
-  }
+.item {
+  display: block;
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--typography-paragraph-body-font-size);
+  letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  line-height: var(--typography-paragraph-body-line-height);
+  color: var(--color-purple-800);
+  padding: var(--spacing-6) var(--spacing-8);
+  border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
+  border-radius: 4px;
+  margin-inline: var(--spacing-6);
+  text-decoration: none;
+  cursor: pointer;
+}
 
-  .flexWrapper {
-    display: flex;
-    gap: 0 var(--spacing-8);
-    align-items: center;
-  }
+.flexWrapper {
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+}
 
-  .iconWrapper {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-  }
+.iconWrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
 
-  .item:focus {
-    outline: none;
-  }
+.item:focus {
+  outline: none;
+}
 
-  .item[data-hovered],
-  .item[data-focus-visible] {
-    background-color: var(--color-blue-100);
-    color: var(--color-blue-500);
-  }
+.item[data-hovered],
+.item[data-focus-visible] {
+  background-color: var(--color-blue-100);
+  color: var(--color-blue-500);
+}
 
-  .item[data-focus-visible] {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-  }
+.item[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+    var(--color-blue-500);
+}
 
-  .item[data-disabled] {
-    opacity: 0.3;
-  }
+.item[data-disabled] {
+  opacity: 0.3;
 }

package/src/__next__/Select/Select.module.scss

@@ -3,13 +3,11 @@
 @import '~@kaizen/design-tokens/sass/shadow';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .container {
-    position: relative;
-    width: 100%;
-  }
+.container {
+  position: relative;
+  width: 100%;
+}
 
-  .notFullWidth {
-    width: 180px;
-  }
+.notFullWidth {
+  width: 180px;
 }

package/src/__next__/Select/subcomponents/ListBox/ListBox.module.scss

@@ -1,14 +1,12 @@
-@layer kz-components {
-  .listBox {
-    list-style: none;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: 0;
-    display: grid;
-    max-height: 22rem;
-  }
+.listBox {
+  list-style: none;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0;
+  display: grid;
+  max-height: 22rem;
+}
 
-  .listBox:focus-visible {
-    outline: none;
-  }
+.listBox:focus-visible {
+  outline: none;
 }

package/src/__next__/Select/subcomponents/ListBoxSection/ListBoxSection.module.scss

@@ -1,22 +1,20 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .sectionWrapper {
-    display: flex;
-    flex-direction: column;
+.sectionWrapper {
+  display: flex;
+  flex-direction: column;
 
-    &:not(:first-child) {
-      margin-top: $spacing-8;
-    }
+  &:not(:first-child) {
+    margin-top: $spacing-8;
   }
+}
 
-  .sectionHeading {
-    padding-inline-start: $spacing-4;
-  }
+.sectionHeading {
+  padding-inline-start: $spacing-4;
+}
 
-  .sectionList {
-    display: flex;
-    flex-direction: column;
-    padding: $spacing-xs 0 0 0;
-  }
+.sectionList {
+  display: flex;
+  flex-direction: column;
+  padding: $spacing-xs 0 0 0;
 }

package/src/__next__/Select/subcomponents/Option/Option.module.scss

@@ -3,73 +3,71 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  $iconAndBadgeHeight: $spacing-md;
+$iconAndBadgeHeight: $spacing-md;
 
-  .icon {
-    line-height: 1;
-    height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-    width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .option {
-    height: fit-content;
-    align-items: center;
-    display: inline-grid;
-    grid-template-columns: auto $spacing-md;
-    gap: $spacing-xs;
-    padding-block: $spacing-8;
-    padding-inline: $spacing-12 $spacing-6;
-    position: relative;
-    font-family: $typography-paragraph-body-font-family;
-    font-size: $typography-paragraph-body-font-size;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    font-weight: $typography-paragraph-body-font-weight;
-    line-height: $typography-paragraph-body-line-height;
-    border: $border-solid-border-width $border-solid-border-style;
-    border-color: $border-borderless-border-color;
-    border-radius: 4px;
-    cursor: default;
+.icon {
+  line-height: 1;
+  height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+  width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
 
-    &:focus {
-      outline: none;
-    }
+.option {
+  height: fit-content;
+  align-items: center;
+  display: inline-grid;
+  grid-template-columns: auto $spacing-md;
+  gap: $spacing-xs;
+  padding-block: $spacing-8;
+  padding-inline: $spacing-12 $spacing-6;
+  position: relative;
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  font-weight: $typography-paragraph-body-font-weight;
+  line-height: $typography-paragraph-body-line-height;
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $border-borderless-border-color;
+  border-radius: 4px;
+  cursor: default;
 
-    &.isFocusVisible {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-500);
+  &:focus {
+    outline: none;
+  }
 
-      .icon {
-        color: $color-blue-500;
-      }
-    }
+  &.isFocusVisible {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
 
-    &:hover:not(.disabled),
-    &:active:not(.disabled) {
-      background-color: $color-blue-100;
+    .icon {
       color: $color-blue-500;
-
-      .icon {
-        color: $color-blue-500;
-      }
     }
   }
 
-  .isSelected {
-    font-weight: $typography-paragraph-bold-font-weight;
+  &:hover:not(.disabled),
+  &:active:not(.disabled) {
+    background-color: $color-blue-100;
     color: $color-blue-500;
 
-    &.icon {
+    .icon {
       color: $color-blue-500;
     }
   }
+}
+
+.isSelected {
+  font-weight: $typography-paragraph-bold-font-weight;
+  color: $color-blue-500;
 
-  .disabled {
-    color: $color-gray-500;
+  &.icon {
+    color: $color-blue-500;
   }
 }
+
+.disabled {
+  color: $color-gray-500;
+}

package/src/__next__/Select/subcomponents/SectionDivider/SectionDivider.module.scss

@@ -1,13 +1,11 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .divider {
-    margin: $spacing-8 0;
+.divider {
+  margin: $spacing-8 0;
 
-    &:first-child,
-    &:last-child,
-    & + .divider {
-      display: none;
-    }
+  &:first-child,
+  &:last-child,
+  & + .divider {
+    display: none;
   }
 }

package/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.module.scss

@@ -1,7 +1,5 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .selectPopoverContents {
-    padding: $spacing-12;
-  }
+.selectPopoverContents {
+  padding: $spacing-12;
 }

package/src/__next__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -4,133 +4,131 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../../../../../styles/utils/button-reset';
 
-@layer kz-components {
-  .iconWrapper {
-    line-height: 1;
-  }
-
-  .icon {
-    color: $color-gray-500;
-  }
-
-  .selectToggle {
-    @include button-reset;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    position: relative;
-    display: inline-flex;
-    flex: 1;
-    justify-content: space-between;
-    align-items: center;
-    height: $spacing-xl;
-    width: 100%;
-    min-width: 0;
-    margin-top: $spacing-xs;
-    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-    border-radius: $border-solid-border-radius;
-    background-color: $color-white;
-    padding-block: calc(#{$spacing-12} - #{$border-solid-border-width});
-    padding-inline: 0.875rem $spacing-12;
-    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;
-    color: $color-purple-800;
-    white-space: nowrap;
-
-    &:hover,
-    &:active,
-    &:focus {
-      .icon {
-        color: $color-gray-600;
-      }
-    }
+.iconWrapper {
+  line-height: 1;
+}
 
-    &:active,
-    &:hover {
-      background-color: $color-gray-200;
-      border-color: $color-gray-600;
-    }
+.icon {
+  color: $color-gray-500;
+}
 
-    &:focus {
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-500);
-      outline-offset: 1px;
-      background-color: $color-gray-200;
-      border-color: $color-gray-600;
+.selectToggle {
+  @include button-reset;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  display: inline-flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  height: $spacing-xl;
+  width: 100%;
+  min-width: 0;
+  margin-top: $spacing-xs;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+  border-radius: $border-solid-border-radius;
+  background-color: $color-white;
+  padding-block: calc(#{$spacing-12} - #{$border-solid-border-width});
+  padding-inline: 0.875rem $spacing-12;
+  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;
+  color: $color-purple-800;
+  white-space: nowrap;
+
+  &:hover,
+  &:active,
+  &:focus {
+    .icon {
+      color: $color-gray-600;
     }
   }
 
-  .placeholder {
-    color: rgb($color-purple-800-rgb, 0.7);
+  &:active,
+  &:hover {
+    background-color: $color-gray-200;
+    border-color: $color-gray-600;
   }
 
-  .error {
-    border: $border-solid-border-width $border-solid-border-style $color-red-500;
+  &:focus {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
+    background-color: $color-gray-200;
+    border-color: $color-gray-600;
   }
+}
 
-  .caution {
-    border: $border-solid-border-width $border-solid-border-style $color-yellow-600;
-  }
+.placeholder {
+  color: rgba($color-purple-800-rgb, 0.7);
+}
 
-  .disabled {
-    border: $border-solid-border-width $border-solid-border-style $color-gray-300;
-    background-color: $color-gray-100;
-    color: $color-gray-500;
-    pointer-events: none;
-  }
+.error {
+  border: $border-solid-border-width $border-solid-border-style $color-red-500;
+}
 
-  .reversed {
-    border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.8);
-    background-color: transparent;
-    color: $color-white;
+.caution {
+  border: $border-solid-border-width $border-solid-border-style $color-yellow-600;
+}
 
-    &.placeholder {
-      color: rgba($color-white-rgb, 0.65);
-    }
+.disabled {
+  border: $border-solid-border-width $border-solid-border-style $color-gray-300;
+  background-color: $color-gray-100;
+  color: $color-gray-500;
+  pointer-events: none;
+}
 
-    &.selectToggle .icon {
-      color: rgb(255, 255, 255, 0.8);
-    }
+.reversed {
+  border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.8);
+  background-color: transparent;
+  color: $color-white;
 
-    &:active,
-    &:hover,
-    &:focus {
-      background-color: rgba($color-white-rgb, 0.1);
-      border: $border-solid-border-width $border-solid-border-style $color-white;
+  &.placeholder {
+    color: rgba($color-white-rgb, 0.65);
+  }
 
-      .icon {
-        color: $color-white;
-      }
-    }
+  &.selectToggle .icon {
+    color: rgba(255, 255, 255, 0.8);
+  }
 
-    &:focus {
-      outline-color: var(--color-blue-300);
-    }
+  &:active,
+  &:hover,
+  &:focus {
+    background-color: rgba($color-white-rgb, 0.1);
+    border: $border-solid-border-width $border-solid-border-style $color-white;
 
-    .error {
-      border-color: $color-red-300;
+    .icon {
+      color: $color-white;
     }
+  }
 
-    .caution {
-      border-color: $color-yellow-400;
-    }
+  &:focus {
+    outline-color: var(--color-blue-300);
   }
 
-  .reversed.disabled {
-    background-color: transparent;
-    border-color: rgba($color-white-rgb, 0.3);
-    color: rgba($color-white-rgb, 0.3);
+  .error {
+    border-color: $color-red-300;
   }
 
-  .value {
-    width: 100%;
-    text-align: start;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-inline-end: var(--spacing-12);
+  .caution {
+    border-color: $color-yellow-400;
   }
 }
+
+.reversed.disabled {
+  background-color: transparent;
+  border-color: rgba($color-white-rgb, 0.3);
+  color: rgba($color-white-rgb, 0.3);
+}
+
+.value {
+  width: 100%;
+  text-align: start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-inline-end: var(--spacing-12);
+}