@kaizen/components 2.0.1 → 2.0.2

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.
Files changed (2) hide show
  1. package/dist/styles.css +2055 -2055
  2. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -1,1051 +1,860 @@
1
1
  @layer tokens, normalize, reset, kz-components;@layer tokens{:root{--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:auto}[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:auto;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
2
  @layer kz-components {
3
- .ListSection-module_sectionWrapper__gxh41:not(.ListSection-module_firstSectionHeader__zPUIZ) {
4
- padding-top: var(--spacing-16);
3
+ /*
4
+ * This is taken from the Material Symbols CDN
5
+ * font-weight & font-size removed as overridden in .icon
6
+ */
7
+ .Icon-module_material-symbols-outlined__9Sv7S {
8
+ font-family: 'Material Symbols Outlined';
9
+ font-style: normal;
10
+ line-height: 1;
11
+ letter-spacing: normal;
12
+ text-transform: none;
13
+ display: inline-block;
14
+ white-space: nowrap;
15
+ word-wrap: normal;
16
+ direction: ltr;
17
+ font-feature-settings: 'liga';
18
+ -webkit-font-smoothing: antialiased;
5
19
  }
6
20
 
7
- .ListSection-module_firstSectionHeader__zPUIZ {
8
- padding-top: var(--spacing-8);
21
+ .Icon-module_icon__axtlp {
22
+ font-size: calc(1px * var(--icon-size, 20));
23
+ font-weight: var(--icon-font-weight, 400);
24
+ vertical-align: var(--icon-vertical-align);
25
+
26
+ /* Must use vars otherwise whole attribute must be set again */
27
+ font-variation-settings:
28
+ 'FILL' var(--icon-fill, 0),
29
+ 'GRAD' var(--icon-grade, 0),
30
+ 'opsz' var(--icon-optical-size, var(--icon-size, 20));
9
31
  }
10
32
 
11
- .ListSection-module_listSectionHeader__bptHg {
12
- font-family: var(--typography-paragraph-small-font-family);
13
- font-weight: var(--typography-paragraph-bold-font-weight);
14
- font-size: var(--typography-paragraph-small-font-size);
15
- line-height: var(--typography-paragraph-small-line-height);
16
- letter-spacing: var(--typography-paragraph-small-letter-spacing);
17
- padding-bottom: var(--spacing-4);
18
- padding-left: var(--spacing-16);
33
+ .Icon-module_filled__N1VVu {
34
+ --icon-fill: 1;
19
35
  }
20
36
 
21
- .ListSection-module_listSectionGroup__PoUPf {
22
- padding: 0;
23
- list-style: none;
37
+ [dir='rtl'] .Icon-module_shouldMirrorInRTL__bKmbn {
38
+ transform: scale(-1, 1);
24
39
  }
25
- }
26
40
 
27
- @layer kz-components {
28
- .List-module_list__bbFPn {
29
- display: flex;
30
- flex-direction: column;
31
- flex: 1 1 auto;
32
- list-style: none;
33
- overflow-y: auto;
34
- padding: 0.875rem;
35
- margin: 0;
41
+ [dir='rtl'] .Icon-module_iconLTR__jvIwB {
42
+ display: none;
43
+ }
44
+
45
+ .Icon-module_iconRTL__16aXy {
46
+ display: none;
47
+ }
48
+
49
+ [dir='rtl'] .Icon-module_iconRTL__16aXy {
50
+ display: inherit;
36
51
  }
37
52
  }
38
53
 
39
54
  @layer kz-components {
40
- ul {
41
- padding-inline-start: 0;
42
- }
55
+ .Avatar-module_wrapper__elyMq {
56
+ --avatar-x-y: 1.5rem;
43
57
 
44
- .ListItem-module_listItem__xGr6A {
45
- font-family: var(--typography-paragraph-body-font-family);
46
- font-weight: var(--typography-paragraph-body-font-weight);
47
- font-size: var(--typography-paragraph-body-font-size);
48
- line-height: var(--typography-paragraph-body-line-height);
49
- letter-spacing: var(--typography-paragraph-body-letter-spacing);
50
- padding: var(--spacing-8) var(--spacing-16);
51
- margin: 0;
52
- list-style-type: none;
53
- border-radius: var(--spacing-8);
54
- border: var(--spacing-2) solid transparent;
58
+ background: var(--color-gray-300);
59
+ border-radius: 100%;
60
+ box-sizing: border-box;
61
+ overflow: hidden;
62
+ align-items: center;
55
63
  display: flex;
56
- flex-direction: row;
57
- justify-content: space-between;
58
- outline: none;
59
- gap: var(--spacing-12);
64
+ justify-content: center;
65
+ width: var(--avatar-x-y);
66
+ height: var(--avatar-x-y);
67
+ box-shadow: var(--shadow-small-box-shadow);
68
+ border: 3px solid var(--color-white);
60
69
  }
61
70
 
62
- .ListItem-module_listItem__xGr6A.ListItem-module_focused__au3J5 {
63
- border: var(--spacing-2) solid var(--color-blue-500);
71
+ .Avatar-module_small__xytAy {
72
+ box-shadow: none;
73
+ border: none;
74
+
75
+ --avatar-x-y: 1.25rem;
64
76
  }
65
77
 
66
- .ListItem-module_listItem__xGr6A.ListItem-module_focused__au3J5:hover {
67
- border-color: transparent;
78
+ .Avatar-module_medium__gDEnT {
79
+ --avatar-x-y: 3rem;
68
80
  }
69
81
 
70
- .ListItem-module_listItem__xGr6A:hover {
71
- background-color: var(--color-gray-200);
82
+ .Avatar-module_large__bexrc {
83
+ --avatar-x-y: 4.5rem;
72
84
  }
73
85
 
74
- .ListItem-module_listItem__xGr6A.ListItem-module_focused__au3J5:active {
75
- background-color: var(--color-gray-300);
86
+ .Avatar-module_xlarge__ifASs {
87
+ --avatar-x-y: 6rem;
76
88
  }
77
89
 
78
- .ListItem-module_startSelection__7qDbl {
79
- justify-content: flex-start;
90
+ .Avatar-module_xxlarge__g7bx6 {
91
+ --avatar-x-y: 7.75rem;
80
92
  }
81
93
 
82
- .ListItem-module_selected__IV3-p {
83
- background-color: var(--color-blue-100);
84
- border: var(--spacing-2) solid transparent;
94
+ /* Themes */
95
+ .Avatar-module_personal__bq8mM {
96
+ background: var(--color-orange-100);
85
97
  }
86
98
 
87
- .ListItem-module_selected__IV3-p:hover {
88
- background-color: var(--color-blue-200);
99
+ .Avatar-module_otherUser__U2h5P {
100
+ background: var(--color-gray-300);
89
101
  }
90
102
 
91
- .ListItem-module_selected__IV3-p:active {
92
- background-color: var(--color-blue-100);
103
+ .Avatar-module_company__YVflF {
104
+ border: 0;
105
+ background: var(--color-white);
106
+ padding: var(--spacing-6);
107
+ border-radius: var(--border-solid-border-radius);
93
108
  }
94
109
 
95
- .ListItem-module_disabled__A2QFo {
96
- color: var(--color-gray-500);
110
+ .Avatar-module_small__xytAy.Avatar-module_company__YVflF {
111
+ padding: 0;
97
112
  }
98
113
 
99
- .ListItem-module_disabled__A2QFo:hover {
100
- background-color: var(--color-white);
114
+ .Avatar-module_avatarImage__pHTCF {
115
+ width: 100%;
116
+ height: 100%;
117
+ object-fit: cover;
101
118
  }
102
119
 
103
- .ListItem-module_iconChecked__co4xD {
104
- color: var(--color-blue-500);
120
+ .Avatar-module_avatarImage__pHTCF.Avatar-module_loading__2i5YE {
121
+ display: none;
105
122
  }
106
123
 
107
- .ListItem-module_itemContent__x4h7q {
108
- display: flex;
109
- flex-direction: row;
110
- overflow: hidden;
111
- min-width: 0;
112
- flex: 1;
124
+ .Avatar-module_companyAvatarImage__aGdNm {
125
+ object-fit: contain;
126
+ box-sizing: border-box;
127
+ border-radius: var(--spacing-4);
113
128
  }
114
129
 
115
- .ListItem-module_itemText__O4Ddg {
116
- white-space: nowrap;
117
- overflow: hidden;
118
- text-overflow: ellipsis;
119
- flex: 1;
120
- min-width: 0;
130
+ .Avatar-module_fallbackIcon__RUoRR {
131
+ color: rgb(var(--color-purple-800-rgb), 0.7);
132
+ font-size: calc(var(--avatar-x-y) * 0.7);
121
133
  }
122
134
 
123
- .ListItem-module_selectedStartPosition__2N3bw {
124
- justify-content: flex-start;
135
+ .Avatar-module_xlarge__ifASs .Avatar-module_fallbackIcon__RUoRR,
136
+ .Avatar-module_xxlarge__g7bx6 .Avatar-module_fallbackIcon__RUoRR {
137
+ font-size: calc(var(--avatar-x-y) * 0.8);
125
138
  }
126
139
 
127
- .ListItem-module_selectedIconWrapper__w-ECd {
128
- display: flex;
129
- align-items: center;
140
+ .Avatar-module_initials__85roP {
141
+ box-sizing: border-box;
142
+ color: var(--color-purple-800);
143
+ padding-left: 5px;
144
+ padding-right: 5px;
145
+ text-align: center;
146
+ width: 100%;
147
+ font-size: var(--typography-heading-3-font-size);
148
+ font-family: var(--typography-heading-1-font-family);
149
+ font-weight: var(--typography-heading-1-font-weight);
150
+ letter-spacing: var(--typography-heading-3-letter-spacing);
130
151
  }
131
152
 
132
- .ListItem-module_emptySpacer__qeRpQ {
133
- width: var(--spacing-20);
153
+ .Avatar-module_initials__85roP.Avatar-module_longName__02zNk::before {
154
+ content: none;
134
155
  }
135
- }
136
156
 
137
- @layer kz-components {
138
- .Select-module_topLabel__tuilO {
139
- display: flex;
140
- flex-direction: column;
141
- align-items: flex-start;
157
+ .Avatar-module_initials__85roP::before {
158
+ content: '';
159
+ display: block;
160
+ margin-top: -0.001em;
142
161
  }
143
162
 
144
- .Select-module_sideLabel__om-vC {
145
- display: grid;
146
- grid-template-columns: auto 1fr;
147
- grid-template-rows: auto auto;
148
- column-gap: var(--spacing-12);
149
- align-items: center;
163
+ .Avatar-module_wrapper__elyMq .Avatar-module_initials__85roP {
164
+ text-decoration: none;
165
+ speak-as: spell-out;
166
+
167
+ /* to override materialize.css global styling in performance-ui,
168
+ * which sets a border-bottom on abbr tags
169
+ */
170
+ border-bottom: none;
150
171
  }
151
172
 
152
- .Select-module_label__X4jf- {
153
- grid-column: 1;
154
- grid-row: 1;
173
+ .Avatar-module_xlarge__ifASs .Avatar-module_initials__85roP,
174
+ .Avatar-module_xxlarge__g7bx6 .Avatar-module_initials__85roP {
175
+ font-size: var(--typography-heading-1-font-size);
176
+ letter-spacing: var(--typography-heading-1-letter-spacing);
155
177
  }
156
178
 
157
- .Select-module_labelTop__vE3N2 {
158
- margin-bottom: var(--spacing-6);
179
+ .Avatar-module_medium__gDEnT .Avatar-module_initials__85roP {
180
+ font-size: var(--typography-heading-5-font-size);
159
181
  }
160
182
 
161
- .Select-module_selectTrigger__ibr4f {
162
- grid-column: 2;
163
- grid-row: 1;
164
- width: 100%;
183
+ .Avatar-module_small__xytAy .Avatar-module_initials__85roP {
184
+ font-size: 0.5rem;
165
185
  }
166
186
 
167
- .Select-module_description__hOocq {
168
- grid-column: 2;
169
- grid-row: 2;
187
+ .Avatar-module_small__xytAy .Avatar-module_initials__85roP,
188
+ .Avatar-module_medium__gDEnT .Avatar-module_initials__85roP {
189
+ margin-bottom: -1px;
190
+ font-weight: var(--typography-heading-5-font-weight);
191
+ letter-spacing: var(--typography-heading-5-letter-spacing);
170
192
  }
171
193
  }
172
194
 
173
195
  @layer kz-components {
174
- .Popover-module_popover__BjY2S {
175
- position: absolute;
176
- background-color: var(--color-white);
177
- border-radius: var(--spacing-8);
178
- padding: 0;
179
- box-shadow: var(--shadow-small-box-shadow);
196
+ .AvatarGroup-module_AvatarGroup__xftR5 {
197
+ display: inline-flex;
198
+ list-style: none;
180
199
  margin: 0;
181
- box-sizing: border-box;
182
- display: flex;
183
- flex-direction: column;
200
+ padding: 0;
201
+ }
184
202
 
185
- @supports (anchor-name: --anchor) {
186
- position-anchor: var(--position-anchor);
187
- margin-block: var(--spacing-4);
188
- position-area: var(--position-area) center;
189
- /* stylelint-disable-next-line declaration-property-value-no-unknown */
190
- width: anchor-size(width);
191
- }
203
+ .AvatarGroup-module_AvatarCounter__0DCSW {
204
+ direction: ltr;
205
+ align-items: center;
206
+ background: var(--color-gray-300);
207
+ border: 3px solid var(--color-white);
208
+ border-radius: 100%;
209
+ box-sizing: border-box;
210
+ box-shadow: var(--shadow-small-box-shadow);
211
+ display: flex;
212
+ justify-content: center;
213
+ overflow: hidden;
214
+ width: var(--avatar-x-y, 1.25rem);
215
+ height: var(--avatar-x-y, 1.25rem);
216
+ font-family: var(--typography-heading-5-font-family);
217
+ font-weight: var(--typography-heading-5-font-weight);
218
+ letter-spacing: var(--typography-heading-5-letter-spacing);
192
219
  }
193
220
 
194
- .Popover-module_offsetSpacing__NdPBV {
195
- margin-top: var(--spacing-4);
196
- margin-bottom: var(--spacing-4);
221
+ .AvatarGroup-module_AvatarGroupItem__s8miW + .AvatarGroup-module_AvatarGroupItem__s8miW {
222
+ margin-inline-start: calc((var(--avatar-x-y)) / -2);
197
223
  }
198
- }
199
224
 
200
- @layer kz-components {
201
- .SelectTrigger-module_trigger__fIe03 {
202
- anchor-name: var(--anchor-name);
203
- display: flex;
204
- align-items: center;
205
- justify-content: space-between;
206
- font-family: var(--typography-paragraph-body-font-family);
207
- font-weight: var(--typography-paragraph-body-font-weight);
208
- font-size: var(--typography-paragraph-body-font-size);
209
- line-height: var(--typography-paragraph-body-line-height);
210
- letter-spacing: var(--typography-paragraph-body-letter-spacing);
211
- padding: var(--spacing-12);
212
- height: var(--spacing-40);
213
- min-width: var(--spacing-200);
214
- width: 100%;
215
- background-color: var(--color-white);
216
- border-radius: var(--spacing-8);
217
- border: var(--spacing-2) solid var(--color-gray-500);
225
+ .AvatarGroup-module_small__zX0AT {
226
+ --avatar-x-y: 1.25rem;
218
227
  }
219
228
 
220
- .SelectTrigger-module_trigger__fIe03:focus-visible {
221
- outline-offset: var(--spacing-2);
222
- outline: var(--spacing-2) solid var(--color-blue-500);
223
- background-color: var(--color-white);
229
+ .AvatarGroup-module_small__zX0AT .AvatarGroup-module_AvatarCounter__0DCSW {
230
+ box-shadow: none;
231
+ border: none;
232
+ font-size: 0.5rem;
224
233
  }
225
234
 
226
- .SelectTrigger-module_trigger__fIe03:hover:not(.SelectTrigger-module_disabled__zfAoe) {
227
- border-color: var(--color-gray-600);
228
- background-color: var(--color-gray-200);
235
+ .AvatarGroup-module_medium__0Vlk8 {
236
+ --avatar-x-y: 3rem;
229
237
  }
230
238
 
231
- .SelectTrigger-module_secondary__eOquY:not(.SelectTrigger-module_disabled__zfAoe, .SelectTrigger-module_readOnly__q-Epr) {
232
- border: 2px solid transparent;
233
- border-bottom: var(--spacing-2) solid var(--color-gray-400);
234
- border-radius: 0.4375rem 0.4375rem 0 0;
239
+ .AvatarGroup-module_medium__0Vlk8 .AvatarGroup-module_AvatarCounter__0DCSW {
240
+ font-size: var(--typography-heading-5-font-size);
235
241
  }
236
242
 
237
- .SelectTrigger-module_secondary__eOquY:not(.SelectTrigger-module_disabled__zfAoe, .SelectTrigger-module_readOnly__q-Epr):hover {
238
- border: var(--spacing-2) solid var(--color-gray-600);
239
- border-radius: 0.4375rem;
243
+ .AvatarGroup-module_large__c1ZHO {
244
+ --avatar-x-y: 4.5rem;
240
245
  }
241
246
 
242
- .SelectTrigger-module_secondary__eOquY:not(.SelectTrigger-module_disabled__zfAoe, .SelectTrigger-module_readOnly__q-Epr):focus-within {
243
- border: var(--spacing-2) solid var(--color-gray-500);
244
- border-radius: 0.4375rem;
247
+ .AvatarGroup-module_large__c1ZHO .AvatarGroup-module_AvatarCounter__0DCSW {
248
+ font-family: var(--typography-heading-3-font-family);
249
+ font-size: var(--typography-heading-3-font-size);
250
+ font-weight: var(--typography-heading-3-font-weight);
251
+ letter-spacing: var(--typography-heading-3-letter-spacing);
245
252
  }
253
+ }
246
254
 
247
- .SelectTrigger-module_disabled__zfAoe {
248
- pointer-events: none;
249
- border: var(--spacing-2) solid var(--color-gray-300);
250
- background-color: var(--color-gray-100);
255
+ @layer kz-components {
256
+ .Badge-module_badge__ojFmb {
257
+ border-radius: var(--spacing-12);
258
+ color: var(--color-purple-800);
259
+ display: inline-block;
260
+ position: relative;
261
+ font-family: var(--typography-paragraph-extra-small-font-family);
262
+ font-size: var(--typography-paragraph-extra-small-font-size);
263
+ font-weight: var(--typography-paragraph-bold-font-weight);
264
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
265
+ line-height: var(--typography-paragraph-extra-small-line-height);
266
+ padding: 1px var(--spacing-6);
267
+ min-width: 8px;
268
+ text-align: center;
269
+ background-color: var(--badge-background-color, var(--color-gray-300));
251
270
  }
252
271
 
253
- .SelectTrigger-module_disabledText__acP59 {
254
- color: var(--color-gray-500);
255
- }
272
+ .Badge-module_reversed__C5Glu {
273
+ --badge-background-color: rgb(var(--color-white-rgb), 0.1);
256
274
 
257
- .SelectTrigger-module_readOnly__q-Epr {
258
- pointer-events: none;
259
- background-color: var(--color-gray-200);
260
- border: var(--spacing-2) solid var(--color-gray-200);
275
+ color: var(--color-white);
261
276
  }
262
277
 
263
- .SelectTrigger-module_small__jE-NG {
264
- height: var(--spacing-32);
265
- }
278
+ .Badge-module_reversed__C5Glu.Badge-module_active__18-He {
279
+ --badge-background-color: var(--color-green-300);
266
280
 
267
- .SelectTrigger-module_large__r93d8 {
268
- height: var(--spacing-48);
281
+ color: var(--color-purple-800);
269
282
  }
270
283
 
271
- .SelectTrigger-module_chevronButton__611jw {
272
- background: none;
273
- padding: 0;
274
- display: flex;
275
- }
276
- }
284
+ .Badge-module_reversed__C5Glu.Badge-module_dark__SjUFf {
285
+ --badge-background-color: var(--color-purple-700);
277
286
 
278
- @layer kz-components {
279
- .ComboBox-module_topLabel__a2t80 {
280
- display: flex;
281
- flex-direction: column;
282
- align-items: flex-start;
287
+ color: var(--color-white);
283
288
  }
284
289
 
285
- .ComboBox-module_sideLabel__B-jX4 {
286
- display: grid;
287
- grid-template-columns: auto 1fr;
288
- grid-template-rows: auto auto;
289
- gap: var(--spacing-4) var(--spacing-6);
290
- align-items: center;
290
+ .Badge-module_large__K10-T {
291
+ display: inline-flex;
292
+ justify-content: center;
293
+ border-radius: var(--spacing-48);
294
+ font-size: var(--typography-data-medium-font-size);
295
+ line-height: var(--typography-data-medium-line-height);
296
+ letter-spacing: var(--typography-data-medium-letter-spacing);
297
+ padding: 2px 1.875rem;
298
+ width: 24px;
291
299
  }
292
300
 
293
- .ComboBox-module_label__eTnD9 {
294
- grid-column: 1;
295
- grid-row: 1;
296
- }
301
+ .Badge-module_active__18-He {
302
+ --badge-background-color: var(--color-blue-500);
297
303
 
298
- .ComboBox-module_labelTop__h6r-z {
299
- margin-bottom: var(--spacing-6);
304
+ color: var(--color-white);
300
305
  }
301
306
 
302
- .ComboBox-module_comboBoxTrigger__yvqGb {
303
- grid-column: 2;
304
- grid-row: 1;
305
- width: 100%;
306
- }
307
+ .Badge-module_dark__SjUFf {
308
+ --badge-background-color: rgb(var(--color-purple-700-rgb), 0.1);
307
309
 
308
- .ComboBox-module_description__MDKJ7 {
309
- grid-column: 2;
310
- grid-row: 2;
310
+ color: var(--color-purple-800);
311
311
  }
312
- }
313
312
 
314
- @layer kz-components {
315
- .ComboBoxTrigger-module_trigger__p6pcn {
316
- anchor-name: var(--anchor-name);
317
- display: flex;
318
- align-items: center;
319
- justify-content: space-between;
320
- font-family: var(--typography-paragraph-body-font-family);
321
- font-weight: var(--typography-paragraph-body-font-weight);
322
- font-size: var(--typography-paragraph-body-font-size);
323
- line-height: var(--typography-paragraph-body-line-height);
324
- letter-spacing: var(--typography-paragraph-body-letter-spacing);
325
- height: var(--spacing-40);
326
- min-width: var(--spacing-200);
327
- width: 100%;
328
- background-color: var(--color-white);
329
- border-radius: 0.4375rem;
330
- border: var(--spacing-2) solid var(--color-gray-500);
331
- box-sizing: border-box;
332
- }
313
+ .Badge-module_dot__NIjOQ {
314
+ --badge-background-color: var(--color-green-300);
333
315
 
334
- .ComboBoxTrigger-module_smallText__Vj2Ya {
335
- font-family: var(--typography-paragraph-small-font-family);
336
- font-weight: var(--typography-paragraph-small-font-weight);
337
- font-size: var(--typography-paragraph-small-font-size);
338
- line-height: var(--typography-paragraph-small-line-height);
339
- letter-spacing: var(--typography-paragraph-small-letter-spacing);
316
+ padding: var(--spacing-6);
317
+ min-width: unset;
340
318
  }
341
319
 
342
- .ComboBoxTrigger-module_secondary__TvNTK:not(.ComboBoxTrigger-module_disabled__BkFJy, .ComboBoxTrigger-module_readOnly__g6-fB) {
343
- border-radius: 0.4375rem 0.4375rem 0 0;
344
- border: 2px solid transparent;
345
- border-bottom: var(--spacing-2) solid var(--color-gray-400);
320
+ .Badge-module_dot__NIjOQ.Badge-module_large__K10-T {
321
+ padding: 1.875rem;
322
+ width: unset;
346
323
  }
347
324
 
348
- .ComboBoxTrigger-module_secondary__TvNTK:not(.ComboBoxTrigger-module_disabled__BkFJy, .ComboBoxTrigger-module_readOnly__g6-fB):hover {
349
- border: var(--spacing-2) solid var(--color-gray-600);
350
- border-radius: 0.4375rem;
325
+ .Badge-module_animation__hYW2H {
326
+ display: inherit;
351
327
  }
352
328
 
353
- .ComboBoxTrigger-module_secondary__TvNTK:not(.ComboBoxTrigger-module_disabled__BkFJy, .ComboBoxTrigger-module_readOnly__g6-fB):focus-within {
354
- border: var(--spacing-2) solid var(--color-gray-600);
355
- border-radius: 0.4375rem;
356
- }
329
+ .Badge-module_animation__hYW2H .Badge-module_badge__ojFmb {
330
+ --badge-duration-timing: (var(--animation-duration-slow) / 2)
331
+ var(--animation-easing-function-ease-in);
357
332
 
358
- .ComboBoxTrigger-module_input__TkoLg {
359
- outline: none;
360
- text-overflow: ellipsis;
361
- background-color: var(--color-white);
362
- padding: var(--spacing-8) 0;
363
- margin-inline-start: var(--spacing-16);
364
- height: 2.25rem;
365
- box-sizing: border-box;
366
- width: inherit;
333
+ transition:
334
+ transform var(--badge-duration-timing),
335
+ background-color var(--badge-duration-timing);
336
+ transform-origin: center;
337
+ transform: scale3d(1, 1, 1);
367
338
  }
368
339
 
369
- .ComboBoxTrigger-module_small__-225Z .ComboBoxTrigger-module_input__TkoLg {
370
- height: 1.75rem;
340
+ .Badge-module_animationOn__6Seca .Badge-module_badge__ojFmb {
341
+ transform: scale3d(1.35, 1.35, 1.35);
371
342
  }
372
343
 
373
- .ComboBoxTrigger-module_disabled__BkFJy {
374
- pointer-events: none;
375
- border: var(--spacing-2) solid var(--color-gray-300);
376
- background-color: var(--color-gray-100);
377
-
378
- .ComboBoxTrigger-module_input__TkoLg {
379
- background-color: var(--color-gray-100);
380
- color: var(--color-gray-500);
381
- }
344
+ .Badge-module_animationOn__6Seca .Badge-module_badge__ojFmb.Badge-module_dark__SjUFf {
345
+ --badge-background-color: rgb(var(--color-purple-700-rgb), 0.2);
382
346
  }
383
347
 
384
- .ComboBoxTrigger-module_readOnly__g6-fB {
385
- pointer-events: none;
386
- background-color: var(--color-gray-200);
387
- border: var(--spacing-2) solid var(--color-gray-200);
348
+ .Badge-module_animationOn__6Seca .Badge-module_badge__ojFmb.Badge-module_active__18-He {
349
+ --badge-background-color: var(--color-blue-500);
388
350
 
389
- .ComboBoxTrigger-module_input__TkoLg {
390
- background-color: var(--color-gray-200);
391
- }
351
+ color: var(--color-white);
392
352
  }
353
+ }
393
354
 
394
- .ComboBoxTrigger-module_trigger__p6pcn:focus-within {
395
- outline-offset: var(--spacing-2);
396
- outline: var(--spacing-2) solid var(--color-blue-500);
397
- background-color: var(--color-white);
398
- border-radius: 0.4375rem;
399
-
400
- .ComboBoxTrigger-module_input__TkoLg {
401
- background-color: var(--color-white);
402
- }
403
- }
404
-
405
- .ComboBoxTrigger-module_trigger__p6pcn:hover:not(:focus-within) {
406
- border-color: var(--color-gray-600);
407
- background-color: var(--color-gray-200);
408
-
409
- .ComboBoxTrigger-module_input__TkoLg {
410
- background-color: var(--color-gray-200);
411
- }
412
- }
413
-
414
- .ComboBoxTrigger-module_small__-225Z {
415
- height: var(--spacing-32);
355
+ @layer kz-components {
356
+ .Brand-module_img__-kq3F {
357
+ max-inline-size: 100%;
358
+ display: flex;
416
359
  }
360
+ }
417
361
 
418
- .ComboBoxTrigger-module_large__kj1vw {
419
- height: var(--spacing-48);
362
+ /** THIS IS AN AUTOGENERATED FILE **/
363
+ /** THIS IS AN AUTOGENERATED FILE **/
364
+ /** THIS IS AN AUTOGENERATED FILE **/
365
+ /** THIS IS AN AUTOGENERATED FILE **/
366
+ @layer kz-components {
367
+ .LoadingGraphic-module_loadingGraphic__lg-gH {
368
+ border-radius: var(--border-solid-border-radius, 7px);
369
+ top: calc(var(--spacing-md, 1.5rem) * 0.175);
420
370
  }
421
-
422
- .ComboBoxTrigger-module_clearButton__PlsuZ {
423
- background: none;
424
- padding: 0;
425
- display: flex;
371
+ .LoadingGraphic-module_isAnimated__tyskp {
372
+ animation-name: LoadingGraphic-module_fade-in-out__VFBMB;
373
+ animation-duration: calc(var(--animation-duration-deliberate, 700ms) * 2);
374
+ animation-iteration-count: infinite;
426
375
  }
427
-
428
- .ComboBoxTrigger-module_clearButton__PlsuZ:focus-visible {
429
- outline: var(--spacing-2) solid var(--color-blue-500);
430
- border-radius: 50%;
376
+ }
377
+ @keyframes LoadingGraphic-module_fade-in-out__VFBMB {
378
+ 0% {
379
+ opacity: 60%;
431
380
  }
432
-
433
- .ComboBoxTrigger-module_chevronButton__rzv2v {
434
- background: none;
435
- padding-block: var(--spacing-8);
436
- padding-inline: var(--spacing-6) var(--spacing-16);
437
- display: flex;
381
+ 50% {
382
+ opacity: 100%;
438
383
  }
439
-
440
- .ComboBoxTrigger-module_hidden__zC13w {
441
- visibility: hidden;
384
+ 100% {
385
+ opacity: 60%;
442
386
  }
443
387
  }
444
-
445
388
  @layer kz-components {
446
- /*
447
- * This is taken from the Material Symbols CDN
448
- * font-weight & font-size removed as overridden in .icon
449
- */
450
- .Icon-module_material-symbols-outlined__9Sv7S {
451
- font-family: 'Material Symbols Outlined';
452
- font-style: normal;
453
- line-height: 1;
454
- letter-spacing: normal;
455
- text-transform: none;
456
- display: inline-block;
457
- white-space: nowrap;
458
- word-wrap: normal;
459
- direction: ltr;
460
- font-feature-settings: 'liga';
461
- -webkit-font-smoothing: antialiased;
389
+ .LoadingGraphic-module_loadingGraphic__lg-gH {
390
+ background-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
391
+ border-radius: 50%;
462
392
  }
463
-
464
- .Icon-module_icon__axtlp {
465
- font-size: calc(1px * var(--icon-size, 20));
466
- font-weight: var(--icon-font-weight, 400);
467
- vertical-align: var(--icon-vertical-align);
468
-
469
- /* Must use vars otherwise whole attribute must be set again */
470
- font-variation-settings:
471
- 'FILL' var(--icon-fill, 0),
472
- 'GRAD' var(--icon-grade, 0),
473
- 'opsz' var(--icon-optical-size, var(--icon-size, 20));
393
+ .LoadingGraphic-module_isReversed__HmZ4H {
394
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
474
395
  }
475
-
476
- .Icon-module_filled__N1VVu {
477
- --icon-fill: 1;
396
+ }
397
+ /** THIS IS AN AUTOGENERATED FILE **/
398
+ /** THIS IS AN AUTOGENERATED FILE **/
399
+ /** THIS IS AN AUTOGENERATED FILE **/
400
+ /** THIS IS AN AUTOGENERATED FILE **/
401
+ /** THIS IS AN AUTOGENERATED FILE **/
402
+ @layer kz-components {
403
+ .LoadingHeading-module_loadingHeading__tb9a- {
404
+ border-radius: var(--border-solid-border-radius, 7px);
405
+ top: calc(var(--spacing-md, 1.5rem) * 0.175);
478
406
  }
479
-
480
- [dir='rtl'] .Icon-module_shouldMirrorInRTL__bKmbn {
481
- transform: scale(-1, 1);
407
+ .LoadingHeading-module_isAnimated__cbstI {
408
+ animation-name: LoadingHeading-module_fade-in-out__4e-Ds;
409
+ animation-duration: calc(var(--animation-duration-deliberate, 700ms) * 2);
410
+ animation-iteration-count: infinite;
482
411
  }
483
-
484
- [dir='rtl'] .Icon-module_iconLTR__jvIwB {
485
- display: none;
412
+ }
413
+ @keyframes LoadingHeading-module_fade-in-out__4e-Ds {
414
+ 0% {
415
+ opacity: 60%;
486
416
  }
487
-
488
- .Icon-module_iconRTL__16aXy {
489
- display: none;
417
+ 50% {
418
+ opacity: 100%;
490
419
  }
491
-
492
- [dir='rtl'] .Icon-module_iconRTL__16aXy {
493
- display: inherit;
420
+ 100% {
421
+ opacity: 60%;
494
422
  }
495
423
  }
496
-
497
424
  @layer kz-components {
498
- .Avatar-module_wrapper__elyMq {
499
- --avatar-x-y: 1.5rem;
500
-
501
- background: var(--color-gray-300);
502
- border-radius: 100%;
503
- box-sizing: border-box;
504
- overflow: hidden;
505
- align-items: center;
506
- display: flex;
507
- justify-content: center;
508
- width: var(--avatar-x-y);
509
- height: var(--avatar-x-y);
510
- box-shadow: var(--shadow-small-box-shadow);
511
- border: 3px solid var(--color-white);
425
+ .LoadingHeading-module_loadingHeading__tb9a- {
426
+ background-color: rgba(var(--color-gray-500-rgb, 135, 135, 146), 0.2);
512
427
  }
513
-
514
- .Avatar-module_small__xytAy {
515
- box-shadow: none;
516
- border: none;
517
-
518
- --avatar-x-y: 1.25rem;
428
+ .LoadingHeading-module_display-0__SXmNU {
429
+ height: var(--typography-display-0-font-size, 4.5rem);
430
+ margin-bottom: calc(var(--typography-display-0-line-height, 5.25rem) - var(--typography-display-0-font-size, 4.5rem));
519
431
  }
520
-
521
- .Avatar-module_medium__gDEnT {
522
- --avatar-x-y: 3rem;
432
+ .LoadingHeading-module_heading-1__09eOy {
433
+ height: var(--typography-heading-1-font-size, 2.125rem);
434
+ margin-bottom: calc(var(--typography-heading-1-line-height, 2.625rem) - var(--typography-heading-1-font-size, 2.125rem));
523
435
  }
524
-
525
- .Avatar-module_large__bexrc {
526
- --avatar-x-y: 4.5rem;
436
+ .LoadingHeading-module_heading-2__bxtDS {
437
+ height: var(--typography-heading-2-font-size, 1.75rem);
438
+ margin-bottom: calc(var(--typography-heading-2-line-height, 2.25rem) - var(--typography-heading-2-font-size, 1.75rem));
527
439
  }
528
-
529
- .Avatar-module_xlarge__ifASs {
530
- --avatar-x-y: 6rem;
440
+ .LoadingHeading-module_heading-3__h8MXB {
441
+ height: var(--typography-heading-3-font-size, 1.375rem);
442
+ margin-bottom: calc(var(--typography-heading-3-line-height, 1.875rem) - var(--typography-heading-3-font-size, 1.375rem));
531
443
  }
532
-
533
- .Avatar-module_xxlarge__g7bx6 {
534
- --avatar-x-y: 7.75rem;
444
+ .LoadingHeading-module_heading-4__VsC1Y {
445
+ height: var(--typography-heading-4-font-size, 1.125rem);
446
+ margin-bottom: calc(var(--typography-heading-4-line-height, 1.5rem) - var(--typography-heading-4-font-size, 1.125rem));
535
447
  }
536
-
537
- /* Themes */
538
- .Avatar-module_personal__bq8mM {
539
- background: var(--color-orange-100);
448
+ .LoadingHeading-module_heading-5__5arKU {
449
+ height: var(--typography-heading-5-font-size, 1rem);
450
+ margin-bottom: calc(var(--typography-heading-5-line-height, 1.5rem) - var(--typography-heading-5-font-size, 1rem));
540
451
  }
541
-
542
- .Avatar-module_otherUser__U2h5P {
543
- background: var(--color-gray-300);
452
+ .LoadingHeading-module_heading-6__sLipd {
453
+ height: var(--typography-heading-6-font-size, 0.875rem);
454
+ margin-bottom: calc(var(--typography-heading-6-line-height, 1.5rem) - var(--typography-heading-6-font-size, 0.875rem));
544
455
  }
545
-
546
- .Avatar-module_company__YVflF {
547
- border: 0;
548
- background: var(--color-white);
549
- padding: var(--spacing-6);
550
- border-radius: var(--border-solid-border-radius);
456
+ .LoadingHeading-module_isReversed__vz6G1 {
457
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.2);
551
458
  }
552
-
553
- .Avatar-module_small__xytAy.Avatar-module_company__YVflF {
554
- padding: 0;
459
+ .LoadingHeading-module_link__E7uU1 {
460
+ background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.2);
555
461
  }
556
-
557
- .Avatar-module_avatarImage__pHTCF {
558
- width: 100%;
559
- height: 100%;
560
- object-fit: cover;
462
+ .LoadingHeading-module_link__E7uU1.LoadingHeading-module_isReversed__vz6G1 {
463
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
561
464
  }
562
-
563
- .Avatar-module_avatarImage__pHTCF.Avatar-module_loading__2i5YE {
564
- display: none;
465
+ }
466
+ /** THIS IS AN AUTOGENERATED FILE **/
467
+ /** THIS IS AN AUTOGENERATED FILE **/
468
+ /** THIS IS AN AUTOGENERATED FILE **/
469
+ /** THIS IS AN AUTOGENERATED FILE **/
470
+ @layer kz-components {
471
+ .LoadingInput-module_loadingInput__65Cpe {
472
+ border-radius: var(--border-solid-border-radius, 7px);
473
+ top: calc(var(--spacing-md, 1.5rem) * 0.175);
565
474
  }
566
-
567
- .Avatar-module_companyAvatarImage__aGdNm {
568
- object-fit: contain;
569
- box-sizing: border-box;
570
- border-radius: var(--spacing-4);
475
+ .LoadingInput-module_isAnimated__hJtl- {
476
+ animation-name: LoadingInput-module_fade-in-out__XW4tT;
477
+ animation-duration: calc(var(--animation-duration-deliberate, 700ms) * 2);
478
+ animation-iteration-count: infinite;
571
479
  }
572
-
573
- .Avatar-module_fallbackIcon__RUoRR {
574
- color: rgb(var(--color-purple-800-rgb), 0.7);
575
- font-size: calc(var(--avatar-x-y) * 0.7);
480
+ }
481
+ @keyframes LoadingInput-module_fade-in-out__XW4tT {
482
+ 0% {
483
+ opacity: 60%;
576
484
  }
577
-
578
- .Avatar-module_xlarge__ifASs .Avatar-module_fallbackIcon__RUoRR,
579
- .Avatar-module_xxlarge__g7bx6 .Avatar-module_fallbackIcon__RUoRR {
580
- font-size: calc(var(--avatar-x-y) * 0.8);
485
+ 50% {
486
+ opacity: 100%;
581
487
  }
582
-
583
- .Avatar-module_initials__85roP {
584
- box-sizing: border-box;
585
- color: var(--color-purple-800);
586
- padding-left: 5px;
587
- padding-right: 5px;
588
- text-align: center;
589
- width: 100%;
590
- font-size: var(--typography-heading-3-font-size);
591
- font-family: var(--typography-heading-1-font-family);
592
- font-weight: var(--typography-heading-1-font-weight);
593
- letter-spacing: var(--typography-heading-3-letter-spacing);
488
+ 100% {
489
+ opacity: 60%;
594
490
  }
595
-
596
- .Avatar-module_initials__85roP.Avatar-module_longName__02zNk::before {
597
- content: none;
491
+ }
492
+ @layer kz-components {
493
+ .LoadingInput-module_loadingInput__65Cpe {
494
+ background-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
598
495
  }
599
-
600
- .Avatar-module_initials__85roP::before {
601
- content: '';
602
- display: block;
603
- margin-top: -0.001em;
496
+ .LoadingInput-module_isReversed__wyVkD {
497
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
604
498
  }
605
-
606
- .Avatar-module_wrapper__elyMq .Avatar-module_initials__85roP {
607
- text-decoration: none;
608
- speak-as: spell-out;
609
-
610
- /* to override materialize.css global styling in performance-ui,
611
- * which sets a border-bottom on abbr tags
612
- */
613
- border-bottom: none;
499
+ }
500
+ /** THIS IS AN AUTOGENERATED FILE **/
501
+ /** THIS IS AN AUTOGENERATED FILE **/
502
+ /** THIS IS AN AUTOGENERATED FILE **/
503
+ /** THIS IS AN AUTOGENERATED FILE **/
504
+ /** THIS IS AN AUTOGENERATED FILE **/
505
+ @layer kz-components {
506
+ .LoadingParagraph-module_loadingParagraph__-riGM {
507
+ border-radius: var(--border-solid-border-radius, 7px);
508
+ top: calc(var(--spacing-md, 1.5rem) * 0.175);
614
509
  }
615
-
616
- .Avatar-module_xlarge__ifASs .Avatar-module_initials__85roP,
617
- .Avatar-module_xxlarge__g7bx6 .Avatar-module_initials__85roP {
618
- font-size: var(--typography-heading-1-font-size);
619
- letter-spacing: var(--typography-heading-1-letter-spacing);
510
+ .LoadingParagraph-module_isAnimated__FWmuv {
511
+ animation-name: LoadingParagraph-module_fade-in-out__wzszr;
512
+ animation-duration: calc(var(--animation-duration-deliberate, 700ms) * 2);
513
+ animation-iteration-count: infinite;
620
514
  }
621
-
622
- .Avatar-module_medium__gDEnT .Avatar-module_initials__85roP {
623
- font-size: var(--typography-heading-5-font-size);
515
+ }
516
+ @keyframes LoadingParagraph-module_fade-in-out__wzszr {
517
+ 0% {
518
+ opacity: 60%;
624
519
  }
625
-
626
- .Avatar-module_small__xytAy .Avatar-module_initials__85roP {
627
- font-size: 0.5rem;
520
+ 50% {
521
+ opacity: 100%;
628
522
  }
629
-
630
- .Avatar-module_small__xytAy .Avatar-module_initials__85roP,
631
- .Avatar-module_medium__gDEnT .Avatar-module_initials__85roP {
632
- margin-bottom: -1px;
633
- font-weight: var(--typography-heading-5-font-weight);
634
- letter-spacing: var(--typography-heading-5-letter-spacing);
523
+ 100% {
524
+ opacity: 60%;
635
525
  }
636
526
  }
637
-
638
527
  @layer kz-components {
639
- .AvatarGroup-module_AvatarGroup__xftR5 {
640
- display: inline-flex;
641
- list-style: none;
642
- margin: 0;
643
- padding: 0;
528
+ .LoadingParagraph-module_loadingParagraph__-riGM {
529
+ background-color: var(--color-gray-300, #eaeaec);
530
+ height: calc(var(--spacing-md, 1.5rem) * 0.625);
531
+ margin-bottom: calc(var(--spacing-md, 1.5rem) * 0.5);
644
532
  }
645
-
646
- .AvatarGroup-module_AvatarCounter__0DCSW {
647
- direction: ltr;
648
- align-items: center;
649
- background: var(--color-gray-300);
650
- border: 3px solid var(--color-white);
651
- border-radius: 100%;
652
- box-sizing: border-box;
653
- box-shadow: var(--shadow-small-box-shadow);
654
- display: flex;
655
- justify-content: center;
656
- overflow: hidden;
657
- width: var(--avatar-x-y, 1.25rem);
658
- height: var(--avatar-x-y, 1.25rem);
659
- font-family: var(--typography-heading-5-font-family);
660
- font-weight: var(--typography-heading-5-font-weight);
661
- letter-spacing: var(--typography-heading-5-letter-spacing);
533
+ .LoadingParagraph-module_isReversed__hD0mn {
534
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
662
535
  }
663
-
664
- .AvatarGroup-module_AvatarGroupItem__s8miW + .AvatarGroup-module_AvatarGroupItem__s8miW {
665
- margin-inline-start: calc((var(--avatar-x-y)) / -2);
536
+ .LoadingParagraph-module_isLink__gVurw {
537
+ background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.2);
666
538
  }
667
-
668
- .AvatarGroup-module_small__zX0AT {
669
- --avatar-x-y: 1.25rem;
539
+ .LoadingParagraph-module_isLink__gVurw.LoadingParagraph-module_isReversed__hD0mn {
540
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
670
541
  }
671
-
672
- .AvatarGroup-module_small__zX0AT .AvatarGroup-module_AvatarCounter__0DCSW {
673
- box-shadow: none;
674
- border: none;
675
- font-size: 0.5rem;
542
+ .LoadingParagraph-module_isCentered__Pkyts {
543
+ margin-left: auto;
544
+ margin-right: auto;
676
545
  }
677
-
678
- .AvatarGroup-module_medium__0Vlk8 {
679
- --avatar-x-y: 3rem;
546
+ .LoadingParagraph-module_isInline__-mSTd {
547
+ display: inline-block;
548
+ margin-bottom: calc(var(--spacing-md, 1.5rem) * 0.35);
680
549
  }
681
-
682
- .AvatarGroup-module_medium__0Vlk8 .AvatarGroup-module_AvatarCounter__0DCSW {
683
- font-size: var(--typography-heading-5-font-size);
550
+ .LoadingParagraph-module_isInline__-mSTd + .LoadingParagraph-module_isInline__-mSTd {
551
+ margin-inline-start: var(--spacing-md, 1.5rem);
684
552
  }
685
-
686
- .AvatarGroup-module_large__c1ZHO {
687
- --avatar-x-y: 4.5rem;
553
+ .LoadingParagraph-module_noBottomMargin__9Qt0n {
554
+ margin-bottom: 0;
688
555
  }
689
-
690
- .AvatarGroup-module_large__c1ZHO .AvatarGroup-module_AvatarCounter__0DCSW {
691
- font-family: var(--typography-heading-3-font-family);
692
- font-size: var(--typography-heading-3-font-size);
693
- font-weight: var(--typography-heading-3-font-weight);
694
- letter-spacing: var(--typography-heading-3-letter-spacing);
556
+ .LoadingParagraph-module_inheritBaseline__RU-tb.LoadingParagraph-module_inheritBaseline__RU-tb {
557
+ position: static;
695
558
  }
696
559
  }
697
-
698
560
  @layer kz-components {
699
- .Badge-module_badge__ojFmb {
700
- border-radius: var(--spacing-12);
701
- color: var(--color-purple-800);
702
- display: inline-block;
703
- position: relative;
704
- font-family: var(--typography-paragraph-extra-small-font-family);
705
- font-size: var(--typography-paragraph-extra-small-font-size);
706
- font-weight: var(--typography-paragraph-bold-font-weight);
707
- letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
708
- line-height: var(--typography-paragraph-extra-small-line-height);
709
- padding: 1px var(--spacing-6);
710
- min-width: 8px;
711
- text-align: center;
712
- background-color: var(--badge-background-color, var(--color-gray-300));
713
- }
714
-
715
- .Badge-module_reversed__C5Glu {
716
- --badge-background-color: rgb(var(--color-white-rgb), 0.1);
717
-
718
- color: var(--color-white);
719
- }
720
-
721
- .Badge-module_reversed__C5Glu.Badge-module_active__18-He {
722
- --badge-background-color: var(--color-green-300);
723
-
724
- color: var(--color-purple-800);
725
- }
726
-
727
- .Badge-module_reversed__C5Glu.Badge-module_dark__SjUFf {
728
- --badge-background-color: var(--color-purple-700);
729
-
730
- color: var(--color-white);
731
- }
732
-
733
- .Badge-module_large__K10-T {
734
- display: inline-flex;
735
- justify-content: center;
736
- border-radius: var(--spacing-48);
737
- font-size: var(--typography-data-medium-font-size);
738
- line-height: var(--typography-data-medium-line-height);
739
- letter-spacing: var(--typography-data-medium-letter-spacing);
740
- padding: 2px 1.875rem;
741
- width: 24px;
742
- }
743
-
744
- .Badge-module_active__18-He {
745
- --badge-background-color: var(--color-blue-500);
746
-
747
- color: var(--color-white);
748
- }
749
-
750
- .Badge-module_dark__SjUFf {
751
- --badge-background-color: rgb(var(--color-purple-700-rgb), 0.1);
752
-
753
- color: var(--color-purple-800);
561
+ .VisuallyHidden-module_srOnly__tTjOK {
562
+ clip: rect(0 0 0 0);
563
+ clip-path: inset(50%);
564
+ height: 1px;
565
+ overflow: hidden;
566
+ position: absolute;
567
+ white-space: nowrap;
568
+ width: 1px;
754
569
  }
570
+ }
571
+ @layer kz-components {
572
+ .LoadingSpinner-module_loadingSpinner__Zc2mJ {
573
+ --loading-spinner-size: 48px;
755
574
 
756
- .Badge-module_dot__NIjOQ {
757
- --badge-background-color: var(--color-green-300);
758
-
759
- padding: var(--spacing-6);
760
- min-width: unset;
575
+ display: flex;
576
+ width: var(--loading-spinner-size);
577
+ height: var(--loading-spinner-size);
761
578
  }
762
579
 
763
- .Badge-module_dot__NIjOQ.Badge-module_large__K10-T {
764
- padding: 1.875rem;
765
- width: unset;
580
+ .LoadingSpinner-module_xs__y46OT {
581
+ --loading-spinner-size: 16px;
766
582
  }
767
583
 
768
- .Badge-module_animation__hYW2H {
769
- display: inherit;
584
+ .LoadingSpinner-module_sm__nkmIa {
585
+ --loading-spinner-size: 24px;
770
586
  }
771
587
 
772
- .Badge-module_animation__hYW2H .Badge-module_badge__ojFmb {
773
- --badge-duration-timing: (var(--animation-duration-slow) / 2)
774
- var(--animation-easing-function-ease-in);
775
-
776
- transition:
777
- transform var(--badge-duration-timing),
778
- background-color var(--badge-duration-timing);
779
- transform-origin: center;
780
- transform: scale3d(1, 1, 1);
588
+ .LoadingSpinner-module_md__OWP2- {
589
+ --loading-spinner-size: 48px;
781
590
  }
782
591
 
783
- .Badge-module_animationOn__6Seca .Badge-module_badge__ojFmb {
784
- transform: scale3d(1.35, 1.35, 1.35);
592
+ .LoadingSpinner-module_spinner__BKrX0 {
593
+ animation: LoadingSpinner-module_spinner__BKrX0 var(--animation-duration-deliberate)
594
+ var(--animation-easing-function-ease-in-out) infinite;
595
+ width: 100%;
596
+ height: 100%;
785
597
  }
598
+ }
786
599
 
787
- .Badge-module_animationOn__6Seca .Badge-module_badge__ojFmb.Badge-module_dark__SjUFf {
788
- --badge-background-color: rgb(var(--color-purple-700-rgb), 0.2);
600
+ @keyframes LoadingSpinner-module_spinner__BKrX0 {
601
+ 100% {
602
+ transform: rotate(360deg);
789
603
  }
604
+ }
790
605
 
791
- .Badge-module_animationOn__6Seca .Badge-module_badge__ojFmb.Badge-module_active__18-He {
792
- --badge-background-color: var(--color-blue-500);
793
-
794
- color: var(--color-white);
795
- }
796
- }
797
-
798
- @layer kz-components {
799
- .Brand-module_img__-kq3F {
800
- max-inline-size: 100%;
801
- display: flex;
802
- }
803
- }
804
-
805
606
  /** THIS IS AN AUTOGENERATED FILE **/
806
607
  /** THIS IS AN AUTOGENERATED FILE **/
807
608
  /** THIS IS AN AUTOGENERATED FILE **/
808
609
  /** THIS IS AN AUTOGENERATED FILE **/
610
+ /* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
611
+ /** THIS IS AN AUTOGENERATED FILE **/
612
+ /** THIS IS AN AUTOGENERATED FILE **/
613
+ /** THIS IS AN AUTOGENERATED FILE **/
614
+ /** THIS IS AN AUTOGENERATED FILE **/
615
+ /** THIS IS AN AUTOGENERATED FILE **/
616
+ /* 16px */
617
+ /* 16px */
618
+ /* 16px */
619
+ /*
620
+ Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
621
+ as this is what consumers would have expected when pulling them in a the time.
622
+ */
623
+ /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
624
+ /** THIS IS AN AUTOGENERATED FILE **/
625
+ /** THIS IS AN AUTOGENERATED FILE **/
626
+ /** THIS IS AN AUTOGENERATED FILE **/
627
+ /** THIS IS AN AUTOGENERATED FILE **/
628
+ /** THIS IS AN AUTOGENERATED FILE **/
629
+ /** THIS IS AN AUTOGENERATED FILE **/
630
+ /** THIS IS AN AUTOGENERATED FILE **/
631
+ /** THIS IS AN AUTOGENERATED FILE **/
632
+ /* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
633
+ /** THIS IS AN AUTOGENERATED FILE **/
634
+ /** THIS IS AN AUTOGENERATED FILE **/
635
+ /** THIS IS AN AUTOGENERATED FILE **/
636
+ /** THIS IS AN AUTOGENERATED FILE **/
637
+ /** THIS IS AN AUTOGENERATED FILE **/
638
+ /* 16px */
639
+ /* 16px */
640
+ /* 16px */
641
+ /*
642
+ Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
643
+ as this is what consumers would have expected when pulling them in a the time.
644
+ */
645
+ /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
809
646
  @layer kz-components {
810
- .LoadingGraphic-module_loadingGraphic__lg-gH {
647
+ .GenericButton-module_button__4iD8b {
648
+ appearance: none;
649
+ display: inline;
650
+ background: transparent;
651
+ color: inherit;
652
+ font: inherit;
653
+ margin: 0;
654
+ padding: 0;
655
+ border: none;
656
+ -webkit-font-smoothing: antialiased;
657
+ -moz-osx-font-smoothing: grayscale;
658
+ font-family: var(--typography-button-primary-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
659
+ font-weight: var(--typography-button-primary-font-weight, 500);
660
+ font-size: var(--typography-button-primary-font-size, 1.125rem);
661
+ line-height: var(--typography-button-primary-line-height, 1.5rem);
662
+ letter-spacing: var(--typography-button-primary-letter-spacing, normal);
663
+ display: inline-flex;
664
+ align-items: center;
665
+ box-sizing: border-box;
666
+ min-height: var(--spacing-xl, 3rem);
667
+ border: var(--border-solid-border-width, 2px) var(--border-solid-border-style, solid);
811
668
  border-radius: var(--border-solid-border-radius, 7px);
812
- top: calc(var(--spacing-md, 1.5rem) * 0.175);
669
+ position: relative;
670
+ text-align: left;
671
+ cursor: pointer;
672
+ overflow: visible;
813
673
  }
814
- .LoadingGraphic-module_isAnimated__tyskp {
815
- animation-name: LoadingGraphic-module_fade-in-out__VFBMB;
816
- animation-duration: calc(var(--animation-duration-deliberate, 700ms) * 2);
817
- animation-iteration-count: infinite;
674
+ [href].GenericButton-module_button__4iD8b {
675
+ text-decoration: none;
818
676
  }
819
- }
820
- @keyframes LoadingGraphic-module_fade-in-out__VFBMB {
821
- 0% {
822
- opacity: 60%;
677
+ .GenericButton-module_button__4iD8b:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active {
678
+ transform: translateY(1px);
823
679
  }
824
- 50% {
825
- opacity: 100%;
680
+ .GenericButton-module_button__4iD8b:focus {
681
+ outline: none;
826
682
  }
827
- 100% {
828
- opacity: 60%;
683
+ .GenericButton-module_button__4iD8b:focus-visible::after {
684
+ content: "";
685
+ position: absolute;
686
+ background: transparent;
687
+ border-color: var(--color-blue-500, #0168b3);
688
+ border-radius: var(--border-focus-ring-border-radius, 10px);
689
+ border-width: var(--border-focus-ring-border-width, 2px);
690
+ border-style: var(--border-focus-ring-border-style, solid);
691
+ inset: calc(-1 * calc(var(--border-focus-ring-border-width, 2px) * 2 + 1px));
829
692
  }
830
- }
831
- @layer kz-components {
832
- .LoadingGraphic-module_loadingGraphic__lg-gH {
833
- background-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
834
- border-radius: 50%;
693
+ .GenericButton-module_reversed__a2THM.GenericButton-module_button__4iD8b:focus-visible::after {
694
+ border-color: var(--color-blue-300, #73c0e8);
835
695
  }
836
- .LoadingGraphic-module_isReversed__HmZ4H {
837
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
696
+ .GenericButton-module_reversed__a2THM.GenericButton-module_button__4iD8b:focus-visible.GenericButton-module_disabled__0C-Cv::after, .GenericButton-module_reversed__a2THM.GenericButton-module_button__4iD8b:focus-visible.GenericButton-module_working__TCb0U::after {
697
+ border-color: var(--color-gray-400, #cdcdd0);
838
698
  }
839
- }
840
- /** THIS IS AN AUTOGENERATED FILE **/
841
- /** THIS IS AN AUTOGENERATED FILE **/
842
- /** THIS IS AN AUTOGENERATED FILE **/
843
- /** THIS IS AN AUTOGENERATED FILE **/
844
- /** THIS IS AN AUTOGENERATED FILE **/
845
- @layer kz-components {
846
- .LoadingHeading-module_loadingHeading__tb9a- {
847
- border-radius: var(--border-solid-border-radius, 7px);
848
- top: calc(var(--spacing-md, 1.5rem) * 0.175);
699
+ .GenericButton-module_disabled__0C-Cv.GenericButton-module_button__4iD8b, .GenericButton-module_working__TCb0U.GenericButton-module_button__4iD8b {
700
+ cursor: default;
701
+ opacity: 30%;
849
702
  }
850
- .LoadingHeading-module_isAnimated__cbstI {
851
- animation-name: LoadingHeading-module_fade-in-out__4e-Ds;
852
- animation-duration: calc(var(--animation-duration-deliberate, 700ms) * 2);
853
- animation-iteration-count: infinite;
703
+ .GenericButton-module_disabled__0C-Cv.GenericButton-module_button__4iD8b:focus-visible::after, .GenericButton-module_working__TCb0U.GenericButton-module_button__4iD8b:focus-visible::after {
704
+ border-color: var(--color-purple-800, #2f2438);
854
705
  }
855
- }
856
- @keyframes LoadingHeading-module_fade-in-out__4e-Ds {
857
- 0% {
858
- opacity: 60%;
706
+ .GenericButton-module_button__4iD8b .GenericButton-module_content__W0oHX {
707
+ height: 100%;
708
+ display: flex;
709
+ align-items: center;
710
+ padding: calc(var(--spacing-sm, 0.75rem) - var(--border-solid-border-width, 2px)) calc(var(--spacing-md, 1.5rem) - var(--border-solid-border-width, 2px));
859
711
  }
860
- 50% {
861
- opacity: 100%;
712
+ .GenericButton-module_default__acoEX {
713
+ background-color: var(--color-white, #ffffff);
714
+ border-color: var(--color-gray-500, #878792);
715
+ color: var(--color-purple-800, #2f2438);
862
716
  }
863
- 100% {
864
- opacity: 60%;
717
+ .GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
718
+ background-color: var(--color-gray-200, #f4f4f5);
719
+ border-color: var(--color-gray-600, #524e56);
865
720
  }
866
- }
867
- @layer kz-components {
868
- .LoadingHeading-module_loadingHeading__tb9a- {
869
- background-color: rgba(var(--color-gray-500-rgb, 135, 135, 146), 0.2);
721
+ .GenericButton-module_reversed__a2THM.GenericButton-module_default__acoEX {
722
+ background-color: transparent;
723
+ border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
724
+ color: var(--color-white, #ffffff);
870
725
  }
871
- .LoadingHeading-module_display-0__SXmNU {
872
- height: var(--typography-display-0-font-size, 4.5rem);
873
- margin-bottom: calc(var(--typography-display-0-line-height, 5.25rem) - var(--typography-display-0-font-size, 4.5rem));
726
+ .GenericButton-module_reversed__a2THM.GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
727
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
728
+ border-color: var(--color-white, #ffffff);
874
729
  }
875
- .LoadingHeading-module_heading-1__09eOy {
876
- height: var(--typography-heading-1-font-size, 2.125rem);
877
- margin-bottom: calc(var(--typography-heading-1-line-height, 2.625rem) - var(--typography-heading-1-font-size, 2.125rem));
730
+ .GenericButton-module_primary__w1I5r {
731
+ background-color: var(--color-blue-500, #0168b3);
732
+ border-color: var(--border-borderless-border-color, transparent);
733
+ color: var(--color-white, #ffffff);
878
734
  }
879
- .LoadingHeading-module_heading-2__bxtDS {
880
- height: var(--typography-heading-2-font-size, 1.75rem);
881
- margin-bottom: calc(var(--typography-heading-2-line-height, 2.25rem) - var(--typography-heading-2-font-size, 1.75rem));
735
+ .GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
736
+ background-color: var(--color-blue-600, #004970);
737
+ border-color: var(--border-borderless-border-color, transparent);
882
738
  }
883
- .LoadingHeading-module_heading-3__h8MXB {
884
- height: var(--typography-heading-3-font-size, 1.375rem);
885
- margin-bottom: calc(var(--typography-heading-3-line-height, 1.875rem) - var(--typography-heading-3-font-size, 1.375rem));
739
+ .GenericButton-module_reversed__a2THM.GenericButton-module_primary__w1I5r {
740
+ background-color: var(--color-green-300, #8fdbc7);
741
+ border-color: var(--border-borderless-border-color, transparent);
742
+ color: var(--color-purple-800, #2f2438);
886
743
  }
887
- .LoadingHeading-module_heading-4__VsC1Y {
888
- height: var(--typography-heading-4-font-size, 1.125rem);
889
- margin-bottom: calc(var(--typography-heading-4-line-height, 1.5rem) - var(--typography-heading-4-font-size, 1.125rem));
744
+ .GenericButton-module_reversed__a2THM.GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
745
+ background-color: var(--color-green-400, #5dcaad);
746
+ border-color: var(--border-borderless-border-color, transparent);
890
747
  }
891
- .LoadingHeading-module_heading-5__5arKU {
892
- height: var(--typography-heading-5-font-size, 1rem);
893
- margin-bottom: calc(var(--typography-heading-5-line-height, 1.5rem) - var(--typography-heading-5-font-size, 1rem));
748
+ .GenericButton-module_destructive__McUKn {
749
+ background-color: var(--color-red-500, #c93b55);
750
+ border-color: var(--border-borderless-border-color, transparent);
751
+ color: var(--color-white, #ffffff);
894
752
  }
895
- .LoadingHeading-module_heading-6__sLipd {
896
- height: var(--typography-heading-6-font-size, 0.875rem);
897
- margin-bottom: calc(var(--typography-heading-6-line-height, 1.5rem) - var(--typography-heading-6-font-size, 0.875rem));
753
+ .GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
754
+ background-color: var(--color-red-600, #a82433);
755
+ border-color: var(--border-borderless-border-color, transparent);
898
756
  }
899
- .LoadingHeading-module_isReversed__vz6G1 {
757
+ .GenericButton-module_reversed__a2THM.GenericButton-module_destructive__McUKn {
758
+ background-color: var(--color-red-300, #f597a8);
759
+ border-color: var(--border-borderless-border-color, transparent);
760
+ color: var(--color-purple-800, #2f2438);
761
+ }
762
+ .GenericButton-module_reversed__a2THM.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
763
+ background-color: var(--color-red-400, #e0707d);
764
+ border-color: var(--border-borderless-border-color, transparent);
765
+ }
766
+ .GenericButton-module_secondary__5Aefk {
767
+ font-family: var(--typography-button-secondary-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
768
+ font-weight: var(--typography-button-secondary-font-weight, 500);
769
+ font-size: var(--typography-button-secondary-font-size, 1rem);
770
+ line-height: var(--typography-button-secondary-line-height, 1.5rem);
771
+ letter-spacing: var(--typography-button-secondary-letter-spacing, normal);
772
+ background-color: transparent;
773
+ border-color: var(--border-borderless-border-color, transparent);
774
+ color: var(--color-blue-500, #0168b3);
775
+ }
776
+ .GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
777
+ background-color: var(--color-blue-100, #e6f6ff);
778
+ border-color: var(--border-borderless-border-color, transparent);
779
+ }
780
+ .GenericButton-module_secondary__5Aefk .GenericButton-module_content__W0oHX {
781
+ padding-left: calc(var(--spacing-sm, 0.75rem) - var(--border-solid-border-width, 2px));
782
+ padding-right: calc(var(--spacing-sm, 0.75rem) - var(--border-solid-border-width, 2px));
783
+ }
784
+ .GenericButton-module_reversed__a2THM.GenericButton-module_secondary__5Aefk {
785
+ border-color: var(--border-borderless-border-color, transparent);
786
+ color: var(--color-white, #ffffff);
787
+ }
788
+ .GenericButton-module_reversed__a2THM.GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
900
789
  background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.2);
790
+ border-color: var(--border-borderless-border-color, transparent);
901
791
  }
902
- .LoadingHeading-module_link__E7uU1 {
903
- background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.2);
792
+ .GenericButton-module_secondary__5Aefk.GenericButton-module_destructive__McUKn {
793
+ color: var(--color-red-600, #a82433);
904
794
  }
905
- .LoadingHeading-module_link__E7uU1.LoadingHeading-module_isReversed__vz6G1 {
906
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
795
+ .GenericButton-module_secondary__5Aefk.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_secondary__5Aefk.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_secondary__5Aefk.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
796
+ background-color: var(--color-red-100, #fdeaee);
797
+ border-color: var(--border-borderless-border-color, transparent);
798
+ }
799
+ .GenericButton-module_small__UI6g5 {
800
+ min-height: calc(var(--spacing-md, 1.5rem) * 5 / 3);
801
+ }
802
+ .GenericButton-module_small__UI6g5 .GenericButton-module_content__W0oHX {
803
+ padding-top: calc(var(--spacing-md, 1.5rem)/3 - var(--border-solid-border-width, 2px));
804
+ padding-bottom: calc(var(--spacing-md, 1.5rem)/3 - var(--border-solid-border-width, 2px));
907
805
  }
908
806
  }
909
807
  /** THIS IS AN AUTOGENERATED FILE **/
910
808
  /** THIS IS AN AUTOGENERATED FILE **/
911
809
  /** THIS IS AN AUTOGENERATED FILE **/
912
810
  /** THIS IS AN AUTOGENERATED FILE **/
913
- @layer kz-components {
914
- .LoadingInput-module_loadingInput__65Cpe {
915
- border-radius: var(--border-solid-border-radius, 7px);
916
- top: calc(var(--spacing-md, 1.5rem) * 0.175);
917
- }
918
- .LoadingInput-module_isAnimated__hJtl- {
919
- animation-name: LoadingInput-module_fade-in-out__XW4tT;
920
- animation-duration: calc(var(--animation-duration-deliberate, 700ms) * 2);
921
- animation-iteration-count: infinite;
922
- }
923
- }
924
- @keyframes LoadingInput-module_fade-in-out__XW4tT {
925
- 0% {
926
- opacity: 60%;
927
- }
928
- 50% {
929
- opacity: 100%;
930
- }
931
- 100% {
932
- opacity: 60%;
933
- }
934
- }
935
- @layer kz-components {
936
- .LoadingInput-module_loadingInput__65Cpe {
937
- background-color: rgba(var(--color-gray-600-rgb, 82, 78, 86), 0.1);
938
- }
939
- .LoadingInput-module_isReversed__wyVkD {
940
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
941
- }
942
- }
943
811
  /** THIS IS AN AUTOGENERATED FILE **/
944
812
  /** THIS IS AN AUTOGENERATED FILE **/
813
+ /* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
945
814
  /** THIS IS AN AUTOGENERATED FILE **/
946
815
  /** THIS IS AN AUTOGENERATED FILE **/
947
816
  /** THIS IS AN AUTOGENERATED FILE **/
817
+ /** THIS IS AN AUTOGENERATED FILE **/
818
+ /** THIS IS AN AUTOGENERATED FILE **/
819
+ /* 16px */
820
+ /* 16px */
821
+ /* 16px */
822
+ /*
823
+ Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
824
+ as this is what consumers would have expected when pulling them in a the time.
825
+ */
826
+ /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
948
827
  @layer kz-components {
949
- .LoadingParagraph-module_loadingParagraph__-riGM {
950
- border-radius: var(--border-solid-border-radius, 7px);
951
- top: calc(var(--spacing-md, 1.5rem) * 0.175);
952
- }
953
- .LoadingParagraph-module_isAnimated__FWmuv {
954
- animation-name: LoadingParagraph-module_fade-in-out__wzszr;
955
- animation-duration: calc(var(--animation-duration-deliberate, 700ms) * 2);
956
- animation-iteration-count: infinite;
957
- }
958
- }
959
- @keyframes LoadingParagraph-module_fade-in-out__wzszr {
960
- 0% {
961
- opacity: 60%;
962
- }
963
- 50% {
964
- opacity: 100%;
965
- }
966
- 100% {
967
- opacity: 60%;
968
- }
969
- }
970
- @layer kz-components {
971
- .LoadingParagraph-module_loadingParagraph__-riGM {
972
- background-color: var(--color-gray-300, #eaeaec);
973
- height: calc(var(--spacing-md, 1.5rem) * 0.625);
974
- margin-bottom: calc(var(--spacing-md, 1.5rem) * 0.5);
975
- }
976
- .LoadingParagraph-module_isReversed__hD0mn {
977
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
978
- }
979
- .LoadingParagraph-module_isLink__gVurw {
980
- background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.2);
981
- }
982
- .LoadingParagraph-module_isLink__gVurw.LoadingParagraph-module_isReversed__hD0mn {
983
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
984
- }
985
- .LoadingParagraph-module_isCentered__Pkyts {
986
- margin-left: auto;
987
- margin-right: auto;
988
- }
989
- .LoadingParagraph-module_isInline__-mSTd {
990
- display: inline-block;
991
- margin-bottom: calc(var(--spacing-md, 1.5rem) * 0.35);
992
- }
993
- .LoadingParagraph-module_isInline__-mSTd + .LoadingParagraph-module_isInline__-mSTd {
994
- margin-inline-start: var(--spacing-md, 1.5rem);
995
- }
996
- .LoadingParagraph-module_noBottomMargin__9Qt0n {
997
- margin-bottom: 0;
998
- }
999
- .LoadingParagraph-module_inheritBaseline__RU-tb.LoadingParagraph-module_inheritBaseline__RU-tb {
1000
- position: static;
1001
- }
1002
- }
1003
- @layer kz-components {
1004
- .VisuallyHidden-module_srOnly__tTjOK {
1005
- clip: rect(0 0 0 0);
1006
- clip-path: inset(50%);
1007
- height: 1px;
1008
- overflow: hidden;
1009
- position: absolute;
1010
- white-space: nowrap;
1011
- width: 1px;
828
+ .GenericButton-module_iconButton__R6zki {
829
+ width: var(--spacing-xl, 3rem);
830
+ border-color: var(--border-borderless-border-color, transparent);
1012
831
  }
1013
- }
1014
- @layer kz-components {
1015
- .LoadingSpinner-module_loadingSpinner__Zc2mJ {
1016
- --loading-spinner-size: 48px;
1017
-
1018
- display: flex;
1019
- width: var(--loading-spinner-size);
1020
- height: var(--loading-spinner-size);
832
+ .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
833
+ border-color: var(--border-borderless-border-color, transparent);
1021
834
  }
1022
-
1023
- .LoadingSpinner-module_xs__y46OT {
1024
- --loading-spinner-size: 16px;
835
+ .GenericButton-module_iconButton__R6zki .GenericButton-module_content__W0oHX {
836
+ justify-content: center;
837
+ width: 100%;
838
+ padding: 0;
1025
839
  }
1026
-
1027
- .LoadingSpinner-module_sm__nkmIa {
1028
- --loading-spinner-size: 24px;
840
+ .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_reversed__a2THM).GenericButton-module_default__acoEX {
841
+ background-color: transparent;
842
+ color: inherit;
1029
843
  }
1030
-
1031
- .LoadingSpinner-module_md__OWP2- {
1032
- --loading-spinner-size: 48px;
844
+ .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_reversed__a2THM).GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_reversed__a2THM).GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_reversed__a2THM).GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
845
+ background-color: var(--color-gray-200, #f4f4f5);
1033
846
  }
1034
-
1035
- .LoadingSpinner-module_spinner__BKrX0 {
1036
- animation: LoadingSpinner-module_spinner__BKrX0 var(--animation-duration-deliberate)
1037
- var(--animation-easing-function-ease-in-out) infinite;
1038
- width: 100%;
1039
- height: 100%;
847
+ .GenericButton-module_reversed__a2THM.GenericButton-module_iconButton__R6zki {
848
+ border-color: var(--border-borderless-border-color, transparent);
1040
849
  }
1041
- }
1042
-
1043
- @keyframes LoadingSpinner-module_spinner__BKrX0 {
1044
- 100% {
1045
- transform: rotate(360deg);
850
+ .GenericButton-module_reversed__a2THM.GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
851
+ border-color: var(--border-borderless-border-color, transparent);
1046
852
  }
1047
853
  }
1048
-
854
+ /** THIS IS AN AUTOGENERATED FILE **/
855
+ /** THIS IS AN AUTOGENERATED FILE **/
856
+ /** THIS IS AN AUTOGENERATED FILE **/
857
+ /** THIS IS AN AUTOGENERATED FILE **/
1049
858
  /** THIS IS AN AUTOGENERATED FILE **/
1050
859
  /** THIS IS AN AUTOGENERATED FILE **/
1051
860
  /** THIS IS AN AUTOGENERATED FILE **/
@@ -1064,8 +873,69 @@
1064
873
  as this is what consumers would have expected when pulling them in a the time.
1065
874
  */
1066
875
  /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
1067
- /** THIS IS AN AUTOGENERATED FILE **/
1068
- /** THIS IS AN AUTOGENERATED FILE **/
876
+ @layer kz-components {
877
+ .GenericButton-module_circleButton__Xx40k {
878
+ width: 40px;
879
+ height: 40px;
880
+ min-height: auto;
881
+ margin: 0 var(--spacing-4);
882
+ border-radius: 50%;
883
+ }
884
+ .GenericButton-module_circleButton__Xx40k:not(:disabled):focus-visible::after {
885
+ border-radius: 50%;
886
+ }
887
+ .GenericButton-module_circleButton__Xx40k .GenericButton-module_content__W0oHX {
888
+ height: auto;
889
+ color: var(--color-blue-500, #0168b3);
890
+ }
891
+ .GenericButton-module_reversed__a2THM.GenericButton-module_circleButton__Xx40k .GenericButton-module_content__W0oHX {
892
+ color: var(--color-white, #ffffff);
893
+ }
894
+ .GenericButton-module_paginationLink__OFSyY {
895
+ font-weight: var(--typography-paragraph-body-font-weight, 400);
896
+ font-size: var(--typography-button-secondary-font-size, 1rem);
897
+ border-color: var(--border-borderless-border-color, transparent);
898
+ }
899
+ .GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
900
+ background-color: var(--color-blue-100, #e6f6ff);
901
+ border-color: var(--border-borderless-border-color, transparent);
902
+ }
903
+ .GenericButton-module_paginationLink__OFSyY .GenericButton-module_content__W0oHX {
904
+ justify-content: center;
905
+ width: 100%;
906
+ padding: 0;
907
+ }
908
+ .GenericButton-module_reversed__a2THM.GenericButton-module_paginationLink__OFSyY {
909
+ border-color: var(--border-borderless-border-color, transparent);
910
+ }
911
+ .GenericButton-module_reversed__a2THM.GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
912
+ border-color: var(--border-borderless-border-color, transparent);
913
+ }
914
+ .GenericButton-module_isPaginationLinkActive__V-aCE {
915
+ background-color: var(--color-blue-500, #0168b3);
916
+ border-color: var(--border-borderless-border-color, transparent);
917
+ cursor: initial;
918
+ }
919
+ .GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
920
+ background-color: var(--color-blue-500, #0168b3);
921
+ border-color: var(--border-borderless-border-color, transparent);
922
+ }
923
+ .GenericButton-module_isPaginationLinkActive__V-aCE:not(:disabled):active {
924
+ transform: unset;
925
+ }
926
+ .GenericButton-module_isPaginationLinkActive__V-aCE .GenericButton-module_content__W0oHX {
927
+ color: var(--color-white, #ffffff);
928
+ }
929
+ .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE {
930
+ background-color: var(--color-white, #ffffff);
931
+ }
932
+ .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
933
+ background-color: var(--color-white, #ffffff);
934
+ }
935
+ .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE .GenericButton-module_content__W0oHX {
936
+ color: var(--color-purple-800, #2f2438);
937
+ }
938
+ }
1069
939
  /** THIS IS AN AUTOGENERATED FILE **/
1070
940
  /** THIS IS AN AUTOGENERATED FILE **/
1071
941
  /** THIS IS AN AUTOGENERATED FILE **/
@@ -1087,654 +957,341 @@
1087
957
  */
1088
958
  /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
1089
959
  @layer kz-components {
1090
- .GenericButton-module_button__4iD8b {
1091
- appearance: none;
1092
- display: inline;
1093
- background: transparent;
1094
- color: inherit;
1095
- font: inherit;
1096
- margin: 0;
1097
- padding: 0;
1098
- border: none;
1099
- -webkit-font-smoothing: antialiased;
1100
- -moz-osx-font-smoothing: grayscale;
1101
- font-family: var(--typography-button-primary-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1102
- font-weight: var(--typography-button-primary-font-weight, 500);
1103
- font-size: var(--typography-button-primary-font-size, 1.125rem);
1104
- line-height: var(--typography-button-primary-line-height, 1.5rem);
1105
- letter-spacing: var(--typography-button-primary-letter-spacing, normal);
1106
- display: inline-flex;
1107
- align-items: center;
1108
- box-sizing: border-box;
1109
- min-height: var(--spacing-xl, 3rem);
1110
- border: var(--border-solid-border-width, 2px) var(--border-solid-border-style, solid);
1111
- border-radius: var(--border-solid-border-radius, 7px);
1112
- position: relative;
1113
- text-align: left;
1114
- cursor: pointer;
1115
- overflow: visible;
1116
- }
1117
- [href].GenericButton-module_button__4iD8b {
1118
- text-decoration: none;
960
+ .GenericButton-module_directionalLink__WlcEB {
961
+ border: var(--border-solid-border-width, 2px) solid var(--color-blue-300, #73c0e8);
1119
962
  }
1120
- .GenericButton-module_button__4iD8b:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active {
1121
- transform: translateY(1px);
963
+ .GenericButton-module_directionalLink__WlcEB:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_directionalLink__WlcEB:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_directionalLink__WlcEB:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
964
+ background-color: var(--color-blue-100, #e6f6ff);
965
+ border-color: var(--color-blue-400, #008bd6);
1122
966
  }
1123
- .GenericButton-module_button__4iD8b:focus {
1124
- outline: none;
967
+ .GenericButton-module_directionalLink__WlcEB:disabled {
968
+ border-color: var(--color-blue-300, #73c0e8);
1125
969
  }
1126
- .GenericButton-module_button__4iD8b:focus-visible::after {
1127
- content: "";
1128
- position: absolute;
1129
- background: transparent;
1130
- border-color: var(--color-blue-500, #0168b3);
1131
- border-radius: var(--border-focus-ring-border-radius, 10px);
1132
- border-width: var(--border-focus-ring-border-width, 2px);
1133
- border-style: var(--border-focus-ring-border-style, solid);
1134
- inset: calc(-1 * calc(var(--border-focus-ring-border-width, 2px) * 2 + 1px));
970
+ .GenericButton-module_reversed__a2THM.GenericButton-module_directionalLink__WlcEB:disabled {
971
+ border-color: var(--color-white, #ffffff);
1135
972
  }
1136
- .GenericButton-module_reversed__a2THM.GenericButton-module_button__4iD8b:focus-visible::after {
1137
- border-color: var(--color-blue-300, #73c0e8);
973
+ }
974
+ @layer kz-components {
975
+ .GenericButton-module_container__yL4Un {
976
+ display: inline-block;
1138
977
  }
1139
- .GenericButton-module_reversed__a2THM.GenericButton-module_button__4iD8b:focus-visible.GenericButton-module_disabled__0C-Cv::after, .GenericButton-module_reversed__a2THM.GenericButton-module_button__4iD8b:focus-visible.GenericButton-module_working__TCb0U::after {
1140
- border-color: var(--color-gray-400, #cdcdd0);
978
+ .GenericButton-module_label__Xsw7e {
979
+ line-height: 1;
1141
980
  }
1142
- .GenericButton-module_disabled__0C-Cv.GenericButton-module_button__4iD8b, .GenericButton-module_working__TCb0U.GenericButton-module_button__4iD8b {
1143
- cursor: default;
1144
- opacity: 30%;
981
+ .GenericButton-module_label__Xsw7e:not(:first-child) {
982
+ margin-inline-start: 0.5em;
1145
983
  }
1146
- .GenericButton-module_disabled__0C-Cv.GenericButton-module_button__4iD8b:focus-visible::after, .GenericButton-module_working__TCb0U.GenericButton-module_button__4iD8b:focus-visible::after {
1147
- border-color: var(--color-purple-800, #2f2438);
984
+ .GenericButton-module_label__Xsw7e:not(:last-child) {
985
+ margin-inline-end: 0.5em;
1148
986
  }
1149
- .GenericButton-module_button__4iD8b .GenericButton-module_content__W0oHX {
1150
- height: 100%;
987
+ .GenericButton-module_fullWidth__vcJtY {
988
+ width: 100%;
989
+ }
990
+ .GenericButton-module_fullWidth__vcJtY .GenericButton-module_button__4iD8b {
1151
991
  display: flex;
1152
- align-items: center;
1153
- padding: calc(var(--spacing-sm, 0.75rem) - var(--border-solid-border-width, 2px)) calc(var(--spacing-md, 1.5rem) - var(--border-solid-border-width, 2px));
992
+ width: 100%;
993
+ justify-content: center;
1154
994
  }
1155
- .GenericButton-module_default__acoEX {
1156
- background-color: var(--color-white, #ffffff);
1157
- border-color: var(--color-gray-500, #878792);
1158
- color: var(--color-purple-800, #2f2438);
995
+ .GenericButton-module_fullWidth__vcJtY .GenericButton-module_content__W0oHX {
996
+ justify-content: center;
1159
997
  }
1160
- .GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1161
- background-color: var(--color-gray-200, #f4f4f5);
1162
- border-color: var(--color-gray-600, #524e56);
998
+ .GenericButton-module_iconWrapper__46Kfo {
999
+ height: 20px;
1000
+ align-self: flex-start;
1163
1001
  }
1164
- .GenericButton-module_reversed__a2THM.GenericButton-module_default__acoEX {
1165
- background-color: transparent;
1166
- border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
1167
- color: var(--color-white, #ffffff);
1002
+ .GenericButton-module_additionalContentWrapper__EsEOu {
1003
+ display: inherit;
1168
1004
  }
1169
- .GenericButton-module_reversed__a2THM.GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1170
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
1171
- border-color: var(--color-white, #ffffff);
1005
+ .GenericButton-module_additionalContentWrapper__EsEOu:not(:last-child) {
1006
+ margin-inline-end: 0.5em;
1172
1007
  }
1173
- .GenericButton-module_primary__w1I5r {
1174
- background-color: var(--color-blue-500, #0168b3);
1175
- border-color: var(--border-borderless-border-color, transparent);
1176
- color: var(--color-white, #ffffff);
1008
+ .GenericButton-module_loadingSpinner__C3RhA svg {
1009
+ height: 100%;
1177
1010
  }
1178
- .GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1179
- background-color: var(--color-blue-600, #004970);
1180
- border-color: var(--border-borderless-border-color, transparent);
1011
+ .GenericButton-module_centeredLoadingSpinner__hE6kA {
1012
+ position: absolute;
1013
+ left: 0;
1014
+ right: 0;
1015
+ display: flex;
1016
+ justify-content: center;
1181
1017
  }
1182
- .GenericButton-module_reversed__a2THM.GenericButton-module_primary__w1I5r {
1183
- background-color: var(--color-green-300, #8fdbc7);
1184
- border-color: var(--border-borderless-border-color, transparent);
1185
- color: var(--color-purple-800, #2f2438);
1018
+ .GenericButton-module_hidden__Z9q5L {
1019
+ visibility: hidden;
1186
1020
  }
1187
- .GenericButton-module_reversed__a2THM.GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_primary__w1I5r:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1188
- background-color: var(--color-green-400, #5dcaad);
1189
- border-color: var(--border-borderless-border-color, transparent);
1021
+ }
1022
+ /** THIS IS AN AUTOGENERATED FILE **/
1023
+ /** THIS IS AN AUTOGENERATED FILE **/
1024
+ @layer tokens, normalize, reset, kz-components;
1025
+ @layer reset {
1026
+ .Heading-module_heading__Gq6I8 {
1027
+ margin: 0;
1190
1028
  }
1191
- .GenericButton-module_destructive__McUKn {
1192
- background-color: var(--color-red-500, #c93b55);
1193
- border-color: var(--border-borderless-border-color, transparent);
1194
- color: var(--color-white, #ffffff);
1029
+ }
1030
+ @layer kz-components {
1031
+ .Heading-module_display-0__yZ7rx {
1032
+ font-family: var(--typography-display-0-font-family, "Tiempos Headline", Georgia, serif);
1033
+ font-weight: var(--typography-display-0-font-weight, 800);
1034
+ font-size: var(--typography-display-0-font-size, 4.5rem);
1035
+ line-height: var(--typography-display-0-line-height, 5.25rem);
1036
+ letter-spacing: var(--typography-display-0-letter-spacing, 0em);
1195
1037
  }
1196
- .GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1197
- background-color: var(--color-red-600, #a82433);
1198
- border-color: var(--border-borderless-border-color, transparent);
1038
+ .Heading-module_composable-header-title__mqQVh {
1039
+ font-family: var(--typography-display-0-font-family, "Tiempos Headline", Georgia, serif);
1040
+ font-weight: 500;
1041
+ font-size: var(--typography-heading-1-font-size, 2.125rem);
1042
+ line-height: var(--typography-heading-1-line-height, 2.625rem);
1043
+ letter-spacing: var(--typography-heading-1-letter-spacing, normal);
1199
1044
  }
1200
- .GenericButton-module_reversed__a2THM.GenericButton-module_destructive__McUKn {
1201
- background-color: var(--color-red-300, #f597a8);
1202
- border-color: var(--border-borderless-border-color, transparent);
1203
- color: var(--color-purple-800, #2f2438);
1045
+ .Heading-module_heading-1__PbAcw {
1046
+ font-family: var(--typography-heading-1-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1047
+ font-weight: var(--typography-heading-1-font-weight, 500);
1048
+ font-size: var(--typography-heading-1-font-size, 2.125rem);
1049
+ line-height: var(--typography-heading-1-line-height, 2.625rem);
1050
+ letter-spacing: var(--typography-heading-1-letter-spacing, normal);
1204
1051
  }
1205
- .GenericButton-module_reversed__a2THM.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1206
- background-color: var(--color-red-400, #e0707d);
1207
- border-color: var(--border-borderless-border-color, transparent);
1052
+ .Heading-module_heading-2__Ovpfe {
1053
+ font-family: var(--typography-heading-2-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1054
+ font-weight: var(--typography-heading-2-font-weight, 600);
1055
+ font-size: var(--typography-heading-2-font-size, 1.75rem);
1056
+ line-height: var(--typography-heading-2-line-height, 2.25rem);
1057
+ letter-spacing: var(--typography-heading-2-letter-spacing, normal);
1208
1058
  }
1209
- .GenericButton-module_secondary__5Aefk {
1210
- font-family: var(--typography-button-secondary-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1211
- font-weight: var(--typography-button-secondary-font-weight, 500);
1212
- font-size: var(--typography-button-secondary-font-size, 1rem);
1213
- line-height: var(--typography-button-secondary-line-height, 1.5rem);
1214
- letter-spacing: var(--typography-button-secondary-letter-spacing, normal);
1215
- background-color: transparent;
1216
- border-color: var(--border-borderless-border-color, transparent);
1217
- color: var(--color-blue-500, #0168b3);
1059
+ .Heading-module_heading-3__S4Pb1 {
1060
+ font-family: var(--typography-heading-3-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1061
+ font-weight: var(--typography-heading-3-font-weight, 600);
1062
+ font-size: var(--typography-heading-3-font-size, 1.375rem);
1063
+ line-height: var(--typography-heading-3-line-height, 1.875rem);
1064
+ letter-spacing: var(--typography-heading-3-letter-spacing, normal);
1218
1065
  }
1219
- .GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1220
- background-color: var(--color-blue-100, #e6f6ff);
1221
- border-color: var(--border-borderless-border-color, transparent);
1066
+ .Heading-module_heading-4__IIiwi {
1067
+ font-family: var(--typography-heading-4-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1068
+ font-weight: var(--typography-heading-4-font-weight, 600);
1069
+ font-size: var(--typography-heading-4-font-size, 1.125rem);
1070
+ line-height: var(--typography-heading-4-line-height, 1.5rem);
1071
+ letter-spacing: var(--typography-heading-4-letter-spacing, normal);
1222
1072
  }
1223
- .GenericButton-module_secondary__5Aefk .GenericButton-module_content__W0oHX {
1224
- padding-left: calc(var(--spacing-sm, 0.75rem) - var(--border-solid-border-width, 2px));
1225
- padding-right: calc(var(--spacing-sm, 0.75rem) - var(--border-solid-border-width, 2px));
1073
+ .Heading-module_heading-5__QFtpN {
1074
+ font-family: var(--typography-heading-5-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1075
+ font-weight: var(--typography-heading-5-font-weight, 600);
1076
+ font-size: var(--typography-heading-5-font-size, 1rem);
1077
+ line-height: var(--typography-heading-5-line-height, 1.5rem);
1078
+ letter-spacing: var(--typography-heading-5-letter-spacing, normal);
1226
1079
  }
1227
- .GenericButton-module_reversed__a2THM.GenericButton-module_secondary__5Aefk {
1228
- border-color: var(--border-borderless-border-color, transparent);
1080
+ .Heading-module_heading-6__kts-- {
1081
+ font-family: var(--typography-heading-6-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1082
+ font-weight: var(--typography-heading-6-font-weight, 600);
1083
+ font-size: var(--typography-heading-6-font-size, 0.875rem);
1084
+ line-height: var(--typography-heading-6-line-height, 1.5rem);
1085
+ letter-spacing: var(--typography-heading-6-letter-spacing, normal);
1086
+ }
1087
+ .Heading-module_dark__IqcnT {
1088
+ color: var(--color-purple-800, #2f2438);
1089
+ opacity: 100%;
1090
+ }
1091
+ .Heading-module_dark-reduced-opacity__i-JqI {
1092
+ color: var(--color-purple-800, #2f2438);
1093
+ opacity: 70%;
1094
+ }
1095
+ .Heading-module_white__mUqRT {
1229
1096
  color: var(--color-white, #ffffff);
1097
+ opacity: 100%;
1230
1098
  }
1231
- .GenericButton-module_reversed__a2THM.GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_secondary__5Aefk:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1232
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.2);
1233
- border-color: var(--border-borderless-border-color, transparent);
1099
+ .Heading-module_white-reduced-opacity__y1wq8 {
1100
+ color: var(--color-white, #ffffff);
1101
+ opacity: 80%;
1234
1102
  }
1235
- .GenericButton-module_secondary__5Aefk.GenericButton-module_destructive__McUKn {
1236
- color: var(--color-red-600, #a82433);
1103
+ .Heading-module_positive__mBS79.Heading-module_small__qupiD {
1104
+ color: var(--color-green-600, #2c7d67);
1237
1105
  }
1238
- .GenericButton-module_secondary__5Aefk.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_secondary__5Aefk.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_secondary__5Aefk.GenericButton-module_destructive__McUKn:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1239
- background-color: var(--color-red-100, #fdeaee);
1240
- border-color: var(--border-borderless-border-color, transparent);
1106
+ .Heading-module_positive__mBS79.Heading-module_large__cB-V3 {
1107
+ color: var(--color-green-500, #3f9a86);
1241
1108
  }
1242
- .GenericButton-module_small__UI6g5 {
1243
- min-height: calc(var(--spacing-md, 1.5rem) * 5 / 3);
1109
+ .Heading-module_negative__Q4byH.Heading-module_small__qupiD {
1110
+ color: var(--color-red-600, #a82433);
1244
1111
  }
1245
- .GenericButton-module_small__UI6g5 .GenericButton-module_content__W0oHX {
1246
- padding-top: calc(var(--spacing-md, 1.5rem)/3 - var(--border-solid-border-width, 2px));
1247
- padding-bottom: calc(var(--spacing-md, 1.5rem)/3 - var(--border-solid-border-width, 2px));
1112
+ .Heading-module_negative__Q4byH.Heading-module_large__cB-V3 {
1113
+ color: var(--color-red-500, #c93b55);
1248
1114
  }
1249
1115
  }
1250
1116
  /** THIS IS AN AUTOGENERATED FILE **/
1251
1117
  /** THIS IS AN AUTOGENERATED FILE **/
1252
- /** THIS IS AN AUTOGENERATED FILE **/
1253
- /** THIS IS AN AUTOGENERATED FILE **/
1254
- /** THIS IS AN AUTOGENERATED FILE **/
1255
- /** THIS IS AN AUTOGENERATED FILE **/
1256
- /* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
1257
- /** THIS IS AN AUTOGENERATED FILE **/
1258
- /** THIS IS AN AUTOGENERATED FILE **/
1259
- /** THIS IS AN AUTOGENERATED FILE **/
1260
- /** THIS IS AN AUTOGENERATED FILE **/
1261
- /** THIS IS AN AUTOGENERATED FILE **/
1262
- /* 16px */
1263
- /* 16px */
1264
- /* 16px */
1265
- /*
1266
- Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
1267
- as this is what consumers would have expected when pulling them in a the time.
1268
- */
1269
- /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
1270
1118
  @layer kz-components {
1271
- .GenericButton-module_iconButton__R6zki {
1272
- width: var(--spacing-xl, 3rem);
1273
- border-color: var(--border-borderless-border-color, transparent);
1274
- }
1275
- .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1276
- border-color: var(--border-borderless-border-color, transparent);
1119
+ .Text-module_text__Byo7R {
1120
+ --icon-vertical-align: text-bottom;
1121
+ margin: 0;
1277
1122
  }
1278
- .GenericButton-module_iconButton__R6zki .GenericButton-module_content__W0oHX {
1279
- justify-content: center;
1280
- width: 100%;
1281
- padding: 0;
1123
+ .Text-module_text__Byo7R strong {
1124
+ font-weight: var(--typography-paragraph-bold-font-weight, 600);
1282
1125
  }
1283
- .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_reversed__a2THM).GenericButton-module_default__acoEX {
1284
- background-color: transparent;
1285
- color: inherit;
1126
+ .Text-module_intro-lede__ENE72 {
1127
+ font-family: var(--typography-paragraph-intro-lede-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1128
+ font-weight: var(--typography-paragraph-intro-lede-font-weight, 400);
1129
+ font-size: var(--typography-paragraph-intro-lede-font-size, 1.25rem);
1130
+ line-height: var(--typography-paragraph-intro-lede-line-height, 1.875rem);
1131
+ letter-spacing: var(--typography-paragraph-intro-lede-letter-spacing, 0);
1286
1132
  }
1287
- .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_reversed__a2THM).GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_reversed__a2THM).GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_iconButton__R6zki:not(.GenericButton-module_reversed__a2THM).GenericButton-module_default__acoEX:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1288
- background-color: var(--color-gray-200, #f4f4f5);
1133
+ .Text-module_body__cO-XH {
1134
+ font-family: var(--typography-paragraph-body-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1135
+ font-weight: var(--typography-paragraph-body-font-weight, 400);
1136
+ font-size: var(--typography-paragraph-body-font-size, 1rem);
1137
+ line-height: var(--typography-paragraph-body-line-height, 1.5rem);
1138
+ letter-spacing: var(--typography-paragraph-body-letter-spacing, normal);
1289
1139
  }
1290
- .GenericButton-module_reversed__a2THM.GenericButton-module_iconButton__R6zki {
1291
- border-color: var(--border-borderless-border-color, transparent);
1140
+ .Text-module_small__uZNGn {
1141
+ font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1142
+ font-weight: var(--typography-paragraph-small-font-weight, 400);
1143
+ font-size: var(--typography-paragraph-small-font-size, 0.875rem);
1144
+ line-height: var(--typography-paragraph-small-line-height, 1.125rem);
1145
+ letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
1292
1146
  }
1293
- .GenericButton-module_reversed__a2THM.GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_iconButton__R6zki:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1294
- border-color: var(--border-borderless-border-color, transparent);
1147
+ .Text-module_extra-small__3g9eN {
1148
+ font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1149
+ font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
1150
+ font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
1151
+ line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
1152
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
1295
1153
  }
1296
- }
1297
- /** THIS IS AN AUTOGENERATED FILE **/
1298
- /** THIS IS AN AUTOGENERATED FILE **/
1299
- /** THIS IS AN AUTOGENERATED FILE **/
1300
- /** THIS IS AN AUTOGENERATED FILE **/
1301
- /** THIS IS AN AUTOGENERATED FILE **/
1302
- /** THIS IS AN AUTOGENERATED FILE **/
1303
- /** THIS IS AN AUTOGENERATED FILE **/
1304
- /** THIS IS AN AUTOGENERATED FILE **/
1305
- /* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
1306
- /** THIS IS AN AUTOGENERATED FILE **/
1307
- /** THIS IS AN AUTOGENERATED FILE **/
1308
- /** THIS IS AN AUTOGENERATED FILE **/
1309
- /** THIS IS AN AUTOGENERATED FILE **/
1310
- /** THIS IS AN AUTOGENERATED FILE **/
1311
- /* 16px */
1312
- /* 16px */
1313
- /* 16px */
1314
- /*
1315
- Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
1316
- as this is what consumers would have expected when pulling them in a the time.
1317
- */
1318
- /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
1319
- @layer kz-components {
1320
- .GenericButton-module_circleButton__Xx40k {
1321
- width: 40px;
1322
- height: 40px;
1323
- min-height: auto;
1324
- margin: 0 var(--spacing-4);
1325
- border-radius: 50%;
1154
+ .Text-module_dark__-jDSk {
1155
+ color: var(--color-purple-800, #2f2438);
1156
+ opacity: 100%;
1326
1157
  }
1327
- .GenericButton-module_circleButton__Xx40k:not(:disabled):focus-visible::after {
1328
- border-radius: 50%;
1158
+ .Text-module_dark-reduced-opacity__18nLo {
1159
+ color: var(--color-purple-800, #2f2438);
1160
+ opacity: 70%;
1329
1161
  }
1330
- .GenericButton-module_circleButton__Xx40k .GenericButton-module_content__W0oHX {
1331
- height: auto;
1332
- color: var(--color-blue-500, #0168b3);
1162
+ .Text-module_white__-yVD0 {
1163
+ color: var(--color-white, #ffffff);
1164
+ opacity: 100%;
1333
1165
  }
1334
- .GenericButton-module_reversed__a2THM.GenericButton-module_circleButton__Xx40k .GenericButton-module_content__W0oHX {
1166
+ .Text-module_white-reduced-opacity__i0veZ {
1335
1167
  color: var(--color-white, #ffffff);
1168
+ opacity: 80%;
1336
1169
  }
1337
- .GenericButton-module_paginationLink__OFSyY {
1338
- font-weight: var(--typography-paragraph-body-font-weight, 400);
1339
- font-size: var(--typography-button-secondary-font-size, 1rem);
1340
- border-color: var(--border-borderless-border-color, transparent);
1170
+ .Text-module_positive__e-IKh {
1171
+ color: var(--color-green-600, #2c7d67);
1341
1172
  }
1342
- .GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1343
- background-color: var(--color-blue-100, #e6f6ff);
1344
- border-color: var(--border-borderless-border-color, transparent);
1173
+ .Text-module_negative__agbge {
1174
+ color: var(--color-red-600, #a82433);
1345
1175
  }
1346
- .GenericButton-module_paginationLink__OFSyY .GenericButton-module_content__W0oHX {
1347
- justify-content: center;
1176
+ }
1177
+ @layer kz-components {
1178
+ .BrandMoment-module_body__mZWwj {
1348
1179
  width: 100%;
1349
- padding: 0;
1350
- }
1351
- .GenericButton-module_reversed__a2THM.GenericButton-module_paginationLink__OFSyY {
1352
- border-color: var(--border-borderless-border-color, transparent);
1353
- }
1354
- .GenericButton-module_reversed__a2THM.GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_paginationLink__OFSyY:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1355
- border-color: var(--border-borderless-border-color, transparent);
1180
+ min-height: 100vh;
1181
+ display: flex;
1182
+ flex-direction: column;
1183
+ align-items: center;
1184
+ background-color: var(--brand-moment-background-color);
1356
1185
  }
1357
- .GenericButton-module_isPaginationLinkActive__V-aCE {
1358
- background-color: var(--color-blue-500, #0168b3);
1359
- border-color: var(--border-borderless-border-color, transparent);
1360
- cursor: initial;
1186
+
1187
+ /** @deprecated */
1188
+ .BrandMoment-module_positive__BUY8h {
1189
+ --brand-moment-background-color: var(--color-green-100);
1361
1190
  }
1362
- .GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1363
- background-color: var(--color-blue-500, #0168b3);
1364
- border-color: var(--border-borderless-border-color, transparent);
1191
+
1192
+ .BrandMoment-module_negative__dGxqH {
1193
+ --brand-moment-background-color: var(--color-red-100);
1365
1194
  }
1366
- .GenericButton-module_isPaginationLinkActive__V-aCE:not(:disabled):active {
1367
- transform: unset;
1195
+
1196
+ /** end @deprecated */
1197
+ .BrandMoment-module_informative__RDHFy {
1198
+ --brand-moment-background-color: var(--color-blue-100);
1368
1199
  }
1369
- .GenericButton-module_isPaginationLinkActive__V-aCE .GenericButton-module_content__W0oHX {
1370
- color: var(--color-white, #ffffff);
1200
+
1201
+ .BrandMoment-module_success__i-7Fl {
1202
+ --brand-moment-background-color: var(--color-green-100);
1371
1203
  }
1372
- .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE {
1373
- background-color: var(--color-white, #ffffff);
1204
+
1205
+ .BrandMoment-module_warning__iuyDr {
1206
+ --brand-moment-background-color: var(--color-red-100);
1374
1207
  }
1375
- .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1376
- background-color: var(--color-white, #ffffff);
1208
+
1209
+ .BrandMoment-module_container__OlSoH {
1210
+ max-width: var(--layout-content-max-width);
1211
+ margin: 0 auto;
1212
+ padding: 0 var(--spacing-24);
1377
1213
  }
1378
- .GenericButton-module_reversed__a2THM.GenericButton-module_isPaginationLinkActive__V-aCE .GenericButton-module_content__W0oHX {
1379
- color: var(--color-purple-800, #2f2438);
1214
+
1215
+ @media (width >= 1080px) {
1216
+ .BrandMoment-module_container__OlSoH {
1217
+ padding: 0 var(--spacing-64);
1218
+ }
1380
1219
  }
1381
- }
1382
- /** THIS IS AN AUTOGENERATED FILE **/
1383
- /** THIS IS AN AUTOGENERATED FILE **/
1384
- /** THIS IS AN AUTOGENERATED FILE **/
1385
- /** THIS IS AN AUTOGENERATED FILE **/
1386
- /** THIS IS AN AUTOGENERATED FILE **/
1387
- /** THIS IS AN AUTOGENERATED FILE **/
1388
- /* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
1389
- /** THIS IS AN AUTOGENERATED FILE **/
1390
- /** THIS IS AN AUTOGENERATED FILE **/
1391
- /** THIS IS AN AUTOGENERATED FILE **/
1392
- /** THIS IS AN AUTOGENERATED FILE **/
1393
- /** THIS IS AN AUTOGENERATED FILE **/
1394
- /* 16px */
1395
- /* 16px */
1396
- /* 16px */
1397
- /*
1398
- Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
1399
- as this is what consumers would have expected when pulling them in a the time.
1400
- */
1401
- /* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
1402
- @layer kz-components {
1403
- .GenericButton-module_directionalLink__WlcEB {
1404
- border: var(--border-solid-border-width, 2px) solid var(--color-blue-300, #73c0e8);
1220
+
1221
+ @media (width >= 1366px) {
1222
+ .BrandMoment-module_container__OlSoH {
1223
+ padding: 0 var(--spacing-80);
1224
+ }
1405
1225
  }
1406
- .GenericButton-module_directionalLink__WlcEB:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):hover, .GenericButton-module_directionalLink__WlcEB:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):active, .GenericButton-module_directionalLink__WlcEB:not(.GenericButton-module_disabled__0C-Cv, .GenericButton-module_working__TCb0U):focus-visible {
1407
- background-color: var(--color-blue-100, #e6f6ff);
1408
- border-color: var(--color-blue-400, #008bd6);
1226
+
1227
+ .BrandMoment-module_header__sKrWW {
1228
+ inline-size: 100%;
1229
+ margin-block-end: var(--spacing-24);
1409
1230
  }
1410
- .GenericButton-module_directionalLink__WlcEB:disabled {
1411
- border-color: var(--color-blue-300, #73c0e8);
1231
+
1232
+ .BrandMoment-module_main__sTJzS {
1233
+ flex: 1 0 auto;
1234
+ display: flex;
1235
+ align-items: center;
1236
+ margin-block-end: var(--spacing-64);
1412
1237
  }
1413
- .GenericButton-module_reversed__a2THM.GenericButton-module_directionalLink__WlcEB:disabled {
1414
- border-color: var(--color-white, #ffffff);
1238
+
1239
+ .BrandMoment-module_mainInner__rdzJ- {
1240
+ display: grid;
1241
+ grid-template-columns: 1fr;
1242
+ gap: var(--spacing-48) var(--spacing-32);
1243
+ align-items: center;
1415
1244
  }
1416
- }
1417
- @layer kz-components {
1418
- .GenericButton-module_container__yL4Un {
1419
- display: inline-block;
1245
+
1246
+ @media (width >= 768px) {
1247
+ .BrandMoment-module_mainInner__rdzJ- {
1248
+ row-gap: var(--spacing-64);
1249
+ }
1420
1250
  }
1421
- .GenericButton-module_label__Xsw7e {
1422
- line-height: 1;
1251
+
1252
+ @media (width >= 1080px) {
1253
+ .BrandMoment-module_mainInner__rdzJ- {
1254
+ grid-template-columns: 1fr 1fr;
1255
+ }
1423
1256
  }
1424
- .GenericButton-module_label__Xsw7e:not(:first-child) {
1425
- margin-inline-start: 0.5em;
1257
+
1258
+ @media (width >= 1366px) {
1259
+ .BrandMoment-module_mainInner__rdzJ- {
1260
+ column-gap: var(--spacing-80);
1261
+ }
1426
1262
  }
1427
- .GenericButton-module_label__Xsw7e:not(:last-child) {
1428
- margin-inline-end: 0.5em;
1263
+
1264
+ .BrandMoment-module_left__4j1kF {
1265
+ display: flex;
1266
+ justify-content: center;
1429
1267
  }
1430
- .GenericButton-module_fullWidth__vcJtY {
1268
+
1269
+ .BrandMoment-module_leftInner__41Xmt {
1431
1270
  width: 100%;
1271
+ max-width: 525px;
1432
1272
  }
1433
- .GenericButton-module_fullWidth__vcJtY .GenericButton-module_button__4iD8b {
1273
+
1274
+ .BrandMoment-module_right__Jly5e {
1275
+ flex-direction: column;
1434
1276
  display: flex;
1435
- width: 100%;
1436
1277
  justify-content: center;
1278
+ align-items: center;
1437
1279
  }
1438
- .GenericButton-module_fullWidth__vcJtY .GenericButton-module_content__W0oHX {
1439
- justify-content: center;
1280
+
1281
+ .BrandMoment-module_rightInner__Q9Fb1 {
1282
+ max-width: 543px;
1440
1283
  }
1441
- .GenericButton-module_iconWrapper__46Kfo {
1442
- height: 20px;
1443
- align-self: flex-start;
1284
+
1285
+ .BrandMoment-module_subtitle__ga5-B {
1286
+ margin-bottom: var(--spacing-12);
1444
1287
  }
1445
- .GenericButton-module_additionalContentWrapper__EsEOu {
1446
- display: inherit;
1288
+
1289
+ .BrandMoment-module_title__D5j2N {
1290
+ margin-bottom: var(--spacing-32);
1447
1291
  }
1448
- .GenericButton-module_additionalContentWrapper__EsEOu:not(:last-child) {
1449
- margin-inline-end: 0.5em;
1450
- }
1451
- .GenericButton-module_loadingSpinner__C3RhA svg {
1452
- height: 100%;
1453
- }
1454
- .GenericButton-module_centeredLoadingSpinner__hE6kA {
1455
- position: absolute;
1456
- left: 0;
1457
- right: 0;
1458
- display: flex;
1459
- justify-content: center;
1460
- }
1461
- .GenericButton-module_hidden__Z9q5L {
1462
- visibility: hidden;
1463
- }
1464
- }
1465
- /** THIS IS AN AUTOGENERATED FILE **/
1466
- /** THIS IS AN AUTOGENERATED FILE **/
1467
- @layer tokens, normalize, reset, kz-components;
1468
- @layer reset {
1469
- .Heading-module_heading__Gq6I8 {
1470
- margin: 0;
1471
- }
1472
- }
1473
- @layer kz-components {
1474
- .Heading-module_display-0__yZ7rx {
1475
- font-family: var(--typography-display-0-font-family, "Tiempos Headline", Georgia, serif);
1476
- font-weight: var(--typography-display-0-font-weight, 800);
1477
- font-size: var(--typography-display-0-font-size, 4.5rem);
1478
- line-height: var(--typography-display-0-line-height, 5.25rem);
1479
- letter-spacing: var(--typography-display-0-letter-spacing, 0em);
1480
- }
1481
- .Heading-module_composable-header-title__mqQVh {
1482
- font-family: var(--typography-display-0-font-family, "Tiempos Headline", Georgia, serif);
1483
- font-weight: 500;
1484
- font-size: var(--typography-heading-1-font-size, 2.125rem);
1485
- line-height: var(--typography-heading-1-line-height, 2.625rem);
1486
- letter-spacing: var(--typography-heading-1-letter-spacing, normal);
1487
- }
1488
- .Heading-module_heading-1__PbAcw {
1489
- font-family: var(--typography-heading-1-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1490
- font-weight: var(--typography-heading-1-font-weight, 500);
1491
- font-size: var(--typography-heading-1-font-size, 2.125rem);
1492
- line-height: var(--typography-heading-1-line-height, 2.625rem);
1493
- letter-spacing: var(--typography-heading-1-letter-spacing, normal);
1494
- }
1495
- .Heading-module_heading-2__Ovpfe {
1496
- font-family: var(--typography-heading-2-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1497
- font-weight: var(--typography-heading-2-font-weight, 600);
1498
- font-size: var(--typography-heading-2-font-size, 1.75rem);
1499
- line-height: var(--typography-heading-2-line-height, 2.25rem);
1500
- letter-spacing: var(--typography-heading-2-letter-spacing, normal);
1501
- }
1502
- .Heading-module_heading-3__S4Pb1 {
1503
- font-family: var(--typography-heading-3-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1504
- font-weight: var(--typography-heading-3-font-weight, 600);
1505
- font-size: var(--typography-heading-3-font-size, 1.375rem);
1506
- line-height: var(--typography-heading-3-line-height, 1.875rem);
1507
- letter-spacing: var(--typography-heading-3-letter-spacing, normal);
1508
- }
1509
- .Heading-module_heading-4__IIiwi {
1510
- font-family: var(--typography-heading-4-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1511
- font-weight: var(--typography-heading-4-font-weight, 600);
1512
- font-size: var(--typography-heading-4-font-size, 1.125rem);
1513
- line-height: var(--typography-heading-4-line-height, 1.5rem);
1514
- letter-spacing: var(--typography-heading-4-letter-spacing, normal);
1515
- }
1516
- .Heading-module_heading-5__QFtpN {
1517
- font-family: var(--typography-heading-5-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1518
- font-weight: var(--typography-heading-5-font-weight, 600);
1519
- font-size: var(--typography-heading-5-font-size, 1rem);
1520
- line-height: var(--typography-heading-5-line-height, 1.5rem);
1521
- letter-spacing: var(--typography-heading-5-letter-spacing, normal);
1522
- }
1523
- .Heading-module_heading-6__kts-- {
1524
- font-family: var(--typography-heading-6-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1525
- font-weight: var(--typography-heading-6-font-weight, 600);
1526
- font-size: var(--typography-heading-6-font-size, 0.875rem);
1527
- line-height: var(--typography-heading-6-line-height, 1.5rem);
1528
- letter-spacing: var(--typography-heading-6-letter-spacing, normal);
1529
- }
1530
- .Heading-module_dark__IqcnT {
1531
- color: var(--color-purple-800, #2f2438);
1532
- opacity: 100%;
1533
- }
1534
- .Heading-module_dark-reduced-opacity__i-JqI {
1535
- color: var(--color-purple-800, #2f2438);
1536
- opacity: 70%;
1537
- }
1538
- .Heading-module_white__mUqRT {
1539
- color: var(--color-white, #ffffff);
1540
- opacity: 100%;
1541
- }
1542
- .Heading-module_white-reduced-opacity__y1wq8 {
1543
- color: var(--color-white, #ffffff);
1544
- opacity: 80%;
1545
- }
1546
- .Heading-module_positive__mBS79.Heading-module_small__qupiD {
1547
- color: var(--color-green-600, #2c7d67);
1548
- }
1549
- .Heading-module_positive__mBS79.Heading-module_large__cB-V3 {
1550
- color: var(--color-green-500, #3f9a86);
1551
- }
1552
- .Heading-module_negative__Q4byH.Heading-module_small__qupiD {
1553
- color: var(--color-red-600, #a82433);
1554
- }
1555
- .Heading-module_negative__Q4byH.Heading-module_large__cB-V3 {
1556
- color: var(--color-red-500, #c93b55);
1557
- }
1558
- }
1559
- /** THIS IS AN AUTOGENERATED FILE **/
1560
- /** THIS IS AN AUTOGENERATED FILE **/
1561
- @layer kz-components {
1562
- .Text-module_text__Byo7R {
1563
- --icon-vertical-align: text-bottom;
1564
- margin: 0;
1565
- }
1566
- .Text-module_text__Byo7R strong {
1567
- font-weight: var(--typography-paragraph-bold-font-weight, 600);
1568
- }
1569
- .Text-module_intro-lede__ENE72 {
1570
- font-family: var(--typography-paragraph-intro-lede-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1571
- font-weight: var(--typography-paragraph-intro-lede-font-weight, 400);
1572
- font-size: var(--typography-paragraph-intro-lede-font-size, 1.25rem);
1573
- line-height: var(--typography-paragraph-intro-lede-line-height, 1.875rem);
1574
- letter-spacing: var(--typography-paragraph-intro-lede-letter-spacing, 0);
1575
- }
1576
- .Text-module_body__cO-XH {
1577
- font-family: var(--typography-paragraph-body-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1578
- font-weight: var(--typography-paragraph-body-font-weight, 400);
1579
- font-size: var(--typography-paragraph-body-font-size, 1rem);
1580
- line-height: var(--typography-paragraph-body-line-height, 1.5rem);
1581
- letter-spacing: var(--typography-paragraph-body-letter-spacing, normal);
1582
- }
1583
- .Text-module_small__uZNGn {
1584
- font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1585
- font-weight: var(--typography-paragraph-small-font-weight, 400);
1586
- font-size: var(--typography-paragraph-small-font-size, 0.875rem);
1587
- line-height: var(--typography-paragraph-small-line-height, 1.125rem);
1588
- letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
1589
- }
1590
- .Text-module_extra-small__3g9eN {
1591
- font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
1592
- font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
1593
- font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
1594
- line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
1595
- letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
1596
- }
1597
- .Text-module_dark__-jDSk {
1598
- color: var(--color-purple-800, #2f2438);
1599
- opacity: 100%;
1600
- }
1601
- .Text-module_dark-reduced-opacity__18nLo {
1602
- color: var(--color-purple-800, #2f2438);
1603
- opacity: 70%;
1604
- }
1605
- .Text-module_white__-yVD0 {
1606
- color: var(--color-white, #ffffff);
1607
- opacity: 100%;
1608
- }
1609
- .Text-module_white-reduced-opacity__i0veZ {
1610
- color: var(--color-white, #ffffff);
1611
- opacity: 80%;
1612
- }
1613
- .Text-module_positive__e-IKh {
1614
- color: var(--color-green-600, #2c7d67);
1615
- }
1616
- .Text-module_negative__agbge {
1617
- color: var(--color-red-600, #a82433);
1618
- }
1619
- }
1620
- @layer kz-components {
1621
- .BrandMoment-module_body__mZWwj {
1622
- width: 100%;
1623
- min-height: 100vh;
1624
- display: flex;
1625
- flex-direction: column;
1626
- align-items: center;
1627
- background-color: var(--brand-moment-background-color);
1628
- }
1629
-
1630
- /** @deprecated */
1631
- .BrandMoment-module_positive__BUY8h {
1632
- --brand-moment-background-color: var(--color-green-100);
1633
- }
1634
-
1635
- .BrandMoment-module_negative__dGxqH {
1636
- --brand-moment-background-color: var(--color-red-100);
1637
- }
1638
-
1639
- /** end @deprecated */
1640
- .BrandMoment-module_informative__RDHFy {
1641
- --brand-moment-background-color: var(--color-blue-100);
1642
- }
1643
-
1644
- .BrandMoment-module_success__i-7Fl {
1645
- --brand-moment-background-color: var(--color-green-100);
1646
- }
1647
-
1648
- .BrandMoment-module_warning__iuyDr {
1649
- --brand-moment-background-color: var(--color-red-100);
1650
- }
1651
-
1652
- .BrandMoment-module_container__OlSoH {
1653
- max-width: var(--layout-content-max-width);
1654
- margin: 0 auto;
1655
- padding: 0 var(--spacing-24);
1656
- }
1657
-
1658
- @media (width >= 1080px) {
1659
- .BrandMoment-module_container__OlSoH {
1660
- padding: 0 var(--spacing-64);
1661
- }
1662
- }
1663
-
1664
- @media (width >= 1366px) {
1665
- .BrandMoment-module_container__OlSoH {
1666
- padding: 0 var(--spacing-80);
1667
- }
1668
- }
1669
-
1670
- .BrandMoment-module_header__sKrWW {
1671
- inline-size: 100%;
1672
- margin-block-end: var(--spacing-24);
1673
- }
1674
-
1675
- .BrandMoment-module_main__sTJzS {
1676
- flex: 1 0 auto;
1677
- display: flex;
1678
- align-items: center;
1679
- margin-block-end: var(--spacing-64);
1680
- }
1681
-
1682
- .BrandMoment-module_mainInner__rdzJ- {
1683
- display: grid;
1684
- grid-template-columns: 1fr;
1685
- gap: var(--spacing-48) var(--spacing-32);
1686
- align-items: center;
1687
- }
1688
-
1689
- @media (width >= 768px) {
1690
- .BrandMoment-module_mainInner__rdzJ- {
1691
- row-gap: var(--spacing-64);
1692
- }
1693
- }
1694
-
1695
- @media (width >= 1080px) {
1696
- .BrandMoment-module_mainInner__rdzJ- {
1697
- grid-template-columns: 1fr 1fr;
1698
- }
1699
- }
1700
-
1701
- @media (width >= 1366px) {
1702
- .BrandMoment-module_mainInner__rdzJ- {
1703
- column-gap: var(--spacing-80);
1704
- }
1705
- }
1706
-
1707
- .BrandMoment-module_left__4j1kF {
1708
- display: flex;
1709
- justify-content: center;
1710
- }
1711
-
1712
- .BrandMoment-module_leftInner__41Xmt {
1713
- width: 100%;
1714
- max-width: 525px;
1715
- }
1716
-
1717
- .BrandMoment-module_right__Jly5e {
1718
- flex-direction: column;
1719
- display: flex;
1720
- justify-content: center;
1721
- align-items: center;
1722
- }
1723
-
1724
- .BrandMoment-module_rightInner__Q9Fb1 {
1725
- max-width: 543px;
1726
- }
1727
-
1728
- .BrandMoment-module_subtitle__ga5-B {
1729
- margin-bottom: var(--spacing-12);
1730
- }
1731
-
1732
- .BrandMoment-module_title__D5j2N {
1733
- margin-bottom: var(--spacing-32);
1734
- }
1735
-
1736
- .BrandMoment-module_textBody__oNXGM {
1737
- margin-bottom: var(--spacing-32);
1292
+
1293
+ .BrandMoment-module_textBody__oNXGM {
1294
+ margin-bottom: var(--spacing-32);
1738
1295
  }
1739
1296
 
1740
1297
  .BrandMoment-module_secondaryAction__t5zMV {
@@ -11020,248 +10577,518 @@
11020
10577
  display: none;
11021
10578
  }
11022
10579
  }
11023
- .TitleBlock-module_navigationTabsNav__cggvg {
11024
- height: 100%;
10580
+ .TitleBlock-module_navigationTabsNav__cggvg {
10581
+ height: 100%;
10582
+ }
10583
+ .TitleBlock-module_navigationTabsList__spzUx {
10584
+ list-style: none;
10585
+ padding: 0;
10586
+ margin: 0;
10587
+ display: flex;
10588
+ height: 100%;
10589
+ }
10590
+ .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
10591
+ display: none;
10592
+ pointer-events: none;
10593
+ }
10594
+ @media (max-width: 767px) {
10595
+ .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
10596
+ display: block;
10597
+ position: absolute;
10598
+ top: 3.5625rem;
10599
+ width: 3.75rem;
10600
+ height: 3.75rem;
10601
+ background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));
10602
+ z-index: 1;
10603
+ }
10604
+ }
10605
+ @media (max-width: 767px) {
10606
+ .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
10607
+ background: linear-gradient(0deg, var(--color-gray-100, #f9f9f9), rgba(var(--color-gray-100-rgb, 249, 249, 249), 0));
10608
+ }
10609
+ }
10610
+ @media (max-width: 767px) {
10611
+ .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
10612
+ background: linear-gradient(0deg, var(--color-blue-200, #bde2f5), rgba(var(--color-blue-200-rgb, 189, 226, 245), 0));
10613
+ }
10614
+ }
10615
+ .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
10616
+ transform: rotate(90deg);
10617
+ left: 0;
10618
+ top: calc(100% - 4.5rem);
10619
+ }
10620
+ @media (max-width: 767px) {
10621
+ .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
10622
+ top: calc(100% - 3.75rem);
10623
+ }
10624
+ }
10625
+ .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc {
10626
+ transform: rotate(-90deg);
10627
+ right: 0;
10628
+ top: calc(100% - 4.5rem);
10629
+ }
10630
+ @media (max-width: 767px) {
10631
+ .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc {
10632
+ top: calc(100% - 3.75rem);
10633
+ }
10634
+ }
10635
+ .TitleBlock-module_secondaryActionsContainer__-4q0l {
10636
+ display: flex;
10637
+ align-items: flex-start;
10638
+ justify-content: flex-end;
10639
+ padding: calc(1.5rem / 2) 0;
10640
+ margin-inline-end: 0;
10641
+ margin-inline-start: 2.25rem;
10642
+ }
10643
+ .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
10644
+ color: var(--color-blue-500, #0168b3);
10645
+ }
10646
+ @media (max-width: calc(1080px - 1px)) {
10647
+ .TitleBlock-module_secondaryActionsContainer__-4q0l {
10648
+ display: none;
10649
+ }
10650
+ }
10651
+ .TitleBlock-module_breadcrumb__lVNKz {
10652
+ appearance: none;
10653
+ display: inline;
10654
+ background: transparent;
10655
+ color: inherit;
10656
+ font: inherit;
10657
+ margin: 0;
10658
+ padding: 0;
10659
+ border: none;
10660
+ cursor: pointer;
10661
+ display: flex;
10662
+ position: absolute;
10663
+ align-items: center;
10664
+ top: 50%;
10665
+ transform: translateY(-50%);
10666
+ text-decoration: none;
10667
+ inset-inline-end: auto;
10668
+ inset-inline-start: calc(-48px - 1.5rem);
10669
+ align-self: normal;
10670
+ }
10671
+ .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82 {
10672
+ text-decoration: underline;
10673
+ }
10674
+ .TitleBlock-module_breadcrumb__lVNKz:focus {
10675
+ outline: none;
10676
+ }
10677
+ .TitleBlock-module_breadcrumb__lVNKz:focus::after {
10678
+ content: "";
10679
+ position: absolute;
10680
+ background: transparent;
10681
+ border-color: var(--color-blue-200, #bde2f5);
10682
+ border-radius: 50%;
10683
+ border-width: var(--border-focus-ring-border-width, 2px);
10684
+ border-style: var(--border-focus-ring-border-style, solid);
10685
+ inset: calc(-2 * var(--border-focus-ring-border-width, 2px) - var(--border-focus-ring-border-width, 2px));
10686
+ }
10687
+ @media only screen and (max-width: 1644px) {
10688
+ .TitleBlock-module_breadcrumb__lVNKz {
10689
+ position: relative;
10690
+ transform: translateY(0);
10691
+ margin-inline: 0 var(--spacing-12);
10692
+ inset-inline-end: auto;
10693
+ inset-inline-start: 0;
10694
+ }
10695
+ }
10696
+ @media (max-width: calc(1080px - 1px)) {
10697
+ .TitleBlock-module_breadcrumb__lVNKz {
10698
+ display: none;
10699
+ }
10700
+ }
10701
+ .TitleBlock-module_breadcrumbTextLink__ngx82 {
10702
+ clip: rect(0 0 0 0);
10703
+ clip-path: inset(50%);
10704
+ height: 1px;
10705
+ overflow: hidden;
10706
+ position: absolute;
10707
+ white-space: nowrap;
10708
+ width: 1px;
10709
+ inset-inline-end: auto;
10710
+ inset-inline-start: -3rem;
10711
+ position: absolute;
10712
+ }
10713
+ @media (max-width: 1644px) {
10714
+ .TitleBlock-module_breadcrumbTextLink__ngx82 {
10715
+ inset-inline-end: auto;
10716
+ inset-inline-start: 1.5rem;
10717
+ }
10718
+ }
10719
+ @media only screen and (min-width: 1644px) {
10720
+ .TitleBlock-module_breadcrumbTextLink__ngx82 {
10721
+ inset-inline-end: auto;
10722
+ inset-inline-start: calc(48px - 1.5rem);
10723
+ }
10724
+ }
10725
+ .TitleBlock-module_breadcrumbTextLink__ngx82:hover, .TitleBlock-module_breadcrumbTextLink__ngx82:focus, .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82, .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_breadcrumbTextLink__ngx82 {
10726
+ clip: initial;
10727
+ clip-path: initial;
10728
+ height: initial;
10729
+ overflow: initial;
10730
+ position: initial;
10731
+ white-space: initial;
10732
+ width: initial;
10733
+ position: absolute;
10734
+ display: block;
10735
+ animation: TitleBlock-module_slide-fade__o5TnP 0.4s;
10736
+ }
10737
+ [dir=rtl] .TitleBlock-module_breadcrumbTextLink__ngx82:hover, [dir=rtl] .TitleBlock-module_breadcrumbTextLink__ngx82:focus, [dir=rtl] .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82, [dir=rtl] .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_breadcrumbTextLink__ngx82 {
10738
+ animation: TitleBlock-module_reverse-slide-fade__LZZ98 0.4s;
10739
+ }
10740
+ .TitleBlock-module_breadcrumbText__vDi0k {
10741
+ margin-inline-start: var(--spacing-xl, 3rem);
10742
+ white-space: nowrap;
10743
+ font-family: var(--typography-heading-5-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
10744
+ font-weight: var(--typography-heading-5-font-weight, 600);
10745
+ font-size: var(--typography-heading-5-font-size, 1rem);
10746
+ line-height: var(--typography-heading-5-line-height, 1.5rem);
10747
+ letter-spacing: var(--typography-heading-5-letter-spacing, normal);
10748
+ }
10749
+ .TitleBlock-module_breadcrumb__lVNKz,
10750
+ .TitleBlock-module_breadcrumb__lVNKz:hover,
10751
+ .TitleBlock-module_breadcrumbText__vDi0k {
10752
+ color: var(--color-white, #ffffff);
10753
+ }
10754
+ .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz,
10755
+ .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:hover,
10756
+ .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:hover,
10757
+ .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumbText__vDi0k,
10758
+ .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumbText__vDi0k {
10759
+ color: var(--color-purple-800, #2f2438);
10760
+ }
10761
+ .TitleBlock-module_circle__68z-T {
10762
+ flex: 0 0 48px;
10763
+ box-sizing: border-box;
10764
+ width: 48px;
10765
+ height: 48px;
10766
+ color: var(--color-white, #ffffff);
10767
+ border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.5);
10768
+ border-width: 2px;
10769
+ border-radius: 50%;
10770
+ border-style: solid;
10771
+ display: flex;
10772
+ align-items: center;
10773
+ justify-content: center;
10774
+ transition: background-color 0.3s ease, transform 0.3s ease;
10775
+ }
10776
+ .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T {
10777
+ transform: scale(1.1);
10778
+ border-color: var(--color-white, #ffffff);
10779
+ color: var(--color-white, #ffffff);
10780
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
10781
+ }
10782
+ .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_circle__68z-T {
10783
+ color: var(--color-blue-500, #0168b3);
10784
+ border-color: var(--color-blue-300, #73c0e8);
10785
+ border-width: 3px;
10786
+ }
10787
+ .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T {
10788
+ border-color: var(--color-blue-500, #0168b3);
10789
+ color: var(--color-blue-500, #0168b3);
10790
+ background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);
10791
+ }
10792
+ /* stylelint-enable no-descending-specificity */
10793
+ }
10794
+ @keyframes TitleBlock-module_slide-fade__o5TnP {
10795
+ 0% {
10796
+ display: none;
10797
+ opacity: 0%;
10798
+ }
10799
+ 1% {
10800
+ display: block;
10801
+ opacity: 0%;
10802
+ transform: translateX(-30px);
10803
+ }
10804
+ 100% {
10805
+ opacity: 100%;
10806
+ transform: translateX(0);
10807
+ }
10808
+ }
10809
+ @keyframes TitleBlock-module_reverse-slide-fade__LZZ98 {
10810
+ 0% {
10811
+ display: none;
10812
+ opacity: 0%;
10813
+ }
10814
+ 1% {
10815
+ display: block;
10816
+ opacity: 0%;
10817
+ transform: translateX(30px);
10818
+ }
10819
+ 100% {
10820
+ opacity: 100%;
10821
+ transform: translateX(0);
11025
10822
  }
11026
- .TitleBlock-module_navigationTabsList__spzUx {
11027
- list-style: none;
11028
- padding: 0;
11029
- margin: 0;
10823
+ }
10824
+ /** THIS IS AN AUTOGENERATED FILE **/
10825
+ /** THIS IS AN AUTOGENERATED FILE **/
10826
+ /** THIS IS AN AUTOGENERATED FILE **/
10827
+ /** THIS IS AN AUTOGENERATED FILE **/
10828
+ /** THIS IS AN AUTOGENERATED FILE **/
10829
+ @layer kz-components {
10830
+ .NavigationTabs-module_container__0wwWu {
10831
+ display: flex;
10832
+ -webkit-font-smoothing: antialiased;
10833
+ -moz-osx-font-smoothing: grayscale;
10834
+ }
10835
+ .NavigationTabs-module_linkAnchor__R2iEH {
11030
10836
  display: flex;
11031
10837
  height: 100%;
10838
+ align-items: center;
10839
+ padding: 0 var(--spacing-sm, 0.75rem);
10840
+ position: relative;
10841
+ color: rgba(var(--color-white-rgb, 255, 255, 255), 0.7);
10842
+ font-family: var(--typography-heading-4-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
10843
+ font-weight: var(--typography-heading-4-font-weight, 600);
10844
+ font-size: var(--typography-heading-4-font-size, 1.125rem);
10845
+ line-height: var(--typography-heading-4-line-height, 1.5rem);
10846
+ letter-spacing: var(--typography-heading-4-letter-spacing, normal);
10847
+ text-decoration: none;
10848
+ white-space: nowrap;
10849
+ margin-inline-end: var(--spacing-md, 1.5rem);
11032
10850
  }
11033
- .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
11034
- display: none;
11035
- pointer-events: none;
10851
+ .NavigationTabs-module_linkAnchor__R2iEH:hover {
10852
+ color: var(--color-white, #ffffff);
10853
+ text-decoration: none;
11036
10854
  }
11037
- @media (max-width: 767px) {
11038
- .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
11039
- display: block;
11040
- position: absolute;
11041
- top: 3.5625rem;
11042
- width: 3.75rem;
11043
- height: 3.75rem;
11044
- background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));
11045
- z-index: 1;
10855
+ @media (max-width: 1365px) {
10856
+ .NavigationTabs-module_linkAnchor__R2iEH {
10857
+ font-family: var(--typography-heading-5-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
10858
+ font-weight: var(--typography-heading-5-font-weight, 600);
10859
+ font-size: var(--typography-heading-5-font-size, 1rem);
10860
+ line-height: var(--typography-heading-5-line-height, 1.5rem);
10861
+ letter-spacing: var(--typography-heading-5-letter-spacing, normal);
11046
10862
  }
11047
10863
  }
11048
- @media (max-width: 767px) {
11049
- .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
11050
- background: linear-gradient(0deg, var(--color-gray-100, #f9f9f9), rgba(var(--color-gray-100-rgb, 249, 249, 249), 0));
10864
+ @media (max-width: 1439px) {
10865
+ .NavigationTabs-module_linkAnchor__R2iEH {
10866
+ margin-inline-end: var(--spacing-xs, 0.375rem);
11051
10867
  }
11052
10868
  }
11053
- @media (max-width: 767px) {
11054
- .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
11055
- background: linear-gradient(0deg, var(--color-blue-200, #bde2f5), rgba(var(--color-blue-200-rgb, 189, 226, 245), 0));
10869
+ @media (max-width: 1189px) {
10870
+ .NavigationTabs-module_linkAnchor__R2iEH {
10871
+ margin: 0;
11056
10872
  }
11057
10873
  }
11058
- .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
11059
- transform: rotate(90deg);
11060
- left: 0;
11061
- top: calc(100% - 4.5rem);
11062
- }
11063
- @media (max-width: 767px) {
11064
- .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
11065
- top: calc(100% - 3.75rem);
11066
- }
10874
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_active__w1NQO, .NavigationTabs-module_linkAnchor__R2iEH:focus {
10875
+ color: var(--color-white, #ffffff);
11067
10876
  }
11068
- .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc {
11069
- transform: rotate(-90deg);
10877
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_active__w1NQO::before, .NavigationTabs-module_linkAnchor__R2iEH:focus::before {
10878
+ content: "";
10879
+ display: block;
10880
+ height: 5px;
10881
+ position: absolute;
10882
+ top: 0;
10883
+ left: 0;
11070
10884
  right: 0;
11071
- top: calc(100% - 4.5rem);
11072
- }
11073
- @media (max-width: 767px) {
11074
- .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc {
11075
- top: calc(100% - 3.75rem);
11076
- }
11077
- }
11078
- .TitleBlock-module_secondaryActionsContainer__-4q0l {
11079
- display: flex;
11080
- align-items: flex-start;
11081
- justify-content: flex-end;
11082
- padding: calc(1.5rem / 2) 0;
11083
- margin-inline-end: 0;
11084
- margin-inline-start: 2.25rem;
11085
- }
11086
- .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
11087
- color: var(--color-blue-500, #0168b3);
10885
+ background-color: var(--color-white, #ffffff);
10886
+ transition: transform cubic-bezier(0.55, 0.085, 0.68, 0.53) 150ms;
10887
+ border-radius: 0 0 var(--border-solid-border-radius, 7px) var(--border-solid-border-radius, 7px);
11088
10888
  }
11089
10889
  @media (max-width: calc(1080px - 1px)) {
11090
- .TitleBlock-module_secondaryActionsContainer__-4q0l {
11091
- display: none;
10890
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_active__w1NQO::before, .NavigationTabs-module_linkAnchor__R2iEH:focus::before {
10891
+ top: auto;
10892
+ bottom: 0;
10893
+ border-radius: var(--border-solid-border-radius, 7px) var(--border-solid-border-radius, 7px) 0 0;
11092
10894
  }
11093
10895
  }
11094
- .TitleBlock-module_breadcrumb__lVNKz {
11095
- appearance: none;
11096
- display: inline;
11097
- background: transparent;
11098
- color: inherit;
11099
- font: inherit;
11100
- margin: 0;
11101
- padding: 0;
11102
- border: none;
11103
- cursor: pointer;
11104
- display: flex;
11105
- position: absolute;
11106
- align-items: center;
11107
- top: 50%;
11108
- transform: translateY(-50%);
11109
- text-decoration: none;
11110
- inset-inline-end: auto;
11111
- inset-inline-start: calc(-48px - 1.5rem);
11112
- align-self: normal;
11113
- }
11114
- .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82 {
11115
- text-decoration: underline;
11116
- }
11117
- .TitleBlock-module_breadcrumb__lVNKz:focus {
10896
+ .NavigationTabs-module_linkAnchor__R2iEH:focus {
11118
10897
  outline: none;
11119
10898
  }
11120
- .TitleBlock-module_breadcrumb__lVNKz:focus::after {
10899
+ .NavigationTabs-module_linkAnchor__R2iEH:focus::before {
10900
+ background-color: var(--color-blue-200, #bde2f5);
10901
+ }
10902
+ .NavigationTabs-module_linkAnchor__R2iEH:focus::after {
11121
10903
  content: "";
11122
10904
  position: absolute;
11123
10905
  background: transparent;
11124
10906
  border-color: var(--color-blue-200, #bde2f5);
11125
- border-radius: 50%;
10907
+ border-radius: 0 0 var(--border-focus-ring-border-radius, 10px) var(--border-focus-ring-border-radius, 10px);
11126
10908
  border-width: var(--border-focus-ring-border-width, 2px);
11127
10909
  border-style: var(--border-focus-ring-border-style, solid);
11128
- inset: calc(-2 * var(--border-focus-ring-border-width, 2px) - var(--border-focus-ring-border-width, 2px));
10910
+ inset: 0 calc(-1 * var(--border-focus-ring-border-width, 2px)) 5px;
11129
10911
  }
11130
- @media only screen and (max-width: 1644px) {
11131
- .TitleBlock-module_breadcrumb__lVNKz {
11132
- position: relative;
11133
- transform: translateY(0);
11134
- margin-inline: 0 var(--spacing-12);
11135
- inset-inline-end: auto;
11136
- inset-inline-start: 0;
10912
+ @media (max-width: calc(1080px - 1px)) {
10913
+ .NavigationTabs-module_linkAnchor__R2iEH:focus::after {
10914
+ border-radius: var(--border-focus-ring-border-radius, 10px) var(--border-focus-ring-border-radius, 10px) 0 0;
10915
+ inset: 5px calc(-1 * var(--border-focus-ring-border-width, 2px)) 0 calc(-1 * var(--border-focus-ring-border-width, 2px));
10916
+ }
10917
+ }
10918
+ @media (forced-colors: active) {
10919
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_active__w1NQO::before, .NavigationTabs-module_linkAnchor__R2iEH:focus::before {
10920
+ background: transparent;
10921
+ border: 5px solid transparent;
10922
+ height: 0;
11137
10923
  }
11138
10924
  }
10925
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy {
10926
+ color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.75);
10927
+ }
10928
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy:hover {
10929
+ color: var(--color-blue-500, #0168b3);
10930
+ }
10931
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy.NavigationTabs-module_active__w1NQO {
10932
+ color: var(--color-blue-500, #0168b3);
10933
+ }
10934
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy.NavigationTabs-module_active__w1NQO::before {
10935
+ background-color: var(--color-blue-500, #0168b3);
10936
+ top: 3px;
10937
+ }
11139
10938
  @media (max-width: calc(1080px - 1px)) {
11140
- .TitleBlock-module_breadcrumb__lVNKz {
11141
- display: none;
10939
+ .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy.NavigationTabs-module_active__w1NQO::before {
10940
+ top: auto;
10941
+ bottom: 0;
10942
+ border-radius: var(--border-solid-border-radius, 7px) var(--border-solid-border-radius, 7px) 0 0;
11142
10943
  }
11143
10944
  }
11144
- .TitleBlock-module_breadcrumbTextLink__ngx82 {
11145
- clip: rect(0 0 0 0);
11146
- clip-path: inset(50%);
11147
- height: 1px;
11148
- overflow: hidden;
10945
+ }
10946
+ /** THIS IS AN AUTOGENERATED FILE **/
10947
+ /** THIS IS AN AUTOGENERATED FILE **/
10948
+ /** THIS IS AN AUTOGENERATED FILE **/
10949
+ /** THIS IS AN AUTOGENERATED FILE **/
10950
+ /** THIS IS AN AUTOGENERATED FILE **/
10951
+ /** THIS IS AN AUTOGENERATED FILE **/
10952
+ /** THIS IS AN AUTOGENERATED FILE **/
10953
+ /* stylelint-disable selector-no-vendor-prefix */
10954
+ @layer kz-components {
10955
+ .ToggleSwitch-module_checkbox__ezWz3 {
10956
+ opacity: 0%;
11149
10957
  position: absolute;
11150
- white-space: nowrap;
11151
- width: 1px;
11152
- inset-inline-end: auto;
11153
- inset-inline-start: -3rem;
10958
+ }
10959
+ .ideal-sans .ToggleSwitch-module_checkbox__ezWz3 {
11154
10960
  position: absolute;
11155
10961
  }
11156
- @media (max-width: 1644px) {
11157
- .TitleBlock-module_breadcrumbTextLink__ngx82 {
11158
- inset-inline-end: auto;
11159
- inset-inline-start: 1.5rem;
11160
- }
10962
+ .ToggleSwitch-module_track__fcDMP {
10963
+ position: relative;
10964
+ background-color: var(--color-gray-500, #878792);
10965
+ border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
10966
+ border-radius: var(--spacing-md, 1.5rem);
10967
+ box-sizing: content-box;
10968
+ width: calc(var(--spacing-md, 1.5rem) * 1.05 * 2);
10969
+ height: calc(var(--spacing-md, 1.5rem) * 1.25);
10970
+ padding: 0 calc(var(--spacing-md, 1.5rem) * 0.15);
10971
+ display: flex;
10972
+ align-items: center;
10973
+ transition: background-color var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear);
10974
+ /* TODO: Fix */
10975
+ /* stylelint-disable no-descending-specificity */
10976
+ /* stylelint-enable no-descending-specificity */
10977
+ }
10978
+ .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R):focus + .ToggleSwitch-module_track__fcDMP, .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R):hover:focus + .ToggleSwitch-module_track__fcDMP {
10979
+ border-color: transparent;
10980
+ outline: 2px solid var(--color-blue-500, #0168b3);
10981
+ outline-offset: 1px;
10982
+ background-color: var(--color-gray-600, #524e56);
10983
+ }
10984
+ .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
10985
+ background-color: var(--color-purple-500, #844587);
10986
+ background-color: var(--color-gray-600, #524e56);
10987
+ }
10988
+ .ToggleSwitch-module_thumb__8PULV {
10989
+ display: flex;
10990
+ align-items: center;
10991
+ justify-content: center;
10992
+ background-color: var(--color-white, #ffffff);
10993
+ border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
10994
+ border-radius: var(--spacing-md, 1.5rem);
10995
+ transition: left var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear), right var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear);
10996
+ cursor: default;
10997
+ }
10998
+ .ToggleSwitch-module_checkIcon__8iitB {
10999
+ color: var(--color-green-500, #3f9a86);
11000
+ opacity: 0%;
11001
+ transition-duration: var(--animation-duration-rapid, 200ms);
11002
+ }
11003
+ /* stylelint-disable no-descending-specificity */
11004
+ .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP {
11005
+ border-color: var(--border-borderless-border-color, transparent);
11006
+ background-color: var(--color-green-500, #3f9a86);
11161
11007
  }
11162
- @media only screen and (min-width: 1644px) {
11163
- .TitleBlock-module_breadcrumbTextLink__ngx82 {
11164
- inset-inline-end: auto;
11165
- inset-inline-start: calc(48px - 1.5rem);
11166
- }
11008
+ .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP {
11009
+ border-color: transparent;
11010
+ background-color: var(--color-green-600, #2c7d67);
11167
11011
  }
11168
- .TitleBlock-module_breadcrumbTextLink__ngx82:hover, .TitleBlock-module_breadcrumbTextLink__ngx82:focus, .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82, .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_breadcrumbTextLink__ngx82 {
11169
- clip: initial;
11170
- clip-path: initial;
11171
- height: initial;
11172
- overflow: initial;
11173
- position: initial;
11174
- white-space: initial;
11175
- width: initial;
11176
- position: absolute;
11177
- display: block;
11178
- animation: TitleBlock-module_slide-fade__o5TnP 0.4s;
11012
+ .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_thumb__8PULV {
11013
+ position: relative;
11014
+ right: auto;
11015
+ inset-inline-start: calc(var(--spacing-md, 1.5rem) * 1.1);
11179
11016
  }
11180
- [dir=rtl] .TitleBlock-module_breadcrumbTextLink__ngx82:hover, [dir=rtl] .TitleBlock-module_breadcrumbTextLink__ngx82:focus, [dir=rtl] .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82, [dir=rtl] .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_breadcrumbTextLink__ngx82 {
11181
- animation: TitleBlock-module_reverse-slide-fade__LZZ98 0.4s;
11017
+ .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkIcon__8iitB {
11018
+ opacity: 100%;
11019
+ transition-delay: var(--animation-duration-immediate, 100ms);
11020
+ transition-duration: var(--animation-duration-fast, 300ms);
11182
11021
  }
11183
- .TitleBlock-module_breadcrumbText__vDi0k {
11184
- margin-inline-start: var(--spacing-xl, 3rem);
11185
- white-space: nowrap;
11186
- font-family: var(--typography-heading-5-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
11187
- font-weight: var(--typography-heading-5-font-weight, 600);
11188
- font-size: var(--typography-heading-5-font-size, 1rem);
11189
- line-height: var(--typography-heading-5-line-height, 1.5rem);
11190
- letter-spacing: var(--typography-heading-5-letter-spacing, normal);
11022
+ .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
11023
+ background-color: var(--color-green-600, #2c7d67);
11191
11024
  }
11192
- .TitleBlock-module_breadcrumb__lVNKz,
11193
- .TitleBlock-module_breadcrumb__lVNKz:hover,
11194
- .TitleBlock-module_breadcrumbText__vDi0k {
11195
- color: var(--color-white, #ffffff);
11025
+ .ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_thumb__8PULV {
11026
+ position: relative;
11027
+ right: auto;
11028
+ inset-inline-start: calc(var(--spacing-md, 1.5rem) * -0.05);
11196
11029
  }
11197
- .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz,
11198
- .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:hover,
11199
- .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:hover,
11200
- .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumbText__vDi0k,
11201
- .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumbText__vDi0k {
11202
- color: var(--color-purple-800, #2f2438);
11030
+ .ToggleSwitch-module_reversed__Q3-iM .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP,
11031
+ .ToggleSwitch-module_reversed__Q3-iM .ToggleSwitch-module_checkbox__ezWz3:hover:focus + .ToggleSwitch-module_track__fcDMP {
11032
+ outline-color: var(--color-blue-300, #73c0e8);
11203
11033
  }
11204
- .TitleBlock-module_circle__68z-T {
11205
- flex: 0 0 48px;
11206
- box-sizing: border-box;
11207
- width: 48px;
11208
- height: 48px;
11209
- color: var(--color-white, #ffffff);
11210
- border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.5);
11211
- border-width: 2px;
11212
- border-radius: 50%;
11213
- border-style: solid;
11214
- display: flex;
11215
- align-items: center;
11216
- justify-content: center;
11217
- transition: background-color 0.3s ease, transform 0.3s ease;
11034
+ .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_track__fcDMP {
11035
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.2);
11218
11036
  }
11219
- .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T {
11220
- transform: scale(1.1);
11221
- border-color: var(--color-white, #ffffff);
11222
- color: var(--color-white, #ffffff);
11223
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
11037
+ .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP,
11038
+ .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:hover:focus + .ToggleSwitch-module_track__fcDMP {
11039
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
11224
11040
  }
11225
- .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_circle__68z-T {
11226
- color: var(--color-blue-500, #0168b3);
11227
- border-color: var(--color-blue-300, #73c0e8);
11228
- border-width: 3px;
11041
+ .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
11042
+ background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
11229
11043
  }
11230
- .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T {
11231
- border-color: var(--color-blue-500, #0168b3);
11232
- color: var(--color-blue-500, #0168b3);
11233
- background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);
11044
+ label .ToggleSwitch-module_disabled__3H-9R.ToggleSwitch-module_track__fcDMP {
11045
+ opacity: 100%;
11046
+ }
11047
+ .ToggleSwitch-module_disabled__3H-9R.ToggleSwitch-module_track__fcDMP {
11048
+ opacity: 30%;
11234
11049
  }
11235
11050
  /* stylelint-enable no-descending-specificity */
11236
11051
  }
11237
- @keyframes TitleBlock-module_slide-fade__o5TnP {
11238
- 0% {
11239
- display: none;
11240
- opacity: 0%;
11052
+ /** THIS IS AN AUTOGENERATED FILE **/
11053
+ @layer kz-components {
11054
+ .ToggleSwitchField-module_container__e7TXD {
11055
+ display: flex;
11241
11056
  }
11242
- 1% {
11243
- display: block;
11244
- opacity: 0%;
11245
- transform: translateX(-30px);
11057
+ .ToggleSwitchField-module_fullWidth__ybDf- .ToggleSwitchField-module_inner__9-O0m {
11058
+ width: 100%;
11246
11059
  }
11247
- 100% {
11248
- opacity: 100%;
11249
- transform: translateX(0);
11060
+ .ToggleSwitchField-module_on__HQOkN label {
11061
+ font-weight: var(--typography-paragraph-bold-font-weight, 600);
11250
11062
  }
11251
11063
  }
11252
- @keyframes TitleBlock-module_reverse-slide-fade__LZZ98 {
11253
- 0% {
11254
- display: none;
11255
- opacity: 0%;
11064
+ /** THIS IS AN AUTOGENERATED FILE **/
11065
+ /** THIS IS AN AUTOGENERATED FILE **/
11066
+ @layer kz-components {
11067
+ .OverlayArrow-module_overlayArrow__UoDjH {
11068
+ display: flex;
11069
+ padding: 8px;
11256
11070
  }
11257
- 1% {
11258
- display: block;
11259
- opacity: 0%;
11260
- transform: translateX(30px);
11071
+ .OverlayArrow-module_overlayArrow__UoDjH[data-placement=top], .OverlayArrow-module_overlayArrow__UoDjH[data-placement=bottom] {
11072
+ padding: 0 8px;
11261
11073
  }
11262
- 100% {
11263
- opacity: 100%;
11264
- transform: translateX(0);
11074
+ .OverlayArrow-module_overlayArrow__UoDjH[data-placement=left], .OverlayArrow-module_overlayArrow__UoDjH[data-placement=right] {
11075
+ padding: 8px 0;
11076
+ }
11077
+ .OverlayArrow-module_overlayArrow__UoDjH path {
11078
+ fill: var(--color-purple-800, #2f2438);
11079
+ box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
11080
+ }
11081
+ .OverlayArrow-module_overlayArrow__UoDjH[data-placement=right] svg {
11082
+ transform: rotate(90deg);
11083
+ }
11084
+ .OverlayArrow-module_overlayArrow__UoDjH[data-placement=bottom] svg {
11085
+ transform: rotate(180deg);
11086
+ }
11087
+ .OverlayArrow-module_overlayArrow__UoDjH[data-placement=left] svg {
11088
+ transform: rotate(270deg);
11089
+ }
11090
+ .OverlayArrow-module_overlayArrow__UoDjH.OverlayArrow-module_reversed__N3t-k path {
11091
+ fill: var(--color-white, #ffffff);
11265
11092
  }
11266
11093
  }
11267
11094
  /** THIS IS AN AUTOGENERATED FILE **/
@@ -11269,660 +11096,833 @@
11269
11096
  /** THIS IS AN AUTOGENERATED FILE **/
11270
11097
  /** THIS IS AN AUTOGENERATED FILE **/
11271
11098
  /** THIS IS AN AUTOGENERATED FILE **/
11099
+ /** THIS IS AN AUTOGENERATED FILE **/
11272
11100
  @layer kz-components {
11273
- .NavigationTabs-module_container__0wwWu {
11274
- display: flex;
11275
- -webkit-font-smoothing: antialiased;
11276
- -moz-osx-font-smoothing: grayscale;
11101
+ .Tooltip-module_tooltip__NMZ65 {
11102
+ max-width: 200px;
11103
+ padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
11104
+ color: var(--color-white, #ffffff);
11105
+ text-align: center;
11106
+ font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
11107
+ font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
11108
+ font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
11109
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
11110
+ line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
11111
+ border-radius: var(--border-solid-border-radius, 7px);
11112
+ box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
11113
+ background-color: var(--color-purple-800, #2f2438);
11114
+ text-wrap: pretty;
11115
+ /* fixes FF gap */
11116
+ transform: translate3d(0, 0, 0);
11277
11117
  }
11278
- .NavigationTabs-module_linkAnchor__R2iEH {
11279
- display: flex;
11280
- height: 100%;
11281
- align-items: center;
11282
- padding: 0 var(--spacing-sm, 0.75rem);
11283
- position: relative;
11284
- color: rgba(var(--color-white-rgb, 255, 255, 255), 0.7);
11285
- font-family: var(--typography-heading-4-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
11286
- font-weight: var(--typography-heading-4-font-weight, 600);
11287
- font-size: var(--typography-heading-4-font-size, 1.125rem);
11288
- line-height: var(--typography-heading-4-line-height, 1.5rem);
11289
- letter-spacing: var(--typography-heading-4-letter-spacing, normal);
11290
- text-decoration: none;
11291
- white-space: nowrap;
11292
- margin-inline-end: var(--spacing-md, 1.5rem);
11118
+ .Tooltip-module_tooltip__NMZ65.Tooltip-module_reversed__aTr5h {
11119
+ background-color: var(--color-white, #ffffff);
11120
+ color: var(--color-purple-800, #2f2438);
11293
11121
  }
11294
- .NavigationTabs-module_linkAnchor__R2iEH:hover {
11295
- color: var(--color-white, #ffffff);
11296
- text-decoration: none;
11122
+ .Tooltip-module_tooltip__NMZ65[data-placement=top] {
11123
+ --origin: translateY(4px);
11297
11124
  }
11298
- @media (max-width: 1365px) {
11299
- .NavigationTabs-module_linkAnchor__R2iEH {
11300
- font-family: var(--typography-heading-5-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
11301
- font-weight: var(--typography-heading-5-font-weight, 600);
11302
- font-size: var(--typography-heading-5-font-size, 1rem);
11303
- line-height: var(--typography-heading-5-line-height, 1.5rem);
11304
- letter-spacing: var(--typography-heading-5-letter-spacing, normal);
11305
- }
11125
+ .Tooltip-module_tooltip__NMZ65[data-placement=bottom] {
11126
+ --origin: translateY(-4px);
11306
11127
  }
11307
- @media (max-width: 1439px) {
11308
- .NavigationTabs-module_linkAnchor__R2iEH {
11309
- margin-inline-end: var(--spacing-xs, 0.375rem);
11310
- }
11128
+ .Tooltip-module_tooltip__NMZ65[data-placement=right] {
11129
+ --origin: translateX(-4px);
11311
11130
  }
11312
- @media (max-width: 1189px) {
11313
- .NavigationTabs-module_linkAnchor__R2iEH {
11314
- margin: 0;
11315
- }
11131
+ .Tooltip-module_tooltip__NMZ65[data-placement=left] {
11132
+ --origin: translateX(4px);
11316
11133
  }
11317
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_active__w1NQO, .NavigationTabs-module_linkAnchor__R2iEH:focus {
11318
- color: var(--color-white, #ffffff);
11134
+ .Tooltip-module_tooltip__NMZ65[data-entering] {
11135
+ animation: Tooltip-module_slide__d94sa var(--animation-duration-fast, 300ms);
11136
+ }
11137
+ .Tooltip-module_tooltip__NMZ65[data-exiting] {
11138
+ animation: Tooltip-module_slide__d94sa var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
11139
+ }
11140
+ }
11141
+ @keyframes Tooltip-module_slide__d94sa {
11142
+ from {
11143
+ transform: var(--origin);
11144
+ opacity: 0;
11145
+ }
11146
+ to {
11147
+ transform: translateY(0);
11148
+ opacity: 1;
11149
+ }
11150
+ }
11151
+ @layer kz-components {
11152
+ .Well-module_container__Bu20U {
11153
+ background-color: var(--background-color);
11154
+ border-width: var(--border-width-1);
11155
+ border-radius: var(--border-solid-border-radius);
11156
+ border-style: var(--border-style);
11157
+ margin-bottom: var(--spacing-24);
11158
+ color: var(--color-purple-800);
11159
+ border-color: var(--border-color);
11160
+ }
11161
+
11162
+ .Well-module_noMargin__HImc8 {
11163
+ margin: 0;
11164
+ }
11165
+
11166
+ .Well-module_white__ov6XT {
11167
+ --background-color: var(--color-white);
11168
+ --border-color: var(--color-gray-500);
11319
11169
  }
11320
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_active__w1NQO::before, .NavigationTabs-module_linkAnchor__R2iEH:focus::before {
11321
- content: "";
11322
- display: block;
11323
- height: 5px;
11324
- position: absolute;
11325
- top: 0;
11326
- left: 0;
11327
- right: 0;
11328
- background-color: var(--color-white, #ffffff);
11329
- transition: transform cubic-bezier(0.55, 0.085, 0.68, 0.53) 150ms;
11330
- border-radius: 0 0 var(--border-solid-border-radius, 7px) var(--border-solid-border-radius, 7px);
11170
+
11171
+ .Well-module_gray__sIKVK {
11172
+ --background-color: var(--color-gray-200);
11173
+ --border-color: var(--color-gray-500);
11331
11174
  }
11332
- @media (max-width: calc(1080px - 1px)) {
11333
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_active__w1NQO::before, .NavigationTabs-module_linkAnchor__R2iEH:focus::before {
11334
- top: auto;
11335
- bottom: 0;
11336
- border-radius: var(--border-solid-border-radius, 7px) var(--border-solid-border-radius, 7px) 0 0;
11337
- }
11175
+
11176
+ .Well-module_blue__mNOks {
11177
+ --background-color: var(--color-blue-100);
11178
+ --border-color: var(--color-blue-400);
11338
11179
  }
11339
- .NavigationTabs-module_linkAnchor__R2iEH:focus {
11340
- outline: none;
11180
+
11181
+ .Well-module_yellow__cW5bY {
11182
+ --background-color: var(--color-yellow-100);
11183
+ --border-color: var(--color-yellow-700);
11341
11184
  }
11342
- .NavigationTabs-module_linkAnchor__R2iEH:focus::before {
11343
- background-color: var(--color-blue-200, #bde2f5);
11185
+
11186
+ .Well-module_orange__hp3q8 {
11187
+ --background-color: var(--color-orange-100);
11188
+ --border-color: var(--color-orange-600);
11344
11189
  }
11345
- .NavigationTabs-module_linkAnchor__R2iEH:focus::after {
11346
- content: "";
11347
- position: absolute;
11348
- background: transparent;
11349
- border-color: var(--color-blue-200, #bde2f5);
11350
- border-radius: 0 0 var(--border-focus-ring-border-radius, 10px) var(--border-focus-ring-border-radius, 10px);
11351
- border-width: var(--border-focus-ring-border-width, 2px);
11352
- border-style: var(--border-focus-ring-border-style, solid);
11353
- inset: 0 calc(-1 * var(--border-focus-ring-border-width, 2px)) 5px;
11190
+
11191
+ .Well-module_red__jCJY6 {
11192
+ --background-color: var(--color-red-100);
11193
+ --border-color: var(--color-red-500);
11354
11194
  }
11355
- @media (max-width: calc(1080px - 1px)) {
11356
- .NavigationTabs-module_linkAnchor__R2iEH:focus::after {
11357
- border-radius: var(--border-focus-ring-border-radius, 10px) var(--border-focus-ring-border-radius, 10px) 0 0;
11358
- inset: 5px calc(-1 * var(--border-focus-ring-border-width, 2px)) 0 calc(-1 * var(--border-focus-ring-border-width, 2px));
11359
- }
11195
+
11196
+ .Well-module_green__gOTVG {
11197
+ --background-color: var(--color-green-100);
11198
+ --border-color: var(--color-green-500);
11360
11199
  }
11361
- @media (forced-colors: active) {
11362
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_active__w1NQO::before, .NavigationTabs-module_linkAnchor__R2iEH:focus::before {
11363
- background: transparent;
11364
- border: 5px solid transparent;
11365
- height: 0;
11366
- }
11200
+
11201
+ .Well-module_purple__zgJJR {
11202
+ --background-color: var(--color-purple-100);
11203
+ --border-color: var(--color-purple-400);
11367
11204
  }
11368
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy {
11369
- color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.75);
11205
+
11206
+ .Well-module_positive__Kee9e {
11207
+ --background-color: var(--color-green-100);
11208
+ --border-color: var(--color-green-500);
11370
11209
  }
11371
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy:hover {
11372
- color: var(--color-blue-500, #0168b3);
11210
+
11211
+ /* Border Style Variations */
11212
+ .Well-module_solid__iyAUm {
11213
+ --border-style: solid;
11373
11214
  }
11374
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy.NavigationTabs-module_active__w1NQO {
11375
- color: var(--color-blue-500, #0168b3);
11215
+
11216
+ .Well-module_dashed__4I8h7 {
11217
+ --border-style: dashed;
11376
11218
  }
11377
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy.NavigationTabs-module_active__w1NQO::before {
11378
- background-color: var(--color-blue-500, #0168b3);
11379
- top: 3px;
11219
+
11220
+ .Well-module_none__nwqoe {
11221
+ --border-color: transparent;
11222
+ --border-style: none;
11380
11223
  }
11381
- @media (max-width: calc(1080px - 1px)) {
11382
- .NavigationTabs-module_linkAnchor__R2iEH.NavigationTabs-module_lightBackground__lToVy.NavigationTabs-module_active__w1NQO::before {
11383
- top: auto;
11224
+ }
11225
+
11226
+ @layer kz-components {
11227
+ .FooterRoot-module_footerRoot__-osuZ {
11228
+ display: grid;
11229
+ grid-template-areas: 'prev stepper next';
11230
+ grid-template-columns: 1fr 2fr 1fr;
11231
+ flex-grow: 1;
11232
+ justify-content: center;
11233
+ align-items: center;
11234
+ padding: var(--spacing-24) var(--spacing-12);
11235
+ background: var(--color-white);
11236
+ gap: var(--spacing-16);
11237
+ border-top: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
11238
+
11239
+ @media (width >= 768px) {
11240
+ grid-template-columns: 1fr 5fr 1fr;
11241
+ padding: var(--spacing-24) var(--spacing-32);
11242
+ position: sticky;
11384
11243
  bottom: 0;
11385
- border-radius: var(--border-solid-border-radius, 7px) var(--border-solid-border-radius, 7px) 0 0;
11244
+ z-index: 1;
11386
11245
  }
11387
11246
  }
11388
11247
  }
11389
- /** THIS IS AN AUTOGENERATED FILE **/
11390
- /** THIS IS AN AUTOGENERATED FILE **/
11391
- /** THIS IS AN AUTOGENERATED FILE **/
11392
- /** THIS IS AN AUTOGENERATED FILE **/
11393
- /** THIS IS AN AUTOGENERATED FILE **/
11394
- /** THIS IS AN AUTOGENERATED FILE **/
11395
- /** THIS IS AN AUTOGENERATED FILE **/
11396
- /* stylelint-disable selector-no-vendor-prefix */
11248
+
11397
11249
  @layer kz-components {
11398
- .ToggleSwitch-module_checkbox__ezWz3 {
11399
- opacity: 0%;
11400
- position: absolute;
11250
+ .ProgressStepper-module_stepsContainer__7Motj {
11251
+ --progress-stepper-indicator-size: 1.25rem;
11252
+
11253
+ width: 100%;
11254
+ grid-area: stepper;
11401
11255
  }
11402
- .ideal-sans .ToggleSwitch-module_checkbox__ezWz3 {
11403
- position: absolute;
11256
+
11257
+ .ProgressStepper-module_stepList__jmArV {
11258
+ display: none;
11259
+ justify-content: center;
11260
+ align-items: flex-end;
11261
+ list-style: none;
11262
+ margin: 0;
11263
+ padding: 0;
11264
+
11265
+ @media (width >= 768px) {
11266
+ display: flex;
11267
+ }
11404
11268
  }
11405
- .ToggleSwitch-module_track__fcDMP {
11406
- position: relative;
11407
- background-color: var(--color-gray-500, #878792);
11408
- border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
11409
- border-radius: var(--spacing-md, 1.5rem);
11410
- box-sizing: content-box;
11411
- width: calc(var(--spacing-md, 1.5rem) * 1.05 * 2);
11412
- height: calc(var(--spacing-md, 1.5rem) * 1.25);
11413
- padding: 0 calc(var(--spacing-md, 1.5rem) * 0.15);
11269
+
11270
+ .ProgressStepper-module_step__x0O0y {
11414
11271
  display: flex;
11415
- align-items: center;
11416
- transition: background-color var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear);
11417
- /* TODO: Fix */
11418
- /* stylelint-disable no-descending-specificity */
11419
- /* stylelint-enable no-descending-specificity */
11420
- }
11421
- .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R):focus + .ToggleSwitch-module_track__fcDMP, .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R):hover:focus + .ToggleSwitch-module_track__fcDMP {
11422
- border-color: transparent;
11423
- outline: 2px solid var(--color-blue-500, #0168b3);
11424
- outline-offset: 1px;
11425
- background-color: var(--color-gray-600, #524e56);
11426
- }
11427
- .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
11428
- background-color: var(--color-purple-500, #844587);
11429
- background-color: var(--color-gray-600, #524e56);
11272
+ flex-grow: 1;
11273
+ flex-basis: 100%;
11274
+ justify-content: center;
11275
+ max-width: var(--spacing-96);
11276
+ overflow-wrap: break-word;
11277
+ position: relative;
11278
+ container: step / inline-size;
11430
11279
  }
11431
- .ToggleSwitch-module_thumb__8PULV {
11280
+
11281
+ .ProgressStepper-module_stepContent__OuBES {
11432
11282
  display: flex;
11433
11283
  align-items: center;
11434
- justify-content: center;
11435
- background-color: var(--color-white, #ffffff);
11436
- border: var(--border-borderless-border-width, 2px) var(--border-borderless-border-style, solid) var(--border-borderless-border-color, transparent);
11437
- border-radius: var(--spacing-md, 1.5rem);
11438
- transition: left var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear), right var(--animation-duration-immediate, 100ms) var(--animation-easing-function-linear, linear);
11439
- cursor: default;
11440
- }
11441
- .ToggleSwitch-module_checkIcon__8iitB {
11442
- color: var(--color-green-500, #3f9a86);
11443
- opacity: 0%;
11444
- transition-duration: var(--animation-duration-rapid, 200ms);
11445
- }
11446
- /* stylelint-disable no-descending-specificity */
11447
- .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3 + .ToggleSwitch-module_track__fcDMP {
11448
- border-color: var(--border-borderless-border-color, transparent);
11449
- background-color: var(--color-green-500, #3f9a86);
11450
- }
11451
- .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP {
11452
- border-color: transparent;
11453
- background-color: var(--color-green-600, #2c7d67);
11284
+ flex-direction: column;
11454
11285
  }
11455
- .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_thumb__8PULV {
11286
+
11287
+ .ProgressStepper-module_stepIndicator__opcbs {
11288
+ width: var(--progress-stepper-indicator-size);
11289
+ height: var(--progress-stepper-indicator-size);
11456
11290
  position: relative;
11457
- right: auto;
11458
- inset-inline-start: calc(var(--spacing-md, 1.5rem) * 1.1);
11459
- }
11460
- .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkIcon__8iitB {
11461
- opacity: 100%;
11462
- transition-delay: var(--animation-duration-immediate, 100ms);
11463
- transition-duration: var(--animation-duration-fast, 300ms);
11464
- }
11465
- .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_on__CQpkh .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
11466
- background-color: var(--color-green-600, #2c7d67);
11467
11291
  }
11468
- .ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_thumb__8PULV {
11469
- position: relative;
11470
- right: auto;
11471
- inset-inline-start: calc(var(--spacing-md, 1.5rem) * -0.05);
11292
+
11293
+ .ProgressStepper-module_stepName__QvpQ4 {
11294
+ display: none;
11295
+ text-align: center;
11296
+ margin-bottom: var(--spacing-12);
11297
+ font-family: var(--typography-paragraph-small-font-family);
11298
+ font-size: var(--typography-paragraph-small-font-size);
11299
+ line-height: var(--typography-paragraph-small-line-height);
11300
+ font-weight: var(--typography-paragraph-bold-font-weight);
11301
+ color: var(--color-gray-600);
11472
11302
  }
11473
- .ToggleSwitch-module_reversed__Q3-iM .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP,
11474
- .ToggleSwitch-module_reversed__Q3-iM .ToggleSwitch-module_checkbox__ezWz3:hover:focus + .ToggleSwitch-module_track__fcDMP {
11475
- outline-color: var(--color-blue-300, #73c0e8);
11303
+
11304
+ .ProgressStepper-module_stepName__QvpQ4.ProgressStepper-module_isCurrent__L8bL9 {
11305
+ color: var(--color-purple-800);
11476
11306
  }
11477
- .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_track__fcDMP {
11478
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.2);
11307
+
11308
+ .ProgressStepper-module_stepIcon__K-fVm {
11309
+ color: var(--color-purple-800);
11310
+ position: absolute;
11311
+ width: var(--progress-stepper-indicator-size);
11312
+ height: var(--progress-stepper-indicator-size);
11313
+ left: 50%;
11314
+ top: 50%;
11315
+ transform: translate(-50%, -50%);
11479
11316
  }
11480
- .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:focus + .ToggleSwitch-module_track__fcDMP,
11481
- .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:hover:focus + .ToggleSwitch-module_track__fcDMP {
11482
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
11317
+
11318
+ .ProgressStepper-module_stepIcon__K-fVm.ProgressStepper-module_isCompleted__l7HiL {
11319
+ color: var(--color-green-500);
11483
11320
  }
11484
- .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP:hover, label:hover .ToggleSwitch-module_reversed__Q3-iM.ToggleSwitch-module_off__OhSEP .ToggleSwitch-module_checkbox__ezWz3:not(.ToggleSwitch-module_disabled__3H-9R) + .ToggleSwitch-module_track__fcDMP {
11485
- background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
11321
+
11322
+ .ProgressStepper-module_stepDivider__1dq4c {
11323
+ height: 0;
11324
+ display: flex;
11325
+ position: absolute;
11326
+ flex-grow: 1;
11327
+ min-width: calc(100% - var(--spacing-24));
11328
+ border: solid var(--spacing-1) var(--color-gray-300);
11329
+ margin: 0;
11330
+ border-radius: var(--border-solid-border-radius);
11331
+ inset-inline-start: 100%;
11332
+
11333
+ /* sets fron the bottom to the centre of the dot */
11334
+ top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
11335
+ transform: translateX(-50%);
11336
+
11337
+ :dir(rtl) & {
11338
+ left: unset;
11339
+ right: 100%;
11340
+ transform: translateX(50%);
11341
+ }
11486
11342
  }
11487
- label .ToggleSwitch-module_disabled__3H-9R.ToggleSwitch-module_track__fcDMP {
11488
- opacity: 100%;
11343
+
11344
+ .ProgressStepper-module_stepperDescription__KplV3 {
11345
+ display: flex;
11346
+ justify-content: center;
11347
+ font-family: var(--typography-paragraph-small-font-family);
11348
+ font-weight: var(--typography-paragraph-small-font-weight);
11349
+ font-size: var(--typography-paragraph-small-font-size);
11350
+ line-height: var(--typography-paragraph-small-line-height);
11351
+
11352
+ @media (width >= 768px) {
11353
+ /* sr hidden styles */
11354
+ position: absolute;
11355
+ width: 0;
11356
+ height: 0;
11357
+ overflow: hidden;
11358
+ }
11489
11359
  }
11490
- .ToggleSwitch-module_disabled__3H-9R.ToggleSwitch-module_track__fcDMP {
11491
- opacity: 30%;
11360
+
11361
+ /* Some defensive CSS for many steps on desktop screens */
11362
+ @container step (width >= 4.5rem) {
11363
+ .ProgressStepper-module_stepName__QvpQ4 {
11364
+ display: inline;
11365
+ }
11492
11366
  }
11493
- /* stylelint-enable no-descending-specificity */
11494
11367
  }
11495
- /** THIS IS AN AUTOGENERATED FILE **/
11368
+
11496
11369
  @layer kz-components {
11497
- .ToggleSwitchField-module_container__e7TXD {
11370
+ .FooterActions-module_footerAction__szvPs {
11498
11371
  display: flex;
11372
+ flex-grow: 1;
11373
+ flex-basis: auto;
11499
11374
  }
11500
- .ToggleSwitchField-module_fullWidth__ybDf- .ToggleSwitchField-module_inner__9-O0m {
11501
- width: 100%;
11375
+
11376
+ .FooterActions-module_footerActionPrevious__VJ6j1 {
11377
+ grid-area: prev;
11378
+ justify-content: start;
11502
11379
  }
11503
- .ToggleSwitchField-module_on__HQOkN label {
11504
- font-weight: var(--typography-paragraph-bold-font-weight, 600);
11380
+
11381
+ .FooterActions-module_footerActionNext__koFhj {
11382
+ grid-area: next;
11383
+ justify-content: end;
11505
11384
  }
11506
11385
  }
11507
- /** THIS IS AN AUTOGENERATED FILE **/
11508
- /** THIS IS AN AUTOGENERATED FILE **/
11386
+
11509
11387
  @layer kz-components {
11510
- .OverlayArrow-module_overlayArrow__UoDjH {
11388
+ .Titles-module_titles__ENQ0C {
11389
+ grid-area: titles;
11511
11390
  display: flex;
11512
- padding: 8px;
11513
- }
11514
- .OverlayArrow-module_overlayArrow__UoDjH[data-placement=top], .OverlayArrow-module_overlayArrow__UoDjH[data-placement=bottom] {
11515
- padding: 0 8px;
11391
+ flex-direction: column;
11392
+ align-items: center;
11393
+ justify-content: center;
11394
+ flex-grow: 1;
11516
11395
  }
11517
- .OverlayArrow-module_overlayArrow__UoDjH[data-placement=left], .OverlayArrow-module_overlayArrow__UoDjH[data-placement=right] {
11518
- padding: 8px 0;
11396
+
11397
+ .Titles-module_pageTitle__ePjdw {
11398
+ display: flex;
11399
+ flex-direction: column;
11519
11400
  }
11520
- .OverlayArrow-module_overlayArrow__UoDjH path {
11521
- fill: var(--color-purple-800, #2f2438);
11522
- box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
11401
+
11402
+ .Titles-module_prefix__FEtyY {
11403
+ margin-bottom: var(--spacing-4);
11523
11404
  }
11524
- .OverlayArrow-module_overlayArrow__UoDjH[data-placement=right] svg {
11525
- transform: rotate(90deg);
11405
+
11406
+ .Titles-module_statusTag__hmyfK {
11407
+ margin-top: var(--spacing-8);
11526
11408
  }
11527
- .OverlayArrow-module_overlayArrow__UoDjH[data-placement=bottom] svg {
11528
- transform: rotate(180deg);
11409
+ }
11410
+
11411
+ @layer kz-components {
11412
+ .Actions-module_actions__JzCWB {
11413
+ grid-area: actions;
11414
+ display: flex;
11415
+ flex-direction: column;
11416
+ flex-grow: 1;
11417
+ justify-content: center;
11418
+ align-items: center;
11419
+
11420
+ @media (width >= 768px) {
11421
+ flex-direction: row;
11422
+ align-items: flex-start;
11423
+ justify-content: flex-end;
11424
+ margin-top: calc(-1 * var(--spacing-12));
11425
+ }
11529
11426
  }
11530
- .OverlayArrow-module_overlayArrow__UoDjH[data-placement=left] svg {
11531
- transform: rotate(270deg);
11427
+ }
11428
+
11429
+ @layer kz-components {
11430
+ .Branding-module_branding__g3OoE {
11431
+ grid-area: branding;
11432
+ display: flex;
11433
+ justify-content: center;
11434
+ padding-top: var(--spacing-4);
11435
+
11436
+ @media (width >=768px) {
11437
+ justify-content: unset;
11438
+ }
11532
11439
  }
11533
- .OverlayArrow-module_overlayArrow__UoDjH.OverlayArrow-module_reversed__N3t-k path {
11534
- fill: var(--color-white, #ffffff);
11440
+
11441
+ .Branding-module_logo__yLHfs {
11442
+ width: 7.5rem;
11535
11443
  }
11536
11444
  }
11537
- /** THIS IS AN AUTOGENERATED FILE **/
11538
- /** THIS IS AN AUTOGENERATED FILE **/
11539
- /** THIS IS AN AUTOGENERATED FILE **/
11540
- /** THIS IS AN AUTOGENERATED FILE **/
11541
- /** THIS IS AN AUTOGENERATED FILE **/
11542
- /** THIS IS AN AUTOGENERATED FILE **/
11445
+
11543
11446
  @layer kz-components {
11544
- .Tooltip-module_tooltip__NMZ65 {
11545
- max-width: 200px;
11546
- padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
11547
- color: var(--color-white, #ffffff);
11447
+ .Root-module_root__-1P72 {
11448
+ display: grid;
11449
+ background-color: var(--color-white);
11450
+ grid-template: 'branding' min-content 'titles' max-content 'actions' min-content / 1fr;
11451
+ flex-grow: 1;
11452
+ justify-content: center;
11453
+ align-items: center;
11548
11454
  text-align: center;
11549
- font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
11550
- font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
11551
- font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
11552
- letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
11553
- line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
11554
- border-radius: var(--border-solid-border-radius, 7px);
11555
- box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
11556
- background-color: var(--color-purple-800, #2f2438);
11557
- text-wrap: pretty;
11558
- /* fixes FF gap */
11559
- transform: translate3d(0, 0, 0);
11560
- }
11561
- .Tooltip-module_tooltip__NMZ65.Tooltip-module_reversed__aTr5h {
11562
- background-color: var(--color-white, #ffffff);
11563
- color: var(--color-purple-800, #2f2438);
11564
- }
11565
- .Tooltip-module_tooltip__NMZ65[data-placement=top] {
11566
- --origin: translateY(4px);
11567
- }
11568
- .Tooltip-module_tooltip__NMZ65[data-placement=bottom] {
11569
- --origin: translateY(-4px);
11570
- }
11571
- .Tooltip-module_tooltip__NMZ65[data-placement=right] {
11572
- --origin: translateX(-4px);
11573
- }
11574
- .Tooltip-module_tooltip__NMZ65[data-placement=left] {
11575
- --origin: translateX(4px);
11576
- }
11577
- .Tooltip-module_tooltip__NMZ65[data-entering] {
11578
- animation: Tooltip-module_slide__d94sa var(--animation-duration-fast, 300ms);
11579
- }
11580
- .Tooltip-module_tooltip__NMZ65[data-exiting] {
11581
- animation: Tooltip-module_slide__d94sa var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
11455
+ padding: var(--spacing-24);
11456
+ gap: var(--spacing-16);
11457
+ border-bottom: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
11458
+
11459
+ @media (width >= 768px) {
11460
+ align-items: start;
11461
+ grid-template: 'branding titles actions' min-content / 1fr max-content 1fr;
11462
+ position: sticky;
11463
+ top: 0;
11464
+ z-index: 1;
11465
+ }
11582
11466
  }
11583
11467
  }
11584
- @keyframes Tooltip-module_slide__d94sa {
11585
- from {
11586
- transform: var(--origin);
11587
- opacity: 0;
11468
+
11469
+ @layer kz-components {
11470
+ .Main-module_main__K9Z0C {
11471
+ /* This is set so children will sit beneath the header and footer when sticky */
11472
+ z-index: 0;
11588
11473
  }
11589
- to {
11590
- transform: translateY(0);
11591
- opacity: 1;
11474
+ }
11475
+
11476
+ @layer kz-components {
11477
+ .Wrapper-module_wrapper__-tWQy {
11478
+ display: grid;
11479
+ grid-template-rows: min-content 1fr min-content;
11480
+ position: relative;
11481
+ min-height: 100vh;
11482
+ background: var(--color-gray-100);
11592
11483
  }
11593
11484
  }
11485
+
11594
11486
  @layer kz-components {
11595
- .Well-module_container__Bu20U {
11596
- background-color: var(--background-color);
11597
- border-width: var(--border-width-1);
11598
- border-radius: var(--border-solid-border-radius);
11599
- border-style: var(--border-style);
11600
- margin-bottom: var(--spacing-24);
11601
- color: var(--color-purple-800);
11602
- border-color: var(--border-color);
11487
+ ul {
11488
+ padding-inline-start: 0;
11489
+ }
11490
+
11491
+ .ListItem-module_listItem__xGr6A {
11492
+ font-family: var(--typography-paragraph-body-font-family);
11493
+ font-weight: var(--typography-paragraph-body-font-weight);
11494
+ font-size: var(--typography-paragraph-body-font-size);
11495
+ line-height: var(--typography-paragraph-body-line-height);
11496
+ letter-spacing: var(--typography-paragraph-body-letter-spacing);
11497
+ padding: var(--spacing-8) var(--spacing-16);
11498
+ margin: 0;
11499
+ list-style-type: none;
11500
+ border-radius: var(--spacing-8);
11501
+ border: var(--spacing-2) solid transparent;
11502
+ display: flex;
11503
+ flex-direction: row;
11504
+ justify-content: space-between;
11505
+ outline: none;
11506
+ gap: var(--spacing-12);
11507
+ }
11508
+
11509
+ .ListItem-module_listItem__xGr6A.ListItem-module_focused__au3J5 {
11510
+ border: var(--spacing-2) solid var(--color-blue-500);
11511
+ }
11512
+
11513
+ .ListItem-module_listItem__xGr6A.ListItem-module_focused__au3J5:hover {
11514
+ border-color: transparent;
11603
11515
  }
11604
11516
 
11605
- .Well-module_noMargin__HImc8 {
11606
- margin: 0;
11517
+ .ListItem-module_listItem__xGr6A:hover {
11518
+ background-color: var(--color-gray-200);
11607
11519
  }
11608
11520
 
11609
- .Well-module_white__ov6XT {
11610
- --background-color: var(--color-white);
11611
- --border-color: var(--color-gray-500);
11521
+ .ListItem-module_listItem__xGr6A.ListItem-module_focused__au3J5:active {
11522
+ background-color: var(--color-gray-300);
11612
11523
  }
11613
11524
 
11614
- .Well-module_gray__sIKVK {
11615
- --background-color: var(--color-gray-200);
11616
- --border-color: var(--color-gray-500);
11525
+ .ListItem-module_startSelection__7qDbl {
11526
+ justify-content: flex-start;
11617
11527
  }
11618
11528
 
11619
- .Well-module_blue__mNOks {
11620
- --background-color: var(--color-blue-100);
11621
- --border-color: var(--color-blue-400);
11529
+ .ListItem-module_selected__IV3-p {
11530
+ background-color: var(--color-blue-100);
11531
+ border: var(--spacing-2) solid transparent;
11622
11532
  }
11623
11533
 
11624
- .Well-module_yellow__cW5bY {
11625
- --background-color: var(--color-yellow-100);
11626
- --border-color: var(--color-yellow-700);
11534
+ .ListItem-module_selected__IV3-p:hover {
11535
+ background-color: var(--color-blue-200);
11627
11536
  }
11628
11537
 
11629
- .Well-module_orange__hp3q8 {
11630
- --background-color: var(--color-orange-100);
11631
- --border-color: var(--color-orange-600);
11538
+ .ListItem-module_selected__IV3-p:active {
11539
+ background-color: var(--color-blue-100);
11632
11540
  }
11633
11541
 
11634
- .Well-module_red__jCJY6 {
11635
- --background-color: var(--color-red-100);
11636
- --border-color: var(--color-red-500);
11542
+ .ListItem-module_disabled__A2QFo {
11543
+ color: var(--color-gray-500);
11637
11544
  }
11638
11545
 
11639
- .Well-module_green__gOTVG {
11640
- --background-color: var(--color-green-100);
11641
- --border-color: var(--color-green-500);
11546
+ .ListItem-module_disabled__A2QFo:hover {
11547
+ background-color: var(--color-white);
11642
11548
  }
11643
11549
 
11644
- .Well-module_purple__zgJJR {
11645
- --background-color: var(--color-purple-100);
11646
- --border-color: var(--color-purple-400);
11550
+ .ListItem-module_iconChecked__co4xD {
11551
+ color: var(--color-blue-500);
11647
11552
  }
11648
11553
 
11649
- .Well-module_positive__Kee9e {
11650
- --background-color: var(--color-green-100);
11651
- --border-color: var(--color-green-500);
11554
+ .ListItem-module_itemContent__x4h7q {
11555
+ display: flex;
11556
+ flex-direction: row;
11557
+ overflow: hidden;
11558
+ min-width: 0;
11559
+ flex: 1;
11652
11560
  }
11653
11561
 
11654
- /* Border Style Variations */
11655
- .Well-module_solid__iyAUm {
11656
- --border-style: solid;
11562
+ .ListItem-module_itemText__O4Ddg {
11563
+ white-space: nowrap;
11564
+ overflow: hidden;
11565
+ text-overflow: ellipsis;
11566
+ flex: 1;
11567
+ min-width: 0;
11657
11568
  }
11658
11569
 
11659
- .Well-module_dashed__4I8h7 {
11660
- --border-style: dashed;
11570
+ .ListItem-module_selectedStartPosition__2N3bw {
11571
+ justify-content: flex-start;
11661
11572
  }
11662
11573
 
11663
- .Well-module_none__nwqoe {
11664
- --border-color: transparent;
11665
- --border-style: none;
11574
+ .ListItem-module_selectedIconWrapper__w-ECd {
11575
+ display: flex;
11576
+ align-items: center;
11577
+ }
11578
+
11579
+ .ListItem-module_emptySpacer__qeRpQ {
11580
+ width: var(--spacing-20);
11666
11581
  }
11667
11582
  }
11668
11583
 
11669
11584
  @layer kz-components {
11670
- .FooterRoot-module_footerRoot__-osuZ {
11671
- display: grid;
11672
- grid-template-areas: 'prev stepper next';
11673
- grid-template-columns: 1fr 2fr 1fr;
11674
- flex-grow: 1;
11675
- justify-content: center;
11676
- align-items: center;
11677
- padding: var(--spacing-24) var(--spacing-12);
11678
- background: var(--color-white);
11679
- gap: var(--spacing-16);
11680
- border-top: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
11585
+ .ListSection-module_sectionWrapper__gxh41:not(.ListSection-module_firstSectionHeader__zPUIZ) {
11586
+ padding-top: var(--spacing-16);
11587
+ }
11681
11588
 
11682
- @media (width >= 768px) {
11683
- grid-template-columns: 1fr 5fr 1fr;
11684
- padding: var(--spacing-24) var(--spacing-32);
11685
- position: sticky;
11686
- bottom: 0;
11687
- z-index: 1;
11688
- }
11589
+ .ListSection-module_firstSectionHeader__zPUIZ {
11590
+ padding-top: var(--spacing-8);
11591
+ }
11592
+
11593
+ .ListSection-module_listSectionHeader__bptHg {
11594
+ font-family: var(--typography-paragraph-small-font-family);
11595
+ font-weight: var(--typography-paragraph-bold-font-weight);
11596
+ font-size: var(--typography-paragraph-small-font-size);
11597
+ line-height: var(--typography-paragraph-small-line-height);
11598
+ letter-spacing: var(--typography-paragraph-small-letter-spacing);
11599
+ padding-bottom: var(--spacing-4);
11600
+ padding-left: var(--spacing-16);
11601
+ }
11602
+
11603
+ .ListSection-module_listSectionGroup__PoUPf {
11604
+ padding: 0;
11605
+ list-style: none;
11689
11606
  }
11690
11607
  }
11691
11608
 
11692
11609
  @layer kz-components {
11693
- .ProgressStepper-module_stepsContainer__7Motj {
11694
- --progress-stepper-indicator-size: 1.25rem;
11610
+ .List-module_list__bbFPn {
11611
+ display: flex;
11612
+ flex-direction: column;
11613
+ flex: 1 1 auto;
11614
+ list-style: none;
11615
+ overflow-y: auto;
11616
+ padding: 0.875rem;
11617
+ margin: 0;
11618
+ }
11619
+ }
11695
11620
 
11621
+ @layer kz-components {
11622
+ .SelectTrigger-module_trigger__fIe03 {
11623
+ anchor-name: var(--anchor-name);
11624
+ display: flex;
11625
+ align-items: center;
11626
+ justify-content: space-between;
11627
+ font-family: var(--typography-paragraph-body-font-family);
11628
+ font-weight: var(--typography-paragraph-body-font-weight);
11629
+ font-size: var(--typography-paragraph-body-font-size);
11630
+ line-height: var(--typography-paragraph-body-line-height);
11631
+ letter-spacing: var(--typography-paragraph-body-letter-spacing);
11632
+ padding: var(--spacing-12);
11633
+ height: var(--spacing-40);
11634
+ min-width: var(--spacing-200);
11696
11635
  width: 100%;
11697
- grid-area: stepper;
11636
+ background-color: var(--color-white);
11637
+ border-radius: var(--spacing-8);
11638
+ border: var(--spacing-2) solid var(--color-gray-500);
11698
11639
  }
11699
11640
 
11700
- .ProgressStepper-module_stepList__jmArV {
11701
- display: none;
11702
- justify-content: center;
11703
- align-items: flex-end;
11704
- list-style: none;
11705
- margin: 0;
11706
- padding: 0;
11641
+ .SelectTrigger-module_trigger__fIe03:focus-visible {
11642
+ outline-offset: var(--spacing-2);
11643
+ outline: var(--spacing-2) solid var(--color-blue-500);
11644
+ background-color: var(--color-white);
11645
+ }
11707
11646
 
11708
- @media (width >= 768px) {
11709
- display: flex;
11710
- }
11647
+ .SelectTrigger-module_trigger__fIe03:hover:not(.SelectTrigger-module_disabled__zfAoe) {
11648
+ border-color: var(--color-gray-600);
11649
+ background-color: var(--color-gray-200);
11711
11650
  }
11712
11651
 
11713
- .ProgressStepper-module_step__x0O0y {
11714
- display: flex;
11715
- flex-grow: 1;
11716
- flex-basis: 100%;
11717
- justify-content: center;
11718
- max-width: var(--spacing-96);
11719
- overflow-wrap: break-word;
11720
- position: relative;
11721
- container: step / inline-size;
11652
+ .SelectTrigger-module_secondary__eOquY:not(.SelectTrigger-module_disabled__zfAoe, .SelectTrigger-module_readOnly__q-Epr) {
11653
+ border: 2px solid transparent;
11654
+ border-bottom: var(--spacing-2) solid var(--color-gray-400);
11655
+ border-radius: 0.4375rem 0.4375rem 0 0;
11722
11656
  }
11723
11657
 
11724
- .ProgressStepper-module_stepContent__OuBES {
11658
+ .SelectTrigger-module_secondary__eOquY:not(.SelectTrigger-module_disabled__zfAoe, .SelectTrigger-module_readOnly__q-Epr):hover {
11659
+ border: var(--spacing-2) solid var(--color-gray-600);
11660
+ border-radius: 0.4375rem;
11661
+ }
11662
+
11663
+ .SelectTrigger-module_secondary__eOquY:not(.SelectTrigger-module_disabled__zfAoe, .SelectTrigger-module_readOnly__q-Epr):focus-within {
11664
+ border: var(--spacing-2) solid var(--color-gray-500);
11665
+ border-radius: 0.4375rem;
11666
+ }
11667
+
11668
+ .SelectTrigger-module_disabled__zfAoe {
11669
+ pointer-events: none;
11670
+ border: var(--spacing-2) solid var(--color-gray-300);
11671
+ background-color: var(--color-gray-100);
11672
+ }
11673
+
11674
+ .SelectTrigger-module_disabledText__acP59 {
11675
+ color: var(--color-gray-500);
11676
+ }
11677
+
11678
+ .SelectTrigger-module_readOnly__q-Epr {
11679
+ pointer-events: none;
11680
+ background-color: var(--color-gray-200);
11681
+ border: var(--spacing-2) solid var(--color-gray-200);
11682
+ }
11683
+
11684
+ .SelectTrigger-module_small__jE-NG {
11685
+ height: var(--spacing-32);
11686
+ }
11687
+
11688
+ .SelectTrigger-module_large__r93d8 {
11689
+ height: var(--spacing-48);
11690
+ }
11691
+
11692
+ .SelectTrigger-module_chevronButton__611jw {
11693
+ background: none;
11694
+ padding: 0;
11725
11695
  display: flex;
11726
- align-items: center;
11727
- flex-direction: column;
11728
11696
  }
11697
+ }
11729
11698
 
11730
- .ProgressStepper-module_stepIndicator__opcbs {
11731
- width: var(--progress-stepper-indicator-size);
11732
- height: var(--progress-stepper-indicator-size);
11733
- position: relative;
11699
+ @layer kz-components {
11700
+ .ComboBoxTrigger-module_trigger__p6pcn {
11701
+ anchor-name: var(--anchor-name);
11702
+ display: flex;
11703
+ align-items: center;
11704
+ justify-content: space-between;
11705
+ font-family: var(--typography-paragraph-body-font-family);
11706
+ font-weight: var(--typography-paragraph-body-font-weight);
11707
+ font-size: var(--typography-paragraph-body-font-size);
11708
+ line-height: var(--typography-paragraph-body-line-height);
11709
+ letter-spacing: var(--typography-paragraph-body-letter-spacing);
11710
+ height: var(--spacing-40);
11711
+ min-width: var(--spacing-200);
11712
+ width: 100%;
11713
+ background-color: var(--color-white);
11714
+ border-radius: 0.4375rem;
11715
+ border: var(--spacing-2) solid var(--color-gray-500);
11716
+ box-sizing: border-box;
11734
11717
  }
11735
11718
 
11736
- .ProgressStepper-module_stepName__QvpQ4 {
11737
- display: none;
11738
- text-align: center;
11739
- margin-bottom: var(--spacing-12);
11719
+ .ComboBoxTrigger-module_smallText__Vj2Ya {
11740
11720
  font-family: var(--typography-paragraph-small-font-family);
11721
+ font-weight: var(--typography-paragraph-small-font-weight);
11741
11722
  font-size: var(--typography-paragraph-small-font-size);
11742
11723
  line-height: var(--typography-paragraph-small-line-height);
11743
- font-weight: var(--typography-paragraph-bold-font-weight);
11744
- color: var(--color-gray-600);
11724
+ letter-spacing: var(--typography-paragraph-small-letter-spacing);
11725
+ }
11726
+
11727
+ .ComboBoxTrigger-module_secondary__TvNTK:not(.ComboBoxTrigger-module_disabled__BkFJy, .ComboBoxTrigger-module_readOnly__g6-fB) {
11728
+ border-radius: 0.4375rem 0.4375rem 0 0;
11729
+ border: 2px solid transparent;
11730
+ border-bottom: var(--spacing-2) solid var(--color-gray-400);
11745
11731
  }
11746
11732
 
11747
- .ProgressStepper-module_stepName__QvpQ4.ProgressStepper-module_isCurrent__L8bL9 {
11748
- color: var(--color-purple-800);
11733
+ .ComboBoxTrigger-module_secondary__TvNTK:not(.ComboBoxTrigger-module_disabled__BkFJy, .ComboBoxTrigger-module_readOnly__g6-fB):hover {
11734
+ border: var(--spacing-2) solid var(--color-gray-600);
11735
+ border-radius: 0.4375rem;
11749
11736
  }
11750
11737
 
11751
- .ProgressStepper-module_stepIcon__K-fVm {
11752
- color: var(--color-purple-800);
11753
- position: absolute;
11754
- width: var(--progress-stepper-indicator-size);
11755
- height: var(--progress-stepper-indicator-size);
11756
- left: 50%;
11757
- top: 50%;
11758
- transform: translate(-50%, -50%);
11738
+ .ComboBoxTrigger-module_secondary__TvNTK:not(.ComboBoxTrigger-module_disabled__BkFJy, .ComboBoxTrigger-module_readOnly__g6-fB):focus-within {
11739
+ border: var(--spacing-2) solid var(--color-gray-600);
11740
+ border-radius: 0.4375rem;
11759
11741
  }
11760
11742
 
11761
- .ProgressStepper-module_stepIcon__K-fVm.ProgressStepper-module_isCompleted__l7HiL {
11762
- color: var(--color-green-500);
11743
+ .ComboBoxTrigger-module_input__TkoLg {
11744
+ outline: none;
11745
+ text-overflow: ellipsis;
11746
+ background-color: var(--color-white);
11747
+ padding: var(--spacing-8) 0;
11748
+ margin-inline-start: var(--spacing-16);
11749
+ height: 2.25rem;
11750
+ box-sizing: border-box;
11751
+ width: inherit;
11763
11752
  }
11764
11753
 
11765
- .ProgressStepper-module_stepDivider__1dq4c {
11766
- height: 0;
11767
- display: flex;
11768
- position: absolute;
11769
- flex-grow: 1;
11770
- min-width: calc(100% - var(--spacing-24));
11771
- border: solid var(--spacing-1) var(--color-gray-300);
11772
- margin: 0;
11773
- border-radius: var(--border-solid-border-radius);
11774
- inset-inline-start: 100%;
11754
+ .ComboBoxTrigger-module_small__-225Z .ComboBoxTrigger-module_input__TkoLg {
11755
+ height: 1.75rem;
11756
+ }
11775
11757
 
11776
- /* sets fron the bottom to the centre of the dot */
11777
- top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
11778
- transform: translateX(-50%);
11758
+ .ComboBoxTrigger-module_disabled__BkFJy {
11759
+ pointer-events: none;
11760
+ border: var(--spacing-2) solid var(--color-gray-300);
11761
+ background-color: var(--color-gray-100);
11779
11762
 
11780
- :dir(rtl) & {
11781
- left: unset;
11782
- right: 100%;
11783
- transform: translateX(50%);
11763
+ .ComboBoxTrigger-module_input__TkoLg {
11764
+ background-color: var(--color-gray-100);
11765
+ color: var(--color-gray-500);
11784
11766
  }
11785
11767
  }
11786
11768
 
11787
- .ProgressStepper-module_stepperDescription__KplV3 {
11788
- display: flex;
11789
- justify-content: center;
11790
- font-family: var(--typography-paragraph-small-font-family);
11791
- font-weight: var(--typography-paragraph-small-font-weight);
11792
- font-size: var(--typography-paragraph-small-font-size);
11793
- line-height: var(--typography-paragraph-small-line-height);
11769
+ .ComboBoxTrigger-module_readOnly__g6-fB {
11770
+ pointer-events: none;
11771
+ background-color: var(--color-gray-200);
11772
+ border: var(--spacing-2) solid var(--color-gray-200);
11794
11773
 
11795
- @media (width >= 768px) {
11796
- /* sr hidden styles */
11797
- position: absolute;
11798
- width: 0;
11799
- height: 0;
11800
- overflow: hidden;
11774
+ .ComboBoxTrigger-module_input__TkoLg {
11775
+ background-color: var(--color-gray-200);
11801
11776
  }
11802
11777
  }
11803
11778
 
11804
- /* Some defensive CSS for many steps on desktop screens */
11805
- @container step (width >= 4.5rem) {
11806
- .ProgressStepper-module_stepName__QvpQ4 {
11807
- display: inline;
11779
+ .ComboBoxTrigger-module_trigger__p6pcn:focus-within {
11780
+ outline-offset: var(--spacing-2);
11781
+ outline: var(--spacing-2) solid var(--color-blue-500);
11782
+ background-color: var(--color-white);
11783
+ border-radius: 0.4375rem;
11784
+
11785
+ .ComboBoxTrigger-module_input__TkoLg {
11786
+ background-color: var(--color-white);
11808
11787
  }
11809
11788
  }
11810
- }
11811
11789
 
11812
- @layer kz-components {
11813
- .FooterActions-module_footerAction__szvPs {
11814
- display: flex;
11815
- flex-grow: 1;
11816
- flex-basis: auto;
11790
+ .ComboBoxTrigger-module_trigger__p6pcn:hover:not(:focus-within) {
11791
+ border-color: var(--color-gray-600);
11792
+ background-color: var(--color-gray-200);
11793
+
11794
+ .ComboBoxTrigger-module_input__TkoLg {
11795
+ background-color: var(--color-gray-200);
11796
+ }
11817
11797
  }
11818
11798
 
11819
- .FooterActions-module_footerActionPrevious__VJ6j1 {
11820
- grid-area: prev;
11821
- justify-content: start;
11799
+ .ComboBoxTrigger-module_small__-225Z {
11800
+ height: var(--spacing-32);
11822
11801
  }
11823
11802
 
11824
- .FooterActions-module_footerActionNext__koFhj {
11825
- grid-area: next;
11826
- justify-content: end;
11803
+ .ComboBoxTrigger-module_large__kj1vw {
11804
+ height: var(--spacing-48);
11827
11805
  }
11828
- }
11829
11806
 
11830
- @layer kz-components {
11831
- .Titles-module_titles__ENQ0C {
11832
- grid-area: titles;
11807
+ .ComboBoxTrigger-module_clearButton__PlsuZ {
11808
+ background: none;
11809
+ padding: 0;
11833
11810
  display: flex;
11834
- flex-direction: column;
11835
- align-items: center;
11836
- justify-content: center;
11837
- flex-grow: 1;
11838
11811
  }
11839
11812
 
11840
- .Titles-module_pageTitle__ePjdw {
11841
- display: flex;
11842
- flex-direction: column;
11813
+ .ComboBoxTrigger-module_clearButton__PlsuZ:focus-visible {
11814
+ outline: var(--spacing-2) solid var(--color-blue-500);
11815
+ border-radius: 50%;
11843
11816
  }
11844
11817
 
11845
- .Titles-module_prefix__FEtyY {
11846
- margin-bottom: var(--spacing-4);
11818
+ .ComboBoxTrigger-module_chevronButton__rzv2v {
11819
+ background: none;
11820
+ padding-block: var(--spacing-8);
11821
+ padding-inline: var(--spacing-6) var(--spacing-16);
11822
+ display: flex;
11847
11823
  }
11848
11824
 
11849
- .Titles-module_statusTag__hmyfK {
11850
- margin-top: var(--spacing-8);
11825
+ .ComboBoxTrigger-module_hidden__zC13w {
11826
+ visibility: hidden;
11851
11827
  }
11852
11828
  }
11853
11829
 
11854
11830
  @layer kz-components {
11855
- .Actions-module_actions__JzCWB {
11856
- grid-area: actions;
11831
+ .Popover-module_popover__BjY2S {
11832
+ position: absolute;
11833
+ background-color: var(--color-white);
11834
+ border-radius: var(--spacing-8);
11835
+ padding: 0;
11836
+ box-shadow: var(--shadow-small-box-shadow);
11837
+ margin: 0;
11838
+ box-sizing: border-box;
11857
11839
  display: flex;
11858
11840
  flex-direction: column;
11859
- flex-grow: 1;
11860
- justify-content: center;
11861
- align-items: center;
11862
11841
 
11863
- @media (width >= 768px) {
11864
- flex-direction: row;
11865
- align-items: flex-start;
11866
- justify-content: flex-end;
11867
- margin-top: calc(-1 * var(--spacing-12));
11842
+ @supports (anchor-name: --anchor) {
11843
+ position-anchor: var(--position-anchor);
11844
+ margin-block: var(--spacing-4);
11845
+ position-area: var(--position-area) center;
11846
+ /* stylelint-disable-next-line declaration-property-value-no-unknown */
11847
+ width: anchor-size(width);
11868
11848
  }
11869
11849
  }
11850
+
11851
+ .Popover-module_offsetSpacing__NdPBV {
11852
+ margin-top: var(--spacing-4);
11853
+ margin-bottom: var(--spacing-4);
11854
+ }
11870
11855
  }
11871
11856
 
11872
11857
  @layer kz-components {
11873
- .Branding-module_branding__g3OoE {
11874
- grid-area: branding;
11858
+ .Select-module_topLabel__tuilO {
11875
11859
  display: flex;
11876
- justify-content: center;
11877
- padding-top: var(--spacing-4);
11860
+ flex-direction: column;
11861
+ align-items: flex-start;
11862
+ }
11878
11863
 
11879
- @media (width >=768px) {
11880
- justify-content: unset;
11881
- }
11864
+ .Select-module_sideLabel__om-vC {
11865
+ display: grid;
11866
+ grid-template-columns: auto 1fr;
11867
+ grid-template-rows: auto auto;
11868
+ column-gap: var(--spacing-12);
11869
+ align-items: center;
11882
11870
  }
11883
11871
 
11884
- .Branding-module_logo__yLHfs {
11885
- width: 7.5rem;
11872
+ .Select-module_label__X4jf- {
11873
+ grid-column: 1;
11874
+ grid-row: 1;
11875
+ }
11876
+
11877
+ .Select-module_labelTop__vE3N2 {
11878
+ margin-bottom: var(--spacing-6);
11879
+ }
11880
+
11881
+ .Select-module_selectTrigger__ibr4f {
11882
+ grid-column: 2;
11883
+ grid-row: 1;
11884
+ width: 100%;
11885
+ }
11886
+
11887
+ .Select-module_description__hOocq {
11888
+ grid-column: 2;
11889
+ grid-row: 2;
11886
11890
  }
11887
11891
  }
11888
11892
 
11889
11893
  @layer kz-components {
11890
- .Root-module_root__-1P72 {
11894
+ .ComboBox-module_topLabel__a2t80 {
11895
+ display: flex;
11896
+ flex-direction: column;
11897
+ align-items: flex-start;
11898
+ }
11899
+
11900
+ .ComboBox-module_sideLabel__B-jX4 {
11891
11901
  display: grid;
11892
- background-color: var(--color-white);
11893
- grid-template: 'branding' min-content 'titles' max-content 'actions' min-content / 1fr;
11894
- flex-grow: 1;
11895
- justify-content: center;
11902
+ grid-template-columns: auto 1fr;
11903
+ grid-template-rows: auto auto;
11904
+ gap: var(--spacing-4) var(--spacing-6);
11896
11905
  align-items: center;
11897
- text-align: center;
11898
- padding: var(--spacing-24);
11899
- gap: var(--spacing-16);
11900
- border-bottom: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
11906
+ }
11901
11907
 
11902
- @media (width >= 768px) {
11903
- align-items: start;
11904
- grid-template: 'branding titles actions' min-content / 1fr max-content 1fr;
11905
- position: sticky;
11906
- top: 0;
11907
- z-index: 1;
11908
- }
11908
+ .ComboBox-module_label__eTnD9 {
11909
+ grid-column: 1;
11910
+ grid-row: 1;
11909
11911
  }
11910
- }
11911
11912
 
11912
- @layer kz-components {
11913
- .Main-module_main__K9Z0C {
11914
- /* This is set so children will sit beneath the header and footer when sticky */
11915
- z-index: 0;
11913
+ .ComboBox-module_labelTop__h6r-z {
11914
+ margin-bottom: var(--spacing-6);
11916
11915
  }
11917
- }
11918
11916
 
11919
- @layer kz-components {
11920
- .Wrapper-module_wrapper__-tWQy {
11921
- display: grid;
11922
- grid-template-rows: min-content 1fr min-content;
11923
- position: relative;
11924
- min-height: 100vh;
11925
- background: var(--color-gray-100);
11917
+ .ComboBox-module_comboBoxTrigger__yvqGb {
11918
+ grid-column: 2;
11919
+ grid-row: 1;
11920
+ width: 100%;
11921
+ }
11922
+
11923
+ .ComboBox-module_description__MDKJ7 {
11924
+ grid-column: 2;
11925
+ grid-row: 2;
11926
11926
  }
11927
11927
  }
11928
11928