@kaizen/components 1.67.16 → 1.67.18

package/dist/styles.css

@@ -3886,19 +3886,21 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .EmptyState-module_container__-B5OU {
   --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: var(--color-purple-800, #2f2438);
   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;
 }
 @media (max-width: 815px) {
   .EmptyState-module_container__-B5OU {
     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));
   }
 }
 .EmptyState-module_container__-B5OU.EmptyState-module_straightCorners__Aeou0 {
@@ -3957,31 +3959,32 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .EmptyState-module_illustrationSide__ZSjF3,
 .EmptyState-module_textSide__tv54w {
-  display: inline-block;
+  display: flex;
+  box-sizing: border-box;
 }
 
 .EmptyState-module_illustrationSide__ZSjF3 {
-  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: var(--spacing-md, 1.5rem);
 }
 @media (max-width: 815px) {
   .EmptyState-module_illustrationSide__ZSjF3 {
-    width: 224px;
+    width: 100%;
+    max-width: 224px;
   }
 }
 @media (min-width: 816px) {
   .EmptyState-module_illustrationSide__ZSjF3 {
-    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: var(--spacing-md, 1.5rem);
   }
 }
@@ -4003,33 +4006,37 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   max-width: 100%;
   max-height: 366px;
   width: auto;
+  height: auto;
   min-height: 196px;
 }
 @media (max-width: 815px) {
   .EmptyState-module_illustration__HyD2k,
   .EmptyState-module_illustrationSide__ZSjF3 video {
     max-height: 196px;
+    width: 100%;
   }
 }
 
 .EmptyState-module_textSide__tv54w {
-  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;
 }
 @media (min-width: 816px) {
   .EmptyState-module_textSide__tv54w {
-    flex-basis: 50%;
-    flex-grow: 0;
+    flex: 0 1 50%;
   }
 }
 
 .EmptyState-module_textSideInner__Yynhi {
-  flex-grow: 0;
-  height: auto;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
   margin: 0 var(--spacing-sm, 0.75rem);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 @media (max-width: 815px) {
   .EmptyState-module_textSideInner__Yynhi {
@@ -4044,6 +4051,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .EmptyState-module_heading__y-yvC {
   margin-bottom: var(--spacing-md, 1.5rem);
+  max-width: 100%;
 }
 @media (max-width: 375px) {
   .EmptyState-module_heading__y-yvC {
@@ -4055,6 +4063,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .EmptyState-module_description__fsJOc {
   margin-bottom: var(--spacing-md, 1.5rem);
+  max-width: 100%;
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 .ErrorPage-module_paragraphPadding__-L-qy {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.16",
+  "version": "1.67.18",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -118,8 +118,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.0",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.3",
-    "@kaizen/package-bundler": "2.0.0"
+    "@kaizen/design-tokens": "10.8.4",
+    "@kaizen/package-bundler": "2.0.1"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

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