@kaizen/components 1.78.0 → 1.79.0

package/src/Container/Container.module.scss

@@ -1,13 +1,15 @@
-.container {
-  display: flex;
-  width: 100%;
-  justify-content: center;
+@layer kz-components {
+  .container {
+    display: flex;
+    width: 100%;
+    justify-content: center;
 
-  * {
-    &,
-    &::after,
-    &::before {
-      box-sizing: border-box;
+    * {
+      &,
+      &::after,
+      &::before {
+        box-sizing: border-box;
+      }
     }
   }
 }

package/src/Content/Content.module.scss

@@ -1,15 +1,17 @@
 @import '~@kaizen/design-tokens/sass/layout';
 @import './variables';
 
-.content {
-  max-width: $layout-content-max-width;
-  margin: 0 $layout-content-side-margin;
-  width: 100%;
+@layer kz-components {
+  .content {
+    max-width: $layout-content-max-width;
+    margin: 0 $layout-content-side-margin;
+    width: 100%;
 
-  // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
-  min-width: 0;
+    // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
+    min-width: 0;
 
-  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-    margin: 0 $content-margin-width-on-medium-and-small;
+    @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
+      margin: 0 $content-margin-width-on-medium-and-small;
+    }
   }
 }

package/src/DateInput/DateInput/DateInput.module.scss

@@ -1,9 +1,11 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.dateInput {
-  width: 100%;
-}
+@layer kz-components {
+  .dateInput {
+    width: 100%;
+  }
 
-.input {
-  margin-top: $spacing-6;
+  .input {
+    margin-top: $spacing-6;
+  }
 }

package/src/DateInput/DateInputDescription/DateInputDescription.module.scss

@@ -1,19 +1,21 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.dateInputDescription {
-  display: inline;
-}
+@layer kz-components {
+  .dateInputDescription {
+    display: inline;
+  }
 
-.dateInputFormatContainer {
-  margin-inline-start: $spacing-xs;
-  white-space: nowrap;
-}
+  .dateInputFormatContainer {
+    margin-inline-start: $spacing-xs;
+    white-space: nowrap;
+  }
 
-.descriptionInputFormat {
-  display: inline-flex;
-  white-space: nowrap;
-}
+  .descriptionInputFormat {
+    display: inline-flex;
+    white-space: nowrap;
+  }
 
-.labelSeparator {
-  margin-inline-end: $spacing-xs;
+  .labelSeparator {
+    margin-inline-end: $spacing-xs;
+  }
 }

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss

@@ -4,39 +4,41 @@
 @import '../../../styles/utils/animation';
 @import '../../../styles/utils/button-reset';
 
-$input-disabled-opacity: 0.3;
-
-.iconButton {
-  @include button-reset;
-
-  display: flex;
-  padding: var(--spacing-6);
-  border: $border-solid-border-width $border-solid-border-style transparent;
-  border-radius: $border-solid-border-radius;
-  position: relative;
-  inset-inline-end: -0.35rem;
-  top: -40%;
-
-  :focus {
-    outline: none;
+@layer kz-components {
+  $input-disabled-opacity: 0.3;
+
+  .iconButton {
+    @include button-reset;
+
+    display: flex;
+    padding: var(--spacing-6);
+    border: $border-solid-border-width $border-solid-border-style transparent;
+    border-radius: $border-solid-border-radius;
+    position: relative;
+    inset-inline-end: -0.35rem;
+    top: -40%;
+
+    :focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline-offset: -2px;
+      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+    }
+
+    &:hover:not([disabled]) {
+      background-color: $color-blue-100;
+      color: $color-blue-500;
+    }
   }
 
-  &:focus-visible {
-    outline-offset: -2px;
-    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-  }
-
-  &:hover:not([disabled]) {
-    background-color: $color-blue-100;
+  .calendarActive {
     color: $color-blue-500;
+    background-color: $color-blue-100;
   }
-}
 
-.calendarActive {
-  color: $color-blue-500;
-  background-color: $color-blue-100;
-}
-
-.disabled {
-  opacity: $input-disabled-opacity;
+  .disabled {
+    opacity: $input-disabled-opacity;
+  }
 }

package/src/DatePicker/DatePicker.module.scss

@@ -1,9 +1,11 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-.datePicker {
-  color: $color-purple-800;
-}
+@layer kz-components {
+  .datePicker {
+    color: $color-purple-800;
+  }
 
-.isReversed {
-  color: $color-yellow-600;
+  .isReversed {
+    color: $color-yellow-600;
+  }
 }

package/src/DatePicker/subcomponents/DateInputField/DateInputField.module.scss

@@ -1,5 +1,7 @@
-$input-disabled-opacity: 0.3;
+@layer kz-components {
+  $input-disabled-opacity: 0.3;
 
-.disabled {
-  opacity: $input-disabled-opacity;
+  .disabled {
+    opacity: $input-disabled-opacity;
+  }
 }

package/src/DateRangePicker/DateRangePicker.module.scss

@@ -4,95 +4,97 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '../../styles/utils/button-reset';
 
-// Vars
-$button-height: 48px;
-$button-base-padding-horizontal: $spacing-sm;
-$button-icon-size: 1.25rem; // 20px
+@layer kz-components {
+  // Vars
+  $button-height: 48px;
+  $button-base-padding-horizontal: $spacing-sm;
+  $button-icon-size: 1.25rem; // 20px
 
-$disabled-opacity: 0.5;
-$placeholder-opacity: 0.7;
+  $disabled-opacity: 0.5;
+  $placeholder-opacity: 0.7;
 
-.button {
-  @include button-reset;
-
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: $button-height;
-  width: 100%;
-  color: $color-purple-800;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  font-weight: $typography-paragraph-body-font-weight;
-  line-height: 1.5;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  text-align: start;
-  background-color: $color-white;
-  background-clip: padding-box;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  margin-top: $spacing-6;
-  padding: 0 $button-base-padding-horizontal;
+  .button {
+    @include button-reset;
 
-  &:focus-visible:not([disabled]),
-  &:hover:not([disabled]) {
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: $button-height;
+    width: 100%;
     color: $color-purple-800;
-  }
+    font-family: $typography-paragraph-body-font-family;
+    font-size: $typography-paragraph-body-font-size;
+    font-weight: $typography-paragraph-body-font-weight;
+    line-height: 1.5;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    text-align: start;
+    background-color: $color-white;
+    background-clip: padding-box;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    border-radius: $border-solid-border-radius;
+    margin-top: $spacing-6;
+    padding: 0 $button-base-padding-horizontal;
 
-  &:focus-visible:not([disabled]) {
-    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-    outline-offset: 1px;
-  }
-
-  :focus:not([disabled]) {
-    outline: none;
-  }
+    &:focus-visible:not([disabled]),
+    &:hover:not([disabled]) {
+      background-color: $color-gray-200;
+      border-color: $color-gray-600;
+      color: $color-purple-800;
+    }
 
-  &.disabled {
-    background: $color-white;
-    opacity: $disabled-opacity;
-    color: rgba($color-purple-800-rgb, $placeholder-opacity);
-    border-color: rgba($color-gray-500-rgb, 0.7);
-  }
+    &:focus-visible:not([disabled]) {
+      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+      outline-offset: 1px;
+    }
 
-  .value {
-    padding-inline: 1.75rem $button-base-padding-horizontal;
-  }
-}
+    :focus:not([disabled]) {
+      outline: none;
+    }
 
-.startIconAdornment {
-  margin-top: -1px;
-}
+    &.disabled {
+      background: $color-white;
+      opacity: $disabled-opacity;
+      color: rgba($color-purple-800-rgb, $placeholder-opacity);
+      border-color: rgba($color-gray-500-rgb, 0.7);
+    }
 
-// Icon adornment styles
-@mixin vertically-center-icon {
-  position: absolute;
-  height: $button-icon-size;
-  top: 50%;
-  transform: translateY(-50%);
-}
+    .value {
+      padding-inline: 1.75rem $button-base-padding-horizontal;
+    }
+  }
 
-/* stylelint-disable no-descending-specificity */
-.withStartIconAdornment {
   .startIconAdornment {
-    @include vertically-center-icon;
+    margin-top: -1px;
+  }
 
-    color: $color-purple-800;
-    opacity: $disabled-opacity;
-    inset-inline: $spacing-sm auto;
+  // Icon adornment styles
+  @mixin vertically-center-icon {
+    position: absolute;
+    height: $button-icon-size;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
-  &:focus-within:not(.disabled),
-  &:hover:not(.disabled) {
+  /* stylelint-disable no-descending-specificity */
+  .withStartIconAdornment {
     .startIconAdornment {
-      opacity: $placeholder-opacity;
+      @include vertically-center-icon;
+
+      color: $color-purple-800;
+      opacity: $disabled-opacity;
+      inset-inline: $spacing-sm auto;
     }
-  }
 
-  .button {
-    padding-inline: calc(#{$spacing-md} + #{$button-icon-size}) $button-base-padding-horizontal;
+    &:focus-within:not(.disabled),
+    &:hover:not(.disabled) {
+      .startIconAdornment {
+        opacity: $placeholder-opacity;
+      }
+    }
+
+    .button {
+      padding-inline: calc(#{$spacing-md} + #{$button-icon-size}) $button-base-padding-horizontal;
+    }
   }
+  /* stylelint-enable no-descending-specificity */
 }
-/* stylelint-enable no-descending-specificity */

package/src/Divider/Divider.module.scss

@@ -1,37 +1,39 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-// Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
-
-$dt-content-border-color: rgba($color-gray-600-rgb, 0.1);
-
-.wrapper {
-  width: 100%;
-  border: 0;
-  margin: 0;
-  border-radius: $border-solid-border-radius;
-  // This is here to protect against a global style in a consumer.
-  // https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
-  visibility: visible;
-}
-
-.content {
-  border-top: 1px solid;
-  border-color: $dt-content-border-color;
-}
-
-.canvas {
-  border-top: 1px solid;
-  border-bottom: 1px solid;
-  border-color: rgba($color-gray-600-rgb, 0.1);
-}
-
-.reversed {
-  border-color: rgba($color-white-rgb, 0.1);
-}
-
-.menuSeparator {
-  @extend .content; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
-
-  margin: 5px 0;
+@layer kz-components {
+  // Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
+
+  $dt-content-border-color: rgba($color-gray-600-rgb, 0.1);
+
+  .wrapper {
+    width: 100%;
+    border: 0;
+    margin: 0;
+    border-radius: $border-solid-border-radius;
+    // This is here to protect against a global style in a consumer.
+    // https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
+    visibility: visible;
+  }
+
+  .content {
+    border-top: 1px solid;
+    border-color: $dt-content-border-color;
+  }
+
+  .canvas {
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-color: rgba($color-gray-600-rgb, 0.1);
+  }
+
+  .reversed {
+    border-color: rgba($color-white-rgb, 0.1);
+  }
+
+  .menuSeparator {
+    @extend .content; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+
+    margin: 5px 0;
+  }
 }

package/src/EmptyState/EmptyState.module.css

@@ -1,114 +1,116 @@
-.container {
-  --empty-state-border-width: var(--border-width-1);
-  --empty-state-illustration-max-height: 366px;
-  --empty-state-illustration-max-width: 420px;
-  --empty-state-text-container-max-width: 426px;
-
-  container-type: inline-size;
-  width: 100%;
-  border: var(--empty-state-border-width) solid var(--empty-state-border-color);
-  border-radius: var(--border-solid-border-radius);
-  background-color: var(--empty-state-background-color);
-  color: var(--color-purple-800);
-}
-
-.straightCorners {
-  border-radius: 0;
-}
-
-/** @deprecated */
-.positive {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
-
-.negative,
-.action {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
-
-.neutral {
-  --empty-state-border-color: var(--color-purple-400);
-  --empty-state-background-color: var(--color-purple-100);
-}
-
-/** end @deprecated */
-.success {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
+@layer kz-components {
+  .container {
+    --empty-state-border-width: var(--border-width-1);
+    --empty-state-illustration-max-height: 366px;
+    --empty-state-illustration-max-width: 420px;
+    --empty-state-text-container-max-width: 426px;
+
+    container-type: inline-size;
+    width: 100%;
+    border: var(--empty-state-border-width) solid var(--empty-state-border-color);
+    border-radius: var(--border-solid-border-radius);
+    background-color: var(--empty-state-background-color);
+    color: var(--color-purple-800);
+  }
 
-.warning {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
+  .straightCorners {
+    border-radius: 0;
+  }
 
-.informative {
-  --empty-state-border-color: var(--color-blue-400);
-  --empty-state-background-color: var(--color-blue-100);
-}
+  /** @deprecated */
+  .positive {
+    --empty-state-border-color: var(--color-green-500);
+    --empty-state-background-color: var(--color-green-100);
+  }
 
-.expert-advice {
-  --empty-state-border-color: var(--color-purple-400);
-  --empty-state-background-color: var(--color-purple-100);
-}
+  .negative,
+  .action {
+    --empty-state-border-color: var(--color-red-500);
+    --empty-state-background-color: var(--color-red-100);
+  }
 
-.content {
-  justify-content: center;
-  display: grid;
-  grid-template-columns: minmax(auto, var(--empty-state-illustration-max-width)) minmax(
-      auto,
-      var(--empty-state-text-container-max-width)
-    );
-  grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
-  padding: var(--spacing-24);
-  grid-column-gap: var(--spacing-32);
-}
+  .neutral {
+    --empty-state-border-color: var(--color-purple-400);
+    --empty-state-background-color: var(--color-purple-100);
+  }
 
-.illustrationContainer {
-  display: flex;
-  align-items: center;
-}
+  /** end @deprecated */
+  .success {
+    --empty-state-border-color: var(--color-green-500);
+    --empty-state-background-color: var(--color-green-100);
+  }
 
-.illustration,
-.illustrationContainer video {
-  max-width: 100%;
-  max-height: var(--empty-state-illustration-max-height);
-  height: 100%;
-  width: auto;
-}
+  .warning {
+    --empty-state-border-color: var(--color-red-500);
+    --empty-state-background-color: var(--color-red-100);
+  }
 
-.textContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: var(--spacing-24);
-}
+  .informative {
+    --empty-state-border-color: var(--color-blue-400);
+    --empty-state-background-color: var(--color-blue-100);
+  }
 
-@container (width <=1024px) {
-  .content {
-    padding: var(--spacing-16);
+  .expert-advice {
+    --empty-state-border-color: var(--color-purple-400);
+    --empty-state-background-color: var(--color-purple-100);
   }
-}
 
-@container (width <=560px) {
   .content {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-column-gap: unset;
-    grid-row-gap: var(--spacing-24);
+    justify-content: center;
+    display: grid;
+    grid-template-columns: minmax(auto, var(--empty-state-illustration-max-width)) minmax(
+        auto,
+        var(--empty-state-text-container-max-width)
+      );
+    grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
     padding: var(--spacing-24);
+    grid-column-gap: var(--spacing-32);
   }
 
   .illustrationContainer {
-    --empty-state-illustration-max-height: 210px;
+    display: flex;
+    align-items: center;
+  }
 
+  .illustration,
+  .illustrationContainer video {
+    max-width: 100%;
+    max-height: var(--empty-state-illustration-max-height);
+    height: 100%;
+    width: auto;
+  }
+
+  .textContainer {
+    display: flex;
+    flex-direction: column;
     justify-content: center;
+    gap: var(--spacing-24);
+  }
+
+  @container (width <=1024px) {
+    .content {
+      padding: var(--spacing-16);
+    }
   }
 
-  .heading {
-    font-size: 1.25rem;
-    line-height: 1.5rem;
+  @container (width <=560px) {
+    .content {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+      grid-column-gap: unset;
+      grid-row-gap: var(--spacing-24);
+      padding: var(--spacing-24);
+    }
+
+    .illustrationContainer {
+      --empty-state-illustration-max-height: 210px;
+
+      justify-content: center;
+    }
+
+    .heading {
+      font-size: 1.25rem;
+      line-height: 1.5rem;
+    }
   }
 }

package/src/ErrorPage/ErrorPage.module.scss

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