survey-react 1.9.112 → 1.9.113

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 (14) hide show
  1. package/defaultV2.css +389 -339
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +245 -125
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +1 -1
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +1 -1
  11. package/survey.react.d.ts +276 -93
  12. package/survey.react.js +244 -128
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.112
2
+ * surveyjs - Survey JavaScript library v1.9.113
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -119,7 +119,7 @@ sv-popup {
119
119
  max-width: 100vw;
120
120
  }
121
121
 
122
- .sv-popup.sv-popup--modal {
122
+ .sv-popup--modal {
123
123
  display: flex;
124
124
  align-items: center;
125
125
  justify-content: center;
@@ -127,7 +127,7 @@ sv-popup {
127
127
  padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
128
128
  box-sizing: border-box;
129
129
  }
130
- .sv-popup.sv-popup--modal .sv-popup__body-content {
130
+ .sv-popup--modal .sv-popup__body-content {
131
131
  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
132
132
  height: auto;
133
133
  }
@@ -149,7 +149,8 @@ sv-popup {
149
149
  font-size: var(--sjs-font-size, 16px);
150
150
  font-style: normal;
151
151
  font-weight: 400;
152
- line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
152
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
153
+ /* 150% */
153
154
  }
154
155
  .sv-popup--confirm-delete .sv-popup__scrolling-content {
155
156
  display: none;
@@ -161,15 +162,15 @@ sv-popup {
161
162
  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
162
163
  }
163
164
 
164
- .sv-popup.sv-popup--modal > .sv-popup__container {
165
+ .sv-popup--modal > .sv-popup__container {
165
166
  position: static;
166
167
  }
167
168
 
168
- .sv-popup--overlay.sv-popup--overlay {
169
+ .sv-popup--overlay {
169
170
  width: 100%;
170
171
  height: var(--sv-popup-overlay-height, 100vh);
171
172
  }
172
- .sv-popup--overlay.sv-popup--overlay .sv-popup__container {
173
+ .sv-popup--overlay .sv-popup__container {
173
174
  background: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
174
175
  max-width: 100vw;
175
176
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -178,7 +179,7 @@ sv-popup {
178
179
  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
179
180
  border: unset;
180
181
  }
181
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
182
+ .sv-popup--overlay .sv-popup__body-content {
182
183
  max-height: var(--sv-popup-overlay-height, 100vh);
183
184
  max-width: 100vw;
184
185
  border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
@@ -187,25 +188,25 @@ sv-popup {
187
188
  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
188
189
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
189
190
  }
190
- .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
191
+ .sv-popup--overlay .sv-popup__scrolling-content {
191
192
  height: calc(100% - 10 * var(--base-unit, 8px));
192
193
  }
193
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
194
+ .sv-popup--overlay .sv-popup__body-footer {
194
195
  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
195
196
  }
196
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
197
+ .sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
197
198
  width: 100%;
198
199
  }
199
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer-item {
200
+ .sv-popup--overlay .sv-popup__body-footer-item {
200
201
  width: 100%;
201
202
  }
202
- .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
203
+ .sv-popup--overlay .sv-popup__button.sv-popup__button {
203
204
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
204
205
  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
205
206
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
206
207
  }
207
208
 
208
- .sv-popup--overlay.sv-popup--overlay:not(.sv-dropdown-popup) .sv-popup__body-footer .sv-action {
209
+ .sv-popup--overlay .sv-popup__body-footer .sv-action {
209
210
  flex: 1 0 0;
210
211
  }
211
212
 
@@ -308,66 +309,97 @@ sv-popup {
308
309
  top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
309
310
  }
310
311
 
311
- .sv-dropdown-popup.sv-popup--overlay {
312
+ .sv-popup--dropdown .sv-list__filter {
313
+ margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
314
+ }
315
+ .sv-popup--dropdown .sv-popup__shadow {
316
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
317
+ }
318
+ .sv-popup--dropdown .sv-popup__body-content {
319
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
320
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
321
+ height: 100%;
322
+ }
323
+
324
+ .sv-dropdown-popup .sv-popup__body-content {
325
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
326
+ }
327
+ .sv-dropdown-popup .sv-list__filter {
328
+ margin-bottom: 0;
329
+ }
330
+
331
+ .sv-popup--modal .sv-popup__body-content {
332
+ box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
333
+ background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
334
+ }
335
+ .sv-popup--modal .sv-popup__body-footer {
336
+ padding-bottom: 2px;
337
+ }
338
+
339
+ .sv-popup--overlay .sv-popup__body-content {
340
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
341
+ }
342
+
343
+ .sv-popup--dropdown-overlay {
312
344
  z-index: 2001;
313
345
  padding: 0;
314
346
  }
315
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
347
+ .sv-popup--dropdown-overlay .sv-popup__body-content {
316
348
  padding: 0;
317
349
  border-radius: 0;
318
350
  }
319
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer .sv-action-bar .sv-action {
320
- width: auto;
351
+ .sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar .sv-action {
352
+ flex: 0 0 auto;
321
353
  }
322
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
354
+ .sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
323
355
  background-color: transparent;
324
356
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
325
357
  border: none;
326
358
  box-shadow: none;
327
- padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
359
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
328
360
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
329
361
  margin: 0;
330
362
  }
331
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
363
+ .sv-popup--dropdown-overlay .sv-popup__container {
332
364
  max-height: calc(var(--sv-popup-overlay-height, 100vh));
333
365
  height: calc(var(--sv-popup-overlay-height, 100vh));
334
366
  padding-top: 0;
335
367
  }
336
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
368
+ .sv-popup--dropdown-overlay .sv-popup__body-content {
337
369
  height: calc(var(--sv-popup-overlay-height, 100vh));
338
370
  }
339
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
340
- background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
371
+ .sv-popup--dropdown-overlay .sv-popup__body-footer {
372
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
341
373
  margin-top: 0;
342
- padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
343
- padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
374
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
375
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
344
376
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
345
377
  }
346
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
378
+ .sv-popup--dropdown-overlay .sv-popup__scrolling-content {
347
379
  height: calc(100% - 6 * var(--base-unit, 8px));
348
380
  }
349
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
350
- width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
351
- height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
381
+ .sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
382
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
383
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
352
384
  }
353
- .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
385
+ .sv-popup--dropdown-overlay .sv-list__container {
354
386
  padding: 0;
355
387
  }
356
- .sv-dropdown-popup.sv-popup--overlay .sv-list {
388
+ .sv-popup--dropdown-overlay .sv-list {
357
389
  flex-grow: 1;
358
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
390
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
359
391
  }
360
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
392
+ .sv-popup--dropdown-overlay .sv-list__filter {
361
393
  display: flex;
362
394
  align-items: center;
363
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
395
+ margin-bottom: 0;
396
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
364
397
  }
365
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
398
+ .sv-popup--dropdown-overlay .sv-list__filter-icon {
366
399
  position: static;
367
- top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
368
- height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
400
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
369
401
  }
370
- .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
402
+ .sv-popup--dropdown-overlay .sv-list__empty-container {
371
403
  display: flex;
372
404
  flex-direction: column;
373
405
  justify-content: center;
@@ -375,12 +407,12 @@ sv-popup {
375
407
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
376
408
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
377
409
  }
378
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
410
+ .sv-popup--dropdown-overlay .sv-popup__button:disabled {
379
411
  pointer-events: none;
380
412
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
381
413
  opacity: 0.25;
382
414
  }
383
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
415
+ .sv-popup--dropdown-overlay .sv-list__filter-clear-button {
384
416
  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
385
417
  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
386
418
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -389,42 +421,70 @@ sv-popup {
389
421
  border-radius: 100%;
390
422
  background-color: transparent;
391
423
  }
392
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
424
+ .sv-popup--dropdown-overlay .sv-list__filter-clear-button svg {
393
425
  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
394
426
  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
395
427
  }
396
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
428
+ .sv-popup--dropdown-overlay .sv-list__filter-clear-button svg use {
397
429
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
398
430
  }
399
- .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
431
+ .sv-popup--dropdown-overlay .sv-list__input {
400
432
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
401
433
  font-size: var(--sjs-font-size, 16px);
402
434
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
403
435
  font-family: var(--font-family);
404
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
436
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
405
437
  }
406
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
407
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
408
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused .sv-list__item-body {
438
+ .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
439
+ .sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-body,
440
+ .sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-body {
409
441
  background: var(--sjs-general-backcolor, var(--background, #fff));
410
442
  }
411
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
412
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
413
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
443
+ .sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
444
+ .sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
445
+ .sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
414
446
  background: var(--sjs-primary-backcolor, var(--primary, #19b394));
415
447
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
416
448
  font-weight: 600;
417
449
  }
450
+ .sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar {
451
+ justify-content: flex-start;
452
+ }
453
+
454
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter {
455
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
456
+ }
457
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list {
458
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
459
+ }
460
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
461
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
462
+ }
463
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__body-footer {
464
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
465
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
466
+ background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
467
+ }
468
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
469
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
470
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
471
+ }
472
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon {
473
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
474
+ }
475
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__input {
476
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
477
+ }
418
478
 
419
- .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
420
- .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
421
- .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
479
+ .sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
480
+ .sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
481
+ .sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
422
482
  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
423
483
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
424
484
  font-weight: 400;
425
485
  }
426
486
 
427
- .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
487
+ .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content {
428
488
  --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
429
489
  --sv-popup-overlay-max-width: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
430
490
  position: absolute;
@@ -432,7 +492,7 @@ sv-popup {
432
492
  left: 50%;
433
493
  top: 50%;
434
494
  max-height: var(--sv-popup-overlay-max-height);
435
- min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
495
+ min-height: min(var(--sv-popup-overlay-max-height), 30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
436
496
  height: auto;
437
497
  width: auto;
438
498
  min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
@@ -441,9 +501,9 @@ sv-popup {
441
501
  overflow: hidden;
442
502
  margin: 0;
443
503
  }
444
- .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
445
- .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
446
- .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-list__container {
504
+ .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
505
+ .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
506
+ .sv-popup--dropdown-overlay.sv-popup--tablet .sv-list__container {
447
507
  flex-grow: 1;
448
508
  }
449
509
 
@@ -2764,7 +2824,7 @@ sv-popup {
2764
2824
  max-width: 100vw;
2765
2825
  }
2766
2826
 
2767
- .sv-popup.sv-popup--modal {
2827
+ .sv-popup--modal {
2768
2828
  display: flex;
2769
2829
  align-items: center;
2770
2830
  justify-content: center;
@@ -2772,7 +2832,7 @@ sv-popup {
2772
2832
  padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2773
2833
  box-sizing: border-box;
2774
2834
  }
2775
- .sv-popup.sv-popup--modal .sv-popup__body-content {
2835
+ .sv-popup--modal .sv-popup__body-content {
2776
2836
  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2777
2837
  height: auto;
2778
2838
  }
@@ -2794,7 +2854,8 @@ sv-popup {
2794
2854
  font-size: var(--sjs-font-size, 16px);
2795
2855
  font-style: normal;
2796
2856
  font-weight: 400;
2797
- line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
2857
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2858
+ /* 150% */
2798
2859
  }
2799
2860
  .sv-popup--confirm-delete .sv-popup__scrolling-content {
2800
2861
  display: none;
@@ -2806,15 +2867,15 @@ sv-popup {
2806
2867
  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2807
2868
  }
2808
2869
 
2809
- .sv-popup.sv-popup--modal > .sv-popup__container {
2870
+ .sv-popup--modal > .sv-popup__container {
2810
2871
  position: static;
2811
2872
  }
2812
2873
 
2813
- .sv-popup--overlay.sv-popup--overlay {
2874
+ .sv-popup--overlay {
2814
2875
  width: 100%;
2815
2876
  height: var(--sv-popup-overlay-height, 100vh);
2816
2877
  }
2817
- .sv-popup--overlay.sv-popup--overlay .sv-popup__container {
2878
+ .sv-popup--overlay .sv-popup__container {
2818
2879
  background: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
2819
2880
  max-width: 100vw;
2820
2881
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2823,7 +2884,7 @@ sv-popup {
2823
2884
  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2824
2885
  border: unset;
2825
2886
  }
2826
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
2887
+ .sv-popup--overlay .sv-popup__body-content {
2827
2888
  max-height: var(--sv-popup-overlay-height, 100vh);
2828
2889
  max-width: 100vw;
2829
2890
  border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
@@ -2832,25 +2893,25 @@ sv-popup {
2832
2893
  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2833
2894
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2834
2895
  }
2835
- .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
2896
+ .sv-popup--overlay .sv-popup__scrolling-content {
2836
2897
  height: calc(100% - 10 * var(--base-unit, 8px));
2837
2898
  }
2838
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
2899
+ .sv-popup--overlay .sv-popup__body-footer {
2839
2900
  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2840
2901
  }
2841
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
2902
+ .sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
2842
2903
  width: 100%;
2843
2904
  }
2844
- .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer-item {
2905
+ .sv-popup--overlay .sv-popup__body-footer-item {
2845
2906
  width: 100%;
2846
2907
  }
2847
- .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
2908
+ .sv-popup--overlay .sv-popup__button.sv-popup__button {
2848
2909
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2849
2910
  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
2850
2911
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2851
2912
  }
2852
2913
 
2853
- .sv-popup--overlay.sv-popup--overlay:not(.sv-dropdown-popup) .sv-popup__body-footer .sv-action {
2914
+ .sv-popup--overlay .sv-popup__body-footer .sv-action {
2854
2915
  flex: 1 0 0;
2855
2916
  }
2856
2917
 
@@ -2953,66 +3014,97 @@ sv-popup {
2953
3014
  top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2954
3015
  }
2955
3016
 
2956
- .sv-dropdown-popup.sv-popup--overlay {
3017
+ .sv-popup--dropdown .sv-list__filter {
3018
+ margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3019
+ }
3020
+ .sv-popup--dropdown .sv-popup__shadow {
3021
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3022
+ }
3023
+ .sv-popup--dropdown .sv-popup__body-content {
3024
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3025
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
3026
+ height: 100%;
3027
+ }
3028
+
3029
+ .sv-dropdown-popup .sv-popup__body-content {
3030
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
3031
+ }
3032
+ .sv-dropdown-popup .sv-list__filter {
3033
+ margin-bottom: 0;
3034
+ }
3035
+
3036
+ .sv-popup--modal .sv-popup__body-content {
3037
+ box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3038
+ background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3039
+ }
3040
+ .sv-popup--modal .sv-popup__body-footer {
3041
+ padding-bottom: 2px;
3042
+ }
3043
+
3044
+ .sv-popup--overlay .sv-popup__body-content {
3045
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3046
+ }
3047
+
3048
+ .sv-popup--dropdown-overlay {
2957
3049
  z-index: 2001;
2958
3050
  padding: 0;
2959
3051
  }
2960
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
3052
+ .sv-popup--dropdown-overlay .sv-popup__body-content {
2961
3053
  padding: 0;
2962
3054
  border-radius: 0;
2963
3055
  }
2964
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer .sv-action-bar .sv-action {
2965
- width: auto;
3056
+ .sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar .sv-action {
3057
+ flex: 0 0 auto;
2966
3058
  }
2967
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
3059
+ .sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
2968
3060
  background-color: transparent;
2969
3061
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2970
3062
  border: none;
2971
3063
  box-shadow: none;
2972
- padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3064
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2973
3065
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2974
3066
  margin: 0;
2975
3067
  }
2976
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
3068
+ .sv-popup--dropdown-overlay .sv-popup__container {
2977
3069
  max-height: calc(var(--sv-popup-overlay-height, 100vh));
2978
3070
  height: calc(var(--sv-popup-overlay-height, 100vh));
2979
3071
  padding-top: 0;
2980
3072
  }
2981
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
3073
+ .sv-popup--dropdown-overlay .sv-popup__body-content {
2982
3074
  height: calc(var(--sv-popup-overlay-height, 100vh));
2983
3075
  }
2984
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
2985
- background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3076
+ .sv-popup--dropdown-overlay .sv-popup__body-footer {
3077
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
2986
3078
  margin-top: 0;
2987
- padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2988
- padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3079
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
3080
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
2989
3081
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
2990
3082
  }
2991
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
3083
+ .sv-popup--dropdown-overlay .sv-popup__scrolling-content {
2992
3084
  height: calc(100% - 6 * var(--base-unit, 8px));
2993
3085
  }
2994
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
2995
- width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2996
- height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3086
+ .sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
3087
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3088
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2997
3089
  }
2998
- .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
3090
+ .sv-popup--dropdown-overlay .sv-list__container {
2999
3091
  padding: 0;
3000
3092
  }
3001
- .sv-dropdown-popup.sv-popup--overlay .sv-list {
3093
+ .sv-popup--dropdown-overlay .sv-list {
3002
3094
  flex-grow: 1;
3003
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3095
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
3004
3096
  }
3005
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
3097
+ .sv-popup--dropdown-overlay .sv-list__filter {
3006
3098
  display: flex;
3007
3099
  align-items: center;
3008
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3100
+ margin-bottom: 0;
3101
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3009
3102
  }
3010
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
3103
+ .sv-popup--dropdown-overlay .sv-list__filter-icon {
3011
3104
  position: static;
3012
- top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3013
- height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3105
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3014
3106
  }
3015
- .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
3107
+ .sv-popup--dropdown-overlay .sv-list__empty-container {
3016
3108
  display: flex;
3017
3109
  flex-direction: column;
3018
3110
  justify-content: center;
@@ -3020,12 +3112,12 @@ sv-popup {
3020
3112
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3021
3113
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3022
3114
  }
3023
- .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
3115
+ .sv-popup--dropdown-overlay .sv-popup__button:disabled {
3024
3116
  pointer-events: none;
3025
3117
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3026
3118
  opacity: 0.25;
3027
3119
  }
3028
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
3120
+ .sv-popup--dropdown-overlay .sv-list__filter-clear-button {
3029
3121
  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3030
3122
  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3031
3123
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3034,42 +3126,70 @@ sv-popup {
3034
3126
  border-radius: 100%;
3035
3127
  background-color: transparent;
3036
3128
  }
3037
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
3129
+ .sv-popup--dropdown-overlay .sv-list__filter-clear-button svg {
3038
3130
  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3039
3131
  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3040
3132
  }
3041
- .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
3133
+ .sv-popup--dropdown-overlay .sv-list__filter-clear-button svg use {
3042
3134
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3043
3135
  }
3044
- .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
3136
+ .sv-popup--dropdown-overlay .sv-list__input {
3045
3137
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3046
3138
  font-size: var(--sjs-font-size, 16px);
3047
3139
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3048
3140
  font-family: var(--font-family);
3049
- padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
3141
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3050
3142
  }
3051
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
3052
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
3053
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused .sv-list__item-body {
3143
+ .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
3144
+ .sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-body,
3145
+ .sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-body {
3054
3146
  background: var(--sjs-general-backcolor, var(--background, #fff));
3055
3147
  }
3056
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
3057
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
3058
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
3148
+ .sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
3149
+ .sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
3150
+ .sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
3059
3151
  background: var(--sjs-primary-backcolor, var(--primary, #19b394));
3060
3152
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
3061
3153
  font-weight: 600;
3062
3154
  }
3155
+ .sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar {
3156
+ justify-content: flex-start;
3157
+ }
3158
+
3159
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter {
3160
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3161
+ }
3162
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list {
3163
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3164
+ }
3165
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
3166
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3167
+ }
3168
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__body-footer {
3169
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3170
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3171
+ background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3172
+ }
3173
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
3174
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3175
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3176
+ }
3177
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon {
3178
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3179
+ }
3180
+ .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__input {
3181
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
3182
+ }
3063
3183
 
3064
- .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
3065
- .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
3066
- .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
3184
+ .sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
3185
+ .sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
3186
+ .sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
3067
3187
  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3068
3188
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3069
3189
  font-weight: 400;
3070
3190
  }
3071
3191
 
3072
- .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
3192
+ .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content {
3073
3193
  --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
3074
3194
  --sv-popup-overlay-max-width: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
3075
3195
  position: absolute;
@@ -3077,7 +3197,7 @@ sv-popup {
3077
3197
  left: 50%;
3078
3198
  top: 50%;
3079
3199
  max-height: var(--sv-popup-overlay-max-height);
3080
- min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3200
+ min-height: min(var(--sv-popup-overlay-max-height), 30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3081
3201
  height: auto;
3082
3202
  width: auto;
3083
3203
  min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
@@ -3086,9 +3206,9 @@ sv-popup {
3086
3206
  overflow: hidden;
3087
3207
  margin: 0;
3088
3208
  }
3089
- .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
3090
- .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
3091
- .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-list__container {
3209
+ .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
3210
+ .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
3211
+ .sv-popup--dropdown-overlay.sv-popup--tablet .sv-list__container {
3092
3212
  flex-grow: 1;
3093
3213
  }
3094
3214
 
@@ -3408,7 +3528,7 @@ sv-popup {
3408
3528
  align-items: center;
3409
3529
  justify-content: center;
3410
3530
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3411
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
3531
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3412
3532
  font-size: var(--sjs-font-size, 16px);
3413
3533
  border-radius: 100%;
3414
3534
  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
@@ -3431,19 +3551,19 @@ sv-popup {
3431
3551
  overflow: hidden;
3432
3552
  text-overflow: ellipsis;
3433
3553
  white-space: nowrap;
3434
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
3554
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3435
3555
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3436
3556
  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3437
3557
  margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3438
3558
  }
3439
3559
 
3440
3560
  .sd-ranking--disabled .sv-ranking-item__text {
3441
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
3561
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3442
3562
  opacity: 0.25;
3443
3563
  }
3444
3564
 
3445
3565
  .sv-ranking-item--disabled .sv-ranking-item__text {
3446
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
3566
+ color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
3447
3567
  opacity: 0.25;
3448
3568
  }
3449
3569
 
@@ -3581,7 +3701,7 @@ sv-popup {
3581
3701
  }
3582
3702
 
3583
3703
  .sv-ranking__container-placeholder {
3584
- color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
3704
+ color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
3585
3705
  font-family: var(--font-family, var(--font-family));
3586
3706
  font-style: normal;
3587
3707
  font-size: var(--sjs-font-size, 16px);
@@ -3603,7 +3723,7 @@ sv-popup {
3603
3723
  }
3604
3724
 
3605
3725
  .sv-ranking__containers-divider {
3606
- background: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
3726
+ background: var(--sjs-border-default, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
3607
3727
  }
3608
3728
 
3609
3729
  .sv-ranking__container--from .sv-ranking-item__icon--focus {
@@ -3655,7 +3775,7 @@ sv-popup {
3655
3775
  padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
3656
3776
  padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3657
3777
  padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3658
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
3778
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3659
3779
  font-weight: normal;
3660
3780
  font-size: var(--sjs-font-size, 16px);
3661
3781
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -3748,7 +3868,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3748
3868
  .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
3749
3869
  .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover .sv-list__item-body {
3750
3870
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3751
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
3871
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3752
3872
  font-weight: 400;
3753
3873
  }
3754
3874