@kaizen/components 1.67.17 → 1.67.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.17",
+  "version": "1.67.19",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/EmptyState/EmptyState.module.scss

@@ -7,19 +7,21 @@
   --empty-state-border-width: var(--border-width-1);
 
   display: flex;
-  justify-content: space-around;
   width: 100%;
+  box-sizing: border-box;
+  justify-content: space-around;
   padding: calc(2% - var(--empty-state-border-width))
     calc(var(--spacing-24) - var(--empty-state-border-width));
   color: $color-purple-800;
   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);
+  flex-wrap: wrap;
 
   @include small {
     flex-direction: column;
     align-items: center;
-    padding-block: calc(var(--spacing-24) - var(--empty-state-border-width));
+    padding: calc(var(--spacing-24) - var(--empty-state-border-width));
   }
 
   &.straightCorners {
@@ -82,29 +84,30 @@
 
 .illustrationSide,
 .textSide {
-  display: inline-block;
+  display: flex;
+  box-sizing: border-box;
 }
 
 .illustrationSide {
-  min-width: 224px;
-  flex-grow: 0;
-  flex-shrink: 1;
+  justify-content: center;
+  align-items: center;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
   margin-bottom: $spacing-md;
 
   @include small {
-    width: 224px;
+    width: 100%;
+    max-width: 224px;
   }
 
   @include medium {
-    display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
     margin-bottom: 0;
-    min-width: 40%;
-    max-width: 50%;
-    flex-grow: 1;
-    box-sizing: border-box;
+    width: auto;
+    max-width: 40%;
     padding-inline-end: $spacing-md;
   }
 
@@ -128,32 +131,36 @@
   max-width: 100%;
   max-height: 366px;
   width: auto;
+  height: auto;
 
   // Fixes for IE11 Flexbox issues
   min-height: 196px;
 
   @include small {
     max-height: 196px;
+    width: 100%;
   }
 }
 
 .textSide {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
   align-items: center;
   -webkit-font-smoothing: antialiased;
 
   @include medium {
-    flex-basis: 50%;
-    flex-grow: 0;
+    flex: 0 1 50%;
   }
 }
 
 .textSideInner {
-  flex-grow: 0;
-  height: auto;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
   margin: 0 $spacing-sm;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 
   @include small {
     margin-bottom: 0;
@@ -166,6 +173,7 @@
 
 .heading {
   margin-bottom: $spacing-md;
+  max-width: 100%;
 
   @media (max-width: (375px)) {
     @include typography-heading-3-sm;
@@ -174,4 +182,5 @@
 
 .description {
   margin-bottom: $spacing-md;
+  max-width: 100%;
 }

package/src/GuidanceBlock/{GuidanceBlock.module.scss → GuidanceBlock.module.css}

@@ -1,27 +1,5 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../../styles/utils/responsive";
-@import "../../styles/utils/button-reset";
-
-@mixin guidance-block-under-480 {
-  @media (max-width: 480px) {
-    @content;
-  }
-}
-
-$bannerPadding: $spacing-lg;
-$ca-banner-fade-out: opacity $animation-duration-slow ease;
-$ca-banner-collapse-height-delayed: margin-top $animation-duration-fast
-  $animation-duration-slow ease;
-$illustration-size: 155px;
-$scene-illustration-size: 300px;
-
 .rightMargin {
-  margin-right: $spacing-8;
+  margin-right: var(--spacing-8);
 }
 
 .noRightMargin {
@@ -34,30 +12,34 @@ $scene-illustration-size: 300px;
 
 .banner {
   --border-width: var(--border-width-1);
+  --banner-padding: var(--spacing-lg);
 
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: var(--spacing-12);
   min-width: 320px;
-  max-width: $layout-breakpoints-large;
+  max-width: var(--layout-breakpoints-large);
   border: var(--border-width) var(--border-solid-border-style);
-  border-radius: $border-solid-border-radius;
-  padding: calc(#{$bannerPadding} - var(--border-width));
-  box-shadow: $shadow-small-box-shadow;
+  border-radius: var(--border-solid-border-radius);
+  padding: calc(var(--banner-padding) - var(--border-width));
+  box-shadow: var(--shadow-small-box-shadow);
   position: relative;
   top: -1px;
-  transition: $ca-banner-fade-out, $ca-banner-collapse-height-delayed;
-  color: $color-purple-800;
-
-  @include ca-media-desktop {
-    min-height: calc(12rem - calc(#{$bannerPadding} * 2));
+  transition:
+    opacity var(--animation-duration-slow) ease,
+    margin-top var(--animation-duration-fast) var(--animation-duration-slow)
+      ease;
+  color: var(--color-purple-800);
+
+  @media (width >= 1024px) {
+    min-height: calc(12rem - calc(var(--banner-padding) * 2));
     flex-direction: row;
-    gap: $spacing-md;
+    gap: var(--spacing-24);
     width: auto;
     align-items: center;
   }
 
-  @include ca-media-mobile {
+  @media (width >= 767px) {
     min-width: unset;
   }
 }
@@ -65,29 +47,32 @@ $scene-illustration-size: 300px;
 .illustrationWrapper {
   display: flex;
 
-  @include ca-media-tablet {
+  @media (768px <= width <= 1023px) {
     text-align: center;
     justify-content: center;
     align-self: center;
-    padding: $spacing-sm;
+    padding: var(--spacing-12);
   }
 
-  @include ca-media-mobile {
+  @media (width <= 767px) {
     display: none;
   }
 }
 
 .illustration {
-  width: $illustration-size;
-  height: $illustration-size;
+  --illustration-size: 155px;
+  --scene-illustration-size: 300px;
+
+  width: var(--illustration-size);
+  height: var(--illustration-size);
 
-  // This has been created to handle scene illustrations consistently until the tile component is created
+  /* This has been created to handle scene illustrations consistently until the tile component is created */
   .hasSceneIllustration & {
     display: flex;
     justify-content: center;
-    max-width: $scene-illustration-size;
-    max-height: $scene-illustration-size;
-    width: $scene-illustration-size;
+    max-width: var(--scene-illustration-size);
+    max-height: var(--scene-illustration-size);
+    width: var(--scene-illustration-size);
     height: auto;
 
     figure {
@@ -110,19 +95,19 @@ $scene-illustration-size: 300px;
   align-self: center;
   max-width: 780px;
 
-  @include ca-media-desktop {
-    padding: 0 $spacing-sm;
+  @media (width >= 1024px) {
+    padding: 0 var(--spacing-12);
     text-align: left;
   }
 
-  @include ca-media-mobile {
-    margin: $spacing-sm;
+  @media (width <= 767px) {
+    margin: var(--spacing-12);
     max-width: 100%;
   }
 
   [dir="rtl"] & {
-    @include ca-media-desktop {
-      padding: 0 $spacing-sm;
+    @media (width >= 1024px) {
+      padding: 0 var(--spacing-12);
       text-align: right;
     }
   }
@@ -133,9 +118,9 @@ $scene-illustration-size: 300px;
   flex: 1;
   align-items: center;
   justify-content: space-between;
-  gap: $spacing-md;
+  gap: var(--spacing-24);
 
-  @include ca-media-tablet-and-under {
+  @media (width <= 1023px) {
     flex-direction: column;
     width: 100%;
     align-items: unset;
@@ -147,17 +132,17 @@ $scene-illustration-size: 300px;
   flex: 1 0 auto;
   justify-content: center;
   flex-direction: row-reverse;
-  gap: $spacing-sm;
+  gap: var(--spacing-12);
   min-width: max-content;
 
-  @include ca-media-tablet-and-up {
+  @media (width >= 768px) {
     text-align: center;
   }
 
-  @include ca-media-mobile {
+  @media (width <= 767px) {
     flex-direction: column;
     width: 100%;
-    margin-top: $spacing-xs;
+    margin-top: var(--spacing-6);
   }
 
   [dir="rtl"] & svg {
@@ -166,51 +151,12 @@ $scene-illustration-size: 300px;
 }
 
 .hidden {
-  opacity: 0%;
+  opacity: 0;
   margin-bottom: 0;
 }
 
 .headingWrapper {
-  margin-bottom: $spacing-md;
-}
-
-.cancel {
-  @include button-reset;
-
-  cursor: pointer;
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  color: $color-purple-800;
-
-  .icon {
-    opacity: 70%;
-    transition: $animation-duration-fast opacity;
-  }
-
-  &:disabled,
-  &.disabled {
-    .icon {
-      opacity: 30%;
-    }
-  }
-
-  &:not(:disabled, .disabled) {
-    &:hover,
-    &:focus,
-    &.hover {
-      .icon {
-        opacity: 100%;
-      }
-    }
-
-    &:active,
-    &.active {
-      .icon {
-        opacity: 100%;
-      }
-    }
-  }
+  margin-bottom: var(--spacing-24);
 }
 
 .default {
@@ -220,54 +166,54 @@ $scene-illustration-size: 300px;
 
 .positive {
   border-color: var(--color-green-500);
-  background: $color-green-100;
+  background: var(--color-green-100);
 }
 
 .negative,
 .assertive {
   border-color: var(--color-red-500);
-  background: $color-red-100;
+  background: var(--color-red-100);
 }
 
 .informative {
   border-color: var(--color-blue-400);
-  background: $color-blue-100;
+  background: var(--color-blue-100);
 }
 
 .cautionary {
   border-color: var(--color-yellow-700);
-  background: $color-yellow-100;
+  background: var(--color-yellow-100);
 }
 
 .prominent {
   border-color: var(--color-purple-400);
-  background: $color-purple-100;
+  background: var(--color-purple-100);
 }
 
 .inline,
 .stacked {
   flex-flow: row wrap;
   align-items: unset;
-  gap: $spacing-md;
+  gap: var(--spacing-24);
   min-width: unset;
 
-  @include ca-media-tablet-and-under {
+  @media (width <= 1023px) {
     flex-direction: unset;
   }
 
   .illustrationWrapper {
-    margin-right: $spacing-sm;
+    margin-right: var(--spacing-12);
 
     [dir="rtl"] & {
-      margin-left: $spacing-sm;
+      margin-left: var(--spacing-12);
       margin-right: inherit;
     }
 
-    @include ca-media-tablet {
+    @media (768px <= width <= 1023px) {
       padding: 0;
     }
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       display: flex;
     }
   }
@@ -281,36 +227,36 @@ $scene-illustration-size: 300px;
     max-width: unset;
     min-width: 320px;
 
-    @include ca-media-desktop {
+    @media (width >= 1024px) {
       padding: 0;
     }
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       margin: 0;
     }
 
     [dir="rtl"] & {
       text-align: right;
 
-      @include ca-media-desktop {
+      @media (width >= 1024px) {
         padding: 0;
       }
     }
   }
 
   .buttonContainer {
-    padding-left: $spacing-sm;
+    padding-left: var(--spacing-12);
     justify-content: flex-start;
     width: unset;
     min-width: unset;
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       flex-direction: row-reverse;
     }
 
     [dir="rtl"] & {
       padding-left: 0;
-      padding-right: $spacing-sm;
+      padding-right: var(--spacing-12);
     }
 
     > * {

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -8,7 +8,7 @@ import { Button, ButtonProps } from "~components/__actions__/v2"
 import { Icon } from "~components/__future__/Icon"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
-import styles from "./GuidanceBlock.module.scss"
+import styles from "./GuidanceBlock.module.css"
 
 export type ActionProps = ButtonProps & {
   tooltip?: TooltipProps

package/dist/cjs/GuidanceBlock/GuidanceBlock.module.scss.cjs

@@ -1,33 +0,0 @@
-'use strict';
-
-var styles = {
-  "rightMargin": "GuidanceBlock-module_rightMargin__-iEFa",
-  "noRightMargin": "GuidanceBlock-module_noRightMargin__4Uy9N",
-  "banner": "GuidanceBlock-module_banner__FxKcd",
-  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UzHP1",
-  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__AEljX",
-  "illustration": "GuidanceBlock-module_illustration__sU1Vu",
-  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__tvFRD",
-  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__aywtY",
-  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__E5BcL",
-  "buttonContainer": "GuidanceBlock-module_buttonContainer__U2Hxn",
-  "hidden": "GuidanceBlock-module_hidden__CbgXn",
-  "headingWrapper": "GuidanceBlock-module_headingWrapper__zgVmA",
-  "cancel": "GuidanceBlock-module_cancel__UaIA-",
-  "icon": "GuidanceBlock-module_icon__y2xz8",
-  "disabled": "GuidanceBlock-module_disabled__Uhgsr",
-  "hover": "GuidanceBlock-module_hover__7V9x1",
-  "active": "GuidanceBlock-module_active__YJaZt",
-  "default": "GuidanceBlock-module_default__Ffblg",
-  "positive": "GuidanceBlock-module_positive__yENlT",
-  "negative": "GuidanceBlock-module_negative__E-Jvh",
-  "assertive": "GuidanceBlock-module_assertive__6PZlM",
-  "informative": "GuidanceBlock-module_informative__ZUH4j",
-  "cautionary": "GuidanceBlock-module_cautionary__sJ1CE",
-  "prominent": "GuidanceBlock-module_prominent__nn-r4",
-  "inline": "GuidanceBlock-module_inline__GwOWR",
-  "stacked": "GuidanceBlock-module_stacked__rDupX",
-  "centerContent": "GuidanceBlock-module_centerContent__m3IhB",
-  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__oWufj"
-};
-module.exports = styles;

package/dist/esm/GuidanceBlock/GuidanceBlock.module.scss.mjs

@@ -1,31 +0,0 @@
-var styles = {
-  "rightMargin": "GuidanceBlock-module_rightMargin__-iEFa",
-  "noRightMargin": "GuidanceBlock-module_noRightMargin__4Uy9N",
-  "banner": "GuidanceBlock-module_banner__FxKcd",
-  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UzHP1",
-  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__AEljX",
-  "illustration": "GuidanceBlock-module_illustration__sU1Vu",
-  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__tvFRD",
-  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__aywtY",
-  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__E5BcL",
-  "buttonContainer": "GuidanceBlock-module_buttonContainer__U2Hxn",
-  "hidden": "GuidanceBlock-module_hidden__CbgXn",
-  "headingWrapper": "GuidanceBlock-module_headingWrapper__zgVmA",
-  "cancel": "GuidanceBlock-module_cancel__UaIA-",
-  "icon": "GuidanceBlock-module_icon__y2xz8",
-  "disabled": "GuidanceBlock-module_disabled__Uhgsr",
-  "hover": "GuidanceBlock-module_hover__7V9x1",
-  "active": "GuidanceBlock-module_active__YJaZt",
-  "default": "GuidanceBlock-module_default__Ffblg",
-  "positive": "GuidanceBlock-module_positive__yENlT",
-  "negative": "GuidanceBlock-module_negative__E-Jvh",
-  "assertive": "GuidanceBlock-module_assertive__6PZlM",
-  "informative": "GuidanceBlock-module_informative__ZUH4j",
-  "cautionary": "GuidanceBlock-module_cautionary__sJ1CE",
-  "prominent": "GuidanceBlock-module_prominent__nn-r4",
-  "inline": "GuidanceBlock-module_inline__GwOWR",
-  "stacked": "GuidanceBlock-module_stacked__rDupX",
-  "centerContent": "GuidanceBlock-module_centerContent__m3IhB",
-  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__oWufj"
-};
-export { styles as default };