@rolster/react-components 18.21.14 → 18.21.16

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 (44) hide show
  1. package/dist/cjs/assets/{index-ogdfILLi.css → index-gIb32nSW.css} +82 -82
  2. package/dist/cjs/index.js +3 -3
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/es/assets/{index-ogdfILLi.css → index-gIb32nSW.css} +82 -82
  5. package/dist/es/index.js +3 -3
  6. package/dist/es/index.js.map +1 -1
  7. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +2 -2
  8. package/dist/esm/components/atoms/Button/Button.css +2 -2
  9. package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +2 -2
  10. package/dist/esm/components/atoms/Input/Input.css +2 -2
  11. package/dist/esm/components/atoms/InputPassword/InputPassword.css +2 -2
  12. package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +1 -1
  13. package/dist/esm/components/atoms/Poster/Poster.css +3 -3
  14. package/dist/esm/components/atoms/Switch/Switch.css +3 -3
  15. package/dist/esm/components/definitions.d.ts +1 -1
  16. package/dist/esm/components/molecules/Ballot/Ballot.css +2 -2
  17. package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +4 -4
  18. package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.css +1 -1
  19. package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.css +1 -1
  20. package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.css +1 -1
  21. package/dist/esm/components/molecules/Pagination/Pagination.css +5 -5
  22. package/dist/esm/components/molecules/PickerDay/PickerDay.css +7 -7
  23. package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.css +8 -8
  24. package/dist/esm/components/molecules/PickerMonth/PickerMonth.css +2 -2
  25. package/dist/esm/components/molecules/PickerSelectorTitle/PickerSelectorTitle.css +1 -1
  26. package/dist/esm/components/molecules/PickerYear/PickerYear.css +7 -7
  27. package/dist/esm/components/molecules/Toolbar/Toolbar.css +2 -2
  28. package/dist/esm/components/organisms/Card/Card.css +1 -1
  29. package/dist/esm/components/organisms/Confirmation/Confirmation.css +3 -3
  30. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.css +5 -5
  31. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +2 -2
  32. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
  33. package/dist/esm/components/organisms/FieldDate/FieldDate.css +3 -3
  34. package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.css +2 -2
  35. package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +2 -2
  36. package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
  37. package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +1 -1
  38. package/dist/esm/components/organisms/Modal/Modal.css +1 -1
  39. package/dist/esm/components/organisms/PickerDate/PickerDate.css +2 -2
  40. package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.css +3 -3
  41. package/dist/esm/components/organisms/Snackbar/Snackbar.css +3 -3
  42. package/dist/esm/controllers/ListController.js +1 -1
  43. package/dist/esm/controllers/ListController.js.map +1 -1
  44. package/package.json +5 -5
package/dist/cjs/assets/{index-ogdfILLi.css → index-gIb32nSW.css} RENAMED
@@ -75,7 +75,7 @@
75
75
  }
76
76
 
77
77
  .rls-breadcrumb {
78
- --pvt-link-font-color: var(--rls-app-color-300);
78
+ --pvt-link-font-color: var(--rls-app-color-600);
79
79
  display: -webkit-box;
80
80
  width: 100%;
81
81
  height: var(--rlc-breadcrumb-height);
@@ -85,7 +85,7 @@
85
85
  user-select: none;
86
86
  overflow: auto;
87
87
  overflow-y: hidden;
88
- color: var(--rls-app-color-300);
88
+ color: var(--rls-app-color-600);
89
89
  font-weight: var(--rls-font-weight-medium);
90
90
  }
91
91
  .rls-breadcrumb::-webkit-scrollbar {
@@ -172,7 +172,7 @@
172
172
  --pvt-stroked-font-color: var(--rls-theme-color-500);
173
173
  --pvt-stroked-border: var(--rls-theme-border-1-500);
174
174
  --pvt-outline-background: transparent;
175
- --pvt-outline-font-color: var(--rls-app-color-300);
175
+ --pvt-outline-font-color: var(--rls-app-color-600);
176
176
  --pvt-outline-border: var(--rls-app-border-1-300);
177
177
  --pvt-ghost-background: none;
178
178
  --pvt-ghost-font-color: var(--rls-theme-color-500);
@@ -224,7 +224,7 @@
224
224
  --pvt-stroked-font-color: var(--rls-theme-color-300);
225
225
  --pvt-stroked-border: var(--rls-theme-border-1-300);
226
226
  --pvt-outline-background: transparent;
227
- --pvt-outline-font-color: var(--rls-app-color-100);
227
+ --pvt-outline-font-color: var(--rls-app-color-400);
228
228
  --pvt-outline-border: var(--rls-app-border-1-100);
229
229
  --pvt-ghost-background: transparent;
230
230
  --pvt-ghost-font-color: var(--rls-theme-color-300);
@@ -403,8 +403,8 @@
403
403
  white-space: nowrap;
404
404
  pointer-events: none;
405
405
  transform: translateX(-50%);
406
- background: var(--rls-dark-color-500);
407
- color: var(--rls-light-color-500);
406
+ background: var(--rls-app-color-900);
407
+ color: var(--rls-app-color-050);
408
408
  transition: opacity 200ms 0ms var(--rls-deceleration-curve);
409
409
  opacity: var(--pvt-tooltip-opacity);
410
410
  transition-delay: var(--pvt-tooltip-transition-delay);
@@ -493,11 +493,11 @@
493
493
  -webkit-appearance: none;
494
494
  }
495
495
  .rls-input__component::placeholder {
496
- color: var(--rls-app-color-100);
496
+ color: var(--rls-app-color-400);
497
497
  }
498
498
  .rls-input__component::selection {
499
499
  background: var(--rls-theme-color-700);
500
- color: var(--rls-light-color-500);
500
+ color: var(--rls-app-color-050);
501
501
  }
502
502
  .rls-input__component:disabled {
503
503
  opacity: 0.5;
@@ -562,11 +562,11 @@
562
562
  -webkit-appearance: none;
563
563
  }
564
564
  .rls-input-password__component::placeholder {
565
- color: var(--rls-app-color-100);
565
+ color: var(--rls-app-color-400);
566
566
  }
567
567
  .rls-input-password__component::selection {
568
568
  background: var(--rls-theme-color-700);
569
- color: var(--rls-light-color-500);
569
+ color: var(--rls-app-color-050);
570
570
  }
571
571
  .rls-input-password__component:disabled {
572
572
  opacity: 0.5;
@@ -609,13 +609,13 @@
609
609
  .rls-message-icon span {
610
610
  font-size: var(--rls-caption-font-size);
611
611
  letter-spacing: var(--rls-caption-letter-spacing);
612
- color: var(--rls-app-color-300);
612
+ color: var(--rls-app-color-600);
613
613
  }
614
614
 
615
615
  .rls-poster {
616
616
  --pvt-background: var(--rls-theme-color-100);
617
617
  --pvt-border-content: none;
618
- --pvt-border-color: var(--rls-app-color-100);
618
+ --pvt-border-color: var(--rls-app-color-400);
619
619
  position: relative;
620
620
  display: block;
621
621
  width: auto;
@@ -627,8 +627,8 @@
627
627
  padding: var(--rlc-poster-padding);
628
628
  text-align: var(--rlc-poster-text-align);
629
629
  border-radius: var(--rls-sizing-x2);
630
- color: var(--rls-app-color-300);
631
- background: var(--rls-app-background-100);
630
+ color: var(--rls-app-color-600);
631
+ background: var(--rls-app-color-200);
632
632
  border: var(--pvt-border-content);
633
633
  }
634
634
  .rls-poster[rls-theme] {
@@ -854,8 +854,8 @@
854
854
 
855
855
  .rls-switch {
856
856
  --pvt-element-left: var(--rls-sizing-x1);
857
- --pvt-element-background: var(--rls-app-background-500);
858
- --pvt-bar-background: var(--rls-app-background-100);
857
+ --pvt-element-background: var(--rls-app-color-050);
858
+ --pvt-bar-background: var(--rls-app-color-200);
859
859
  max-width: var(--rls-sizing-x20);
860
860
  }
861
861
  .rls-switch:hover {
@@ -888,7 +888,7 @@
888
888
  padding: var(--rls-sizing-x2);
889
889
  box-sizing: border-box;
890
890
  border-radius: 50%;
891
- background: var(--rls-app-background-500);
891
+ background: var(--rls-app-color-050);
892
892
  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
893
893
  /*transition: left 240ms var(--rls-standard-curve);*/
894
894
  }
@@ -971,7 +971,7 @@
971
971
  --rlc-skeleton-text-font-size: var(--rlc-ballot-title-font-size);
972
972
  position: relative;
973
973
  width: 100%;
974
- color: var(--rls-app-color-500);
974
+ color: var(--rls-app-color-900);
975
975
  overflow: hidden;
976
976
  white-space: nowrap;
977
977
  text-overflow: ellipsis;
@@ -987,7 +987,7 @@
987
987
  --rlc-skeleton-text-font-size: var(--rlc-ballot-subtitle-font-size);
988
988
  position: relative;
989
989
  width: var(--rlc-ballot-subtitle-width);
990
- color: var(--rls-app-color-300);
990
+ color: var(--rls-app-color-600);
991
991
  font-weight: var(--rlc-ballot-subtitle-font-weight);
992
992
  font-size: var(--rls-ballot-subtitle-font-size);
993
993
  letter-spacing: var(--rlc-ballot-subtitle-letter-spacing);
@@ -1062,7 +1062,7 @@
1062
1062
  overflow-y: auto;
1063
1063
  overflow-x: hidden;
1064
1064
  z-index: var(--rls-z-index-2);
1065
- background: var(--rls-app-background-500);
1065
+ background: var(--rls-app-color-050);
1066
1066
  border: var(--rls-theme-border-1-500);
1067
1067
  transform: var(--rlc-button-toggle-ul-transform);
1068
1068
  transform-origin: 0% 0%;
@@ -1080,11 +1080,11 @@
1080
1080
  font-size: 6rem;
1081
1081
  letter-spacing: 0.825px;
1082
1082
  text-transform: uppercase;
1083
- color: var(--rls-app-color-300);
1083
+ color: var(--rls-app-color-600);
1084
1084
  }
1085
1085
  .rls-button-toggle__list ul li:hover {
1086
- background: var(--rls-app-background-300);
1087
- color: var(--rls-app-color-500);
1086
+ background: var(--rls-app-color-100);
1087
+ color: var(--rls-app-color-900);
1088
1088
  }
1089
1089
 
1090
1090
  .rls-field-money {
@@ -1157,7 +1157,7 @@
1157
1157
  max-width: calc(100% - var(--rls-sizing-x16));
1158
1158
  height: var(--pvt-text-height);
1159
1159
  line-height: var(--rls-sizing-x12);
1160
- color: var(--rls-app-color-300);
1160
+ color: var(--rls-app-color-600);
1161
1161
  font-size: var(--rls-label-font-size);
1162
1162
  font-weight: var(--rls-font-weight-medium);
1163
1163
  letter-spacing: var(--rls-label-letter-spacing);
@@ -1196,7 +1196,7 @@
1196
1196
  max-width: calc(100% - var(--rls-sizing-x16));
1197
1197
  height: var(--pvt-text-height);
1198
1198
  line-height: var(--rls-sizing-x12);
1199
- color: var(--rls-app-color-300);
1199
+ color: var(--rls-app-color-600);
1200
1200
  font-size: var(--rls-label-font-size);
1201
1201
  font-weight: var(--rls-font-weight-medium);
1202
1202
  letter-spacing: var(--rls-label-letter-spacing);
@@ -1233,7 +1233,7 @@
1233
1233
  max-width: calc(100% - var(--rls-sizing-x28));
1234
1234
  height: var(--pvt-text-height);
1235
1235
  line-height: var(--rls-sizing-x12);
1236
- color: var(--rls-app-color-300);
1236
+ color: var(--rls-app-color-600);
1237
1237
  font-size: var(--rls-label-font-size);
1238
1238
  font-weight: var(--rls-font-weight-medium);
1239
1239
  letter-spacing: var(--rls-label-letter-spacing);
@@ -1261,8 +1261,8 @@
1261
1261
  margin: 0rem var(--rls-sizing-x4);
1262
1262
  }
1263
1263
  .rls-pagination__page {
1264
- background: var(--rls-app-background-100);
1265
- color: var(--rls-app-color-500);
1264
+ background: var(--rls-app-color-200);
1265
+ color: var(--rls-app-color-900);
1266
1266
  cursor: default;
1267
1267
  margin: auto 0rem;
1268
1268
  text-align: center;
@@ -1279,10 +1279,10 @@
1279
1279
  }
1280
1280
  .rls-pagination__page--active {
1281
1281
  background: var(--rls-theme-gradient-500);
1282
- color: var(--rls-light-color-500);
1282
+ color: var(--rls-app-color-050);
1283
1283
  }
1284
1284
  .rls-pagination__description {
1285
- color: var(--rls-app-color-500);
1285
+ color: var(--rls-app-color-900);
1286
1286
  margin: 0rem var(--rls-sizing-x4);
1287
1287
  width: auto;
1288
1288
  height: var(--rls-sizing-x20);
@@ -1297,7 +1297,7 @@
1297
1297
  .rls-pagination__action {
1298
1298
  background: none;
1299
1299
  outline: none;
1300
- color: var(--rls-app-color-300);
1300
+ color: var(--rls-app-color-600);
1301
1301
  height: var(--rls-sizing-x18);
1302
1302
  width: var(--rls-sizing-x18);
1303
1303
  padding: var(--rls-sizing-x3);
@@ -1314,7 +1314,7 @@
1314
1314
 
1315
1315
  .rls-picker-day {
1316
1316
  --pvt-span-background: transparent;
1317
- --pvt-span-font-color: var(--rls-app-color-500);
1317
+ --pvt-span-font-color: var(--rls-app-color-900);
1318
1318
  --pvt-span-border: var(--rls-border-1) solid transparent;
1319
1319
  position: relative;
1320
1320
  width: 100%;
@@ -1325,8 +1325,8 @@
1325
1325
  .rls-picker-day__header {
1326
1326
  display: flex;
1327
1327
  margin-bottom: var(--rls-sizing-x4);
1328
- background: var(--rls-app-background-100);
1329
- color: var(--rls-app-color-500);
1328
+ background: var(--rls-app-color-100);
1329
+ color: var(--rls-app-color-900);
1330
1330
  border-radius: var(--rls-sizing-x4);
1331
1331
  }
1332
1332
  .rls-picker-day__label {
@@ -1381,14 +1381,14 @@
1381
1381
  --pvt-span-border: var(--rls-theme-border-1-500);
1382
1382
  }
1383
1383
  .rls-picker-day__element--forbidden {
1384
- --pvt-span-background: var(--rls-app-background-300);
1385
- --pvt-span-font-color: var(--rls-app-color-100);
1386
- --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
1384
+ --pvt-span-background: var(--rls-app-color-100);
1385
+ --pvt-span-font-color: var(--rls-app-color-400);
1386
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-color-100);
1387
1387
  pointer-events: none;
1388
1388
  }
1389
1389
  .rls-picker-day__element--disabled {
1390
1390
  --pvt-span-background: transparent;
1391
- --pvt-span-font-color: var(--rls-app-color-100);
1391
+ --pvt-span-font-color: var(--rls-app-color-400);
1392
1392
  --pvt-span-border: var(--rls-border-1) solid transparent;
1393
1393
  pointer-events: none;
1394
1394
  }
@@ -1417,8 +1417,8 @@
1417
1417
  }
1418
1418
  .rls-picker-day-range__header {
1419
1419
  display: flex;
1420
- background: var(--rls-app-background-100);
1421
- color: var(--rls-app-color-500);
1420
+ background: var(--rls-app-color-200);
1421
+ color: var(--rls-app-color-900);
1422
1422
  border-radius: var(--rls-sizing-x2);
1423
1423
  }
1424
1424
  .rls-picker-day-range__label {
@@ -1439,7 +1439,7 @@
1439
1439
  .rls-picker-day-range__element__span {
1440
1440
  position: relative;
1441
1441
  display: block;
1442
- color: var(--rls-app-color-500);
1442
+ color: var(--rls-app-color-900);
1443
1443
  border-radius: var(--rls-sizing-x4);
1444
1444
  height: var(--rls-sizing-x18);
1445
1445
  line-height: var(--rls-sizing-x18);
@@ -1452,22 +1452,22 @@
1452
1452
  color: var(--pvt-span-nothover-font-color);
1453
1453
  }
1454
1454
  .rls-picker-day-range__element__span:hover {
1455
- color: var(--rls-light-color-500);
1455
+ color: var(--rls-app-color-050);
1456
1456
  background: var(--rls-theme-color-900);
1457
1457
  }
1458
1458
  .rls-picker-day-range__element--end {
1459
- --pvt-span-nothover-background: var(--rls-app-color-500);
1460
- --pvt-span-nothover-font-color: var(--rls-app-background-500);
1459
+ --pvt-span-nothover-background: var(--rls-app-color-900);
1460
+ --pvt-span-nothover-font-color: var(--rls-app-color-050);
1461
1461
  }
1462
1462
  .rls-picker-day-range__element--source {
1463
1463
  --pvt-span-nothover-background: var(--rls-theme-color-500);
1464
- --pvt-span-nothover-font-color: var(--rls-light-color-500);
1464
+ --pvt-span-nothover-font-color: var(--rls-app-color-050);
1465
1465
  }
1466
1466
  .rls-picker-day-range__element--ranged {
1467
1467
  --pvt-span-nothover-background: var(--rls-theme-color-100);
1468
1468
  }
1469
1469
  .rls-picker-day-range__element--forbidden {
1470
- --pvt-span-background: var(--rls-app-background-100);
1470
+ --pvt-span-background: var(--rls-app-color-200);
1471
1471
  pointer-events: none;
1472
1472
  opacity: 0.5;
1473
1473
  }
@@ -1478,7 +1478,7 @@
1478
1478
 
1479
1479
  .rls-picker-month {
1480
1480
  --pvt-component-background: transparent;
1481
- --pvt-component-font-color: var(--rls-app-color-500);
1481
+ --pvt-component-font-color: var(--rls-app-color-900);
1482
1482
  --pvt-component-border: var(--rls-border-1) solid transparent;
1483
1483
  position: relative;
1484
1484
  display: grid;
@@ -1520,7 +1520,7 @@
1520
1520
  }
1521
1521
  .rls-picker-month__component--disabled {
1522
1522
  --pvt-component-background: transparent;
1523
- --pvt-component-font-color: var(--rls-app-color-100);
1523
+ --pvt-component-font-color: var(--rls-app-color-400);
1524
1524
  --pvt-component-border: var(--rls-border-1) solid transparent;
1525
1525
  pointer-events: none;
1526
1526
  }
@@ -1538,7 +1538,7 @@
1538
1538
  align-items: center;
1539
1539
  }
1540
1540
  .rls-picker-selector-title span {
1541
- color: var(--rls-app-color-300);
1541
+ color: var(--rls-app-color-600);
1542
1542
  cursor: default;
1543
1543
  height: var(--rls-sizing-x14);
1544
1544
  line-height: var(--rls-sizing-x14);
@@ -1551,7 +1551,7 @@
1551
1551
 
1552
1552
  .rls-picker-year {
1553
1553
  --pvt-component-background: transparent;
1554
- --pvt-component-font-color: var(--rls-app-color-300);
1554
+ --pvt-component-font-color: var(--rls-app-color-600);
1555
1555
  --pvt-component-border: var(--rls-border-1) solid transparent;
1556
1556
  position: relative;
1557
1557
  width: 100%;
@@ -1566,8 +1566,8 @@
1566
1566
  align-items: center;
1567
1567
  box-sizing: border-box;
1568
1568
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
1569
- color: var(--rls-app-color-500);
1570
- background: var(--rls-app-background-100);
1569
+ color: var(--rls-app-color-900);
1570
+ background: var(--rls-app-color-200);
1571
1571
  border-radius: var(--rls-sizing-x4);
1572
1572
  }
1573
1573
  .rls-picker-year__header > label {
@@ -1581,7 +1581,7 @@
1581
1581
  line-height: var(--rls-sizing-x16);
1582
1582
  }
1583
1583
  .rls-picker-year__action button {
1584
- color: var(--rls-app-color-500);
1584
+ color: var(--rls-app-color-900);
1585
1585
  background: transparent;
1586
1586
  outline: none;
1587
1587
  width: inherit;
@@ -1632,9 +1632,9 @@
1632
1632
  --pvt-component-border: var(--rls-theme-border-1-500);
1633
1633
  }
1634
1634
  .rls-picker-year__element--disabled {
1635
- --pvt-span-background: var(--rls-app-background-300);
1636
- --pvt-component-font-color: var(--rls-app-color-100);
1637
- --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
1635
+ --pvt-span-background: var(--rls-app-color-100);
1636
+ --pvt-component-font-color: var(--rls-app-color-400);
1637
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-color-100);
1638
1638
  pointer-events: none;
1639
1639
  }
1640
1640
  .rls-picker-year__span {
@@ -1669,7 +1669,7 @@
1669
1669
  white-space: nowrap;
1670
1670
  }
1671
1671
  .rls-toolbar__title {
1672
- color: var(--rls-app-color-500);
1672
+ color: var(--rls-app-color-900);
1673
1673
  height: var(--rls-sizing-x12);
1674
1674
  line-height: var(--rls-sizing-x12);
1675
1675
  font-size: 8.125rem;
@@ -1677,7 +1677,7 @@
1677
1677
  font-weight: var(--rls-font-weight-bold);
1678
1678
  }
1679
1679
  .rls-toolbar__subtitle {
1680
- color: var(--rls-app-color-300);
1680
+ color: var(--rls-app-color-600);
1681
1681
  }
1682
1682
  .rls-toolbar__actions {
1683
1683
  display: flex;
@@ -1687,7 +1687,7 @@
1687
1687
  }
1688
1688
 
1689
1689
  .rls-card {
1690
- background: var(--rls-app-background-500);
1690
+ background: var(--rls-app-color-050);
1691
1691
  border-radius: var(--rls-sizing-x4);
1692
1692
  box-shadow: var(--rls-light-shadow-center-8);
1693
1693
  }
@@ -1754,7 +1754,7 @@
1754
1754
  box-sizing: border-box;
1755
1755
  z-index: var(--rls-z-index-4);
1756
1756
  border-radius: var(--rls-sizing-x4);
1757
- background: var(--rls-app-background-500);
1757
+ background: var(--rls-app-color-050);
1758
1758
  box-shadow: var(--rls-app-shadow-4);
1759
1759
  transform: var(--pvt-component-transform);
1760
1760
  /*transition: opacity 125ms 0ms var(--rls-deceleration-curve),
@@ -1772,7 +1772,7 @@
1772
1772
  }
1773
1773
  .rls-confirmation__title {
1774
1774
  text-align: center;
1775
- color: var(--rls-app-color-500);
1775
+ color: var(--rls-app-color-900);
1776
1776
  font-weight: var(--rls-font-weight-bold);
1777
1777
  font-size: var(--pvt-title-font-size);
1778
1778
  line-height: var(--pvt-title-line-height);
@@ -1795,7 +1795,7 @@
1795
1795
  box-sizing: border-box;
1796
1796
  }
1797
1797
  .rls-confirmation__message {
1798
- color: var(--rls-app-color-300);
1798
+ color: var(--rls-app-color-600);
1799
1799
  text-align: center;
1800
1800
  }
1801
1801
  .rls-confirmation__message p {
@@ -1872,13 +1872,13 @@
1872
1872
  width: 100%;
1873
1873
  margin-top: var(--rls-sizing-x2);
1874
1874
  margin-bottom: var(--rls-sizing-x6);
1875
- background: var(--rls-app-background-300);
1875
+ background: var(--rls-app-color-100);
1876
1876
  border-radius: var(--rls-sizing-x4);
1877
1877
  padding: var(--rls-sizing-x4);
1878
1878
  box-sizing: border-box;
1879
1879
  }
1880
1880
  .rls-field-autocomplete .rls-field-list__ul__search button {
1881
- color: var(--rls-app-color-300);
1881
+ color: var(--rls-app-color-600);
1882
1882
  background: transparent;
1883
1883
  }
1884
1884
  .rls-field-autocomplete
@@ -1898,17 +1898,17 @@
1898
1898
  border: none;
1899
1899
  outline: none;
1900
1900
  background: transparent;
1901
- color: var(--rls-app-color-500);
1901
+ color: var(--rls-app-color-900);
1902
1902
  font-size: var(--rls-input-font-size);
1903
1903
  font-weight: var(--rls-font-weight-medium);
1904
1904
  letter-spacing: var(--rls-input-letter-spacing);
1905
1905
  }
1906
1906
  .rls-field-autocomplete .rls-field-list__ul__control::placeholder {
1907
- color: var(--rls-app-color-100);
1907
+ color: var(--rls-app-color-400);
1908
1908
  }
1909
1909
  .rls-field-autocomplete .rls-field-list__ul__control::selection {
1910
1910
  background: var(--rls-theme-color-700);
1911
- color: var(--rls-light-color-500);
1911
+ color: var(--rls-app-color-050);
1912
1912
  }
1913
1913
  .rls-field-autocomplete .rls-field-list__ul__control:disabled {
1914
1914
  opacity: 0.5;
@@ -1958,7 +1958,7 @@
1958
1958
  z-index: var(--rls-z-index-2);
1959
1959
  overflow: var(--pvt-component-overflow);
1960
1960
  border-radius: var(--rls-sizing-x4);
1961
- background: var(--rls-app-background-500);
1961
+ background: var(--rls-app-color-050);
1962
1962
  transform: var(--pvt-component-transform);
1963
1963
  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
1964
1964
  transform 125ms 0ms var(--rls-deceleration-curve),
@@ -2001,7 +2001,7 @@
2001
2001
  box-sizing: border-box;
2002
2002
  }
2003
2003
  .rls-picker-date__title {
2004
- color: var(--rls-app-color-500);
2004
+ color: var(--rls-app-color-900);
2005
2005
  text-align: center;
2006
2006
  cursor: default;
2007
2007
  font-weight: var(--rls-font-weight-bold);
@@ -2018,7 +2018,7 @@
2018
2018
  height: var(--rls-sizing-x16);
2019
2019
  line-height: var(--rls-sizing-x16);
2020
2020
  font-size: var(--rls-sizing-x12);
2021
- color: var(--rls-app-color-300);
2021
+ color: var(--rls-app-color-600);
2022
2022
  }
2023
2023
  .rls-picker-date__component {
2024
2024
  display: flex;
@@ -2077,19 +2077,19 @@
2077
2077
  border: none;
2078
2078
  outline: none;
2079
2079
  background: transparent;
2080
- color: var(--rls-app-color-500);
2080
+ color: var(--rls-app-color-900);
2081
2081
  font-weight: var(--rls-font-weight-medium);
2082
2082
  font-size: var(--rlc-input-font-size);
2083
2083
  letter-spacing: var(--rlc-input-letter-spacing);
2084
2084
  }
2085
2085
  .rls-field-date__control::placeholder {
2086
- color: var(--rls-app-color-100);
2086
+ color: var(--rls-app-color-400);
2087
2087
  }
2088
2088
  .rls-field-date__control:disabled {
2089
2089
  opacity: 0.5;
2090
2090
  }
2091
2091
  .rls-field-date__action {
2092
- color: var(--rls-app-color-300);
2092
+ color: var(--rls-app-color-600);
2093
2093
  width: var(--rls-sizing-x12);
2094
2094
  height: var(--rls-sizing-x12);
2095
2095
  padding: 0rem;
@@ -2113,7 +2113,7 @@
2113
2113
  box-sizing: border-box;
2114
2114
  }
2115
2115
  .rls-picker-date-range__title {
2116
- color: var(--rls-app-color-500);
2116
+ color: var(--rls-app-color-900);
2117
2117
  text-align: center;
2118
2118
  cursor: default;
2119
2119
  font-weight: var(--rls-font-weight-bold);
@@ -2131,7 +2131,7 @@
2131
2131
  height: var(--rls-sizing-x16);
2132
2132
  line-height: var(--rls-sizing-x16);
2133
2133
  font-size: var(--rls-sizing-x12);
2134
- color: var(--rls-app-color-300);
2134
+ color: var(--rls-app-color-600);
2135
2135
  }
2136
2136
  .rls-picker-date-range__title--month {
2137
2137
  display: flex;
@@ -2141,7 +2141,7 @@
2141
2141
  height: var(--rls-sizing-x14);
2142
2142
  line-height: var(--rls-sizing-x14);
2143
2143
  font-size: var(--rls-sizing-x10);
2144
- color: var(--rls-app-color-300);
2144
+ color: var(--rls-app-color-600);
2145
2145
  margin: auto 0rem;
2146
2146
  }
2147
2147
  .rls-picker-date-range__component {
@@ -2200,13 +2200,13 @@
2200
2200
  letter-spacing: var(--rlc-input-letter-spacing);
2201
2201
  }
2202
2202
  .rls-field-date-range__control::placeholder {
2203
- color: var(--rls-app-color-100);
2203
+ color: var(--rls-app-color-400);
2204
2204
  }
2205
2205
  .rls-field-date-range__control:disabled {
2206
2206
  opacity: 0.5;
2207
2207
  }
2208
2208
  .rls-field-date-range__action {
2209
- color: var(--rls-app-color-300);
2209
+ color: var(--rls-app-color-600);
2210
2210
  width: var(--rls-sizing-x12);
2211
2211
  height: var(--rls-sizing-x12);
2212
2212
  padding: 0rem;
@@ -2237,7 +2237,7 @@
2237
2237
  padding: var(--rls-sizing-x8) var(--rls-sizing-x8) var(--rls-sizing-x12)
2238
2238
  var(--rls-sizing-x8);
2239
2239
  box-sizing: border-box;
2240
- background: var(--rls-app-background-500);
2240
+ background: var(--rls-app-color-050);
2241
2241
  border-radius: var(--rls-sizing-x4);
2242
2242
  box-shadow: var(--rls-dark-shadow-center-8);
2243
2243
  transform: translateX(calc(100% + var(--rls-sizing-x16)));
@@ -2269,7 +2269,7 @@
2269
2269
  padding: var(--rls-sizing-x6);
2270
2270
  box-sizing: border-box;
2271
2271
  border-radius: var(--rls-sizing-x4);
2272
- background: var(--rls-app-background-500);
2272
+ background: var(--rls-app-color-050);
2273
2273
  box-shadow: var(--rls-light-shadow-bottom-4);
2274
2274
  border: var(--rls-theme-border-1-300);
2275
2275
  transform: translate(-50%, 100%);
@@ -2279,7 +2279,7 @@
2279
2279
  transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
2280
2280
  }
2281
2281
  .rls-snackbar__avatar {
2282
- --rlc-icon-color: var(--rls-light-color-500);
2282
+ --rlc-icon-color: var(--rls-app-color-050);
2283
2283
  display: flex;
2284
2284
  justify-content: center;
2285
2285
  align-items: center;
@@ -2308,7 +2308,7 @@
2308
2308
  }
2309
2309
  .rls-snackbar__content p {
2310
2310
  line-height: var(--rls-sizing-x10);
2311
- color: var(--rls-app-color-300);
2311
+ color: var(--rls-app-color-600);
2312
2312
  font-size: var(--rls-label-font-size);
2313
2313
  font-weight: var(--rls-font-weight-medium);
2314
2314
  letter-spacing: var(--rls-label-letter-spacing);
package/dist/cjs/index.js CHANGED
@@ -2466,7 +2466,7 @@ function useListController(props) {
2466
2466
  const _state = state.modalIsVisible
2467
2467
  ? {
2468
2468
  ...state,
2469
- higher: components.locationListCanTop(contentRef.current, listRef.current)
2469
+ higher: components.locationListCanTop(contentRef.current, listRef.current, 160)
2470
2470
  }
2471
2471
  : state;
2472
2472
  refreshState((state) => ({ ...state, ..._state }));
@@ -2664,7 +2664,7 @@ function RlsFieldAutocompleteTemplate(props) {
2664
2664
  const onClickSearch = require$$0.useCallback(() => {
2665
2665
  onSearch && onSearch(autocomplete.pattern);
2666
2666
  }, [onSearch, autocomplete.pattern]);
2667
- return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx("div", { className: classNameList, children: autocomplete.modalIsVisible && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onInputSearch, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: onClickSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })) })] }));
2667
+ return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onInputSearch, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: onClickSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
2668
2668
  }
2669
2669
  function RlsFieldAutocomplete(props) {
2670
2670
  return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
@@ -3040,7 +3040,7 @@ function RlsFieldSelectTemplate(props) {
3040
3040
  visible: select.modalIsVisible
3041
3041
  });
3042
3042
  }, [select.modalIsVisible, select.higher]);
3043
- return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx("div", { className: classNameList, children: select.modalIsVisible && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })) })] }));
3043
+ return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
3044
3044
  }
3045
3045
  function RlsFieldSelect(props) {
3046
3046
  return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));