@kaizen/components 0.0.0-canary-test-fms-popover-api-update-20250624021814 → 0.0.0-canary-test-cherry-picked-updates-20250702235156

package/src/Calendar/baseCalendarClassNames.module.scss

@@ -4,193 +4,191 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '../../styles/utils/button-reset';
 
-@layer kz-components {
-  $button-border-radius: 3px;
-  $rdp-cell-size: 40px;
+$button-border-radius: 3px;
+$rdp-cell-size: 40px;
 
-  %focus-ring {
-    position: relative;
+%focus-ring {
+  position: relative;
 
-    &:focus {
-      outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:focus-visible {
-      outline: none;
+  &:focus-visible {
+    outline: none;
 
-      &::after {
-        $focus-ring-offset: calc(-1 * calc((#{$border-focus-ring-border-width} * 2) + 1px));
+    &::after {
+      $focus-ring-offset: calc(-1 * calc((#{$border-focus-ring-border-width} * 2) + 1px));
 
-        z-index: 2;
-        content: '';
-        position: absolute;
-        inset: $focus-ring-offset;
-        border-radius: $button-border-radius;
-      }
+      z-index: 2;
+      content: '';
+      position: absolute;
+      inset: $focus-ring-offset;
+      border-radius: $button-border-radius;
     }
   }
+}
 
-  %focus-ring--enabled {
-    @extend %focus-ring;
+%focus-ring--enabled {
+  @extend %focus-ring;
 
-    &:focus-visible {
-      &::after {
-        border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      }
+  &:focus-visible {
+    &::after {
+      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
     }
   }
+}
 
-  .root {
-    display: inline-flex;
-    position: relative;
-  }
-
-  .months {
-    display: flex;
-  }
+.root {
+  display: inline-flex;
+  position: relative;
+}
 
-  .buttonReset {
-    @include button-reset;
-  }
+.months {
+  display: flex;
+}
 
-  .button {
-    cursor: pointer;
-  }
+.buttonReset {
+  @include button-reset;
+}
 
-  .caption {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 0 $spacing-xs;
-  }
+.button {
+  cursor: pointer;
+}
 
-  .captionLabel {
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    margin: 0;
-    padding: 0 0.25em;
-    white-space: nowrap;
-    font-family: $typography-heading-4-font-family;
-    font-size: $typography-heading-4-font-size;
-    font-weight: $typography-heading-5-font-weight;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-    color: $color-purple-800;
-  }
+.caption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0 $spacing-xs;
+}
 
-  .navButton {
-    @extend %focus-ring--enabled;
+.captionLabel {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  font-family: $typography-heading-4-font-family;
+  font-size: $typography-heading-4-font-size;
+  font-weight: $typography-heading-5-font-weight;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+  color: $color-purple-800;
+}
 
-    display: inherit;
-    padding: 0.25rem $spacing-xs;
-    border: $border-solid-border-width $border-solid-border-style transparent;
-    border-radius: $button-border-radius;
+.navButton {
+  @extend %focus-ring--enabled;
 
-    &:hover {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+  display: inherit;
+  padding: 0.25rem $spacing-xs;
+  border: $border-solid-border-width $border-solid-border-style transparent;
+  border-radius: $button-border-radius;
 
-    &:focus-visible {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+  &:hover {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
   }
 
-  .table {
-    border-collapse: separate;
-    border-spacing: 1px;
-    margin: 0;
-    max-width: calc(#{$rdp-cell-size} * 7);
+  &:focus-visible {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
   }
+}
 
-  .tbody {
-    border: 0;
-    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;
-  }
+.table {
+  border-collapse: separate;
+  border-spacing: 1px;
+  margin: 0;
+  max-width: calc(#{$rdp-cell-size} * 7);
+}
 
-  .weekday {
-    padding: 0.5rem 0;
-    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;
-    color: $color-purple-800;
-  }
+.tbody {
+  border: 0;
+  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;
+}
 
-  .cell {
-    width: $rdp-cell-size;
-    height: $rdp-cell-size;
-    padding: 0;
-    text-align: center;
-  }
+.weekday {
+  padding: 0.5rem 0;
+  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;
+  color: $color-purple-800;
+}
 
-  .day {
-    @extend %focus-ring--enabled;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: $rdp-cell-size;
-    max-width: $rdp-cell-size;
-    height: $rdp-cell-size;
-    margin: 0;
-    border: $border-borderless-border-width $border-borderless-border-style
-      $border-borderless-border-color;
-    border-radius: $button-border-radius;
-    padding: calc(#{$spacing-md} / 3) 0.625rem;
-    color: $color-purple-800;
-
-    &:hover {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+.cell {
+  width: $rdp-cell-size;
+  height: $rdp-cell-size;
+  padding: 0;
+  text-align: center;
+}
 
-    &:focus-visible {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+.day {
+  @extend %focus-ring--enabled;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: $rdp-cell-size;
+  max-width: $rdp-cell-size;
+  height: $rdp-cell-size;
+  margin: 0;
+  border: $border-borderless-border-width $border-borderless-border-style
+    $border-borderless-border-color;
+  border-radius: $button-border-radius;
+  padding: calc(#{$spacing-md} / 3) 0.625rem;
+  color: $color-purple-800;
+
+  &:hover {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
   }
 
-  .dayToday {
+  &:focus-visible {
+    background-color: $color-blue-100;
     color: $color-blue-500;
-    font-weight: bold;
   }
+}
+
+.dayToday {
+  color: $color-blue-500;
+  font-weight: bold;
+}
 
-  .daySelected {
-    background-color: $color-blue-500;
-    border-radius: $button-border-radius;
+.daySelected {
+  background-color: $color-blue-500;
+  border-radius: $button-border-radius;
+  color: $color-white;
+
+  & .button {
     color: $color-white;
 
-    & .button {
+    &:hover,
+    &:focus-visible {
+      background-color: $color-blue-400;
       color: $color-white;
-
-      &:hover,
-      &:focus-visible {
-        background-color: $color-blue-400;
-        color: $color-white;
-      }
     }
   }
+}
 
-  .dayDisabled {
-    // Focus ring styles have been removed as react-day-picker has been updated such that
-    // disabled days do not receive focus, and keyboard navigation only lands on available days.
-    // https://github.com/gpbl/react-day-picker/pull/1519
-    // https://github.com/gpbl/react-day-picker/issues/1449#issuecomment-1149942033
-    background: none;
-    pointer-events: none;
+.dayDisabled {
+  // Focus ring styles have been removed as react-day-picker has been updated such that
+  // disabled days do not receive focus, and keyboard navigation only lands on available days.
+  // https://github.com/gpbl/react-day-picker/pull/1519
+  // https://github.com/gpbl/react-day-picker/issues/1449#issuecomment-1149942033
+  background: none;
+  pointer-events: none;
 
-    & [class*='_button_'] {
-      color: rgba($color-purple-800-rgb, 0.3);
-    }
+  & [class*='_button_'] {
+    color: rgba($color-purple-800-rgb, 0.3);
   }
 }

package/src/Card/Card.module.css

@@ -1,92 +1,90 @@
-@layer kz-components {
-  .wrapper {
-    color: var(--color-purple-800);
-    border: var(--border-width-1) solid var(--card-border-color);
-    background-color: var(--card-background-color);
-    border-radius: var(--border-solid-border-radius);
-    box-shadow: var(--card-box-shadow);
-
-    --card-border-color: var(--color-gray-500);
-    --card-background-color: var(--color-white);
-    --card-box-shadow: var(--shadow-small-box-shadow);
-  }
-
-  .elevated {
-    --card-box-shadow: var(--shadow-large-box-shadow);
-  }
-
-  .blue {
-    --card-background-color: var(--color-blue-100);
-    --card-border-color: var(--color-blue-400);
-  }
-
-  .gray {
-    --card-background-color: var(--color-gray-200);
-    --card-border-color: var(--color-gray-500);
-  }
-
-  .green {
-    --card-background-color: var(--color-green-100);
-    --card-border-color: var(--color-green-500);
-  }
-
-  .orange {
-    --card-background-color: var(--color-orange-100);
-    --card-border-color: var(--color-orange-600);
-  }
-
-  .purple {
-    --card-background-color: var(--color-purple-100);
-    --card-border-color: var(--color-purple-400);
-  }
-
-  .red {
-    --card-background-color: var(--color-red-100);
-    --card-border-color: var(--color-red-500);
-  }
-
-  .white {
-    --card-background-color: var(--color-white);
-    --card-border-color: var(--color-gray-500);
-  }
-
-  .yellow {
-    --card-background-color: var(--color-yellow-100);
-    --card-border-color: var(--color-yellow-700);
-  }
-
-  .default {
-    border-color: var(--color-gray-500);
-    background-color: var(--color-white);
-  }
-
-  .informative {
-    border-color: var(--color-blue-400);
-    background-color: var(--color-blue-100);
-  }
-
-  .positive {
-    border-color: var(--color-green-500);
-    background-color: var(--color-green-100);
-  }
-
-  .cautionary {
-    border-color: var(--color-yellow-700);
-    background-color: var(--color-yellow-100);
-  }
-
-  .destructive {
-    border-color: var(--color-red-500);
-    background-color: var(--color-red-100);
-  }
-
-  .assertive {
-    border-color: var(--color-orange-600);
-    background-color: var(--color-orange-100);
-  }
-
-  .highlight {
-    border-color: var(--color-purple-400);
-    background-color: var(--color-purple-100);
-  }
+.wrapper {
+  color: var(--color-purple-800);
+  border: var(--border-width-1) solid var(--card-border-color);
+  background-color: var(--card-background-color);
+  border-radius: var(--border-solid-border-radius);
+  box-shadow: var(--card-box-shadow);
+
+  --card-border-color: var(--color-gray-500);
+  --card-background-color: var(--color-white);
+  --card-box-shadow: var(--shadow-small-box-shadow);
+}
+
+.elevated {
+  --card-box-shadow: var(--shadow-large-box-shadow);
+}
+
+.blue {
+  --card-background-color: var(--color-blue-100);
+  --card-border-color: var(--color-blue-400);
+}
+
+.gray {
+  --card-background-color: var(--color-gray-200);
+  --card-border-color: var(--color-gray-500);
+}
+
+.green {
+  --card-background-color: var(--color-green-100);
+  --card-border-color: var(--color-green-500);
+}
+
+.orange {
+  --card-background-color: var(--color-orange-100);
+  --card-border-color: var(--color-orange-600);
+}
+
+.purple {
+  --card-background-color: var(--color-purple-100);
+  --card-border-color: var(--color-purple-400);
+}
+
+.red {
+  --card-background-color: var(--color-red-100);
+  --card-border-color: var(--color-red-500);
+}
+
+.white {
+  --card-background-color: var(--color-white);
+  --card-border-color: var(--color-gray-500);
+}
+
+.yellow {
+  --card-background-color: var(--color-yellow-100);
+  --card-border-color: var(--color-yellow-700);
+}
+
+.default {
+  border-color: var(--color-gray-500);
+  background-color: var(--color-white);
+}
+
+.informative {
+  border-color: var(--color-blue-400);
+  background-color: var(--color-blue-100);
+}
+
+.positive {
+  border-color: var(--color-green-500);
+  background-color: var(--color-green-100);
+}
+
+.cautionary {
+  border-color: var(--color-yellow-700);
+  background-color: var(--color-yellow-100);
+}
+
+.destructive {
+  border-color: var(--color-red-500);
+  background-color: var(--color-red-100);
+}
+
+.assertive {
+  border-color: var(--color-orange-600);
+  background-color: var(--color-orange-100);
+}
+
+.highlight {
+  border-color: var(--color-purple-400);
+  background-color: var(--color-purple-100);
 }