@chekinapp/ui 0.0.35 → 0.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +347 -285
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +347 -285
- package/dist/index.js.map +1 -1
- package/package.json +3 -4
- package/dist/index.css +0 -940
- package/dist/index.css.map +0 -1
package/dist/index.css
DELETED
|
@@ -1,940 +0,0 @@
|
|
|
1
|
-
/* src/accordion/Accordion.module.css */
|
|
2
|
-
.accordion__item {
|
|
3
|
-
@apply transition-colors duration-200 ease-in-out;
|
|
4
|
-
background: var(--accordion-item-bg);
|
|
5
|
-
border-color: var(--accordion-item-border);
|
|
6
|
-
border-radius: var(--accordion-item-radius);
|
|
7
|
-
border-style: solid;
|
|
8
|
-
border-width: 1px;
|
|
9
|
-
border-top-color: var(--accordion-item-divider);
|
|
10
|
-
box-shadow: 0 0 10px 0 rgba(143, 143, 143, 0.2);
|
|
11
|
-
}
|
|
12
|
-
:root[data-surface=guest] .accordion__item {
|
|
13
|
-
border-width: 0;
|
|
14
|
-
border-top-width: 1px;
|
|
15
|
-
box-shadow: none;
|
|
16
|
-
}
|
|
17
|
-
:root[data-surface=guest] .accordion__item:first-child {
|
|
18
|
-
border-top-width: 0;
|
|
19
|
-
}
|
|
20
|
-
.accordion__item[data-state=open] {
|
|
21
|
-
background: var(--accordion-item-open-bg);
|
|
22
|
-
}
|
|
23
|
-
.accordion__item[data-state=closed] {
|
|
24
|
-
background: var(--accordion-item-bg);
|
|
25
|
-
}
|
|
26
|
-
.accordion__item[data-state=closed]:hover {
|
|
27
|
-
background: var(--accordion-item-hover-bg);
|
|
28
|
-
}
|
|
29
|
-
.accordion__trigger {
|
|
30
|
-
@apply flex h-auto w-full flex-1 items-center justify-between text-left outline-none transition-colors duration-200;
|
|
31
|
-
@apply hover:no-underline disabled:pointer-events-none;
|
|
32
|
-
color: var(--accordion-trigger-color);
|
|
33
|
-
font-family: var(--accordion-trigger-font-family);
|
|
34
|
-
font-size: 18px;
|
|
35
|
-
font-weight: var(--accordion-trigger-font-weight);
|
|
36
|
-
gap: var(--accordion-trigger-gap);
|
|
37
|
-
line-height: 28px;
|
|
38
|
-
padding: 24px;
|
|
39
|
-
}
|
|
40
|
-
:root[data-surface=guest] .accordion__trigger {
|
|
41
|
-
font-size: 14px;
|
|
42
|
-
line-height: 20px;
|
|
43
|
-
padding: 16px 0;
|
|
44
|
-
}
|
|
45
|
-
@media (min-width: 479px) {
|
|
46
|
-
:root[data-surface=guest] .accordion__trigger {
|
|
47
|
-
padding-bottom: 24px;
|
|
48
|
-
padding-top: 24px;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
.accordion__trigger:focus-visible {
|
|
52
|
-
box-shadow: var(--accordion-trigger-focus-shadow);
|
|
53
|
-
}
|
|
54
|
-
.accordion__trigger:disabled {
|
|
55
|
-
opacity: var(--accordion-trigger-disabled-opacity);
|
|
56
|
-
}
|
|
57
|
-
.accordion__icon {
|
|
58
|
-
color: var(--accordion-icon-color-closed);
|
|
59
|
-
height: var(--accordion-icon-size);
|
|
60
|
-
margin-left: auto;
|
|
61
|
-
min-width: initial;
|
|
62
|
-
width: 16px;
|
|
63
|
-
}
|
|
64
|
-
.accordion__trigger[data-state=open] .accordion__icon {
|
|
65
|
-
color: var(--accordion-icon-color-open);
|
|
66
|
-
}
|
|
67
|
-
:root[data-surface=guest] .accordion__icon {
|
|
68
|
-
width: 12px;
|
|
69
|
-
}
|
|
70
|
-
.accordion__icon svg {
|
|
71
|
-
height: var(--accordion-icon-size);
|
|
72
|
-
transition: transform 0.2s;
|
|
73
|
-
width: var(--accordion-icon-size);
|
|
74
|
-
}
|
|
75
|
-
:root[data-surface=guest] .accordion__icon svg {
|
|
76
|
-
transform: rotate(270deg);
|
|
77
|
-
}
|
|
78
|
-
:root[data-surface=guest] .accordion__trigger[data-state=open] .accordion__icon svg {
|
|
79
|
-
transform: rotate(90deg);
|
|
80
|
-
}
|
|
81
|
-
.accordion__content {
|
|
82
|
-
@apply transition-all;
|
|
83
|
-
@apply data-[state=closed]:animate-accordion-up;
|
|
84
|
-
@apply data-[state=open]:animate-accordion-down;
|
|
85
|
-
color: var(--accordion-content-color);
|
|
86
|
-
font-size: var(--accordion-content-font-size);
|
|
87
|
-
line-height: var(--accordion-content-line-height);
|
|
88
|
-
}
|
|
89
|
-
.accordion__content[data-state=closed] {
|
|
90
|
-
display: block;
|
|
91
|
-
}
|
|
92
|
-
:root[data-surface=guest] .accordion__content[data-state=closed] {
|
|
93
|
-
display: none;
|
|
94
|
-
}
|
|
95
|
-
.accordion__contentItem {
|
|
96
|
-
padding: 8px 24px 24px;
|
|
97
|
-
}
|
|
98
|
-
:root[data-surface=guest] .accordion__contentItem {
|
|
99
|
-
padding: 0;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* src/alert-box/AlertBox.module.css */
|
|
103
|
-
.alertBox {
|
|
104
|
-
border-radius: var(--alert-box-radius);
|
|
105
|
-
}
|
|
106
|
-
.alertBox--info {
|
|
107
|
-
background: var(--alert-box-info-bg);
|
|
108
|
-
}
|
|
109
|
-
.alertBox--info svg {
|
|
110
|
-
color: var(--alert-box-info-icon);
|
|
111
|
-
}
|
|
112
|
-
.alertBox--warning {
|
|
113
|
-
background: var(--alert-box-warning-bg);
|
|
114
|
-
}
|
|
115
|
-
.alertBox--warning svg {
|
|
116
|
-
color: var(--alert-box-warning-icon);
|
|
117
|
-
}
|
|
118
|
-
.alertBox--success {
|
|
119
|
-
background: var(--alert-box-success-bg);
|
|
120
|
-
color: var(--alert-box-success-text);
|
|
121
|
-
}
|
|
122
|
-
.alertBox--success svg {
|
|
123
|
-
color: var(--alert-box-success-icon);
|
|
124
|
-
}
|
|
125
|
-
.alertBox--error {
|
|
126
|
-
background: var(--alert-box-error-bg);
|
|
127
|
-
}
|
|
128
|
-
.alertBox--error svg {
|
|
129
|
-
color: var(--alert-box-error-icon);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/* src/audio-player/AudioPlayer.module.css */
|
|
133
|
-
.playButton {
|
|
134
|
-
background: var(--audio-player-button-bg);
|
|
135
|
-
border-radius: var(--audio-player-button-radius);
|
|
136
|
-
}
|
|
137
|
-
.playButton:hover {
|
|
138
|
-
background: var(--audio-player-button-hover-bg);
|
|
139
|
-
}
|
|
140
|
-
.playButton svg {
|
|
141
|
-
color: var(--audio-player-icon-color);
|
|
142
|
-
}
|
|
143
|
-
.track {
|
|
144
|
-
background: var(--audio-player-track-bg);
|
|
145
|
-
}
|
|
146
|
-
.progress {
|
|
147
|
-
background: var(--audio-player-progress-bg);
|
|
148
|
-
}
|
|
149
|
-
.time {
|
|
150
|
-
color: var(--audio-player-time-color);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
/* src/avatar/Avatar.module.css */
|
|
154
|
-
.fallback {
|
|
155
|
-
background: var(--avatar-fallback-bg);
|
|
156
|
-
color: var(--avatar-fallback-text);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
/* src/beta-badge/BetaBadge.module.css */
|
|
160
|
-
.betaBadge {
|
|
161
|
-
background: var(--beta-badge-bg);
|
|
162
|
-
color: var(--beta-badge-text);
|
|
163
|
-
}
|
|
164
|
-
.betaBadge--readonly {
|
|
165
|
-
background: var(--beta-badge-readonly-bg);
|
|
166
|
-
color: var(--beta-badge-readonly-text);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
/* src/box-option-selector/BoxOptionSelector.module.css */
|
|
170
|
-
.boxOption {
|
|
171
|
-
border-color: var(--box-option-border);
|
|
172
|
-
background: var(--box-option-bg);
|
|
173
|
-
}
|
|
174
|
-
.boxOption:hover {
|
|
175
|
-
background: var(--box-option-hover-bg);
|
|
176
|
-
}
|
|
177
|
-
.boxOption--selected {
|
|
178
|
-
border-color: var(--box-option-selected-border);
|
|
179
|
-
background: var(--box-option-selected-bg);
|
|
180
|
-
}
|
|
181
|
-
.boxOption--selected:hover {
|
|
182
|
-
background: var(--box-option-selected-bg);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
/* src/error-message/styles.module.css */
|
|
186
|
-
.ErrorMessage {
|
|
187
|
-
@apply mt-0.5 text-left text-sm font-medium;
|
|
188
|
-
color: var(--error-message-color);
|
|
189
|
-
}
|
|
190
|
-
.ErrorMessage__disabled {
|
|
191
|
-
opacity: 0.3;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
/* src/loading-bar/styles.module.css */
|
|
195
|
-
.bar {
|
|
196
|
-
animation: loading-bar 0.9s linear infinite;
|
|
197
|
-
}
|
|
198
|
-
@keyframes loading-bar {
|
|
199
|
-
0% {
|
|
200
|
-
left: -43%;
|
|
201
|
-
width: 43%;
|
|
202
|
-
}
|
|
203
|
-
70% {
|
|
204
|
-
left: 42%;
|
|
205
|
-
width: 58%;
|
|
206
|
-
}
|
|
207
|
-
100% {
|
|
208
|
-
left: 100%;
|
|
209
|
-
width: 58%;
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
/* src/form-box/FormBox.module.css */
|
|
214
|
-
.wrapper {
|
|
215
|
-
display: flex;
|
|
216
|
-
max-width: 1400px;
|
|
217
|
-
padding: 24px;
|
|
218
|
-
flex-direction: column;
|
|
219
|
-
align-items: flex-start;
|
|
220
|
-
gap: 24px;
|
|
221
|
-
align-self: stretch;
|
|
222
|
-
border: 1px solid var(--chekin-color-gray-separator);
|
|
223
|
-
border-radius: 10px;
|
|
224
|
-
container-type: inline-size;
|
|
225
|
-
}
|
|
226
|
-
.wrapperNested {
|
|
227
|
-
border: initial;
|
|
228
|
-
padding: 0;
|
|
229
|
-
}
|
|
230
|
-
.header {
|
|
231
|
-
display: flex;
|
|
232
|
-
margin: 0;
|
|
233
|
-
padding: 0;
|
|
234
|
-
align-items: center;
|
|
235
|
-
gap: 8px;
|
|
236
|
-
align-self: stretch;
|
|
237
|
-
color: var(--chekin-color-brand-navy);
|
|
238
|
-
font-size: 24px;
|
|
239
|
-
font-style: normal;
|
|
240
|
-
font-weight: 600;
|
|
241
|
-
line-height: normal;
|
|
242
|
-
}
|
|
243
|
-
.subHeader {
|
|
244
|
-
display: flex;
|
|
245
|
-
margin: 0;
|
|
246
|
-
padding: 8px 0;
|
|
247
|
-
align-items: center;
|
|
248
|
-
gap: 8px;
|
|
249
|
-
align-self: stretch;
|
|
250
|
-
border-bottom: 1px solid var(--chekin-color-gray-separator);
|
|
251
|
-
color: var(--chekin-color-brand-navy);
|
|
252
|
-
font-size: 16px;
|
|
253
|
-
font-style: normal;
|
|
254
|
-
font-weight: 600;
|
|
255
|
-
line-height: normal;
|
|
256
|
-
}
|
|
257
|
-
.content {
|
|
258
|
-
display: flex;
|
|
259
|
-
align-items: flex-start;
|
|
260
|
-
align-content: flex-start;
|
|
261
|
-
gap: 16px;
|
|
262
|
-
align-self: stretch;
|
|
263
|
-
flex-wrap: wrap;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
/* src/free-text-field/styles.module.css */
|
|
267
|
-
.container {
|
|
268
|
-
position: relative;
|
|
269
|
-
display: flex;
|
|
270
|
-
flex-direction: column;
|
|
271
|
-
gap: 4px;
|
|
272
|
-
width: 300px;
|
|
273
|
-
font-family: var(--chekin-font-family-primary);
|
|
274
|
-
}
|
|
275
|
-
.labelRow {
|
|
276
|
-
display: flex;
|
|
277
|
-
gap: 4px;
|
|
278
|
-
align-items: center;
|
|
279
|
-
}
|
|
280
|
-
.labelText,
|
|
281
|
-
.optionalText {
|
|
282
|
-
font-size: 16px;
|
|
283
|
-
line-height: 16px;
|
|
284
|
-
color: var(--chekin-color-brand-navy);
|
|
285
|
-
}
|
|
286
|
-
.labelText {
|
|
287
|
-
font-weight: 500;
|
|
288
|
-
}
|
|
289
|
-
.optionalText em {
|
|
290
|
-
color: var(--chekin-color-gray-2);
|
|
291
|
-
}
|
|
292
|
-
.tooltip {
|
|
293
|
-
width: 16px;
|
|
294
|
-
height: 16px;
|
|
295
|
-
flex-shrink: 0;
|
|
296
|
-
}
|
|
297
|
-
.fieldBox {
|
|
298
|
-
position: relative;
|
|
299
|
-
display: flex;
|
|
300
|
-
align-items: center;
|
|
301
|
-
gap: 10px;
|
|
302
|
-
height: 44px;
|
|
303
|
-
padding: 10px 14px;
|
|
304
|
-
border: 1px solid;
|
|
305
|
-
border-radius: 8px;
|
|
306
|
-
transition: border-color 0.15s ease, background-color 0.15s ease;
|
|
307
|
-
}
|
|
308
|
-
.fieldBoxEmpty {
|
|
309
|
-
background-color: var(--chekin-color-surface-input-empty);
|
|
310
|
-
border-color: rgba(22, 22, 67, 0.2);
|
|
311
|
-
}
|
|
312
|
-
.fieldBoxFilled {
|
|
313
|
-
background-color: white;
|
|
314
|
-
border-color: var(--chekin-color-brand-navy);
|
|
315
|
-
}
|
|
316
|
-
.fieldBoxErrorWrong {
|
|
317
|
-
background-color: white;
|
|
318
|
-
border-color: var(--error-message-color);
|
|
319
|
-
}
|
|
320
|
-
.fieldBoxAutocompleted {
|
|
321
|
-
background-color: var(--chekin-color-surface-autocomplete);
|
|
322
|
-
border-color: var(--chekin-color-brand-navy);
|
|
323
|
-
}
|
|
324
|
-
.fieldBoxFocused {
|
|
325
|
-
border-color: var(--chekin-color-brand-blue);
|
|
326
|
-
}
|
|
327
|
-
.input {
|
|
328
|
-
flex: 1 0 0;
|
|
329
|
-
min-width: 0;
|
|
330
|
-
min-height: 1px;
|
|
331
|
-
padding: 0;
|
|
332
|
-
border: none;
|
|
333
|
-
background: transparent;
|
|
334
|
-
color: var(--chekin-color-brand-navy);
|
|
335
|
-
font: inherit;
|
|
336
|
-
font-size: 16px;
|
|
337
|
-
font-weight: 500;
|
|
338
|
-
line-height: 20px;
|
|
339
|
-
outline: none;
|
|
340
|
-
}
|
|
341
|
-
.input::placeholder {
|
|
342
|
-
color: var(--chekin-color-gray-1);
|
|
343
|
-
font-weight: 500;
|
|
344
|
-
}
|
|
345
|
-
.icon {
|
|
346
|
-
display: flex;
|
|
347
|
-
flex-shrink: 0;
|
|
348
|
-
align-items: center;
|
|
349
|
-
justify-content: center;
|
|
350
|
-
width: 24px;
|
|
351
|
-
height: 24px;
|
|
352
|
-
}
|
|
353
|
-
.supportingText {
|
|
354
|
-
margin: 0;
|
|
355
|
-
color: var(--chekin-color-gray-2);
|
|
356
|
-
font-size: 12px;
|
|
357
|
-
font-style: italic;
|
|
358
|
-
line-height: normal;
|
|
359
|
-
}
|
|
360
|
-
.errorText {
|
|
361
|
-
margin: 0;
|
|
362
|
-
color: var(--error-message-color);
|
|
363
|
-
font-size: 12px;
|
|
364
|
-
font-weight: 500;
|
|
365
|
-
line-height: 16px;
|
|
366
|
-
text-align: right;
|
|
367
|
-
}
|
|
368
|
-
.floatingLabel {
|
|
369
|
-
position: absolute;
|
|
370
|
-
top: -8px;
|
|
371
|
-
left: 13px;
|
|
372
|
-
display: flex;
|
|
373
|
-
align-items: center;
|
|
374
|
-
height: 16px;
|
|
375
|
-
padding: 0 3px;
|
|
376
|
-
background:
|
|
377
|
-
linear-gradient(
|
|
378
|
-
to bottom,
|
|
379
|
-
transparent 50%,
|
|
380
|
-
white 50%);
|
|
381
|
-
pointer-events: none;
|
|
382
|
-
}
|
|
383
|
-
.floatingLabelAutocompleted {
|
|
384
|
-
background:
|
|
385
|
-
linear-gradient(
|
|
386
|
-
to bottom,
|
|
387
|
-
rgb(239 246 255 / 0%) 50%,
|
|
388
|
-
var(--chekin-color-surface-autocomplete) 50%);
|
|
389
|
-
}
|
|
390
|
-
.floatingLabelText {
|
|
391
|
-
color: var(--chekin-color-gray-1);
|
|
392
|
-
font-size: 14px;
|
|
393
|
-
font-weight: 500;
|
|
394
|
-
line-height: 24px;
|
|
395
|
-
white-space: nowrap;
|
|
396
|
-
}
|
|
397
|
-
.floatingLabelTextError {
|
|
398
|
-
color: var(--error-message-color);
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
/* src/metric-card/MetricCard.module.css */
|
|
402
|
-
.MetricCard {
|
|
403
|
-
@apply flex w-full min-w-52 gap-2 rounded-lg border border-[var(--chekin-color-gray-3)] p-4;
|
|
404
|
-
}
|
|
405
|
-
.MetricCard--loading {
|
|
406
|
-
@apply cursor-progress opacity-60;
|
|
407
|
-
}
|
|
408
|
-
.MetricCard__iconContainer {
|
|
409
|
-
@apply flex h-6 w-6 shrink-0 items-center justify-center rounded-full mix-blend-multiply;
|
|
410
|
-
}
|
|
411
|
-
.MetricCard__content {
|
|
412
|
-
@apply flex flex-1 flex-col gap-4;
|
|
413
|
-
}
|
|
414
|
-
.MetricCard__header {
|
|
415
|
-
@apply flex items-center gap-1;
|
|
416
|
-
}
|
|
417
|
-
.MetricCard__title {
|
|
418
|
-
@apply whitespace-nowrap text-base font-medium leading-6 text-[var(--chekin-color-brand-navy)];
|
|
419
|
-
}
|
|
420
|
-
.MetricCard__tooltip {
|
|
421
|
-
@apply text-[var(--chekin-color-gray-1)];
|
|
422
|
-
}
|
|
423
|
-
.MetricCard__footer {
|
|
424
|
-
@apply flex items-center justify-between gap-2;
|
|
425
|
-
}
|
|
426
|
-
.MetricCard__value {
|
|
427
|
-
@apply text-2xl font-bold leading-6;
|
|
428
|
-
}
|
|
429
|
-
.MetricCard--blue {
|
|
430
|
-
color: #385cf8;
|
|
431
|
-
background:
|
|
432
|
-
linear-gradient(
|
|
433
|
-
122deg,
|
|
434
|
-
#e6f0ff 36.37%,
|
|
435
|
-
#f6f9ff 86.4%);
|
|
436
|
-
}
|
|
437
|
-
.MetricCard--blue .MetricCard__iconContainer {
|
|
438
|
-
background: #dbeafe;
|
|
439
|
-
}
|
|
440
|
-
.MetricCard--green {
|
|
441
|
-
color: #2bc29f;
|
|
442
|
-
background:
|
|
443
|
-
linear-gradient(
|
|
444
|
-
122deg,
|
|
445
|
-
#ddfbf4 36.37%,
|
|
446
|
-
#f5fefc 86.4%);
|
|
447
|
-
}
|
|
448
|
-
.MetricCard--green .MetricCard__iconContainer {
|
|
449
|
-
background: #cff9ef;
|
|
450
|
-
}
|
|
451
|
-
.MetricCard--orange {
|
|
452
|
-
color: #f5721a;
|
|
453
|
-
background:
|
|
454
|
-
linear-gradient(
|
|
455
|
-
122deg,
|
|
456
|
-
#ffeddc 36.37%,
|
|
457
|
-
#fffaf5 86.4%);
|
|
458
|
-
}
|
|
459
|
-
.MetricCard--orange .MetricCard__iconContainer {
|
|
460
|
-
background: #ffe5cd;
|
|
461
|
-
}
|
|
462
|
-
.MetricCard--purple {
|
|
463
|
-
color: #9a51ff;
|
|
464
|
-
background:
|
|
465
|
-
linear-gradient(
|
|
466
|
-
122deg,
|
|
467
|
-
#f5edff 36.37%,
|
|
468
|
-
#fcfaff 86.4%);
|
|
469
|
-
}
|
|
470
|
-
.MetricCard--purple .MetricCard__iconContainer {
|
|
471
|
-
background: #f0e5ff;
|
|
472
|
-
}
|
|
473
|
-
.MetricCard--yellow {
|
|
474
|
-
color: #ce8b0b;
|
|
475
|
-
background:
|
|
476
|
-
linear-gradient(
|
|
477
|
-
122deg,
|
|
478
|
-
#fff8e5 36.37%,
|
|
479
|
-
#fffbef 86.4%);
|
|
480
|
-
}
|
|
481
|
-
.MetricCard--yellow .MetricCard__iconContainer {
|
|
482
|
-
background: #ffeeb2;
|
|
483
|
-
}
|
|
484
|
-
.MetricCard__percentage {
|
|
485
|
-
@apply inline-flex items-center gap-x-1 text-base font-semibold leading-6 text-[#059669];
|
|
486
|
-
}
|
|
487
|
-
.MetricCard__percentage.--negative {
|
|
488
|
-
@apply text-[var(--chekin-color-brand-red)];
|
|
489
|
-
}
|
|
490
|
-
|
|
491
|
-
/* src/modal/styles.module.css */
|
|
492
|
-
.modal__content {
|
|
493
|
-
@apply flex h-auto min-w-[340px] w-auto flex-col items-center gap-y-6 rounded-md bg-[var(--chekin-color-white)] text-center;
|
|
494
|
-
color: var(--chekin-color-brand-navy);
|
|
495
|
-
}
|
|
496
|
-
.modal__contentCompact {
|
|
497
|
-
@apply min-w-0;
|
|
498
|
-
width: 360px;
|
|
499
|
-
}
|
|
500
|
-
.modal__close {
|
|
501
|
-
@apply absolute right-4 top-4 z-10 rounded-full p-1 hover:bg-[#f4f6f8];
|
|
502
|
-
color: var(--chekin-color-brand-blue);
|
|
503
|
-
}
|
|
504
|
-
.modal__icon {
|
|
505
|
-
@apply mx-auto mt-4;
|
|
506
|
-
user-select: none;
|
|
507
|
-
}
|
|
508
|
-
.modal__title {
|
|
509
|
-
@apply px-6 text-lg font-bold;
|
|
510
|
-
}
|
|
511
|
-
.modal__text {
|
|
512
|
-
@apply text-base;
|
|
513
|
-
}
|
|
514
|
-
.modal__buttonsWrapper {
|
|
515
|
-
@apply mb-2 mt-6 flex flex-col items-center justify-center gap-y-4;
|
|
516
|
-
}
|
|
517
|
-
.modal__button {
|
|
518
|
-
@apply min-w-[210px];
|
|
519
|
-
}
|
|
520
|
-
|
|
521
|
-
/* src/radio/styles.module.css */
|
|
522
|
-
.radio__wrapper {
|
|
523
|
-
@apply flex cursor-pointer items-center gap-2;
|
|
524
|
-
}
|
|
525
|
-
.radio__wrapper_disabled {
|
|
526
|
-
@apply cursor-default opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
/* src/rating-radio-group/styles.module.css */
|
|
530
|
-
.RatingRadioGroup__input {
|
|
531
|
-
position: absolute;
|
|
532
|
-
width: 0;
|
|
533
|
-
height: 0;
|
|
534
|
-
opacity: 0;
|
|
535
|
-
}
|
|
536
|
-
.RatingRadioGroup__star {
|
|
537
|
-
cursor: pointer;
|
|
538
|
-
}
|
|
539
|
-
.RatingRadioGroup .RatingRadioGroup__legend {
|
|
540
|
-
margin-bottom: 8px;
|
|
541
|
-
}
|
|
542
|
-
.RatingRadioGroup {
|
|
543
|
-
all: unset;
|
|
544
|
-
position: relative;
|
|
545
|
-
}
|
|
546
|
-
.RatingRadioGroup__list {
|
|
547
|
-
display: flex;
|
|
548
|
-
gap: 8px;
|
|
549
|
-
}
|
|
550
|
-
.RatingRadioGroup__label input[type=radio]:focus-visible + .RatingRadioGroup__star {
|
|
551
|
-
outline: 2px solid #385bf8;
|
|
552
|
-
outline-offset: 2px;
|
|
553
|
-
border-radius: 4px;
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
/* src/section/Section.module.css */
|
|
557
|
-
.section {
|
|
558
|
-
@apply mb-6 box-border flex w-full cursor-default flex-col gap-6 rounded-lg border border-solid border-[var(--chekin-color-gray-3)] bg-white px-6 py-10;
|
|
559
|
-
}
|
|
560
|
-
.section_loading {
|
|
561
|
-
@apply cursor-progress;
|
|
562
|
-
}
|
|
563
|
-
.section_disabled {
|
|
564
|
-
@apply pointer-events-none opacity-50;
|
|
565
|
-
}
|
|
566
|
-
.section__header {
|
|
567
|
-
@apply flex flex-col gap-2;
|
|
568
|
-
}
|
|
569
|
-
.section__title {
|
|
570
|
-
@apply flex max-w-[85%] items-center text-lg font-bold text-[var(--chekin-color-brand-navy)] md:max-w-full;
|
|
571
|
-
}
|
|
572
|
-
.section__titleTooltip {
|
|
573
|
-
@apply ml-2.5;
|
|
574
|
-
}
|
|
575
|
-
.section__titleLink {
|
|
576
|
-
@apply ml-6 text-sm font-semibold text-[var(--chekin-color-brand-blue)] no-underline hover:opacity-70 active:opacity-100;
|
|
577
|
-
}
|
|
578
|
-
.section__subtitleWrapper {
|
|
579
|
-
@apply w-full max-w-[720px] md:max-w-full;
|
|
580
|
-
}
|
|
581
|
-
.section__subtitle {
|
|
582
|
-
@apply inline text-base font-normal text-[var(--chekin-color-gray-1)];
|
|
583
|
-
}
|
|
584
|
-
.section__subtitleTooltip {
|
|
585
|
-
@apply ml-1.5 inline-block align-text-top;
|
|
586
|
-
}
|
|
587
|
-
.section__loader {
|
|
588
|
-
@apply mx-auto mb-3 mt-2.5;
|
|
589
|
-
}
|
|
590
|
-
.section_sub {
|
|
591
|
-
@apply m-0 box-border rounded-none border-none bg-transparent p-0;
|
|
592
|
-
}
|
|
593
|
-
.section_sub .section__title {
|
|
594
|
-
@apply text-base font-semibold;
|
|
595
|
-
}
|
|
596
|
-
.section_sub .section__titleLarge {
|
|
597
|
-
@apply text-lg font-bold;
|
|
598
|
-
}
|
|
599
|
-
.section_dividing {
|
|
600
|
-
border: none;
|
|
601
|
-
border-top: 1px solid #f1f1f1;
|
|
602
|
-
padding-top: 24px;
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
/* src/selector-button/styles.module.css */
|
|
606
|
-
.styledButton {
|
|
607
|
-
box-sizing: border-box;
|
|
608
|
-
display: flex;
|
|
609
|
-
align-items: center;
|
|
610
|
-
min-width: 117px;
|
|
611
|
-
height: 48px;
|
|
612
|
-
padding: 0 16px;
|
|
613
|
-
border: 1px solid #cecede;
|
|
614
|
-
border-radius: 6px;
|
|
615
|
-
background-color: #f2f2fa;
|
|
616
|
-
color: #9696b9;
|
|
617
|
-
cursor: pointer;
|
|
618
|
-
font-size: 15px;
|
|
619
|
-
font-weight: 600;
|
|
620
|
-
outline: none;
|
|
621
|
-
text-align: left;
|
|
622
|
-
user-select: none;
|
|
623
|
-
transition: all 75ms ease-in-out;
|
|
624
|
-
}
|
|
625
|
-
.styledButton input {
|
|
626
|
-
position: absolute;
|
|
627
|
-
width: 0;
|
|
628
|
-
height: 0;
|
|
629
|
-
opacity: 0;
|
|
630
|
-
cursor: pointer;
|
|
631
|
-
}
|
|
632
|
-
.styledButton.disabled {
|
|
633
|
-
cursor: not-allowed;
|
|
634
|
-
opacity: 0.3;
|
|
635
|
-
}
|
|
636
|
-
.styledButton.loading {
|
|
637
|
-
cursor: progress;
|
|
638
|
-
}
|
|
639
|
-
.styledButton:not(.disabled):hover {
|
|
640
|
-
border-color: #385bf8;
|
|
641
|
-
}
|
|
642
|
-
.styledButton:not(.disabled):active {
|
|
643
|
-
opacity: 1;
|
|
644
|
-
}
|
|
645
|
-
.styledButton.readOnly {
|
|
646
|
-
cursor: default;
|
|
647
|
-
}
|
|
648
|
-
.styledButton.readOnly:not(.active):hover {
|
|
649
|
-
border-color: transparent;
|
|
650
|
-
}
|
|
651
|
-
.styledButton.active {
|
|
652
|
-
border-color: #385bf8;
|
|
653
|
-
background: white;
|
|
654
|
-
color: #385bf8;
|
|
655
|
-
}
|
|
656
|
-
.content {
|
|
657
|
-
display: flex;
|
|
658
|
-
align-items: center;
|
|
659
|
-
height: 100%;
|
|
660
|
-
}
|
|
661
|
-
|
|
662
|
-
/* src/selectors/styles.module.css */
|
|
663
|
-
.selectorsWrapperTab {
|
|
664
|
-
@apply box-border flex h-auto max-h-none w-fit flex-wrap items-center rounded-md border border-[var(--chekin-color-gray-3)];
|
|
665
|
-
background: var(--chekin-color-surface-input-empty) 0 0 no-repeat padding-box;
|
|
666
|
-
}
|
|
667
|
-
.selectorsWrapperDefault {
|
|
668
|
-
@apply flex w-full flex-wrap;
|
|
669
|
-
margin-bottom: -10px;
|
|
670
|
-
}
|
|
671
|
-
.selectorsWrapperDefault .selectorButton {
|
|
672
|
-
@apply mb-[10px] mr-[10px];
|
|
673
|
-
}
|
|
674
|
-
.selectorButton {
|
|
675
|
-
@apply box-border whitespace-nowrap border border-transparent bg-transparent text-[15px] font-medium;
|
|
676
|
-
color: var(--chekin-color-gray-1);
|
|
677
|
-
min-width: auto;
|
|
678
|
-
box-shadow: none;
|
|
679
|
-
padding: 8px 21px;
|
|
680
|
-
margin: 2px;
|
|
681
|
-
min-height: 36px;
|
|
682
|
-
transition-duration: 0s;
|
|
683
|
-
flex: 1;
|
|
684
|
-
}
|
|
685
|
-
.selectorButton > div {
|
|
686
|
-
@apply mx-auto my-0;
|
|
687
|
-
}
|
|
688
|
-
.selectorButton:not(.active):hover {
|
|
689
|
-
@apply border-transparent text-white;
|
|
690
|
-
background: var(--chekin-color-brand-blue);
|
|
691
|
-
opacity: 0.35;
|
|
692
|
-
}
|
|
693
|
-
.selectorButton.active {
|
|
694
|
-
@apply cursor-default font-semibold text-white;
|
|
695
|
-
background: var(--chekin-color-brand-blue);
|
|
696
|
-
box-shadow: 0 3px 4px #00020334;
|
|
697
|
-
border-color: var(--chekin-color-brand-blue);
|
|
698
|
-
}
|
|
699
|
-
.selectorButton.active:hover {
|
|
700
|
-
@apply opacity-100;
|
|
701
|
-
box-shadow: 0 3px 4px #00020334;
|
|
702
|
-
}
|
|
703
|
-
.selectorButton.readOnly:not(.active) {
|
|
704
|
-
@apply cursor-default;
|
|
705
|
-
color: var(--chekin-color-gray-1);
|
|
706
|
-
}
|
|
707
|
-
.selectorButton.readOnly:not(.active):hover {
|
|
708
|
-
background: initial;
|
|
709
|
-
color: var(--chekin-color-gray-1);
|
|
710
|
-
}
|
|
711
|
-
.selectorButton.sizeSm {
|
|
712
|
-
@apply py-[7px] text-[14px] font-medium leading-6;
|
|
713
|
-
}
|
|
714
|
-
.selectorButton.active.sizeSm {
|
|
715
|
-
@apply py-[7px] text-[14px] font-bold leading-6;
|
|
716
|
-
}
|
|
717
|
-
.labelWrapper {
|
|
718
|
-
@apply flex;
|
|
719
|
-
}
|
|
720
|
-
.labelWrapper span {
|
|
721
|
-
@apply ml-[5px];
|
|
722
|
-
}
|
|
723
|
-
.name {
|
|
724
|
-
@apply box-border select-none overflow-x-hidden whitespace-nowrap text-left font-normal text-[var(--chekin-color-brand-navy)];
|
|
725
|
-
font-size: 16px;
|
|
726
|
-
min-height: 20px;
|
|
727
|
-
margin-bottom: 6px;
|
|
728
|
-
text-overflow: ellipsis;
|
|
729
|
-
}
|
|
730
|
-
|
|
731
|
-
/* src/task-card/TaskCard.module.css */
|
|
732
|
-
.TaskCard {
|
|
733
|
-
@apply relative box-border flex min-h-[48px] min-w-[360px] items-center gap-4 overflow-hidden rounded-lg p-2 transition-colors duration-200;
|
|
734
|
-
}
|
|
735
|
-
.TaskCard--error {
|
|
736
|
-
@apply bg-red-50;
|
|
737
|
-
}
|
|
738
|
-
.TaskCard--warning {
|
|
739
|
-
@apply bg-amber-50;
|
|
740
|
-
}
|
|
741
|
-
.TaskCard--clickable {
|
|
742
|
-
@apply cursor-pointer;
|
|
743
|
-
}
|
|
744
|
-
.TaskCard--clickable:hover::before {
|
|
745
|
-
@apply pointer-events-none absolute inset-0 rounded-lg content-[""];
|
|
746
|
-
}
|
|
747
|
-
.TaskCard--error.TaskCard--clickable:hover::before {
|
|
748
|
-
@apply bg-red-100 mix-blend-multiply;
|
|
749
|
-
}
|
|
750
|
-
.TaskCard--warning.TaskCard--clickable:hover::before {
|
|
751
|
-
@apply bg-amber-100 mix-blend-multiply;
|
|
752
|
-
}
|
|
753
|
-
.TaskCard__indicator {
|
|
754
|
-
@apply relative w-1 flex-shrink-0 self-stretch rounded-sm;
|
|
755
|
-
}
|
|
756
|
-
.TaskCard--error .TaskCard__indicator {
|
|
757
|
-
@apply bg-chekin-red;
|
|
758
|
-
}
|
|
759
|
-
.TaskCard--warning .TaskCard__indicator {
|
|
760
|
-
@apply bg-amber-500;
|
|
761
|
-
}
|
|
762
|
-
.TaskCard__content {
|
|
763
|
-
@apply flex min-w-0 flex-1 flex-col items-start;
|
|
764
|
-
}
|
|
765
|
-
.TaskCard__title {
|
|
766
|
-
@apply m-0 w-full break-words text-base font-semibold leading-6 text-chekin-navy;
|
|
767
|
-
}
|
|
768
|
-
.TaskCard__date {
|
|
769
|
-
@apply m-0 w-full text-sm font-medium leading-6 text-chekin-gray-1;
|
|
770
|
-
}
|
|
771
|
-
.TaskCard__actions {
|
|
772
|
-
@apply flex flex-shrink-0 items-center gap-1;
|
|
773
|
-
}
|
|
774
|
-
.TaskCard__count {
|
|
775
|
-
@apply relative flex h-6 w-6 items-center justify-center rounded-full text-center text-sm font-semibold leading-6;
|
|
776
|
-
}
|
|
777
|
-
.TaskCard__count::before {
|
|
778
|
-
@apply absolute inset-0 rounded-full mix-blend-multiply content-[""];
|
|
779
|
-
}
|
|
780
|
-
.TaskCard__count--error {
|
|
781
|
-
@apply text-chekin-red;
|
|
782
|
-
}
|
|
783
|
-
.TaskCard__count--error::before {
|
|
784
|
-
@apply bg-red-100;
|
|
785
|
-
}
|
|
786
|
-
.TaskCard__count--warning {
|
|
787
|
-
@apply text-amber-700;
|
|
788
|
-
}
|
|
789
|
-
.TaskCard__count--warning::before {
|
|
790
|
-
@apply bg-amber-100;
|
|
791
|
-
}
|
|
792
|
-
.TaskCard__arrowButton {
|
|
793
|
-
@apply flex h-8 w-0 min-w-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border-0 bg-transparent p-0 text-chekin-gray-1 opacity-0;
|
|
794
|
-
transition:
|
|
795
|
-
width 0.3s ease-in-out,
|
|
796
|
-
opacity 0.3s ease-in-out,
|
|
797
|
-
min-width 0.3s ease-in-out;
|
|
798
|
-
}
|
|
799
|
-
.TaskCard--clickable:hover .TaskCard__arrowButton {
|
|
800
|
-
@apply w-8 min-w-8 opacity-100;
|
|
801
|
-
}
|
|
802
|
-
.TaskCard__arrowButton:hover {
|
|
803
|
-
@apply bg-black/5;
|
|
804
|
-
}
|
|
805
|
-
.TaskCard__arrowButton:focus-visible {
|
|
806
|
-
@apply w-8 min-w-8 opacity-100 outline outline-2 outline-offset-2 outline-chekin-blue;
|
|
807
|
-
}
|
|
808
|
-
|
|
809
|
-
/* src/text-field/textField.module.css */
|
|
810
|
-
.root {
|
|
811
|
-
--text-field-height: 2.75rem;
|
|
812
|
-
--text-field-radius: 8px;
|
|
813
|
-
--text-field-padding-x: 0.875rem;
|
|
814
|
-
--text-field-padding-y: 0.625rem;
|
|
815
|
-
--text-field-bg-empty: #f4f6f8;
|
|
816
|
-
--text-field-bg-filled: #ffffff;
|
|
817
|
-
--text-field-border-empty: rgba(22, 22, 67, 0.2);
|
|
818
|
-
--text-field-border-filled: #161643;
|
|
819
|
-
--text-field-border-error: #ff2467;
|
|
820
|
-
--text-field-text: #161643;
|
|
821
|
-
--text-field-placeholder: #6b6b95;
|
|
822
|
-
--text-field-label: #161643;
|
|
823
|
-
--text-field-supporting: #9696b9;
|
|
824
|
-
--text-field-error: #ff2467;
|
|
825
|
-
--text-field-focus-ring: rgba(56, 91, 248, 0.2);
|
|
826
|
-
}
|
|
827
|
-
|
|
828
|
-
/* src/textarea/styles.module.css */
|
|
829
|
-
.container {
|
|
830
|
-
position: relative;
|
|
831
|
-
}
|
|
832
|
-
.label {
|
|
833
|
-
pointer-events: none;
|
|
834
|
-
position: absolute;
|
|
835
|
-
left: 0.75rem;
|
|
836
|
-
top: 1rem;
|
|
837
|
-
padding: 0 0.25rem;
|
|
838
|
-
color: #6b6b95;
|
|
839
|
-
transition: all 0.1s ease;
|
|
840
|
-
}
|
|
841
|
-
.container textarea:focus + .label,
|
|
842
|
-
.container textarea:not(:placeholder-shown) + .label {
|
|
843
|
-
top: -0.6rem;
|
|
844
|
-
left: 0.5rem;
|
|
845
|
-
background-color: white;
|
|
846
|
-
font-size: 14px;
|
|
847
|
-
font-weight: 500;
|
|
848
|
-
}
|
|
849
|
-
.container textarea:focus + .label {
|
|
850
|
-
color: #385bf8;
|
|
851
|
-
}
|
|
852
|
-
.labelError {
|
|
853
|
-
color: #ff2467;
|
|
854
|
-
}
|
|
855
|
-
.labelDisabled {
|
|
856
|
-
color: #9696b9;
|
|
857
|
-
}
|
|
858
|
-
.textarea {
|
|
859
|
-
box-sizing: border-box;
|
|
860
|
-
min-height: 120px;
|
|
861
|
-
width: 100%;
|
|
862
|
-
resize: none;
|
|
863
|
-
border: 1px solid #cecede;
|
|
864
|
-
border-radius: 8px;
|
|
865
|
-
background: #f4f6f8;
|
|
866
|
-
padding: 12px 16px;
|
|
867
|
-
color: #161643;
|
|
868
|
-
font: inherit;
|
|
869
|
-
outline: none;
|
|
870
|
-
scrollbar-color: #777e91 transparent;
|
|
871
|
-
scrollbar-gutter: stable;
|
|
872
|
-
}
|
|
873
|
-
.textarea:focus,
|
|
874
|
-
.textarea:not(:placeholder-shown) {
|
|
875
|
-
background-color: white;
|
|
876
|
-
}
|
|
877
|
-
.textarea::placeholder {
|
|
878
|
-
color: #6b6b95;
|
|
879
|
-
opacity: 1;
|
|
880
|
-
}
|
|
881
|
-
.textarea:focus {
|
|
882
|
-
border-color: #385bf8;
|
|
883
|
-
transition: background-color 0.1s ease-in-out;
|
|
884
|
-
}
|
|
885
|
-
.textareaError,
|
|
886
|
-
.textareaError:focus {
|
|
887
|
-
border-color: #ff2467;
|
|
888
|
-
}
|
|
889
|
-
.textareaDisabled {
|
|
890
|
-
cursor: not-allowed;
|
|
891
|
-
resize: none;
|
|
892
|
-
border-color: #9696b9;
|
|
893
|
-
background-color: #f4f6f8;
|
|
894
|
-
color: #9696b9;
|
|
895
|
-
}
|
|
896
|
-
.textareaDisabled::placeholder {
|
|
897
|
-
color: #9696b9;
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
/* src/three-dots-loader/styles.module.css */
|
|
901
|
-
.Loader {
|
|
902
|
-
display: flex;
|
|
903
|
-
align-items: center;
|
|
904
|
-
justify-content: center;
|
|
905
|
-
column-gap: 13px;
|
|
906
|
-
}
|
|
907
|
-
.Loader > div {
|
|
908
|
-
color: #9696b9;
|
|
909
|
-
font-size: 14px;
|
|
910
|
-
font-weight: 700;
|
|
911
|
-
opacity: 0.5;
|
|
912
|
-
text-transform: uppercase;
|
|
913
|
-
}
|
|
914
|
-
.dots {
|
|
915
|
-
display: inline-flex;
|
|
916
|
-
align-items: center;
|
|
917
|
-
justify-content: center;
|
|
918
|
-
gap: 15%;
|
|
919
|
-
}
|
|
920
|
-
.dot {
|
|
921
|
-
width: 22%;
|
|
922
|
-
height: 22%;
|
|
923
|
-
border-radius: 9999px;
|
|
924
|
-
animation: three-dots 1.1s infinite ease-in-out both;
|
|
925
|
-
}
|
|
926
|
-
.dot:nth-child(1) {
|
|
927
|
-
animation-delay: -0.32s;
|
|
928
|
-
}
|
|
929
|
-
.dot:nth-child(2) {
|
|
930
|
-
animation-delay: -0.16s;
|
|
931
|
-
}
|
|
932
|
-
@keyframes three-dots {
|
|
933
|
-
0%, 80%, 100% {
|
|
934
|
-
transform: scale(0);
|
|
935
|
-
}
|
|
936
|
-
40% {
|
|
937
|
-
transform: scale(1);
|
|
938
|
-
}
|
|
939
|
-
}
|
|
940
|
-
/*# sourceMappingURL=index.css.map */
|