@kaizen/components 1.67.17 → 1.67.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1,4 +1,37 @@
1
1
  @layer tokens, normalize, reset;@layer tokens{:root{--theme-key:heart;--animation-easing-function-ease-in-out:cubic-bezier(0.455,0.03,0.515,0.955);--animation-easing-function-ease-in:cubic-bezier(0.55,0.085,0.68,0.53);--animation-easing-function-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);--animation-easing-function-linear:linear;--animation-easing-function-bounce-in:cubic-bezier(0.485,0.155,0.24,1.245);--animation-easing-function-bounce-out:cubic-bezier(0.485,0.155,0.515,0.845);--animation-easing-function-bounce-in-out:cubic-bezier(0.76,-0.245,0.24,1.245);--animation-duration-instant:0ms;--animation-duration-immediate:100ms;--animation-duration-rapid:200ms;--animation-duration-fast:300ms;--animation-duration-slow:400ms;--animation-duration-deliberate:700ms;--border-solid-border-width:2px;--border-solid-border-radius:7px;--border-solid-border-style:solid;--border-solid-border-color:#e1e2ea;--border-solid-border-color-rgb:225,226,234;--border-dashed-border-width:2px;--border-dashed-border-radius:7px;--border-dashed-border-style:dashed;--border-borderless-border-width:2px;--border-borderless-border-radius:7px;--border-borderless-border-style:solid;--border-borderless-border-color:transparent;--border-borderless-border-color-rgb:0,0,0;--border-focus-ring-border-width:2px;--border-focus-ring-border-radius:10px;--border-focus-ring-border-style:solid;--border-width-1:1px;--color-purple-100:#f4edf8;--color-purple-100-rgb:244,237,248;--color-purple-200:#dfc9ea;--color-purple-200-rgb:223,201,234;--color-purple-300:#c9a5dd;--color-purple-300-rgb:201,165,221;--color-purple-400:#ae67b1;--color-purple-400-rgb:174,103,177;--color-purple-500:#844587;--color-purple-500-rgb:132,69,135;--color-purple-600:#5f3361;--color-purple-600-rgb:95,51,97;--color-purple-700:#4a234d;--color-purple-700-rgb:74,35,77;--color-purple-800:#2f2438;--color-purple-800-rgb:47,36,56;--color-blue-100:#e6f6ff;--color-blue-100-rgb:230,246,255;--color-blue-200:#bde2f5;--color-blue-200-rgb:189,226,245;--color-blue-300:#73c0e8;--color-blue-300-rgb:115,192,232;--color-blue-400:#008bd6;--color-blue-400-rgb:0,139,214;--color-blue-500:#0168b3;--color-blue-500-rgb:1,104,179;--color-blue-600:#004970;--color-blue-600-rgb:0,73,112;--color-blue-700:#003157;--color-blue-700-rgb:0,49,87;--color-green-100:#e8f8f4;--color-green-100-rgb:232,248,244;--color-green-200:#c4ede2;--color-green-200-rgb:196,237,226;--color-green-300:#8fdbc7;--color-green-300-rgb:143,219,199;--color-green-400:#5dcaad;--color-green-400-rgb:93,202,173;--color-green-500:#3f9a86;--color-green-500-rgb:63,154,134;--color-green-600:#2c7d67;--color-green-600-rgb:44,125,103;--color-green-700:#22594a;--color-green-700-rgb:34,89,74;--color-yellow-100:#fff9e4;--color-yellow-100-rgb:255,249,228;--color-yellow-200:#ffeeb3;--color-yellow-200-rgb:255,238,179;--color-yellow-300:#ffe36e;--color-yellow-300-rgb:255,227,110;--color-yellow-400:#ffca4d;--color-yellow-400-rgb:255,202,77;--color-yellow-500:#ffb600;--color-yellow-500-rgb:255,182,0;--color-yellow-600:#c68600;--color-yellow-600-rgb:198,134,0;--color-yellow-700:#876400;--color-yellow-700-rgb:135,100,0;--color-red-100:#fdeaee;--color-red-100-rgb:253,234,238;--color-red-200:#f9c2cb;--color-red-200-rgb:249,194,203;--color-red-300:#f597a8;--color-red-300-rgb:245,151,168;--color-red-400:#e0707d;--color-red-400-rgb:224,112,125;--color-red-500:#c93b55;--color-red-500-rgb:201,59,85;--color-red-600:#a82433;--color-red-600-rgb:168,36,51;--color-red-700:#6c1e20;--color-red-700-rgb:108,30,32;--color-orange-100:#fff0e8;--color-orange-100-rgb:255,240,232;--color-orange-200:#ffd1b9;--color-orange-200-rgb:255,209,185;--color-orange-300:#ffb08a;--color-orange-300-rgb:255,176,138;--color-orange-400:#ff9461;--color-orange-400-rgb:255,148,97;--color-orange-500:#e96c2f;--color-orange-500-rgb:233,108,47;--color-orange-600:#b74302;--color-orange-600-rgb:183,67,2;--color-orange-700:#903c00;--color-orange-700-rgb:144,60,0;--color-gray-100:#f9f9f9;--color-gray-100-rgb:249,249,249;--color-gray-200:#f4f4f5;--color-gray-200-rgb:244,244,245;--color-gray-300:#eaeaec;--color-gray-300-rgb:234,234,236;--color-gray-400:#cdcdd0;--color-gray-400-rgb:205,205,208;--color-gray-500:#878792;--color-gray-500-rgb:135,135,146;--color-gray-600:#524e56;--color-gray-600-rgb:82,78,86;--color-white:#fff;--color-white-rgb:255,255,255;--color-black:#000;--color-black-rgb:0,0,0;--data-viz-favorable:#7dd5bd;--data-viz-favorable-rgb:125,213,189;--data-viz-unfavorable:#e68d97;--data-viz-unfavorable-rgb:230,141,151;--layout-content-max-width:1392px;--layout-content-max-width-with-sidebar:1080px;--layout-content-side-margin:72px;--layout-mobile-actions-drawer-height:60px;--layout-navigation-bar-height:72px;--layout-breakpoints-medium:768px;--layout-breakpoints-large:1080px;--shadow-small-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06);--shadow-large-box-shadow:0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08);--spacing-0:0;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-6:.375rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-20:1.25rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-40:2.5rem;--spacing-48:3rem;--spacing-56:3.5rem;--spacing-64:4rem;--spacing-72:4.5rem;--spacing-80:5rem;--spacing-96:6rem;--spacing-112:7rem;--spacing-128:8rem;--spacing-160:10rem;--spacing-200:12.5rem;--spacing-240:15rem;--spacing-280:17.5rem;--spacing-320:20rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.5rem;--spacing-lg:2.25rem;--spacing-xl:3rem;--spacing-xxl:3.75rem;--spacing-xxxl:4.5rem;--spacing-xxxxl:5.25rem;--spacing-xxxxxl:6rem;--typography-data-large-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-font-weight:700;--typography-data-large-font-size:5.25rem;--typography-data-large-line-height:5.25rem;--typography-data-large-letter-spacing:normal;--typography-data-large-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-units-font-weight:700;--typography-data-large-units-font-size:2.625rem;--typography-data-large-units-line-height:5.25rem;--typography-data-large-units-letter-spacing:normal;--typography-data-medium-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-font-weight:700;--typography-data-medium-font-size:3rem;--typography-data-medium-line-height:5rem;--typography-data-medium-letter-spacing:normal;--typography-data-medium-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-units-font-weight:700;--typography-data-medium-units-font-size:1.5rem;--typography-data-medium-units-line-height:5rem;--typography-data-medium-units-letter-spacing:normal;--typography-data-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-font-weight:700;--typography-data-small-font-size:1.5rem;--typography-data-small-line-height:1.5rem;--typography-data-small-letter-spacing:normal;--typography-data-small-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-units-font-weight:700;--typography-data-small-units-font-size:1.125rem;--typography-data-small-units-line-height:1.5rem;--typography-data-small-units-letter-spacing:normal;--typography-display-0-font-family:"Tiempos Headline",Georgia,serif;--typography-display-0-font-weight:800;--typography-display-0-font-size:4.5rem;--typography-display-0-line-height:5.25rem;--typography-display-0-letter-spacing:0em;--typography-heading-1-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-1-font-weight:500;--typography-heading-1-font-size:2.125rem;--typography-heading-1-line-height:2.625rem;--typography-heading-1-letter-spacing:normal;--typography-heading-2-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-2-font-weight:600;--typography-heading-2-font-size:1.75rem;--typography-heading-2-line-height:2.25rem;--typography-heading-2-letter-spacing:normal;--typography-heading-3-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-3-font-weight:600;--typography-heading-3-font-size:1.375rem;--typography-heading-3-line-height:1.875rem;--typography-heading-3-letter-spacing:normal;--typography-heading-4-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-4-font-weight:600;--typography-heading-4-font-size:1.125rem;--typography-heading-4-line-height:1.5rem;--typography-heading-4-letter-spacing:normal;--typography-heading-5-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-5-font-weight:600;--typography-heading-5-font-size:1rem;--typography-heading-5-line-height:1.5rem;--typography-heading-5-letter-spacing:normal;--typography-heading-6-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-6-font-weight:600;--typography-heading-6-font-size:0.875rem;--typography-heading-6-line-height:1.5rem;--typography-heading-6-letter-spacing:normal;--typography-paragraph-intro-lede-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-intro-lede-font-weight:400;--typography-paragraph-intro-lede-font-size:1.25rem;--typography-paragraph-intro-lede-line-height:1.875rem;--typography-paragraph-intro-lede-letter-spacing:0;--typography-paragraph-intro-lede-max-width:975px;--typography-paragraph-body-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-body-font-weight:400;--typography-paragraph-body-font-size:1rem;--typography-paragraph-body-line-height:1.5rem;--typography-paragraph-body-letter-spacing:normal;--typography-paragraph-body-max-width:780px;--typography-paragraph-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-small-font-weight:400;--typography-paragraph-small-font-size:0.875rem;--typography-paragraph-small-line-height:1.125rem;--typography-paragraph-small-letter-spacing:normal;--typography-paragraph-small-max-width:680px;--typography-paragraph-extra-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-extra-small-font-weight:400;--typography-paragraph-extra-small-font-size:0.75rem;--typography-paragraph-extra-small-line-height:1.125rem;--typography-paragraph-extra-small-letter-spacing:normal;--typography-paragraph-extra-small-max-width:600px;--typography-paragraph-bold-font-weight:600;--typography-button-primary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-primary-font-weight:500;--typography-button-primary-font-size:1.125rem;--typography-button-primary-line-height:1.5rem;--typography-button-primary-letter-spacing:normal;--typography-button-secondary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-secondary-font-weight:500;--typography-button-secondary-font-size:1rem;--typography-button-secondary-line-height:1.5rem;--typography-button-secondary-letter-spacing:normal}}@layer normalize{html{text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}}@layer reset{@font-face{font-family:Tiempos Headline;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff)}@font-face{font-family:Tiempos Headline;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff)}@font-face{font-family:Greycliff CF;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-light.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-regular.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-medium.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-extra-bold.woff) format("woff")}@font-face{font-family:Inter;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff)}@font-face{font-family:Inter;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff)}@font-face{font-family:Inter;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff)}@font-face{font-family:Inter;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff)}@font-face{font-family:Inter;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff)}@font-face{font-family:Inter;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff)}@font-face{font-family:IBM Plex Mono;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff)}}@layer reset{*,:after,:before{border-color:var(--border-solid-border-color,"currentColor");border-style:solid;border-width:0}}
2
+ .Menu-module_menu__AowD8 {
3
+ background-color: var(--color-white);
4
+ color: var(--color-purple-800);
5
+ width: 248px;
6
+ max-height: 22rem;
7
+ overflow: auto;
8
+ padding-block: var(--spacing-6);
9
+ outline: none;
10
+ border-radius: var(--border-solid-border-radius);
11
+ box-shadow: var(--shadow-large-box-shadow);
12
+ }
13
+
14
+ .Menu-module_menu__AowD8 .react-aria-Header {
15
+ font-family: var(--typography-heading-6-font-family);
16
+ font-size: var(--typography-heading-6-font-size);
17
+ letter-spacing: var(--typography-heading-6-letter-spacing);
18
+ font-weight: var(--typography-heading-6-font-weight);
19
+ line-height: var(--typography-heading-6-line-height);
20
+ padding: var(--spacing-6) 10px;
21
+ margin-inline: var(--spacing-6);
22
+ }
23
+
24
+ .Menu-module_menu__AowD8 section:not(:last-of-type) {
25
+ &::after {
26
+ width: 100%;
27
+ height: 1px;
28
+ background-color: var(--border-solid-border-color);
29
+ content: "";
30
+ display: block;
31
+ margin-block: var(--spacing-6);
32
+ }
33
+ }
34
+
2
35
  .MenuItem-module_item__uImZI {
3
36
  display: block;
4
37
  font-family: var(--typography-paragraph-body-font-family);
@@ -39,42 +72,6 @@
39
72
  opacity: 0.3;
40
73
  }
41
74
 
42
- .Menu-module_menu__AowD8 {
43
- background-color: var(--color-white);
44
- color: var(--color-purple-800);
45
- width: 248px;
46
- max-height: 22rem;
47
- overflow: auto;
48
- padding-block: var(--spacing-6);
49
- outline: none;
50
- border-radius: var(--border-solid-border-radius);
51
- box-shadow: var(--shadow-large-box-shadow);
52
- }
53
-
54
- .Menu-module_menu__AowD8 .react-aria-Header {
55
- font-family: var(--typography-heading-6-font-family);
56
- font-size: var(--typography-heading-6-font-size);
57
- letter-spacing: var(--typography-heading-6-letter-spacing);
58
- font-weight: var(--typography-heading-6-font-weight);
59
- line-height: var(--typography-heading-6-line-height);
60
- padding: var(--spacing-6) 10px;
61
- margin-inline: var(--spacing-6);
62
- }
63
-
64
- .Menu-module_menu__AowD8 section:not(:last-of-type) {
65
- &::after {
66
- width: 100%;
67
- height: 1px;
68
- background-color: var(--border-solid-border-color);
69
- content: "";
70
- display: block;
71
- margin-block: var(--spacing-6);
72
- }
73
- }
74
-
75
- .Focusable-module_focusableWrapper__NfuIi {
76
- display: inline-flex;
77
- }
78
75
  .Button-module_button__QOSYH {
79
76
  --button-min-height-width: var(--spacing-48);
80
77
  --button-padding-x: calc(
@@ -163,6 +160,9 @@
163
160
  --button-icon-size: var(--spacing-16);
164
161
  gap: var(--spacing-8);
165
162
  }
163
+ .Focusable-module_focusableWrapper__NfuIi {
164
+ display: inline-flex;
165
+ }
166
166
  /** THIS IS AN AUTOGENERATED FILE **/
167
167
  /** THIS IS AN AUTOGENERATED FILE **/
168
168
  /** THIS IS AN AUTOGENERATED FILE **/
@@ -3886,19 +3886,21 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
3886
3886
  .EmptyState-module_container__-B5OU {
3887
3887
  --empty-state-border-width: var(--border-width-1);
3888
3888
  display: flex;
3889
- justify-content: space-around;
3890
3889
  width: 100%;
3890
+ box-sizing: border-box;
3891
+ justify-content: space-around;
3891
3892
  padding: calc(2% - var(--empty-state-border-width)) calc(var(--spacing-24) - var(--empty-state-border-width));
3892
3893
  color: var(--color-purple-800, #2f2438);
3893
3894
  border: var(--empty-state-border-width) solid var(--empty-state-border-color);
3894
3895
  border-radius: var(--border-solid-border-radius);
3895
3896
  background-color: var(--empty-state-background-color);
3897
+ flex-wrap: wrap;
3896
3898
  }
3897
3899
  @media (max-width: 815px) {
3898
3900
  .EmptyState-module_container__-B5OU {
3899
3901
  flex-direction: column;
3900
3902
  align-items: center;
3901
- padding-block: calc(var(--spacing-24) - var(--empty-state-border-width));
3903
+ padding: calc(var(--spacing-24) - var(--empty-state-border-width));
3902
3904
  }
3903
3905
  }
3904
3906
  .EmptyState-module_container__-B5OU.EmptyState-module_straightCorners__Aeou0 {
@@ -3957,31 +3959,32 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
3957
3959
 
3958
3960
  .EmptyState-module_illustrationSide__ZSjF3,
3959
3961
  .EmptyState-module_textSide__tv54w {
3960
- display: inline-block;
3962
+ display: flex;
3963
+ box-sizing: border-box;
3961
3964
  }
3962
3965
 
3963
3966
  .EmptyState-module_illustrationSide__ZSjF3 {
3964
- min-width: 224px;
3965
- flex-grow: 0;
3966
- flex-shrink: 1;
3967
+ justify-content: center;
3968
+ align-items: center;
3969
+ flex: 0 1 auto;
3970
+ min-width: 0;
3971
+ max-width: 100%;
3967
3972
  margin-bottom: var(--spacing-md, 1.5rem);
3968
3973
  }
3969
3974
  @media (max-width: 815px) {
3970
3975
  .EmptyState-module_illustrationSide__ZSjF3 {
3971
- width: 224px;
3976
+ width: 100%;
3977
+ max-width: 224px;
3972
3978
  }
3973
3979
  }
3974
3980
  @media (min-width: 816px) {
3975
3981
  .EmptyState-module_illustrationSide__ZSjF3 {
3976
- display: flex;
3977
3982
  flex-direction: column;
3978
3983
  justify-content: center;
3979
3984
  align-items: flex-end;
3980
3985
  margin-bottom: 0;
3981
- min-width: 40%;
3982
- max-width: 50%;
3983
- flex-grow: 1;
3984
- box-sizing: border-box;
3986
+ width: auto;
3987
+ max-width: 40%;
3985
3988
  padding-inline-end: var(--spacing-md, 1.5rem);
3986
3989
  }
3987
3990
  }
@@ -4003,33 +4006,37 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
4003
4006
  max-width: 100%;
4004
4007
  max-height: 366px;
4005
4008
  width: auto;
4009
+ height: auto;
4006
4010
  min-height: 196px;
4007
4011
  }
4008
4012
  @media (max-width: 815px) {
4009
4013
  .EmptyState-module_illustration__HyD2k,
4010
4014
  .EmptyState-module_illustrationSide__ZSjF3 video {
4011
4015
  max-height: 196px;
4016
+ width: 100%;
4012
4017
  }
4013
4018
  }
4014
4019
 
4015
4020
  .EmptyState-module_textSide__tv54w {
4016
- display: flex;
4017
- flex-grow: 1;
4018
- flex-shrink: 1;
4021
+ flex: 1 1 auto;
4022
+ min-width: 0;
4023
+ max-width: 100%;
4019
4024
  align-items: center;
4020
4025
  -webkit-font-smoothing: antialiased;
4021
4026
  }
4022
4027
  @media (min-width: 816px) {
4023
4028
  .EmptyState-module_textSide__tv54w {
4024
- flex-basis: 50%;
4025
- flex-grow: 0;
4029
+ flex: 0 1 50%;
4026
4030
  }
4027
4031
  }
4028
4032
 
4029
4033
  .EmptyState-module_textSideInner__Yynhi {
4030
- flex-grow: 0;
4031
- height: auto;
4034
+ width: 100%;
4035
+ max-width: 100%;
4036
+ box-sizing: border-box;
4032
4037
  margin: 0 var(--spacing-sm, 0.75rem);
4038
+ word-wrap: break-word;
4039
+ overflow-wrap: break-word;
4033
4040
  }
4034
4041
  @media (max-width: 815px) {
4035
4042
  .EmptyState-module_textSideInner__Yynhi {
@@ -4044,6 +4051,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
4044
4051
 
4045
4052
  .EmptyState-module_heading__y-yvC {
4046
4053
  margin-bottom: var(--spacing-md, 1.5rem);
4054
+ max-width: 100%;
4047
4055
  }
4048
4056
  @media (max-width: 375px) {
4049
4057
  .EmptyState-module_heading__y-yvC {
@@ -4055,6 +4063,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
4055
4063
 
4056
4064
  .EmptyState-module_description__fsJOc {
4057
4065
  margin-bottom: var(--spacing-md, 1.5rem);
4066
+ max-width: 100%;
4058
4067
  }
4059
4068
  /** THIS IS AN AUTOGENERATED FILE **/
4060
4069
  .ErrorPage-module_paragraphPadding__-L-qy {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.67.17",
3
+ "version": "1.67.18",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
@@ -7,19 +7,21 @@
7
7
  --empty-state-border-width: var(--border-width-1);
8
8
 
9
9
  display: flex;
10
- justify-content: space-around;
11
10
  width: 100%;
11
+ box-sizing: border-box;
12
+ justify-content: space-around;
12
13
  padding: calc(2% - var(--empty-state-border-width))
13
14
  calc(var(--spacing-24) - var(--empty-state-border-width));
14
15
  color: $color-purple-800;
15
16
  border: var(--empty-state-border-width) solid var(--empty-state-border-color);
16
17
  border-radius: var(--border-solid-border-radius);
17
18
  background-color: var(--empty-state-background-color);
19
+ flex-wrap: wrap;
18
20
 
19
21
  @include small {
20
22
  flex-direction: column;
21
23
  align-items: center;
22
- padding-block: calc(var(--spacing-24) - var(--empty-state-border-width));
24
+ padding: calc(var(--spacing-24) - var(--empty-state-border-width));
23
25
  }
24
26
 
25
27
  &.straightCorners {
@@ -82,29 +84,30 @@
82
84
 
83
85
  .illustrationSide,
84
86
  .textSide {
85
- display: inline-block;
87
+ display: flex;
88
+ box-sizing: border-box;
86
89
  }
87
90
 
88
91
  .illustrationSide {
89
- min-width: 224px;
90
- flex-grow: 0;
91
- flex-shrink: 1;
92
+ justify-content: center;
93
+ align-items: center;
94
+ flex: 0 1 auto;
95
+ min-width: 0;
96
+ max-width: 100%;
92
97
  margin-bottom: $spacing-md;
93
98
 
94
99
  @include small {
95
- width: 224px;
100
+ width: 100%;
101
+ max-width: 224px;
96
102
  }
97
103
 
98
104
  @include medium {
99
- display: flex;
100
105
  flex-direction: column;
101
106
  justify-content: center;
102
107
  align-items: flex-end;
103
108
  margin-bottom: 0;
104
- min-width: 40%;
105
- max-width: 50%;
106
- flex-grow: 1;
107
- box-sizing: border-box;
109
+ width: auto;
110
+ max-width: 40%;
108
111
  padding-inline-end: $spacing-md;
109
112
  }
110
113
 
@@ -128,32 +131,36 @@
128
131
  max-width: 100%;
129
132
  max-height: 366px;
130
133
  width: auto;
134
+ height: auto;
131
135
 
132
136
  // Fixes for IE11 Flexbox issues
133
137
  min-height: 196px;
134
138
 
135
139
  @include small {
136
140
  max-height: 196px;
141
+ width: 100%;
137
142
  }
138
143
  }
139
144
 
140
145
  .textSide {
141
- display: flex;
142
- flex-grow: 1;
143
- flex-shrink: 1;
146
+ flex: 1 1 auto;
147
+ min-width: 0;
148
+ max-width: 100%;
144
149
  align-items: center;
145
150
  -webkit-font-smoothing: antialiased;
146
151
 
147
152
  @include medium {
148
- flex-basis: 50%;
149
- flex-grow: 0;
153
+ flex: 0 1 50%;
150
154
  }
151
155
  }
152
156
 
153
157
  .textSideInner {
154
- flex-grow: 0;
155
- height: auto;
158
+ width: 100%;
159
+ max-width: 100%;
160
+ box-sizing: border-box;
156
161
  margin: 0 $spacing-sm;
162
+ word-wrap: break-word;
163
+ overflow-wrap: break-word;
157
164
 
158
165
  @include small {
159
166
  margin-bottom: 0;
@@ -166,6 +173,7 @@
166
173
 
167
174
  .heading {
168
175
  margin-bottom: $spacing-md;
176
+ max-width: 100%;
169
177
 
170
178
  @media (max-width: (375px)) {
171
179
  @include typography-heading-3-sm;
@@ -174,4 +182,5 @@
174
182
 
175
183
  .description {
176
184
  margin-bottom: $spacing-md;
185
+ max-width: 100%;
177
186
  }